/* ═══ FUENTES ═══════════════════════════════════════════════════════════════
   Fira Sans/Code se pedían en --sans/--mono y en las etiquetas de los gráficos,
   pero NUNCA se declaraban: el navegador caía a una fuente de reserva con otras
   medidas y las etiquetas de ECharts —que se colocan por cálculo sobre canvas—
   se descolocaban hasta encimarse («Tu cartera» y «Quién ha trabajado»).
   Los .woff2 ya estaban servidos en /fonts/; solo faltaba esto. */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/FiraSans-400-va9E4k.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/FiraSans-600-va9B4k.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/FiraCode-500-uU9NCB.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/FiraCode-700-uU9NCB.woff2") format("woff2"); }

:root {
  /* ═══ PALETA: «Financial Dashboard» de ui-ux-pro-max ═══════════════════════
     Valores literales del skill, no elegidos a ojo. El skill define este caso
     exacto y marca `Anti_Patterns: Light mode default` — el tema claro que se
     probó era el anti-patrón declarado. Vuelta al oscuro, que es lo correcto.

     Tres estilos combinados, los tres nombrados por el skill para este caso:
       · Dark Mode (OLED)      → fondo profundo, resplandor mínimo
       · Data-Dense Dashboard  → rejilla de 12, gap 8px, 12-14px de letra
       · HUD / Sci-Fi FUI      → «iron man»: líneas finas, escaneo, marcadores */
  --fondo:     #020617;   /* Background */
  --s1:        #0e1223;   /* Card */
  --s2:        #0f172a;   /* Primary */
  --s3:        #1e293b;   /* Secondary */
  --apagado:   #1a1e2f;   /* Muted */

  --b1: rgba(51, 65, 85, .55);    /* Border #334155 */
  --b2: rgba(51, 65, 85, .85);
  --b3: rgba(96, 165, 250, .45);  /* borde vivo: el azul de confianza */

  /* ═══ CAPA HUD ═══════════════════════════════════════════════════════════
     Ficha «HUD / Sci-Fi FUI» de ui-ux-pro-max: líneas de 1px, cian neón sobre
     fondo profundo, marcadores técnicos, glow corto. Un solo sitio: cambiar
     --hud repinta bordes, esquinas, etiquetas y resplandores de TODA la
     pantalla, incluidas las cajas que se añadan mañana. */
  --hud:         #22d3ee;                  /* cian del instrumental */
  --hud-linea:   rgba(34, 211, 238, .34);  /* borde de tarjeta */
  --hud-esquina: rgba(34, 211, 238, .92);  /* marcas de las 4 esquinas */
  --hud-brillo:  rgba(34, 211, 238, .30);  /* glow corto de bordes/esquinas */
  --hud-rotulo:  rgba(125, 211, 252, .72); /* etiquetas mono en cian apagado */
  --hud-rejilla: rgba(34, 211, 238, .07);  /* retícula técnica del fondo */
  --hud-panel:   rgba(7, 14, 30, .74);     /* superficie translúcida: deja ver el holograma */

  --t1: #f8fafc;   /* Foreground */
  --t2: #94a3b8;   /* Muted Foreground */
  --t3: rgba(148, 163, 184, .62);

  /* El azul de confianza («Trust blue» del Color_Mood). Más claro y vivo que
     el anterior, que es lo que pidió: separado en relleno y texto porque un
     mismo tono no da el contraste correcto para las dos cosas. */
  --a-relleno: #2563eb;
  --a-texto:   #60a5fa;

  /* Alertas rojo/verde, del propio skill: Accent #22C55E, Destructive #EF4444 */
  --ok:     #16a34a;   --ok-txt:    #22c55e;
  --avisa:  #d97706;   --avisa-txt: #fbbf24;
  --grave:  #dc2626;   --grave-txt: #ef4444;

  --pista: rgba(148, 163, 184, .14);

  --mono: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Fira Sans", "Segoe UI", system-ui, sans-serif;

  /* Data-Dense: gap 8px, padding 12px, letra 12-14px. Denso a propósito. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;

  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px;
  --t-lg: 20px; --t-xl: 26px;   --t-2xl: 32px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--t1);
  background:
    radial-gradient(ellipse 900px 520px at 50% -6%, rgba(37, 99, 235, .16), transparent 65%),
    var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Grano contra el «banding» de los degradados oscuros. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tab {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  gap: var(--e2);            /* Data-Dense: 8px */
  padding: var(--e2) var(--e3) var(--e3);
}

/* ── Superficie ────────────────────────────────────────────────────────────
   Borde exterior + filo interior de luz + sombra en capas. Y en las esquinas,
   los MARCADORES TÉCNICOS del estilo HUD: dos ángulos que encuadran la tarjeta
   y la convierten en instrumento en vez de en caja. */
.tab-top, .tab-menu, .caja, .cifra, .nucleo {
  /* Translúcido, no opaco: el holograma se ve DETRÁS del instrumental, que es
     lo que separa una consola de mando de un dashboard. El blur mantiene el
     texto legible por encima de la malla de la cara. */
  background: var(--hud-panel);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
          backdrop-filter: blur(7px) saturate(115%);
  border: 1px solid var(--hud-linea);
  /* 4px y no 10: la esquina casi recta lee como instrumento; la redondeada,
     como tarjeta de web. Y las marcas de esquina encajan sin curva que las pise. */
  border-radius: 4px;
  position: relative;
  box-shadow:
    inset 0 1px 0 0 rgba(34, 211, 238, .10),   /* filo de luz cian arriba */
    0 0 14px rgba(34, 211, 238, .07),          /* halo corto hacia fuera */
    0 8px 30px rgba(0, 0, 0, .55);             /* profundidad sobre el negro */
}
/* Las CUATRO esquinas, no dos. Cada pseudo-elemento cubre la tarjeta entera y
   dibuja dos ángulos con gradientes (2 trazos por esquina), así no hace falta
   markup nuevo: ::before pinta las de arriba y ::after las de abajo.
   Antes eran 2 esquinas en gris azulado; ahora 4 en cian con glow corto. */
