/* FASE 2 — Tipografia de marca: Archivo para titulos, Lato para texto.
   Es la misma familia que declara el Design System en tokens/fonts.css; se carga
   aqui y no desde el archivo generado para que ese siga siendo solo declaraciones.
   Si E-HUK define despues otra tipografia corporativa, se cambia en esta linea. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Lato:wght@400;700;900&display=swap');
/* Tokens del Design System de E-HUK (FASE 0).
   Solo DECLARA variables: no aplica ni un estilo. Se regenera con
   herramientas/generar_tokens_ds.py.
   Queda fuera a propósito su base.css, que aplicaría estilos a body, titulares,
   enlaces y foco: esas decisiones las toma esta hoja, no el sistema. Su fonts.css
   también queda fuera, pero solo porque las fuentes se cargan arriba (Fase 2). */
@import url("ds/wcl-tokens.css");
/* Movimiento (FASE 5). Es el único archivo del sistema con selectores, por eso
   va aparte. Define [data-wcl-reveal], .wcl-pulse y las utilidades de elevación.
   OJO: [data-wcl-reveal] arranca en opacity:0. Por eso ese atributo NUNCA se
   escribe en las plantillas: lo pone el propio JavaScript. Si el script fallara,
   no hay atributo y no hay nada oculto — en una herramienta de turnos, contenido
   invisible por un script caído no es una opción. */
@import url("ds/wcl-motion-runtime.css");

:root{
  /* ============ Marca E-HUK · Grupo Logístico ============
     PUENTE AL DESIGN SYSTEM (Fase 0).
     Las variables de abajo son las que usa toda la app. Las que apuntan a un
     token del sistema tienen EXACTAMENTE el mismo color que tenían antes
     (comprobado carácter por carácter): el puente no cambia ni un píxel, solo
     cambia de dónde sale el valor. Las que siguen con su color escrito a mano
     son las que el Design System define DISTINTO; cambiarlas es una decisión
     de la Fase 3, no un efecto colateral de esta. */

  /* -- Ya alineadas con el sistema (mismo valor, ahora con un solo origen) -- */
  --navy: var(--ink-950);      /* #031F28 = ink-950  */
  --blue: var(--cyan-600);     /* #0096D3 = cyan-600 */
  --rosa: var(--cyan-200);     /* #66CADA = cyan-200 */
  --naranja: var(--cyan-600);  /* alias histórico del azul de marca */
  --degradado: linear-gradient(90deg, var(--cyan-600), var(--cyan-200));

  /* -- FASE 3: resueltas. Ya no quedan colores de marca escritos a mano. -- */
  --light: var(--cyan-050);      /* #dbf0f9 */
  /* Encabezado de tabla: OSCURO con texto celeste y una línea fina abajo (diseño,
     grupo 3, JuanJo 2026-09-16). La banda clara de cyan-150 llamaba más la atención
     que los datos. En ink-850 no se distinguía (1.04:1 contra el cuerpo ink-750): por
     eso va en ink-950, el tono de la barra, y lo que la separa es el texto celeste
     (cyan-200) y la línea cyan-300 de .tabla th. Tablas solo hay en el tema oscuro. */
  --cabecera-tabla: var(--ink-950);
  --cabecera-tabla-texto: var(--cyan-200);
  /* Sin saltito (grupo 3): botones y tarjetas ya no suben al pasar el mouse. Queda
     el cambio de brillo, sombra o borde. Se anulan los tokens, no cada regla. */
  --lift-hover:none;
  --lift-card:none;
  /* Alto de los campos de formulario. Iban con 13px arriba y abajo: 45px de alto, que en
     un panel de 6 campos son 270px de puro aire. Con 6px el campo mide 31px (-31%, que
     es lo que pidio E-HUK) y sigue por encima del minimo tocable de 24px (WCAG 2.2).
     Va como numero propio porque la escala de spacing salta de 4 a 8 y ninguno da 30%. */
  --pad-campo-y: 6px;

  /* BOTONES: un solo color, tres tonos. Antes el boton llevaba el MISMO degradado que
     el logo, asi que competia con la marca en cada pantalla; y de paso el texto blanco
     sobre ese degradado daba 3.33:1 en un extremo y 1.9:1 en el otro, con 4.5 exigido.
     La escala de abajo separa jerarquia por tono —mas claro = mas importante— y las dos
     cumplen. Ninguna usa degradado: eso se queda para el logo. */
  --btn-primario: var(--cyan-700);          /* 4.85:1 con texto blanco */
  --btn-primario-activo: var(--cyan-800);
  --btn-secundario: var(--cyan-800);        /* 7.01:1 — mas apagado, cede protagonismo */
  --btn-secundario-activo: var(--ink-850);
  --grey:  var(--slate-500);     /* #4a6570 */
  --red:   var(--status-offline);/* #e2584d */
  --bg:    var(--slate-050);     /* #f4f8fb */

  /* FASE 1 — las dos variables que el CSS usaba SIN definir nunca.
     Consecuencia real: la línea que separa los pasos del onboarding no se veía
     y las listas heredaban el color del padre. Se definen ahora porque es lo
     que permite que esos componentes tomen los bordes y el texto del sistema. */
  --borde: var(--border-light);   /* #dbe8ef en superficie clara */
  --surface-raised: var(--slate-200);  /* barra de fondo de la agenda */
  --tinta: var(--text-body);      /* #4a6570 en superficie clara */

  /* FASE 3 — El sistema define SEIS estados operativos y nada mas. Estos son
     de producto (confirmaciones, avisos y errores de formulario) y se declaran
     una sola vez, derivados de su paleta, en vez de repetirse por el archivo. */
  --verde-ok:#17743f; --verde-ok-fuerte:#166534;
  --ok-suave:#e7f6ec; --aviso-suave:#fff7e6; --error-suave:#fbe9e7;

  /* ====== DECISION DE MARCA DE E-HUK (JuanJo) — ESQUINAS ======
     El Design System pide controles en pildora completa. A E-HUK no le gusta:
     prefiere una redondez muy leve, "casi terminando en punta". Se ajusta AQUI,
     sobre los tokens del sistema, para que siga habiendo un solo sitio donde
     cambiarlo. Si la decision se confirma, pasa al propio Design System. */
  --radius-control:3px;    /* botones, filtros y buscadores */
  --radius-input:3px;      /* campos de formulario */
  --radius-pill:3px;       /* badges de estado */
  --radius-chip:3px;
  --radius-sm:2px;
  --radius-md:3px;
  --radius-card:4px;       /* tarjetas y tablas */
  --radius-card-lg:5px;    /* dialogos */
  --radius-xs:2px;

  /* Tracking del encabezado de tabla: derivado, no es del sistema (ver .tabla th) */
  --ls-tabla:.06em;

  /* ====== CONTENIDO 25% MAS PEQUENO (decision de E-HUK) ======
     Se encoge SOLO el texto de contenido. Los titulos y el menu conservan su
     tamano: son la jerarquia, y achicarlos aplanaria la pantalla.
     El menu se fija aparte, mas abajo, para que no lo arrastre esta escala. */
  /* Un escalón arriba (JuanJo, auditoría 2026-09-16, M8): en jornadas de 8 horas el 12/10
     cansaba; 13/12/11 se lee mejor y las tablas siguen cabiendo. El piso sigue en 10. */
  --fs-body:13px;      /* era 16 → 12 → 13 */
  --fs-body-sm:12px;   /* era 14 → 11 → 12 */
  --fs-caption:11px;   /* era 13 → 10 → 11 */
  --fs-eyebrow:11px;   /* era 13 → 10 → 11 — encabezados de tabla */
  --fs-micro:10px;     /* era 11 · piso de legibilidad */
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:var(--fw-regular);background:var(--bg);color:#273043}
/* La pantalla de ingreso es la única superficie clara: tarjeta blanca sobre ink. */
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--grad-hero)}
.tarjeta{background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);
  padding:var(--card-pad);width:100%;max-width:420px}
.marca{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
/* Logo LOGIGHO (marca): LOGI en claro/oscuro según el fondo + GHO en degradado + flecha */
.logo{display:inline-flex;align-items:center;font-weight:800;font-size:var(--fs-title);letter-spacing:.3px;line-height:1}
.logo::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--naranja);margin-right:6px;transform:translateY(-1px)}
.logo .lg-a{color:#fff}
.logo .lg-b{background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}
.marca .logo{font-size:var(--fs-title)}
.marca .logo .lg-a{color:var(--navy)}
.logo.chico{font-size:var(--fs-heading)}
/* Logo oficial E-HUK (ícono PNG con fondo transparente) */
/* El logo al doble (26 -> 52px). Para que la barra no crezca los mismos 26px en TODAS
   las pantallas —justo despues de apretar la densidad— su relleno vertical baja de 12 a
   8px: la barra pasa de 50 a 68px en vez de 76. --alto-barra va detras, porque de ese
   numero cuelgan los encabezados de tabla pegajosos. */
/* DESTELLO DEL LOGO. Un reflejo diagonal barre la pieza, recortado con la silueta
   del propio logo para que jamas se salga de la forma.
   El span hace falta porque a un <img> no se le puede colgar un ::after: es un
   elemento reemplazado y el navegador no le dibuja pseudo-elementos. El span se
   ajusta al img que envuelve, asi que la version .grande hereda la medida sola.
   Cada 8 segundos, no cada 3 como en la demo: esta barra se mira ocho horas
   seguidas y un destello continuo termina cansando. El ciclo es el 8s de abajo. */
.logo-marco{position:relative;display:inline-block;line-height:0}
/* Grupo 3 de diseño (JuanJo, 2026-09-16): el destello se retiró y el logo queda quieto. */
/* Quien pidio menos animacion en su sistema no ve ninguno de los tres destellos. */
@media (prefers-reduced-motion:reduce){
  .barra .menu a.activo::after{animation:none;background-image:none}
}
.logo-img{height:52px;display:block;background:transparent;padding:0}
/* La mitad de 88: el logo del ingreso se comia el ancho de la tarjeta y empujaba el
   nombre de la aplicacion fuera del borde. A 44 caben los dos con holgura. */
.logo-img.grande{height:44px;padding:0}
h1{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-heading);
  line-height:var(--lh-heading);letter-spacing:var(--ls-title);margin:0;color:var(--navy)}
.lema{margin:2px 0 0;color:var(--grey);font-size:var(--fs-caption);font-weight:var(--fw-regular);font-style:italic}
label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-bold);color:var(--navy);margin:10px 0 4px}
input{width:100%;padding:var(--pad-campo-y) var(--space-2);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-input);font-size:var(--fs-body);
  font-family:inherit;color:var(--text-heading);background:var(--surface-card)}
input:focus{outline:none;border-color:var(--accent)}
.campo-clave{position:relative}
.campo-clave input{padding-right:46px}
.ojo{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto;margin:0;padding:4px;background:transparent;border:0;color:var(--grey);cursor:pointer;line-height:0;display:flex}
.ojo:hover{filter:none;background:transparent;color:var(--navy)}
.ojo:active{filter:none}
/* CONTROLES — regla dura del Design System: los controles son SIEMPRE píldora
   completa; no existe el botón de esquinas redondeadas. El hover significa
   profundidad y luz (sube y brilla), nunca un relleno más oscuro.
   `font-family:inherit` corrige un defecto real: los <button> no heredan la
   tipografía, así que "Ingresar" se veía en Arial y no en la fuente de la app. */
button{width:100%;margin-top:14px;padding:9px;background:var(--btn-primario);color:#fff;border:0;
  border-radius:var(--radius-control);font-size:var(--fs-body);font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:var(--ls-button);
  transition:transform var(--dur-hover) var(--ease-depth),box-shadow var(--dur-hover) var(--ease-depth),filter var(--dur-hover) var(--ease-depth)}
button:hover{filter:brightness(1.06);transform:var(--lift-hover);box-shadow:var(--glow-cyan)}
button:active{filter:brightness(.94);transform:var(--press-scale);box-shadow:var(--glow-cyan-sm)}
button:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.alerta{background:var(--error-suave);border:1px solid var(--status-offline);color:#8f2f25;
  padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--fs-body-sm)}
.barra{background:var(--ink-950);color:var(--text-on-dark);display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);position:relative}
/* Filo cyan que se desvanece a los lados: el separador de seccion del sistema. */
.barra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-hairline)}
/* Con menú lateral, el filo del encabezado arranca después del menú: si cruzara por debajo,
   la esquina de arriba a la izquierda se leería como dos piezas pegadas. */
body:has(.menu-lateral) .barra::after{left:0}
/* «ACTUAR COMO»: la franja de aviso, dentro de la MISMA barra —flex-wrap la manda a su
   propia fila, de punta a punta— para que suba y baje pegada al header (position:sticky
   ya lo hereda de .barra) sin tener que adivinar la altura del header para un position:
   fixed. A proposito NO usa el cian de la marca: tiene que leerse como "modo especial",
   no como una pantalla mas de la app, y el ambar es el color que en todo el sistema
   significa advertencia. flex-wrap:wrap en el .barra base es nuevo, pero sin esta franja
   nada mas fuerza a ningun hijo a romper linea, asi que el resto de pantallas se ve igual. */
.banda-actuar-como{flex:1 1 100%;order:5;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--space-3);background:#5a3d0a;
  border-top:1px solid rgba(255,255,255,.14);margin:var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-2));
  padding:8px var(--space-4);font-size:var(--fs-body-sm);color:#ffe8b8}
