/* =============================================================================
   AMOS — sistema visual, aplicado desde BRAND_GUIDELINES.md v1.0 y
   design-tokens.json v1.0.0 (24-08-2026). Orden de autoridad de la sección 1 del
   manual: el manual y los tokens mandan sobre cualquier implementación previa.

   Qué reemplaza y por qué. El sistema anterior (D-021) derivaba la identidad del
   logo de Shineray: rojo #DC0118 y negro #0D100F con sesgo frío. Esa lectura era
   correcta cuando el único usuario era Ralitor y deja de serlo cuando el producto
   es AMOS (D-030). Lo que NO cambia es la arquitectura visual, porque ya coincidía
   con lo que pide el manual: lienzo claro para el trabajo y navegación en grafito.

   Las tres reglas que gobiernan lo de abajo, ahora del manual de AMOS:

   1) EL AZUL ES SEÑAL, NO DECORACIÓN (§2, §4). Identifica acción, estado activo,
      foco y el dato importante. Nunca pinta fondos grandes ni párrafos.
   2) LA URGENCIA ES SEMÁNTICA, NO DE MARCA. Antes el rojo era marca Y urgencia a
      la vez, y esa ambigüedad se resuelve sola acá: la marca es azul y el rojo
      queda solo para error (#B42318). Un lead sin atender y un botón "Guardar" ya
      no pueden confundirse.
   3) BORDES Y CONTRASTE ANTES QUE SOMBRAS (§7). Una sola sombra en todo el
      sistema, y solo para lo que flota de verdad. Prohibidos el glassmorphism,
      los biseles y las sombras apiladas.

   Excepciones documentadas (§16 pide que se declaren):
   - Aeonik se declara en el stack pero NO se embebe: el manual (§5) exige
     confirmar la licencia antes de distribuirla y en el repo solo hay archivos
     de prueba. Hasta entonces corre el fallback, que es lo que el manual manda.
   - El paso de espaciado de 20px no está en la escala aprobada (§6): sus 22 usos
     pasaron a 24px, que sí lo está. El token --s5 se eliminó para que nadie lo
     reintroduzca.
   - El radio de 13px superaba el máximo de 8px para paneles (§7): sus 2 usos
     pasaron a --r2.
   ============================================================================= */