.caja::before, .cifra::before, .nucleo::before,
.caja::after,  .cifra::after,  .nucleo::after {
  content: ""; position: absolute; inset: 0;
  border: 0; border-radius: 0;
  pointer-events: none; z-index: 3;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--hud-brillo));
}
/* ┌ y ┐ */
.caja::before, .cifra::before, .nucleo::before {
  background-image:
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina));
  background-size: 15px 1px, 1px 15px, 15px 1px, 1px 15px;
  background-position: 0 0, 0 0, 100% 0, 100% 0;
}
/* └ y ┘ */
.caja::after, .cifra::after, .nucleo::after {
  background-image:
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina)),
    linear-gradient(var(--hud-esquina), var(--hud-esquina));
  background-size: 15px 1px, 1px 15px, 15px 1px, 1px 15px;
  background-position: 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.tab-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e4); padding: var(--e2) var(--e3); }
.tab-logo { display: flex; align-items: center; gap: var(--e2); flex: none; }
.tab-logo-marca {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--b3); border-radius: 6px;
  background: linear-gradient(150deg, rgba(37,99,235,.35), transparent);
  font-weight: 600; font-size: var(--t-sm); color: var(--a-texto);
}
.tab-logo-txt { line-height: 1.2; }
.tab-logo-txt b { display: block; font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; }
.tab-logo-txt span { font-size: 8.5px; letter-spacing: .16em; color: var(--t3); text-transform: uppercase; }

.tab-titulo { flex: 1; text-align: center; line-height: 1.25; }
.tab-titulo b {
  display: block; font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--t2);
}
.tab-titulo span { font-size: 9.5px; letter-spacing: .1em; color: var(--t3); text-transform: uppercase; }

.tab-estado {
  display: flex; align-items: center; gap: var(--e2); flex: none;
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--t2);
}
.tab-estado.es-caido { color: var(--avisa-txt); }

/* ALERT PULSE — lo pide el skill para este caso («Key_Effects: real-time number
   animations + alert pulse»). Late solo cuando algo va MAL; en reposo, quieto. */
.tab-punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok-txt); box-shadow: 0 0 8px rgba(34, 197, 94, .7);
}
.tab-punto.es-caido {
  background: var(--grave-txt);
  animation: alertaPulso 1.6s ease-out infinite;
}
@keyframes alertaPulso {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.tab-reloj { flex: none; text-align: right; line-height: 1.2; }
.tab-reloj b {
  display: block; font-size: var(--t-lg); font-weight: 500;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--a-texto);
}
.tab-reloj span { font-size: 9px; color: var(--t3); letter-spacing: .1em; text-transform: uppercase; }