.banda-actuar-como b{color:#fff}
/* E-HUK de visita en la plataforma de un cliente: violeta, para no confundirse con el
   ámbar de «actuar como» ni con el cian de la marca. La barra es oscura en los dos temas. */
.banda-actuar-como.banda-cliente{background:#3f2470;color:#eadcff}
body:has(.banda-cliente) .barra{box-shadow:inset 0 4px 0 #a77bff}
.banda-actuar-como a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}
.banda-actuar-como a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
/* IDENTIDAD EN LA BARRA. Dos renglones: el nombre arriba y el perfil debajo,
   entre parentesis. Antes aqui iba «Seccion · Nombre», pero la seccion ya la
   dice el menu subrayandola, asi que repetirla gastaba el sitio mas visible de
   la pantalla en un dato que ya estaba. El perfil, que si cambia lo que cada
   quien puede hacer, no aparecia por ningun lado. */
/* LA MARCA Y LA IDENTIDAD, en UNA columna: nombre de la aplicacion, eslogan, nombre
   del usuario y su rol. Cada renglon mas pequeno que el de arriba, para que la
   jerarquia se lea sola sin necesidad de separadores ni cajas. Va en el encabezado y
   en ningun otro sitio: la seccion ya la dice el menu subrayandola. */
/* Cuatro escalones REALES de la escala del sistema: 17 / 12 / 11 / 10. Ojo con
   --fs-caption y --fs-micro: en esta app las dos valen 10px (el contenido se achico
   un 25%), asi que usarlas para dos renglones seguidos los dejaria del mismo tamano
   y la jerarquia no se leeria. El nombre toma --fs-subheading, que NO se achico
   porque los titulos conservan su tamano a proposito. */
.marca-app{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.marca-nombre{font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:var(--fs-subheading);letter-spacing:var(--ls-title);white-space:nowrap}
.marca-eslogan{font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;
  letter-spacing:.04em;color:var(--accent-rail);white-space:nowrap}
/* 10px y 9px: por debajo de --fs-micro, que en esta app ya vale 10. Van como valor
   directo porque la escala del sistema no baja de ahi, y aqui hacen falta dos
   escalones mas para que la jerarquia de cuatro renglones se lea. */
.marca-usuario{font-family:var(--font-text);font-size:11px;font-weight:700;
  color:var(--text-on-dark);white-space:nowrap;margin-top:3px}
.marca-rol{font-family:var(--font-text);font-size:10px;font-weight:400;
  color:#9fd7e8;white-space:nowrap}
/* En la pantalla de ingreso la marca va sobre una tarjeta BLANCA, no sobre ink: el
   cyan del eslogan daria 1.9 de contraste ahi (ilegible). Se usa el azul profundo
   —mismo tono 197, misma saturacion— que da 4.94. Y el nombre no puede heredar el
   blanco del encabezado oscuro. */
.centro .marca-nombre{color:var(--navy)}
.centro .marca-eslogan{color:#0078a8}
/* En el ingreso el nombre SI puede partirse en dos renglones: la tarjeta mide 440px y
   «Workforce Control Lite» en una sola linea se salia por el borde derecho. En el
   encabezado de la app se queda en nowrap, que ahi hay ancho de sobra. */
.centro .marca-nombre,
.centro .marca-eslogan{white-space:normal}
.centro .marca-app{min-width:0;flex:1 1 auto}
.centro .marca{align-items:center;gap:var(--space-3)}
.centro .marca .logo-marco{flex:0 0 auto}
.barra .salir{color:#9fd7e8;text-decoration:none;font-size:var(--fs-body-sm)}
/* Con 12 secciones (Líneas entró el 2026-09-09) el paso de 16px desbordaba la barra
   y el menú se montaba sobre la marca: paso de 12px. La letra se queda en 14px —
   decisión de diseño amarrada por prueba: el menú NO se encoge. */
.barra .menu{display:flex;gap:var(--space-3);margin-right:18px}
/* Y si aun así el ancho no alcanza (zoom del navegador, pantalla mediana), la MARCA
   se recorta con puntos suspensivos en vez de dejar que el menú se le monte encima
   (visto por JuanJo el 2026-09-09: «Liqui…Operación» montados). */
.barra .marca-app{overflow:hidden}
.barra .marca-app>span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Anchos intermedios (portátil, o pantalla grande con zoom): la fila única necesita
   ~1284px con las 12 secciones; por debajo, ANTES el fallback recortaba la marca
   («Workforce Control L…», visto por JuanJo el 2026-09-14). Ahora es una rejilla de
   tres columnas y dos renglones, con cuatro ajustes de JuanJo del mismo día:
   · logo y texto de la marca abarcan LOS DOS renglones y se centran ENTRE SÍ (si
     solo el logo los abarcaba, quedaba ~25px más abajo que el texto);
   · la marca mide su ancho natural: el nombre de la app nunca se recorta;
   · «Salir» arriba a la derecha, y el menú a la DERECHA y al PISO del encabezado;
   · si el menú no cabe en un renglón baja a dos — la letra se queda en 14px.
   Por debajo de 781 manda la regla del celular, que además encoge la marca. */
@media (min-width:781px) and (max-width:1320px){
  .barra{display:grid;grid-template-columns:auto max-content minmax(0,1fr) auto;
    grid-template-areas:"logo marca salir tema" "logo marca menu tema";
    row-gap:4px;align-items:center}
  .barra .logo-marco{grid-area:logo;align-self:center}
  .barra .btn-tema{grid-area:tema;align-self:center;justify-self:end}
  .barra .marca-app,.barra .titulo{grid-area:marca;align-self:center}
  .barra .menu{grid-area:menu;align-self:end;flex-wrap:wrap;row-gap:4px;
    margin-right:0;justify-content:flex-end}
  .barra .salir{grid-area:salir;justify-self:end;align-self:start}
  .banda-actuar-como{grid-area:auto;grid-column:1 / -1}
}
.barra .menu a{color:#9fd7e8;text-decoration:none;font-size:var(--fs-body-sm);padding-bottom:2px;position:relative;
  transition:color .18s ease,text-shadow .18s ease}
/* Brillo tenue al pasar por encima: el enlace se aclara y suelta un halo cyan.
   Es la unica pista de que el menu responde; antes no cambiaba nada al pasar. */
.barra .menu a:hover{color:var(--text-on-dark);text-shadow:0 0 10px rgba(102,202,218,.55)}
.barra .menu a:focus-visible{outline:2px solid var(--accent-rail);outline-offset:3px;border-radius:2px}
.barra .menu a.activo{color:var(--text-on-dark);font-weight:var(--fw-bold);
  border-bottom:2px solid var(--accent-rail)}
/* Un destello recorre el subrayado de la seccion en la que estas, cada 7 segundos.
   El riel de color se queda como estaba —esto va ENCIMA, sin tocar la geometria—,
   y el degradado nace y muere transparente, asi que fuera del barrido no se ve
   nada: es un guino, no un parpadeo. */
.barra .menu a.activo::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;pointer-events:none;background-repeat:no-repeat;background-size:55% 100%;
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:subrayado-destello 7s ease-in-out infinite}
@keyframes subrayado-destello{0%,70%{background-position:-60% 0}100%{background-position:160% 0}}
.contenido{padding:var(--space-5);max-width:640px;margin:0 auto}
/* Portal del asesor: pantalla de una sola tarea, tarjeta bien centrada */
.contenido.enfoque{max-width:none;display:flex;flex-direction:column;align-items:center;padding:40px 20px}
.contenido.enfoque .tarjeta{width:100%;max-width:520px}
h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-title);
  line-height:var(--lh-title);letter-spacing:var(--ls-title);color:var(--navy);margin-top:0}
.nota{color:var(--grey);font-size:var(--fs-body-sm);background:var(--light);padding:12px;border-radius:var(--radius-md)}

/* Panel del turno (portal del asesor) */
.mensaje{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-body);margin-bottom:var(--space-4)}
.mensaje.ok{background:var(--ok-suave);border:1px solid var(--verde-ok);color:var(--verde-ok-fuerte)}
.mensaje.error{background:var(--error-suave);border:1px solid var(--status-offline);color:#8f2f25}
.mensaje.aviso{background:var(--aviso-suave);border:1px solid var(--status-paused);color:#7a5300}
.estado-caja{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin:6px 0 14px}
.estado-caja.abierto{background:var(--ok-suave);border:1px solid var(--verde-ok)}
.estado-caja.cerrado{background:var(--light);border:1px solid #d4e0f4}
.estado-caja.pausa{background:var(--aviso-suave);border:1px solid var(--status-paused)}
.punto{width:14px;height:14px;border-radius:50%}
/* El anillo del pulso se dibuja con currentColor, asi que el punto necesita
   su color de texto ademas del fondo. */
.punto.verde{background:var(--status-operating);color:var(--status-operating)}
.punto.gris{background:var(--status-outofshift)}
.punto.amarillo{background:var(--status-paused)}
.estado-texto{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--navy);letter-spacing:var(--ls-title)}
.estado-sub{color:var(--grey);font-size:var(--fs-body-sm);font-weight:var(--fw-regular);margin:2px 0 0}
/* Los botones grandes del portal también son píldora (regla de controles del DS).
   Sus colores —verde, ámbar, rojo— son de producto y el sistema no los define
   como botones: se conservan tal cual y solo adoptan forma, movimiento y foco. */
.boton-grande{display:block;width:100%;padding:16px;font-size:var(--fs-subheading);font-weight:800;color:#fff;border:0;
  border-radius:var(--radius-control);cursor:pointer;text-align:center;font-family:inherit;
  transition:transform var(--dur-hover) var(--ease-depth),box-shadow var(--dur-hover) var(--ease-depth)}
.boton-grande:hover{transform:var(--lift-hover)}
.boton-grande:active{transform:var(--press-scale)}
.boton-grande.iniciar{background:var(--verde-ok)}
.boton-grande.iniciar:active{background:var(--verde-ok-fuerte)}
.boton-grande.finalizar{background:var(--red)}
.boton-grande.finalizar:active{background:#c04437}
.boton-grande.pausar{background:var(--status-paused)}
.boton-grande.pausar:active{background:#c98a12}
.boton-grande.regresar{background:var(--verde-ok)}
.boton-grande.regresar:active{background:var(--verde-ok-fuerte)}
.forma-turno{margin:0}
.latido-info{margin-top:18px;font-size:var(--fs-caption);color:var(--grey);text-align:center}
.latido-info #ultimo-latido{color:var(--navy);font-weight:700}

/* Tablero del supervisor */
.contenido.ancho{max-width:var(--content-max)}
/* TARJETAS DE CIFRA (los contadores del tablero).
   Estructura del StatCard del sistema: la cifra grande arriba, la etiqueta debajo,
   y el riel de 4px al costado —el detalle mas reconocible de la marca—, aqui con
   el color del estado en vez de cyan, porque encima informa. */
/* Los ocho contadores van en UNA sola fila. Con flex-wrap se partian en dos:
   sumaban ~1176px (la etiqueta mas larga, "No se presentó", pide 100px y estiraba
   su tarjeta a 145px) contra los 1140px utiles de .contenido.ancho, asi que
   "Descansan hoy" caia sola a un segundo renglon. Ahora es una rejilla de columnas
   iguales: auto-flow column reparte el ancho entre las que haya —no queda amarrado
   a que sean ocho— y de paso todas miden lo mismo. El gap baja de 12 a 8px para
   devolverle 28px a las tarjetas. */
.resumen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2);
  margin:var(--space-3) 0 var(--space-6)}
.chip{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);
  background:var(--surface-card);border:1px solid var(--border-light);
  border-left-width:var(--rail-width);border-left-color:var(--riel,var(--border-light));
  border-radius:var(--radius-card);
  padding:var(--space-4) var(--space-3);min-width:0}
/* La cifra de un contador se escribe como en el StatCard del sistema: display
   en peso negro y en cyan. El tamano completo (--fs-stat) llega en la Fase 4,
   cuando el contador se convierta en tarjeta y haya sitio para el. */
/* Las tarjetas del estado en vivo se leen DE LEJOS, desde el puesto del coordinador:
   la cifra manda. 30 -> 45px y la etiqueta 10 -> 15px (+50%, lo que pidio E-HUK). */
.chip-num{font-family:var(--font-display);font-size:45px;font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);color:var(--text-accent);line-height:1}
.chip-txt{font-size:15px;color:var(--grey);line-height:var(--lh-tight)}
/* Por debajo de ~1130px de ventana las ocho ya no caben en una fila sin aplastar la
   etiqueta, asi que la rejilla vuelve a envolverse en varias filas de minimo 132px. */
@media (max-width:1130px){
  .resumen{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
}
/* Los contadores son botones de filtro: se pulsan y se combinan. */
.chip[data-estado]{cursor:pointer;user-select:none;transition:transform .08s ease,box-shadow .12s ease}
.chip[data-estado]:hover{transform:var(--lift-card);box-shadow:var(--shadow-lg)}
.chip[data-estado]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.chip.chip-activo{background:var(--navy);border-color:var(--blue)}
.chip.chip-activo .chip-num{color:#fff}
.chip.chip-activo .chip-txt{color:#9fd7e8}
#tabla-tablero thead th[data-orden]{user-select:none}
#tabla-tablero thead th[data-orden]:hover{text-decoration:underline}
.tabla{width:100%;border-collapse:collapse;background:var(--surface-card);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-md)}
/* Alto de fila. Va en UN solo sitio, asi que TODAS las tablas de la aplicacion
   miden lo mismo: era el pedido de E-HUK.
   Historia: ~44px -> 32px -> 26px. El ultimo 20% salio de bajar el relleno
   vertical a 4px y de apretar tambien el badge, que era lo que marcaba el piso
   de altura en las celdas de estado. */
.tabla th,.tabla td{text-align:left;padding:var(--space-1) var(--space-3);
  line-height:var(--lh-tight);border-bottom:1px solid var(--border-light)}
/* El encabezado de tabla toma el estilo «eyebrow» del sistema (13px, negrita,
   mayuscula) pero NO su tracking de 0.18em: en el reporte dia por dia son 13
   columnas y ese espaciado sumaba 318px de ancho, sacando la tabla de la pagina.
   El eyebrow del sistema esta pensado para un rotulo suelto, no para una tabla
   densa. Se deriva un tracking propio de producto: el aire se nota, el ancho no. */
.tabla th{background:var(--cabecera-tabla);color:var(--cabecera-tabla-texto);font-size:var(--fs-eyebrow);
  font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-tabla);
  border-bottom:1px solid var(--cyan-300)}
.tabla tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--fs-caption);
  font-weight:var(--fw-bold);line-height:var(--lh-tight);color:#fff}
/* Colores por estado (chips usan el mismo color en el borde izquierdo) */
/* LOS SEIS ESTADOS OPERATIVOS, con los colores del Design System.
   MINT es el color de la evidencia y esta reservado a "En operacion": es el unico
   estado que significa trabajo CONFIRMADO. Usarlo para un exito generico diluiria
   el argumento central del producto, y el sistema lo prohibe expresamente. */
/* El texto del badge se elige por CONTRASTE, no por costumbre: los colores de
   estado del sistema son claros y el blanco encima no se leia (En pausa daba
   2.02:1 cuando la norma pide 4.5). Con tinta oscura pasan todos.
   Medido: mint 8.96 · turno 6.41 · pausa 8.47 · inactivo 6.53 · desconectado 4.66
   Fuera de turno es el unico oscuro de la paleta, y ahi si va blanco (4.71). */
.badge.mint{background:var(--status-operating);color:var(--ink-950)}
.chip.mint{--riel:var(--status-operating)}
.badge.azul{background:var(--status-onshift);color:var(--ink-950)}   .chip.azul{--riel:var(--status-onshift)}
.badge.amarillo{background:var(--status-paused);color:var(--ink-950)} .chip.amarillo{--riel:var(--status-paused)}
.badge.naranja{background:var(--status-idle);color:var(--ink-950)}    .chip.naranja{--riel:var(--status-idle)}
.badge.rojo{background:var(--status-offline);color:var(--ink-950)}    .chip.rojo{--riel:var(--status-offline)}
.badge.gris{background:var(--status-outofshift);color:#fff} .chip.gris{--riel:var(--status-outofshift)}
/* Verde: sigue siendo el "si" generico de la app (Activo, Publicada, Se paga...).
   NO es un estado operativo, por eso no toma mint. */
.badge.verde{background:var(--verde-ok)}         .chip.verde{--riel:var(--verde-ok)}
.tabla td.detalle{font-size:var(--fs-micro);color:var(--grey);max-width:320px;word-break:break-word;font-family:Consolas,monospace}
/* PESTAÑAS DE SECCION. Un segundo nivel bajo el menu, para cuando una seccion
   tiene dos caras del mismo asunto (Turnos: programar y revisar). Se lee como el
   menu de arriba —riel cyan bajo la activa— pero mas discreto, para que no compita
   con el: la barra dice en que seccion estas, esto dice en que parte de ella. */
.pestanas{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-light);
  margin:0 0 var(--space-2)}
.pestanas a{padding:8px 16px;color:var(--grey);text-decoration:none;
  font-size:var(--fs-body-sm);font-weight:var(--fw-bold);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s ease,border-color .18s ease}
.pestanas a:hover{color:var(--text-accent)}
.pestanas a.activa{color:var(--text-accent);border-bottom-color:var(--accent-rail)}
.pestanas a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.pestana-pie{margin:0 0 var(--space-4);font-size:var(--fs-body-sm);color:var(--grey)}
.filtro-fecha{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap}
.filtro-fecha label{margin:0}
.filtro-fecha input{width:auto}
.filtro-fecha select{width:auto}
/* «Ver» y demas filtros son APOYO, no la accion principal de la pantalla. */
.filtro-fecha button{width:auto;margin-top:0;padding:7px 13px;background:var(--btn-secundario)}
.filtro-fecha button:active{background:var(--btn-secundario-activo)}
/* Sin botón «Ver» (Desempeño, 2026-09-14), el filtro aplica al elegir: el campo
   tocado se atenúa y un girito al lado dice «procesando» mientras llega la página. */
.filtro-fecha .procesando{opacity:.55}
.mini-cargando{width:14px;height:14px;flex:0 0 auto;display:inline-block;
  border:2px solid var(--blue);border-top-color:transparent;border-radius:50%;
  animation:mini-giro .7s linear infinite}
@keyframes mini-giro{to{transform:rotate(360deg)}}
/* Quien pidió menos animación no ve el giro: el campo atenuado ya avisa. */
@media (prefers-reduced-motion:reduce){
  .mini-cargando{animation:none;border-top-color:var(--blue);opacity:.5}
}
.fila-horas{display:flex;gap:var(--space-3);flex-wrap:wrap}
.fila-horas>div{flex:1;min-width:180px}
select{width:100%;padding:var(--pad-campo-y) var(--space-2);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-input);
  font-size:var(--fs-body);background:var(--surface-card);font-family:inherit;color:var(--text-heading)}
select:focus{outline:none;border-color:var(--accent)}
h3,
h3.sub{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-heading);
  line-height:var(--lh-heading);letter-spacing:var(--ls-title);color:var(--navy)}
h3.sub{margin-top:var(--space-7)}
.tabla tfoot .fila-total td{background:var(--light);border-top:2px solid var(--navy)}
.acciones{display:flex;gap:var(--space-2);align-items:center}
.mini-enlace{color:var(--blue);text-decoration:none;font-weight:700;font-size:var(--fs-body-sm)}
/* Un BOTÓN vestido de mini-enlace (Retirar, Inactivar…) debe verse como enlace,
   no como bloque azul: se le quita el traje de botón (visto por JuanJo, 2026-09-14). */
button.mini-enlace{background:none;border:none;padding:0;width:auto;cursor:pointer;
  box-shadow:none;color:var(--blue)}
/* Para acciones severas en un enlace (Bloquear), no solo en un boton: el rojo ya
   significa lo mismo en toda la app (badge.rojo, mini-boton.rojo), asi que aqui
   solo hacia falta el mismo color en la variante de enlace. */
.mini-enlace.rojo{color:var(--red)}
.mini-boton{width:auto;margin:0;padding:6px 12px;font-size:var(--fs-caption);
  border-radius:var(--radius-control);background:var(--btn-secundario)}
.mini-boton.rojo{background:var(--red)} .mini-boton.verde{background:var(--verde-ok)}
.boton-enlace{display:inline-block;margin-top:10px;padding:12px 18px;background:var(--navy);color:#fff;
  border-radius:var(--radius-control);text-decoration:none;font-weight:700;
  transition:transform var(--dur-hover) var(--ease-depth),background var(--dur-hover) var(--ease-depth)}
.boton-enlace:hover{background:var(--btn-primario);transform:var(--lift-hover)}
input[type=file]{width:100%;padding:11px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-input);
  background:var(--bg-subtle);font-size:var(--fs-body)}

/* Bandeja de novedades */
.tarjeta-novedad{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-card);
  padding:var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-hover) var(--ease-depth),transform var(--dur-hover) var(--ease-depth)}
.novedad-cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2);margin-bottom:8px}
.novedad-forma label{margin-top:7px}
.novedad-forma input{margin-bottom:2px}
.novedad-botones{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.novedad-botones button{width:auto;margin-top:0;padding:7px 13px;font-size:var(--fs-body)}
/* Spinner de "Procesando…" para botones que tardan (carga masiva) */
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:girar .7s linear infinite;vertical-align:-2px;margin-right:8px}

/* BARRA DE CARGA entre secciones. Aparece arriba del todo al pulsar un enlace del menu
   y desaparece cuando la pagina nueva se pinta (o si el usuario se devuelve, por el
   evento pageshow). No inventa un porcentaje: avanza rapido al principio y se frena
   cerca del final, que es como se comporta una espera de la que no se sabe el largo.
   Va con position:fixed y z-index por encima de la barra, que es sticky. */
.cargando-barra{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--accent-rail));
  box-shadow:0 0 8px rgba(102,202,218,.6);transition:width .25s ease,opacity .3s ease;
  opacity:0;pointer-events:none}
.cargando-barra.activa{opacity:1}
@media (prefers-reduced-motion:reduce){
  .cargando-barra{transition:opacity .2s ease}
}
@keyframes girar{to{transform:rotate(360deg)}}
button:disabled{opacity:.75;cursor:progress}
/* Modal de aviso (ej.: salir estando en turno) */
/* z-index 70: SIEMPRE por encima de la barra del menú (60). Con 50, en pantallas
   bajas el modal crecía hasta meterse debajo de la barra y el título —el nombre
   del asesor en el detalle de la Agenda— quedaba escondido detrás del menú. */
.modal-fondo{display:none;position:fixed;inset:0;background:rgba(1,12,17,.62);z-index:70;
  align-items:center;justify-content:center;padding:var(--space-5)}
.modal-fondo.abierto{display:flex}
/* El modal nunca puede pasarse del alto de la pantalla: una jornada larga con muchos
   tramos productivos genera decenas de renglones, y sin este tope el boton «Cerrar»
   quedaba fuera de la vista y no habia forma de salir. El titulo y el pie se quedan
   fijos, y lo unico que se desplaza es el contenido. */
.modal-caja{background:var(--surface-card);border-radius:var(--radius-card-lg);padding:var(--card-pad);
  width:100%;max-width:440px;box-shadow:var(--shadow-xl);
  max-height:calc(100vh - 2 * var(--space-5));display:flex;flex-direction:column}
.modal-caja h3{color:var(--navy);margin:0 0 8px;flex:0 0 auto}
/* El cuerpo desplazable del modal de detalle. -webkit-overflow-scrolling para que el
   desplazamiento sea natural en el celular. */
.modal-cuerpo{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;
  margin:0 calc(-1 * var(--space-2));padding:0 var(--space-2)}
.modal-caja > .novedad-botones,
.modal-caja > .estado-sub{flex:0 0 auto}
/* El encabezado de la tabla del detalle se queda pegado arriba mientras se desplaza:
   con veinte renglones, saber que columna es cual no deberia obligar a subir. */
.modal-cuerpo .tabla thead th{position:sticky;top:0;z-index:1}
/* Líneas (2026-09-09): la ficha de una línea se abre como MODAL sobre la tabla —
   ancho mayor que el modal estándar porque trae formularios y lista de asesores. */
.modal-caja.ancha{max-width:760px}
/* ENCABEZADOS FIJOS EN TODA TABLA LARGA (JuanJo, 2026-09-14). La regla es una sola
   (.tabla thead th, más abajo) y no se apaga tabla por tabla: lo que la rompe es
   meter la tabla en un marco con scroll propio (overflow auto/hidden), porque el
   encabezado se pega al marco y no a la página — así se «descolgaba» en Líneas.
   Para deslizar de lado en pantallas angostas se usa .tabla-ancha; para redondear
   esquinas de un contenedor, overflow:clip, que no crea marco con scroll. */
/* Cronómetro grande (urgencia) en los modales de fin/solicitud */
.cronometro{font-size:clamp(2.6rem,11vw,3.6rem);font-weight:800;text-align:center;line-height:1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--red);margin:8px 0 18px}
.boton-cancelar{width:100%;margin-top:12px;padding:12px;background:var(--surface-card);color:var(--grey);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-control);font-size:var(--fs-body);font-weight:700;cursor:pointer}
.boton-cancelar:hover{filter:none;background:var(--light);color:var(--navy)}

/* Lista de pausas dentro de cada turno (Turnos del día) */
.lista-pausas{list-style:none;padding:0;margin:6px 0 12px}
.lista-pausas li{padding:9px 0;border-bottom:1px solid #eef2f8;font-size:var(--fs-body-sm);color:#273043;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lista-pausas li:last-child{border-bottom:0}

/* En la bandeja de novedades, aprobar es la accion principal y corregir la alternativa:
   mismo color, distinto tono. El verde y el rojo se reservan para lo que AVISA (activar
   / desactivar, inactivar un segmento), no para decorar un formulario. */
.btn-aprobar{background:var(--btn-primario)}
.btn-aprobar:active{background:var(--btn-primario-activo)}
.btn-corregir{background:var(--btn-secundario)}
.btn-corregir:active{background:var(--btn-secundario-activo)}
.etiqueta-cuentas{font-weight:700;color:var(--navy);margin:4px 0 10px}
.lista-cuentas{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}
/* Rejilla de 2 columnas para las opciones de pausa (portal más corto) */
.lista-cuentas.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-4)}
.lista-cuentas.rejilla .cuenta{padding:11px 12px}
.cuenta{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);cursor:pointer}
.cuenta:hover{border-color:var(--blue)}
.cuenta input{width:auto;margin:0}
.cuenta-nombre{font-weight:700;flex:1}
.cuenta-cupo{font-size:var(--fs-caption)}
.cuenta-cupo.libre{color:var(--verde-ok-fuerte)}
.cuenta-cupo.ocupada{color:var(--grey)}
.cuenta.llena{background:#f6f7f9;border-style:dashed;cursor:not-allowed}
.cuenta.llena .cuenta-nombre{color:var(--grey)}

/* =========================================================================== */
/*  SUPERFICIE INK — toda la app (el ingreso es la excepción clara: .centro)    */
/*                                                                             */
/*  FASE 1 del Design System. Antes esto era una lista de colores escritos a    */
/*  mano; ahora cada superficie sale de un token del sistema. Las reglas siguen */
/*  colgando de `body:not(.centro)` porque ESE es el mecanismo que separa la    */
/*  app (ink) del ingreso (blanco), pero ya no deciden ningún color: solo dicen */
/*  QUÉ token le toca a cada superficie.                                        */
/*                                                                             */
/*  Jerarquía de superficies del sistema, de atrás hacia adelante:              */
/*    --ink-950              la página                                          */
/*    --surface-card-dark    tarjetas, tablas, modal   (ink-750)                */
/*    --surface-raised-dark  encabezados y cajas       (ink-850)                */
/*    --surface-inset-dark   campos de formulario      (ink-1000, lo más hondo) */
/* =========================================================================== */
body:not(.centro){background:var(--bg-page);color:var(--text-on-dark-body);color-scheme:dark;
  /* Los dos acentos de apoyo, en sus tonos CLAROS (el tema claro los redefine más profundos):
     verde de «va bien» y ámbar de «mira esto». Solo viven en filetes, íconos y viñetas. */
  --acento-verde:var(--status-operating);
  --acento-naranja:var(--status-paused);
  /* Alias de la app resueltos contra el sistema mientras dure la superficie ink */
  --grey:var(--text-on-dark-muted);
  --light:var(--surface-raised-dark);
  --borde:var(--border-dark);
  --tinta:var(--text-on-dark-body)}
/* Títulos y textos fuertes: blanco puro del sistema */
body:not(.centro) h1,
body:not(.centro) h2,
body:not(.centro) h3,
body:not(.centro) h3.sub,
body:not(.centro) label,
body:not(.centro) .estado-texto,
body:not(.centro) .etiqueta-cuentas,
body:not(.centro) .cuenta-nombre,
body:not(.centro) .modal-caja h3,
body:not(.centro) .latido-info #ultimo-latido{color:var(--text-on-dark)}
body:not(.centro) .lista-pausas li{color:var(--text-on-dark-body)}
/* Superficies. En ink el sistema pide "lit slab": la caída de sombra MÁS un
   filo superior interno, para que la tarjeta se lea como un objeto físico que
   recibe la luz de arriba. Eso es exactamente --elev-1-shadow. */
body:not(.centro) .tarjeta,
body:not(.centro) .tarjeta-novedad,
body:not(.centro) .tabla,
body:not(.centro) .chip,
body:not(.centro) .modal-caja{background:var(--grad-card-dark);border-color:var(--border-dark-strong)}
/* El dialogo vive en el nivel 4, el reservado a lo que flota sobre todo. */
body:not(.centro) .modal-caja{background:var(--grad-card-deep);box-shadow:var(--elev-4-shadow)}
/* La cabecera NO se oscurece: en ink iba en ink-850 sobre un cuerpo ink-750 (1.04:1)
   y no se distinguia del resto de la tabla. Se queda con la banda clara de --cabecera-tabla. */
body:not(.centro) .tabla th,
body:not(.centro) .tabla td{border-bottom-color:var(--border-dark)}
body:not(.centro) .tabla tfoot .fila-total td{background:var(--surface-raised-dark);border-top:2px solid var(--cyan-150)}
body:not(.centro) .lista-pausas li{border-bottom-color:var(--border-dark)}
/* Formularios: el campo es la superficie MÁS hundida de la jerarquía */
body:not(.centro) input,
body:not(.centro) select,
body:not(.centro) textarea,
body:not(.centro) input[type=file]{background:var(--surface-inset-dark);color:var(--text-on-dark);
  border-color:var(--border-dark)}
body:not(.centro) input::placeholder,
body:not(.centro) textarea::placeholder{color:var(--text-on-dark-muted)}
/* Cajas de apoyo */
body:not(.centro) .nota{background:var(--surface-raised-dark);color:var(--text-on-dark-body)}
body:not(.centro) .cuenta{border-color:var(--border-dark)}
body:not(.centro) .estado-caja.cerrado{background:var(--surface-raised-dark);border-color:var(--border-dark)}
body:not(.centro) .estado-caja.abierto{background:var(--mint-950);border-color:var(--status-operating)}
body:not(.centro) .estado-caja.pausa{background:#2a2210;border-color:var(--status-paused)}
body:not(.centro) .modal-fondo{background:var(--scrim-dialog,rgba(1,12,17,.66))}
body:not(.centro) .boton-cancelar{background:var(--surface-card-dark);color:var(--text-on-dark-body);border-color:var(--border-dark)}
body:not(.centro) .boton-cancelar:hover{background:var(--surface-raised-dark);color:var(--text-on-dark)}
/* Botón-enlace: que resalte sobre el fondo oscuro */
body:not(.centro) .boton-enlace{background:var(--btn-secundario)}
body:not(.centro) .boton-enlace:hover{background:var(--btn-primario)}
/* Botón SECUNDARIO (auditoría 2026-09-16, M6): la clase «gris» se usaba en Reportes y en
   varios «Cancelar» pero no existía, así que la vista activa no se distinguía y dos
   «Cancelar» quedaban con texto blanco sobre gris claro. Contorno, sin relleno. */
.boton-enlace.gris{background:transparent;color:var(--text-heading);border:1px solid var(--border-strong)}
body:not(.centro) .boton-enlace.gris{background:transparent;color:var(--text-on-dark);
  border:1px solid var(--border-dark-strong)}
body:not(.centro) .boton-enlace.gris:hover{background:var(--surface-raised-dark);color:var(--text-on-dark)}

/* --- Nota de conexión (panel del asesor): una sola línea pequeña y discreta --- */
.nota-conexion{width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-3);padding:0 4px;font-size:var(--fs-caption);color:var(--grey)}
.nc-datos{opacity:.9}
.nc-toggle{white-space:nowrap}
.nc-sep{color:var(--grey);opacity:.5;margin:0 2px}
.nc-per{color:var(--grey);text-decoration:none;font-weight:700}
.nc-per:hover{text-decoration:underline}
.nc-per.activo{color:var(--blue)}
/* Fondo oscuro: legible sin llamar la atención */
body:not(.centro) .nota-conexion{color:var(--text-on-dark-muted)}
body:not(.centro) .nc-per{color:var(--text-on-dark-muted)}
body:not(.centro) .nc-per.activo{color:var(--text-accent-on-dark)}

/* --- Ventas cantadas (portal del asesor): números que se lean de un vistazo.
   A diferencia de la nota de conexión (discreta a propósito), esta tarjeta es un
   resultado del día: fondo propio, texto claro y números grandes en acento. --- */
.nota-ventas{width:100%;max-width:520px;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-card);background:var(--surface-raised-dark);border:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-body);color:var(--text-on-dark)}
.nota-ventas .nv-titulo{font-weight:700}
.nota-ventas b{font-size:1.35em;color:var(--text-accent-on-dark);font-variant-numeric:tabular-nums}
.nota-ventas .nv-act{font-size:var(--fs-caption);color:var(--text-on-dark-muted);margin-left:auto}
/* Perfil administrativo: el portal solo consulta — las acciones viven en el kiosco */
.perfil-adm .forma-turno{display:none}
/* Semáforo de la meta diaria: el color habla antes que el número */
.nv-meta{padding:2px 8px;border-radius:var(--radius-control);border:1px solid transparent}
.nv-meta-verde{color:var(--status-operating);border-color:var(--status-operating)}
.nv-meta-ambar{color:var(--status-paused);border-color:var(--status-paused)}
.nv-meta-rojo{color:var(--status-offline);border-color:var(--status-offline)}
.nota-ventas .nv-meta b{color:inherit}