:root{
  /* --- tipografía (§5) --- Aeonik con el fallback del manual. De cada rango de la
     escala se toma el extremo BAJO: este es un producto operacional denso, y el
     manual pide densidad sin agobio (§2). */
  --font:Aeonik,Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --t-label:11px;   /* Label — 700, tracking .10em, mayúsculas permitidas */
  --t-xs:12px;      /* Label alto / metadatos */
  --t-sm:14px;      /* Body small */
  --t-base:14px;    /* Body small — cuerpo de tabla y controles */
  --t-md:16px;      /* Body */
  --t-lg:18px;      /* Body large */
  --t-xl:24px;      /* H3 */
  --t-2xl:30px;     /* H3 alto */
  --t-metric:40px;  /* Data large */
  --t-hero:48px;    /* H1 */

  /* --- espaciado (§6) --- base 4, pasos aprobados. El 20 no está en la escala. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;

  /* --- superficies y neutros (§4) --- */
  --bg:#F7F8FA;              /* Canvas */
  --surface:#FFFFFF;         /* Surface */
  --surface-2:#FCFCFD;
  --surface-3:#F1F3F6;
  --shell:#0D1117;           /* Graphite — navegación */
  --shell-2:#161C24;
  --shell-3:#222933;
  --on-shell:#FFFFFF;                        /* activo en nav oscura (§8) */
  --on-shell-2:rgba(255,255,255,.72);        /* inactivo */
  --on-shell-3:rgba(255,255,255,.56);
  --text:#0D1117;            /* Text primary */
  --text-2:#5D6673;          /* Text secondary */
  /* EXCEPCIÓN DOCUMENTADA (§16 pide declararlas). El manual define text.muted como
     #7B8490, pero medido contra las superficies reales de este panel da 3.79:1 sobre
     blanco y 3.56:1 sobre canvas — por debajo del 4.5:1 que el mismo manual exige
     para texto normal. Acá el muted se usa en metadatos de 11–12px, que son texto
     normal. Prevalece la regla de contraste. El valor del manual queda anotado por
     si algún día se lo usa donde sí corresponde (texto grande o elementos no
     textuales): #7B8490. */
  --text-3:#5D6673;          /* Text muted, elevado a secondary por contraste */
  --steel:#6B7280;           /* Steel — etiquetas, controles inactivos */
  --silver:#E5E7EB;          /* Silver */
  --border:#DFE3E8;          /* Border subtle */
  --border-soft:#E9ECF0;
  --border-strong:#D7DBE1;   /* Border strong */
  --border-inverse:rgba(255,255,255,.14);    /* divisor sobre grafito (§7) */

  /* --- marca y semántica (§4) --- */
  --brand:#0052FF;--brand-hover:#0047E0;--brand-active:#003FC7;--brand-ink:#FFFFFF;
  --brand-soft:#EAF0FF;--brand-line:rgba(0,82,255,.28);
  --ok:#15803D;--ok-soft:#ECFDF3;
  --warn:#B45309;--warn-soft:#FFF7E6;
  --err:#B42318;--err-soft:#FEF3F2;--err-line:rgba(180,35,24,.28);--err-ink:#FFFFFF;
  --warn-ink:#FFFFFF;--ok-ink:#FFFFFF;
  --info:#0052FF;--info-soft:#EAF0FF;

  /* --- serie de datos (§9) --- Grafito y acero dan contexto; el azul destaca la
     serie principal. La distinción no descansa solo en el color: cada serie lleva
     su etiqueta, como exige el manual. */
  --chart-bar:#0052FF;--chart-bar-2:#6B7280;--chart-rail:#E5E7EB;
  --chart-pos:#15803D;--chart-urg:#B42318;--chart-neg:#B42318;--chart-warn:#B45309;

  /* --- forma y elevación (§7) --- estructura a 0, controles 4, paneles 8. */
  --r0:0px;--r1:4px;--r2:8px;--rf:999px;
  --sh1:0 12px 32px rgba(13,17,23,.08);
  --sh2:0 12px 32px rgba(13,17,23,.08);

  /* --- movimiento (§10) --- */
  --fast:160ms cubic-bezier(.2,0,0,1);
  --base-t:220ms cubic-bezier(.2,0,0,1);
  --slow:320ms cubic-bezier(.2,0,0,1);

  /* --- layout (§6, §13) --- 44px es el mínimo de área táctil del manual. */
  --side-w:236px;
  --maxw:1440px;      /* ancho de trabajo (contentMax del manual) */
  --maxr:940px;       /* ancho de lectura (45–75 caracteres por línea) */
  --control-h:44px;   /* alto mínimo de control y de fila de tabla */
}
/* Modo oscuro. Automático por defecto —sigue la configuración del sistema— y el atributo
   data-theme lo pisa cuando la persona elige a mano. El :not() es lo que hace que el
   interruptor gane sobre el sistema operativo sin pelearse con la especificidad. */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0D1117;              /* el grafito de la marca pasa a ser el lienzo */
  --surface:#161C24;
  --surface-2:#1B222B;
  --surface-3:#232B36;
  --shell:#090C10;           /* la nav baja un escalón más: si igualara al lienzo, desaparece */
  --shell-2:#12171E;
  --shell-3:#232B36;
  --text:#E9ECF1;            /* blanco puro a pantalla completa cansa la vista */
  --text-2:#A7B0BD;
  --text-3:#A7B0BD;
  --steel:#8B94A3;
  --silver:#2A323D;
  --border:rgba(255,255,255,.14);        /* border.inverse, tal cual lo define el manual */
  --border-soft:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.26);
  --brand:#4D86FF;--brand-hover:#6697FF;--brand-active:#709EFF;
  --brand-ink:#0D1117;       /* sobre el azul claro el texto va oscuro: 6,0:1 */
  --brand-soft:rgba(77,134,255,.16);--brand-line:rgba(77,134,255,.42);
  --ok:#50E287;--ok-soft:rgba(80,226,135,.14);
  --warn:#F58D3D;--warn-soft:rgba(245,141,61,.14);
  --err:#E7564B;--err-soft:rgba(231,86,75,.14);--err-line:rgba(231,86,75,.42);--err-ink:#0D1117;
  --warn-ink:#0D1117;--ok-ink:#0D1117;
  --info:#4D86FF;--info-soft:rgba(77,134,255,.16);
  --chart-bar:#4D86FF;--chart-bar-2:#8B94A3;--chart-rail:#232B36;
  --chart-pos:#50E287;--chart-urg:#E7564B;--chart-neg:#E7564B;--chart-warn:#F58D3D;
  --sh1:0 12px 32px rgba(0,0,0,.45);
  --sh2:0 12px 32px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1117;              /* el grafito de la marca pasa a ser el lienzo */
  --surface:#161C24;
  --surface-2:#1B222B;
  --surface-3:#232B36;
  --shell:#090C10;           /* la nav baja un escalón más: si igualara al lienzo, desaparece */
  --shell-2:#12171E;
  --shell-3:#232B36;
  --text:#E9ECF1;            /* blanco puro a pantalla completa cansa la vista */
  --text-2:#A7B0BD;
  --text-3:#A7B0BD;
  --steel:#8B94A3;
  --silver:#2A323D;
  --border:rgba(255,255,255,.14);        /* border.inverse, tal cual lo define el manual */
  --border-soft:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.26);
  --brand:#4D86FF;--brand-hover:#6697FF;--brand-active:#709EFF;
  --brand-ink:#0D1117;       /* sobre el azul claro el texto va oscuro: 6,0:1 */
  --brand-soft:rgba(77,134,255,.16);--brand-line:rgba(77,134,255,.42);
  --ok:#50E287;--ok-soft:rgba(80,226,135,.14);
  --warn:#F58D3D;--warn-soft:rgba(245,141,61,.14);
  --err:#E7564B;--err-soft:rgba(231,86,75,.14);--err-line:rgba(231,86,75,.42);--err-ink:#0D1117;
  --warn-ink:#0D1117;--ok-ink:#0D1117;
  --info:#4D86FF;--info-soft:rgba(77,134,255,.16);
  --chart-bar:#4D86FF;--chart-bar-2:#8B94A3;--chart-rail:#232B36;
  --chart-pos:#50E287;--chart-urg:#E7564B;--chart-neg:#E7564B;--chart-warn:#F58D3D;
  --sh1:0 12px 32px rgba(0,0,0,.45);
  --sh2:0 12px 32px rgba(0,0,0,.45);
}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--shell);color:var(--on-shell);padding:var(--s3) var(--s6);border-radius:0 0 var(--r2) 0}
.skip:focus{left:0}

/* =============================================================================
   SHELL — barra lateral fija (el "sistema operativo") + lienzo de trabajo
   La navegación pasó de dos filas horizontales (zonas + sub-tabs, ~120px de alto
   comidos en toda pantalla) a una columna: escala a más módulos sin wrapear,
   deja el alto para los datos y da la lectura de consola de operación. El viewer
   NO tiene barra: su vista es el reporte centrado, como antes.
   ============================================================================= */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.app.solo-reporte{grid-template-columns:minmax(0,1fr)}
.side{background:var(--shell);color:var(--on-shell);display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6) var(--s3) var(--s4);position:sticky;top:0;height:100vh;overflow-y:auto}
/* Lockup del shell: emblema + wordmark tipográfico. El lockup oficial completo mide
   2061×193 (ratio 10,7:1): metido en una lateral de 236px la palabra "SALES OS" caía a
   8px de alto — ilegible. Acá el emblema lleva la marca y el nombre se compone con la
   tipografía del sistema; el lockup completo va donde hay ancho de verdad (login,
   cabecera del reporte, PDF). */