/* ── Menú ─────────────────────────────────────────────────────────────────── */
.tab-menu { padding: var(--e2); display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.tab-menu a {
  display: flex; align-items: center; gap: var(--e2);
  padding: 7px var(--e2); border-radius: 6px;
  color: var(--t2); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500;
  transition: background .14s ease-out, color .14s ease-out;
}
.tab-menu a:hover { background: rgba(96, 165, 250, .07); color: var(--t1); }
.tab-menu a.es-aqui {
  background: linear-gradient(90deg, rgba(37, 99, 235, .22), transparent);
  color: var(--t1);
  box-shadow: inset 2px 0 0 var(--a-texto);
}
.tab-menu-ico { width: 15px; height: 15px; flex: none; display: grid; place-items: center; color: var(--t3); }
.tab-menu a.es-aqui .tab-menu-ico { color: var(--a-texto); }
.tab-menu-ico .ico { width: 15px; height: 15px; }
.tab-menu-pie { margin-top: auto; font-size: 9.5px; color: var(--t3); padding: var(--e2) var(--e2) 2px; line-height: 1.5; }

/* ── Rejilla de 12, densa ─────────────────────────────────────────────────── */
.tab-zona {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content; gap: var(--e2);
  overflow-y: auto; align-content: start;
}

/* ── Cifras ───────────────────────────────────────────────────────────────── */
.cifra { grid-column: span 3; grid-row: 1; padding: var(--e2) var(--e3) var(--e3); }
/* Rótulo de instrumento: monoespaciada, versales y letra suelta. Es lo que hace
   que «LEADS ACTIVOS» se lea como la etiqueta de un panel y no como un subtítulo. */
.cifra-tit {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: .19em; text-transform: uppercase;
  color: var(--hud-rotulo); font-weight: 500;
}
.cifra-tit .ico { color: var(--hud); opacity: .8; width: 13px; height: 13px; }
.cifra-val {
  font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
  /* La cifra es lo que ilumina el panel: blanco frío con doble resplandor cian
     (uno corto que define el trazo, otro largo que tiñe el aire alrededor). */
  color: #eaf9ff;
  text-shadow:
    0 0 6px rgba(34, 211, 238, .55),
    0 0 26px rgba(34, 211, 238, .32);
}
.cifra-pie { font-size: var(--t-xs); color: var(--t3); margin-top: 3px; }
.cifra-pie.es-bien { color: var(--ok-txt); }
.cifra-pie.es-mal { color: var(--avisa-txt); }

/* Cifra que ACABA de cambiar: destello, como el flash de precio de un
   terminal financiero. Es el «real-time number animation» del skill. */
.cifra.es-cambio .cifra-val { animation: cifraCambia 1.6s ease-out 1; }
@keyframes cifraCambia {
  0%   { color: var(--ok-txt); text-shadow: 0 0 26px rgba(34, 197, 94, .8); }
  100% { color: var(--t1);     text-shadow: 0 0 18px rgba(96, 165, 250, .28); }
}

/* ── Bloques ──────────────────────────────────────────────────────────────── */
.caja {
  padding: var(--e2) var(--e3) var(--e3);
  /* El max-height ataba cada caja a un TERCIO de la ventana. En una ventana baja
     salía ~152px, y con overflow:hidden el contenido se recortaba SIN AVISAR:
     por eso «Tu cartera» y «Quién ha trabajado» salían encimados o con asesores
     de menos. El suelo de 256px es lo que necesita la caja más alta (gráfico de
     equipo 205 + título + padding); en pantallas grandes manda el cálculo de
     antes y el diseño no cambia. */
  min-height: 0; max-height: max(256px, calc((100vh - 244px) / 3));
  overflow: hidden; display: flex; flex-direction: column;
}
/* Mismo rótulo de instrumento que .cifra-tit (ver arriba). */
.caja-tit {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: .19em; text-transform: uppercase;
  color: var(--hud-rotulo); font-weight: 500; margin: 0 0 var(--e2);
}
.caja-tit .ico { color: var(--hud); opacity: .8; width: 13px; height: 13px; }
.caja-tit .cnt {
  margin-left: auto; background: var(--s3); color: var(--t2);
  border-radius: 20px; padding: 1px 7px; font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.caja-tit .cnt.es-mal {
  background: rgba(220, 38, 38, .18); color: var(--grave-txt);
  box-shadow: 0 0 10px rgba(220, 38, 38, .25);
}

.c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c12 { grid-column: span 12; }

/* Bloque que pide acción: borde ámbar CON resplandor, como en la referencia
   («0 0 0 1.5px del color + 0 0 22px de brillo»). */
.caja.es-alerta {
  border-color: rgba(217, 119, 6, .55);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(217, 119, 6, .18),
    0 0 22px rgba(217, 119, 6, .13),
    0 8px 26px rgba(0, 0, 0, .3);
  background: linear-gradient(150deg, rgba(217, 119, 6, .07), var(--s1) 45%);
}
.caja.es-alerta::before, .caja.es-alerta::after { border-color: rgba(251, 191, 36, .6); }
.caja.es-alerta .caja-tit, .caja.es-alerta .caja-tit .ico { color: var(--avisa-txt); }
.caja.es-fondo { background: var(--fondo); border-color: rgba(51, 65, 85, .35); }

/* Una caja cuyo ÚNICO contenido es «no hay nada que contar» no merece el alto de
   una que sí cuenta algo. No gana una fila —eso lo manda la caja más alta de la
   fila, y está medido— pero deja de pesar en la pantalla como si tuviera datos.
   El `:has()` lo resuelve sin tocar el JS: la caja se entera sola de que va vacía. */
.caja:has(> .vacio:only-child),
.caja:has(> .caja-tit + .vacio:last-child) { max-height: 128px; }
.caja.es-fondo::before, .caja.es-fondo::after { opacity: .4; }

/* ── El núcleo ────────────────────────────────────────────────────────────── */
.nucleo {
  grid-column: span 6;
  display: grid; grid-template-rows: auto 1fr auto;
  align-items: start;
  min-height: 232px; max-height: calc((100vh - 244px) / 3);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(37, 99, 235, .10), var(--s1) 55%);
}
/* Línea de escaneo del estilo HUD: cruza el bloque despacio. «Scanning
   animations» está en la ficha del estilo, no me lo invento. */
.nucleo > .grafo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(96, 165, 250, .10) 48%, rgba(96,165,250,.28) 50%, rgba(96, 165, 250, .10) 52%, transparent);
  animation: escaneo 6s cubic-bezier(.45, 0, .55, 1) infinite;
  pointer-events: none;
}
@keyframes escaneo { 0% { top: -60px; } 62%, 100% { top: 100%; } }

.cara-rotulo { line-height: 1.3; padding: var(--e2) var(--e3) 0; }
.cara-rotulo b {
  display: block; font-family: var(--mono);
  font-size: var(--t-md); font-weight: 500; letter-spacing: .2em;
  color: var(--a-texto); text-shadow: 0 0 16px rgba(96, 165, 250, .45);
}
.cara-rotulo em {
  display: block; font-style: normal; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-top: 2px;
}
.cara-rotulo em.es-mal { color: var(--grave-txt); }

.nucleo-pie { text-align: center; font-size: 9.5px; color: var(--t3); letter-spacing: .04em; padding-bottom: 6px; }