/* --- Barra de avance del cargue masivo de usuarios --- */
.avance{margin-top:14px}
.avance-barra{width:100%;height:14px;border-radius:999px;background:rgba(0,150,211,.18);overflow:hidden}
.avance-lleno{height:100%;width:0;border-radius:999px;background:var(--blue);transition:width .3s ease}
.avance .nota.error{color:var(--red);font-weight:700}

/* --- Buscador de la lista de usuarios --- */
.buscador{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4)}
.buscador input{max-width:420px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-control)}
.nota-buscador{font-size:var(--fs-caption);color:var(--grey);white-space:nowrap}
body:not(.centro) .nota-buscador{color:var(--text-on-dark-muted)}
body:not(.centro) .pestanas{border-bottom-color:var(--border-dark)}
body:not(.centro) .pestanas a{color:var(--text-on-dark-muted)}
body:not(.centro) .pestanas a:hover,
body:not(.centro) .pestanas a.activa{color:var(--text-accent-on-dark)}
body:not(.centro) .pestana-pie{color:var(--text-on-dark-muted)}

/* --- Encabezados fijos tipo Excel --- */
/* La barra superior queda pegada arriba al hacer scroll (toda la app). */
.barra{position:sticky;top:0;z-index:60}
/* Y los títulos de las tablas quedan pegados justo debajo de la barra
   (como "inmovilizar fila" en Excel), útiles en listas largas. */
:root{--alto-barra:68px}
/* En anchos intermedios la barra va en dos renglones (~108px). Tiene que ir DESPUÉS
   del valor general: a igual especificidad gana la última declaración, y dentro de
   la regla de la rejilla (más arriba en el archivo) perdía y el encabezado fijo
   quedaba escondido detrás de la barra. */
@media (min-width:781px) and (max-width:1320px){:root{--alto-barra:108px}}
.tabla thead th{position:sticky;top:var(--alto-barra);z-index:40}
/* overflow:hidden rompe los encabezados pegajosos; clip redondea igual y sí los permite */
.tabla{overflow:clip}

/* --- Pie de página (derechos, versión, ciudad) --- */
.pie{text-align:center;font-size:var(--fs-micro);color:var(--grey);padding:var(--space-5) var(--space-4) var(--space-4);margin-top:var(--space-2)}
.pie-sep{opacity:.5;margin:0 4px}
body:not(.centro) .pie{color:var(--text-on-dark-muted)}
/* En el login (pantalla centrada) el pie va fijo abajo, sobre el degradado */
.centro .pie{position:fixed;bottom:6px;left:0;right:0;color:#9fd7e8;opacity:.85}

/* --- Tabla compacta (lista de usuarios: 8 columnas, correos largos) --- */
/* Celdas más ajustadas y textos largos (emails) que se parten de línea para
   que la tabla no se estire más allá del ancho de las demás páginas. */
.tabla.compacta{table-layout:auto}
.tabla.compacta th,.tabla.compacta td{padding:9px 10px;font-size:var(--fs-body-sm)}
.tabla.compacta td{overflow-wrap:anywhere}
.tabla.compacta .acciones{flex-wrap:wrap}
/* Desempeño por línea: UNA tabla con las parejas agrupadas bajo su línea (JuanJo
   retiró las fichas el 2026-09-14). El filo cyan marca dónde arranca cada línea;
   sin él, con rowspan las filas de parejas se leerían como una lista corrida. */
.tabla tr.grupo-inicio td{border-top:2px solid var(--cyan-150)}

/* --- Panel de configuración (solo Super Administrador) --- */
.parametro{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-card);padding:14px 16px;margin-bottom:var(--space-3)}
.param-inter{display:flex;align-items:center;gap:var(--space-4);margin:0;font-weight:400;cursor:pointer}
.param-inter>span:not(.badge){display:block}
.param-inter input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--verde-ok);margin:0}
.param-titulo{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--navy)}
.param-ayuda{display:block;font-size:var(--fs-caption);color:var(--grey);margin-top:2px}
.param-numero{width:110px;flex:none;text-align:center;font-variant-numeric:tabular-nums}
.param-origen{display:block;font-size:var(--fs-micro);color:var(--blue);margin-top:6px;font-weight:700}
body:not(.centro) .parametro{background:var(--surface-card-dark);border-color:var(--border-dark)}
body:not(.centro) .param-titulo{color:var(--text-on-dark)}
body:not(.centro) .param-ayuda{color:var(--text-on-dark-muted)}

/* --- Casillas de la tabla de pausas (panel de configuración) --- */
.celda-inter{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;font-weight:400;cursor:pointer}
.celda-inter input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--blue);margin:0}

/* --- OBJETIVO TÁCTIL (WCAG 2.2 AA, criterio 2.5.8): 24x24 CSS px como mínimo ---
   Medían 13-15px de alto: «Editar», «Desactivar», los enlaces de Reportes, los radios
   de motivo de pausa del portal y varias casillas. Con el dedo es acertar de milagro,
   y con ratón tampoco es cómodo: la norma no distingue por dispositivo, así que esto
   va para todos los anchos y no solo en el celular.
   Se crece con RELLENO, no con letra más grande, para no rehacer las tablas.
   Los enlaces que van DENTRO de una frase quedan fuera a propósito: ahí la norma hace
   excepción y agrandarlos partiría el párrafo. */
.mini-enlace,
.nc-per{display:inline-flex;align-items:center;min-height:24px;padding:2px 6px}
.mini-boton{min-height:24px}
input[type=checkbox],
input[type=radio],
.param-inter input[type=checkbox],
.celda-inter input[type=checkbox]{width:24px;height:24px}
/* Los radios de motivo de pausa son lo que MÁS se toca desde un teléfono —los usa el
   asesor, no el coordinador— y venían en 13px, el tamaño de fábrica. */
.cuenta input[type=radio]{accent-color:var(--blue);margin:0;flex:0 0 auto}
/* Al subir el radio de 13 a 24px, en un teléfono de 320 la fila se salía por 11px.
   El nombre de la cuenta puede bajar de renglón (min-width:0 es lo que de verdad deja
   encoger a un hijo de flex) y el cupo no se estira. El radio no se toca: es el
   objetivo táctil. */
.cuenta{flex-wrap:wrap}
.cuenta-nombre{min-width:0;overflow-wrap:anywhere}
.cuenta-cupo{flex:0 0 auto}
/* «Salir» llegaba a 24 de alto pero se quedaba corto de ancho. */
.barra .salir{display:inline-flex;align-items:center;min-height:24px;padding:0 6px}

/* --- Tablas anchas en pantallas medianas ---
   El reporte de nómina tiene once columnas y mide 1094px en su MÍNIMO (dos de ellas,
   Asesor y Adherencia, no se pueden partir). En un portátil de 1024 eso empujaba la
   página entera de lado: se movía el encabezado, el menú y todo. Aquí la tabla se
   desliza dentro de su propio marco y la página se queda quieta.
   Solo por debajo de 1150px: por encima cabe sola, y ahí conviene conservar el
   encabezado fijo, que con cien asesores es lo que deja saber qué columna se mira
   (dentro de un marco con scroll, sticky deja de pegarse a la ventana). */
@media (max-width: 1150px){
  .tabla-ancha{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabla-ancha thead th{position:static}
}

/* --- Móvil: menú desplazable y tablas con scroll lateral --- */
@media (max-width: 780px){
  /* La barra pasa a dos filas: título arriba, menú abajo deslizable con el dedo */
  .barra{flex-wrap:wrap;row-gap:var(--space-2);padding:8px 12px}
  /* En el celular el nombre completo se come el ancho: baja un escalon y el eslogan
     se esconde, que es lo primero que sobra cuando no cabe todo. */
  .marca-nombre{font-size:var(--fs-body)}
  .marca-eslogan{display:none}
  /* En escritorio las tarjetas de estado van pegadas a la derecha, alineadas con la
     leyenda. En el celular la leyenda ocupa todo el ancho y quedaban colgando a la
     derecha con un hueco al lado; aquí arrancan por la izquierda, como todo lo demás. */
  .resumen-mini{justify-content:flex-start}
  /* Las marcas del acordeón no caben al lado del título: bajan a su propio renglón. */
  .acordeon-marcas{position:static;transform:none;margin-top:6px;flex-wrap:wrap}
  .acordeon:has(.acordeon-marcas) > summary{padding-right:14px}
  /* En las pantallas de fuera de sesion (login, clave olvidada) la marca no compite
     con el menu: ahi el eslogan si cabe y es lo unico que explica que es la app. */
  .centro .marca-eslogan{display:block;font-size:var(--fs-caption)}
  .barra .menu{order:3;flex:1 1 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;gap:var(--space-4);margin-right:0;padding-bottom:4px;scrollbar-width:none}
  .barra .menu::-webkit-scrollbar{display:none}
  .barra .menu a{flex:none}
  /* Las tablas anchas se deslizan de lado dentro de su propio marco (la página no se rompe) */
  .tabla{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* El encabezado fijo tipo Excel no aplica dentro del scroll lateral del celular */
  .tabla thead th{position:static}
  .contenido{padding:14px}
  .contenido.enfoque{padding:20px 14px}
}

/* Enlace discreto del pie (Cambiar mi clave) */
.pie-enlace{color:inherit;text-decoration:underline}
.pie-enlace:hover{color:var(--blue)}

/* Enlace "¿Olvidaste tu clave?" bajo el formulario de ingreso */
.olvide{text-align:center;margin:16px 0 0;font-size:var(--fs-body-sm)}
.olvide a{color:var(--blue);text-decoration:none;font-weight:700}
.olvide a:hover{text-decoration:underline}

/* --- Buscador y filtro por estado del tablero --- */
/* Buscador y filtros activos en la MISMA fila y con la misma linea de base: estaban en
   bloques separados —uno alineado a la izquierda y otro a la derecha— y se veian
   desalineados en cuanto aparecia una pastilla. En pantalla angosta se apilan. */
.barra-filtros{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin:0 0 var(--space-4)}
.barra-filtros .filtro-tablero{margin:0;flex:1 1 320px}
.barra-filtros .ag-filtro-pie{margin:0;flex:0 1 auto}
.filtro-tablero{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-4)}
.filtro-tablero input{max-width:320px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-control)}
.filtro-tablero select{width:auto;padding:var(--space-3) var(--space-4);border-radius:var(--radius-control)}

/* --- Accesibilidad: el foco del teclado siempre visible --- */
:focus-visible{outline:none;box-shadow:var(--glow-ring);border-radius:var(--radius-xs)}


/* --- Aviso del turno de MAÑANA en el portal del asesor --- */
.aviso-manana{margin:10px 0 0;padding:9px 13px;border-radius:var(--radius-md);font-size:var(--fs-body-sm);
  background:var(--light);border:1px solid #cfe3ee;color:var(--navy)}
.aviso-manana.tenue{color:var(--grey);background:transparent;border-style:dashed}
body:not(.centro) .aviso-manana{background:var(--surface-card-dark);border-color:var(--border-dark);color:var(--text-on-dark-body)}
body:not(.centro) .aviso-manana.tenue{background:transparent;color:var(--text-on-dark-muted)}

/* --- Arranque guiado del asesor (pantalla de bienvenida) --- */
.paso-inicio{display:flex;gap:var(--space-4);align-items:flex-start;padding:16px 0;border-bottom:1px dashed var(--borde)}
.paso-inicio:last-of-type{border-bottom:0}
.paso-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body)}
.paso-titulo{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-subheading);
  letter-spacing:var(--ls-title);color:var(--navy);margin-bottom:2px}
.lista-pasos{margin:8px 0 0;padding-left:20px;font-size:var(--fs-body-sm);color:var(--tinta)}
.lista-pasos li{margin:5px 0}
body:not(.centro) .paso-titulo{color:var(--text-on-dark)}
body:not(.centro) .paso-inicio{border-bottom-color:var(--border-dark)}
body:not(.centro) .lista-pasos{color:var(--text-on-dark-body)}

/* Columna "Hace" del tablero: cuánto lleva el asesor en su estado actual */
.tabla td.en-estado{font-variant-numeric:tabular-nums;color:var(--grey);white-space:nowrap}
body:not(.centro) .tabla td.en-estado{color:var(--text-on-dark-muted)}

/* ============================ AGENDA DEL DIA (vista en linea de tiempo) ============ */
/* Una franja por asesor: al fondo lo programado, encima lo que de verdad paso. */
/* La leyenda y las tarjetas de filtro comparten fila y linea de base: antes eran dos
   bloques separados, uno alineado a la izquierda y otro a la derecha, y por eso nunca
   se veian alineados entre si. En pantalla angosta se apilan y la leyenda pasa arriba. */
/* Lupa de detalle: una por asesor. Discreta hasta que se necesita —el contenido de la
   agenda son las barras, no los botones— pero con area tocable de 24px, el minimo de
   WCAG 2.2, porque va a pulsarse en pantallas de 90 filas. */
/* Se veia como un emoji suelto perdido contra el fondo: sin caja, al 55% de opacidad
   y en gris, no se leia como algo que se puede pulsar. Ahora tiene su propia pastilla
   con borde cyan —el color de lo interactivo en esta app— y opacidad completa. */
.ag-lupa{width:24px;min-width:24px;height:24px;padding:0;margin:0 8px 0 0;
  border:1px solid var(--border-light);border-radius:var(--radius-control);
  background:var(--surface-raised);color:var(--blue);cursor:pointer;
  font-size:var(--fs-caption);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,transform .08s ease}
.ag-lupa:hover{background:var(--blue);border-color:var(--blue)}
.ag-lupa:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body:not(.centro) .ag-lupa{background:var(--surface-raised-dark);
  border-color:var(--accent-rail);color:var(--accent-rail)}
body:not(.centro) .ag-lupa:hover{background:var(--accent-rail);border-color:var(--accent-rail)}
/* La hora, en cifras tabulares para que la columna quede a plomo. El color del
   renglon dice de que tipo es el momento, con los mismos tokens de la leyenda. */
.det-hora{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.det-oper .det-hora{color:var(--ag-operacion)}
.det-pausa .det-hora{color:var(--ag-pausa)}
.det-curso .det-hora{color:var(--ag-trabajado)}

.ag-cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin:14px 0 10px}
.ag-cabecera .leyenda{margin:0;flex:1 1 auto}
/* 0 1 auto y no 0 0 auto: con «no encoger», el bloque se queda en su ancho de
   contenido —las seis tarjetas en una fila, 487px— y en un celular de 360 la página
   entera se iba de lado. Dejándolo encoger, las tarjetas bajan de renglón (ya tienen
   flex-wrap) y en escritorio sigue pegado a la derecha, alineado con la leyenda. */
.ag-cabecera .resumen-mini{margin:0;flex:0 1 auto;min-width:0}
.leyenda{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin:14px 0 10px;font-size:var(--fs-caption);color:var(--grey)}
.leyenda span{display:flex;align-items:center;gap:var(--space-2)}
.mu{display:inline-block;width:16px;height:10px;border-radius:3px}
/* UN COLOR POR CONCEPTO, y el MISMO en la leyenda, en la barra y en la tarjeta de
   filtro. Antes cada sitio tenia el suyo: la pausa era #f0c419 en la agenda pero
   --status-paused (#f0a92c) en la tarjeta «En pausa», y el ausente era un rayado
   rojo propio en vez del rojo de estado. Dos amarillos distintos para la misma cosa
   es exactamente lo que se ve como desorden. Ahora todo sale de los tokens de estado.
   «Programado» toma --status-outofshift: es, literalmente, lo previsto que todavia
   no se ha trabajado, y es la misma familia que la tarjeta «Fuera de turno». */
:root{
  --ag-programado:var(--status-outofshift);
  --ag-trabajado:var(--accent);
  --ag-operacion:var(--status-operating);
  --ag-pausa:var(--status-paused);
  --ag-ausente:var(--status-offline);
  --ag-ahora:#ffffff;   /* marca de tiempo, no un estado: por eso no toma color de estado */
}
.mu-prog{background:var(--ag-programado)}
.mu-real{background:var(--ag-trabajado)}
.mu-oper{background:var(--ag-operacion)}
.mu-pausa{background:var(--ag-pausa)}
.mu-pausa-no{background:repeating-linear-gradient(45deg,var(--ag-pausa),var(--ag-pausa) 3px,
  transparent 3px,transparent 6px);border:1px solid var(--ag-pausa)}
.mu-ausente{background:repeating-linear-gradient(45deg,var(--ag-ausente),var(--ag-ausente) 3px,
  transparent 3px,transparent 6px);border:1px solid var(--ag-ausente)}
.mu-ahora{background:var(--ag-ahora);width:3px;height:14px;border-radius:0}

/* ESTADO EN VIVO EN LA AGENDA. El mismo componente de Operación —.chip, con su
   color y su riel por .mint/.azul/etc.— a la mitad de tamaño, arriba a la derecha
   de la tabla: informa sin robarle protagonismo a la línea de tiempo, que es el
   contenido real de esta pantalla. También es el filtro: clic para elegir, se
   combinan (mismo patrón que Operación), y solo aparece cuando la fecha es HOY,
   porque el estado «ahora mismo» de un día pasado no significa nada. */
.resumen-mini{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:6px;margin:0 0 var(--space-2)}
/* Un 10% mas pequenas que antes (relleno 5/9 -> 4/8, cifra 19 -> 17): con la leyenda
   encima, las seis tarjetas no cabian a lo ancho y la fila se partia, que es lo que
   se veia desalineado. La etiqueta se queda en 11px porque por debajo de eso deja de
   leerse a la distancia desde la que se mira esta pantalla. */
.chip-mini{padding:4px 8px;gap:1px;min-width:0;border-left-width:3px}
.chip-mini .chip-num{font-size:17px;letter-spacing:0}
.chip-mini .chip-txt{font-size:11px;white-space:nowrap}
/* ADHERENCIA POR ASESOR, en su propia columna. Va en cifras tabulares para que los
   porcentajes queden alineados por la unidad y la columna se lea de un vistazo.
   El color solo aparece cuando hay algo que mirar: ambar bajo 50%, rojo bajo 25%.
   «Sin extension» NO se pinta de alarma —no es bajo desempeno, es que falta el
   instrumento de medida— y por eso va en gris apagado. */