/* Lockup de marca. El wordmark es el SVG oficial, jamás texto: el manual prohíbe
   tipografiar o aproximar la marca (§3) y llama "lockup improvisado" a hacerlo (§14).
   Va la variante reverse porque el fondo es grafito. El descriptor de producto y la
   leyenda del cliente son texto aparte, separados por el aire de resguardo, para que
   no se lean como parte del logo. El resguardo mínimo que pide §3 es la altura del
   acento azul (20% del alto del mark, ~4px acá): --s2 lo supera. */
/* El selector .side a (44px de alto, centrado) le gana en especificidad a una sola clase,
   así que el lockup quedaba encajonado en 44px y el descriptor se derramaba sobre el
   buscador.
   Se sube la especificidad y se anula el alto fijo: acá el alto lo da el contenido. */
.side a.side-brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-height:0;flex-shrink:0;padding:var(--s3);margin-bottom:var(--s4);border-radius:var(--r1)}
.side-brand .wm{height:24px;width:auto;flex-shrink:0}
.side-brand .sym{display:none;height:26px;width:auto;flex-shrink:0}
.side-brand .txt{display:block;font-size:var(--t-label);font-weight:400;line-height:1.4;color:var(--on-shell-3);letter-spacing:.02em;max-width:172px;text-wrap:balance}

.side-nav{display:flex;flex-direction:column;gap:var(--s6)}
.side-grp{display:flex;flex-direction:column;gap:1px}
.side-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-shell-3);padding:0 var(--s3) var(--s2)}
/* 44px de alto: §13 lo exige donde sea practicable, y con 12 destinos en una barra que
   ya scrollea, lo es. Antes eran 35px. */
.side a{display:flex;align-items:center;gap:var(--s2);min-height:var(--control-h);padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:var(--t-base);font-weight:600;color:var(--on-shell-2);transition:color var(--fast),background var(--fast);position:relative}
.side a:hover{color:var(--on-shell);background:var(--shell-2)}
.side a.on{color:var(--on-shell);background:var(--shell-2);font-weight:600}
/* Corte diagonal del acento: el mismo gesto del emblema y del badge "OS" del
   logo. Es la única licencia geométrica del sistema — acá y en nada más. */
.side a.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--brand);border-radius:0 2px 2px 0;transform:skewY(-8deg)}
.side-pie{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--shell-3)}
.side-fila{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
/* Qué instancia es esta. Ver D-024: una por marca y país. */
.instancia{font-size:var(--t-xs);font-weight:600;color:var(--on-shell);letter-spacing:.01em}
/* Interruptor de tema. 44px de alto como todo control (§13) y el estado se dice con
   texto y con aria-pressed, no solo con el ícono: §4 prohíbe que el color o la forma
   sean el único indicador de estado. */
.tema{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:var(--control-h);padding:var(--s2) var(--s3);background:none;border:1px solid var(--shell-3);border-radius:var(--r1);color:var(--on-shell-2);font-family:var(--font);font-size:var(--t-xs);font-weight:600;cursor:pointer;transition:color var(--fast),border-color var(--fast)}
.tema:hover{color:var(--on-shell);border-color:var(--on-shell-3)}
.tema-ico{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;flex-shrink:0;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}


/* Chips del shell (versión, modo, ambiente) */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r1);border:1px solid var(--shell-3);color:var(--on-shell-2);white-space:nowrap}
.chip.live{background:var(--warn);border-color:var(--warn);color:var(--warn-ink);font-weight:600}
.chip.alerta{background:var(--err);border-color:var(--err);color:var(--err-ink);font-weight:600}
.chip.alerta:hover{filter:brightness(.92)}
/* Señal de ambiente PRUEBA: el diseño NO cambia (pedido de Robert). La única
   marca es este chip + el filete rayado del borde superior — presentes en toda
   página, así el ambiente nunca depende de mirar el puerto (D-012). */
.chip.prueba{border-color:var(--brand-line);color:var(--on-shell)}
.chip.prueba::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
body.prueba::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:repeating-linear-gradient(115deg,var(--brand) 0 10px,transparent 10px 20px)}

/* Menú de usuario */
.umenu{position:relative}
.umenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border-radius:var(--r1);font-size:var(--t-sm);font-weight:600;color:var(--on-shell-2);user-select:none}
.umenu summary:hover,.umenu[open] summary{background:var(--shell-2);color:var(--on-shell)}
.umenu summary::-webkit-details-marker{display:none}
.umenu .ini{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r1);background:var(--brand);color:var(--brand-ink);font-size:var(--t-label);font-weight:700;letter-spacing:.02em;flex-shrink:0}
.umenu .pop{position:absolute;left:0;bottom:calc(100% + var(--s2));background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh2);min-width:210px;padding:var(--s2);z-index:40}
.umenu .quien{font-size:var(--t-xs);font-weight:600;color:var(--text-3);padding:6px var(--s2);border-bottom:1px solid var(--border-soft);margin-bottom:var(--s1);white-space:nowrap}
.umenu .pop a{display:flex;align-items:center;min-height:var(--control-h);padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:var(--t-base);font-weight:600;color:inherit}
.umenu .pop a:hover{background:var(--surface-3)}
.umenu .pop form{margin:0}
/* Acción terciaria (§8): sin contenedor, texto grafito, azul al pasar por encima.
   Alto 44 como el resto de los controles (§13). */
.umenu .pop button{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;min-height:var(--control-h);padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:var(--t-base);font-weight:600;font-family:var(--font);cursor:pointer;color:inherit}
.umenu .pop button:hover{color:var(--brand);background:var(--brand-soft)}
.umenu .pop button:hover{background:var(--surface-3)}

/* Barra de contexto: sub-páginas de la zona activa + señales del sistema */
.lienzo{display:flex;flex-direction:column;min-width:0}
/* Barra fija del viewer. Sin backdrop-filter: §14 prohíbe el glassmorphism y §8 exige
   que una barra fija mantenga superficie OPACA y divisor visible — con blur, el texto que
   pasa por debajo se transparenta y el contraste deja de estar garantizado. */