/* ── Listas ───────────────────────────────────────────────────────────────── */
.lst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; overflow-y: auto; min-height: 0; }
.lst li {
  /* 🔴 `min-width: 0` NO es decorativo: `.lst` es un grid y sus filas nacen con
     `min-width: auto`, así que no se encogen por debajo de su contenido. Con un
     título largo en una sola línea, la fila se hacía más ancha que la caja y
     empujaba los botones FUERA, donde el `overflow:hidden` de la caja se los
     comía: «Aprobar» y «Descartar» desaparecían de la pantalla sin dar ningún
     error. Se vio mirando la foto, no midiendo — los botones seguían en el DOM. */
  min-width: 0;
  display: flex; align-items: baseline; gap: var(--e2);
  font-size: var(--t-sm); line-height: 1.4;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
  transition: background .14s ease-out;
}
.lst li:last-child { border-bottom: 0; }
.lst li:hover { background: rgba(96, 165, 250, .05); }
.lst .lst-txt { flex: 1; min-width: 0; }
.lst .lst-txt b { display: block; font-weight: 500; color: var(--t1); }
.lst .lst-txt small { color: var(--t3); font-size: var(--t-xs); }
.lst .lst-num { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.lst .lst-num small {
  display: block; font-size: 8.5px; color: var(--t3);
  letter-spacing: .08em; text-transform: uppercase; text-align: right; font-weight: 400;
}
/* SIN tope en píxeles a propósito. Lo tuvo (152 px, luego 205) y cualquier número
   partía una fila por la mitad, porque el alto de fila no es fijo. Quien decide
   cuántas caben es el JS, que pinta cuatro; aquí solo se deja crecer. */

/* 🔑 UNA LÍNEA POR DECISIÓN, y esto es lo que hace que el tope de arriba funcione.
   Estos títulos vienen del Director y a veces son un párrafo entero: con altura
   variable, cualquier tope en píxeles parte la última fila por la mitad —se vio en
   el preview del 7-sep, con la tercera cortada a media palabra—. Con todas las
   filas iguales, el tope cae siempre entre dos. El texto completo sigue estando en
   el `title` (basta pasar el ratón), y el JS lo recorta antes por si llega enorme. */
.dec .lst-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-pulso { max-height: 184px; }

/* ── Decisiones ───────────────────────────────────────────────────────────── */
/* 🔴 `.dec` a secas NO ganaba: `.lst li` (clase + elemento) pesa más y su
   `align-items: baseline` mandaba, así que los botones se quedaban pegados
   ARRIBA mientras el título ocupaba tres líneas. La regla llevaba escrita desde
   el principio sin hacer nada — el mismo fallo de peso que el comodín de
   admin.css. Con `.lst li.dec` gana quien tiene que ganar. */
.lst li.dec { align-items: center; }
/* 🔎 POR QUÉ estos botones NO son `.btn` del sistema (7-oct-2026, no «arreglar»):
   `pantalla.php` solo carga ESTA hoja, no `admin.css`/`styles.css`, así que `.btn` y sus
   tokens (`--brand`, `--link`…) aquí no existen; el tablero tiene su propia paleta oscura
   (`--s1…--s3`, `--b1…--b3`). Estos dos botones («Sí» / «No») van con ella.
   Cuando el tablero pase a la cara clara única (decidido el 19-sep, aún pendiente:
   «Una sola cara para todo TRIA»), se cambian ENTEROS a `.btn.primary` / `.btn.ghost`
   cargando la hoja común; tocar solo el color de uno aquí es hacer un componente paralelo. */
.dec-btns { display: flex; gap: 6px; flex: none; }
.dec-btns button {
  font-family: inherit; font-size: var(--t-xs); font-weight: 500;
  padding: 5px var(--e2); border-radius: 5px; cursor: pointer;
  border: 1px solid var(--b1); background: var(--s2); color: var(--t2);
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.dec-btns button:hover:not(:disabled) { background: var(--s3); border-color: var(--b3); color: var(--t1); }
.dec-si:hover:not(:disabled)  { border-color: var(--ok-txt);    color: var(--ok-txt); }
.dec-no:hover:not(:disabled)  { border-color: var(--avisa-txt); color: var(--avisa-txt); }
.dec-btns button:disabled { opacity: .4; cursor: default; }
.dec-toca { color: var(--avisa-txt); }
.dec.es-decidiendo { opacity: .5; }
.dec.es-hecho .lst-txt b { color: var(--t3); text-decoration: line-through; }
.dec.es-hecho .lst-txt small { color: var(--ok-txt); }
.dec.es-fallo .lst-txt small { color: var(--grave-txt); }

/* ── Estados ──────────────────────────────────────────────────────────────── */
.sindato { font-style: italic; color: var(--t3); font-weight: 400; font-size: .6em; }
.vacio { color: var(--t3); font-size: var(--t-sm); line-height: 1.55; }
.nota { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--t3); line-height: 1.5; }
.nota b { color: var(--t2); font-weight: 500; }
.nota a, .vacio a { color: var(--a-texto); text-decoration: none; }
.nota a:hover, .vacio a:hover { text-decoration: underline; }

.es-cambio-leve { animation: destelloLeve 1s ease-out 1; }
@keyframes destelloLeve { 0% { border-color: var(--b3); } 100% { border-color: var(--b1); } }

.ico { width: 14px; height: 14px; flex: none; vertical-align: -2px; }

/* «La cartera» usa una barra suelta: se perdió al reescribir el CSS y el texto
   salía con tamaño de titular y el número pegado. */
.brr { display: grid; gap: var(--e2); }
.brr-fila { display: grid; gap: var(--e1); font-size: var(--t-sm); }
.brr-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.brr-top b { font-weight: 500; color: var(--t1); font-size: var(--t-sm); }
.brr-top span { color: var(--t2); font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.brr-pista { height: 5px; border-radius: 3px; background: var(--pista); overflow: hidden; }
.brr-relleno { height: 100%; border-radius: 3px; background: var(--a-relleno); transition: width .4s cubic-bezier(.16,1,.3,1); }

.grafo { width: 100%; min-height: 0; position: relative; }
#grafo-cerebro { height: 100%; min-height: 196px; padding: 0 var(--e2); }
/* min-height además de height: el `min-height: 0` de .grafo dejaba que la rejilla
   aplastase la caja (146→121, y hasta 75 al estrechar la ventana) mientras el
   gráfico seguía dibujando todas sus filas dentro. Con el suelo puesto, la caja
   nunca baja de lo que necesitan sus filas. */
.grafo-cartera { height: 146px; min-height: 146px; }
/* 205 y no 172: el equipo son 5 asesores y a 172 el quinto no entraba — con
   hideOverlap puesto no se encimaba, pero DESAPARECÍA, que es peor: un dato
   que falta sin avisar. 5 filas × ~34px + respiración. */
.grafo-equipo  { height: 205px; min-height: 205px; }

/* ── Acceso ───────────────────────────────────────────────────────────────── */
.dec-btns button:focus-visible, .tab-menu a:focus-visible,
.nota a:focus-visible, .bloqueo a:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .7); outline-offset: 2px; border-radius: 5px;
}
.dec-btns button, .tab-menu a, .nota a { cursor: pointer; }