.adh-celda{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.adh-celda.adh-floja{color:var(--status-paused)}
.adh-celda.adh-mala{color:var(--status-offline)}
.th-sub{font-weight:var(--fw-regular);opacity:.75;text-transform:none;letter-spacing:0}

/* FILTROS ACTIVOS, uno por uno. Cada estado elegido es su propia pastilla, con el
   color de su tarjeta y su propia ✕. El «Quitar todos» se queda al final, pero ya
   no es la unica salida: antes borraba los tres de golpe y no habia forma de quitar
   solo uno, ni de ver cuales se habian ido sumando. */
.ag-filtro-pie{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:var(--space-2);margin:0 0 var(--space-2)}
.ag-filtros-etq{font-size:var(--fs-caption);color:var(--grey)}
.ag-filtros-lista{display:flex;flex-wrap:wrap;gap:6px}
.ag-pastilla{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;
  border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:700;
  background:var(--surface-raised);color:var(--tinta,inherit);
  border-left:3px solid var(--riel,var(--border-light))}
.ag-pastilla-x{width:18px;height:18px;min-width:18px;padding:0;margin:0;border:0;
  border-radius:50%;background:rgba(0,0,0,.14);color:inherit;font-size:var(--fs-caption);line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ag-pastilla-x:hover{background:rgba(0,0,0,.28)}
.ag-pastilla-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body:not(.centro) .ag-filtros-etq{color:var(--text-on-dark-muted)}
body:not(.centro) .ag-pastilla{background:var(--surface-raised-dark);color:var(--text-on-dark);
  border-left-color:var(--riel,var(--border-dark-strong))}
body:not(.centro) .ag-pastilla-x{background:rgba(255,255,255,.16)}
body:not(.centro) .ag-pastilla-x:hover{background:rgba(255,255,255,.30)}

/* En escritorio la agenda NO es caja con scroll propio (clip redondea sin crearla):
   así el eje de horas se pega bajo la barra de la PÁGINA al bajar entre cien
   asesores (JuanJo, 2026-09-14). Por debajo de 1100px sí desliza de lado —nombre
   ancho más pista pueden no caber— y ahí el eje vuelve a pegarse a su caja. */
.agenda{border:1px solid var(--borde);border-radius:var(--radius-card);overflow-x:clip;
  background:var(--surface-card)}
.ag-fila{display:flex;align-items:stretch;border-bottom:1px solid var(--borde);min-height:24px}
.ag-fila:last-child{border-bottom:none}
.ag-eje{background:var(--cabecera-tabla);position:sticky;top:var(--alto-barra);z-index:2;
  border-bottom:1px solid var(--cyan-300)}
@media (max-width:1100px){
  .agenda{overflow-x:auto}
  .ag-eje{top:0}
}
.ag-eje .ag-marca,.ag-eje .estado-sub{color:var(--cabecera-tabla-texto);font-weight:var(--fw-bold)}
.ag-eje .ag-guia{background:var(--cyan-300)}
/* Nombre + segmento + horario EN UNA SOLA LINEA. En columna eran dos renglones fijos y
   la fila no podia bajar del doble de alto. Al pasar a fila hace falta mas ancho (210 ->
   300px); ese ancho sale de la pista, que es flexible, asi que el total no cambia. */
.ag-nombre{flex:0 0 var(--ag-ancho-nombre,300px);padding:0 12px;display:flex;flex-direction:row;align-items:center;
  gap:var(--space-2);min-width:0;white-space:nowrap;
  border-right:1px solid var(--borde);font-size:var(--fs-body-sm)}
.ag-nombre b{overflow:hidden;text-overflow:ellipsis}   /* un nombre larguisimo se recorta, no envuelve */
.ag-nombre .estado-sub{font-size:var(--fs-micro);overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.ag-pista{position:relative;flex:1;min-width:330px}   /* 420 - 90 que gano el nombre */
.ag-marca{position:absolute;top:4px;transform:translateX(-50%);font-size:var(--fs-micro);color:var(--grey);white-space:nowrap}
.ag-guia{position:absolute;top:0;bottom:0;width:1px;background:var(--borde)}
.ag-barra{position:absolute;border-radius:4px}
/* La barra de PROGRAMADO se perdia contra el fondo: era --surface-raised (#072e3b en
   ink) sobre la tarjeta #102a33, o sea 1.04 de contraste — invisible. Ahora usa el
   mismo token que la leyenda y da 3.18, que se ve sin gritar. */
.ag-prog{top:4px;height:16px;background:var(--ag-programado)}
.ag-ausente{background:repeating-linear-gradient(45deg,var(--ag-ausente),var(--ag-ausente) 4px,
  transparent 4px,transparent 8px);border:1px solid var(--ag-ausente)}
.ag-real{top:7px;height:10px;background:var(--ag-trabajado)}
/* EN OPERACION: va DENTRO de la barra de turno y mas alto de contraste, porque es el dato
   que de verdad se mira. Mas angosta a proposito: se tiene que leer como "una parte de lo
   trabajado", no como otra barra que compite con ella. */
.ag-oper{top:9px;height:6px;background:var(--ag-operacion);border-radius:2px;z-index:1}
.ag-abierto{background:var(--grad-accent-fill)}
.ag-pausa{top:7px;height:10px;background:var(--ag-pausa)}
.ag-pausa-no{background:repeating-linear-gradient(45deg,var(--ag-pausa),var(--ag-pausa) 3px,
  transparent 3px,transparent 6px);outline:1px solid var(--ag-pausa);outline-offset:-1px}
.ag-ahora{position:absolute;top:0;bottom:0;width:2px;background:var(--ag-ahora);z-index:3}
.ag-etq{position:absolute;left:8px;top:4px;font-size:var(--fs-micro);color:var(--grey);background:var(--surface-card);
  padding:1px 7px;border-radius:var(--radius-pill);border:1px solid var(--borde)}
.ag-etq-rojo{color:var(--status-offline);border-color:var(--status-offline)}

@media (max-width:720px){
  /* En el celular manda el ancho de fábrica de móvil, no el que se dejó en el
     escritorio: 400px de nombre en una pantalla de 360 no dejaría ver la barra. */
  .ag-nombre{flex:0 0 140px;font-size:var(--fs-caption)}
  .ag-tirador{display:none}
  .ag-pista{min-width:520px}
}

/* --- AGENDA sobre superficie ink (derivada de los tokens del sistema) --- */
body:not(.centro){--surface-raised:var(--surface-raised-dark)}
body:not(.centro) .agenda{background:var(--surface-card-dark);border-color:var(--border-dark);
  box-shadow:var(--elev-1-shadow)}
/* El eje no lleva regla propia del tema oscuro: es la cabecera de la agenda y va
   con el mismo color que la cabecera de las tablas (--cabecera-tabla). Esta linea la repintaba de ink-850
   y por eso el encabezado de la agenda no se veia. */
body:not(.centro) .ag-etq{background:var(--surface-raised-dark);color:var(--text-on-dark-muted)}

/* La cifra sobre ink usa el cyan claro del sistema, no el blanco de los titulos. */
body:not(.centro) .chip-num{color:var(--text-accent-on-dark)}

/* ===================== FASE 4 — Profundidad e interaccion ===================== */
/* Regla del sistema: una superficie sube UN nivel al interactuar, nunca dos.
   El hover significa profundidad y luz; jamas un relleno mas oscuro. */
.tarjeta-novedad:hover{box-shadow:var(--shadow-lg);transform:var(--lift-card)}

/* Fila de tabla: realce discreto para seguir el renglon con la vista. */
.tabla tbody tr{transition:background var(--dur-hover) var(--ease-depth)}
.tabla tbody tr:hover td{background:var(--slate-025)}
body:not(.centro) .tabla tbody tr:hover td{background:var(--surface-raised-dark)}

/* La cifra sobre ink: cyan claro, y con un respiro para que no toque la etiqueta. */
body:not(.centro) .chip-txt{color:var(--text-on-dark-muted)}

/* Aire entre secciones, con la escala del sistema. */
h3.sub{margin-top:var(--space-8)}
.filtro-tablero,.buscador,.filtro-fecha{margin-bottom:var(--space-5)}

/* La fracción bajo el porcentaje de adherencia («7h de 16h») es apoyo, no dato
   principal: va en el tamaño micro para no ensanchar una tabla ya apretada. */
.tabla td .estado-sub{font-size:var(--fs-micro);line-height:var(--lh-tight);
  display:inline;margin-left:6px}
/* Las filas miden todas lo mismo porque el dato de apoyo va EN LINEA con su
   badge, no debajo. Solo se impide el salto en las celdas que llevan badge;
   el resto envuelve con normalidad —la columna de detalle de Auditoria lleva
   JSON y tiene que poder partirse—.
   (La version anterior ponia nowrap a TODAS las celdas y liberaba la tercera,
   asumiendo que ahi iba el nombre: en Operacion es el segmento, en Usuarios el
   correo y en Auditoria el autor. Era una regla a ciegas.) */
.tabla td:has(.badge){white-space:nowrap}
.tabla td.detalle{white-space:normal}

/* ============ MENOS SOMBRA (decision de E-HUK) ============
   El sistema apila caida + filo superior interno + hairline para que la tarjeta
   se lea como una losa iluminada. A E-HUK le sobra ese efecto: se deja lo justo
   para separar la superficie del fondo, sin relieve. Un solo bloque, como todo. */
.tarjeta{box-shadow:var(--shadow-sm)}
.tarjeta-novedad{box-shadow:none}
.tabla{box-shadow:none}
/* Sin sombra, el limite de la superficie lo tiene que llevar el BORDE: con el
   16% del sistema, una tarjeta sobre ink daba 1.14:1 y no se distinguia del
   fondo (una separacion de interfaz necesita 3:1). Se sube al 30%, que el
   sistema ya define como --border-dark-strong.
   El levantamiento al pasar el mouse vuelve: lo que sobraba era la sombra. */
.tarjeta-novedad:hover{box-shadow:var(--shadow-sm);transform:var(--lift-card)}
.chip[data-estado]:hover{box-shadow:var(--shadow-sm);transform:var(--lift-card)}
body:not(.centro) .tarjeta,
body:not(.centro) .tarjeta-novedad,
body:not(.centro) .tabla,
body:not(.centro) .chip{box-shadow:none;border-color:var(--border-dark-strong)}
body:not(.centro) .tarjeta-novedad:hover,
body:not(.centro) .chip[data-estado]:hover{box-shadow:none;border-color:var(--accent-rail)}
/* El riel del estado, repuesto. Las reglas de arriba usan el atajo border-color,
   que pinta los CUATRO bordes y se llevaba por delante el color del estado: los
   ocho contadores salian del mismo cian y se perdia la lectura por color, que es
   justo para lo que sirve el riel —ver el estado de lejos, sin leer la etiqueta—.
   Va aqui, al final, porque en la cascada solo gana lo que viene despues. El :hover
   se repite aparte: esa regla pesa mas y si no, al pasar el raton el riel se perdia. */
body:not(.centro) .chip{border-left-color:var(--riel,var(--border-dark-strong))}
body:not(.centro) .chip[data-estado]:hover{border-left-color:var(--riel,var(--accent-rail))}
body:not(.centro) .modal-caja{box-shadow:0 18px 44px rgba(1,12,17,.55)}
/* El boton tampoco brilla: solo se levanta un poco. */
button:hover{box-shadow:none}
button:active{box-shadow:none}

/* ============ EL MENU NO SE ENCOGE ============
   Se fija en pixeles a proposito: la escala de contenido bajo un 25% y el menu
   es navegacion, no contenido. */
.barra .menu a{font-size:14px}
.barra .salir{font-size:14px}

/* Cuenta regresiva de una novedad: en rojo cuando quedan menos de 4 h. */
.estado-sub.urgente{color:var(--status-offline);font-weight:var(--fw-bold)}

/* Controles DENTRO de una tabla. Sin esto, un <select> de 42px hacia filas de 50px en
   Segmentos, Usuarios, Equipos y Configuracion: el resto de la aplicacion iba en 30px.
   Se aprietan hasta 24px de alto, que es el minimo tocable que exige WCAG 2.2 (AA,
   objetivo 24x24). Por debajo de eso no se baja: seria imposible acertarles en celular. */
.tabla select,.tabla input,.tabla .mini-boton,.tabla button{
  padding:var(--space-1) var(--space-2);min-height:24px;font-size:var(--fs-caption);
  margin:0;line-height:var(--lh-tight)}
.tabla .acciones{gap:var(--space-1)}

/* Celda de acciones. OJO: `.acciones` es display:flex, y un <td> con display:flex deja
   de comportarse como celda —el navegador lo saca del calculo de la fila y la columna
   entera se ve corrida—. Por eso el flex SIEMPRE va en un elemento dentro de la celda
   (un <div> o el propio <form>), nunca en el <td>. Asi lo hace Segmentos, que es la
   tabla que quedo bien alineada; Usuarios lo tenia al reves y se le notaba.
   El relleno de la celda se ajusta para que el boton de 24px (minimo tocable de
   WCAG 2.2) no empuje la fila por encima del resto. */
.tabla td>.acciones{margin:-2px 0}

/* Columna de fecha. `width:1%` con `nowrap` es la forma de decirle a la tabla
   "dale a esta columna exactamente lo que necesita y reparte el resto": la fecha deja
   de partirse en dos renglones y las demas columnas ceden ese ancho, sin que el total
   cambie. */
.tabla th.col-fecha,.tabla td.col-fecha{width:1%;white-space:nowrap}

/* «sin extensión» en la agenda: en gris, nunca en rojo. No es una falta del asesor —
   es que falta el instrumento de medida— y el color no puede sugerir lo contrario. */
.ag-sin-ext{color:var(--grey);font-weight:var(--fw-bold)}
/* Ventas cantadas del día en la fila del asesor (junto a la productividad) */
.ag-vnts{color:var(--text-accent-on-dark);font-weight:var(--fw-bold);white-space:nowrap}

/* Barra de proporcion en los reportes. Leer seis porcentajes en fila y compararlos de
   memoria es justo lo que una barra evita: cual manda se ve sin pensar. */
.tabla td.col-barra{width:34%;min-width:120px}
.barra-peso{display:block;height:12px;border-radius:2px;background:var(--btn-primario);min-width:2px}
/* La barra de «nadie las reviso» NO es un motivo: es un aviso, y va en el color que avisa. */
.barra-peso.barra-aviso{background:var(--status-paused)}

/* --- Acordeón del panel de configuración ---
   El panel llegó a diez bloques y llegar al final costaba trabajo. Se usa <details>
   nativo: funciona sin JavaScript, responde al teclado y Ctrl+F sigue encontrando lo
   que hay dentro. La flecha se dibuja aquí porque el triángulo por defecto del
   navegador es distinto en cada uno y no se puede pintar. */
/* overflow:CLIP y no hidden: redondea las esquinas igual, pero hidden convierte
   al acordeón en caja con scroll propio y las tablas de dentro (la malla de Turnos,
   la previsualización) perdían el encabezado fijo (revisión del 2026-09-14). */
.acordeon{border:1px solid var(--border-light);border-radius:var(--radius-card);
  margin-bottom:var(--space-3);background:var(--surface-card);overflow:clip}
/* Las pantallas de dentro de la sesión van sobre fondo oscuro y el color de tarjeta
   del sistema es BLANCO: sin esta línea el panel quedaba con texto claro sobre blanco,
   1.32:1, ilegible. Va junto a la regla de arriba y no al final del archivo para que
   se lean las dos de un vistazo. */
body:not(.centro) .acordeon{background:var(--surface-card-dark);
  border-color:var(--border-dark)}
body:not(.centro) .acordeon > summary:hover{background:var(--surface-raised-dark)}
.acordeon > summary{list-style:none;cursor:pointer;padding:12px 14px 12px 34px;position:relative;
  display:block;transition:background .15s ease}
.acordeon > summary::-webkit-details-marker{display:none}
.acordeon > summary:hover{background:var(--bg-subtle)}
.acordeon > summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.acordeon > summary::before{content:"";position:absolute;left:14px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-60%) rotate(-45deg);transition:transform .18s ease}
.acordeon[open] > summary::before{transform:translateY(-25%) rotate(45deg)}
.acordeon-titulo{display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-body);line-height:1.3}
.acordeon-desc{display:block;font-size:var(--fs-caption);opacity:.78;margin-top:2px;
  line-height:1.35;max-width:78ch}
/* Barra de búsqueda de Turnos · Revisar. No reusa .barra-filtros de Operación:
   allá el buscador crece para dejar sitio a las pastillas de estado, y aquí eso
   empujaba los botones a un segundo renglón y los repartía a lo ancho. */
.barra-buscar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin:var(--space-3) 0}
.barra-buscar .buscador{flex:0 1 340px;min-width:180px;margin:0}
/* El contador («Mostrando X de Y») a la MISMA altura del campo y alineado con él:
   el campo heredaba un margen inferior que lo subía respecto al contador (visto
   por JuanJo en Líneas, 2026-09-14). Relleno vertical igual al del campo. */
.barra-buscar .nota{margin:0;padding:var(--space-3) var(--space-4);align-self:stretch;
  display:flex;align-items:center}
.barra-buscar .nota:empty{display:none}   /* sin texto no hay cuadrito huérfano */

/* Marcas a la derecha del título (turno abierto, estado de revisión). Se posicionan
   sobre el summary y se le reserva el hueco con padding, para que una descripción
   larga no se meta por debajo de las etiquetas. El :has() ya se usa en esta hoja. */
.acordeon-marcas{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;gap:6px;align-items:center;white-space:nowrap}
.acordeon:has(.acordeon-marcas) > summary{padding-right:210px}
.acordeon-cuerpo{padding:4px 14px 16px;border-top:1px solid var(--border-light)}
body:not(.centro) .acordeon-cuerpo{border-top-color:var(--border-dark)}
.acordeon-cuerpo > .parametro:first-child{margin-top:10px}

/* El renglón de hueco del detalle: es lo que explica por qué el porcentaje bajó,
   así que se lee distinto del resto sin gritar. */
.det-hueco .det-hora{color:var(--status-idle,var(--ag-ausente))}
.det-hueco .det-que{opacity:.92}

/* --- ALARMAS DE INACTIVIDAD en el tablero ---
   Un riel de color a la izquierda y un fondo muy tenue. Se tiñe la FILA entera y no
   una celda porque con cien renglones un color suelto se pierde. El tinte se queda
   bajo para que el texto siga leyéndose: lo que llama la atención es el riel, que se
   ve de lejos y sin leer nada.
   El color NO es lo único que avisa (WCAG 1.4.1): hay un punto junto al nombre, el
   reloj se pone en negrita y arriba sale un renglón diciendo cuántos son. */
.fila-alarma > td{background:color-mix(in srgb, var(--status-paused) 9%, transparent)}
.fila-alarma > td:first-child{box-shadow:inset var(--rail-width) 0 0 0 var(--status-paused)}
.fila-alarma-roja > td{background:color-mix(in srgb, var(--status-offline) 11%, transparent)}
.fila-alarma-roja > td:first-child{box-shadow:inset var(--rail-width) 0 0 0 var(--status-offline)}
.alarma-punto{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;vertical-align:1px;background:var(--status-paused)}
.fila-alarma-roja .alarma-punto{background:var(--status-offline)}
/* La especificidad tiene que igualar a «body:not(.centro) .tabla td.en-estado», que
   pinta el reloj en gris apagado. Con una sola clase perdía y el número se quedaba
   gris: justo el dato que la alarma quiere que se vea. */
body:not(.centro) .tabla td.en-estado-alarma,
.tabla td.en-estado-alarma{font-weight:var(--fw-bold);color:var(--status-paused)}
/* .tabla es ANTEPASADO de la fila, no descendiente: escrito al revés no coincidía
   nunca y el reloj de las rojas se quedaba ámbar. */
body:not(.centro) .tabla .fila-alarma-roja > td.en-estado-alarma,
.tabla .fila-alarma-roja > td.en-estado-alarma{color:var(--status-offline)}

/* --- Aviso de inactividad en el portal del asesor (alarmas, capa 0) ---
   No pide permisos ni instala nada: es la propia página avisando. El icono «!» va
   aparte del color porque el color no puede ser lo único que informa (WCAG 1.4.1), y
   porque en un monitor viejo de call center los tonos se lavan. */
.aviso-inactividad{display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);
  margin-bottom:var(--space-4);line-height:var(--lh-body);
  background:color-mix(in srgb, var(--status-paused) 14%, transparent);
  border:1px solid var(--status-paused);
  border-left-width:var(--rail-width)}
.aviso-inactividad.critico{background:color-mix(in srgb, var(--status-offline) 14%, transparent);
  border-color:var(--status-offline)}
.ai-icono{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;font-weight:var(--fw-black);font-size:var(--fs-body-sm);
  background:var(--status-paused);color:var(--ink-950)}
.aviso-inactividad.critico .ai-icono{background:var(--status-offline)}
.ai-texto{flex:1 1 auto;min-width:0}

/* --- Tirador para ensanchar la columna de nombres de la Agenda ---
   Va pegado al borde derecho del encabezado. En reposo casi no se ve: no es una
   herramienta que se use todo el día, y una manija marcada compite con los datos.
   Se ensancha su zona de agarre (10px) sin ensanchar lo que se dibuja (2px), que es
   lo que hace la diferencia entre acertarle y no. */
.ag-tirador{position:absolute;top:0;right:-5px;width:10px;height:100%;
  cursor:col-resize;z-index:3;touch-action:none}
.ag-tirador::before{content:"";position:absolute;top:20%;bottom:20%;left:4px;width:2px;
  border-radius:2px;background:var(--borde);transition:background var(--dur-hover) ease}
.ag-tirador:hover::before,
.ag-tirador:focus-visible::before{background:var(--blue);top:0;bottom:0}
.ag-tirador:focus-visible{outline:2px solid var(--blue);outline-offset:-1px}
.ag-eje .ag-nombre{position:relative}