.pagebar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.pagebar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--s8);display:flex;align-items:center;gap:var(--s4);min-height:52px}
.subtabs{display:flex;gap:var(--s1);flex-wrap:wrap;margin-right:auto}
.subtabs a{padding:6px var(--s3);border-radius:var(--r1);font-size:var(--t-base);font-weight:600;color:var(--text-2);transition:color var(--fast),background var(--fast)}
.subtabs a:hover{background:var(--surface-3);color:var(--text)}
.subtabs a.on{background:var(--shell);color:var(--on-shell);font-weight:600}
.pagebar-acc{display:flex;align-items:center;gap:var(--s2)}
.navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;background:var(--brand);color:var(--brand-ink);border-radius:var(--rf);font-family:var(--mono);font-size:10px;font-weight:600;margin-left:5px}

main{max-width:var(--maxw);margin:0 auto;width:100%;padding:var(--s8) var(--s8) var(--s16)}
.banner-pass{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);text-align:center;padding:var(--s3) var(--s4);font-size:var(--t-sm);font-weight:600}
.banner-pass a{text-decoration:underline;font-weight:700;color:inherit}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}

/* =============================================================================
   TIPOGRAFÍA DE PÁGINA
   ============================================================================= */
h1{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--s1)}
.lede{color:var(--text-2);font-size:var(--t-base);margin-bottom:var(--s6);max-width:var(--maxr)}
h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.015em;margin:var(--s8) 0 var(--s3)}
h3{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}
h3.grp{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:var(--s6) 0 var(--s3)}
.muted{color:var(--text-2)}
.small{font-size:var(--t-sm)}
time{white-space:nowrap;font-variant-numeric:tabular-nums}

/* =============================================================================
   SUPERFICIES Y MÉTRICAS
   ============================================================================= */
.hero{background:var(--shell);color:var(--on-shell);margin:calc(var(--s8) * -1) calc(50% - 50vw) 0;padding:var(--s8) var(--s6) var(--s12)}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--s2);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s8);flex-wrap:wrap}
.hero h1{color:var(--on-shell);margin-bottom:var(--s1);font-weight:600}
.hero-sub{color:var(--on-shell-2);font-size:var(--t-sm);display:flex;align-items:center;gap:var(--s2)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#3ddc7f;animation:pulse 2s infinite;display:inline-block}
.hero-stats{display:flex;gap:var(--s10);align-items:flex-end;flex-wrap:wrap}
.hstat .k{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-shell-3)}
.hstat .v{font-size:var(--t-hero);font-weight:600;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hstat.hot .v{color:var(--brand)}
.hstat.errzero .v{color:var(--on-shell-3)}
.hstat.err .v{color:var(--err)}
.hstat svg{display:block;margin-top:var(--s1)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.cards.overlap{margin-top:calc(var(--s6) * -1);position:relative;z-index:2}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s4) var(--s6);transition:border-color var(--fast),box-shadow var(--fast)}
a.card:hover{border-color:var(--border-strong);box-shadow:var(--sh1)}
.card .k{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.card .v{font-size:var(--t-metric);font-weight:600;letter-spacing:-.025em;margin-top:var(--s1);font-variant-numeric:tabular-nums;line-height:1.1}
.card.hot .v{color:var(--brand)}
.tick{animation:tickflash 1s ease}
@keyframes tickflash{0%{color:var(--brand)}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s6);overflow-x:auto}
.delta{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;margin-top:var(--s1);color:var(--text-3);font-variant-numeric:tabular-nums}
.delta.up{color:var(--ok)}
.delta.down{color:var(--err)}

/* =============================================================================
   TABLAS — densidad de trabajo: 13px, filas de 36px, cabecera mono
   ============================================================================= */
table{width:100%;border-collapse:collapse;font-size:var(--t-base);font-variant-numeric:tabular-nums}
/* Tablas (§8): cabecera 11px en 700 con tracking de Label, filas de 44px mínimo,
   reglas horizontales finas y numerales tabulares — sin ellos las columnas de números
   bailan de fila en fila y dejan de poder compararse de un vistazo. */
th{text-align:left;font-family:var(--font);font-size:var(--t-label);letter-spacing:.10em;text-transform:uppercase;color:var(--text-2);font-weight:700;padding:var(--s3);border-bottom:1px solid var(--border-strong);white-space:nowrap}
td{padding:var(--s3);border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.45}
tr{min-height:var(--control-h)}
th.num,td.num{text-align:right}
tr:last-child td{border-bottom:0}
/* Tabla de trabajo (Leads): 9 columnas en ~1100px hacian envolver el texto en 3
   renglones y la fila crecia a 51px. En una tabla que se escanea, el ancho de columna
   no puede decidir el alto de la fila: nada envuelve y lo largo se trunca con su texto
   completo en el title. Sube densidad sin perder un dato. */
