/* ==========================================================================
   DJ Manager 128K · diseño «Consola de cabina»
   Se carga encima de app.css cuando Ajustes → Diseño = Consola; quitarlo devuelve el diseño clásico tal cual.
   Grafito cálido, un solo rojo 128K, títulos condensados (Barlow Condensed), texto en Barlow y cifras en
   IBM Plex Mono. Líneas finas en lugar de cajas, esquinas casi rectas, sin degradados, halos ni sombras.
   Fuentes SIL OFL 1.1 servidas desde la propia app (sin peticiones a terceros).
   ========================================================================== */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: fallback; src: url("/static/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: fallback; src: url("/static/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: fallback; src: url("/static/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: fallback; src: url("/static/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/barlow-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/barlow-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: fallback; src: url("/static/fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: fallback; src: url("/static/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: fallback; src: url("/static/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: fallback; src: url("/static/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: fallback; src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: fallback; src: url("/static/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: fallback; src: url("/static/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* grafito cálido: tres planos muy próximos; la estructura la dan las líneas, no las cajas */
  --bg: #0d0d0c;
  --s1: #131311;
  --s2: #1a1a17;
  --s3: #22221e;
  --line: #2a2925;
  --line-2: #3b3a34;
  /* texto (AA sobre --s3: t1 14:1 · t2 7:1 · t3 4,7:1) */
  --t1: #ecebe5;
  --t2: #b4b1a7;
  --t3: #96938a;
  /* un solo color de marca: el rojo 128K (blanco encima 5:1) */
  --red: #d42a25;
  --red-h: #bb221e;
  --red-soft: rgba(212, 42, 37, .12);
  --red-line: rgba(212, 42, 37, .45);
  --red-t: #ff8f8a;
  --ok: #57d29c; --ok-soft: rgba(87, 210, 156, .10); --ok-line: rgba(87, 210, 156, .35);
  --warn: #e9b949; --warn-soft: rgba(233, 185, 73, .10); --warn-line: rgba(233, 185, 73, .35);
  --info: #9db4e8; --info-soft: rgba(157, 180, 232, .10);
  /* esquinas casi rectas: hardware, no burbujas */
  --r-sm: 2px; --r: 3px; --r-lg: 4px; --r-pill: 2px;
  --sh-pop: 0 0 0 1px var(--line-2), 0 16px 40px rgba(0, 0, 0, .6);
  --font: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body { font-size: 15.5px; line-height: 1.5; font-feature-settings: normal; letter-spacing: .005em; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: .01em; }
h1 { font-weight: 700; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.35rem); text-transform: uppercase; line-height: 1; }
h2 { font-weight: 600; font-size: 1.22rem; text-transform: uppercase; letter-spacing: .04em; }
h3 { font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; }
h4 { font-weight: 600; letter-spacing: .03em; }
.mono, .num, code { font-family: var(--mono); }
code { border-radius: var(--r-sm); background: var(--s3); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-t); outline-offset: 2px; border-radius: 0; }

/* ── Menú lateral: lista de texto, como el navegador de un mixer ─────────── */
.side { background: var(--bg); border-right-color: var(--line); padding: 16px 0; }
.brand { padding: 2px 18px 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.brand-mark { border-radius: 2px; background: transparent; }
.brand-mark i { box-shadow: none; border-radius: 50%; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; }
.brand-name small { font-family: var(--mono); font-weight: 500; letter-spacing: .18em; font-size: .58rem; }
.entorno-badge { border-radius: 2px; font-family: var(--mono); letter-spacing: .1em; }
.navgroup { margin-top: 18px; }
.navgroup-t { font-family: var(--mono); font-weight: 500; font-size: .64rem; letter-spacing: .18em; padding: 0 18px 6px; color: var(--t3); }
.navlink { border-radius: 0; padding: 7px 18px; font-family: var(--display); font-size: 1.05rem; font-weight: 500; letter-spacing: .02em;
  color: var(--t2); gap: 12px; }  /* la misma letra condensada que títulos y botones, en minúsculas para leer mejor la lista */
.navlink[aria-current="page"] { font-weight: 600; }
.side-foot .navlink, .sheet .navlink { font-family: var(--display); }
.navlink .icon { width: 16px; height: 16px; stroke-width: 1.7; color: var(--t3); }
.navlink:hover { background: var(--s1); color: var(--t1); }
.navlink:hover .icon { color: var(--t2); }
.navlink[aria-current="page"] { background: var(--s1); color: var(--t1); }
.navlink[aria-current="page"]::before { left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; }
.navlink[aria-current="page"] .icon { color: var(--red-t); }
.count { border-radius: 2px; font: 500 .68rem/20px var(--mono); min-width: 22px; }
.side-foot { padding: 0 12px; }
.wrap { padding-top: 30px; }

/* ── Cabecera de página: título condensado sobre una regla ───────────────── */
.phead { align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.phead .eyebrow { font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .2em; color: var(--t3); margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px; }
.phead .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.phead .eyebrow a { color: inherit; text-decoration: none; }
.phead .eyebrow a:hover { color: var(--t1); }
.phead p { color: var(--t2); margin-top: 10px; }
.section { margin-top: 40px; }
.section-h { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.section-h p { font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; }
.section-h h2 .icon, .card h3 .icon { color: var(--t3); width: 16px; height: 16px; }

/* ── Botones: rectangulares, rótulo condensado ───────────────────────────── */
.btn { font: 600 .98rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r);
  background: var(--s2); min-height: 38px; padding: 0 16px; }
.btn:hover { background: var(--s3); }
.btn-sm { font-size: .88rem; min-height: 32px; padding: 0 12px; letter-spacing: .07em; }
.btn-primary { background: var(--red); border-color: var(--red); }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { background: var(--s2); }
.btn .icon { width: 15px; height: 15px; }

/* ── Tarjetas: planas, una línea fina; sin degradados ni halos ───────────── */
.card { background: var(--s1); border-color: var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.card-t { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .18em; color: var(--t3); }
.stat { font-family: var(--mono); font-weight: 500; font-size: 2rem; letter-spacing: -.02em; }
.stat small { font-family: var(--font); }
.kv { border-bottom-style: solid; }
.kv dd { font-family: var(--mono); font-size: .85rem; }
.hero { background: var(--s1); border-left: 3px solid var(--red); border-radius: var(--r-lg); }
.hero::after { display: none; }
.hero h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 30ch; }
.progress { height: 6px; border-radius: 0; }
.progress > i { background: var(--red); border-radius: 0; }
.meter-l { font-family: var(--mono); font-size: .76rem; }

/* ── Insignias: etiquetas de flight case ─────────────────────────────────── */
.badge { border-radius: 2px; height: 21px; padding: 0 7px; font: 600 .74rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.badge .dot { border-radius: 0; width: 5px; height: 5px; }
.tab .badge { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }

/* ── Avisos: franja lateral de color, superficie neutra ──────────────────── */
.alert { border-radius: var(--r); border-left-width: 3px; background: var(--s1); }
.alert-warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--s1); }
.alert-ok { border-color: var(--ok-line); border-left-color: var(--ok); background: var(--s1); }
.alert-grave { border-color: var(--red-line); border-left-color: var(--red); background: var(--s1); }
.alert-info { border-left-color: var(--red); }

/* ── Vacío ───────────────────────────────────────────────────────────────── */
.empty { border-radius: var(--r-lg); border-style: dashed; }
.empty h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.field > label, .label { font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.input, .field input:not([type]), .field input[type=text], .field input[type=password], .field input[type=email], .field input[type=url], .field input[type=date], .field input[type=datetime-local], .field input[type=number], .field input[type=time], .field input[type=date],
.field input[type=datetime-local], .field input[type=email], .field input[type=url], .field select, .field textarea {
  border-radius: var(--r-sm); background: var(--bg); border-color: var(--line-2); font-size: .95rem; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red-t); box-shadow: 0 0 0 1px var(--red-t); }
.switch input { border-radius: 2px; }
.switch input::after { border-radius: 1px; }
.switch b { font-weight: 600; }
.chip span { border-radius: 2px; font-family: var(--display); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: .86rem; }
.drop { border-radius: var(--r-lg); }
.filelist div { border-radius: var(--r-sm); font-family: var(--mono); font-size: .8rem; }

/* ── Tablas: como una lista de pistas ────────────────────────────────────── */
.table { border-radius: var(--r-lg); background: var(--bg); }
.table th { background: var(--s1); font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .12em; color: var(--t3); padding: 10px 14px; }
.table td { padding: 10px 14px; }
.table tbody tr:hover { background: var(--s1); }
.table .n { font-family: var(--mono); }
.bar, .bar > i { border-radius: 0; }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.tabs { gap: 0; }
.tab { font: 600 .98rem var(--display); letter-spacing: .07em; text-transform: uppercase; padding: 11px 16px; }
.tab[aria-selected="true"]::after { left: 0; right: 0; height: 2px; border-radius: 0; }

/* ── Diálogos, hojas y notificaciones ────────────────────────────────────── */
dialog, .sheet { border-radius: var(--r-lg); }
.toast { border-radius: var(--r); }

/* ── Panel «Hoy» y redes: cifras en monoespaciada ────────────────────────── */
.panel-fecha b, .kpi .stat, .red-kpi .stat { font-family: var(--mono); font-weight: 500; }
.panel-fecha small { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; }
.est { font-family: var(--display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }

/* ── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar { border-bottom: 1px solid var(--line); background: var(--bg); }
  .tabbar { background: var(--bg); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { font-family: var(--display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }
  h1 { font-size: 1.9rem; }
}

@media print { body { font-family: var(--font); } }

/* ── Selectores segmentados y desplegables sueltos (fuera de .field) ─────── */
.seg { border-radius: var(--r); }
.seg a { font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: .02em; }
.seg a[aria-current="page"] { font-weight: 600; }
select:not(.field select) { font: 500 .95rem var(--font); color: var(--t1); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  min-height: 34px; padding: 4px 10px; }
select:not(.field select):hover { border-color: var(--t3); }

/* ── Papeles tipográficos (toda la app) ──────────────────────────────────────
   Interfaz → Barlow Condensed · cifras, fechas y micro-etiquetas → IBM Plex Mono · texto corrido → Barlow.
   Todo lo que se lee como «dato» o «control» (tablas, listas, fichas, resúmenes, etiquetas, calendario) usa la condensada. */
.table td, .table td a, .vinculos li, .kv dt, .kv dd, .datos dt, .datos dd, .dato dt, .dato dd, summary,
label:not(.switch):not(.chip), .switch b, .agenda-filtros label, .panel-ev-t, .panel-tarea, .track-meta, .track-meta span,
.decision span, .cal-cab, .ev-t, .cal-add, .subnav a, .weight span, .stat small, .saved, a.bm, .no-disp,
.red-plataforma summary b, details > summary b, .card > div > b, .drop b, .matriz-roles td, .tarea-fila td, .fila-tent td {
  font-family: var(--display); letter-spacing: .015em; }
.table td { font-size: 1.02rem; font-weight: 500; }
.table td .t2, .table td .t3, .table td small, .table td div.t3 { font-family: var(--display); font-weight: 400; }
.vinculos li, .datos dd, .dato dd, .kv dt, .kv dd { font-size: 1rem; }
.datos dt, .dato dt { font-weight: 500; color: var(--t3); }
summary { font-weight: 500; font-size: 1rem; cursor: pointer; }
label:not(.switch):not(.chip) { font-weight: 500; }
.decision span { font-weight: 500; font-size: .98rem; }
.cal-cab { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* cifras y metadatos técnicos */
.score small, .kpi-tipo, .procedencia, .drop small, .meter-l, .kpi-cambio, .axis-t { font-family: var(--mono); letter-spacing: 0; }
.kpi-tipo, .procedencia, .score small { font-size: .74rem; }
/* texto corrido: se queda en Barlow (avisos, pasos, explicaciones) */
.alert > div, .prose li, ol.steps li, details ol li, details ul li, ul.t3 li, .hint, .phead p, .section-h p { font-family: var(--font); letter-spacing: .005em; }
.alert > div b, .prose li strong { font-weight: 600; }
.section-h p { font-size: .88rem; letter-spacing: .005em; }
/* restos que la auditoría encontró */
.cal-col-h .t3 { font-family: var(--display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chart .axis-t { font: 11px var(--mono); }
.card.pref small, .aviso-lista .t3, .aviso-lista .t3 a { font-family: var(--mono); font-size: .74rem; letter-spacing: 0; }
#prog-n, #prog-n + * { font-family: var(--mono); }
span.t2:has(> #prog-n) { font-family: var(--mono); font-size: .8rem !important; letter-spacing: .02em; }

/* ── Densidad (escritorio): más información por pantalla, misma legibilidad ──
   Filas de tabla ≈36 px, separaciones de 8–12 px, menos aire entre bloques. En el móvil se mantienen
   los tamaños táctiles (≥44 px), así que solo se aplica a partir de 901 px de ancho. */
@media (min-width: 901px) {
  .wrap { max-width: 1280px; padding: 22px 28px 72px; }
  h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); }
  .phead { margin-bottom: 18px; padding-bottom: 12px; gap: 12px 20px; }
  .phead p { margin-top: 6px; }
  .phead .eyebrow { margin-bottom: 6px; }
  .section { margin-top: 28px; }
  .section-h { margin-bottom: 10px; padding-bottom: 6px; }
  .grid, .grid-2 { gap: 10px; }
  .card { padding: 13px 15px; }
  .card-t { margin-bottom: 8px; }
  .hero { padding: 18px 20px; }
  .hero .actions { margin-top: 12px; }
  .stat { font-size: 1.7rem; }
  .kv { padding: 5px 0; }
  .alert { padding: 9px 12px; gap: 10px; }
  .empty { padding: 24px 16px; }
  /* tablas: filas compactas, como una lista de pistas */
  .table th { padding: 7px 12px; }
  .table td { padding: 6px 12px; line-height: 1.32; font-size: .99rem; }
  .table td .t3, .table td div.t3, .table td small { font-size: .86rem; line-height: 1.25; }
  /* controles */
  .btn { min-height: 34px; padding: 0 13px; }
  .btn-sm { min-height: 28px; padding: 0 10px; }
  .btn-icon { width: 34px; } .btn-sm.btn-icon { width: 28px; }
  .fields { gap: 10px 12px; }
  .field { gap: 4px; }
  .input, .field input:not([type]), .field input[type=text], .field input[type=password], .field input[type=number], .field input[type=time],
  .field input[type=email], .field input[type=url], .field input[type=date], .field input[type=datetime-local], .field select {
    min-height: 34px; padding: 5px 10px; }
  .switch { padding: 6px 0; }
  .tabs { margin-bottom: 14px; }
  .tab { padding: 8px 14px; }
  /* menú lateral */
  .navgroup { margin-top: 12px; }
  .navlink { padding: 5px 18px; }
  /* «Hoy» */
  .panel-ev, .panel-tarea { padding-top: 5px; padding-bottom: 5px; }
  /* agenda */
  .cal-dia { min-height: 88px; padding: 4px 5px; }
  /* jornada: tarjetas de tema más compactas */
  .track + .track { margin-top: 10px; }
  .track-h { padding: 12px 14px 10px; gap: 12px; }
  .track-badges { margin-top: 6px; }
  .player { margin: 0 14px; }
  .track-why { padding: 8px 14px 0; }
  .track-body { padding: 10px 14px 12px; }
  .ring { width: 50px; height: 50px; }
  .sticky-progress { padding: 8px 28px; margin: 0 -28px 14px; }
}