/* --- Filtros rápidos de la Agenda (segmento múltiple + jornada) ---
   Ninguno viaja al servidor: filtran la tabla ya pintada. Se pueden combinar entre
   ellos y con las tarjetas de estado. */
/* Un solo renglón para todo: día, segmentos y jornada. Estaban en dos bloques
   distintos —uno era un formulario y el otro no— y por eso nunca se veían alineados
   entre sí. La jornada se va a la derecha con margin-left:auto. */
.ag-barra-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin:var(--space-3) 0}
.ag-barra-filtros label{margin:0}
.ag-dia{display:flex;align-items:center;gap:var(--space-2);margin:0}
.ag-jornada{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
/* En el celular no hay ancho para empujar nada a la derecha: baja de renglón y
   arranca por la izquierda, como todo lo demás. */
@media (max-width: 780px){
  .ag-jornada{margin-left:0;flex:1 1 100%}
}
.ag-segmentos{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ag-chip-seg{width:auto;margin:0;padding:3px 10px;min-height:24px;
  font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1.4;
  border:1px solid var(--border-strong);border-radius:999px;
  background:transparent;color:inherit;cursor:pointer}
.ag-chip-seg:hover{border-color:var(--blue)}
/* Texto OSCURO sobre el azul, no blanco: blanco sobre #0096D3 da 3.33 y esto es
   letra de 10px, que necesita 4.5. Con ink-950 sube a 5.12, y además es el mismo
   patrón que ya usan las etiquetas de estado de toda la app. */
.ag-chip-seg.activo{background:var(--blue);border-color:var(--blue);color:var(--ink-950)}
body:not(.centro) .ag-chip-seg{border-color:var(--border-dark-strong)}
body:not(.centro) .ag-chip-seg.activo{border-color:var(--blue)}

/* --- La tabla de nómina, apretada para caber en la ventana ---
   Trece columnas no caben con la letra y el relleno de las tablas normales: la página
   entera se iba de lado o tocaba deslizarla. Letra de tabla compacta, relleno corto y
   el nombre del asesor con recorte «…» en vez de empujar a todos los demás. Los
   encabezados cortos llevan el nombre completo en el tooltip. */
.tabla-nomina th,
.tabla-nomina td{padding:6px 7px;font-size:var(--fs-caption);white-space:nowrap}
/* El nombre es la única columna elástica: se recorta con «…» en vez de empujar a las
   demás. Va por CLASE y no por posición, porque en la vista por día el nombre es la
   tercera columna y en el acumulado la primera. */
.tabla-nomina td.cn-asesor{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.tabla-nomina .estado-sub{font-size:var(--fs-micro)}


/* --- Segmentos adicionales en el formulario de usuario (asesor de dos segmentos) --- */
.membresias-lista{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  padding:8px 0 2px}
.membresias-lista .celda-inter input[disabled]{opacity:.45;cursor:not-allowed}

/* --- Productividad acumulada y Ventas × hora, en la fila del TÍTULO ---
   El número va al tamaño del título de la página (pedido así): es EL dato de la
   pantalla. La etiqueta arriba, pequeña y en mayúsculas como los encabezados.
   Viven junto al h2 (2026-09-14): dentro de la barra de filtros, al faltar ancho,
   «Ventas × hora» bajaba de renglón y el encabezado crecía. */
/* FICHAS DE CIFRAS (JuanJo, 20-oct-2026: «todos los datos en una misma fila, aparte el título
   de cada sección, todo con un borde para cada tarjeta»). El título va en su propio renglón y
   las fichas debajo, TODAS en una fila y del mismo tamaño (la rejilla las reparte por igual y
   las estira a la misma altura). Mismo aspecto que las tarjetas del Dashboard: fondo, borde y
   el filete de color arriba rotando azul · verde · naranja. */
.ag-encabezado{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-2);align-items:stretch;margin:0 0 var(--space-3)}
.ag-encabezado > h2,.ag-encabezado > .titulo-bloque{grid-column:1 / -1;margin:0 0 var(--space-1)}
.ag-productividad{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.1;
  text-align:left;background:var(--surface-card);border:1px solid var(--border-light);
  border-radius:var(--radius-card);padding:8px 12px}
body:not(.centro) .ag-productividad{background:var(--surface-card-dark);border-color:var(--border-dark);
  border-top:3px solid var(--cyan-500)}
body:not(.centro) .ag-encabezado > .ag-productividad:nth-of-type(3n+2){border-top-color:var(--acento-verde)}
body:not(.centro) .ag-encabezado > .ag-productividad:nth-of-type(3n+3){border-top-color:var(--acento-naranja)}
.ag-productividad .pildora{padding:0 6px;font-size:inherit;line-height:1.4}
/* Dentro de la tarjeta, la línea de abajo puede bajar de renglón: no se sale del borde. */
.ag-productividad .ag-prod-ayer{white-space:normal}
.ag-prod-etq{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;
  opacity:.75}
/* «Ayer a esta hora» bajo Ventas cantadas (2026-10-01): pequeña y tenue; solo la
   flecha toma color, para que no compita con el número de hoy. */
.ag-prod-ayer{font-size:var(--fs-micro);opacity:.8;white-space:pre;margin-top:2px;
  font-variant-numeric:tabular-nums}
.ag-prod-ayer .dif.arriba{color:var(--status-operating);font-weight:700}
.ag-prod-ayer .dif.abajo{color:var(--status-paused);font-weight:700}
.ag-prod-num{font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:var(--fs-title);color:var(--blue);font-variant-numeric:tabular-nums}
/* Las cifras que ENCABEZAN un bloque (Licencias, Alarmas, Calidad, la ficha de Acompañamiento,
   la suscripción) usan las mismas fichas. Las que van dentro del renglón de otra tarjeta (cada
   licencia, cada trainer, las franjas de velocidad) siguen en línea: caja dentro de caja no. */
.fb-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--space-2);margin:var(--space-2) 0}
.fb-numeros > .fb-numero{min-width:0;background:var(--surface-card);border:1px solid var(--border-light);
  border-radius:var(--radius-card);padding:8px 12px}
body:not(.centro) .fb-numeros > .fb-numero{background:var(--surface-card-dark);border-color:var(--border-dark);
  border-top:3px solid var(--cyan-500)}
body:not(.centro) .fb-numeros > .fb-numero:nth-child(3n+2){border-top-color:var(--acento-verde)}
body:not(.centro) .fb-numeros > .fb-numero:nth-child(3n+3){border-top-color:var(--acento-naranja)}
/* En pantalla de computador, SIEMPRE en una sola fila (las que sean): cada ficha toma su parte. */
@media (min-width: 781px){
  .fb-numeros{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}

/* ============ EL PANEL (dashboard) ============
   Los mismos colores que la Agenda (--ag-*): el panel debe decir lo mismo que las
   demás pantallas, también en el color. Las barras son CSS puro: sin librerías, carga
   instantánea, y el tema oscuro/claro las pinta solo. */
.pn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:var(--space-2);margin:var(--space-4) 0}
.pn-kpi{background:var(--surface-card);border:1px solid var(--border-light);
  border-radius:var(--radius-card);padding:8px 10px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
body:not(.centro) .pn-kpi{background:var(--surface-card-dark);border-color:var(--border-dark)}
.pn-kpi-num{font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
  /* 20px fijo y no --fs-stat (56px): son NUEVE tarjetas en UNA fila, no una estrella. */
.pn-kpi-de{font-size:var(--fs-body);opacity:.6;font-weight:var(--fw-bold)}
.pn-kpi-etq{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;opacity:.75}
.pn-kpi-azul .pn-kpi-num{color:var(--blue)}
.pn-kpi-rojo .pn-kpi-num{color:var(--status-offline)}
.pn-kpi-ambar .pn-kpi-num{color:var(--status-paused)}

/* La gráfica por hora: columnas con las tres barras UNA DENTRO DE OTRA (como la barra
   de la Agenda): gris el plan, azul la presencia, verde lo probado. */
.pn-grafica{display:flex;align-items:flex-end;gap:4px;height:180px;
  margin-top:12px;padding-bottom:2px}
.pn-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;height:100%}
.pn-barras{position:relative;flex:1 1 auto}
.pn-b{position:absolute;bottom:0;border-radius:3px 3px 0 0}
.pn-b-prog{left:0;right:0;background:var(--ag-programado)}
.pn-b-conect{left:18%;right:18%;background:var(--ag-trabajado)}
.pn-b-prod{left:34%;right:34%;background:var(--ag-operacion)}
/* Ventas cantadas en el Panel: barras de una sola capa y lista horizontal por asesor */
.pn-b-venta{left:12%;right:12%;background:var(--ag-trabajado)}
/* Tendencia de 7 días con DOS barras lado a lado (productividad y adherencia) */
.pn-t-dobles{position:static;display:flex;align-items:flex-end;gap:3px}
.pn-b2{flex:1 1 0;border-radius:var(--radius-control);min-height:1px}
.pn-b2-prod{background:var(--ag-operacion)}
.pn-b2-adh{background:var(--ag-trabajado)}
/* Ausentismo de 7 días: barras rojas (una capa) */
.pn-b-aus{left:25%;right:25%;background:var(--status-offline)}
.pn-v-flex{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:6px}
.pn-v-flex>div{flex:1 1 260px;min-width:240px}
.pn-v-graf{height:120px}
.pn-v-lista{display:flex;flex-direction:column;gap:4px;max-width:560px}
.pn-v-fila{display:flex;align-items:center;gap:var(--space-3)}
.pn-v-nombre{flex:0 0 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-v-barra{flex:1 1 auto;background:var(--surface-inset-dark);border-radius:var(--radius-control);height:10px;overflow:hidden}
.pn-v-barra>div{height:100%;background:var(--ag-trabajado);border-radius:var(--radius-control)}
.pn-v-n{flex:0 0 34px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.pn-v-ef{flex:0 0 52px;text-align:right;font-size:var(--fs-caption);opacity:.75;
  font-variant-numeric:tabular-nums}
.pn-col-hora{font-size:var(--fs-micro);text-align:center;opacity:.7;padding-top:4px}
/* Etiquetas de valor sobre las gráficas: horas-persona por franja y adherencia por día */
.pn-col-val{font-size:var(--fs-micro);text-align:center;opacity:.85;min-height:13px;
  font-variant-numeric:tabular-nums}
.pn-t-adh{font-size:var(--fs-micro);text-align:center;opacity:.7;font-variant-numeric:tabular-nums}
.pn-val-prod{color:var(--ag-operacion)}
.pn-val-conect{color:var(--ag-trabajado)}
/* Desplegable de segmentos con selección múltiple (filtro del Panel) */
.pn-multi{position:relative;display:inline-block}
.pn-multi>summary{cursor:pointer;list-style:none;padding:5px 10px;border-radius:var(--radius-control);
  background:var(--surface-inset-dark);border:1px solid var(--border-dark);user-select:none}
.pn-multi[open]>summary{border-color:var(--text-accent-on-dark)}
.pn-multi-lista{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:180px;
  display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--radius-card);
  background:var(--surface-raised-dark);border:1px solid var(--border-dark);
  box-shadow:var(--shadow-lg)}
.pn-multi-lista label{display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}
/* «Para mirar hoy»: el top 10 en dos columnas y filas delgadas */
.pn-at-lista{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:2px 28px;
  max-width:720px}
.pn-at-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:1px 0;min-width:0}
.pn-at-fila .badge{padding:1px 8px}
.pn-at-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.pn-at-lista{grid-template-columns:1fr}}

/* La tendencia: 7 columnas 0–100 con su número encima. */
.pn-tendencia{display:flex;align-items:flex-end;gap:var(--space-3);height:150px;
  margin-top:12px;max-width:560px}
.pn-t-dia{flex:1 1 0;display:flex;flex-direction:column;height:100%}
.pn-t-barras{position:relative;flex:1 1 auto}
.pn-t-num{font-size:var(--fs-micro);text-align:center;font-weight:var(--fw-bold);padding-top:3px}
@media (max-width: 780px){
  .pn-grafica{height:130px}
  .pn-col-hora{font-size:8px}
}

/* ============ MENÚ LATERAL DE WCL (aprobado por JuanJo, 2026-09-15) ============
   Arriba las secciones de la operación; administración en su grupo aparte.
   Cerrado: una franja de íconos. Se abre ENCIMA del contenido al pasar el mouse o al
   llegar con Tab —no empuja las tablas—; «Fijar menú abierto» sí reserva su ancho. En el
   celular se abre con el botón de la barra. Va al FINAL de la hoja para ganarle a las
   reglas del menú horizontal, que siguen vivas en el portal del asesor y en las pantallas
   de «← Volver», que no llevan este menú. */
:root{--lateral-cerrado:60px;--lateral-abierto:236px}
.menu-iconos{position:absolute;width:0;height:0;overflow:hidden}
.menu-abrir{display:none}
body:has(.menu-lateral){padding-left:var(--lateral-cerrado)}
body:has(.menu-lateral.fijo){padding-left:var(--lateral-abierto)}
/* La barra de arriba es delgada y lleva la MARCA (JuanJo, 2026-09-15): logo y nombre de la
   app a la izquierda; quién está dentro, su rol y «Salir» a la derecha. El menú lateral
   solo lleva las secciones. */
body:has(.menu-lateral) .barra{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:var(--space-3);min-height:48px;padding-block:6px;
  z-index:70;   /* por encima del menú: el encabezado tapa su franja de arriba */
  /* El encabezado se estira hasta el borde izquierdo, por debajo del ancho del menú: si no,
     quedaba un cuadro claro en la esquina y el menú se veía despegado (JuanJo, 2026-09-18). */
  margin-left:calc(-1 * var(--lateral-cerrado));
  padding-left:calc(var(--lateral-cerrado) + var(--space-4))}
body:has(.menu-lateral.fijo) .barra{margin-left:calc(-1 * var(--lateral-abierto));
  padding-left:calc(var(--lateral-abierto) + var(--space-4))}
body:has(.menu-lateral) .barra .logo-img{height:30px}
body:has(.menu-lateral) .barra .marca-eslogan{display:none}
body:has(.menu-lateral) .barra .marca-app{flex:1 1 auto;flex-direction:row;align-items:center;
  gap:var(--space-2);overflow:visible}
body:has(.menu-lateral) .barra .marca-nombre{margin-right:auto}
body:has(.menu-lateral) .barra .marca-usuario{margin-top:0;font-size:var(--fs-body-sm)}
/* «Salir» a la altura del nombre y el rol (JuanJo, 2026-09-16): la regla de la barra en
   rejilla (781-1320 px, o con zoom) lo pegaba arriba con align-self:start. */
body:has(.menu-lateral) .barra .salir{align-self:center}

/* El menú va de ARRIBA a abajo y el encabezado se dibuja encima (z-index mayor): así la
   esquina es continua sin depender de «--alto-barra», que se mide con JavaScript y, cuando la
   barra cambia de alto, dejaba un hueco claro entre las dos (JuanJo, 2026-09-18, tercera vuelta). */
.barra .menu.menu-lateral{position:fixed;top:0;bottom:0;left:0;z-index:65;width:var(--lateral-cerrado);
  display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;
  gap:2px;margin:0;padding:calc(var(--alto-barra) + 10px) 0 12px;background:var(--ink-950);
  /* «align-self:end» de la barra horizontal le llegaba también a este menú: Chrome lo encogía a
     la altura de sus iconos y lo pegaba ABAJO, y arriba quedaba el hueco claro (JuanJo,
     2026-09-18, cuarta vuelta: esta era la causa real). Se estira de punta a punta. */
  place-self:stretch;height:auto;
  /* SIN borde derecho de punta a punta (JuanJo, 2026-09-18): esa línea cruzaba el encabezado y
     la barra lateral se veía despegada. El filo ahora empieza DEBAJO del encabezado, así que
     arriba el menú y la barra son una sola pieza oscura. */
  overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  transition:width .18s ease}
/* El menú cuelga del encabezado: arranca justo debajo y sin filo entre los dos, así la esquina
   de arriba a la izquierda es UNA sola pieza (JuanJo, 2026-09-18, segunda vuelta). */
.barra .menu.menu-lateral::-webkit-scrollbar{display:none}
@media (hover:hover){
  /* Espera 0,15 s antes de abrir (diagnóstico de diseño, punto 16): cruzar el borde con el
     mouse ya no lo abre encima de la tabla. Cerrar sigue siendo inmediato. */
  .barra .menu.menu-lateral:hover{width:var(--lateral-abierto);border-right-color:var(--border-dark-strong);
    transition:width .18s ease .15s}
  .menu-lateral:hover .menu-texto{opacity:1;transition-delay:.15s}
}
.barra .menu.menu-lateral:focus-within,
.barra .menu.menu-lateral.fijo{width:var(--lateral-abierto);border-right-color:var(--border-dark-strong)}
.menu-lateral .menu-texto{opacity:0;transition:opacity .12s ease}
.menu-lateral:focus-within .menu-texto,
.menu-lateral.fijo .menu-texto{opacity:1}

.barra .menu.menu-lateral .menu-grupo{flex:0 0 auto;margin:10px 0 2px;padding:0 22px;height:14px;
  line-height:14px;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:#66CADA;white-space:nowrap}

.barra .menu.menu-lateral a,
.barra .menu.menu-lateral .menu-fijar{display:flex;align-items:center;gap:11px;flex:0 0 auto;height:32px;font-size:var(--fs-body-sm);
  padding:0 19px;margin:0;border:0;border-left:3px solid transparent;border-radius:0;white-space:nowrap;
  color:var(--text-on-dark-muted);text-decoration:none;text-shadow:none;background:transparent}
.barra .menu.menu-lateral a:hover,
.barra .menu.menu-lateral .menu-fijar:hover{color:var(--text-on-dark);background:var(--surface-raised-dark)}
.barra .menu.menu-lateral a.activo{color:var(--text-on-dark);font-weight:var(--fw-bold);
  border-bottom:0;border-left-color:var(--accent-rail);background:var(--surface-raised-dark)}
.barra .menu.menu-lateral a.activo::after{display:none}
.barra .menu.menu-lateral a:focus-visible,
.barra .menu.menu-lateral .menu-fijar:focus-visible{outline:2px solid var(--accent-rail);outline-offset:-2px}
.menu-icono{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* Recordatorio del respaldo: en rojo si está atrasado; el punto se ve con el menú cerrado. */
.barra .menu.menu-lateral a{position:relative}
.barra .menu.menu-lateral a.alerta{color:#ff8a80}
.menu-lateral .menu-punto{position:absolute;left:33px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--status-offline)}

/* «Fijar menú abierto», al pie. Anula el traje de botón principal que trae todo <button>. */
.barra .menu.menu-lateral .menu-fijar{width:100%;margin-top:auto;font:inherit;font-size:var(--fs-body-sm);
  font-weight:400;letter-spacing:0;cursor:pointer;transform:none;box-shadow:none;filter:none}
.barra .menu.menu-lateral .menu-fijar:hover,
.barra .menu.menu-lateral .menu-fijar:active{transform:none;box-shadow:none;filter:none}
.menu-lateral .menu-fijar .menu-icono{transition:transform .18s ease}
.menu-lateral.fijo .menu-fijar .menu-icono{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .barra .menu.menu-lateral,.menu-lateral .menu-texto,.menu-lateral .menu-fijar .menu-icono{transition:none}
}

/* Celular y tablet: no hay «pasar el mouse». El menú vive fuera de la pantalla y entra
   con el botón de la barra; se cierra con Escape o tocando fuera. */
@media (max-width:780px){
  body:has(.menu-lateral),
  body:has(.menu-lateral.fijo){padding-left:0}
  body:has(.menu-lateral) .barra .menu-abrir{display:inline-flex;align-items:center;justify-content:center;
    order:-1;width:40px;height:40px;margin:0 auto 0 0;padding:0;background:transparent;
    color:var(--text-on-dark);border:1px solid var(--border-dark-strong);border-radius:var(--radius-control);
    box-shadow:none;transform:none;filter:none}
  .barra .menu.menu-lateral{width:var(--lateral-abierto);transform:translateX(-100%);transition:transform .2s ease}
  .barra .menu.menu-lateral.abierto{transform:none}
  .menu-lateral .menu-texto{opacity:1}
  .barra .menu.menu-lateral .menu-fijar{display:none}
  body:has(.menu-lateral) .barra .logo-img{height:26px}
  body:has(.menu-lateral) .barra .marca-nombre{display:none}
  body:has(.menu-lateral) .barra .marca-usuario{margin-left:auto}
}

/* ============ INGRESO EN DOS PANELES (JuanJo, 2026-09-15) ============
   Foto de computadores de escritorio a la izquierda, bajo un velo azul tinta que deja
   leer el eslogan; el logo de E-HUK y el formulario a la derecha, sobre blanco. La foto viene de Unsplash (licencia libre, uso comercial sin atribución); si no
   carga, el panel queda en tinta con el mismo velo y todo sigue legible.
   Solo aplica a body.centro.ingreso: las demás pantallas de fuera de sesión conservan su
   tarjeta centrada. */
/* Tamaño COMPACTO (ajuste de JuanJo el mismo día: «está muy grande»): la tarjeta ocupa
   unos dos tercios de una pantalla grande y los paneles van mitad y mitad, como en D2E. */
.centro.ingreso{flex-direction:column;background:var(--ink-1000);padding:24px}
.ingreso-caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(860px,100%);
  min-height:min(520px,calc(100vh - 88px));background:var(--surface-card);border-radius:var(--radius-card);
  overflow:clip;box-shadow:var(--shadow-lg)}
.ingreso-foto{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--space-4);padding:28px 30px;color:var(--text-on-dark);background-color:var(--ink-950);
  background-image:linear-gradient(180deg,rgba(3,31,40,.30) 0%,rgba(3,31,40,.62) 45%,rgba(3,31,40,.92) 100%),
    url("/static/ingreso-foto.jpg");
  background-size:cover;background-position:center}