.densa td,.densa th{white-space:nowrap}
.densa .trunc{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
tr[data-href]{cursor:pointer;transition:background var(--fast)}
tr[data-href]:hover td{background:var(--surface-2)}
tr.ev-error td{border-left:2px solid var(--err);background:var(--err-soft)}

/* =============================================================================
   ESTADO — un solo lenguaje: fondo tenue + texto del color semántico.
   Lleno y sólido se reserva para lo que exige acción AHORA (caliente, error).
   ============================================================================= */
/* Estado (§7, §8): el radio de píldora está reservado exactamente para esto, y la
   píldora no puede volverse el elemento dominante de la pantalla. */
.pill{display:inline-flex;align-items:center;gap:var(--s1);padding:2px var(--s3);border-radius:var(--rf);font-size:var(--t-xs);font-weight:600;line-height:1.6;white-space:nowrap}
/* Tablero de estado: la luz es un círculo lleno, no un ícono — a un metro de distancia
   se lee el color y nada más, que es exactamente para lo que sirve. */
.luz{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.luz.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.luz.falta{background:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.luz.aviso{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.luz.off{background:var(--border-strong)}
.estado-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--border-soft);border-radius:var(--r2);overflow:hidden}
.estado-lista li{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface)}
.estado-lista .qué{font-weight:600;font-size:var(--t-sm)}
.estado-lista .det{font-size:var(--t-xs);color:var(--text-2);margin-top:2px;line-height:1.5}
.estado-lista .acc{margin-left:auto;padding-left:var(--s3);white-space:nowrap}
.estado-lista .live{font-size:var(--t-xs);color:var(--text-3)}
.estado-res{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.pill.FRIO{background:var(--surface-3);color:var(--text-2)}
.pill.TIBIO{background:var(--warn-soft);color:var(--warn)}
.pill.CALIENTE{background:var(--brand-soft);color:var(--brand-active);box-shadow:inset 0 0 0 1px var(--brand-line);font-weight:700}
.pill.DERIVADO{background:var(--ok-soft);color:var(--ok)}
.pill.CERRADO_REPUESTOS{background:var(--info-soft);color:var(--info)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.off{background:var(--surface-3);color:var(--text-2)}
/* Rojo pleno = urgencia viva (lead caliente). Rojo en contorno = terminal negativo
   (perdido, error): mismo color de familia, distinta jerarquía — si los dos son plenos,
   en una fila conviven "atender ya" y "ya no hay nada que hacer" con el mismo peso. */
.pill.err{background:var(--err-soft);color:var(--err);box-shadow:inset 0 0 0 1px var(--err-line)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}

/* =============================================================================
   CONTROLES — primaria en negro industrial; el rojo NO se gasta en "Guardar"
   ============================================================================= */
/* Botones (§8). El DEFAULT es el secundario, y esto no es una licencia: el panel tiene
   33 botones sin variante, y pintarlos todos de azul ponía decenas de acciones primarias
   en la misma pantalla — exactamente el anti-patrón que §14 nombra ("more than one primary
   call to action in the same decision area") y lo contrario de §4, que pide que el azul
   sea señal y no domine el lienzo. Con todo azul, el azul deja de señalar nada.
   El primario existe, es azul y está definido abajo: se usa para LA acción de una pantalla,
   de a una por área de decisión. Alto mínimo 44px y padding 20–24px como pide el manual. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r1);min-height:var(--control-h);padding:var(--s3) var(--s6);font-family:var(--font);font-size:var(--t-base);font-weight:600;cursor:pointer;transition:background var(--fast),border-color var(--fast),color var(--fast);white-space:nowrap}
.btn:hover{background:var(--bg);border-color:var(--text-2)}
.btn:active{background:var(--surface-3)}
/* LA acción principal de una pantalla, una sola por área de decisión (§8, §14). */
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.primary:active{background:var(--brand-active);border-color:var(--brand-active)}
/* Deshabilitado: superficie apagada y texto acero, sin hover que prometa algo que no
   va a pasar (§8). La opacidad sola dejaba texto gris claro sobre azul, por debajo del
   contraste que exige §13. */
.btn:disabled{background:var(--silver);border-color:var(--silver);color:var(--steel);cursor:not-allowed}
.btn:disabled:hover{background:var(--silver);border-color:var(--silver)}
/* Terciaria: mismo peso tipográfico, contenedor apenas dibujado. Es la que más se repite
   —21 usos en tablas y listas— y con el borde fuerte del secundario competían todos entre
   sí. Sin NINGÚN contenedor tampoco sirve: acá son acciones que ejecutan un proceso, no
   enlaces de navegación, y §8 reserva el terciario sin contenedor para lo segundo. Un
   botón que no parece botón no se aprieta. */
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn.ghost:hover{background:var(--bg);border-color:var(--border-strong)}
/* Destructiva (§8): color semántico de error, NUNCA azul. Cuando la marca era roja
   este botón usaba --brand y quedaba bien por casualidad; con la marca azul, seguir
   usándolo habría pintado de azul el botón de borrar, que el manual prohíbe. */
.btn.peligro{background:var(--err);border-color:var(--err);color:var(--err-ink)}
.btn.peligro:hover{filter:brightness(.92)}
/* Excepción documentada a los 44px (§13 dice "where practical"): el botón chico vive
   dentro de filas de tabla densas, donde un alto de 44 rompería la densidad que el
   propio manual pide en §2. Se mantiene el área táctil por encima del glifo. */
.btn.sm{min-height:32px;padding:var(--s1) var(--s3);font-size:var(--t-sm)}
.sim-acc.no-aplica{opacity:.45;cursor:not-allowed}
.sim-acc.no-aplica:hover{background:var(--surface);border-color:var(--border)}
.sim-acc.destacado{border-color:var(--brand);color:var(--brand-hover);box-shadow:inset 0 0 0 1px var(--brand)}

/* Controles de formulario (§8): alto mínimo 44px, superficie blanca, borde fuerte.
   El foco lleva borde azul y anillo visible — §13 prohíbe quitarlo sin reemplazo. */
input,select,textarea{font-family:var(--font);font-size:var(--t-base);min-height:var(--control-h);padding:var(--s3);border:1px solid var(--border-strong);border-radius:var(--r1);background:var(--surface);color:var(--text);width:100%;transition:border-color var(--fast),box-shadow var(--fast)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--shell);box-shadow:0 0 0 3px var(--surface-3)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
textarea{min-height:92px;resize:vertical;line-height:1.55}
label{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:var(--s1)}
.field{margin-bottom:var(--s4)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.acciones{display:flex;gap:var(--s2);margin:var(--s6) 0;flex-wrap:wrap}
.buscador{margin-bottom:var(--s3);max-width:420px}

/* Tooltip "i" — abre hacia abajo: .panel es scroll container y recorta arriba */
.info{display:inline-block;position:relative;vertical-align:-2px;margin-left:5px}
.info summary{list-style:none;cursor:help;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:var(--surface-3);color:var(--text-2);
  font-family:var(--font);font-size:10px;font-weight:700;font-style:normal;user-select:none;transition:background var(--fast),color var(--fast)}
.info summary::-webkit-details-marker{display:none}
.info summary:hover,.info[open] summary{background:var(--shell);color:var(--on-shell)}
.info .tip{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 7px);
  width:258px;background:var(--shell);color:var(--on-shell);font-family:var(--font);font-size:var(--t-sm);font-weight:400;line-height:1.5;
  text-transform:none;letter-spacing:0;text-align:left;padding:var(--s3);border-radius:var(--r2);
  box-shadow:var(--sh2);z-index:30;cursor:auto}
.info summary:hover .tip,.info summary:focus-visible .tip,.info[open] .tip{display:block}

/* Filtros (pills de la zona de trabajo) */
.filtros{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s4)}
.filtros a,.filtros button{padding:5px var(--s3);border-radius:var(--r1);background:var(--surface);border:1px solid var(--border);font-size:var(--t-sm);font-weight:600;cursor:pointer;font-family:var(--font);color:var(--text-2);transition:all var(--fast)}
.filtros a:hover,.filtros button:hover{border-color:var(--border-strong);color:var(--text)}
.filtros a.on,.filtros button.on{background:var(--shell);border-color:var(--shell);color:var(--on-shell);font-weight:600}

/* =============================================================================
   CONVERSACIONES (simulador y ficha)
   ============================================================================= */
.chat{display:flex;flex-direction:column;gap:var(--s2);max-width:720px}
.chat.scrolled{max-height:65vh;overflow-y:auto;padding-right:var(--s1)}
.burbuja{max-width:82%;padding:9px var(--s3);border-radius:var(--r2);white-space:pre-wrap;font-size:var(--t-base);line-height:1.5;border:1px solid var(--border)}
.burbuja.lead{align-self:flex-end;background:var(--shell);color:var(--on-shell);border-color:var(--shell);border-bottom-right-radius:3px}
.burbuja.bot{align-self:flex-start;background:var(--surface);border-bottom-left-radius:3px}
.burbuja .ts{display:block;font-family:var(--mono);font-size:10px;opacity:.55;margin-top:var(--s1)}
.burbuja .et{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:var(--s1)}
.burbuja.sys-cliente{align-self:flex-start;background:var(--surface-2);border-left:2px solid var(--brand)}
.burbuja.sys-closer,.burbuja.sys-template{align-self:flex-start;background:var(--surface-2);border-left:2px solid var(--text-3);font-size:var(--t-sm)}
.burbuja.closer{align-self:flex-end;background:var(--surface-3);border-right:2px solid var(--text-3)}
.burbuja.alerta{align-self:flex-start;background:var(--warn-soft);border-color:transparent;border-left:2px solid var(--warn);color:var(--warn);font-size:var(--t-sm)}
.convs{display:flex;flex-direction:column;gap:1px}
.convs a{display:flex;flex-direction:column;padding:7px var(--s2);border-radius:var(--r1)}
.convs a:hover{background:var(--surface-2)}
.convs a.on{background:var(--surface-3)}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-3);margin-right:3px;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}
.lectura{margin-bottom:var(--s3)}
.lectura .row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* =============================================================================
   ESTADOS, AVISOS Y BLOQUES DE CONTENIDO
   ============================================================================= */