.bloqueo { padding: 60px var(--e5); max-width: 500px; margin: 0 auto; }
.bloqueo h1 { font-size: var(--t-lg); margin: 0 0 var(--e2); font-weight: 500; letter-spacing: -.02em; }
.bloqueo p { color: var(--t2); line-height: 1.6; margin: 0 0 var(--e2); font-size: var(--t-sm); }
.bloqueo a { color: var(--a-texto); }

body.es-dentro { overflow: auto; background: var(--fondo); }
body.es-dentro .tab { grid-template-columns: 1fr; height: auto; padding: 0 0 var(--e2); }
body.es-dentro .tab-top { padding: var(--e2) var(--e3); }
body.es-dentro .tab-titulo { text-align: left; }
body.es-dentro .tab-zona { overflow: visible; }
body.es-dentro .caja { max-height: none; }
body.es-dentro .nucleo { min-height: 200px; max-height: 280px; }

@media (max-width: 1500px) {
  .cifra { grid-column: span 3; }
  .nucleo, .c6 { grid-column: span 6; }
  .c4, .c5 { grid-column: span 4; }
}
@media (max-width: 1080px) {
  body { overflow: auto; }
  .tab { grid-template-columns: 1fr; height: auto; }
  .tab-menu { flex-direction: row; flex-wrap: wrap; }
  .tab-menu-pie { display: none; }
  .cifra { grid-column: span 6; }
  .nucleo, .c3, .c4, .c5, .c6 { grid-column: span 12; }
  /* ⚠️ Estas dos líneas NO bastan cuando está el holograma: ver el bloque del final
     del archivo, que es el que de verdad coloca el tablero en un móvil. */
}

@media (prefers-reduced-motion: reduce) {
  .nucleo > .grafo::after, .tab-punto.es-caido { animation: none; }
  .cifra.es-cambio .cifra-val, .es-cambio-leve { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOLOGRAMA DE FONDO PERMANENTE (17-ago-2026, Fase 1 «Fusión»)
   El fundador quiere UN SOLO sitio: el holograma como escenario y el tablero
   VIVIENDO dentro. La cara va de fondo, semitransparente (reactor de Iron Man
   detrás de los datos) para dar ambiente SIN tapar la información. La retícula,
   el glow y la cara quedan FIJOS detrás (z-index 0); el tablero flota encima con
   superficies translúcidas (backdrop-filter) que dejan ver el holograma.
   Paleta «Financial Dashboard» de ui-ux-pro-max: fondo #020617 (NO #000, evita
   OLED smearing), filo de luz 1px arriba, glow cian --holo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --holo:      #22d3ee;                    /* cian eléctrico de la referencia */
  --holo-hi:   #67e8f9;                    /* brillo, nunca #fff puro */
  --holo-dim:  rgba(34, 211, 238, .62);
  --holo-glow: rgba(34, 211, 238, .42);
  --holo-t1:   #cbeef7;
}