.centro.ingreso .ingreso-foto .marca{margin:0;gap:var(--space-2)}
/* Logo de E-HUK a la derecha de «Ingresar», con su base en la línea de «Usa tu correo o tu
   cédula» (align-items:flex-end alinea los bordes de abajo de las dos columnas). */
.ingreso-encabezado{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);
  margin-bottom:18px}
/* Al 50% (JuanJo, 2026-09-17): de 110 a 55px. Su borde derecho coincide con el de los campos. */
.ingreso-logo{display:block;width:55px;max-width:40%;height:auto;margin:0}
.centro.ingreso .ingreso-foto .logo-img.grande{height:32px}
.centro.ingreso .ingreso-foto .marca-nombre{color:var(--text-on-dark);font-size:var(--fs-subheading)}
.ingreso-lema{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;margin-top:auto}
.centro.ingreso .ingreso-titular{margin:0;color:var(--text-on-dark);font-family:var(--font-display);
  font-weight:var(--fw-extrabold);font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:var(--ls-title);
  white-space:normal;text-wrap:balance;max-width:14ch}
.ingreso-bajada{margin:0;color:var(--text-on-dark-body);font-size:var(--fs-caption);line-height:1.55;max-width:34ch}
.ingreso-etiquetas{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--space-2) 0 0;padding:0}
.ingreso-etiquetas li{padding:4px 10px;border:1px solid var(--border-dark-strong);border-radius:var(--radius-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-on-dark);background:rgba(3,31,40,.35)}
.ingreso-pie-foto{margin:0;font-size:var(--fs-micro);color:var(--text-on-dark-muted)}
.ingreso-formulario{display:flex;align-items:center;justify-content:center;padding:32px 34px}
.ingreso-form-caja{width:100%;max-width:300px}
.ingreso-form-caja label{margin:8px 0 3px}
.ingreso-form-caja input{padding-block:7px}
.ingreso-form-caja button[type=submit]{margin-top:12px;padding:8px}
.ingreso-form-caja h1{margin:0}
.ingreso-sub{margin:2px 0 0;color:var(--grey);font-size:var(--fs-body-sm);line-height:1.2}
.ingreso-form-caja .olvide{text-align:left}
.centro.ingreso .pie{position:static;margin-top:14px}
@media (max-width:780px){
  .centro.ingreso{padding:12px;justify-content:flex-start}
  .ingreso-caja{grid-template-columns:1fr;min-height:0}
  .ingreso-foto{padding:24px;min-height:220px}
  .ingreso-bajada,.ingreso-pie-foto{display:none}
  .ingreso-formulario{padding:28px 22px}
}

/* Operación en el CELULAR (auditoría 2026-09-16, B6): los 8 contadores ocupaban toda la
   primera pantalla antes de ver a un solo asesor. Cuatro por fila y compactos. */
@media (max-width:780px){
  #resumen.resumen{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #resumen .chip{padding:8px 6px;gap:2px;min-width:0}
  #resumen .chip-num{font-size:22px}
  #resumen .chip-txt{font-size:var(--fs-micro);line-height:1.2;overflow-wrap:anywhere}
}

/* ============ DIAGNÓSTICO DE DISEÑO · GRUPO 1 (JuanJo, 2026-09-16) ============
   Ajustes tomados de la revisión con el sistema de diseño de Apple que NO tocan la marca
   E-HUK: mismos colores, mismas esquinas de 3–4 px, misma tipografía. */

/* 1 · Aviso INFORMATIVO. El ámbar se usaba también para lo normal («Tu turno de hoy»,
   «Mostrando solo…»): si todo es alerta, nada lo es. El ámbar queda para lo que pide
   atención; lo informativo va en tono oscuro con filo cian. */
.mensaje.info{background:var(--light);border:1px solid var(--border-light);border-left:3px solid var(--blue);color:var(--navy)}
body:not(.centro) .mensaje.info{background:var(--surface-card-dark);border:1px solid var(--border-dark);
  border-left:3px solid var(--accent-rail);color:var(--text-on-dark-body)}

/* 4 · Portal: «Finalizar turno» deja de competir con «Solicitar pausa». Contorno rojo, más
   bajo y más separado (la confirmación ya existe). Las ventanas de fin de turno y de salir
   conservan su botón lleno: ahí finalizar es la acción principal. */
.forma-turno-fin{margin-top:28px}
.forma-turno-fin .boton-grande.finalizar{background:transparent;color:var(--status-offline);
  border:1.5px solid var(--status-offline);padding:11px;font-size:var(--fs-body)}
.forma-turno-fin .boton-grande.finalizar:hover,
.forma-turno-fin .boton-grande.finalizar:active{background:transparent;filter:none;
  box-shadow:inset 0 0 0 1px var(--status-offline)}

/* 6 · Tres tipos de botón: relleno (la acción principal del bloque), CONTORNO (las
   secundarias) y enlace (las menores). Rojo solo para lo destructivo. */
button.btn-secundario,.btn-corregir.btn-secundario{background:transparent;color:var(--text-heading);
  border:1.5px solid var(--border-strong)}
body:not(.centro) button.btn-secundario,
body:not(.centro) .btn-corregir.btn-secundario{background:transparent;color:var(--text-on-dark);
  border:1.5px solid var(--border-dark-strong)}
body:not(.centro) button.btn-secundario:hover,
body:not(.centro) .btn-corregir.btn-secundario:hover{background:var(--surface-raised-dark);filter:none}

/* 12 y 15 · Título igual al menú, con su detalle en una línea pequeña debajo. */
.titulo-bloque{margin:0 0 var(--space-3)}
.titulo-bloque h2{margin:0}
.titulo-bajada{margin:2px 0 0;font-size:var(--fs-body-sm);color:var(--grey)}
body:not(.centro) .titulo-bajada{color:var(--text-on-dark-muted)}
/* (el título del encabezado ya va en su propio renglón: ver FICHAS DE CIFRAS) */

/* 14 · Selector de dos opciones pegadas (Reportes: Día por día / Acumulado). */
.segmentado{display:inline-flex;border:1px solid var(--border-dark-strong);border-radius:var(--radius-control);
  overflow:hidden}
.segmentado a{padding:6px 14px;font-size:var(--fs-body-sm);font-weight:700;text-decoration:none;
  color:var(--text-on-dark-muted)}
.segmentado a + a{border-left:1px solid var(--border-dark-strong)}
.segmentado a:hover{color:var(--text-on-dark);background:var(--surface-raised-dark)}
.segmentado a[aria-current="page"]{background:var(--btn-primario);color:#fff}

/* ============ DIAGNÓSTICO DE DISEÑO · GRUPO 2 (JuanJo, 2026-09-16) ============ */

/* 2 · Novedades compacta: motivo y «Aprobar tal cual» en una fila; lo demás se despliega. */
.novedad-forma .novedad-rapida{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.novedad-forma .novedad-rapida label{margin:0;font-weight:700}
.novedad-forma .novedad-rapida select{flex:1 1 220px;width:auto;margin:0}
.novedad-forma .novedad-rapida button{width:auto;margin:0}
.novedad-forma .novedad-detalle{margin-top:var(--space-2)}

/* 3 · Botón de confirmación para lo destructivo (ventana de confirmar de WCL). */
button.btn-peligro,body:not(.centro) button.btn-peligro{background:var(--status-offline);color:#fff}

/* 7 · Explicaciones plegadas: «¿Cómo se lee…?». */
details.como-se-lee{margin:0 0 var(--space-3)}
details.como-se-lee > summary{cursor:pointer;width:fit-content;font-size:var(--fs-body-sm);font-weight:700;
  color:var(--blue);list-style:none}
body:not(.centro) details.como-se-lee > summary{color:var(--text-accent-on-dark)}
details.como-se-lee > summary::-webkit-details-marker{display:none}
details.como-se-lee > summary::before{content:"▸ "}
details.como-se-lee[open] > summary::before{content:"▾ "}
details.como-se-lee > summary:focus-visible{outline:2px solid var(--accent-rail);outline-offset:2px}
details.como-se-lee[open] > :not(summary){margin-top:var(--space-2)}

/* 11 · Dashboard: tres cifras destacadas y el resto más pequeño, con definiciones legibles. */
.pn-kpis.pn-kpis-principales{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));margin-bottom:var(--space-2)}
.pn-kpis-principales .pn-kpi{padding:12px 14px}
.pn-kpis-principales .pn-kpi-num{font-size:34px}
.pn-kpis-principales + .pn-kpis{margin-top:0}
.pn-kpis-principales + .pn-kpis .pn-kpi-num{font-size:17px}
.pn-definiciones{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0;
  font-size:var(--fs-body-sm)}
.pn-definiciones dt{font-weight:700}
.pn-definiciones dd{margin:0}
@media (max-width:520px){
  .pn-definiciones{grid-template-columns:1fr}
  .pn-definiciones dd{margin-bottom:6px}
}

/* 13 · Usuarios: la ventana de «Nuevo usuario» es más ancha y el panel de adentro no se
   dibuja como una tarjeta dentro de otra. */
.usuarios-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.usuarios-acciones button,.usuarios-acciones .boton-enlace{width:auto;margin:0}
.modal-caja.modal-ancha{max-width:720px}
.modal-caja .tarjeta-novedad{background:transparent;border:0;box-shadow:none;padding:0;margin:0}

/* ============ DIAGNÓSTICO DE DISEÑO · GRUPO 3 (JuanJo, 2026-09-16) ============ */
/* 8 · Iconos de línea en vez de emojis (app/iconos.py). Toman el color del texto. */
.ico{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.3em;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-lupa .ico{vertical-align:middle;margin-right:0}

/* ============ MARCA WCL Y REPORTES A TODO EL ANCHO (JuanJo, 2026-09-16) ============ */
/* La sigla manda y el nombre largo la explica. El título de la sección sigue siendo lo
   más grande de la pantalla: dice dónde estás; la marca dice en qué app. */
.marca-nombre{display:inline-flex;align-items:baseline;gap:var(--space-2)}
.marca-sigla{font-size:22px;font-weight:var(--fw-black);letter-spacing:.02em}
.marca-largo{font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;
  letter-spacing:0;color:var(--text-on-dark-body);padding-left:var(--space-2);
  border-left:1px solid var(--border-dark-strong)}
.centro .marca-nombre{flex-wrap:wrap}
.centro .marca-largo{color:#0078a8;border-left-color:#c9dde4}
.ingreso-app{margin:0 0 var(--space-2);color:var(--text-on-dark-body);font-size:var(--fs-body)}
.ingreso-app b{display:block;font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:34px;line-height:1;letter-spacing:.02em;color:var(--cyan-200)}
@media (max-width:780px){
  .marca-sigla{font-size:17px}
  .marca-largo{display:none}
}

/* Reportes: 15 columnas no caben en los 1180px del contenido normal, y más con el menú
   lateral. Esta pantalla usa todo el ancho de la ventana. */
.contenido.contenido-completo{max-width:none}
/* El «7h 30m de 8h» va debajo de su porcentaje, no al lado: ahorra unos 90px. */
.tabla-nomina td .adh-detalle{display:block;line-height:1.2}

/* INGRESO: los dos bloques alineados (JuanJo, 2026-09-17). El texto de la foto iba pegado
   abajo y el formulario centrado: no coincidían ni arriba ni abajo. Ahora los dos van
   centrados en su panel con la MISMA altura mínima, así que «WCL» arranca a la altura de
   «Ingresar» y las etiquetas terminan a la altura de «¿Olvidaste tu clave?». El pie de la
   foto sale del flujo y se queda en la esquina de abajo. */
.ingreso-foto{justify-content:center}
.ingreso-lema{margin-top:0;min-height:var(--ingreso-bloque);justify-content:space-between}
.ingreso-pie-foto{position:absolute;left:30px;bottom:28px}
.ingreso-form-caja{display:flex;flex-direction:column;min-height:var(--ingreso-bloque)}
.ingreso-form-caja .olvide{margin-top:auto}
:root{--ingreso-bloque:290px}
@media (max-width:780px){
  .ingreso-lema,.ingreso-form-caja{min-height:0}
  .ingreso-form-caja .olvide{margin-top:12px}
}
/* Ingreso en el CELULAR centrado en la pantalla (JuanJo, 2026-09-17). Iba pegado arriba
   con un hueco abajo. Centrar con margen automático (y no con justify-content:center)
   es lo seguro: si la tarjeta no cabe, arranca arriba en vez de cortarse. dvh descuenta
   la barra del navegador del celular. */
@media (max-width:780px){
  .centro.ingreso{min-height:100vh;min-height:100dvh}
  .centro.ingreso .ingreso-caja{margin-top:auto}
  .centro.ingreso .pie{margin-bottom:auto}
}
/* Relleno lateral de 7 a 5px: 15 columnas × 4px = 60px, lo justo para que el día por día
   quepa en una pantalla de 1280. Más angosta que eso, la tabla se desliza en su marco. */
.tabla-nomina th,.tabla-nomina td{padding-left:5px;padding-right:5px}
@media (max-width:1260px){
  .tabla-nomina.tabla-ancha{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabla-nomina.tabla-ancha thead th{position:static}
}

/* ============ MENSAJES TIPO POP-UP (JuanJo, 2026-09-17) · parte 1 ============ */
/* Pantalla del coordinador: a la izquierda a quién, a la derecha qué. En el celular, apilado. */
.msj-forma{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:stretch}
.msj-forma .tarjeta-novedad{margin:0}
.msj-forma h3{margin:0 0 var(--space-2)}
.msj-atajos{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.msj-atajos input[type=search]{flex:1 1 180px;width:auto}
.msj-atajos button{width:auto;margin:0;padding:6px 12px}
/* La lista se desplaza sola para que el formulario no crezca con cien asesores (no es una
   tabla: aquí no aplica la regla de encabezados fijos). */
.msj-lista{list-style:none;margin:var(--space-2) 0 0;padding:0;max-height:360px;overflow-y:auto;
  border-top:1px solid var(--border-dark)}
.msj-lista li{border-bottom:1px solid var(--border-dark)}
.msj-lista label{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:6px 4px;
  font-weight:400;color:var(--text-on-dark);cursor:pointer}
.msj-lista label:hover{background:var(--surface-raised-dark)}
.msj-lista input[type=checkbox]{width:22px;height:22px;flex:none;margin:0;accent-color:var(--blue)}
.msj-nombre{flex:1 1 auto;min-width:0}
.msj-lista .estado-sub{margin:0;white-space:nowrap}
.msj-falta{color:var(--status-offline)}
.msj-nivel{border:0;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.msj-nivel legend{float:left;margin-right:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-bold)}
.msj-nivel label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400}
.msj-nivel input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.msj-texto textarea{width:100%;resize:vertical;padding:var(--pad-campo-y) var(--space-2);
  border:1.5px solid var(--border-dark);border-radius:var(--radius-control);font:inherit}
.msj-cuenta{text-align:right}
.msj-vista{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-left:3px solid var(--blue);
  background:var(--surface-raised-dark);border-radius:var(--radius-control)}
.msj-vista p{margin:0}
.msj-subtitulo{margin:var(--space-5) 0 var(--space-2)}
.msj-celda-texto{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msj-vencido td{opacity:.6}
@media (max-width:780px){
  .msj-forma{grid-template-columns:1fr}
  .msj-celda-texto{max-width:180px}
}
/* Ventana del asesor. La urgente lleva filo rojo; la informativa, el azul de la marca. */
/* Con body:not(.centro) delante: la regla oscura de .modal-caja repinta todo el borde. */
body:not(.centro) .modal-caja.msj-ventana{max-width:460px;border-left:4px solid var(--blue)}
body:not(.centro) .modal-caja.msj-ventana.urgente{border-left-color:var(--status-offline)}
.msj-cabeza{display:flex;justify-content:space-between;align-items:center;margin:0 0 var(--space-2)}
.msj-cabeza .estado-sub{margin:0}
.msj-cuerpo{font-size:var(--fs-subheading);line-height:1.5;margin:var(--space-3) 0;white-space:pre-line;
  overflow-wrap:anywhere}
.msj-error{color:var(--status-offline)}

/* ============ MENSAJES · parte 2 (JuanJo, 2026-09-17) ============ */
/* Botón «Escribirle» junto al nombre en Operación: discreto hasta pasar el mouse. */
.msj-escribir{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;
  margin-left:4px;color:var(--text-on-dark-muted);border-radius:var(--radius-control);vertical-align:middle}
.msj-escribir:hover,.msj-escribir:focus-visible{color:var(--cyan-200);background:var(--surface-raised-dark)}
.msj-escribir .ico{margin:0}
/* Detalle por persona dentro de «Últimos envíos». */
.msj-destinos summary{cursor:pointer;color:var(--text-accent-on-dark);white-space:nowrap}
.msj-envios .msj-celda-texto{max-width:360px}
.msj-destinos ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.msj-destinos li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);white-space:nowrap}
/* Invitación a activar los avisos, arriba del portal del asesor. */
.msj-permiso{width:100%;max-width:520px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.msj-permiso.msj-bloqueado{display:block}
/* Sin esto el display:flex le ganaba al atributo hidden y la invitación salía SIEMPRE. */
.msj-permiso[hidden]{display:none}
.msj-permiso button{width:auto;margin:0 0 0 auto;padding:6px 12px}

/* ============ MENSAJES · parte 3 (JuanJo, 2026-09-17) ============ */
.msj-etiqueta-fila{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.msj-rapidos{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--space-3);align-items:start}
.msj-rapido{margin:0}
.msj-rapido h3{margin:0 0 var(--space-2)}
.msj-rapido-fila{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2)}
.msj-rapido-titulo{flex:1 1 180px}
.msj-rapido-fila select{width:auto}
.msj-rapido-activo{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;font-weight:400}
.msj-rapido-activo input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--blue)}
.msj-rapido textarea{width:100%;resize:vertical;padding:var(--pad-campo-y) var(--space-2);
  border:1.5px solid var(--border-dark);border-radius:var(--radius-control);font:inherit}
.msj-rapido button{width:auto;padding:6px 16px}
.msj-rapido-inactivo{opacity:.65}
.msj-rapido-nuevo{border-style:dashed}
@media (max-width:780px){ .msj-rapidos{grid-template-columns:1fr} }

/* Mensajes: «Solo en turno» es un filtro encendido/apagado (JuanJo, 2026-09-17). */
.msj-atajos button[aria-pressed="true"]{background:var(--btn-primario);border-color:var(--btn-primario);color:#fff}
.msj-aviso-caja{max-width:420px}
.msj-aviso-caja p{margin:0 0 var(--space-3)}

/* Mensaje URGENTE más llamativo (JuanJo, 2026-09-17): no basta un filo. Franja roja arriba con
   el aviso, borde rojo completo, fondo rojizo y el botón «Entendido» en rojo. Sin animación:
   una pantalla que se mira ocho horas no parpadea. */
.msj-fondo-urgente{background:rgba(40,6,4,.72)}
body:not(.centro) .modal-caja.msj-ventana.urgente{border:2px solid var(--status-offline);
  border-left-width:6px;background:linear-gradient(180deg,rgba(226,88,77,.20),rgba(226,88,77,.06) 55%),var(--grad-card-deep);
  box-shadow:0 0 0 4px rgba(226,88,77,.18),var(--elev-4-shadow)}
.msj-banda-urgente{display:flex;align-items:center;gap:var(--space-2);margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3);
  padding:10px var(--card-pad);background:var(--status-offline);color:#fff;font-weight:var(--fw-black);
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-body)}
.msj-banda-urgente[hidden]{display:none}
.msj-ventana.urgente .msj-cuerpo{font-size:calc(var(--fs-subheading) + 2px);font-weight:var(--fw-bold);color:var(--text-on-dark)}
.msj-ventana.urgente #mm-entendido{background:var(--status-offline)}
.msj-ventana.urgente #mm-entendido:hover{filter:brightness(1.08)}