.empty{padding:var(--s12) var(--s6);text-align:center}
.empty svg{margin-bottom:var(--s3);opacity:.5}
.empty .t{font-size:var(--t-md);font-weight:600}
.empty .s{color:var(--text-2);font-size:var(--t-sm);margin:var(--s1) 0 var(--s4);max-width:44ch;margin-left:auto;margin-right:auto}
.toast{position:fixed;bottom:var(--s6);right:var(--s6);background:var(--shell);color:var(--on-shell);padding:var(--s3) var(--s6);border-radius:var(--r2);border-left:2px solid var(--brand);box-shadow:var(--sh2);z-index:50;font-size:var(--t-base);font-weight:600;animation:toastin .22s ease}
@keyframes toastin{from{transform:translateY(10px);opacity:0}}
.banner-fase{background:var(--warn-soft);color:var(--warn);border-radius:var(--r2);padding:var(--s3) var(--s4);font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s6)}
.banner-prueba{background:var(--info-soft);color:var(--brand-active);border-left:3px solid var(--brand);border-radius:var(--r1);padding:var(--s3) var(--s4);font-size:var(--t-base);font-weight:600;margin-bottom:var(--s6)}
@media print{.banner-prueba{display:block!important;background:#fff;color:#000;border:3px solid #000;print-color-adjust:exact}}
.nota-pie{color:var(--text-2);font-size:var(--t-xs);margin-top:var(--s4)}
details.bloque{border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s2);background:var(--surface)}
details.bloque summary{cursor:pointer;font-weight:600;font-size:var(--t-base)}
details.bloque summary::-webkit-details-marker{margin-right:var(--s1)}
pre.prompt{font-family:var(--mono);font-size:var(--t-xs);line-height:1.6;white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r2);padding:var(--s4);max-height:60vh;overflow:auto}
.conx{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;margin-top:var(--s4)}
.conx .card h2{margin:0 0 var(--s3);font-size:var(--t-lg)}
.conx .estado{margin-bottom:var(--s3)}
.conx .linea{font-size:var(--t-sm);color:var(--text-2);margin:var(--s1) 0}
.conx .donde{font-size:var(--t-xs);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r1);padding:var(--s2) var(--s3);margin:var(--s3) 0;color:var(--text-2)}
.conx form{margin-top:var(--s3)}
.conx .field{margin-bottom:var(--s2)}
.checklist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s2) var(--s6)}
.checklist li{font-size:var(--t-sm);display:flex;gap:var(--s2);align-items:baseline}
.checklist li form{display:inline}
fieldset.paso{border:1px solid var(--border);border-radius:var(--r2);padding:var(--s4) var(--s6);margin-bottom:var(--s4)}
fieldset.paso legend{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:0 var(--s2)}

/* =============================================================================
   RESPONSIVE — la lateral se vuelve barra superior con tabs scrolleables.
   No es "el desktop achicado": cambia el eje de la navegación.
   ============================================================================= */