/* El fondo permanente: detrás de TODO (z-index 0), fijo, no captura clics. */
.holo-fondo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* Glow radial cian desde el centro-arriba, sobre el fondo profundo del tablero */
  /* Más contraste: el halo cian del centro sube, y los bordes caen a negro casi
     puro para que el instrumental recorte con fuerza contra el fondo. */
  background:
    radial-gradient(ellipse 62% 56% at 50% 43%, rgba(34, 211, 238, .17), transparent 66%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(8, 47, 73, .52), transparent 72%),
    radial-gradient(ellipse 150% 120% at 50% 45%, transparent 42%, rgba(1, 4, 12, .72) 100%);
}
/* Retícula HUD finísima, con máscara radial para que no llegue a los bordes */
.holo-fondo::before {
  content: ""; position: absolute; inset: 0;
  /* Dos retículas superpuestas: la fina (40px) da la textura de pantalla técnica,
     la gruesa (200px) marca los ejes y evita que parezca papel milimetrado. */
  background-image:
    linear-gradient(var(--hud-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-rejilla) 1px, transparent 1px),
    linear-gradient(rgba(34, 211, 238, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .12) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
  /* Llega mucho más cerca de los bordes: antes se apagaba al 82% y la rejilla
     solo existía en el centro, donde justo la tapan las tarjetas. */
  -webkit-mask-image: radial-gradient(ellipse 105% 105% at 50% 45%, #000 55%, transparent 99%);
          mask-image: radial-gradient(ellipse 105% 105% at 50% 45%, #000 55%, transparent 99%);
}

/* La cara: SEMITRANSPARENTE, de fondo. No tapa los datos. Subida (top 44%) para
   que los ojos queden a la vista y no bajo las cajas (afinado 17-ago). Respira:
   el glow late lento — es la señal de que el sistema está VIVO (Fase 3). */
.holo-cara {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(84vh, 760px); height: auto;
  /* PROTAGONISTA. Estaba a .40 con una máscara que se la comía: no se veía.
     Ahora es lo primero que se mira al abrir, y el instrumental vive encima
     (las tarjetas son translúcidas con blur, así que la malla se intuye detrás
     sin robarle legibilidad a ninguna cifra). */
  opacity: .92;
  /* Máscara mucho más abierta: difumina solo el borde exterior, no la cara. */
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 50% 44%, #000 72%, transparent 97%);
          mask-image: radial-gradient(ellipse 74% 82% at 50% 44%, #000 72%, transparent 97%);
  filter:
    drop-shadow(0 0 34px rgba(34, 211, 238, .55))
    drop-shadow(0 0 90px rgba(34, 211, 238, .28))
    saturate(150%) contrast(122%) brightness(1.18);
  will-change: filter;
  animation: holoRespirar 4.5s ease-in-out infinite;
  user-select: none;
}
/* El sistema respira: glow pulsante lento. Solo transform/opacity/filter (GPU). */
/* Respira SIN apagarse: los filtros de saturación/contraste se repiten en los dos
   fotogramas, porque `filter` se sustituye entero — si solo se nombra el
   drop-shadow, la animación borra el resto y la cara pierde el brillo nuevo. */
@keyframes holoRespirar {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(34, 211, 238, .46)) drop-shadow(0 0 80px rgba(34, 211, 238, .22))
            saturate(148%) contrast(120%) brightness(1.14);
  }
  50% {
    filter: drop-shadow(0 0 46px rgba(34, 211, 238, .66)) drop-shadow(0 0 110px rgba(34, 211, 238, .34))
            saturate(155%) contrast(124%) brightness(1.22);
  }
}
/* La cara REACCIONA: si algo va mal (.holo-alerta en el fondo), el glow es rojo. */
.holo-fondo.holo-alerta .holo-cara { animation: holoAlerta 1.8s ease-in-out infinite; }
@keyframes holoAlerta {
  0%, 100% {
    filter: drop-shadow(0 0 34px rgba(239, 68, 68, .48)) drop-shadow(0 0 80px rgba(239, 68, 68, .24))
            saturate(140%) contrast(120%) brightness(1.12);
  }
  50% {
    filter: drop-shadow(0 0 52px rgba(239, 68, 68, .70)) drop-shadow(0 0 110px rgba(239, 68, 68, .34))
            saturate(150%) contrast(124%) brightness(1.20);
  }
}

/* Anillo de escaneo: gira despacio alrededor de la cara. Señal de «pensando». */
.holo-escaneo {
  position: absolute; top: 44%; left: 50%;
  width: min(70vh, 600px); height: min(70vh, 600px);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid transparent; border-top-color: rgba(34, 211, 238, .38);
  will-change: transform;
  animation: holoGirar 9s linear infinite;
}
@keyframes holoGirar { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Anillos concéntricos, muy tenues detrás */
.holo-anillo {
  position: absolute; top: 44%; left: 50%;
  border: 1px solid rgba(34, 211, 238, .10); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.holo-a1 { width: min(74vh, 640px); height: min(74vh, 640px); }
.holo-a2 { width: min(90vh, 780px); height: min(90vh, 780px);
           border-color: rgba(34, 211, 238, .06); border-style: dashed; }

/* Partículas de luz subiendo: el ambiente vivo (Fase 3). Generadas en JS. */
.holo-part {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--holo); opacity: .5; box-shadow: 0 0 6px var(--holo-glow);
  will-change: transform; animation: holoSubir linear infinite;
}
@keyframes holoSubir {
  from { transform: translateY(0); opacity: 0; }
  10%  { opacity: .55; } 90% { opacity: .55; }
  to   { transform: translateY(-100vh); opacity: 0; }
}

/* Líneas de conexión de la cara a las cajas: la info EMANA del cerebro. SVG en JS. */
.holo-conex { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.holo-conex path {
  fill: none; stroke: var(--holo); stroke-width: 1.2; opacity: .34;
  stroke-dasharray: 5 7; will-change: stroke-dashoffset;
  animation: holoFluir 3s linear infinite;
}
@keyframes holoFluir { to { stroke-dashoffset: -24; } }
.holo-conex circle { fill: var(--holo-hi); opacity: .85; animation: holoNodo 2.4s ease-in-out infinite; }
@keyframes holoNodo { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Ecualizadores decorativos en las esquinas inferiores */
.holo-eq { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: 2px; height: 48px; opacity: .32; }
.holo-eq-l { left: 0; } .holo-eq-r { right: 0; }
.holo-eq i { width: 3px; background: linear-gradient(to top, var(--holo), transparent); display: block; }

/* ── El tablero, flotando SOBRE el holograma ─────────────────────────────────
   Sube a z-index 1 y sus superficies se vuelven translúcidas para que el
   holograma se vea detrás. Solo cuando .es-holo (pantalla completa), no embebido. */
.tab.es-holo { position: relative; z-index: 1; background: transparent; }
.tab.es-holo .tab-top,
.tab.es-holo .tab-menu,
.tab.es-holo .caja,
.tab.es-holo .cifra,
.tab.es-holo .nucleo {
  /* Translúcido con blur: el cristal del HUD, deja ver el holograma detrás.
     Los valores salen de los TOKENS, no fijos: este bloque repetía a mano el
     mismo cristal que ya define la regla base y, al ser más específico, la
     pisaba — cambiar --hud-panel no habría hecho nada. Ahora un token manda. */
  background: var(--hud-panel);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-color: var(--hud-linea);
  box-shadow:
    inset 0 1px 0 0 rgba(103, 232, 249, .12),   /* filo de luz cian arriba */
    0 0 16px rgba(34, 211, 238, .09),           /* halo corto del instrumental */
    0 8px 30px rgba(0, 0, 0, .5);
}
/* Las muescas de esquina ya NO se pintan con `border` sino con gradientes que
   leen --hud-esquina (ver la regla base), así que aquí no hace falta repetirlas:
   el color cian lo heredan solas, dentro y fuera del modo holograma. */

/* ═══ TABLERO EN TRES COLUMNAS: datos · CARA · datos ════════════════════════
   La cara tenía el tablero encima y siempre acababa tapada. Ahora ocupa la
   columna CENTRAL (5-8 de las 12) a lo alto de cuatro filas, y los datos se
   reparten en las cuatro de la izquierda y las cuatro de la derecha. Nada la pisa.
   `dense` deja que cada tarjeta caiga sola en el primer hueco libre, así que el
   reparto se mantiene aunque mañana se añadan o quiten cajas.
   Solo en pantalla completa: embebido en el backoffice no hay cara y la rejilla
   de 12 se queda como estaba. */
/* El div es `class="tab-zona" id="zona"`: este selector buscaba una CLASE «zona»
   que no existe, así que el `dense` NUNCA ha estado puesto desde que se escribió
   (17-ago). Medido el 7-sep en la pantalla real: activarlo hoy no mueve ni un px
   —no hay huecos que rellenar—, pero es lo que mantiene el reparto cuando mañana
   se añada o se quite una caja, que es para lo que se puso. */
.tab.es-holo .tab-zona { grid-auto-flow: row dense; }

/* La cara ya NO va de fondo. Si un navegador sirve de su caché el HTML viejo
   (que aún la lleva dentro de .holo-fondo), esta regla evita ver DOS caras a la
   vez: la del fondo y la de la columna. */
.holo-fondo .holo-cara { display: none !important; }

.tab.es-holo .nucleo {
  grid-column: 5 / 9;
  /* 2 filas desde que la cara está a la mitad (8-sep). Antes fueron 4 —el núcleo
     medía 967 px y se salía casi 300 por debajo de una ventana de 900— y luego 3.
     Con la cara en 215 px, tres filas le sobraban: medido, pasa de 687 a 474 px. */
  grid-row: span 2;
  /* Manda la altura de las cuatro filas que abarca, no el techo de una caja. */
  max-height: none;
  /* cara (flexible) · rótulo · barras de agentes · pie */
  grid-template-rows: 1fr auto auto auto;
  background: linear-gradient(180deg, rgba(37, 99, 235, .12), var(--hud-panel) 62%);
}

/* Todas las demás cajas pasan a tercios: cuatro columnas cada una. */
.tab.es-holo .c3,
.tab.es-holo .c4,
.tab.es-holo .c5,
.tab.es-holo .c6 { grid-column: span 4; }

/* La cara, dentro de su columna. `contain` para que nunca se deforme ni se salga:
   se ajusta al hueco que le deje el núcleo, sea cual sea la altura de la ventana. */
.nucleo-cara {
  position: relative; min-height: 0; overflow: hidden;
  display: grid; place-items: center;
  /* 🔑 A LA MITAD, por decisión del fundador (8-sep-2026). Medía 430 px —el 24 %
     del tablero— y era el bloque más grande de una pantalla que promete que todo
     cabe sin bajar.
     ⚠️ Y ojo con lo que este techo NO arregla, para que nadie lo intente otra vez:
     el desborde baja de 391 a 290 px y AHÍ SE QUEDA. Lo que manda el alto no es la
     cara, son las TRES filas de cajas con suelo de 256 px cada una (ver `.caja`).
     Probado también con techo al núcleo entero (no encoge la cara: la desborda por
     dentro) y estrechando las cajas vacías con el `dense` ya vivo (no gana ni una
     fila). Para que quepa de verdad hay que quitar una fila, no adelgazar la cara. */
  max-height: 215px;
}
.nucleo-cara img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  opacity: .95;
  /* La imagen es un PNG rectangular con fondo: sin máscara se ve el recuadro
     recortado contra la tarjeta. Esto funde los cuatro bordes con el panel. */
  -webkit-mask-image: radial-gradient(ellipse 55% 66% at 50% 47%, #000 44%, transparent 88%);
          mask-image: radial-gradient(ellipse 55% 66% at 50% 47%, #000 44%, transparent 88%);
  filter:
    drop-shadow(0 0 26px rgba(34, 211, 238, .52))
    saturate(150%) contrast(122%) brightness(1.16);
  animation: holoRespirar 4.5s ease-in-out infinite;
  user-select: none;
}
/* Halo detrás de la cara: la despega del fondo de la tarjeta sin tocar la imagen. */
.nucleo-halo {
  position: absolute; inset: 8% 6% 12%;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(34, 211, 238, .20), transparent 70%);
  pointer-events: none;
}

/* ── La cara TE HABLA: renglón dirigido al fundador con datos reales ──────────
   Ocupa el ancho del tablero, arriba de las cifras. La frase la arma el JS a
   partir de los datos de verdad (decisiones, dormidos); si no hay dato, calla. */
.tab.es-holo .holo-habla {
  grid-column: 1 / -1; grid-row: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: rgba(9, 14, 28, .58);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(34, 211, 238, .28); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(103, 232, 249, .12), 0 0 20px rgba(34, 211, 238, .10);
}
.holo-habla-ic {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid var(--holo); display: grid; place-items: center;
  color: var(--holo-hi); font-size: 12px;
  will-change: box-shadow; animation: holoLatir 2s ease-in-out infinite;
}
@keyframes holoLatir {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 211, 238, .3); }
  50%      { box-shadow: 0 0 16px rgba(34, 211, 238, .6); }
}
.holo-habla-tx { font-size: 13px; color: var(--t1); letter-spacing: .01em; line-height: 1.4; }
.holo-habla-tx b { color: var(--holo-hi); }
.holo-habla.es-vacio { display: none; }   /* sin datos → no habla */

@media (max-width: 760px) {
  .holo-cara { width: min(52vh, 320px); opacity: .32; }
  .holo-escaneo { width: min(56vh, 340px); height: min(56vh, 340px); }
  .holo-habla-tx { font-size: 12px; }
}
/* Uso diario: si el sistema pide menos movimiento, se calma TODO (no marea). */
@media (prefers-reduced-motion: reduce) {
  .holo-cara, .holo-escaneo, .holo-part, .holo-conex path,
  .holo-conex circle, .holo-habla-ic {
    animation: none !important;
  }
  .holo-cara { filter: drop-shadow(0 0 45px var(--holo-glow)) brightness(1.05); }
}

/* ═══ EL MÓVIL, DESPUÉS DEL HOLOGRAMA ══════════════════════════════════════════
   🔴 POR QUÉ ESTÁ AQUÍ ABAJO Y NO ARRIBA CON EL RESTO DEL MÓVIL (8-sep-2026).

   El bloque `@media (max-width: 1080px)` de arriba dice `.c3, .c4… { span 12 }`, que
   pesa (0,1,0). Pero `.tab.es-holo .c3 { span 4 }` pesa (0,3,0) **y va después**. Las
   media queries NO añaden peso, así que en un móvil ganaba el holograma y el tablero
   seguía en TRES COLUMNAS de 130 px: las tarjetas se pisaban unas a otras y los
   títulos se partían a mitad de palabra («CAMPAÑ QUE CIERRAI»).

   Lleva así desde que se montó el modo holograma el 17-ago. Y no lo cazó ninguna
   medición —el medidor decía «0 desbordes, 0 elementos salidos», porque nada se sale:
   se encima—. Lo cazó MIRAR LA FOTO. Es el mismo fallo de peso que el comodín de
   admin.css y que el `.dec` de las decisiones: una regla escrita que no gana no existe.

   Mismo peso que la del holograma (0,3,0) y colocada después: gana por orden. */
@media (max-width: 1080px) {
  .tab.es-holo .nucleo,
  .tab.es-holo .c3,
  .tab.es-holo .c4,
  .tab.es-holo .c5,
  .tab.es-holo .c6 { grid-column: span 12; }
  /* El núcleo deja de reservarse su columna central y sus filas: en una sola
     columna no hay «centro» que ocupar. */
  .tab.es-holo .nucleo { grid-row: auto; max-height: 380px; }
  /* 🔑 Y `grid-row: auto`, que es lo que faltaba. `.cifra` trae `grid-row: 1` de
     serie para que las cuatro vayan en la cabecera; en un móvil eso las OBLIGA a
     compartir una sola fila, así que se comprimían a 142 px cada una por mucho
     ancho que se les diera. Soltándolas de la fila 1, caben de dos en dos. */
  .tab.es-holo .cifra,
  .cifra { grid-column: span 6; grid-row: auto; }

  /* Con una sola columna, el techo de un tercio de ventana ahoga las cajas: cada
     una necesita su alto y la pantalla ya se recorre bajando. */
  .caja { max-height: none; }

  /* La cabecera se apilaba encima de sí misma: la marca, el título y el reloj
     peleaban por 390 px. En móvil se ponen en fila, y el título centrado sobra. */
  .tab-top { flex-wrap: wrap; gap: var(--e1) var(--e2); }
  .tab-titulo { text-align: left; }
}

/* ═══ TAMAÑO DE DEDO EN EL TABLERO (8-sep-2026, auditoría móvil) ═══════════════
   Los 14 sitios tocables de esta pantalla eran pequeños SIN EXCEPCIÓN: las siete
   pestañas del menú a 29 px y en varias filas separadas 2 px —era fácil entrar en la
   de al lado—, y «Aprobar» y «Descartar» a 26 px y a 6 px el uno del otro. El sí y el
   no, pegados y diminutos, en la pantalla donde se aprueban cosas.
   Se arregla por HERENCIA: la regla da el tamaño a la familia entera, no a cada botón
   uno por uno, así que lo que se añada mañana lo hereda solo. */
@media (hover: none), (max-width: 1080px) {
  .tab-menu a {
    min-height: 44px; display: flex; align-items: center; gap: 8px;
    padding: 0 var(--e2);
  }
  .tab-menu { gap: var(--e1); }

  /* El sí y el no, con sitio y separados: pulsar «Descartar» queriendo «Aprobar» es
     un error que no se puede deshacer desde aquí. */
  .dec-btns { gap: var(--e2); }
  .dec-btns button { min-height: 44px; padding: 0 var(--e3); }

  /* Las líneas que dan el contexto de cada cifra («417 en total, con cerrados»,
     «37.898 € de gastos») iban a 11 px en un gris que sobre este fondo da 3,5 de
     contraste, cuando el mínimo son 4,5 — y eso en una habitación, no en la calle
     con sol. Se suben las dos cosas: tamaño y color. */
  .cifra-pie, .nota, .lst .lst-txt small { font-size: var(--t-sm); color: var(--t2); }

  /* «Verlas todas ↗» es el único enlace del tablero y llevaba a las 22 propuestas
     sin revisar: 34 px de alto, el último que quedaba por debajo del dedo. */
  .nota a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* En pantallas de teléfono de verdad, además, el rótulo del título no se parte. */
@media (max-width: 520px) {
  /* 🔑 Y la decisión se puede LEER antes de aprobarla. En el escritorio el título va
     a una línea con «…» porque compite con los botones en 404 px; en un móvil, con la
     tarjeta a ancho completo, cabe entero en dos líneas. Pedirle a alguien que apruebe
     algo que no puede leer es peor que no enseñárselo. */
  .dec .lst-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lst li.dec { align-items: flex-start; }
  .dec-btns { align-self: center; }
  .tab-titulo b { font-size: var(--t-md); letter-spacing: .04em; }
  .tab-logo-txt span, .tab-titulo span { display: none; }
}