/* Estadísticas → Consultas por hora (consultas.js) */
#usage-stats { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
#usage-stats .stats { margin-bottom: 0; }
.usage-head { align-items: flex-start; flex-wrap: wrap; }
.usage-head > div:first-child { flex: 1 1 320px; }
.usage-head .hint { margin-bottom: 0; }
.usage-hours { gap: 3px; }
.usage-hours i.peak { background: linear-gradient(180deg, var(--gold), var(--gold-brand)); }
.usage-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px !important; }
.usage-list { display: flex; flex-direction: column; }
.usage-row {
  display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 6px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; border-radius: 0;
}
.usage-row:first-child { border-top: 0; }
.usage-row:hover { background: rgba(255, 255, 255, .03); }
.usage-row.sel { background: rgba(167, 123, 243, .12); border-radius: 10px; }
.usage-rank { color: var(--muted); font-size: 12px; text-align: right; }
.usage-name { min-width: 0; }
.usage-name b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-name small { color: var(--muted); font-size: 11.5px; }
.usage-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.usage-bar i { display: block; height: 100%; background: var(--purple); border-radius: 4px; }
.usage-n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 36px; text-align: right; }
@media (max-width: 760px) {
  .usage-hours span { font-size: 9px; }
  .usage-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .usage-bar { display: none; }
}