@media(max-width:1000px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Dos filas, no una: marca + estado arriba, navegación abajo a lo ancho. En una sola
     fila la nav quedaba con 0px de ancho (marca y pie se comían los 375) y el documento
     entero medía 645. La nav scrollea DENTRO de su fila. */
  .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s4);overflow:visible}
  .side a.side-brand{padding:0;flex-shrink:0;flex-direction:row;align-items:center}
  .side-brand .txt{display:none}
  /* Con la barra colapsada el wordmark no entra: va el símbolo suelto, que es
     exactamente el caso que el manual contempla (§3, "space is constrained"). */
  .side-brand .wm{display:none}
  .side-brand .sym{display:block}
  /* min-width:0 es lo que hace que el scroll horizontal viva DENTRO de la nav y no
     empuje la pagina entera: sin eso, el min-content de los items gana y a 375px el
     documento medía 645px de ancho. */
  .side-nav{order:3;flex-basis:100%;flex-direction:row;gap:var(--s3);overflow-x:auto;scrollbar-width:none;min-width:0}
  .side-nav::-webkit-scrollbar{display:none}
  .side-grp{flex-direction:row;gap:2px}
  .side-lbl{display:none}
  .side a{white-space:nowrap;padding:6px var(--s3);font-size:var(--t-sm)}
  .side a.on::before{display:none}
  .side-pie{margin-top:0;margin-left:auto;padding-top:0;border-top:0;flex-direction:row;align-items:center;flex-shrink:0}
  .umenu .nom{display:none}
  .kbtn{margin-bottom:0;width:auto}
  .kbtn kbd{display:none}
  .side-fila .chip:not(.live):not(.alerta):not(.prueba){display:none}
  .umenu .pop{bottom:auto;top:calc(100% + var(--s2));left:auto;right:0}
  .pagebar-in{padding:0 var(--s4);min-height:46px}
  .subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .subtabs::-webkit-scrollbar{display:none}
  .subtabs a{white-space:nowrap}
  main{padding:var(--s6) var(--s4) var(--s12)}
  /* En pantalla chica una tabla ancha tiene que scrollear DENTRO de su caja, aunque el
     contenedor que le toco no sea .panel: si no, empuja el documento entero y toda la
     pagina se corre de costado (el reporte medía 454px en una pantalla de 375). */
  table{display:block;overflow-x:auto;max-width:100%}
  .hero{margin-top:calc(var(--s6) * -1);padding:var(--s6) var(--s4) var(--s10)}
  /* minmax(0,1fr) y no 1fr: con 1fr la columna no puede achicarse por debajo del
     min-content de lo que tiene adentro (una tabla ancha), y el grid empuja la pagina. */
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filtros::-webkit-scrollbar{display:none}
  .filtros a,.filtros button{white-space:nowrap;flex-shrink:0}
  .info .tip{left:auto;right:-8px;transform:none;width:min(258px,82vw)}
}
@media(max-width:600px){
  .hstat .v{font-size:var(--t-metric)}
  .card .v{font-size:var(--t-xl)}
  h1{font-size:var(--t-xl)}
  .burbuja{max-width:92%}
}

/* =============================================================================
   IMPRESIÓN — el PDF sale con el criterio del rol viewer: sin chrome, sin
   acciones, sin la mitad operativa. El banner de datos de prueba SÍ se imprime.
   ============================================================================= */
.solo-print{display:none}
@media print{
  .side,.pagebar,.banner-pass,.filtros,.acciones,.btn,.toast,.solo-admin,.skip,.banner-fase{display:none!important}
  body{background:#fff;font-size:12px}
  body.prueba::before{display:none}
  .app{display:block}
  main{max-width:none;padding:0 0 var(--s6)}
  .card,.panel{box-shadow:none;border:1px solid var(--border)}
  .card,.panel,tr{break-inside:avoid}
  h2{break-after:avoid}
  main a{text-decoration:none!important;color:inherit}
  .solo-print{display:block}
}

/* =============================================================================
   VARIANTES DE CONTEXTO CLARO — el viewer no tiene barra lateral: su chrome es
   una barra superior mínima (marca + su menú), y ahí los mismos componentes del
   shell oscuro necesitan su versión sobre papel.
   ============================================================================= */
.umenu .nom{font-size:var(--t-sm);font-weight:600;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-mini{margin-right:auto;display:flex;align-items:center;gap:var(--s3)}
.brand-mini .inst-mini{font-size:var(--t-xs);font-weight:600;color:var(--text-2);border-left:1px solid var(--border);padding-left:var(--s3)}
.brand-mini img{display:block;height:26px;width:auto}
.pagebar .umenu summary{color:var(--text-2)}
.pagebar .umenu summary:hover,.pagebar .umenu[open] summary{background:var(--surface-3);color:var(--text)}
.pagebar .umenu .pop{bottom:auto;top:calc(100% + var(--s2));left:auto;right:0}
.pagebar .chip{border-color:var(--border);color:var(--text-2)}
/* Emblema en reposo: los estados vacíos llevan la marca en gris, no en rojo — una
   pantalla sin datos no es una urgencia. */
.empty .emb{height:32px;width:auto;opacity:.32;margin-bottom:var(--s3)}

/* =============================================================================
   COMMAND CENTER — la pantalla del día. Regla de la pantalla: ningún número sin
   salida. Cada tile de atención linkea a la lista donde se actúa; un "23
   calientes" que no se puede clickear es adorno, no información.
   ============================================================================= */
.cc-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.cc-cab .fecha{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* Nivel 1 — atención. Los tiles con trabajo pendiente van primero y en rojo; los
   que están en cero se apagan y se corren al final: la pantalla ordena sola. */
.atencion{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s3)}
.tile{display:flex;flex-direction:column;gap:var(--s1);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--r2);padding:var(--s4);transition:border-color var(--fast),box-shadow var(--fast)}
a.tile:hover{border-color:var(--border-strong);box-shadow:var(--sh1)}
.tile .n{font-size:var(--t-metric);font-weight:600;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.tile .t{font-size:var(--t-base);font-weight:600}
.tile .q{font-size:var(--t-sm);color:var(--text-2);line-height:1.45}
.tile .cta{font-size:var(--t-sm);font-weight:600;color:var(--brand-hover);margin-top:var(--s1)}
.tile.urg{border-left-color:var(--err);background:var(--err-soft)}
.tile.urg .n{color:var(--err)}
.tile.cero{border-left-color:var(--border-soft);background:var(--surface-2)}
.tile.cero .n{color:var(--text-3)}
.tile.cero .q{color:var(--text-3)}
.cc-limpio{display:flex;align-items:center;gap:var(--s4);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--ok);border-radius:var(--r2);padding:var(--s6)}
.cc-limpio .emb{height:28px;width:auto;opacity:.32}
.cc-cero{margin-top:var(--s3);font-size:var(--t-sm);color:var(--text-3)}
.cc-cero a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border-strong)}
.cc-cero a:hover{color:var(--text)}
.cc-limpio b{display:block;font-size:var(--t-lg);font-weight:600}
.cc-limpio span{font-size:var(--t-sm);color:var(--text-2)}