/* ============ DASHBOARD · RESULTADOS COMERCIALES (JuanJo, 2026-09-17) ============ */
.rc-seccion{margin-top:var(--space-5);scroll-margin-top:calc(var(--alto-barra) + 12px)}
.rc-filtros{flex-wrap:wrap;row-gap:var(--space-2)}
.rc-filtros select{width:auto;max-width:240px}
.rc-tabla .rc-dia,.rc-tabla .rc-prom,.rc-tabla .rc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-tabla .rc-semana{display:block;font-weight:400;opacity:.75}
.rc-tabla .rc-cero{color:var(--text-on-dark-muted)}
.rc-tabla .rc-prom{border-left:1px solid var(--border-dark-strong);color:var(--text-accent-on-dark)}
.rc-tabla .rc-total{border-left:1px solid var(--border-dark-strong)}
.rc-tabla .rc-asesor{white-space:nowrap}
.rc-tabla .rc-lineas{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Con 15 días la tabla pasa del ancho del Dashboard (1180px): se desliza de lado DENTRO de su
   marco a cualquier ancho, y la página se queda quieta. Aquí no hace falta encabezado fijo:
   la tabla es corta comparada con la de Reportes. */
.rc-tabla.tabla-ancha{display:block;overflow:auto;max-width:100%}
/* ENCABEZADO FIJO (JuanJo, 2026-09-21): la tabla se desplaza DENTRO de su marco (alto máximo de
   la pantalla menos la barra) y el encabezado y la fila TOTAL quedan siempre a la vista. Pegado a
   la página no servía: el marco con desplazamiento horizontal lo anulaba. */
.rc-tabla.tabla-ancha{max-height:calc(100vh - var(--alto-barra) - 90px)}
.rc-tabla.tabla-ancha thead th{position:sticky;top:0;z-index:3;background:var(--cabecera-tabla)}
.rc-tabla.tabla-ancha tfoot td{position:sticky;bottom:0;z-index:2;background:var(--surface-raised-dark)}

/* ===================== TEMA CLARO (JuanJo, 2026-09-17) =====================
   La app pinta el tema oscuro con TOKENS (--surface-card-dark, --text-on-dark…), así que
   el tema claro se logra redefiniendo esos tokens: las ~100 reglas del tema oscuro siguen
   igual y pasan a pintar claro. Se enciende con la clase «tema-claro» en el <html>, que el
   <head> de cada plantilla aplica desde localStorage antes de pintar (sin parpadeo).
   La barra de arriba y el menú lateral SIGUEN oscuros en los dos temas: sostienen la marca
   E-HUK y separan la navegación del contenido. La pantalla de ingreso (.centro) ya era clara
   y no se toca. */
.tema-claro body:not(.centro){
  color-scheme:light;
  /* CLARO SOBRIO (JuanJo, 2026-09-18, comparado con una app que le gustó): el tema claro NO es
     el oscuro repintado. Fondo neutro casi blanco, tarjeta blanca plana con filo fino y sombra
     mínima, cifras en tinta, y el color guardado para lo que se pulsa o avisa. */
  --bg-page:#eff3f5;
  --surface-card-dark:#ffffff;
  --surface-raised-dark:#f4f7f9;
  --surface-inset-dark:#ffffff;
  --grad-card-dark:none;
  --grad-card-deep:none;
  --grad-band-dark:linear-gradient(180deg,#f7fafb 0%,#f1f5f7 100%);
  --glass-dark:rgba(255,255,255,.9);
  --glass-dark-border:1px solid #e2e8ec;
  --text-on-dark:#0f2a33;
  --text-on-dark-body:#33505b;
  --text-on-dark-muted:#68838d;
  --text-accent-on-dark:#0b6f95;
  --border-dark:#e4e9ed;
  --border-dark-strong:#cfd9df;
  --shadow-dark-sm:0 1px 2px rgba(15,42,51,.06);
  --shadow-dark-md:0 1px 3px rgba(15,42,51,.08);
  --shadow-dark-lg:0 4px 12px rgba(15,42,51,.08);
  --elev-1-shadow:0 1px 2px rgba(15,42,51,.06);
  --elev-2-shadow:0 1px 3px rgba(15,42,51,.08);
  --elev-4-shadow:0 12px 32px rgba(15,42,51,.16);
  --inner-top-light:none;
  --inner-edge:none;
  --glow-cyan:0 0 0 3px rgba(0,150,211,.16);
  --glow-cyan-sm:0 0 0 2px rgba(0,150,211,.14);
  --cabecera-tabla:#eef2f5;
  --cabecera-tabla-texto:#33505b;
  /* Los dos acentos de apoyo del claro: verde y naranja. Solo para filetes y viñetas. */
  --acento-verde:#1e9e6a;
  --acento-naranja:#d97b12;
}
/* La barra y el menú lateral recuperan los tokens oscuros: se heredan a todo lo que llevan
   dentro (nombre de la app, usuario, secciones), así que no hace falta regla por elemento. */
.tema-claro body:not(.centro) .barra,
.tema-claro body:not(.centro) .menu-lateral{
  --text-on-dark:#ffffff;
  --text-on-dark-body:var(--cyan-100);
  --text-on-dark-muted:#8fb3c0;
  --text-accent-on-dark:var(--cyan-200);
  --surface-raised-dark:#0b2a34;
  --border-dark:rgba(102,202,218,.16);
  --border-dark-strong:rgba(102,202,218,.30);
  color:#ffffff;
}
/* Filas alternas con un gris muy leve (blanco sobre blanco no se lee como tabla). */
/* Tabla tranquila: sin franjas alternas; una línea fina por fila y realce al pasar el mouse. */
.tema-claro body:not(.centro) .tabla tbody tr:nth-child(even){background:transparent}
.tema-claro body:not(.centro) .tabla th{border-bottom:1px solid #d7e0e5}
.tema-claro body:not(.centro) .tabla td{border-bottom-color:#eef2f5}
.tema-claro body:not(.centro) .tabla tbody tr:hover{background:#f7fafb}
/* Tarjetas: filo fino y sombra mínima, sin degradados. */
.tema-claro body:not(.centro) .tarjeta-novedad,
.tema-claro body:not(.centro) .chip,
.tema-claro body:not(.centro) .agenda{border:1px solid var(--border-dark);box-shadow:var(--elev-1-shadow)}
/* Las cifras grandes van en TINTA: en claro el azul se ve desvaído y compite con los botones.
   El rojo y el ámbar de las alertas se quedan, que ahí el color SÍ informa. */
.tema-claro body:not(.centro) .chip-num,
.tema-claro body:not(.centro) .pn-kpi-azul .pn-kpi-num,
.tema-claro body:not(.centro) .pn-kpi-num{color:var(--text-on-dark)}
.tema-claro body:not(.centro) .pn-kpi-rojo .pn-kpi-num{color:#c0392b}
.tema-claro body:not(.centro) .pn-kpi-ambar .pn-kpi-num{color:#b8791a}

/* ---- TOQUES DE COLOR (JuanJo, 2026-09-18): una pizca de verde y naranja para que el claro
   no quede plano. Van en FILETES y VIÑETAS, nunca en el fondo ni en el texto largo. ---- */
.tema-claro body:not(.centro) .pn-kpi-rojo{border-top-color:#c0392b}
/* Viñetas cuadradas en verde y la flecha de «¿Cómo se lee…?» en naranja. */
.tema-claro body:not(.centro) .nota ul li::marker,
.tema-claro body:not(.centro) .pn-definiciones dd li::marker{color:var(--acento-naranja)}
.tema-claro body:not(.centro) details.como-se-lee > summary::marker{color:var(--acento-naranja)}
.tema-claro body:not(.centro) .pn-definiciones dt::before{content:"";display:inline-block;
  width:8px;height:8px;margin-right:8px;border-radius:2px;background:var(--acento-verde);
  vertical-align:middle}
/* Contraste sobre claro (auditado con la medida real de contraste, 2026-09-17):
   el azul de marca da 3.06:1 sobre blanco y el pie 2.75:1 sobre el degradado. Se bajan de tono
   lo justo para pasar 4.5:1 sin salirse de la familia E-HUK. */
.tema-claro body:not(.centro) .pie,
.tema-claro body:not(.centro) .pie a{color:#3f5b66}
.tema-claro body:not(.centro) .mini-enlace,
.tema-claro body:not(.centro) a.boton-enlace.gris{color:var(--cyan-800)}
.tema-claro body:not(.centro) .mini-enlace.rojo{color:#b3372c}
/* Sobre el fondo neutro basta el tono de rótulo; ya no hace falta cargar de tinta. */
.tema-claro body:not(.centro) .titulo-bajada,
.tema-claro body:not(.centro) > .contenido > .estado-sub{color:#5a737d}
.tema-claro body:not(.centro) details.como-se-lee > summary{color:#0b6f95}
/* Verde y azul de las leyendas y cifras pequeñas: los tonos claros del tema oscuro no se
   ven sobre blanco (1.9:1). Se usan los tonos profundos de la misma familia. */
.tema-claro body:not(.centro) .pn-val-prod{color:#0f8a72}
.tema-claro body:not(.centro) .pn-val-conect{color:var(--cyan-800)}

/* El interruptor sol/luna: en el menú lateral se ve como una sección más. */
.btn-tema{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0 var(--space-3) 0 auto;
  padding:4px 10px;min-height:28px;background:transparent;border:1px solid var(--border-dark-strong);
  border-radius:var(--radius-control);color:var(--text-on-dark-body);font:inherit;
  font-size:var(--fs-body-sm);cursor:pointer;flex:none}
.btn-tema:hover{background:rgba(102,202,218,.14);color:var(--text-on-dark);filter:none;box-shadow:none;transform:none}
.btn-tema .ico{flex:none;margin:0}
.btn-tema .ico-luna{display:none}
.tema-claro .btn-tema .ico-luna{display:inline-block}
.tema-claro .btn-tema .ico-sol{display:none}
.barra .menu .btn-tema{padding:2px 8px;min-height:24px}
.barra .menu .btn-tema .btn-tema-txt{font-size:var(--fs-body-sm)}

/* Estado de los avisos del sistema en el portal (JuanJo, 2026-09-18): con el permiso dado, la
   única forma de saber si Windows los muestra es mandar uno de prueba. */
.msj-estado-avisos{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:520px;
  margin:0 0 var(--space-3);color:var(--text-on-dark-muted);font-size:var(--fs-body-sm)}
.msj-estado-avisos button{width:auto;margin:0 0 0 auto;padding:4px 10px}
.msj-estado-avisos[hidden]{display:none}

/* ============ COLOR POR SECCIÓN (JuanJo, 2026-09-18) ============
   «Hay secciones que no tienen color distinto al azul». Cada sección lleva su color en el ícono
   del menú —lo único que se ve desde todas las pantallas— y el título de la sección repite la
   familia con un subrayado corto de tres colores. Los tonos son los del sistema: cyan de marca,
   verde de «va bien», naranja de «mira esto». */
.barra .menu.menu-lateral a[href="/tablero"] .menu-icono{color:var(--cyan-300)}
.barra .menu.menu-lateral a[href="/agenda"] .menu-icono{color:var(--acento-verde,#4fd0b6)}
.barra .menu.menu-lateral a[href="/panel"] .menu-icono{color:var(--acento-naranja,#f0a92c)}
.barra .menu.menu-lateral a[href="/novedades"] .menu-icono{color:var(--cyan-300)}
.barra .menu.menu-lateral a[href="/turnos-dia"] .menu-icono{color:var(--acento-verde,#4fd0b6)}
.barra .menu.menu-lateral a[href="/lineas"] .menu-icono{color:var(--acento-naranja,#f0a92c)}
.barra .menu.menu-lateral a[href="/reportes"] .menu-icono{color:var(--cyan-300)}
.barra .menu.menu-lateral a[href="/mensajes"] .menu-icono{color:var(--acento-verde,#4fd0b6)}
.barra .menu.menu-lateral a[href="/usuarios"] .menu-icono{color:var(--acento-naranja,#f0a92c)}
.barra .menu.menu-lateral a[href="/segmentos"] .menu-icono{color:var(--cyan-300)}
.barra .menu.menu-lateral a[href="/auditoria"] .menu-icono{color:var(--acento-verde,#4fd0b6)}
.barra .menu.menu-lateral a[href="/configuracion"] .menu-icono{color:var(--acento-naranja,#f0a92c)}
.barra .menu.menu-lateral a[href="/respaldos"] .menu-icono{color:var(--cyan-300)}
/* El respaldo atrasado manda sobre el color de sección: rojo es rojo. */
.barra .menu.menu-lateral a.alerta .menu-icono{color:#ff8a80}
/* La sección abierta CONSERVA su color (JuanJo, 2026-09-18: «falta color en el menú Operación»
   — era justo la sección abierta, que pintaba su ícono de blanco). El «estoy aquí» ya lo dicen
   el fondo del renglón y su filo izquierdo. */
/* En el tema claro los tonos son los profundos, que es donde el color se ve sin chillar. */
.tema-claro .barra .menu.menu-lateral a[href="/agenda"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/turnos-dia"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/mensajes"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/auditoria"] .menu-icono{color:#4fd0b6}
.tema-claro .barra .menu.menu-lateral a[href="/panel"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/lineas"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/usuarios"] .menu-icono,
.tema-claro .barra .menu.menu-lateral a[href="/configuracion"] .menu-icono{color:#f0a92c}
.tema-claro .barra .menu.menu-lateral a.alerta .menu-icono{color:#ff8a80}

/* El subrayado del título lleva los tres colores y aparece en TODAS las pantallas —también en
   las que solo tienen tablas— y en los DOS temas: es el toque de color que faltaba. */
body:not(.centro) .titulo-bloque h2::after,
body:not(.centro) main > h2::after{content:"";display:block;width:34px;height:3px;
  margin-top:6px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--acento-verde) 55%,var(--acento-naranja) 100%)}
/* Filete de color sobre cada cifra del Dashboard, rotando azul · verde · naranja (los dos temas). */
body:not(.centro) .pn-kpi{border-top:3px solid var(--cyan-500)}
body:not(.centro) .pn-kpi:nth-child(3n+2){border-top-color:var(--acento-verde)}
body:not(.centro) .pn-kpi:nth-child(3n+3){border-top-color:var(--acento-naranja)}
body:not(.centro) .pn-kpi-rojo{border-top-color:var(--status-offline)}

/* Medidor de la pantalla (solo Super Administrador): discreto, al pie. */
.tiempo-pantalla{margin:var(--space-2) 0 0;text-align:center;font-size:var(--fs-micro);
  color:var(--text-on-dark-muted);font-variant-numeric:tabular-nums}
.tiempo-pantalla[hidden]{display:none}

/* Bloque «Ventas cantadas» de Configuración: los nombres sin calzar se pliegan y la tabla se
   desliza dentro de su marco, para que no empuje la pantalla de lado. */
.vc-tabla.tabla-ancha{display:block;overflow-x:auto;max-width:100%}
.vc-tabla.tabla-ancha thead th{position:static}
.vc-tabla .vc-num{text-align:right;font-variant-numeric:tabular-nums}
.vc-nombres summary{cursor:pointer;white-space:nowrap}
.vc-nombres p{margin:6px 0 0;max-width:60ch;white-space:normal}
.vc-forma{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.vc-forma button{width:auto;margin:0}
.vc-forma .estado-sub{margin:0;max-width:52ch}
.vc-forma .estado-sub[hidden]{display:none}
.vc-barra{height:8px;border-radius:999px;background:var(--surface-raised-dark);overflow:hidden;
  margin-top:var(--space-2);max-width:420px}
.vc-barra[hidden]{display:none}
.vc-barra-relleno{height:100%;background:linear-gradient(90deg,var(--blue),var(--acento-verde));
  transition:width .4s ease}
/* Pantalla «Nombres sin calzar»: una fila por nombre, con su desplegable de asesor. */
.sc-tabla.tabla-ancha{display:block;overflow-x:auto;max-width:100%}
.sc-tabla.tabla-ancha thead th{position:static}
.sc-tabla .sc-num{text-align:right;font-variant-numeric:tabular-nums}
.sc-tabla .sc-nombre{white-space:nowrap}
.sc-forma{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0}
.sc-forma select{width:auto;max-width:280px}
.sc-forma button{width:auto;margin:0;padding:4px 12px}
.sc-subtitulo{margin:var(--space-5) 0 var(--space-2)}
/* Etiqueta solo para lectores de pantalla (el desplegable ya se entiende por su fila). */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vc-forma .vc-asociar{margin:0}

/* ============ MÁS COLOR EN LÍNEAS Y MENSAJES (JuanJo, 2026-09-18) ============
   El color INFORMA: cada segmento y cada producto lleva un tono estable (mismo nombre, mismo
   color en toda la app), la línea sin asesor se ve ámbar y la de gente asignada verde. */
.chip-tono{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--fs-micro);
  font-weight:var(--fw-bold);line-height:1.6;white-space:nowrap;vertical-align:middle;
  background:var(--tono-f);color:var(--tono-t);border:1px solid transparent}
.chip-tono.suave{background:transparent;border-color:var(--tono-b);font-weight:500}
.t0{--tono-f:rgba(0,150,211,.20);--tono-t:#7fd3f0;--tono-b:rgba(0,150,211,.55)}
.t1{--tono-f:rgba(30,158,106,.22);--tono-t:#74dcae;--tono-b:rgba(30,158,106,.6)}
.t2{--tono-f:rgba(217,123,18,.22);--tono-t:#f5b566;--tono-b:rgba(217,123,18,.6)}
.t3{--tono-f:rgba(124,102,220,.24);--tono-t:#bcaef7;--tono-b:rgba(124,102,220,.6)}
.t4{--tono-f:rgba(20,184,166,.20);--tono-t:#72e2d5;--tono-b:rgba(20,184,166,.55)}
.t5{--tono-f:rgba(219,80,130,.22);--tono-t:#f3a0bf;--tono-b:rgba(219,80,130,.55)}
.t-gris{--tono-f:rgba(143,179,192,.18);--tono-t:#b5ccd5;--tono-b:rgba(143,179,192,.5)}
.tema-claro .t0{--tono-f:#dff1f9;--tono-t:#0b6f95;--tono-b:#8fcfe8}
.tema-claro .t1{--tono-f:#e0f4ea;--tono-t:#16774f;--tono-b:#93d3b5}
.tema-claro .t2{--tono-f:#fdeddb;--tono-t:#9a5206;--tono-b:#f0bf85}
.tema-claro .t3{--tono-f:#ebe7fb;--tono-t:#5641a8;--tono-b:#b9adee}
.tema-claro .t4{--tono-f:#daf3f0;--tono-t:#0f6f67;--tono-b:#8ad6cd}
.tema-claro .t5{--tono-f:#fbe5ed;--tono-t:#9c2f56;--tono-b:#eba8c0}
.tema-claro .t-gris{--tono-f:#eef2f5;--tono-t:#4a6570;--tono-b:#c9d6dc}

.pildora{display:inline-block;min-width:22px;padding:1px 8px;border-radius:999px;text-align:center;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);line-height:1.6;white-space:nowrap}
.pildora.verde{background:rgba(30,158,106,.22);color:#74dcae}
.pildora.ambar{background:rgba(217,123,18,.22);color:#f5b566}
.tema-claro .pildora.verde{background:#e0f4ea;color:#16774f}
.tema-claro .pildora.ambar{background:#fdeddb;color:#9a5206}
.chip-linea{display:inline-block;padding:1px 7px;margin:1px 0;border-radius:var(--radius-control);font-size:var(--fs-micro);
  background:var(--surface-raised-dark);border:1px solid var(--border-dark);white-space:nowrap}

/* Tarjetas con filete de color arriba, como las cifras del Dashboard. */
body:not(.centro) .tarjeta-novedad.acento-naranja{border-top:3px solid var(--acento-naranja)}
body:not(.centro) .tarjeta-novedad.acento-verde{border-top:3px solid var(--acento-verde)}
body:not(.centro) .tarjeta-novedad.acento-azul{border-top:3px solid var(--cyan-500)}
.tarjeta-novedad.acento-naranja > strong .ico{color:var(--acento-naranja)}
.tarjeta-novedad.acento-verde > strong .ico{color:var(--acento-verde)}

/* Enlaces de la sección con cara de botón suave, cada uno con su color. */
.enlace-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:var(--fs-body-sm);font-weight:var(--fw-bold);text-decoration:none;border:1px solid}
.enlace-chip.verde{color:#74dcae;border-color:rgba(30,158,106,.6);background:rgba(30,158,106,.12)}
.enlace-chip.naranja{color:#f5b566;border-color:rgba(217,123,18,.6);background:rgba(217,123,18,.12)}
.tema-claro .enlace-chip.verde{color:#16774f;border-color:#93d3b5;background:#effaf4}
.tema-claro .enlace-chip.naranja{color:#9a5206;border-color:#f0bf85;background:#fff6ec}
.enlace-chip:hover{filter:brightness(1.08);text-decoration:none}

/* Cabecera de las tablas de la sección: filete naranja (el color de Líneas en el menú). */
.seccion-lineas .tabla thead th{border-bottom:2px solid var(--acento-naranja)}
.seccion-lineas .tabla .col-api{font-variant-numeric:tabular-nums;color:var(--text-on-dark-muted)}
.seccion-lineas .tabla td.num-fuerte{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.seccion-lineas .tabla td .chip-tono{margin:1px 2px 1px 0}

/* TENDENCIA: una barrita por día. Verde = días que cuentan, gris = sin asignar ese día,
   ámbar en toda la franja cuando la pareja está marcada «bajo». */
.mini-serie{display:inline-flex;align-items:flex-end;gap:2px;height:26px;vertical-align:middle;
  padding:2px 4px;border-radius:var(--radius-control);background:var(--surface-raised-dark)}
.mini-serie i{display:block;width:6px;height:0;border-radius:2px 2px 0 0;
  background:var(--acento-verde)}
.mini-serie i.cero{height:2px;background:#c0392b;border-radius:1px;opacity:.7}
.mini-serie i.libre{height:3px;width:3px;margin:0 1.5px;border-radius:50%;background:var(--text-on-dark-muted);opacity:.5}
.mini-serie.bajo i.vale{background:var(--acento-naranja)}
.franja-linea{margin-top:4px}
.franja-linea .mini-serie i{background:var(--cyan-500)}
.tend{display:inline-block;margin-left:4px;font-size:11px;vertical-align:middle}
.tend-sube{color:var(--acento-verde)}
.tend-baja{color:#e0662f}
.tend-igual{color:var(--text-on-dark-muted)}
.tema-claro .mini-serie{background:#eef3f6}

/* Mensajes: pasos numerados, nivel como pastilla de color y contador que se enciende. */
.msj-paso{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;border-radius:50%;
  font-size:var(--fs-body-sm);font-weight:var(--fw-bold);color:#fff;vertical-align:2px}
.msj-paso.verde{background:var(--acento-verde)}
.msj-paso.azul{background:var(--cyan-500)}
.msj-conteo{display:inline-block;margin:6px 0;padding:1px 10px;border-radius:999px;font-size:var(--fs-body-sm);
  color:var(--text-on-dark-muted);background:var(--surface-raised-dark)}
.msj-conteo.hay{color:#74dcae;background:rgba(30,158,106,.18);font-weight:var(--fw-bold)}
.tema-claro .msj-conteo.hay{color:#16774f;background:#e0f4ea}
.msj-lista li label{gap:8px}
.msj-lista li .chip-tono{margin-left:auto}
.msj-nivel label{padding:4px 12px 4px 8px;border-radius:999px;border:1px solid var(--border-dark)}
.msj-nivel label.nivel-info:has(input:checked){border-color:var(--cyan-500);background:rgba(0,150,211,.14)}
.msj-nivel label.nivel-urgente:has(input:checked){border-color:#e0662f;background:rgba(224,102,47,.14);color:#e0662f}
.msj-nivel label.nivel-urgente input[type=radio]{accent-color:#e0662f}
.msj-subtitulo .ico{color:var(--acento-verde)}
.seccion-mensajes .msj-envios thead th{border-bottom:2px solid var(--acento-verde)}

/* Ventanas en el tema claro (2026-09-18): el claro anula los degradados de tarjeta y la caja
   quedaba SIN fondo — el mensaje urgente del asesor se leía encima del portal. Fondo sólido
   siempre; el urgente conserva su velo rojo encima. */
.tema-claro body:not(.centro) .modal-caja,
.tema-claro body:not(.centro) .modal-caja.msj-ventana.urgente{background-color:var(--surface-card-dark)}
.titulo-con-volver{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.titulo-con-volver h2{margin:0}

/* Mensajes automáticos: la tarjeta encendida lleva filete verde; la apagada, el tono apagado
   de los rápidos inactivos. */
.msj-auto-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.msj-auto-cabeza h3{margin:0}
body:not(.centro) .msj-auto.encendido{border-top:3px solid var(--acento-verde)}
.msj-auto .msj-auto-umbral{width:90px}
.msj-auto .mensaje{margin:var(--space-2) 0}

/* Sugeridos del grupo B en Mensajes: una tarjeta ámbar arriba del formulario. */
.msj-sugeridos{margin:0 0 var(--space-4)}
.msj-sugeridos h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.msj-sugeridos h3 .ico{color:var(--acento-naranja)}
.msj-sug-lista{list-style:none;margin:var(--space-2) 0 0;padding:0}
.msj-sug-lista li{padding:var(--space-3) 0;border-top:1px solid var(--border-dark)}
.msj-sug-quien{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.msj-sug-texto{margin:6px 0;color:var(--text-on-dark-body);font-style:italic}
.msj-sug-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.msj-sug-botones form{display:flex;gap:var(--space-2);margin:0}
.msj-sug-botones button{width:auto;margin:0;padding:6px 16px}

/* Resultados comerciales: encabezados que ordenan la tabla (clic = mayor a menor, otro = al revés). */
.rc-tabla thead th.rc-ordenable{cursor:pointer;user-select:none;white-space:nowrap}
.rc-tabla thead th.rc-ordenable:hover{text-decoration:underline}
.rc-tabla thead th.rc-ordenable:focus-visible{outline:2px solid var(--cyan-500);outline-offset:-2px}
.rc-tabla thead th.rc-ordenada{color:var(--acento-naranja)}
.rc-tabla thead th.rc-ordenable::after{content:attr(data-flecha);margin-left:4px;font-size:10px}

/* Tarjetas de automáticos del MISMO alto en cada fila: la rejilla las estira y el botón se va
   al fondo (JuanJo, 2026-09-21). */
.msj-rapidos:has(.msj-auto){align-items:stretch}
.msj-auto{display:flex;flex-direction:column}
.msj-auto .msj-auto-guardar{margin-top:auto;align-self:flex-start}
.msj-auto .estado-sub:first-of-type{min-height:4.5em}
.msj-auto-umbral-fila{display:flex;flex-direction:column;gap:4px;margin:var(--space-2) 0 0}

/* «Para» en Últimos envíos: los nombres a la vista, con su estado en un punto de color. */
.msj-para-nombres{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:4px}
.msj-dest{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:var(--fs-body-sm)}
.msj-dest::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-on-dark-muted)}
.msj-dest.leido::before{background:var(--acento-verde)}
.msj-dest.llego::before{background:var(--acento-naranja)}

/* ============ MAPA DE CALOR de Turnos (JuanJo, 2026-09-21) ============
   Hora × día. La intensidad viaja en --i (0 a 1) y cada vista elige su color: azul para
   demanda, dotación y rendimiento; rojo «faltan» / azul «sobran» para la malla. */
.mc-vistas{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}
.mc-marco{overflow-x:auto;max-width:100%}
.mc-tabla{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums;min-width:560px;
  width:100%}  /* días al doble de ancho y a lo ancho de la pantalla (JuanJo, 2026-09-21) */
.mc-tabla th{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-on-dark-muted);
  padding:4px 6px;text-align:center;white-space:nowrap}
.mc-tabla tbody th{text-align:right}
.mc-fecha{display:block;font-weight:400;opacity:.8}
.mc-celda{--i:0;min-width:128px;height:30px;text-align:center;border-radius:4px;font-size:var(--fs-body-sm);
  background:rgba(0,150,211,calc(.06 + var(--i) * .85));color:var(--text-on-dark)}
.mc-celda.fuerte{color:#fff}
/* Demanda, dotación y rendimiento en COLORES CÁLIDOS (JuanJo, 2026-09-21): amarillo tenue
   para lo poco, naranja en el medio y rojo para la hora más caliente. El tono va de 52° a 0°
   y la luz baja a la vez, así el rojo intenso es inconfundible. La malla conserva su rojo
   «faltan» / azul «sobran», que ahí el color significa otra cosa. */
.mc-tabla:not(.mc-malla) .mc-celda{
  background:hsl(calc(52 - var(--i) * 52) 92% calc(86% - var(--i) * 40%));color:#4a2300}
.mc-tabla:not(.mc-malla) .mc-celda.fuerte{color:#fff}
.mc-tabla:not(.mc-malla) .mc-celda.vacia{background:rgba(143,179,192,.08)}
.mc-malla .mc-celda.justo{background:rgba(143,179,192,.10)}
.mc-malla .mc-celda.faltan{background:rgba(224,102,47,calc(.18 + var(--i) * .75))}
.mc-malla .mc-celda.sobran{background:rgba(0,150,211,calc(.14 + var(--i) * .7))}
.mc-sug{opacity:.75;font-size:var(--fs-micro)}
.mc-tabla tfoot td,.mc-tabla tfoot th{text-align:center;font-size:var(--fs-micro);padding-top:6px}
.mc-muestra{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px}
.mc-muestra.faltan{background:rgba(224,102,47,.8)}
.mc-muestra.sobran{background:rgba(0,150,211,.75)}
.mc-leyenda{margin-top:var(--space-2)}
.mc-multi-botones{display:flex;gap:6px;margin-bottom:6px}
.mc-multi-botones .mini-boton{width:auto;margin:0}

/* El menú (encabezado + barra lateral) va UN TONO MÁS HONDO que la página (JuanJo, 2026-09-21:
   «la barra del menú debe tener un color diferenciador, ligeramente más oscura»). Tenían el mismo
   ink-950 de la página y el menú se fundía con el contenido. ink-1000 es el siguiente escalón de
   la misma familia E-HUK; en el tema claro ya se distinguía y sigue igual de oscuro. */
body:not(.centro) .barra,
body:not(.centro) .barra .menu.menu-lateral{background:var(--ink-1000)}
body:not(.centro) .barra{border-bottom:1px solid rgba(102,202,218,.10)}
body:not(.centro) .barra .menu.menu-lateral{box-shadow:1px 0 0 rgba(102,202,218,.08)}
.mc-coord{width:auto}

/* «Para quién» y «Mensaje» del MISMO alto (JuanJo, 2026-09-21): la tarjeta del mensaje se estira
   y el espacio que sobra lo toma el cuadro de texto; «Enviar» queda abajo, alineado. */
.msj-forma .msj-texto{display:flex;flex-direction:column}
.msj-forma .msj-texto textarea{flex:1 1 auto;min-height:110px}
.msj-forma .msj-texto > button[type=submit]{margin-top:auto}

/* ============ ACOMPAÑAMIENTO (retroalimentación, 2026-09-22) ============ */
.barra .menu.menu-lateral a[href="/retroalimentacion"] .menu-icono{color:var(--acento-verde,#4fd0b6)}
.tema-claro .barra .menu.menu-lateral a[href="/retroalimentacion"] .menu-icono{color:#4fd0b6}
.fb-tabla td .pildora{margin-left:4px}
.fb-frio{color:var(--acento-naranja)}
/* Acompañamiento parte 2 (19-oct-2026): el seguimiento dentro de la sesión del historial. */
.fb-seguimiento{border-left:3px solid var(--acento-naranja);padding-left:var(--space-3);margin-top:var(--space-2)}
.fb-ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:stretch}
@media (max-width:900px){.fb-ficha{grid-template-columns:1fr}}
/* .fb-numeros: ver FICHAS DE CIFRAS (20-oct-2026) */
.fb-numero{min-width:110px}
.fb-numero b{display:block;font-size:var(--fs-subheading);color:var(--text-on-dark)}
.fb-sesion{border-top:1px solid var(--border-dark);padding:var(--space-3) 0}
.fb-sesion:first-of-type{border-top:0}
.fb-sesion p{margin:4px 0}
.fb-forma label{display:block;margin-top:var(--space-2);font-weight:var(--fw-bold)}
.fb-forma textarea{width:100%;resize:vertical;padding:var(--pad-campo-y) var(--space-2)}
.fb-forma select,.fb-forma input[type=date]{width:auto}
/* La tarjeta del portal: el asesor lee y firma. */
.fb-portal{border-left:4px solid var(--acento-verde)}
.fb-portal .fb-acordado{font-weight:var(--fw-bold);color:var(--text-on-dark)}

/* «Nueva sesión» e «Historial» del mismo alto (JuanJo, 2026-09-22): el historial largo se
   desplaza dentro de su tarjeta en vez de estirarla. */
.fb-ficha > section{display:flex;flex-direction:column}
.fb-ficha .fb-forma{display:flex;flex-direction:column;flex:1 1 auto}
.fb-ficha .fb-forma button[type=submit]{margin-top:auto}
.fb-historial{flex:1 1 auto;overflow-y:auto;max-height:520px}

/* ============ CELULAR: lo nuevo también se usa desde el teléfono (JuanJo, 2026-09-22) ============
   En pantalla angosta la tabla de Acompañamiento se vuelve tarjetas: con 5 columnas, el
   «Compromiso» y el botón quedaban fuera de la pantalla y sin forma de llegar a ellos. */
@media (max-width:780px){
  .fb-tabla,.fb-tabla tbody,.fb-tabla tr,.fb-tabla td{display:block;width:auto}
  .fb-tabla thead{display:none}
  .fb-tabla tr{border:1px solid var(--border-dark);border-radius:var(--radius-card);
    padding:var(--space-3);margin-bottom:var(--space-3);background:var(--surface-card-dark)}
  .fb-tabla td{border:0;padding:2px 0;max-width:none;white-space:normal}
  .fb-tabla td.msj-celda-texto{overflow:visible;text-overflow:clip}
  .fb-ficha{grid-template-columns:1fr}
  .fb-historial{max-height:none}
  /* El mapa de calor: celdas más angostas para que quepan los 7 días, y se desliza. */
  .mc-celda{min-width:52px;font-size:var(--fs-micro)}
  .mc-tabla{min-width:420px}
  .mc-vistas .enlace-chip{flex:1 1 auto;justify-content:center}
  /* Resultados comerciales: el marco alto no tiene sentido en el teléfono. */
  .rc-tabla.tabla-ancha{max-height:70vh}
}

/* ENTRENAMIENTO (etapa 2, 2026-09-29). La barra compara lo dedicado con lo pactado:
   dos números sueltos obligan a hacer la resta mentalmente, la barra no. */
.ent-tarjeta{margin-bottom:var(--space-3)}
.ent-cabeza{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:space-between;align-items:flex-start}
.ent-cabeza h3{margin:0 0 var(--space-1)}
.ent-cifras{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.ent-barra{position:relative;height:12px;border-radius:999px;background:var(--surface-card-dark);
  border:1px solid var(--borde);margin:var(--space-3) 0 var(--space-1);overflow:visible}
.ent-barra-real{display:block;height:100%;border-radius:999px;background:var(--status-operating);max-width:100%}
.ent-barra-real.alta,.ent-barra-real.baja{background:var(--status-paused)}
/* La meta es una marca, no un relleno: se ve dónde debía quedar la barra. */
.ent-barra-meta{position:absolute;top:-4px;width:2px;height:20px;background:var(--text-on-dark)}
.ent-sesiones{margin-top:var(--space-3)}
.ent-sesiones summary{cursor:pointer;font-weight:var(--fw-bold)}
.ent-nota td{padding-top:0;border-top:0}
@media (max-width:780px){
  .ent-cabeza{flex-direction:column}
  .ent-cifras{gap:var(--space-1) var(--space-3)}
}

/* LICENCIAS Y SUSCRIPCIÓN (2026-09-29). La página del cliente que paga es lo primero que
   ve alguien que nos va a dar su tarjeta: tiene que verse cuidada, no improvisada. */
.ancho-suscripcion{max-width:620px}
.tj-fila{display:flex;gap:var(--space-3);flex-wrap:wrap}
.tj-fila > div{flex:1 1 140px}
.enlace-copiar{display:inline-block;word-break:break-all;background:var(--surface-card-dark);
  border:1px solid var(--borde);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);
  font-size:var(--fs-body-sm)}
/* El botón «Copiar» va pegado a su enlace; al copiar se pone verde un momento. */
.lic-copiar{margin-left:var(--space-2);vertical-align:middle}
.lic-copiar.copiado{border-color:var(--acento-verde);color:var(--acento-verde)}
/* La confirmación de una ampliación no queda tapada por la barra de arriba al saltar a ella. */
#ampliacion-confirmar{scroll-margin-top:90px}

/* ALARMAS (2026-09-29). Roja = roto o a punto de romperse; ámbar = se acumula. Solo dos
   niveles a propósito: con cinco, nadie distingue cuál mirar primero. */
.pildora.roja{background:rgba(226,88,77,.22);color:#f3a49c}
.tema-claro .pildora.roja{background:#fbe4e1;color:#8f2f25}
body:not(.centro) .tarjeta-novedad.acento-rojo{border-top:3px solid var(--status-offline)}
body:not(.centro) .tarjeta-novedad.acento-ambar{border-top:3px solid var(--status-paused)}
.alarma-tarjeta{margin-bottom:var(--space-3)}
.alarma-cabeza{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.alarma-cabeza h3{margin:0}
.alarma-accion{color:var(--grey)}

/* GRUPOS DEL MENÚ (2026-09-29). El contenedor no existe para el diseño (display:contents):
   los enlaces siguen siendo hijos directos del menú a efectos de la columna flexible. Al
   contraer un grupo se esconden sus enlaces, MENOS la sección actual y los que están en rojo:
   un menú contraído no puede tapar una alerta. */
.menu-bloque{display:contents}
.menu-bloque.cerrado > a:not(.activo):not(.alerta){display:none}
.barra .menu.menu-lateral button.menu-grupo{display:flex;align-items:center;width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit}
.barra .menu.menu-lateral button.menu-grupo:hover{color:#9fe0ea}
.barra .menu.menu-lateral button.menu-grupo:focus-visible{outline:2px solid var(--accent-rail);outline-offset:-2px}
/* La flecha es un borde girado, no un carácter: sin emojis ni símbolos que cambian por sistema. */
.menu-grupo .menu-texto::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);
  transition:transform .15s ease}
.menu-grupo.cerrado .menu-texto::after{transform:translateY(0) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.menu-grupo .menu-texto::after{transition:none}}

/* Rampa de los aprendices (trainer, etapa 3 — 2026-09-30): una barra por semana desde
   el ingreso y una raya con la meta de esa semana. */
.rampa-graf{display:block;overflow:visible}
.rampa-graf .b-ok{fill:var(--status-operating)}
.rampa-graf .b-bajo{fill:var(--status-paused)}
.rampa-graf .b-nada{fill:var(--grey)}
.rampa-graf .meta{stroke:var(--text-on-dark);stroke-width:2}
.rampa-tabla td{vertical-align:middle}

/* Calidad / QA (2026-09-30): el check list con SÍ / NO / No aplica y la nota en vivo. */
.cal-dos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cal-marcador{position:sticky;top:var(--alto-barra,68px);z-index:2;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px;padding:10px 14px;margin:12px 0;border-radius:var(--radius-card);
  background:var(--surface-card-dark);border:1px solid var(--borde)}
.cal-nota{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:2.5ch}
.cal-seccion{border:1px solid var(--borde);border-radius:var(--radius-card);padding:10px 14px;margin:0 0 14px}
.cal-seccion legend{font-weight:700;padding:0 6px}
.cal-critica{border-color:var(--status-paused)}
.cal-todo{float:right;margin:-4px 0 6px}
.cal-pregunta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 6px;border-top:1px solid var(--borde);border-left:3px solid transparent}
.cal-pregunta.cal-bien{border-left-color:var(--status-operating)}
.cal-pregunta.cal-mal{border-left-color:var(--status-paused)}
.cal-pregunta.cal-na{opacity:.7}
.cal-texto{flex:1 1 260px}
.cal-opciones{display:inline-flex;gap:6px}
.cal-opc{cursor:pointer}
.cal-opc input{position:absolute;opacity:0;width:1px;height:1px}
.cal-opc span{display:inline-block;min-width:44px;text-align:center;padding:6px 10px;
  border:1px solid var(--borde);border-radius:999px;font-size:.85rem}
.cal-opc input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.cal-opc input:focus-visible + span{outline:2px solid var(--accent-rail);outline-offset:2px}

/* Velocidad de las ventas (Dashboard, 2026-10-02): cantadas por hora y por BPO. */
.vv-marco{overflow-x:auto}
/* Dentro de una caja con desplazamiento lateral, el encabezado «pegado» se mide desde la CAJA,
   no desde la pantalla: con top = alto de la barra bajaba ~100 px y TAPABA las primeras filas
   (05-oct-2026: BTK1 no se veía en Capacidad, y la primera hora en Velocidad). */
.vv-marco .tabla thead th{top:0}
.vv-tabla th.vv-bpo{text-align:center;border-bottom:1px solid var(--borde)}
.vv-tabla .vv-sub{border-left:1px dashed var(--borde);opacity:.9}
.vv-tabla .vv-total{border-left:1px solid var(--borde)}
.vv-tabla .vv-hora{font-variant-numeric:tabular-nums;white-space:nowrap}
.vv-pct{white-space:nowrap}
.vv-barra-fondo{display:inline-block;width:48px;height:6px;border-radius:999px;
  background:var(--surface-card-dark);vertical-align:middle;margin-right:6px;overflow:hidden}
.vv-barra{display:block;height:100%;background:var(--status-operating)}
.vv-lecturas{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.vv-notas{margin:4px 0 12px}
.vv-tabla tr.vv-bloque td{border-top:1px solid var(--borde);background:var(--surface-card-dark)}

/* Capacidad de atención (Dashboard, 2026-10-05): segmentos con sus líneas plegadas. */
.cp-tabla tr.cp-seg td{border-top:1px solid var(--borde)}
.cp-abrir{background:none;border:0;color:inherit;cursor:pointer;font-size:1rem;padding:0 4px}
.cp-abrir:focus-visible{outline:2px solid var(--accent-rail);outline-offset:2px}
.cp-tabla .cp-sangria{padding-left:30px}
/* Capacidad: horas que sobran (rojo, como «Sobra gente») o faltan (ámbar, como «Nos desborda"). */
.cp-sobran{color:#f3a49c;white-space:nowrap}
.cp-faltan{color:#f5b566;white-space:nowrap}
.tema-claro .cp-sobran{color:#8f2f25}
.tema-claro .cp-faltan{color:#9a5206}
/* API de lectura (2026-10-05): la llave nueva, el ejemplo y el formulario. */
.api-llave{display:block;word-break:break-all;margin:8px 0;font-size:.95rem;user-select:all}
.api-ejemplo{white-space:pre-wrap;word-break:break-all;background:rgba(0,0,0,.25);padding:10px 12px;border-radius:var(--radius-control);font-size:.85rem}
.tema-claro .api-ejemplo{background:#eef3f6}
.api-crear{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.api-crear input{min-width:240px;flex:1;max-width:360px}
.api-tabla .mini-boton,.api-tabla code{white-space:nowrap}
/* Subsecciones del Dashboard (2026-10-05): las mismas pestañas de Turnos, pero con botones
   (cambian de vista sin recargar). En el celular se desplazan de lado sin partirse. */
.pestanas button{padding:8px 16px;color:var(--grey);background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-bold);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .18s ease,border-color .18s ease}
.pestanas button:hover{color:var(--text-accent)}
.pestanas button.activa{color:var(--text-accent);border-bottom-color:var(--accent-rail)}
.pestanas button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
body:not(.centro) .pestanas button{color:var(--text-on-dark-muted)}
body:not(.centro) .pestanas button:hover,
body:not(.centro) .pestanas button.activa{color:var(--text-accent-on-dark)}
.pn-pestanas{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin-top:var(--space-3)}
.pn-pestanas button{margin-bottom:0}
.pn-panel > .tarjeta-novedad:first-child,.pn-panel > .pn-kpis:first-child{margin-top:var(--space-2)}
/* Novedades (06-oct-2026): pruebas de trabajo después del cierre, y el freno al aprobar. */
.novedad-despues{color:#f5b566}
.tema-claro .novedad-despues{color:#9a5206}
.novedad-freno{margin:8px 0 0;padding:8px 12px;border-radius:var(--radius-control);
  background:rgba(217,123,18,.18);color:#f5b566;font-size:var(--fs-body-sm)}
.tema-claro .novedad-freno{background:#fdeddb;color:#9a5206}
/* Calidad (07-oct-2026): la retroalimentación grande y el seguimiento. */
.cal-comentario{width:100%;min-height:180px;resize:vertical;line-height:1.45;font:inherit}
.cal-com-pie{margin-top:4px}
.cal-com-aviso{display:block;margin-top:4px;color:#f5b566}
.tema-claro .cal-com-aviso{color:#9a5206}
.cal-texto-largo{white-space:pre-wrap}
.cal-pendientes .lista-palomas li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cal-pendientes .mini-boton{margin-left:auto}
/* Calculadora de Licencias (09-oct-2026): el precio arriba y el ahorro resaltado. */
.calc-precio{font-size:1.05rem;margin:10px 0 2px}
.calc-ahorro{color:#4ade80}
.tema-claro .calc-ahorro{color:#15803d}
.calc-tabla td{vertical-align:middle}
/* Página de pago (09-oct-2026): el cliente elige cómo pagar antes de registrar la tarjeta. */
.formas-pago{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.forma-pago{border:1px solid var(--borde);border-radius:var(--radius-card);padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
.forma-pago.elegida{border-color:var(--accent-rail);box-shadow:0 0 0 1px var(--accent-rail)}
.forma-pago p{margin:0}
.forma-mes{font-size:1.1rem}