/* Nivel 2 — pulso: números del día con su variación y la serie de 14 días. */
.pulso{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.pulso .card{padding:var(--s4)}
.spark{display:block;width:100%;height:44px;margin-top:var(--s2);overflow:visible}

/* Nivel 3 — señales: lo que el sistema detectó, en renglones legibles de un vistazo. */
.senales{display:flex;flex-direction:column}
.senal{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--border-soft)}
.senal:last-child{border-bottom:0}
.senal .marca{width:3px;align-self:stretch;border-radius:2px;background:var(--border-strong);flex-shrink:0}
.senal.alerta .marca{background:var(--err)}
.senal.aviso .marca{background:var(--warn)}
.senal.sistema .marca{background:var(--info)}
.senal .cuerpo{min-width:0;flex:1}
.senal .tit{font-size:var(--t-base);font-weight:600;line-height:1.35}
.senal .det{font-size:var(--t-sm);color:var(--text-2);line-height:1.45}
.senal .cuando{font-family:var(--mono);font-size:var(--t-xs);color:var(--text-3);white-space:nowrap}

/* =============================================================================
   DESEMPEÑO DE LA RED — tabla comparativa + lectura. Las tasas se leen en
   columna (comparar concesionarios entre sí), no en fila, así que van con
   números tabulares y una barra de contexto detrás del número: la posición
   relativa se ve antes de leer el valor.
   ============================================================================= */
.tasa{display:flex;align-items:center;gap:var(--s2);min-width:96px}
.tasa .v{font-variant-numeric:tabular-nums;font-weight:600;min-width:38px;text-align:right}
.tasa .b{flex:1;height:5px;border-radius:3px;background:var(--chart-rail);overflow:hidden;min-width:30px}
.tasa .b i{display:block;height:100%;border-radius:3px;background:var(--chart-bar)}
.tasa.bien .b i{background:var(--chart-pos)}
.tasa.mal .b i{background:var(--chart-neg)}
.tasa .v.nd{color:var(--text-3);font-weight:400}
/* Lectura del bloque: la frase que convierte la tabla en conclusión. */
.lectura-dato{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface-2);border:1px solid var(--border-soft);border-left:3px solid var(--info);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s4);font-size:var(--t-sm);line-height:1.5}
.lectura-dato b{font-weight:600}
.lectura-dato .ico{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--info);white-space:nowrap;padding-top:1px}
.ficha-red{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);margin-bottom:var(--s6)}
/* Buscador global (⌘K): overlay centrado arriba, como en toda herramienta de trabajo.
   Se abre con teclado y con el botón de la barra lateral — un atajo que nadie descubre
   no existe. */
.ico{display:inline-block;vertical-align:-3px;flex-shrink:0}
.checklist li .ico{color:var(--text-3)}
.checklist li.ok .ico{color:var(--ok)}
.kbtn{display:flex;align-items:center;gap:var(--s2);width:100%;background:var(--shell-2);border:1px solid var(--shell-3);color:var(--on-shell-2);border-radius:var(--r1);padding:7px var(--s3);font-family:var(--font);font-size:var(--t-sm);cursor:pointer;text-align:left;margin-bottom:var(--s4)}
.kbtn:hover{background:var(--shell-3);color:var(--on-shell)}
.kbtn kbd{margin-left:auto;font-family:var(--mono);font-size:10px;border:1px solid var(--shell-3);border-radius:3px;padding:1px 4px;color:var(--on-shell-3)}
.kfondo{position:fixed;inset:0;background:rgba(13,16,15,.55);z-index:80;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.kcaja{width:min(620px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh2);overflow:hidden}
.kcaja input{border:0;border-bottom:1px solid var(--border);border-radius:0;font-size:var(--t-lg);padding:var(--s4) var(--s6)}
.kcaja input:focus{box-shadow:none;border-color:var(--border)}
.kres{max-height:52vh;overflow-y:auto}
.kres a{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s6);border-bottom:1px solid var(--border-soft)}
.kres a:last-child{border-bottom:0}
.kres a.sel,.kres a:hover{background:var(--surface-3)}
.kres .tipo{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);width:96px;flex-shrink:0}
.kres .tit{font-weight:600;font-size:var(--t-base)}
.kres .sub{font-size:var(--t-sm);color:var(--text-2);margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.kvacio{padding:var(--s6);color:var(--text-2);font-size:var(--t-sm)}
.kpie{display:flex;gap:var(--s4);padding:var(--s2) var(--s6);border-top:1px solid var(--border-soft);background:var(--surface-2);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* Cabecera 360 de la ficha del lead: los seis datos que definen el caso, en una tira,
   antes de cualquier scroll. Antes había que bajar hasta "Perfil" para saber qué
   modelo busca y a qué concesionario se derivó — en la pantalla que más se abre. */
.cabeza-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:var(--s6)}
.cabeza-lead .dato{padding:var(--s3) var(--s4);border-right:1px solid var(--border-soft);min-width:0}
.cabeza-lead .dato:last-child{border-right:0}
.cabeza-lead .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:3px}
.cabeza-lead .v{font-size:var(--t-base);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cabeza-lead .v.apagado{color:var(--text-3);font-weight:400}
@media(max-width:1000px){.cabeza-lead .dato{border-right:0;border-bottom:1px solid var(--border-soft)}}
/* Conversión paso a paso bajo cada etiqueta del embudo: el volumen ya está en la barra,
   lo que no se veía era cuánta gente se cae entre un escalón y el siguiente. */
.paso{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-3);font-weight:400}
.paso .fuga{color:var(--err);font-weight:600}