/* 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@300;400;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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");

/* Lo que se marca «hidden» queda oculto SIEMPRE (2026-10-13): los estilos de etiquetas, recuadros y barras
   (display:block/flex) anulaban el atributo, y la casilla «¿Cuál?» del disciplinario o la barra del total de
   la tienda se veían aunque debían estar ocultas.
   OJO (2026-10-15): va DESPUÉS de los @import. Una regla antes de un @import hace que el navegador lo ignore:
   el 13-oct quedó arriba, los tokens no cargaron y todos los espacios (--space-*) valieron 0 — botones y
   casillas pegados en toda la app. */
[hidden]{display:none !important}

/* ============ FONDO AZUL MARINO PEOPLEFLOW (JuanJo, 2026-09-16) ============
   PeopleFlow tomaba el verde petróleo de WCL y se veía igual. Aquí se reemplaza la
   escala «ink» del Design System por un azul marino sacado del logo: fondo, tarjetas,
   barra y menú cambian a la vez, y todo lo que ya usa estas variables queda coherente.
   Botones, textos, tablas y colores de estado NO cambian (misma legibilidad).
   Va DESPUÉS del @import de los tokens, así que gana sobre sus valores. */
:root{
  --ink-1000:#030c1c;--ink-950:#061530;--ink-900:#081c3c;--ink-850:#0b2447;--ink-800:#0e2a52;
  --ink-750:#10284a;--ink-700:#163054;--ink-600:#1b375c;--ink-500:#2a4a72;
  --grad-card-dark:linear-gradient(160deg,#16335c 0%,var(--ink-750) 55%,#0b1f3d 100%);
  --grad-card-deep:linear-gradient(160deg,#0d3563 0%,var(--ink-850) 100%);
  --grad-band-dark:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-950) 100%);
  --grad-band-deep:radial-gradient(900px 520px at 82% 0%,#0b2d5a 0%,var(--ink-950) 70%);
  --grad-hero:radial-gradient(1200px 700px at 12% -10%,#0f2f5c 0%,#0a1f44 42%,var(--ink-950) 78%);
  --grad-fade-bottom:linear-gradient(180deg,rgba(6,21,48,0) 0%,var(--ink-950) 100%);
  --dim-surface-1:linear-gradient(158deg,#16335c 0%,var(--ink-750) 52%,#0b1f3d 100%);
  --dim-surface-2:linear-gradient(158deg,#0e3b6b 0%,var(--ink-850) 58%,#07193a 100%);
  --dim-surface-3:linear-gradient(158deg,#114577 0%,var(--ink-800) 55%,#051732 100%);
}

: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);      /* #061530 = ink-950 (azul marino PeopleFlow) */
  --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: una banda CLARA de la paleta, igual en los dos temas.
     El problema estaba en el tema oscuro, que es el que ve todo el mundo (el claro
     solo lo ven login y 2 pasos): la cabecera iba en ink-850 sobre un cuerpo ink-750,
     o sea 1.04:1 — no se distinguia en absoluto. Con cyan-150 la banda se separa
     10.07:1 del cuerpo y el texto ink encima queda en 11.47:1. */
  --cabecera-tabla: var(--cyan-150);
  --cabecera-tabla-texto: var(--ink-950);
  /* 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. */
  --fs-body:12px;      /* era 16 */
  --fs-body-sm:11px;   /* era 14 */
  --fs-caption:10px;   /* era 13 */
  --fs-eyebrow:10px;   /* era 13 — 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}
.logo-marco::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url("/static/logo.png");mask-image:url("/static/logo.png");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background-size:260% 100%;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  animation:logo-destello 8s ease-in-out infinite}
@keyframes logo-destello{0%,68%{background-position:170% 0}100%{background-position:-70% 0}}
/* Quien pidio menos animacion en su sistema no ve ninguno de los tres destellos. */
@media (prefers-reduced-motion:reduce){
  .logo-marco::after,.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-light);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}
/* El ojito NO hereda el «sube al pasar el mouse» de los botones: su transform es el que lo
   centra en la casilla, y al pisarlo se salía por debajo (visto en producción, 2026-09-16). */
.ojo:hover{filter:none;background:transparent;color:var(--navy);transform:translateY(-50%);box-shadow:none}
.ojo:active{filter:none;transform:translateY(-50%);box-shadow: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)}
/* «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}
.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:10px;font-weight:600;
  color:var(--text-on-dark);white-space:nowrap;margin-top:3px}
.marca-rol{font-family:var(--font-text);font-size:9px;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);
    grid-template-areas:"logo marca salir" "logo marca menu";
    row-gap:4px;align-items:center}
  .barra .logo-marco{grid-area:logo;align-self:center}
  .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-light);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:600}

/* 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:600;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:not-allowed}
/* 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:600;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:600;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:600;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;
  /* 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)}

/* --- 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:600}
.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:12px;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:600}

/* --- 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)}
/* Tablas de «etiqueta | valor» (ficha de Personas): la etiqueta es un th de FILA, no un
   encabezado de columna — sin la franja cian ni las mayúsculas, que pintaban media ficha
   como si toda fuera encabezado. */
.tabla tbody th[scope="row"]{background:transparent;color:inherit;text-transform:none;
  letter-spacing:0;font-weight:var(--fw-bold);width:34%;position:static}

/* --- Panel de configuración (solo 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:600}
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:600}
.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:9px;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);transform:translateY(-1px)}
.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:600;
  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 se oscurece: es la cabecera de la agenda y va con la misma banda clara
   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 480px;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. */
.ag-encabezado{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);
  margin:0 0 var(--space-3)}
.ag-encabezado h2{margin:0 auto 0 0}
.ag-productividad{display:flex;flex-direction:column;align-items:flex-end;
  margin-left:var(--space-3);line-height:1.1}
.ag-prod-etq{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;
  opacity:.75}
.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}
@media (max-width: 780px){
  .ag-productividad{align-items:flex-start;margin-left:0;flex:1 1 100%}
}

/* ============ 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:6px;height:10px;overflow:hidden}
.pn-v-barra>div{height:100%;background:var(--ag-trabajado);border-radius:6px}
.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 PEOPLEFLOW (aprobado por JuanJo, 2026-09-15) ============
   La plataforma es la casa y cada módulo un grupo (WCL · Gestión humana · Administración).
   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 adelgaza: el logo y el nombre viven en el menú; aquí quedan quién
   está dentro, su rol y «Salir». */
body:has(.menu-lateral) .barra{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:var(--space-3);min-height:48px;padding-block:6px}
body:has(.menu-lateral) .barra .logo-marco,
body:has(.menu-lateral) .barra .marca-nombre,
body:has(.menu-lateral) .barra .marca-eslogan{display:none}
body:has(.menu-lateral) .barra .marca-app{flex:0 1 auto;flex-direction:row;align-items:baseline;
  gap:var(--space-2);overflow:visible}
body:has(.menu-lateral) .barra .marca-usuario{margin-top:0;font-size:var(--fs-body-sm)}

.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:10px 0 12px;background:var(--ink-950);
  border-right:1px solid var(--border-dark);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  transition:width .18s ease}
.barra .menu.menu-lateral::-webkit-scrollbar{display:none}
@media (hover:hover){
  .barra .menu.menu-lateral:hover{width:var(--lateral-abierto);border-right-color:var(--border-dark-strong)}
  .menu-lateral:hover .menu-texto{opacity:1}
}
.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}

.menu-marca{display:flex;align-items:center;gap:14px;flex:0 0 auto;height:44px;padding:0 14px;
  margin-bottom:6px;white-space:nowrap}
.menu-monograma{width:32px;height:32px;flex:0 0 32px;display:block}
.menu-marca-nombre{font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:var(--fs-subheading);color:var(--text-on-dark)}
.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:var(--text-on-dark-muted);white-space:nowrap}

.barra .menu.menu-lateral a,
.barra .menu.menu-lateral .menu-fijar{display:flex;align-items:center;gap:14px;flex:0 0 auto;height:40px;
  padding:0 20px;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:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* El número de Avisos va pegado a la esquina del ícono: se lee igual con el menú cerrado. */
.barra .menu.menu-lateral a{position:relative}
.menu-lateral .menu-cuenta{position:absolute;left:32px;top:5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--radius-pill);background:var(--status-paused);color:var(--ink-950);
  font-size:10.5px;font-weight:var(--fw-bold);line-height:17px;text-align:center}

/* Razones sociales (certificados): campos en rejilla y la vista previa de logo y firma
   sobre blanco, que es como salen en el PDF. */
.rs-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-2) var(--space-4);
  margin-bottom:var(--space-2)}
.rs-imagen{display:block;max-width:100%;max-height:64px;margin:6px 0;padding:6px;background:#fff;
  border-radius:var(--radius-control)}

/* «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}
}

/* ============ INGRESO EN DOS PANELES (JuanJo, 2026-09-15) ============
   Estilo del ingreso de D2E Flow: foto de un equipo trabajando a la izquierda, bajo un
   velo azul tinta que deja leer la marca y el eslogan; 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(6,21,48,.30) 0%,rgba(6,21,48,.62) 45%,rgba(6,21,48,.92) 100%),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1400&q=70");
  background-size:cover;background-position:center}
.centro.ingreso .ingreso-foto .marca{margin:0;gap:var(--space-2)}
/* Logo real de PeopleFlow (versión para fondo claro, sin eslogan) encima de «Ingresar». */
.ingreso-logo{display:block;width:150px;max-width:60%;height:auto;margin:0 0 20px}
.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(6,21,48,.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 18px;color:var(--grey);font-size:var(--fs-body-sm)}
.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}
}

/* ============ AJUSTES DE JUANJO AL VER PRODUCCIÓN (2026-09-16) ============
   1) INGRESO: el lema de la foto iba pegado abajo y el formulario centrado, así que no
      quedaban a la misma altura. Ahora los dos paneles centran su contenido en vertical;
      «Uso interno» baja a la esquina para no mover el centro. */
.ingreso-foto{justify-content:center}
.ingreso-lema{margin-top:0}
.ingreso-pie-foto{position:absolute;left:30px;bottom:24px}

/* 2) ENCABEZADO de cada sección: el nombre de la app vuelve a la barra, a la izquierda
      (estaba oculto porque vivía solo en el menú lateral), y el nombre de quien está
      dentro, su rol y «Salir» quedan centrados en la misma línea. */
body:has(.menu-lateral) .barra .marca-app{flex:1 1 auto;align-items:center}
body:has(.menu-lateral) .barra .marca-nombre{display:block;margin-right:auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;color:var(--text-on-dark);font-size:var(--fs-subheading);line-height:1}
body:has(.menu-lateral) .barra .marca-usuario,
body:has(.menu-lateral) .barra .marca-rol{line-height:1;align-self:center}
body:has(.menu-lateral) .barra .salir{line-height:1;align-self:center;min-height:0}

/* 3) MENÚ LATERAL DESDE ARRIBA. En anchos de 781 a 1320 px (portátiles, o pantallas grandes
      con el zoom de Windows) la barra usa una rejilla que le pone «align-self:end» a su
      menú; el menú lateral, aunque es fijo con top:0 y bottom:0, heredaba ese alineamiento,
      dejaba de estirarse y arrancaba a mitad de pantalla (visto en producción). */
.barra .menu.menu-lateral{align-self:stretch;justify-self:stretch;padding-top:12px}

/* 4) LA MARCA EN LA BARRA de cada sección: el logo (la figura) junto al nombre PeopleFlow.
      El logo sale del menú lateral, que ahora arranca directo con las secciones. */
body:has(.menu-lateral) .barra .logo-marco{display:inline-flex;align-items:center;align-self:center;flex:0 0 auto}
body:has(.menu-lateral) .barra .logo-img{height:30px;width:auto}
/* En el celular no caben logo, nombre, usuario, rol y «Salir» en una línea: el rol se oculta
   (sigue en Mi hoja de vida y en Usuarios) para que «Salir» no baje de renglón. */
@media (max-width:600px){body:has(.menu-lateral) .barra .marca-rol{display:none}}

/* 5) TÍTULOS DEL MENÚ EN CELESTE (JuanJo, 2026-09-16): «Mi espacio», «Gestión humana» y
      «Administración» se distinguen de los enlaces, que siguen en gris azulado. */
.barra .menu.menu-lateral .menu-grupo{color:var(--cyan-200)}

/* 6) LOGO Y NOMBRE AL DOBLE (JuanJo, 2026-09-16): la marca de la barra pasa de 30 a 60 px de logo
      y de 17 a 34 px de nombre. En el celular se queda en un tamaño intermedio para que
      quepan el usuario y «Salir» en la misma línea. */
body:has(.menu-lateral) .barra .logo-img{height:60px}
body:has(.menu-lateral) .barra .marca-nombre{font-size:34px}
@media (max-width:600px){
  body:has(.menu-lateral) .barra .logo-img{height:36px}
  body:has(.menu-lateral) .barra .marca-nombre{font-size:22px}
}
/* Celulares muy angostos (380 px o menos): queda solo el logo, para que el nombre de quien
   está dentro y «Salir» no bajen de renglón. */
@media (max-width:380px){body:has(.menu-lateral) .barra .marca-nombre{display:none}}

/* 7) FICHA DE LA PERSONA EN TARJETAS (JuanJo, 2026-09-17): antes era una sola lista larga.
      Encabezado con lo urgente, cifras rápidas, tarjetas en dos columnas (una en el celular)
      y salario y datos sensibles cerrados al final. */
.ficha .ficha-cabecera{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.ficha .ficha-avatar{width:64px;height:64px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--cyan-800);color:var(--cyan-100);font-family:var(--font-display);
  font-size:22px;font-weight:var(--fw-bold);letter-spacing:.02em}
.ficha .ficha-quien{flex:1 1 260px;min-width:0}
.ficha .ficha-quien h2{margin:0;overflow-wrap:anywhere}
.ficha .ficha-eyebrow{margin:0 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan-200)}
.ficha .ficha-sub{margin:4px 0 0;color:var(--text-on-dark-muted);font-size:14px}
.ficha .ficha-etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ficha .ficha-etiquetas .badge{font-size:12px;padding:3px 10px}
.ficha .ficha-accion{margin-top:0;flex:0 0 auto}
.ficha .ficha-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:var(--space-2);
  margin-bottom:var(--space-3)}
.ficha .ficha-cifra{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--radius-card);
  background:var(--ink-850);border:1px solid var(--border-dark)}
.ficha .ficha-cifra-txt{font-size:12px;color:var(--text-on-dark-muted)}
.ficha .ficha-cifra-num{font-size:17px;font-weight:var(--fw-bold);color:var(--text-on-dark);font-variant-numeric:tabular-nums}
.ficha .ficha-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--space-3);
  align-items:start}
.ficha .ficha-rejilla .tarjeta-novedad{margin-bottom:0}
.ficha .ficha-tarjeta h3,.ficha .ficha-protegidos h3{margin:0 0 10px;font-size:16px;color:var(--cyan-200)}
.ficha .ficha-protegidos{margin-top:var(--space-3)}
.ficha .ficha-protegidos h4{margin:6px 0 8px;font-size:14px;color:var(--text-on-dark)}
.ficha .ficha-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:0}
.ficha .ficha-datos dt{font-size:12px;color:var(--text-on-dark-muted)}
.ficha .ficha-datos dd{margin:2px 0 0;font-size:14px;color:var(--text-on-dark);overflow-wrap:anywhere}
.ficha .ficha-faltan{margin:12px 0 0;font-size:12px;color:var(--text-on-dark-muted)}
.ficha .ficha-tabla{overflow-x:auto;margin-top:10px}
.ficha .ficha-tarjeta .mensaje{margin:0 0 10px}
.ficha .tarjeta-novedad:hover{transform:none}

/* 8) FICHA CON COLOR (JuanJo, 2026-09-17: «muy planos los colores»). Cada tarjeta lleva su color
      (--acento): franja superior, barra de encabezado con el ícono en un cuadro, viñetas en los
      datos; el contrato es una línea de tiempo y la seguridad social usa flechas desde→hasta. */
.ficha{--acento:var(--cyan-300);--acento-fondo:rgba(102,202,218,.14)}
.ficha .ficha-cian{--acento:var(--cyan-300);--acento-fondo:rgba(102,202,218,.14)}
.ficha .ficha-menta,.ficha .ficha-color-2{--acento:#4fd0b6;--acento-fondo:rgba(79,208,182,.14)}
.ficha .ficha-coral{--acento:#f08a7e;--acento-fondo:rgba(240,138,126,.14)}
.ficha .ficha-ambar,.ficha .ficha-color-3{--acento:#f0a92c;--acento-fondo:rgba(240,169,44,.14)}
.ficha .ficha-violeta,.ficha .ficha-color-4{--acento:#a99bf5;--acento-fondo:rgba(169,155,245,.15)}
.ficha .ficha-gris{--acento:#8ba4b0;--acento-fondo:rgba(139,164,176,.14)}
.ficha .ficha-color-1{--acento:var(--cyan-300);--acento-fondo:rgba(102,202,218,.14)}

.ficha .ficha-icono{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ficha .ficha-volver{display:inline-flex;align-items:center;gap:6px}
.ficha .ficha-volver .ficha-icono{width:15px;height:15px}
.ficha .ficha-cuadro{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  flex:0 0 auto;border-radius:8px;background:var(--acento-fondo);color:var(--acento);
  border:1px solid color-mix(in srgb,var(--acento) 40%,transparent)}

/* Encabezado: banda con degradado, anillo en las iniciales y flecha en el botón. */
.ficha .ficha-cabecera{position:relative;overflow:hidden;padding:22px 24px;
  background:linear-gradient(120deg,#0e3b6b 0%,#0b2447 55%,#081c3c 100%);border-color:rgba(102,202,218,.35)}
.ficha .ficha-cabecera::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--cyan-300),#4fd0b6)}
.ficha .ficha-cabecera::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;border:28px solid rgba(102,202,218,.07);pointer-events:none}
.ficha .ficha-avatar{background:linear-gradient(135deg,var(--cyan-600),#12a08a);color:#fff;
  box-shadow:0 0 0 3px #0b2447,0 0 0 5px var(--cyan-300)}
.ficha .ficha-etiquetas .badge{display:inline-flex;align-items:center;gap:5px}
.ficha .ficha-etiquetas .ficha-icono{width:14px;height:14px}
.ficha .ficha-accion{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}
.ficha .ficha-accion .ficha-icono{transition:transform .15s ease}
.ficha .ficha-accion:hover .ficha-icono{transform:translateX(3px)}

/* Cifras: cuadro de color con ícono y riel del mismo color abajo. */
.ficha .ficha-cifra{flex-direction:row;align-items:center;gap:12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#10284a,#0b1f3d)}
.ficha .ficha-cifra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acento)}
.ficha .ficha-cifra-cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0}
.ficha .ficha-cifra-num{overflow-wrap:anywhere}

/* Tarjetas: franja de color arriba y barra de encabezado. */
.ficha .ficha-tarjeta{padding:0;overflow:hidden;border-top:3px solid var(--acento)}
.ficha .ficha-titulo{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(90deg,var(--acento-fondo),transparent 85%);border-bottom:1px solid var(--border-dark)}
.ficha .ficha-tarjeta .ficha-titulo h3{margin:0;font-size:16px;color:var(--text-on-dark)}
.ficha .ficha-cuerpo{padding:14px 18px 18px}

/* Datos con viñeta del color de la tarjeta. */
.ficha .ficha-datos dt{display:flex;align-items:center;gap:6px}
.ficha .ficha-datos dt::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--acento);flex:0 0 auto}
.ficha .ficha-datos dd{padding-left:12px}
.ficha .ficha-faltan{display:flex;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:6px;
  background:rgba(240,169,44,.08);border:1px dashed rgba(240,169,44,.35)}
.ficha .ficha-faltan .ficha-icono{width:14px;height:14px;color:#f0a92c;margin-top:1px}

/* Línea de tiempo del contrato. */
.ficha .ficha-linea{list-style:none;margin:6px 0 0;padding:0}
.ficha .ficha-linea li{position:relative;display:flex;gap:12px;padding:0 0 14px 0}
.ficha .ficha-linea li:not(:last-child)::before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--acento),rgba(240,169,44,.2))}
.ficha .ficha-linea li:not(:last-child)::after{content:"";position:absolute;left:3px;bottom:2px;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(240,169,44,.45)}
.ficha .ficha-punto{width:16px;height:16px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  border:2px solid var(--acento);background:#0b1f3d}
.ficha .ficha-linea li.pasada .ficha-punto{background:var(--acento)}
.ficha .ficha-linea li.proxima .ficha-punto{background:var(--acento);box-shadow:0 0 0 4px rgba(240,169,44,.25)}
.ficha .ficha-linea li.futura .ficha-punto{border-style:dashed}
.ficha .ficha-linea-txt{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--text-on-dark)}
.ficha .ficha-linea-txt b{display:flex;align-items:center;gap:8px;font-weight:var(--fw-semibold)}
.ficha .ficha-linea-txt > span{font-size:12px;color:var(--text-on-dark-muted)}

/* Seguridad social: una fila por afiliación, con flecha desde → hasta. */
.ficha .ficha-afiliaciones{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ficha .ficha-afiliaciones li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:2px 12px;align-items:center;
  padding:10px 12px;border-radius:8px;background:var(--acento-fondo);border-left:3px solid var(--acento)}
.ficha .ficha-afiliaciones li.cerrada{background:rgba(139,164,176,.08);border-left-color:#5b7883;opacity:.85}
.ficha .ficha-afil-tipo{font-size:12px;color:var(--text-on-dark-muted);grid-row:span 2}
.ficha .ficha-afil-entidad{font-size:14px;color:var(--text-on-dark);font-weight:var(--fw-semibold)}
.ficha .ficha-afil-fechas{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-on-dark-muted)}
.ficha .ficha-afil-fechas .ficha-icono{width:14px;height:14px;color:var(--acento)}

/* Protegidos: violeta con borde punteado mientras están cerrados. */
.ficha .ficha-protegidos{--acento:#a99bf5;--acento-fondo:rgba(169,155,245,.15)}
.ficha .ficha-protegidos:not(.abiertos){border-style:dashed;border-top-style:solid}
.ficha .ficha-protegidos .boton-enlace{display:inline-flex;align-items:center;gap:8px}
.ficha .ficha-subgrupo{padding:12px 14px;border-radius:8px;background:rgba(6,21,48,.35);border:1px solid var(--border-dark)}
.ficha .ficha-subgrupo h4{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ficha .ficha-subgrupo h4 .ficha-icono{color:var(--acento)}
@media (max-width:480px){.ficha .ficha-afiliaciones li{grid-template-columns:70px minmax(0,1fr)}.ficha .ficha-cuerpo{padding:12px 14px 16px}.ficha .ficha-cabecera{padding:18px 16px 18px 20px}}

/* 9) SIN HUECOS ENTRE TARJETAS (JuanJo, 2026-09-17): las tarjetas de una misma fila se estiran
      hasta la altura de la más alta; el espacio sobrante queda DENTRO de la tarjeta. */
.ficha .ficha-rejilla{align-items:stretch}
.ficha .ficha-rejilla > .ficha-tarjeta{display:flex;flex-direction:column}
.ficha .ficha-rejilla > .ficha-tarjeta > .ficha-cuerpo{flex:1 1 auto}

/* 10) ENCABEZADO DE TABLAS DENTRO DE UN MARCO CON SCROLL LATERAL (visto por JuanJo, 2026-09-21).
      .ficha-tabla lleva overflow-x:auto para el celular; eso lo vuelve el contenedor del
      «sticky», y el top de 68/108 px (pensado para pegarse bajo la barra) se contaba DENTRO
      del marco: el título aparecía después de la primera fila. Ahí va en su sitio, quieto. */
.ficha-tabla .tabla thead th{position:static}


/* 11) MENÚ MÁS CORTO (JuanJo, 2026-09-21): botones un 30% más pequeños (40 → 28 px de alto,
      íconos de 20 → 16 px) y cada grupo se abre y se cierra con su título. «Mi equipo» del
      jefe va en su propio grupo. Cada navegador recuerda qué grupos dejó abiertos. */
.barra .menu.menu-lateral .menu-items{display:flex;flex-direction:column;gap:1px}
.barra .menu.menu-lateral .menu-items[hidden]{display:none}
.barra .menu.menu-lateral a,
.barra .menu.menu-lateral .menu-fijar{height:28px;gap:12px;padding:0 20px}
.barra .menu.menu-lateral .menu-icono{width:16px;height:16px;flex:0 0 16px}
.menu-lateral .menu-cuenta{left:28px;top:1px;min-width:15px;height:15px;line-height:15px;font-size:9.5px}
.barra .menu.menu-lateral .menu-grupo{display:flex;align-items:center;justify-content:space-between;
  width:100%;height:26px;margin:8px 0 0;padding:0 16px 0 22px;border:0;border-radius:0;background:transparent;
  font:inherit;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--cyan-200);cursor:pointer;box-shadow:none;transform:none;filter:none}
.barra .menu.menu-lateral .menu-grupo:hover,
.barra .menu.menu-lateral .menu-grupo:active{background:var(--surface-raised-dark);box-shadow:none;
  transform:none;filter:none}
.barra .menu.menu-lateral .menu-grupo:focus-visible{outline:2px solid var(--accent-rail);outline-offset:-2px}
.menu-flecha{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:transform .15s ease,opacity .12s ease}
.menu-grupo[aria-expanded="false"] .menu-flecha{transform:rotate(-90deg)}
/* La flecha aparece cuando el menú está abierto; cerrado, el título es una raya fina. */
@media (hover:hover){.menu-lateral:hover .menu-flecha{opacity:1}}
.menu-lateral:focus-within .menu-flecha,.menu-lateral.fijo .menu-flecha{opacity:1}
@media (max-width:780px){.menu-flecha{opacity:1}}
@media (prefers-reduced-motion:reduce){.menu-flecha{transition:none}}


/* =====================================================================================
   12) REDISEÑO B — estilo Apple sobre el azul marino profundo (JuanJo, 2026-09-21).
   Maqueta aprobada: https://claude.ai/artifact/TByD3aSvGrp7jSEuWoR1B9 (nivel 1).
   Reglas: UN solo color de acción (el celeste de la marca); verde, ámbar y rojo solo para
   estados; sin sombras, degradados ni «saltos» al pasar el mouse; las tarjetas se separan
   por el tono del fondo; botones, filtros e insignias en píldora; grosores 400 y 700; texto
   de 15 px. Va AL FINAL a propósito: gana sobre las capas anteriores sin tocarlas.
   Solo aplica dentro de la app (body:not(.centro)); el ingreso conserva su diseño.
   ===================================================================================== */
:root{
  --b-lienzo:#061530; --b-losa:#0b2146; --b-losa-alta:#10294f; --b-linea:rgba(255,255,255,.08);
  --b-texto:#f2f6fa; --b-texto-2:#a9bccd; --b-texto-3:#7d93a8;
  --b-acento:#4cc3ea; --b-acento-suave:rgba(76,195,234,.14); --b-sobre-acento:#04203a;
  --b-ok:#4fd49a; --b-ok-suave:rgba(79,212,154,.14);
  --b-aviso:#f3b54a; --b-aviso-suave:rgba(243,181,74,.14);
  --b-error:#ff7b72; --b-error-suave:rgba(255,123,114,.14);
  /* Letra más grande: el 25% más pequeño de WCL queda atrás. */
  --fs-body:15px; --fs-body-sm:14px; --fs-caption:13px; --fs-eyebrow:12px; --fs-micro:12px;
  /* Radios de una sola escala y píldoras para lo que es acción. */
  --radius-control:999px; --radius-pill:999px; --radius-chip:999px; --radius-input:10px;
  --radius-sm:10px; --radius-md:12px; --radius-card:18px; --radius-card-lg:20px;
  /* Sin degradados: los que usaban las tarjetas pasan a un color plano. */
  --grad-card-dark:var(--b-losa); --grad-card-deep:var(--b-losa);
  --lift-hover:none; --lift-card:none; --press-scale:none;
}
body:not(.centro){background:var(--b-lienzo);color:var(--b-texto)}
body:not(.centro) *,body:not(.centro) *::before,body:not(.centro) *::after{box-shadow:none !important;text-shadow:none !important}

/* Títulos: Archivo 700 con el espaciado apretado de los titulares grandes. */
body:not(.centro) h1,body:not(.centro) h2{font-weight:700;letter-spacing:-.02em;color:var(--b-texto)}
body:not(.centro) h3,body:not(.centro) h4{font-weight:700;color:var(--b-texto)}
body:not(.centro) .estado-sub{color:var(--b-texto-2);font-weight:400}
body:not(.centro) .nota{background:var(--b-losa);color:var(--b-texto-2);border-radius:var(--radius-md)}

/* Enlaces y botones: el celeste es la única acción. */
body:not(.centro) a,body:not(.centro) .mini-enlace{color:var(--b-acento)}
body:not(.centro) .mini-enlace{font-weight:700}
body:not(.centro) button,body:not(.centro) .boton-enlace{background:var(--b-acento);color:var(--b-sobre-acento);
  border:0;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:0;padding:9px 20px;
  transform:none;filter:none;transition:background .15s ease}
body:not(.centro) button:hover,body:not(.centro) .boton-enlace:hover{background:#6fd0f0;transform:none;filter:none}
body:not(.centro) button:active,body:not(.centro) .boton-enlace:active{background:#3aa9cf;transform:none;filter:none}
body:not(.centro) button.mini-enlace{background:none;color:var(--b-acento);padding:0;border-radius:0;font-size:inherit}
body:not(.centro) .novedad-botones button{width:auto}

/* Campos: fondo un tono arriba de la tarjeta, sin borde grueso; el buscador en píldora. */
body:not(.centro) input,body:not(.centro) select,body:not(.centro) textarea{background:var(--b-losa-alta);
  color:var(--b-texto);border:1px solid var(--b-linea);border-radius:10px}
body:not(.centro) input:focus,body:not(.centro) select:focus,body:not(.centro) textarea:focus{
  outline:2px solid var(--b-acento);outline-offset:0;border-color:transparent}
body:not(.centro) input[type="search"]{border-radius:999px;padding-inline:16px}
body:not(.centro) input[type="file"]{border:1px dashed var(--b-linea);background:var(--b-losa-alta)}

/* Mensajes: la tinta del estado sobre un fondo apenas teñido. */
body:not(.centro) .mensaje{border:0;border-radius:var(--radius-md)}
body:not(.centro) .mensaje.ok{background:var(--b-ok-suave);color:var(--b-ok)}
body:not(.centro) .mensaje.aviso{background:var(--b-aviso-suave);color:var(--b-aviso)}
body:not(.centro) .mensaje.error{background:var(--b-error-suave);color:var(--b-error)}

/* Insignias: píldoras; el color queda SOLO para estados. */
body:not(.centro) .badge{border-radius:999px;padding:3px 11px;font-weight:700;font-size:12.5px;
  background:var(--b-losa-alta);color:var(--b-texto-2)}
body:not(.centro) .badge.verde,body:not(.centro) .badge.mint{background:var(--b-ok-suave);color:var(--b-ok)}
body:not(.centro) .badge.amarillo,body:not(.centro) .badge.naranja{background:var(--b-aviso-suave);color:var(--b-aviso)}
body:not(.centro) .badge.rojo{background:var(--b-error-suave);color:var(--b-error)}
body:not(.centro) .badge.azul,body:not(.centro) .badge.gris{background:var(--b-losa-alta);color:var(--b-texto-2)}

/* Tarjetas: color plano, sin borde de color ni sombra ni «salto». */
body:not(.centro) .tarjeta,body:not(.centro) .tarjeta-novedad,body:not(.centro) .chip,
body:not(.centro) .modal-caja{background:var(--b-losa);border:0;border-radius:var(--radius-card)}
body:not(.centro) .tarjeta-novedad:hover,body:not(.centro) .tarjeta:hover,body:not(.centro) .chip:hover{transform:none}
body:not(.centro) .chip-num{font-weight:700}

/* Tablas: encabezado discreto sobre la tarjeta, líneas finas de 1 px. */
body:not(.centro) .tabla{background:var(--b-losa);border:0;border-radius:var(--radius-card)}
/* El encabezado va PEGADO arriba (sticky): necesita fondo sólido, o las filas se ven por
   debajo al desplazar (JuanJo, 2026-09-23). */
body:not(.centro) .tabla th{background:var(--b-losa-alta);color:var(--b-texto-2);font-weight:700;font-size:12px;
  letter-spacing:.04em;border-bottom:1px solid var(--b-linea);box-shadow:0 1px 0 var(--b-linea)}
body:not(.centro) .tabla td{border-bottom:1px solid var(--b-linea);color:var(--b-texto)}
body:not(.centro) .tabla tbody tr:hover td{background:rgba(255,255,255,.03)}
body:not(.centro) .tabla tr.grupo-inicio td,body:not(.centro) .tabla tfoot .fila-total td{border-top:1px solid var(--b-linea)}

/* Menú lateral: la sección activa en el celeste suave, sin riel de color. */
body:not(.centro) .barra .menu.menu-lateral{background:var(--b-lienzo);border-right:1px solid var(--b-linea)}
body:not(.centro) .barra .menu.menu-lateral a{border-left:0;border-radius:10px;margin:0 8px;padding:0 12px;color:var(--b-texto-2)}
body:not(.centro) .barra .menu.menu-lateral a:hover{background:var(--b-losa);color:var(--b-texto)}
body:not(.centro) .barra .menu.menu-lateral a.activo{background:var(--b-acento-suave);color:var(--b-acento)}
body:not(.centro) .barra .menu.menu-lateral .menu-grupo{color:var(--b-texto-3);background:transparent}
body:not(.centro) .barra .menu.menu-lateral .menu-grupo:hover{background:transparent;color:var(--b-texto-2)}
body:not(.centro) .barra .menu.menu-lateral .menu-fijar{background:transparent;color:var(--b-texto-3);
  border-radius:10px;margin:0 8px;padding:0 12px;width:auto;font-weight:400}
body:not(.centro) .menu-lateral .menu-cuenta{background:var(--b-aviso);color:#241600}
body:not(.centro) .barra{border-bottom:1px solid var(--b-linea)}

/* Ficha y pantallas nuevas: todo en el mismo tono; sin franjas, viñetas ni cuadros de color. */
body:not(.centro) .ficha,body:not(.centro) .ficha [class*="ficha-"]{--acento:var(--b-acento);
  --acento-fondo:transparent}
body:not(.centro) .ficha .ficha-cabecera{background:var(--b-losa);border:0}
body:not(.centro) .ficha .ficha-cabecera::before,body:not(.centro) .ficha .ficha-cabecera::after{display:none}
body:not(.centro) .ficha .ficha-avatar{background:var(--b-losa-alta);color:var(--b-acento)}
body:not(.centro) .ficha .ficha-eyebrow{color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-sub{color:var(--b-texto-2)}
body:not(.centro) .ficha .ficha-cifra{background:var(--b-losa);border:0}
body:not(.centro) .ficha .ficha-cifra::after{display:none}
body:not(.centro) .ficha .ficha-cifra-txt{color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-cifra-num{font-weight:700;color:var(--b-texto)}
body:not(.centro) .ficha .ficha-cuadro{background:transparent;border:0;width:auto;height:auto;color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-tarjeta{border-top:0}
body:not(.centro) .ficha .ficha-titulo{background:transparent;border-bottom:0;padding:18px 20px 0}
body:not(.centro) .ficha .ficha-tarjeta .ficha-titulo h3{font-size:17px}
body:not(.centro) .ficha .ficha-cuerpo{padding:12px 20px 20px}
body:not(.centro) .ficha .ficha-datos dt{color:var(--b-texto-3);font-size:13px}
body:not(.centro) .ficha .ficha-datos dt::before{display:none}
body:not(.centro) .ficha .ficha-datos dd{padding-left:0;font-size:15px;color:var(--b-texto)}
body:not(.centro) .ficha .ficha-faltan{background:transparent;border:0;border-top:1px solid var(--b-linea);
  border-radius:0;padding:12px 0 0;color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-faltan .ficha-icono{color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-linea li:not(:last-child)::before{background:var(--b-linea)}
body:not(.centro) .ficha .ficha-linea li:not(:last-child)::after{display:none}
body:not(.centro) .ficha .ficha-punto{width:11px;height:11px;margin-top:5px;border:0;background:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-linea li:not(:last-child)::before{left:5px;top:18px}
body:not(.centro) .ficha .ficha-linea li.proxima .ficha-punto{background:var(--b-acento)}
body:not(.centro) .ficha .ficha-linea li.futura .ficha-punto{background:transparent;border:1px solid var(--b-texto-3)}
body:not(.centro) .ficha .ficha-afiliaciones li{background:var(--b-losa-alta);border-left:0;border-radius:12px}
body:not(.centro) .ficha .ficha-afiliaciones li.cerrada{background:transparent;opacity:1;color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-afil-fechas .ficha-icono{color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-subgrupo{background:var(--b-losa-alta);border:0}
body:not(.centro) .ficha .ficha-subgrupo h4 .ficha-icono{color:var(--b-texto-3)}
body:not(.centro) .ficha .ficha-protegidos:not(.abiertos){border:1px dashed var(--b-linea)}
body:not(.centro) .ficha .ficha-accion .ficha-icono{transform:none}
body:not(.centro) .ficha .ficha-tabla .tabla{background:transparent}
body:not(.centro) .ficha-tabla{margin-bottom:16px}

/* =====================================================================================
   13) JORNADA — marcar con el QR, mis turnos y la grilla del jefe (2026-09-21).
   ===================================================================================== */
.ficha.marcar{max-width:480px;margin-inline:auto}
.marcar .ficha-cuerpo{display:grid;gap:12px;text-align:center}
.marcar-boton{width:100%;min-height:72px;font-size:22px;font-weight:700;border-radius:18px;
  background:var(--b-ok,#4fd49a);color:var(--b-sobre-acento,#04203a);border:0;cursor:pointer}
.marcar-boton.salida{background:var(--b-acento,#4cc3ea)}
.marcar-boton:focus-visible{outline:3px solid var(--b-texto,#fff);outline-offset:3px}
.marcar-icono{font-size:56px;line-height:1;margin:8px 0 0;color:var(--b-ok,#4fd49a)}
.marcar-hora{font-size:40px;font-weight:700;margin:0;font-variant-numeric:tabular-nums}
.marcar-hecho h2{margin:0}
.turnos-semana{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.turno-dia{display:grid;gap:2px;padding:10px 12px;border-radius:12px;
  background:var(--b-acento-suave,rgba(76,195,234,.14))}
.turno-dia.descanso{background:transparent;border:1px dashed var(--b-linea,rgba(255,255,255,.15))}
.turno-fecha{font-size:12px;color:var(--b-texto-3,#7d93a8);text-transform:uppercase;letter-spacing:.04em}
.turno-nombre{font-weight:600}
.semana-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.semana-nav .boton-enlace{margin-top:0}
.ficha .grilla-turnos select{width:auto;min-width:92px;padding:4px 6px}
.sede-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0;
  border-top:1px solid var(--b-linea,rgba(255,255,255,.08))}
.sede-fila strong{flex:1 1 160px}
.sede-fila .boton-enlace{margin-top:0}
.sede-fila form{margin:0}
.horario-forma{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.ficha .horario-forma select{width:auto;padding:4px 6px}
.ficha .horario-forma button{margin:0}
.ficha-tabla td .badge{margin:1px 4px 1px 0}
.grilla-turnos td:first-child{min-width:150px}
body:not(.centro) .marcar button.marcar-boton{width:100%;min-height:76px;font-size:22px;font-weight:700;
  border-radius:20px;background:var(--b-ok);color:var(--b-sobre-acento)}
body:not(.centro) .marcar button.marcar-boton:hover{background:#6fe0ae}
body:not(.centro) .marcar button.marcar-boton.salida{background:var(--b-acento)}
body:not(.centro) .marcar button.marcar-boton.salida:hover{background:#6fd0f0}
/* Ajustes de Jornada (JuanJo, 2026-09-21): la rejilla de tarjetas deja su espacio abajo (la
   tarjeta siguiente se veía montada) y los botones de sedes y horarios quedan en línea. */
.ficha .ficha-rejilla{margin-bottom:16px}
body:not(.centro) .ficha .sede-fila button,body:not(.centro) .ficha .sede-fila .boton-enlace{margin:0;width:auto}
body:not(.centro) .ficha .horario-forma button{margin:0;width:auto}
.ficha .horario-forma{flex-wrap:nowrap}
.ficha .subtitulo-tarjeta{margin:18px 0 8px;font-size:14px;color:var(--b-texto-2,#a9bccd);font-weight:600}
.ficha .lista-simple{margin:0;padding-left:18px;display:grid;gap:6px}
.ficha .sede-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
body:not(.centro) .ficha .filtro-fecha .boton-enlace,body:not(.centro) .ficha .sede-acciones .boton-enlace{margin:0}
.ficha .tabla-recargos th{white-space:normal;min-width:84px;font-size:11px;line-height:1.25}
.ficha .tabla-recargos td{font-variant-numeric:tabular-nums}
.ficha .tabla-recargos .fila-total td{font-weight:700;border-top:2px solid var(--b-linea,rgba(255,255,255,.15))}
.ficha .tabla-recargos td:first-child{min-width:170px}
.ficha .horario-edicion input{width:auto;min-width:96px;padding:4px 6px}
.ficha .horario-detalle{margin-top:10px}
.ficha .horario-detalle summary{cursor:pointer;color:var(--b-acento,#4cc3ea)}
.ficha .casilla{display:flex;gap:8px;align-items:center}
.ficha .casilla input{width:auto}
.ficha .tabla-horarios td,.ficha .tabla-horarios th{white-space:nowrap}

/* =====================================================================================
   14) MÁS COLOR (JuanJo, 2026-09-21, con WCL como guía): menú un 25% más pequeño y en una
   barra de otro color, títulos del menú en verde agua, íconos de colores por tema, y color
   en títulos de página, tarjetas y cifras para salir del azul de siempre.
   ===================================================================================== */
:root{
  --c-agua:#2ec4b6; --c-agua-suave:rgba(46,196,182,.14);
  --c-celeste:#4cc3ea; --c-verde:#4fd49a; --c-ambar:#f3b54a; --c-coral:#ff8a80;
  --c-rosa:#f47fb6; --c-violeta:#a78bfa; --c-naranja:#fb923c; --c-amarillo:#facc15; --c-lavanda:#93a4ff;
  --menu-fondo:#0b2a38; --lateral-abierto:190px;
}
/* La barra del menú, en azul petróleo: se distingue del fondo. */
body:not(.centro) .barra .menu.menu-lateral{background:var(--menu-fondo);border-right:1px solid rgba(46,196,182,.18)}
/* 25% más pequeño: 28 → 21 px de alto, íconos 16 → 12 px, letra más chica. */
body:not(.centro) .barra .menu.menu-lateral a,
body:not(.centro) .barra .menu.menu-lateral .menu-fijar{height:21px;gap:9px;padding:0 10px;margin:0 6px;font-size:12px}
body:not(.centro) .barra .menu.menu-lateral .menu-icono{width:12px;height:12px;flex:0 0 12px;stroke-width:2}
body:not(.centro) .barra .menu.menu-lateral .menu-grupo{height:20px;margin-top:6px;padding:0 12px 0 16px;
  font-size:10px;color:var(--c-agua)}
body:not(.centro) .barra .menu.menu-lateral .menu-grupo:hover{color:#5fe0d3}
body:not(.centro) .menu-lateral .menu-cuenta{left:18px;top:0;min-width:13px;height:13px;line-height:13px;font-size:8.5px}
/* El que está abierto: fondo verde agua suave y texto claro. */
body:not(.centro) .barra .menu.menu-lateral a.activo{background:var(--c-agua-suave);color:#e9fbf9;
  box-shadow:inset 3px 0 0 var(--c-agua) !important}
/* Íconos de colores: el mismo color para el mismo tema en todo el menú. */
.menu-lateral use[href="#mi-hoja"],.menu-lateral use[href="#mi-personas"],.menu-lateral use[href="#mi-equipo"]{color:var(--c-celeste)}
.menu-lateral use[href="#mi-certificado"],.menu-lateral use[href="#mi-desprendible"]{color:var(--c-violeta)}
.menu-lateral use[href="#mi-variable"]{color:var(--c-verde)}
.menu-lateral use[href="#mi-vacaciones"]{color:var(--c-ambar)}
.menu-lateral use[href="#mi-ausencias"]{color:var(--c-coral)}
.menu-lateral use[href="#mi-reloj"]{color:var(--c-agua)}
.menu-lateral use[href="#mi-disciplinario"]{color:var(--c-rosa)}
.menu-lateral use[href="#mi-activos"]{color:var(--c-naranja)}
.menu-lateral use[href="#mi-avisos"]{color:var(--c-amarillo)}
.menu-lateral use[href="#mi-usuarios"],.menu-lateral use[href="#mi-auditoria"],
.menu-lateral use[href="#mi-configuracion"]{color:var(--c-lavanda)}
/* Título de cada página con una rayita verde agua → celeste. */
body:not(.centro) main.contenido > h2::after{content:"";display:block;width:46px;height:3px;margin-top:8px;
  border-radius:2px;background:linear-gradient(90deg,var(--c-agua),var(--c-celeste))}
/* Tarjetas con una línea de color arriba. */
body:not(.centro) .ficha .ficha-tarjeta{border-top:2px solid var(--c-agua)}
/* Las cifras de arriba, cada una con su color. */
body:not(.centro) .ficha .ficha-cifras .ficha-cifra{border-left:3px solid var(--c-agua)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+1) .ficha-cifra-num{color:var(--c-agua)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+2){border-left-color:var(--c-ambar)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+2) .ficha-cifra-num{color:var(--c-ambar)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+3){border-left-color:var(--c-rosa)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+3) .ficha-cifra-num{color:var(--c-rosa)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+4){border-left-color:var(--c-violeta)}
body:not(.centro) .ficha .ficha-cifras .ficha-cifra:nth-child(4n+4) .ficha-cifra-num{color:var(--c-violeta)}
/* Ajuste (JuanJo, 2026-09-21): la barra del menú en un azul más oscuro de la misma familia del
   fondo (el verde agua no gustó), y nombre, perfil y «Salir» alineados al centro, en una línea. */
:root{--menu-fondo:#030d1f}
body:not(.centro) .barra .menu.menu-lateral{background:var(--menu-fondo);border-right:1px solid rgba(76,195,234,.14)}
body:has(.menu-lateral) .barra{align-items:center}
body:has(.menu-lateral) .barra .marca-app{align-items:center;gap:10px}
body:has(.menu-lateral) .barra .marca-usuario{font-size:14px;font-weight:700;line-height:1.2}
body:has(.menu-lateral) .barra .marca-rol{font-size:11px;line-height:1.2;padding:4px 10px;border-radius:999px;
  background:var(--b-acento-suave);color:var(--b-acento);font-weight:600}
body:has(.menu-lateral) .barra .salir{font-size:13px;line-height:1.2;padding:5px 14px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;color:var(--b-texto)}
body:has(.menu-lateral) .barra .salir:hover{background:var(--b-losa)}

/* =====================================================================================
   15) FIRMAS (2026-09-21): lista de documentos por firmar y barra de avance.
   ===================================================================================== */
.menu-lateral use[href="#mi-firma"]{color:#5eead4}
.ficha .documentos-lista{display:grid;gap:8px}
.ficha .documento-fila{display:grid;grid-template-columns:1fr auto;grid-template-areas:"tipo estado" "titulo estado" "sub estado";
  gap:2px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--b-losa-alta,#10294f);
  color:var(--b-texto,#f2f6fa);text-decoration:none;border:1px solid transparent}
.ficha .documento-fila:hover,.ficha .documento-fila:focus-visible{border-color:var(--c-agua,#2ec4b6)}
.ficha .documento-fila .documento-tipo{grid-area:tipo;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-agua,#2ec4b6)}
.ficha .documento-fila strong{grid-area:titulo}
.ficha .documento-fila .estado-sub{grid-area:sub}
.ficha .documento-fila .badge{grid-area:estado}
.ficha .avance{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--b-linea,rgba(255,255,255,.1));
  vertical-align:middle;overflow:hidden;margin-right:6px}
.ficha .avance span{display:block;height:100%;background:var(--c-verde,#4fd49a)}
.ficha.documento-firma{max-width:760px}
.ficha code{font-size:11px;word-break:break-all}
body:not(.centro) .ficha div.sede-acciones{margin-bottom:16px}
body:not(.centro) .ficha .sede-acciones form{margin:0}
body:not(.centro) .ficha .sede-acciones button{width:auto;margin:0}

/* =====================================================================================
   16) CONVIVENCIA (2026-09-22): páginas públicas del canal, historia del caso y cifras.
   ===================================================================================== */
.menu-lateral use[href="#mi-convivencia"]{color:#f9a8d4}
.centro .tarjeta.ancha{max-width:640px;width:100%}
.centro .convivencia textarea{width:100%;font:inherit;padding:10px;border-radius:10px;box-sizing:border-box}
.centro .convivencia .nota-suave{font-size:14px;line-height:1.6;opacity:.9}
.centro .convivencia .casilla{display:flex;gap:8px;align-items:center;margin-top:12px}
.centro .convivencia .casilla input{width:auto}
.codigo-caja{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.codigo-caja div{padding:14px;border-radius:12px;border:2px dashed currentColor;text-align:center}
.codigo-caja span{display:block;font-size:12px;opacity:.75}
.codigo-caja strong{font-size:22px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.historia{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.historia li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.12)}
.historia .historia-cuando{font-size:12px;opacity:.7}
.historia .historia-al_reportante{border-left:3px solid #4fd49a}
.historia .historia-del_reportante{border-left:3px solid #f3b54a}
.historia .historia-nota{border-left:3px solid #a78bfa}
.subtitulo-caja{font-size:16px;margin:18px 0 8px}
.ficha .texto-largo{white-space:pre-wrap;line-height:1.6}
.ficha .en-linea{display:inline;margin:0}
.ficha .qr-cartelera{width:180px;max-width:100%;background:#fff;border-radius:12px;padding:6px}
.ficha .barras-mes{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:160px}
.ficha .barra-mes{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.ficha .barra-mes-col{width:100%;max-width:28px;min-height:2px;border-radius:6px 6px 0 0;background:var(--c-rosa,#f47fb6)}
.ficha .barra-mes-n{font-size:11px;font-variant-numeric:tabular-nums}
.ficha .barra-mes-txt{font-size:10px;opacity:.7}
/* Las páginas públicas largas del canal: el pie va debajo del formulario, no encima. */
.centro:has(.tarjeta.convivencia){flex-direction:column;padding-block:28px}
.centro:has(.tarjeta.convivencia) .pie{position:static;margin-top:14px}
.ficha .novedad-forma textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px;font:inherit;padding:10px;border-radius:10px}
.ficha .tabla-sst td:first-child,.ficha .tabla-sst th:first-child{white-space:nowrap}

/* =====================================================================================
   17) TEMA CLARO CON INTERRUPTOR (JuanJo, 2026-09-22, guía: Cloxia). El menú y la barra de
   arriba siguen oscuros; el contenido pasa a fondo claro con tarjetas blancas. Se cambia con
   el botón de la barra y cada navegador recuerda la elección (data-tema en <html>).
   ===================================================================================== */
html[data-tema="claro"] body:not(.centro){color-scheme:light;
  /* Superficies y textos del rediseño B, en claro */
  --b-lienzo:#f4f7fc; --b-losa:#ffffff; --b-losa-alta:#eef3fa; --b-linea:rgba(15,36,64,.10);
  --b-texto:#0f2440; --b-texto-2:#425d7a; --b-texto-3:#6b819a;
  --b-acento:#1668c9; --b-acento-suave:rgba(22,104,201,.10); --b-sobre-acento:#ffffff;
  --b-ok:#128a5c; --b-ok-suave:rgba(18,138,92,.12);
  --b-aviso:#a86a0a; --b-aviso-suave:rgba(168,106,10,.12);
  --b-error:#c23b37; --b-error-suave:rgba(194,59,55,.12);
  /* Alias del sistema que usan las pantallas viejas */
  --bg-page:#f4f7fc; --text-on-dark:#0f2440; --text-on-dark-body:#31455c; --text-on-dark-muted:#6b819a;
  --surface-card-dark:#ffffff; --surface-raised-dark:#eef3fa; --surface-inset-dark:#ffffff;
  --border-dark:rgba(15,36,64,.12); --border-dark-strong:rgba(15,36,64,.16);
  --grad-card-dark:#ffffff; --grad-card-deep:#ffffff;
  --cabecera-tabla:#eef3fa; --cabecera-tabla-texto:#0f2440;
  --grey:#6b819a; --tinta:#31455c; --borde:rgba(15,36,64,.12);
  background:var(--b-lienzo); color:var(--b-texto-2)}
/* Las tarjetas en claro sí llevan sombra suave: es lo que las separa del fondo. */
html[data-tema] body:not(.centro) .tarjeta,
html[data-tema] body:not(.centro) .tarjeta-novedad,
html[data-tema] body:not(.centro) .ficha .ficha-tarjeta,
html[data-tema] body:not(.centro) .ficha .ficha-cifra{
  box-shadow:var(--pf-sombra) !important;
  border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .ficha .ficha-tarjeta{border-top:2px solid var(--c-agua)}
html[data-tema] body:not(.centro) .tabla{background:var(--pf-carta)}
html[data-tema] body:not(.centro) .tabla th{background:var(--cabecera-tabla);color:var(--b-texto)}
html[data-tema] body:not(.centro) input,
html[data-tema] body:not(.centro) select,
html[data-tema] body:not(.centro) textarea{background:var(--pf-carta);color:var(--b-texto);
  border:1px solid var(--pf-linea-2)}
html[data-tema] body:not(.centro) .estado-sub,
html[data-tema] body:not(.centro) .nota{color:var(--b-texto-3)}
html[data-tema] body:not(.centro) .historia li{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .documento-fila{background:var(--pf-carta);border-color:var(--pf-linea)}
html[data-tema] body:not(.centro) .turno-dia{background:var(--b-acento-suave)}
/* El botón del tema, en la barra de arriba. */
.tema-boton{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--text-on-dark);
  font:inherit;font-size:13px;line-height:1.2;cursor:pointer}
.tema-boton:hover{background:rgba(255,255,255,.10)}
.tema-boton .tema-icono{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* La barra de arriba y el menú NO se aclaran: el logo y el nombre viven sobre el azul marino. */
html[data-tema="claro"] body:not(.centro) .barra{background:#071a35;color:#f2f6fa}
html[data-tema="claro"] body:not(.centro) .barra .marca-usuario,
html[data-tema="claro"] body:not(.centro) .barra .marca-app,
html[data-tema="claro"] body:not(.centro) .barra .salir,
html[data-tema="claro"] body:not(.centro) .barra .tema-boton,
html[data-tema="claro"] body:not(.centro) .barra .marca-nombre,
html[data-tema="claro"] body:not(.centro) .barra .marca-eslogan{color:#f2f6fa}
html[data-tema="claro"] body:not(.centro) .barra .marca-rol{background:rgba(76,195,234,.18);color:#bfe9f8}
body:not(.centro) .barra .tema-boton{width:auto;margin:0;background:transparent;font-weight:600;
  color:var(--b-texto)}
body:not(.centro) .barra .tema-boton:hover{background:rgba(255,255,255,.12)}

/* =====================================================================================
   18) DETALLES DE LA GUÍA (Cloxia, 2026-09-22): punto de color antes del título de cada
   tarjeta y una línea de explicación bajo las cifras, para que el número se entienda solo.
   ===================================================================================== */
body:not(.centro) .ficha .ficha-titulo h3{display:flex;align-items:center;gap:9px}
body:not(.centro) .ficha .ficha-titulo h3::before{content:"";width:9px;height:9px;border-radius:3px;
  background:var(--c-agua,#2ec4b6);flex:0 0 9px}
body:not(.centro) .ficha .ficha-cifra-nota{display:block;margin-top:6px;padding:7px 9px;border-radius:9px;
  background:var(--b-acento-suave);color:var(--b-texto-2);font-size:12px;line-height:1.45}
html[data-tema] body:not(.centro) .ficha .ficha-cifra-nota{background:var(--pf-hover)}
/* Tablero y organigrama (punto 7, 2026-09-23). */
.ficha .lista-pendientes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ficha .lista-pendientes a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:10px;background:var(--b-losa-alta);color:inherit;text-decoration:none}
.ficha .lista-pendientes a:hover{background:var(--b-acento-suave)}
html[data-tema] body:not(.centro) .ficha .lista-pendientes a{background:var(--pf-hover)}

/* =====================================================================================
   19) AJUSTES (JuanJo, 2026-09-23): el número de avisos va a la DERECHA del botón cuando el
   menú está abierto (antes se montaba sobre el ícono), y las tablas se ordenan al pulsar el
   encabezado.
   ===================================================================================== */
body:not(.centro) .menu-lateral.fijo .menu-cuenta,
body:not(.centro) .menu-lateral:hover .menu-cuenta{position:static;left:auto;top:auto;margin-left:auto;
  min-width:17px;height:16px;line-height:16px;font-size:10px;padding:0 6px}
.ficha .tabla th[data-ordenable]{cursor:pointer;user-select:none;white-space:nowrap}
.ficha .tabla th[data-ordenable]::after{content:"↕";opacity:.35;margin-left:6px;font-size:10px}
.ficha .tabla th[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--c-agua)}
.ficha .tabla th[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--c-agua)}

/* 20. EDITAR DATOS DE UNA PERSONA (JuanJo, 2026-09-23) ------------------------------- */
/* Los dos botones del encabezado de la ficha (Editar datos y Certificado) van juntos y
   se apilan solos en el celular. */
.ficha .ficha-acciones{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}

/* 21. CAJAS DE TEXTO Y ADJUNTOS (JuanJo, 2026-09-23) ---------------------------------- */
/* Las cajas de texto largo (retroalimentación, compromisos, mensajes) van a todo el ancho,
   con la letra de la app y una altura cómoda; se pueden estirar hacia abajo. */
body:not(.centro) textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;
  font:inherit;font-size:15px;line-height:1.5;padding:10px 12px;min-height:110px;resize:vertical}
/* La imagen adjunta de un comunicado se ve dentro del mensaje. */
.comunicado-imagen{display:block;max-width:100%;max-height:70vh;height:auto;margin:14px 0 6px;
  border-radius:12px;border:1px solid var(--b-linea)}

/* 22. CAMPANA DE PENDIENTES (JuanJo, 2026-09-23) ------------------------------------- */
/* En el encabezado: gris cuando no hay nada; ámbar y con número cuando hay pendientes. Al
   abrirla muestra la lista con un enlace a cada cosa. */
.campana{position:relative;display:inline-block}
.campana>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
  position:relative;width:34px;height:34px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);color:var(--b-texto-3,#9fb0c4)}
.campana>summary::-webkit-details-marker{display:none}
.campana>summary:hover{background:rgba(255,255,255,.10)}
.campana>summary:focus-visible{outline:2px solid var(--b-acento,#4cc3ea);outline-offset:2px}
.campana-icono{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.campana.activa>summary{color:#ffd166;border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.10)}
.campana.activa .campana-icono{animation:campana-toque 1.6s ease 1}
.campana-cuenta{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#ffd166;color:#241600;font-size:11px;font-weight:700;line-height:18px;
  text-align:center;box-sizing:border-box}
.campana-lista{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:270px;max-width:86vw;
  padding:10px;border-radius:14px;background:var(--b-losa-alta,#0f2748);border:1px solid var(--b-linea,#24406a);
  box-shadow:0 14px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:4px}
.campana-titulo{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--b-texto-3,#9fb0c4)}
.campana-lista a{display:block;padding:8px 10px;border-radius:10px;color:var(--b-texto,#e8eef6);
  text-decoration:none;font-size:14px;line-height:1.35;white-space:normal}
.campana-lista a:hover{background:rgba(255,255,255,.07)}
.campana-lista a b{color:#ffd166;margin-right:4px}
.campana-vacia{margin:4px 10px 6px;font-size:14px;color:var(--b-texto-3,#9fb0c4)}
html[data-tema] body:not(.centro) .campana-lista{background:var(--pf-carta);border-color:var(--pf-linea)}
html[data-tema] body:not(.centro) .campana-lista a{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .campana-lista a b{color:var(--pf-ambar)}
@keyframes campana-toque{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}
  45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.campana.activa .campana-icono{animation:none}}
/* El título de un grupo del menú muestra la suma de su grupo cuando está CERRADO. */
.menu-grupo-cuenta{display:none;margin-left:auto;margin-right:6px;min-width:17px;height:16px;padding:0 6px;
  border-radius:999px;background:#ffd166;color:#241600;font-size:10px;font-weight:700;line-height:16px;
  letter-spacing:0;text-align:center;box-sizing:border-box}
.menu-grupo[aria-expanded="false"] .menu-grupo-cuenta{display:inline-block}
.barra .campana .campana-lista a{color:var(--b-texto,#e8eef6)}
html[data-tema] body:not(.centro) .barra .campana .campana-lista a{color:var(--pf-titulo)}
/* En el celular la campana queda a mitad de la barra: la lista ocupa todo el ancho. */
@media (max-width:700px){
  .campana-lista{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-width:none;margin-top:8px}
}

/* 23. MARCAR EL ALMUERZO (JuanJo, 2026-09-24): la otra opción válida, debajo del botón grande. */
body:not(.centro) .marcar .marcar-otra{display:block;width:100%;margin-top:12px;min-height:48px;border-radius:14px;
  background:transparent;border:1px solid var(--b-linea,#24406a);color:var(--b-texto,#e8eef6);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:none}
body:not(.centro) .marcar .marcar-otra:hover{background:rgba(255,255,255,.06)}
body:not(.centro) .marcar .marcar-otra:focus-visible{outline:3px solid var(--b-texto,#fff);outline-offset:3px}

/* =====================================================================================
   24) REDISEÑO CLARO (JuanJo, 2026-09-24, con sus maquetas «Mis horas», «Mi hoja de vida»,
   «Mi equipo», «Desempeño del equipo», «Vacaciones del equipo» y «Usuarios»). La app es SOLO
   clara. Menú lateral blanco con la marca arriba; encabezado blanco con la ruta, el buscador,
   la campana y la cuenta; tarjetas blancas con sombra suave; un solo azul de acción; verde,
   ámbar y rojo solo para estados; en el celular, barra inferior. Todas las reglas llevan el
   prefijo html[data-tema] body:not(.centro): así ganan a las capas anteriores sin tocarlas.
   ===================================================================================== */
html[data-tema] body:not(.centro){
  --pf-fondo:#f2f6fc; --pf-carta:#ffffff; --pf-linea:#e2eaf4; --pf-linea-2:#d3deec; --pf-hover:#f5f8fd;
  --pf-titulo:#0c1c3a; --pf-texto:#33465e; --pf-suave:#66788f;
  --pf-azul:#1d64f2; --pf-azul-2:#1552d1; --pf-azul-suave:#e9f1fe;
  --pf-verde:#15834f; --pf-verde-suave:#e4f5ec; --pf-ambar:#b06400; --pf-ambar-suave:#fff2da;
  --pf-rojo:#c4342b; --pf-rojo-suave:#fde9e8; --pf-violeta:#6d44d8; --pf-violeta-suave:#f0eafd;
  --pf-sombra:0 1px 2px rgba(16,40,80,.04),0 6px 18px rgba(16,40,80,.06);
  /* Colores con nombre (2026-09-27): el tema oscuro los redefine abajo. */
  --pf-cabecera:#f6f9fd; --pf-linea-suave:#edf2f8; --pf-chip:#eef2f7; --pf-chip-texto:#50627a;
  --pf-azul-borde:#cfdffb; --pf-rojo-borde:#f0c2be; --pf-placeholder:#8a9ab0; --pf-info:#eaf2fe;
  --pf-verde-texto:#0f5f39; --pf-verde-borde:#c5ead6; --pf-rojo-texto:#8f231c;
  --pf-ambar-texto:#7a4600; --pf-ambar-borde:#f6dfb1; --pf-azul-texto:#23457d;
  --pf-marca:#0e2f6e; --pf-menu-texto:#3b4c66; --pf-pista:#e6edf7; --pf-apagado:#f3f6fa; --pf-suave-2:#9aa9bc;
  --pf-radio:16px; --pf-lateral:264px; --pf-lateral-cerrado:76px;
  --pf-letra:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Las capas anteriores leen estos tokens: con esto toda la app toma la paleta nueva. */
  --b-lienzo:var(--pf-fondo); --b-losa:var(--pf-carta); --b-losa-alta:var(--pf-cabecera); --b-linea:var(--pf-linea);
  --b-texto:var(--pf-titulo); --b-texto-2:var(--pf-texto); --b-texto-3:var(--pf-suave);
  --b-acento:var(--pf-azul); --b-acento-suave:var(--pf-azul-suave); --b-sobre-acento:#fff;
  --b-ok:var(--pf-verde); --b-ok-suave:var(--pf-verde-suave);
  --b-aviso:var(--pf-ambar); --b-aviso-suave:var(--pf-ambar-suave);
  --b-error:var(--pf-rojo); --b-error-suave:var(--pf-rojo-suave);
  --c-agua:var(--pf-azul); --c-agua-suave:var(--pf-azul-suave);
  --cabecera-tabla:var(--pf-cabecera); --cabecera-tabla-texto:var(--pf-suave);
  --font-text:var(--pf-letra); --font-display:var(--pf-letra);
  font-family:var(--pf-letra); background:var(--pf-fondo); color:var(--pf-texto);
  -webkit-font-smoothing:antialiased;
}
/* ---------- TEMA OSCURO (JuanJo, 2026-09-27, con sus maquetas «Usuarios» y «Mi hoja de vida»).
   Es el tema por omisión; el claro sigue a un clic en el menú de la cuenta. Solo cambian los
   colores: la diagramación es la misma. Fondo azul noche, tarjetas un tono más claro, un azul
   brillante para las acciones y estados en verde, ámbar y rojo suaves. ---------- */
html[data-tema="oscuro"] body:not(.centro){color-scheme:dark;
  --pf-fondo:#081528; --pf-carta:#0e1e38; --pf-linea:#1c3052; --pf-linea-2:#29426a; --pf-hover:#13284a;
  --pf-titulo:#f2f6fc; --pf-texto:#c4d0e2; --pf-suave:#8b9dba;
  --pf-azul:#2a74ff; --pf-azul-2:#4b8bff; --pf-azul-suave:#15315f;
  --pf-verde:#3fd49a; --pf-verde-suave:#0f3a31; --pf-ambar:#f7bd3c; --pf-ambar-suave:#3b2e10;
  --pf-rojo:#ff7a7a; --pf-rojo-suave:#3e1b25; --pf-violeta:#b69cff; --pf-violeta-suave:#2a2254;
  --pf-sombra:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.28);
  --pf-cabecera:#12264a; --pf-linea-suave:#172b4b; --pf-chip:#1a2f53; --pf-chip-texto:#b9c7dc;
  --pf-azul-borde:#2c4f8d; --pf-rojo-borde:#6d2b36; --pf-placeholder:#6c80a0; --pf-info:#10284f;
  --pf-verde-texto:#8ff0c6; --pf-verde-borde:#1f5a47; --pf-rojo-texto:#ffb0b0;
  --pf-ambar-texto:#ffd479; --pf-ambar-borde:#5f4a1a; --pf-azul-texto:#a8c6ff;
  --pf-marca:#ffffff; --pf-menu-texto:#c4d0e2; --pf-pista:#1b3156; --pf-apagado:#0b1a31; --pf-suave-2:#5f7394;
  /* Las pantallas más viejas leen estos alias. */
  --bg-page:var(--pf-fondo); --text-on-dark:var(--pf-titulo); --text-on-dark-body:var(--pf-texto);
  --text-on-dark-muted:var(--pf-suave); --surface-card-dark:var(--pf-carta); --surface-raised-dark:var(--pf-cabecera);
  --surface-inset-dark:var(--pf-carta); --border-dark:var(--pf-linea); --border-dark-strong:var(--pf-linea-2);
  --grad-card-dark:var(--pf-carta); --grad-card-deep:var(--pf-carta); --cabecera-tabla-texto:var(--pf-suave);
  --grey:var(--pf-suave); --tinta:var(--pf-texto); --borde:var(--pf-linea);
  background:var(--pf-fondo); color:var(--pf-texto)}
/* La opción activa del menú y la pestaña activa van en blanco sobre azul, como en la maqueta. */
html[data-tema="oscuro"] body:not(.centro) .barra .menu.menu-lateral a.activo,
html[data-tema="oscuro"] body:not(.centro) .barra .menu.menu-lateral a.activo .menu-icono,
html[data-tema="oscuro"] body:not(.centro) .barra .menu.menu-lateral .menu-solo a.activo{color:#ffffff}
html[data-tema="oscuro"] body:not(.centro) .pestanas a.activa{color:#6ea2ff;border-bottom-color:#2a74ff}
/* Íconos del menú que en oscuro quedarían apagados. */
html[data-tema="oscuro"] body:not(.centro) .menu-lateral a:has(use[href="#mi-configuracion"]) .menu-icono{color:#9fb0c8}
html[data-tema="oscuro"] body:not(.centro) .menu-lateral a:has(use[href="#mi-desprendible"]) .menu-icono{color:#8b8cff}
/* Las fechas y listas nativas del navegador, también oscuras. */
html[data-tema="oscuro"] body:not(.centro) input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.8)}

html[data-tema] body:not(.centro) button,
html[data-tema] body:not(.centro) input,
html[data-tema] body:not(.centro) select,
html[data-tema] body:not(.centro) textarea{font-family:var(--pf-letra)}

/* ---------- Marco: menú lateral fijo a la izquierda, encabezado blanco arriba ---------- */
html[data-tema] body:not(.centro):has(.menu-lateral){padding-left:var(--pf-lateral)}
html[data-tema] body:not(.centro) .barra{position:sticky;top:0;z-index:60;display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:flex-start;gap:18px;min-height:72px;padding:10px 32px;
  background:var(--pf-carta);color:var(--pf-titulo);border-bottom:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .barra .logo-marco,
html[data-tema] body:not(.centro) .barra .salir,
html[data-tema] body:not(.centro) .barra .marca-nombre,
html[data-tema] body:not(.centro) .barra .marca-eslogan,
html[data-tema] body:not(.centro) .barra .tema-boton{display:none}
html[data-tema] body:not(.centro) .barra .menu-abrir{display:none}
html[data-tema] body:not(.centro) .barra .marca-app{display:flex;flex:0 0 auto;flex-direction:row;
  align-items:center;gap:14px;margin-left:auto;overflow:visible;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .barra .marca-app>span{max-width:none}

/* La ruta: casa · Mi espacio / Mis horas */
html[data-tema] body:not(.centro) .migas{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  font-size:14px;color:var(--pf-suave);white-space:nowrap;overflow:hidden}
html[data-tema] body:not(.centro) .migas .menu-icono{width:17px;height:17px;flex:0 0 17px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .migas-sep{color:var(--pf-linea-2)}
html[data-tema] body:not(.centro) .migas-actual{color:var(--pf-texto);font-weight:600}

/* Buscador */
html[data-tema] body:not(.centro) .buscador{position:relative;display:flex;align-items:center;width:340px;margin:0}
html[data-tema] body:not(.centro) .buscador-icono{position:absolute;left:14px;width:18px;height:18px;fill:none;
  stroke:var(--pf-suave);stroke-width:2;stroke-linecap:round;pointer-events:none}
html[data-tema] body:not(.centro) .buscador input{width:100%;height:42px;padding:0 14px 0 42px;margin:0;
  border:1px solid var(--pf-linea-2);border-radius:12px;background:var(--pf-carta);color:var(--pf-titulo);font-size:14.5px}
html[data-tema] body:not(.centro) .buscador input::placeholder{color:var(--pf-placeholder)}
html[data-tema] body:not(.centro) .buscador-lista{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  display:flex;flex-direction:column;padding:8px;background:var(--pf-carta);border:1px solid var(--pf-linea);border-radius:14px;
  box-shadow:0 16px 36px rgba(16,40,80,.14) !important;max-height:420px;overflow:auto}
html[data-tema] body:not(.centro) .buscador-lista[hidden]{display:none}
html[data-tema] body:not(.centro) .buscador-lista a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;
  padding:9px 10px;border-radius:10px;color:var(--pf-titulo);text-decoration:none;font-size:14px}
html[data-tema] body:not(.centro) .buscador-lista a b{font-weight:600}
html[data-tema] body:not(.centro) .buscador-lista a:hover,
html[data-tema] body:not(.centro) .buscador-lista a.elegido{background:var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .buscador-tipo{grid-row:span 2;align-self:center;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--pf-azul);background:var(--pf-azul-suave);
  padding:3px 8px;border-radius:999px}
html[data-tema] body:not(.centro) .buscador-detalle{font-size:12.5px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .buscador-vacio{margin:6px 10px;font-size:14px;color:var(--pf-suave)}

/* Campana y cuenta */
html[data-tema] body:not(.centro) .campana>summary{width:42px;height:42px;border:0;background:transparent;
  color:var(--pf-texto);border-radius:12px}
html[data-tema] body:not(.centro) .campana>summary:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .campana.activa>summary{color:var(--pf-titulo);background:transparent;border:0}
html[data-tema] body:not(.centro) .campana-icono{width:22px;height:22px}
html[data-tema] body:not(.centro) .campana-cuenta{top:0;right:-2px;background:#f5b400;color:#1d1300;border:2px solid var(--pf-carta);
  min-width:22px;height:22px;line-height:18px;font-size:11px}
html[data-tema] body:not(.centro) .campana-lista,
html[data-tema] body:not(.centro) .usuario-lista{background:var(--pf-carta);border:1px solid var(--pf-linea);
  box-shadow:0 16px 36px rgba(16,40,80,.14) !important}
html[data-tema] body:not(.centro) .barra .campana .campana-lista a{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .campana-lista a b{color:var(--pf-ambar)}
html[data-tema] body:not(.centro) .campana-lista a:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .usuario-menu{position:relative}
html[data-tema] body:not(.centro) .usuario-menu>summary{list-style:none;display:flex;align-items:center;gap:10px;
  padding:4px 8px 4px 4px;border-radius:14px;cursor:pointer}
html[data-tema] body:not(.centro) .usuario-menu>summary::-webkit-details-marker{display:none}
html[data-tema] body:not(.centro) .usuario-menu>summary:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .usuario-menu>summary:focus-visible{outline:2px solid var(--pf-azul);outline-offset:2px}
html[data-tema] body:not(.centro) .avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:50%;background:var(--pf-azul-suave);color:var(--pf-azul);
  font-weight:700;font-size:15px;letter-spacing:.02em}
html[data-tema] body:not(.centro) .usuario-datos{display:flex;flex-direction:column;line-height:1.25}
html[data-tema] body:not(.centro) .barra .marca-usuario{margin:0;font-size:14px;font-weight:700;color:var(--pf-titulo);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-tema] body:not(.centro) .barra .marca-rol{margin:0;padding:0;background:none;border:0;font-size:12.5px;
  font-weight:500;color:var(--pf-suave);text-transform:none;letter-spacing:0}
html[data-tema] body:not(.centro) .usuario-flecha{width:18px;height:18px;fill:none;stroke:var(--pf-suave);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
html[data-tema] body:not(.centro) .usuario-lista{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;
  padding:8px;border-radius:14px;display:flex;flex-direction:column;gap:2px}
html[data-tema] body:not(.centro) .usuario-lista a{padding:10px 12px;border-radius:10px;color:var(--pf-titulo);
  text-decoration:none;font-size:14.5px;font-weight:500}
html[data-tema] body:not(.centro) .usuario-lista a:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .usuario-lista .usuario-salir{color:var(--pf-rojo);border-top:1px solid var(--pf-linea);
  border-radius:0 0 10px 10px;margin-top:4px}

/* ---------- Menú lateral ---------- */
html[data-tema] body:not(.centro) .barra .menu.menu-lateral{width:var(--pf-lateral);padding:20px 14px 16px;gap:2px;
  background:var(--pf-carta);border-right:1px solid var(--pf-linea);transition:width .18s ease}
html[data-tema] body:not(.centro) .menu-lateral .menu-texto{opacity:1}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-marca{display:flex;align-items:center;gap:12px;
  height:auto;padding:0 8px 18px;margin:0 0 8px;border-left:0;text-decoration:none;background:transparent}
html[data-tema] body:not(.centro) .menu-marca-logo{width:46px;height:46px;flex:0 0 46px;object-fit:contain}
html[data-tema] body:not(.centro) .menu-marca-texto{display:flex;flex-direction:column;line-height:1.15}
html[data-tema] body:not(.centro) .menu-marca-nombre{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--pf-azul)}
html[data-tema] body:not(.centro) .menu-marca-nombre b{font-weight:800;color:var(--pf-marca)}
html[data-tema] body:not(.centro) .menu-marca-lema{font-size:12.5px;font-weight:500;color:var(--pf-suave);margin-top:3px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-grupo{display:flex;align-items:center;gap:10px;
  width:100%;height:40px;margin:10px 0 2px;padding:0 10px;border-radius:10px;background:transparent;
  font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-grupo:hover{background:var(--pf-hover);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .menu-grupo .menu-texto{flex:1;text-align:left}
html[data-tema] body:not(.centro) .menu-grupo .grupo-icono{width:20px;height:20px;flex:0 0 20px}
html[data-tema] body:not(.centro) .menu-lateral .menu-flecha{opacity:1;width:16px;height:16px;flex:0 0 16px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral a{height:38px;gap:12px;margin:1px 0;padding:0 12px 0 22px;
  border-left:0;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--pf-menu-texto)}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral a:hover{background:var(--pf-hover);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral a.activo{background:var(--pf-azul-suave);color:var(--pf-azul);
  font-weight:700;border-left:0}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-icono{width:19px;height:19px;flex:0 0 19px;stroke-width:1.9}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-cuenta{position:static;margin-left:auto;min-width:22px;
  height:20px;line-height:20px;padding:0 7px;border-radius:999px;background:#f5b400;color:#1d1300;font-size:11px;font-weight:700}
html[data-tema] body:not(.centro) .menu-grupo-cuenta{background:#f5b400;color:#1d1300}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-fijar{height:38px;padding:0 12px;border-radius:10px;
  margin-top:auto;color:var(--pf-suave);font-size:14px;border-left:0}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-fijar:hover{background:var(--pf-hover);color:var(--pf-titulo)}
/* Cada ícono con su color, como en las maquetas. */
html[data-tema] body:not(.centro) .menu-lateral :is(a,button):has(use[href="#mi-casa"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral :is(a,button):has(use[href="#mi-hoja"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-tablero"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-personas"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-usuarios"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral :is(a,button):has(use[href="#mi-grilla"]) .menu-icono{color:#2563eb}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-certificado"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-auditoria"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral :is(a,button):has(use[href="#mi-maletin"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-disciplinario"]) .menu-icono{color:#7c3aed}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-variable"]) .menu-icono{color:#16a34a}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-desprendible"]) .menu-icono{color:#4f46e5}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-vacaciones"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-avisos"]) .menu-icono{color:#ea7317}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-ausencias"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-convivencia"]) .menu-icono{color:#e11d48}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-reloj"]) .menu-icono{color:#0891b2}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-comunicado"]) .menu-icono{color:#f08c00}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-firma"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral :is(a,button):has(use[href="#mi-equipo"]) .menu-icono{color:#0d9488}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-sst"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-organigrama"]) .menu-icono,
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-configuracion"]) .menu-icono{color:#475569}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-activos"]) .menu-icono{color:#d97706}
html[data-tema] body:not(.centro) .menu-lateral a:has(use[href="#mi-tienda"]) .menu-icono{color:#db2777}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral a.activo .menu-icono{color:var(--pf-azul)}

/* ---------- Contenido ---------- */
html[data-tema] body:not(.centro) main.contenido{padding:30px 40px 56px}
html[data-tema] body:not(.centro) main.contenido.ancho{max-width:1320px}
html[data-tema] body:not(.centro) main.contenido>h2:first-of-type,
html[data-tema] body:not(.centro) main.contenido>h2{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.03em;
  color:var(--pf-titulo);margin:4px 0 6px}
html[data-tema] body:not(.centro) main.contenido>h2+.estado-sub,
html[data-tema] body:not(.centro) main.contenido>h2+p.estado-sub{font-size:17px;color:var(--pf-suave);margin:0 0 22px}
html[data-tema] body:not(.centro) h2::before,
html[data-tema] body:not(.centro) h3::before{content:none !important;display:none !important}
html[data-tema] body:not(.centro) h3{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) h4{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .estado-sub{color:var(--pf-suave)}
html[data-tema] body:not(.centro) a,
html[data-tema] body:not(.centro) .mini-enlace{color:var(--pf-azul)}
html[data-tema] body:not(.centro) .mini-enlace{font-weight:600}

/* Tarjetas */
html[data-tema] body:not(.centro) .tarjeta,
html[data-tema] body:not(.centro) .tarjeta-novedad,
html[data-tema] body:not(.centro) .ficha .ficha-tarjeta{background:var(--pf-carta);border:1px solid var(--pf-linea);
  border-top:1px solid var(--pf-linea);border-radius:var(--pf-radio);box-shadow:var(--pf-sombra) !important}
html[data-tema] body:not(.centro) .ficha .ficha-titulo{border-bottom:0;background:transparent;padding-bottom:4px}
html[data-tema] body:not(.centro) .ficha .ficha-titulo h3{font-size:19px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .ficha .ficha-cuadro{width:38px;height:38px;border-radius:12px;background:var(--pf-azul-suave);
  color:var(--pf-azul)}

/* Cifras rápidas: ícono en un círculo suave, etiqueta y número grande */
html[data-tema] body:not(.centro) .ficha .ficha-cifras{gap:16px}
html[data-tema] body:not(.centro) .ficha .ficha-cifra{flex-direction:row;align-items:center;gap:14px;padding:18px 20px;
  background:var(--pf-carta);border:1px solid var(--pf-linea);border-left:1px solid var(--pf-linea);border-radius:var(--pf-radio);
  box-shadow:var(--pf-sombra) !important}
html[data-tema] body:not(.centro) .ficha .ficha-cifra .ficha-cuadro{width:52px;height:52px;flex:0 0 52px;border-radius:50%}
html[data-tema] body:not(.centro) .ficha .ficha-cifra-txt{font-size:14px;color:var(--pf-texto);font-weight:500}
html[data-tema] body:not(.centro) .ficha .ficha-cifra-num{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .ficha .ficha-color-2 .ficha-cuadro{background:var(--pf-violeta-suave);color:var(--pf-violeta)}
html[data-tema] body:not(.centro) .ficha .ficha-color-3 .ficha-cuadro{background:var(--pf-verde-suave);color:var(--pf-verde)}
html[data-tema] body:not(.centro) .ficha .ficha-color-4 .ficha-cuadro{background:var(--pf-ambar-suave);color:var(--pf-ambar)}

/* Tablas: cabecera clara en mayúsculas pequeñas, filas aireadas */
html[data-tema] body:not(.centro) .ficha-tabla,
html[data-tema] body:not(.centro) .tabla-marco{border:1px solid var(--pf-linea);border-radius:12px;overflow:auto;background:var(--pf-carta)}
html[data-tema] body:not(.centro) .tabla{background:var(--pf-carta);border-collapse:separate;border-spacing:0}
html[data-tema] body:not(.centro) .tabla th{background:var(--pf-cabecera);color:var(--pf-suave);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;border-bottom:1px solid var(--pf-linea);
  box-shadow:0 1px 0 var(--pf-linea) !important}
html[data-tema] body:not(.centro) .tabla td{padding:13px 16px;border-bottom:1px solid var(--pf-linea-suave);color:var(--pf-titulo);font-size:14.5px}
html[data-tema] body:not(.centro) .tabla tbody tr:last-child td{border-bottom:0}
html[data-tema] body:not(.centro) .tabla tbody tr:hover td{background:var(--pf-hover)}

/* Insignias en píldora, con punto de color en las de estado */
html[data-tema] body:not(.centro) .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--pf-chip);color:var(--pf-chip-texto);border:0}
html[data-tema] body:not(.centro) .badge.verde{background:var(--pf-verde-suave);color:var(--pf-verde)}
html[data-tema] body:not(.centro) .badge.amarillo{background:var(--pf-ambar-suave);color:var(--pf-ambar)}
html[data-tema] body:not(.centro) .badge.rojo{background:var(--pf-rojo-suave);color:var(--pf-rojo)}
html[data-tema] body:not(.centro) .badge.azul{background:var(--pf-azul-suave);color:var(--pf-azul)}
html[data-tema] body:not(.centro) .badge:is(.verde,.amarillo,.rojo)::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:0 0 7px}

/* Botones: azul con esquinas suaves; los secundarios, con contorno */
html[data-tema] body:not(.centro) button,
html[data-tema] body:not(.centro) .boton-enlace{background:var(--pf-azul);color:#fff;border:1px solid var(--pf-azul);
  border-radius:12px;padding:11px 20px;font-size:15px;font-weight:700;line-height:1.2}
html[data-tema] body:not(.centro) button:hover,
html[data-tema] body:not(.centro) .boton-enlace:hover{background:var(--pf-azul-2);border-color:var(--pf-azul-2);color:#fff}
html[data-tema] body:not(.centro) .boton-enlace.secundario,
html[data-tema] body:not(.centro) button.secundario{background:var(--pf-carta);color:var(--pf-azul);border:1px solid var(--pf-azul-borde)}
html[data-tema] body:not(.centro) .boton-enlace.secundario:hover,
html[data-tema] body:not(.centro) button.secundario:hover{background:var(--pf-azul-suave);color:var(--pf-azul)}
html[data-tema] body:not(.centro) button.mini-enlace{background:none;border:0;color:var(--pf-azul);padding:0}
html[data-tema] body:not(.centro) button.btn-corregir{background:var(--pf-carta);color:var(--pf-rojo);border:1px solid var(--pf-rojo-borde)}
html[data-tema] body:not(.centro) button.btn-corregir:hover{background:var(--pf-rojo-suave);color:var(--pf-rojo)}
html[data-tema] body:not(.centro) :is(button,.boton-enlace):focus-visible{outline:3px solid rgba(29,100,242,.3);outline-offset:2px}

/* Campos */
html[data-tema] body:not(.centro) input:not([type=checkbox]):not([type=radio]):not([type=file]),
html[data-tema] body:not(.centro) select{min-height:44px;border:1px solid var(--pf-linea-2);border-radius:10px;background:var(--pf-carta);
  color:var(--pf-titulo);font-size:15px}
html[data-tema] body:not(.centro) textarea{border:1px solid var(--pf-linea-2);border-radius:12px;background:var(--pf-carta);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) :is(input,select,textarea):focus{outline:0;border-color:var(--pf-azul);
  box-shadow:0 0 0 3px rgba(29,100,242,.15) !important}
html[data-tema] body:not(.centro) label{color:var(--pf-titulo);font-weight:600;font-size:14.5px}
html[data-tema] body:not(.centro) ::placeholder{color:var(--pf-placeholder)}

/* Mensajes, notas y pestañas */
html[data-tema] body:not(.centro) .mensaje{border-radius:12px;padding:13px 16px;border:1px solid transparent;font-size:14.5px}
html[data-tema] body:not(.centro) .mensaje.ok{background:var(--pf-verde-suave);color:var(--pf-verde-texto);border-color:var(--pf-verde-borde)}
html[data-tema] body:not(.centro) .mensaje.error{background:var(--pf-rojo-suave);color:var(--pf-rojo-texto);border-color:var(--pf-rojo-borde)}
html[data-tema] body:not(.centro) .mensaje.aviso{background:var(--pf-ambar-suave);color:var(--pf-ambar-texto);border-color:var(--pf-ambar-borde)}
html[data-tema] body:not(.centro) .nota{background:var(--pf-azul-suave);color:var(--pf-azul-texto);border:1px solid var(--pf-azul-borde);border-radius:12px}
html[data-tema] body:not(.centro) .pestanas{gap:28px;border-bottom:1px solid var(--pf-linea);margin:6px 0 20px}
html[data-tema] body:not(.centro) .pestanas a{padding:12px 2px;color:var(--pf-suave);font-weight:600;text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
html[data-tema] body:not(.centro) .pestanas a.activa{color:var(--pf-azul);border-bottom-color:var(--pf-azul)}

/* ---------- Portátil pequeño: el menú se contrae a íconos y se abre al pasar el mouse ---------- */
@media (max-width:1180px) and (min-width:781px){
  html[data-tema] body:not(.centro):has(.menu-lateral){padding-left:var(--pf-lateral-cerrado)}
  html[data-tema] body:not(.centro):has(.menu-lateral.fijo){padding-left:var(--pf-lateral)}
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral{width:var(--pf-lateral-cerrado)}
  html[data-tema] body:not(.centro) .menu-lateral:not(:hover):not(:focus-within):not(.fijo) .menu-texto,
  html[data-tema] body:not(.centro) .menu-lateral:not(:hover):not(:focus-within):not(.fijo) .menu-marca-texto,
  html[data-tema] body:not(.centro) .menu-lateral:not(:hover):not(:focus-within):not(.fijo) .menu-flecha,
  html[data-tema] body:not(.centro) .menu-lateral:not(:hover):not(:focus-within):not(.fijo) .menu-grupo-cuenta{display:none}
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral:hover,
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral:focus-within,
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral.fijo{width:var(--pf-lateral);box-shadow:0 20px 40px rgba(16,40,80,.12) !important}
  html[data-tema] body:not(.centro) .buscador{width:260px}
}
@media (min-width:1181px){
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-fijar{display:none}
}

/* ---------- Celular: barra de arriba con menú, marca, campana y cuenta; barra inferior ---------- */
html[data-tema] body:not(.centro) .barra-inferior{display:none}
@media (max-width:780px){
  html[data-tema] body:not(.centro):has(.menu-lateral){padding-left:0;padding-bottom:78px}
  html[data-tema] body:not(.centro) .barra{min-height:62px;padding:8px 14px;gap:10px}
  html[data-tema] body:not(.centro) .barra .menu-abrir{display:inline-flex;order:-2;width:42px;height:42px;padding:0;
    margin:0;align-items:center;justify-content:center;background:transparent;border:0;color:var(--pf-titulo)}
  html[data-tema] body:not(.centro) .barra .menu-abrir .menu-icono{width:24px;height:24px}
  html[data-tema] body:not(.centro) .barra .logo-marco{display:inline-flex;align-items:center;gap:8px;order:-1}
  html[data-tema] body:not(.centro) .barra .logo-marco img{width:34px;height:34px}
  html[data-tema] body:not(.centro) .barra .logo-marco::after{content:"PeopleFlow";font-size:19px;font-weight:800;letter-spacing:-.02em;
    background:linear-gradient(90deg,var(--pf-marca) 0 58%,var(--pf-azul) 58%);-webkit-background-clip:text;background-clip:text;color:transparent}
  html[data-tema] body:not(.centro) .migas,
  html[data-tema] body:not(.centro) .buscador,
  html[data-tema] body:not(.centro) .usuario-datos,
  html[data-tema] body:not(.centro) .usuario-flecha{display:none}
  html[data-tema] body:not(.centro) .barra .marca-app{gap:6px}
  html[data-tema] body:not(.centro) .avatar{width:38px;height:38px;font-size:14px}
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral{width:min(300px,86vw);box-shadow:0 20px 50px rgba(16,40,80,.2) !important}
  html[data-tema] body:not(.centro) main.contenido{padding:20px 16px 32px}
  html[data-tema] body:not(.centro) main.contenido>h2{font-size:30px}
  html[data-tema] body:not(.centro) .barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:64;display:grid;
    grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--pf-carta);
    border-top:1px solid var(--pf-linea);box-shadow:0 -6px 20px rgba(16,40,80,.06) !important}
  html[data-tema] body:not(.centro) .barra-inferior :is(a,button){display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 0;margin:0;border:0;border-radius:12px;background:transparent;color:var(--pf-suave);font-size:11.5px;
    font-weight:600;text-decoration:none;min-height:0}
  html[data-tema] body:not(.centro) .barra-inferior .menu-icono{width:23px;height:23px;flex:0 0 23px}
  html[data-tema] body:not(.centro) .barra-inferior .activo{color:var(--pf-azul)}
  html[data-tema] body:not(.centro) .barra-inferior :is(a,button):hover{background:var(--pf-hover);color:var(--pf-azul)}
}
html[data-tema] body:not(.centro) .barra .migas{order:-1}
html[data-tema] body:not(.centro) h2::after,
html[data-tema] body:not(.centro) main.contenido>h2::after{content:none !important;display:none !important}
html[data-tema] body:not(.centro) .ficha .ficha-cifra .ficha-cifra-num{color:var(--pf-titulo) !important;font-size:20px;line-height:1.25}
html[data-tema] body:not(.centro) .ficha .ficha-cifra .ficha-cifra-txt{color:var(--pf-suave)}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .barra .logo-marco{width:auto;height:auto;padding:0;background:transparent;border:0}
  html[data-tema] body:not(.centro) .barra .logo-marco::after{white-space:nowrap;width:auto}
  html[data-tema] body:not(.centro) .barra-inferior :is(a,button){line-height:1.2;letter-spacing:0;justify-content:flex-start}
  html[data-tema] body:not(.centro) .barra-inferior :is(a,button) span{line-height:1.2}
}

/* =====================================================================================
   25) COMPONENTES DEL REDISEÑO (JuanJo, 2026-09-24): piezas que se repiten en las maquetas
   — cabecera de página con acción a la derecha, tarjetas pf-, cifras con ícono y barra de
   avance, días de turno, aviso informativo, estado vacío, avatares con iniciales, tabla que
   en el celular se vuelve tarjetas, filtro y paginador de tablas.
   ===================================================================================== */
html[data-tema] body:not(.centro) .solo-lector{position:absolute;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* left:0 (2026-10-15): sin él, el texto oculto de un encabezado de tabla quedaba «colgado» a la derecha, fuera de la
   tabla con desplazamiento, y en el celular la página entera se encogía (Encuestas, Vacaciones). */
html[data-tema] body:not(.centro) .pagina-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:6px}
html[data-tema] body:not(.centro) .pagina-cabeza h2{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.03em;
  color:var(--pf-titulo);margin:4px 0 6px}
html[data-tema] body:not(.centro) .pagina-cabeza .estado-sub{font-size:17px;margin:0 0 18px}
html[data-tema] body:not(.centro) .pagina-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Selector del mes con ícono de calendario */
html[data-tema] body:not(.centro) .selector-mes{position:relative;display:flex;align-items:center;margin:4px 0 0}
html[data-tema] body:not(.centro) .selector-icono{position:absolute;left:14px;width:18px;height:18px;fill:none;
  stroke:var(--pf-azul);stroke-width:2;stroke-linecap:round;pointer-events:none}
html[data-tema] body:not(.centro) .selector-mes select{min-width:230px;padding:0 40px 0 44px;font-weight:600;
  box-shadow:var(--pf-sombra) !important}

/* Tarjetas y filas */
html[data-tema] body:not(.centro) .pf-tarjeta{background:var(--pf-carta);border:1px solid var(--pf-linea);border-radius:var(--pf-radio);
  box-shadow:var(--pf-sombra) !important;padding:20px 22px;margin:0 0 18px}
html[data-tema] body:not(.centro) .pf-tarjeta-cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
html[data-tema] body:not(.centro) .pf-titulo-seccion{margin:0 0 14px;font-size:19px;font-weight:700;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-tarjeta-cabeza .pf-titulo-seccion{margin:0}
html[data-tema] body:not(.centro) .fila-dos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
html[data-tema] body:not(.centro) .fila-dos>.pf-tarjeta{margin:0}
html[data-tema] body:not(.centro) .pf-etiqueta{margin:0;font-size:14.5px;font-weight:500;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .pf-grande{margin:2px 0;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-sub{margin:2px 0 0;font-size:13.5px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-turno-hoy{display:flex;align-items:center;gap:18px}
html[data-tema] body:not(.centro) .pf-tarjeta-info{display:flex;align-items:center;gap:18px;background:var(--pf-info);border-color:var(--pf-azul-borde)}
html[data-tema] body:not(.centro) .pf-tarjeta-info p{margin:0;font-size:16px;color:var(--pf-azul-texto)}
html[data-tema] body:not(.centro) .pf-icono-qr svg{width:44px;height:44px;fill:none;stroke:var(--pf-azul);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Íconos en círculo */
html[data-tema] body:not(.centro) .pf-icono{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;background:var(--pf-azul-suave);color:var(--pf-azul)}
html[data-tema] body:not(.centro) .pf-icono svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
html[data-tema] body:not(.centro) .pf-icono-ambar{background:var(--pf-ambar-suave);color:#d98200}
html[data-tema] body:not(.centro) .pf-icono-verde{background:var(--pf-verde-suave);color:var(--pf-verde)}
html[data-tema] body:not(.centro) .pf-icono-violeta{background:var(--pf-violeta-suave);color:var(--pf-violeta)}
html[data-tema] body:not(.centro) .pf-icono-rojo{background:var(--pf-rojo-suave);color:var(--pf-rojo)}

/* Cifras rápidas */
html[data-tema] body:not(.centro) .pf-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:18px}
html[data-tema] body:not(.centro) .pf-cifra{display:flex;align-items:flex-start;gap:14px;background:var(--pf-carta);border:1px solid var(--pf-linea);
  border-radius:var(--pf-radio);box-shadow:var(--pf-sombra) !important;padding:18px 20px}
html[data-tema] body:not(.centro) .pf-cifra .pf-icono{width:44px;height:44px;background:transparent;border:0}
html[data-tema] body:not(.centro) .pf-cifra .pf-icono svg{width:28px;height:28px}
html[data-tema] body:not(.centro) .pf-cifra-cuerpo{flex:1;min-width:0}
html[data-tema] body:not(.centro) .pf-valor{margin:4px 0 2px;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--pf-titulo);line-height:1.15}
html[data-tema] body:not(.centro) .pf-cifra .badge{margin-top:6px}
html[data-tema] body:not(.centro) .pf-barra{display:block;height:7px;margin-top:10px;border-radius:999px;background:var(--pf-pista);overflow:hidden}
html[data-tema] body:not(.centro) .pf-barra>span{display:block;height:100%;border-radius:999px;background:var(--pf-azul)}

/* Próximos turnos: una tarjetica por día */
html[data-tema] body:not(.centro) .pf-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
html[data-tema] body:not(.centro) .pf-dia{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:12px 6px;border:1px solid var(--pf-linea);border-radius:12px;background:var(--pf-carta)}
html[data-tema] body:not(.centro) .pf-dia.primero{border-top:3px solid var(--pf-azul);padding-top:10px}
html[data-tema] body:not(.centro) .pf-dia.descanso{background:var(--pf-apagado);color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-dia-semana{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .pf-dia-numero{font-size:24px;font-weight:800;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-dia.descanso .pf-dia-numero{color:var(--pf-suave-2)}
html[data-tema] body:not(.centro) .pf-dia-horas{font-size:13.5px;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .pf-dia-nombre{font-size:12.5px;color:var(--pf-suave)}

/* Filtro, marcas corregidas, pie y paginador */
html[data-tema] body:not(.centro) .pf-filtro{min-width:200px;margin:0}
html[data-tema] body:not(.centro) .pf-corregida{font-style:italic;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-pie-tabla{font-size:13px;margin:12px 0 0}
html[data-tema] body:not(.centro) .pf-paginador{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-paginas{display:flex;gap:6px}
html[data-tema] body:not(.centro) .pf-paginas button{min-width:34px;height:34px;padding:0 10px;border-radius:9px;background:var(--pf-carta);
  color:var(--pf-texto);border:1px solid var(--pf-linea);font-size:14px;font-weight:600}
html[data-tema] body:not(.centro) .pf-paginas button[aria-current="page"]{background:var(--pf-azul);border-color:var(--pf-azul);color:#fff}
html[data-tema] body:not(.centro) .pf-paginas button:disabled{opacity:.45;cursor:default}

/* Aviso informativo y estado vacío */
html[data-tema] body:not(.centro) .pf-aviso{display:flex;align-items:center;gap:12px;padding:14px 18px;margin:0 0 18px;border-radius:14px;
  background:var(--pf-info);border:1px solid var(--pf-azul-borde);color:var(--pf-azul-texto);font-size:15px}
html[data-tema] body:not(.centro) .pf-aviso svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--pf-azul);stroke-width:2;stroke-linecap:round}
html[data-tema] body:not(.centro) .pf-vacio{display:flex;align-items:center;gap:20px}
html[data-tema] body:not(.centro) .pf-vacio .pf-icono{width:72px;height:72px}
html[data-tema] body:not(.centro) .pf-vacio .pf-icono svg{width:34px;height:34px}
html[data-tema] body:not(.centro) .pf-vacio h3{margin:0 0 4px;font-size:19px}
html[data-tema] body:not(.centro) .pf-vacio p{margin:0;color:var(--pf-suave)}

/* Avatares con iniciales y la celda persona (avatar, nombre y detalle) */
html[data-tema] body:not(.centro) .pf-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;
  border-radius:50%;font-weight:700;font-size:15px;background:var(--pf-azul-suave);color:var(--pf-azul)}
html[data-tema] body:not(.centro) .pf-avatar.c1{background:var(--pf-violeta-suave);color:var(--pf-violeta)}
html[data-tema] body:not(.centro) .pf-avatar.c2{background:var(--pf-verde-suave);color:var(--pf-verde)}
html[data-tema] body:not(.centro) .pf-avatar.c3{background:var(--pf-rojo-suave);color:var(--pf-rojo)}
html[data-tema] body:not(.centro) .pf-avatar.c4{background:var(--pf-ambar-suave);color:var(--pf-ambar)}
html[data-tema] body:not(.centro) .pf-persona{display:flex;align-items:center;gap:12px;min-width:0}
html[data-tema] body:not(.centro) .pf-persona b{display:block;color:var(--pf-titulo);font-weight:700}
html[data-tema] body:not(.centro) .pf-persona small{display:block;color:var(--pf-suave);font-size:13px}
html[data-tema] body:not(.centro) .pf-buscar{position:relative;display:flex;align-items:center;flex:1 1 260px;max-width:420px}
html[data-tema] body:not(.centro) .pf-buscar svg{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--pf-suave);stroke-width:2;stroke-linecap:round}
html[data-tema] body:not(.centro) .pf-buscar input{width:100%;padding-left:42px;margin:0}

@media (max-width:1100px){
  html[data-tema] body:not(.centro) .pf-dias{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .fila-dos{grid-template-columns:1fr}
  html[data-tema] body:not(.centro) .pagina-cabeza h2{font-size:30px}
  html[data-tema] body:not(.centro) .selector-mes,
  html[data-tema] body:not(.centro) .selector-mes select{width:100%}
  html[data-tema] body:not(.centro) .pf-cifras{grid-template-columns:1fr 1fr;gap:12px}
  html[data-tema] body:not(.centro) .pf-cifra{flex-direction:column;gap:6px;padding:14px}
  html[data-tema] body:not(.centro) .pf-valor{font-size:22px}
  html[data-tema] body:not(.centro) .pf-dias{grid-template-columns:1fr;gap:8px}
  html[data-tema] body:not(.centro) .pf-dia{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;text-align:left;
    align-items:center;column-gap:14px;padding:10px 14px}
  html[data-tema] body:not(.centro) .pf-dia-semana{grid-column:1;grid-row:1;text-align:center;text-transform:none}
  html[data-tema] body:not(.centro) .pf-dia-numero{grid-column:1;grid-row:2;text-align:center;font-size:20px}
  html[data-tema] body:not(.centro) .pf-dia-horas{grid-column:2;grid-row:1;font-weight:700;color:var(--pf-titulo)}
  html[data-tema] body:not(.centro) .pf-dia-nombre{grid-column:2;grid-row:2}
  /* La tabla se vuelve tarjetas: cada fila una tarjeta y cada celda con su título. */
  html[data-tema] body:not(.centro) .ficha-tabla:has(.pf-tabla-tarjetas){border:0;background:transparent;overflow:visible}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas,
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas tbody{display:block;background:transparent}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas thead{display:none}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px;margin-bottom:10px;
    border:1px solid var(--pf-linea);border-radius:14px;background:var(--pf-carta)}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas td{display:block;padding:0;border:0;font-size:14px}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas td::before{content:attr(data-titulo);display:block;font-size:11.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:var(--pf-suave)}
  html[data-tema] body:not(.centro) .pf-tabla-tarjetas tbody tr:hover td{background:transparent}
}
html[data-tema] body:not(.centro) select.pf-filtro{width:auto;min-width:210px;flex:0 0 auto}
html[data-tema] body:not(.centro) .badge{white-space:nowrap}

/* =====================================================================================
   26) HOJA DE VIDA (rediseño claro, JuanJo, 2026-09-24): encabezado con la foto de equipo
   (Unsplash, licencia gratuita) desvanecida hacia el texto, cifras, pestañas y tarjetas con
   filas «etiqueta · valor». En el celular la foto va arriba y el avatar se monta encima.
   ===================================================================================== */
html[data-tema] body:not(.centro) .ficha .ficha-cabecera{position:relative;overflow:hidden;display:flex;align-items:center;
  gap:22px;min-height:140px;padding:26px 28px;margin-bottom:16px;background:var(--pf-carta)}
html[data-tema] body:not(.centro) .ficha .ficha-foto{position:absolute;top:0;right:0;bottom:0;width:44%;
  background:url("/static/hoja-de-vida-equipo.jpg") center 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
html[data-tema] body:not(.centro) .ficha .ficha-avatar{position:relative;width:88px;height:88px;flex:0 0 88px;font-size:30px;
  font-weight:700;background:var(--pf-azul-suave);color:var(--pf-azul);border:4px solid var(--pf-carta)}
html[data-tema] body:not(.centro) .ficha .ficha-quien{position:relative;flex:0 1 auto;min-width:0}
html[data-tema] body:not(.centro) .ficha .ficha-eyebrow{display:none}
html[data-tema] body:not(.centro) .ficha .ficha-nombre{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .ficha .ficha-sub{margin:4px 0 0;font-size:15px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .ficha .ficha-etiquetas{margin-top:10px}
html[data-tema] body:not(.centro) .ficha .ficha-acciones{position:relative;margin-right:auto;margin-left:24px;align-self:center}
html[data-tema] body:not(.centro) .ficha .ficha-accion{display:inline-flex;align-items:center;gap:8px}
html[data-tema] body:not(.centro) .ficha .ficha-accion .ficha-icono{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

html[data-tema] body:not(.centro) .pf-cifras-3{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-tema] body:not(.centro) .pf-cifra .pf-icono .ficha-icono{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9}
html[data-tema] body:not(.centro) .pf-cifras-3 .pf-cifra{align-items:center}
html[data-tema] body:not(.centro) .pf-cifras-3 .pf-icono{width:52px;height:52px;background:var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .pf-cifras-3 .pf-icono-violeta{background:var(--pf-violeta-suave)}
html[data-tema] body:not(.centro) .pf-cifras-3 .pf-icono-verde{background:var(--pf-verde-suave)}
html[data-tema] body:not(.centro) .pf-valor-texto{font-size:20px}

/* Tarjetas de la ficha: filas etiqueta · valor en dos columnas */
html[data-tema] body:not(.centro) .ficha .ficha-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
html[data-tema] body:not(.centro) .ficha .ficha-tarjeta{padding:20px 22px}
html[data-tema] body:not(.centro) .ficha .ficha-datos{display:flex;flex-direction:column;gap:0}
html[data-tema] body:not(.centro) .ficha .ficha-datos>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--pf-linea-suave)}
html[data-tema] body:not(.centro) .ficha .ficha-datos>div:last-child{border-bottom:0}
html[data-tema] body:not(.centro) .ficha .ficha-datos dt{margin:0;font-size:14.5px;font-weight:500;color:var(--pf-suave);
  text-transform:none;letter-spacing:0}
html[data-tema] body:not(.centro) .ficha .ficha-datos dd{margin:0;font-size:14.5px;font-weight:500;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .ficha .ficha-datos dd::before{content:none}
html[data-tema] body:not(.centro) .pf-destapar{margin-left:8px;font-size:13px}
html[data-tema] body:not(.centro) .ficha .ficha-faltan{font-size:13px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-enlace-tarjeta{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease}
html[data-tema] body:not(.centro) .pf-enlace-tarjeta:hover{border-color:var(--pf-azul-borde)}
html[data-tema] body:not(.centro) .ficha .ficha-protegidos .ficha-subgrupo{margin-top:10px}

@media (max-width:1100px){
  html[data-tema] body:not(.centro) .ficha .ficha-foto{width:36%}
}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .ficha .ficha-cabecera{flex-direction:column;align-items:flex-start;gap:10px;padding:130px 18px 20px}
  html[data-tema] body:not(.centro) .ficha .ficha-foto{left:0;width:auto;height:120px;bottom:auto;-webkit-mask-image:none;mask-image:none}
  html[data-tema] body:not(.centro) .ficha .ficha-avatar{position:absolute;top:84px;left:18px;width:72px;height:72px;flex-basis:72px;font-size:24px}
  html[data-tema] body:not(.centro) .ficha .ficha-quien{margin-top:34px}
  html[data-tema] body:not(.centro) .ficha .ficha-acciones{margin:6px 0 0;width:100%}
  html[data-tema] body:not(.centro) .ficha .ficha-accion{width:100%;justify-content:center}
  html[data-tema] body:not(.centro) .pf-cifras-3{grid-template-columns:1fr}
  html[data-tema] body:not(.centro) .pf-cifras-3 .pf-cifra{flex-direction:row}
  html[data-tema] body:not(.centro) .ficha .ficha-rejilla{grid-template-columns:1fr}
  html[data-tema] body:not(.centro) .pestanas{overflow-x:auto;gap:18px}
}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .barra .logo-marco{line-height:1.2}
  html[data-tema] body:not(.centro) .barra .logo-marco::after{position:static;inset:auto;animation:none;pointer-events:auto}
}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .barra .logo-marco::after{-webkit-mask-image:none;mask-image:none;background-size:100% 100%}
}

/* 27) MI EQUIPO: filas que abren el detalle de la persona (rediseño claro, 2026-09-24). */
html[data-tema] body:not(.centro) .pf-filas-clic tbody tr{cursor:pointer}
html[data-tema] body:not(.centro) .pf-filas-clic tbody tr:focus-visible{outline:2px solid var(--pf-azul);outline-offset:-2px}
html[data-tema] body:not(.centro) .pf-chevron{width:30px;text-align:right;font-size:22px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-detalle{border-color:var(--pf-azul-borde)}
html[data-tema] body:not(.centro) .pf-detalle-cabeza{display:flex;align-items:center;gap:16px;margin-bottom:14px}
html[data-tema] body:not(.centro) .pf-avatar.grande{width:58px;height:58px;font-size:19px}
html[data-tema] body:not(.centro) .pf-detalle-nombre{margin:0;font-size:22px;font-weight:800;color:var(--pf-titulo);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-tema] body:not(.centro) .pf-cerrar{margin-left:auto;width:38px;height:38px;padding:0;border-radius:10px;background:transparent;
  border:0;color:var(--pf-suave);font-size:26px;line-height:1}
html[data-tema] body:not(.centro) .pf-cerrar:hover{background:var(--pf-hover);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-detalle-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 16px;
  border-top:1px solid var(--pf-linea);padding-top:14px}
html[data-tema] body:not(.centro) .pf-detalle-datos div{padding:0 16px;border-left:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .pf-detalle-datos div:first-child{padding-left:0;border-left:0}
html[data-tema] body:not(.centro) .pf-detalle-datos dt{font-size:13.5px;color:var(--pf-suave);margin:0 0 4px}
html[data-tema] body:not(.centro) .pf-detalle-datos dd{margin:0;font-size:16px;font-weight:700;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-detalle-pie{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
html[data-tema] body:not(.centro) .pf-aviso-ambar{flex:1 1 320px;margin:0;padding:12px 16px;border-radius:12px;background:var(--pf-ambar-suave);
  color:var(--pf-ambar-texto);font-weight:600}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .pf-detalle-datos{grid-template-columns:1fr 1fr;row-gap:12px}
  html[data-tema] body:not(.centro) .pf-detalle-datos div{padding:0;border-left:0}
  html[data-tema] body:not(.centro) .pf-chevron{display:none}
}
/* 28) VACACIONES DEL EQUIPO */
html[data-tema] body:not(.centro) .pf-contador{margin-top:18px;font-size:15px}
html[data-tema] body:not(.centro) .pf-persona-titulo{margin-bottom:10px}
html[data-tema] body:not(.centro) .pf-titulo-icono{display:flex;align-items:center;gap:14px}
html[data-tema] body:not(.centro) .pf-titulo-icono .pf-titulo-seccion{margin:0}
html[data-tema] body:not(.centro) .pf-titulo-icono .estado-sub{margin:2px 0 0;font-size:14px}
html[data-tema] body:not(.centro) .pf-titulo-icono .pf-icono{width:44px;height:44px;background:transparent}
html[data-tema] body:not(.centro) .pf-derecha{text-align:right}
html[data-tema] body:not(.centro) .pf-derecha .mini-enlace{white-space:nowrap}
/* 29) DESEMPEÑO DEL EQUIPO: dos paneles (gente a la izquierda, resultados a la derecha). */
html[data-tema] body:not(.centro) .pf-cifras-4{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-tema] body:not(.centro) .pf-aviso-cifra{margin:0;border-radius:var(--pf-radio)}
html[data-tema] body:not(.centro) .pf-dos-paneles{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:18px;align-items:start}
html[data-tema] body:not(.centro) .pf-lista-personas{position:sticky;top:calc(var(--alto-barra,72px) + 16px);margin:0}
html[data-tema] body:not(.centro) .pf-lista-personas .pf-buscar{max-width:none;margin-bottom:12px}
html[data-tema] body:not(.centro) .pf-personas{display:flex;flex-direction:column;gap:6px}
html[data-tema] body:not(.centro) .pf-persona-boton{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;margin:0;text-align:left;
  background:var(--pf-carta);border:1px solid transparent;border-radius:12px;color:var(--pf-titulo);font-weight:500}
html[data-tema] body:not(.centro) .pf-persona-boton:hover{background:var(--pf-hover);border-color:transparent;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-persona-boton.elegida{background:var(--pf-azul-suave);border-color:var(--pf-azul-borde)}
html[data-tema] body:not(.centro) .pf-persona-textos{flex:1;min-width:0}
html[data-tema] body:not(.centro) .pf-persona-textos b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-tema] body:not(.centro) .pf-persona-textos small{display:block;font-size:12.5px;color:var(--pf-suave);font-weight:500}
html[data-tema] body:not(.centro) .pf-panel-persona{margin:0 0 14px}
html[data-tema] body:not(.centro) .pf-derecha-auto{margin-left:auto}
html[data-tema] body:not(.centro) .pf-subtitulo{display:block;margin:18px 0 10px;font-size:16px;font-weight:700;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-tipo{display:block;font-size:12px;color:var(--pf-suave);font-weight:500}
html[data-tema] body:not(.centro) .pf-campo-unidad{display:flex;align-items:center;gap:8px}
html[data-tema] body:not(.centro) .pf-campo-unidad input{max-width:150px;margin:0}
html[data-tema] body:not(.centro) .pf-campo-unidad span{color:var(--pf-suave);font-size:14px}
html[data-tema] body:not(.centro) .pf-pie-formulario{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
html[data-tema] body:not(.centro) .pf-pie-formulario .estado-sub{flex:1 1 320px;margin:0;font-size:13.5px}
@media (max-width:1100px){
  html[data-tema] body:not(.centro) .pf-cifras-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  html[data-tema] body:not(.centro) .pf-dos-paneles{grid-template-columns:minmax(0,1fr)}
  html[data-tema] body:not(.centro) .pf-lista-personas{position:static}
}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .pf-cifras-4{grid-template-columns:1fr 1fr}
  html[data-tema] body:not(.centro) .pf-aviso-cifra{grid-column:1/-1}
  html[data-tema] body:not(.centro) .pf-pie-formulario button{width:100%}
}
/* 30) USUARIOS: conteos, menú «⋯» por fila y panel lateral para crear. */
html[data-tema] body:not(.centro) .pf-conteos{margin:-10px 0 18px;font-size:15px;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .pf-verde{color:var(--pf-verde);font-weight:600}
html[data-tema] body:not(.centro) .pf-ambar{color:var(--pf-ambar);font-weight:600}
html[data-tema] body:not(.centro) .pagina-acciones .boton-enlace,
html[data-tema] body:not(.centro) .pagina-acciones button{display:inline-flex;align-items:center;gap:8px;margin:0}
html[data-tema] body:not(.centro) .pagina-acciones .menu-icono{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
html[data-tema] body:not(.centro) .pf-acciones{position:relative;display:inline-block}
html[data-tema] body:not(.centro) .pf-acciones>summary{list-style:none;cursor:pointer;width:36px;height:36px;line-height:32px;text-align:center;
  border-radius:10px;font-size:22px;color:var(--pf-texto);font-weight:700}
html[data-tema] body:not(.centro) .pf-acciones>summary::-webkit-details-marker{display:none}
html[data-tema] body:not(.centro) .pf-acciones>summary:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .pf-acciones-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:190px;padding:6px;
  display:flex;flex-direction:column;gap:2px;background:var(--pf-carta);border:1px solid var(--pf-linea);border-radius:12px;
  box-shadow:0 14px 30px rgba(16,40,80,.14) !important;text-align:left}
html[data-tema] body:not(.centro) .pf-acciones-lista form{margin:0}
html[data-tema] body:not(.centro) .pf-acciones-lista :is(a,button){display:block;width:100%;padding:9px 12px;margin:0;border:0;border-radius:8px;
  background:transparent;color:var(--pf-titulo);font-size:14px;font-weight:500;text-align:left;text-decoration:none}
html[data-tema] body:not(.centro) .pf-acciones-lista :is(a,button):hover{background:var(--pf-hover);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-acciones-lista .peligro{color:var(--pf-rojo)}
html[data-tema] body:not(.centro) .pf-acciones-lista .peligro:hover{background:var(--pf-rojo-suave);color:var(--pf-rojo)}
html[data-tema] body:not(.centro) .pf-velo{position:fixed;inset:0;z-index:80;background:rgba(12,28,58,.28)}
html[data-tema] body:not(.centro) .pf-panel-lateral{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(420px,100vw);overflow:auto;
  padding:26px 26px 30px;background:var(--pf-carta);border-left:1px solid var(--pf-linea);box-shadow:-18px 0 40px rgba(16,40,80,.16) !important}
html[data-tema] body:not(.centro) .pf-panel-lateral[hidden],
html[data-tema] body:not(.centro) .pf-velo[hidden]{display:none}
html[data-tema] body:not(.centro) .pf-panel-cabeza{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
html[data-tema] body:not(.centro) .pf-panel-cabeza h3{margin:0;font-size:22px}
html[data-tema] body:not(.centro) .pf-panel-cabeza .estado-sub{margin:4px 0 0}
html[data-tema] body:not(.centro) .pf-panel-forma{display:flex;flex-direction:column;gap:14px}
html[data-tema] body:not(.centro) .pf-panel-forma label{display:flex;flex-direction:column;gap:6px}
html[data-tema] body:not(.centro) .pf-panel-forma input,
html[data-tema] body:not(.centro) .pf-panel-forma select{width:100%;margin:0}
html[data-tema] body:not(.centro) .pf-clave{position:relative;display:block}
html[data-tema] body:not(.centro) .pf-clave input{padding-right:48px}
html[data-tema] body:not(.centro) .pf-ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .pf-ojo:hover{background:var(--pf-hover);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-ojo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
html[data-tema] body:not(.centro) .pf-panel-botones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
html[data-tema] body:not(.centro) .pf-panel-botones button{width:100%}
html[data-tema] body:not(.centro) .pf-persona-textos b{white-space:normal;overflow:visible;line-height:1.3}
html[data-tema] body:not(.centro) .pagina-acciones :is(button,.boton-enlace){width:auto;flex:0 0 auto}
html[data-tema] body:not(.centro) .pagina-acciones{margin-top:6px}

/* 31) PÁGINAS PÚBLICAS EN CLARO (ingreso, recuperar clave, verificar, canal de convivencia).
   La app es solo clara (JuanJo, 2026-09-24): fondo claro, tarjeta con sombra suave y el
   mismo azul de acción. La foto del ingreso se queda: es la cara de la marca. */
html[data-tema] body.centro{background:linear-gradient(160deg,#f5f8fd 0%,#e9f0fb 100%);color:#33465e}
html[data-tema] body.centro .pie{color:#5d6f88;opacity:1}
html[data-tema] body.centro .pie a{color:#1d64f2}
html[data-tema] body.centro .ingreso-caja{box-shadow:0 20px 50px rgba(16,40,80,.14) !important;border:1px solid #e2eaf4}
html[data-tema] body.centro button[type=submit],
html[data-tema] body.centro .boton-enlace{background:#1d64f2;border-color:#1d64f2;color:#fff;border-radius:12px}
html[data-tema] body.centro button[type=submit]:hover,
html[data-tema] body.centro .boton-enlace:hover{background:#1552d1}
html[data-tema] body.centro .olvide,
html[data-tema] body.centro a.mini-enlace{color:#1d64f2}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .pf-cifras-4{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html[data-tema] body:not(.centro) .pf-cifras-4 .pf-cifra{padding:12px 10px}
  html[data-tema] body:not(.centro) .pf-cifras-4 .pf-etiqueta{font-size:12.5px}
}

/* 32) MENÚ UN 35% MÁS COMPACTO (JuanJo, 2026-09-25: «ya tenemos muchas opciones y está muy
   largo»). Opciones de 38 a 25 px de alto, títulos de grupo de 40 a 28 px, letra de 14,5 a
   13 px, íconos de 19 a 16 px y la marca más baja. En el celular las opciones quedan de 32 px
   para que se puedan tocar con el dedo. */
html[data-tema] body:not(.centro){--pf-lateral:240px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral{padding:14px 10px 12px;gap:0}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-marca{padding:0 6px 10px;margin:0 0 4px;gap:9px}
html[data-tema] body:not(.centro) .menu-marca-logo{width:34px;height:34px;flex-basis:34px}
html[data-tema] body:not(.centro) .menu-marca-nombre{font-size:18.5px}
html[data-tema] body:not(.centro) .menu-marca-lema{font-size:11px;margin-top:1px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-grupo{height:28px;margin:4px 0 0;padding:0 8px;gap:8px;
  font-size:13px;border-radius:8px}
html[data-tema] body:not(.centro) .menu-grupo .grupo-icono{width:16px;height:16px;flex-basis:16px}
html[data-tema] body:not(.centro) .menu-lateral .menu-flecha{width:14px;height:14px;flex-basis:14px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral a{height:25px;margin:0;padding:0 8px 0 18px;gap:9px;
  font-size:13px;border-radius:7px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-icono{width:16px;height:16px;flex-basis:16px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-cuenta{height:16px;line-height:16px;min-width:18px;
  padding:0 5px;font-size:10px}
html[data-tema] body:not(.centro) .menu-grupo-cuenta{height:15px;line-height:15px;font-size:9.5px;padding:0 5px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-fijar{height:26px;font-size:12.5px}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral a{height:32px;font-size:14px}
  html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-grupo{height:34px;font-size:14px}
}

/* =====================================================================================
   33. SUBSECCIONES (JuanJo, 2026-09-25): cada entrada del menú junta varias pantallas y
   arriba de cada una van sus pestañas (_pestanas.html). Si no caben, se deslizan de lado.
   ===================================================================================== */
html[data-tema] body:not(.centro) .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-bottom:0;box-shadow:inset 0 -1px 0 var(--pf-linea)}
html[data-tema] body:not(.centro) .pestanas::-webkit-scrollbar{display:none}
html[data-tema] body:not(.centro) .pestanas a{flex:none;white-space:nowrap;margin-bottom:0;
  display:inline-flex;align-items:center;gap:6px}
html[data-tema] body:not(.centro) .pestanas .badge{font-size:11px;padding:1px 7px}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .pestanas{gap:20px;margin:0 0 16px}
}
/* Un grupo de una sola entrada (Administración) no lleva título: la entrada se ve como un título de grupo. */
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-solo a{padding-left:8px;height:28px;
  font-weight:700;color:var(--pf-titulo);gap:8px}
html[data-tema] body:not(.centro) .barra .menu.menu-lateral .menu-solo a.activo{color:var(--pf-azul)}

/* =====================================================================================
   34. ORGANIGRAMA DE ARRIBA HACIA ABAJO (JuanJo, 2026-09-26). Cajas unidas con líneas; un
   equipo de 4 o más personas sin gente a cargo va en un recuadro debajo de su jefe. Si el
   dibujo no cabe, se desliza de lado dentro de su tarjeta (la página nunca).
   ===================================================================================== */
html[data-tema] body:not(.centro) .pf-segmento{display:inline-flex;padding:3px;gap:2px;background:var(--pf-pista);border-radius:10px}
html[data-tema] body:not(.centro) .pf-segmento a{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--pf-texto);text-decoration:none;white-space:nowrap}
html[data-tema] body:not(.centro) .pf-segmento a.activo{background:var(--pf-carta);color:var(--pf-azul);box-shadow:0 1px 3px rgba(12,28,58,.12)}
html[data-tema] body:not(.centro) .org-botones{display:inline-flex;gap:8px}
html[data-tema] body:not(.centro) .org-botones button{padding:6px 12px;font-size:12.5px;white-space:nowrap}
html[data-tema] body:not(.centro) .org-ayuda{margin:0 0 6px;font-size:12.5px}
html[data-tema] body:not(.centro) .org-arbol{overflow-x:auto;padding:6px 2px 18px;--org-linea:var(--pf-linea-2)}
html[data-tema] body:not(.centro) .org-arbol ul{display:flex;justify-content:center;list-style:none;margin:0;padding:24px 0 0;position:relative}
html[data-tema] body:not(.centro) .org-arbol > ul.org-raices{width:max-content;min-width:100%;padding-top:0;gap:36px}
html[data-tema] body:not(.centro) .org-arbol li{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:24px 6px 0}
html[data-tema] body:not(.centro) .org-arbol li::before,html[data-tema] body:not(.centro) .org-arbol li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:24px;
  border-top:2px solid var(--org-linea)}
html[data-tema] body:not(.centro) .org-arbol li::after{right:auto;left:50%;border-left:2px solid var(--org-linea)}
html[data-tema] body:not(.centro) .org-arbol li:only-child{padding-top:0}
html[data-tema] body:not(.centro) .org-arbol li:only-child::before,html[data-tema] body:not(.centro) .org-arbol li:only-child::after{display:none}
html[data-tema] body:not(.centro) .org-arbol li:first-child::before,html[data-tema] body:not(.centro) .org-arbol li:last-child::after{border:0}
html[data-tema] body:not(.centro) .org-arbol li:last-child::before{border-right:2px solid var(--org-linea);border-radius:0 10px 0 0}
html[data-tema] body:not(.centro) .org-arbol li:first-child::after{border-radius:10px 0 0 0}
html[data-tema] body:not(.centro) .org-arbol ul ul::before{content:"";position:absolute;top:0;left:calc(50% - 1px);height:24px;border-left:2px solid var(--org-linea)}
html[data-tema] body:not(.centro) .org-arbol > ul.org-raices > li{padding-top:0}
html[data-tema] body:not(.centro) .org-arbol > ul.org-raices > li::before,html[data-tema] body:not(.centro) .org-arbol > ul.org-raices > li::after{display:none}
html[data-tema] body:not(.centro) .org-arbol details > summary{display:flex;justify-content:center;list-style:none;cursor:pointer}
html[data-tema] body:not(.centro) .org-arbol details > summary::-webkit-details-marker{display:none}
html[data-tema] body:not(.centro) .org-arbol details > summary:focus-visible{outline:none}
html[data-tema] body:not(.centro) .org-arbol details > summary:focus-visible .org-caja{outline:2px solid var(--pf-azul);outline-offset:2px}
html[data-tema] body:not(.centro) .org-caja{position:relative;display:flex;align-items:center;gap:10px;width:206px;padding:9px 11px;text-align:left;
  background:var(--pf-carta);border:1px solid var(--pf-linea);border-radius:14px;box-shadow:0 1px 3px rgba(12,28,58,.06)}
html[data-tema] body:not(.centro) .org-arbol summary:hover .org-caja{border-color:var(--pf-azul)}
html[data-tema] body:not(.centro) .org-caja .pf-avatar{width:34px;height:34px;font-size:12.5px}
html[data-tema] body:not(.centro) .org-datos{display:grid;gap:1px;min-width:0}
html[data-tema] body:not(.centro) .org-nombre{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .org-nombre .badge{font-size:10.5px;padding:0 6px;vertical-align:1px}
html[data-tema] body:not(.centro) .org-cargo{font-size:12.5px;line-height:1.3;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .org-meta{font-size:11.5px;color:var(--pf-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-tema] body:not(.centro) .org-cuantos{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);z-index:1;display:inline-flex;align-items:center;
  justify-content:center;min-width:22px;height:21px;padding:0 7px;border-radius:11px;font-size:11px;font-weight:700;
  background:var(--pf-carta);color:var(--pf-texto);border:1px solid var(--pf-linea-2)}
html[data-tema] body:not(.centro) .org-arbol details:not([open]) > summary .org-cuantos{background:var(--pf-azul);border-color:var(--pf-azul);color:#fff}
html[data-tema] body:not(.centro) .org-arbol details:not([open]) > summary .org-cuantos::before{content:"+"}
html[data-tema] body:not(.centro) .org-yo{border-color:var(--pf-azul);box-shadow:0 0 0 3px var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .org-recuadro{display:grid;grid-template-columns:1fr;gap:6px;padding:10px;
  border:1px dashed var(--pf-linea-2);border-radius:14px;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .org-recuadro-2{grid-template-columns:repeat(2,auto)}
html[data-tema] body:not(.centro) .org-recuadro .org-caja{width:200px;padding:7px 10px;box-shadow:none}
html[data-tema] body:not(.centro) .org-recuadro .org-caja .pf-avatar{width:28px;height:28px;font-size:11px}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .pagina-cabeza .pf-segmento{margin-top:4px}
  html[data-tema] body:not(.centro) .org-recuadro-2{grid-template-columns:1fr}
}

/* Vacaciones desde el ingreso (2026-09-26): fechas y números de la tabla de saldos en un renglón. */
html[data-tema] body:not(.centro) #tabla-saldos td:nth-child(n+2),
html[data-tema] body:not(.centro) #tabla-saldos th{white-space:nowrap}

/* Ingreso (pantallas centradas) en tema oscuro (2026-09-27). */
html[data-tema="oscuro"] body.centro{color-scheme:dark;background:linear-gradient(160deg,#0b1a33 0%,#061124 100%);color:#c4d0e2}
html[data-tema="oscuro"] body.centro .pie{color:#8b9dba}
html[data-tema="oscuro"] body.centro .pie a,
html[data-tema="oscuro"] body.centro a.mini-enlace{color:#6ea2ff}
html[data-tema="oscuro"] body.centro .ingreso-caja{border-color:#1c3052 !important;box-shadow:0 20px 50px rgba(0,0,0,.45) !important}
html[data-tema="oscuro"] body.centro .boton-enlace{background:#2a74ff;border-color:#2a74ff}
html[data-tema="oscuro"] body.centro .ingreso-caja,
html[data-tema="oscuro"] body.centro .tarjeta,
html[data-tema="oscuro"] body.centro .tarjeta-novedad{background:#0e1e38;color:#c4d0e2}
html[data-tema="oscuro"] body.centro :is(h1,h2,h3,label){color:#f2f6fc}
html[data-tema="oscuro"] body.centro :is(.ingreso-sub,.estado-sub,.ojo){color:#8b9dba}
html[data-tema="oscuro"] body.centro :is(input,select,textarea){background:#0b1a31;color:#f2f6fc;border-color:#29426a}
html[data-tema="oscuro"] body.centro :is(input,select,textarea)::placeholder{color:#6c80a0}
html[data-tema="oscuro"] body.centro .ingreso-caja a:not(.boton-enlace){color:#6ea2ff}

/* =====================================================================================
   35. RETIRO DE PERSONAL (punto 6, 2026-09-28): la lista de tareas del retiro, y celdas que
   no se parten (fechas, «Acuse», «0 de 26») en las tablas de firmas y de actas.
   ===================================================================================== */
html[data-tema] body:not(.centro) .retiro-tareas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
html[data-tema] body:not(.centro) .retiro-tarea{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--pf-linea);border-radius:14px;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .retiro-tarea > .badge{flex:none;min-width:88px;text-align:center;margin-top:2px}
html[data-tema] body:not(.centro) .retiro-tarea-cuerpo{display:grid;gap:4px;min-width:0;flex:1}
html[data-tema] body:not(.centro) .retiro-tarea-cuerpo b{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .retiro-tarea-cuerpo p{margin:0}
html[data-tema] body:not(.centro) .retiro-ayuda{font-size:13px}
html[data-tema] body:not(.centro) .retiro-marcar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
html[data-tema] body:not(.centro) .retiro-marcar input{flex:1 1 220px;max-width:460px;min-height:38px}
html[data-tema] body:not(.centro) .retiro-marcar button{width:auto;flex:none;padding:7px 14px}
html[data-tema] body:not(.centro) .retiro-final{margin-top:4px}
html[data-tema] body:not(.centro) .pf-valor.pf-valor-texto{font-size:18px;line-height:1.3}
html[data-tema] body:not(.centro) .badge.gris{background:var(--pf-chip);color:var(--pf-chip-texto)}
html[data-tema] body:not(.centro) .pf-sin-corte,
html[data-tema] body:not(.centro) .tabla td.pf-sin-corte{white-space:nowrap}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .retiro-tarea{flex-direction:column}
}

/* Valor de los equipos a cargo en la hoja de vida (2026-09-28). */
html[data-tema] body:not(.centro) .ficha-afil-valor{grid-column:2;font-size:13px;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .ficha-afil-valor b{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .ficha-activos-total{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--pf-linea);color:var(--pf-texto)}
html[data-tema] body:not(.centro) .ficha-activos-total b{color:var(--pf-titulo)}

/* Foto de perfil (2026-09-28): en la hoja de vida y en el organigrama, en lugar de las iniciales. */
html[data-tema] body:not(.centro) .ficha .ficha-avatar.ficha-avatar-foto{object-fit:cover;padding:0;background:var(--pf-carta)}
html[data-tema] body:not(.centro) .pf-avatar.pf-avatar-foto{object-fit:cover;padding:0;background:var(--pf-carta)}
html[data-tema] body:not(.centro) .ficha-foto-forma{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:-4px 0 14px}
html[data-tema] body:not(.centro) .ficha-foto-forma label.boton-enlace{cursor:pointer;padding:8px 14px}
html[data-tema] body:not(.centro) .ficha-foto-forma:focus-within label.boton-enlace{outline:3px solid var(--pf-azul);outline-offset:2px}
html[data-tema] body:not(.centro) .ficha-foto-forma .estado-sub{font-size:13px;flex:1 1 280px}

/* La foto de perfil también en el menú de la cuenta (2026-09-28). */
html[data-tema] body:not(.centro) img.avatar.avatar-foto{object-fit:cover;padding:0;background:var(--pf-carta)}

/* =====================================================================================
   36. INDUCCIÓN (2026-09-28): los módulos, el visor de diapositivas, las tarjetas que se
   voltean, el repaso y la evaluación. Solo con variables: sirve en claro y en oscuro.
   ===================================================================================== */
html[data-tema] body:not(.centro) .induccion-modulos{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
html[data-tema] body:not(.centro) .induccion-modulo{display:flex;align-items:center;gap:16px;padding:16px 18px}
html[data-tema] body:not(.centro) .induccion-modulo-texto{flex:1;min-width:0;display:grid;gap:2px}
html[data-tema] body:not(.centro) .induccion-modulo-texto b{color:var(--pf-titulo);font-size:16px}
html[data-tema] body:not(.centro) .induccion-modulo-texto p{margin:0}
html[data-tema] body:not(.centro) .induccion-numero{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--pf-azul-suave);color:var(--pf-azul);font-weight:800}
html[data-tema] body:not(.centro) .induccion-visto .induccion-numero{background:var(--pf-verde-suave);color:var(--pf-verde)}
html[data-tema] body:not(.centro) .induccion-visor{max-width:880px}
html[data-tema] body:not(.centro) .induccion-progreso{margin:0 0 16px}
html[data-tema] body:not(.centro) .induccion-diapositiva{min-height:300px;padding:28px 30px;display:flex;flex-direction:column;gap:12px}
html[data-tema] body:not(.centro) .induccion-diapositiva h3{margin:0;font-size:22px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .induccion-portada{font-size:30px !important}
html[data-tema] body:not(.centro) .induccion-texto{font-size:17px;line-height:1.6;margin:0}
html[data-tema] body:not(.centro) .induccion-puntos{margin:0;padding-left:20px;display:grid;gap:10px;font-size:16px;line-height:1.5}
html[data-tema] body:not(.centro) .induccion-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
html[data-tema] body:not(.centro) .induccion-tarjeta{width:auto;min-height:140px;padding:16px;border-radius:14px;cursor:pointer;
  background:var(--pf-azul-suave);color:var(--pf-titulo);border:1px solid var(--pf-azul-borde);font:inherit;text-align:center;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
html[data-tema] body:not(.centro) .induccion-frente{font-weight:800;font-size:17px}
html[data-tema] body:not(.centro) .induccion-reverso{display:none;font-size:14.5px;line-height:1.45;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .induccion-tarjeta[aria-pressed="true"]{background:var(--pf-carta)}
html[data-tema] body:not(.centro) .induccion-tarjeta[aria-pressed="true"] .induccion-frente{display:none}
html[data-tema] body:not(.centro) .induccion-tarjeta[aria-pressed="true"] .induccion-reverso{display:block}
html[data-tema] body:not(.centro) .induccion-repaso{display:grid;gap:8px}
html[data-tema] body:not(.centro) .induccion-repaso button{width:100%;text-align:left}
html[data-tema] body:not(.centro) .induccion-repaso button.bien{background:var(--pf-verde-suave);color:var(--pf-verde-texto);border-color:var(--pf-verde-borde)}
html[data-tema] body:not(.centro) .induccion-repaso button.mal{background:var(--pf-rojo-suave);color:var(--pf-rojo-texto);border-color:var(--pf-rojo-borde)}
html[data-tema] body:not(.centro) .induccion-explicacion{margin:0;padding:10px 12px;border-radius:10px;background:var(--pf-info);color:var(--pf-azul-texto)}
html[data-tema] body:not(.centro) .induccion-navegar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
html[data-tema] body:not(.centro) .induccion-navegar button{width:auto}
html[data-tema] body:not(.centro) .induccion-pregunta{display:grid;gap:8px;padding:18px 20px;margin:0 0 12px;border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .induccion-pregunta legend{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--pf-titulo);padding:0}
html[data-tema] body:not(.centro) .induccion-opcion{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;
  border:1px solid var(--pf-linea);cursor:pointer;font-weight:500}
html[data-tema] body:not(.centro) .induccion-opcion:has(input:checked){border-color:var(--pf-azul);background:var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .induccion-opcion input{width:auto;min-height:0}
html[data-tema] body:not(.centro) .induccion-respuestas{display:grid;gap:6px;margin:10px 0 0}
html[data-tema] body:not(.centro) .induccion-respuestas li.mal small b{color:var(--pf-rojo)}
html[data-tema] body:not(.centro) .induccion-respuestas li.bien small b{color:var(--pf-verde)}
html[data-tema] body:not(.centro) .induccion-intento{margin-top:10px}
html[data-tema] body:not(.centro) .induccion-todos{margin-top:10px}
html[data-tema] body:not(.centro) .induccion-revisar{margin:8px 0 12px}
html[data-tema] body:not(.centro) .induccion-revisar-modulo{margin:8px 0}
@media (max-width:780px){
  html[data-tema] body:not(.centro) .induccion-modulo{flex-wrap:wrap}
  html[data-tema] body:not(.centro) .induccion-diapositiva{padding:20px 18px;min-height:260px}
}
html[data-tema] body:not(.centro) .induccion-diapositiva[hidden],
html[data-tema] body:not(.centro) .induccion-navegar [hidden]{display:none !important}

/* ============================================================ 37. EDITOR DE LA INDUCCIÓN (2026-09-29)
   Módulos del borrador, diapositivas, preguntas, imágenes y reinducción por grupos. Colores solo
   con las variables --pf-* (tema oscuro y claro). */
html[data-tema] body:not(.centro) .editor{max-width:920px}
html[data-tema] body:not(.centro) .editor-modulos{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
html[data-tema] body:not(.centro) .editor-modulo{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  background:var(--pf-hover);border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .editor-modulo-texto{flex:1;min-width:0;display:grid;gap:2px}
html[data-tema] body:not(.centro) .editor-modulo-texto b{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .editor-modulo-texto p{margin:0}
html[data-tema] body:not(.centro) .editor-modulo-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
html[data-tema] body:not(.centro) .editor-modulo-acciones form{display:flex;gap:6px}
html[data-tema] body:not(.centro) .editor-mini{width:auto;min-width:36px;padding:6px 10px;line-height:1}
html[data-tema] body:not(.centro) .editor-mas{width:auto;justify-self:start;padding:7px 14px}
html[data-tema] body:not(.centro) .editor-falta{color:var(--pf-rojo);font-weight:700}
html[data-tema] body:not(.centro) .editor-justo{color:var(--pf-ambar)}
html[data-tema] body:not(.centro) .editor-bien{color:var(--pf-verde)}
html[data-tema] body:not(.centro) .editor-cabeza{display:grid;gap:12px}
html[data-tema] body:not(.centro) .editor-subtitulo{margin:18px 0 10px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .editor-lista{display:grid;gap:12px}
html[data-tema] body:not(.centro) .editor-diapo{display:grid;gap:10px;margin:0;padding:16px 18px;border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .editor-diapo label{display:grid;gap:4px}
html[data-tema] body:not(.centro) .editor-diapo-cabeza{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
html[data-tema] body:not(.centro) .editor-diapo-cabeza b{color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .editor-diapo-cabeza select{width:auto;flex:1 1 200px;max-width:320px}
html[data-tema] body:not(.centro) .editor-acciones{display:flex;gap:6px;margin-left:auto}
html[data-tema] body:not(.centro) .editor-items{display:grid;gap:8px}
html[data-tema] body:not(.centro) .editor-item{display:flex;gap:8px;align-items:flex-start}
html[data-tema] body:not(.centro) .editor-item > input[type="radio"]{width:auto;min-height:0;margin-top:12px}
html[data-tema] body:not(.centro) .editor-item > input:not([type]),html[data-tema] body:not(.centro) .editor-item > textarea{flex:1;min-width:0}
html[data-tema] body:not(.centro) .editor-item.editor-correcta > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){border-color:var(--pf-verde);background:var(--pf-verde-suave)}
html[data-tema] body:not(.centro) .editor-par{flex:1;display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:8px;min-width:0}
html[data-tema] body:not(.centro) .editor-imagen{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;
  border:1px dashed var(--pf-linea-2)}
html[data-tema] body:not(.centro) .editor-imagen img{max-width:220px;max-height:160px;border-radius:10px;object-fit:contain;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .editor-imagen-datos{flex:1 1 240px;display:grid;gap:8px}
html[data-tema] body:not(.centro) .editor-imagen-datos button{width:auto;justify-self:start}
html[data-tema] body:not(.centro) .editor-agregar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
html[data-tema] body:not(.centro) .editor-agregar label{flex:1 1 240px;display:grid;gap:4px}
html[data-tema] body:not(.centro) .editor-agregar button{width:auto}
html[data-tema] body:not(.centro) .editor-guardar{position:sticky;bottom:0;padding:12px 0;background:var(--pf-fondo);z-index:2}
html[data-tema] body:not(.centro) .editor-conteo{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
html[data-tema] body:not(.centro) .induccion-imagen{display:block;max-width:100%;max-height:360px;margin:0 auto 6px;border-radius:12px;object-fit:contain}
html[data-tema] body:not(.centro) .induccion-personas{margin:10px 0 0;padding:12px;border:1px solid var(--pf-linea);border-radius:12px;display:grid;gap:8px}
html[data-tema] body:not(.centro) .induccion-personas-lista{max-height:260px;overflow:auto;display:grid;gap:4px}
html[data-tema] body:not(.centro) .induccion-persona{display:flex;gap:8px;align-items:center;font-weight:500}
html[data-tema] body:not(.centro) .induccion-persona input{width:auto;min-height:0}
html[data-tema] body:not(.centro) .induccion-persona[hidden],html[data-tema] body:not(.centro) #forma-grupo [hidden]{display:none !important}
@media (max-width:640px){
  html[data-tema] body:not(.centro) .editor-modulo{flex-wrap:wrap}
  html[data-tema] body:not(.centro) .editor-par{grid-template-columns:1fr}
  html[data-tema] body:not(.centro) .editor-acciones{margin-left:0}
}
html[data-tema] body:not(.centro) .editor-diapo textarea,html[data-tema] body:not(.centro) .editor-cabeza textarea{min-height:0;resize:vertical}
html[data-tema] body:not(.centro) .editor-diapo input,html[data-tema] body:not(.centro) .editor-diapo textarea,
html[data-tema] body:not(.centro) .editor-diapo select{font-weight:400}
html[data-tema] body:not(.centro) .editor-par{align-items:start}
html[data-tema] body:not(.centro) .editor-descartar{margin-top:10px}
html[data-tema] body:not(.centro) .editor-descartar button{width:auto}

/* ============================================================ 38. APP INSTALABLE (2026-09-29)
   Botón «Instalar la app» del menú de la cuenta, los pasos para iPhone y el escáner del QR. */
html[data-tema] body:not(.centro) .usuario-lista .usuario-instalar{width:100%;min-height:0;padding:10px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--pf-azul);font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}
html[data-tema] body:not(.centro) .usuario-lista .usuario-instalar:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .usuario-lista .usuario-instalar[hidden]{display:none}
html[data-tema] body:not(.centro) .pf-dialogo{max-width:420px;width:calc(100% - 32px);border:1px solid var(--pf-linea);border-radius:18px;
  background:var(--pf-carta);color:var(--pf-texto);padding:24px 22px;box-shadow:var(--pf-sombra)}
html[data-tema] body:not(.centro) .pf-dialogo::backdrop{background:rgba(3,10,24,.6)}
html[data-tema] body:not(.centro) .pf-dialogo h3{margin:0 0 10px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .pf-dialogo ol{margin:0 0 10px;padding-left:20px;display:grid;gap:8px;line-height:1.5}
html[data-tema] body:not(.centro) .pf-dialogo form{margin-top:12px}
html[data-tema] body:not(.centro) .mis-horas-escanear{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
html[data-tema] body:not(.centro) .mis-horas-escanear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html[data-tema] body:not(.centro) .escaner{display:grid;gap:12px;justify-items:center;text-align:center}
html[data-tema] body:not(.centro) .escaner h2{margin:0}
html[data-tema] body:not(.centro) .escaner-marco{position:relative;width:min(100%,420px);aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:var(--pf-hover);border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .escaner-marco video{width:100%;height:100%;object-fit:cover;display:block}
html[data-tema] body:not(.centro) .escaner-guia{position:absolute;inset:18%;border:3px solid var(--pf-azul);border-radius:16px;
  box-shadow:0 0 0 9999px rgba(3,10,24,.35)}
html[data-tema] body:not(.centro) .escaner-estado{margin:0;font-weight:600;color:var(--pf-titulo);min-height:1.5em}
html[data-tema] body:not(.centro) .escaner .novedad-botones{justify-content:center}
@media (prefers-reduced-motion:no-preference){
  html[data-tema] body:not(.centro) .escaner-guia{animation:escaner-pulso 1.8s ease-in-out infinite}
  @keyframes escaner-pulso{50%{border-color:var(--pf-verde)}}
}

/* ============================================================ 39. NOTIFICACIONES AL CELULAR (2026-09-29) */
html[data-tema] body:not(.centro) .notif-texto{margin:0 0 12px;font-weight:600;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .notif-estado .novedad-botones button{width:auto}
html[data-tema] body:not(.centro) .notif-estado [hidden]{display:none !important}
html[data-tema] body:not(.centro) .notif-reglas{display:grid;gap:8px;line-height:1.55}
html[data-tema] body:not(.centro) .notif-dispositivos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html[data-tema] body:not(.centro) .notif-dispositivos li{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 14px;border:1px solid var(--pf-linea);border-radius:12px;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .notif-dispositivos button{width:auto}
html[data-tema] body:not(.centro) .notif-dispositivos .notif-este[hidden]{display:none}

/* ============================================================ 40. INDUCCIÓN: EMPRESA E IMAGEN EN CADA DIAPOSITIVA (2026-09-29) */
html[data-tema] body:not(.centro) .induccion-marca{display:flex;justify-content:space-between;gap:12px;margin:0;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .induccion-empresa{font-weight:800;color:var(--pf-azul)}
html[data-tema] body:not(.centro) .induccion-diapositiva .induccion-imagen{width:100%;height:clamp(150px,30vh,280px);max-height:none;
  object-fit:cover;margin:0;border-radius:12px;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .editor-empresa{margin:0 0 14px;max-width:360px}
html[data-tema] body:not(.centro) .editor-empresa label{display:grid;gap:4px;font-weight:700}

/* ============================================================ 41. CARGA DEL MAESTRO MÁS SEGURA (2026-09-29) */
html[data-tema] body:not(.centro) .casilla{display:flex;gap:8px;align-items:center;margin:10px 0;font-weight:500}
html[data-tema] body:not(.centro) .casilla input{width:auto;min-height:0}
html[data-tema] body:not(.centro) .maestro-cambios summary{cursor:pointer;list-style:none}
html[data-tema] body:not(.centro) .maestro-cambios summary::-webkit-details-marker{display:none}
html[data-tema] body:not(.centro) .maestro-cambios ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px;font-size:13.5px}
html[data-tema] body:not(.centro) .maestro-tabla{overflow-x:auto;max-width:100%}
html[data-tema] body:not(.centro) .maestro-tabla td:last-child{min-width:320px;white-space:normal}
html[data-tema] body:not(.centro) .maestro-aviso{margin:6px 0 0;white-space:normal;line-height:1.45}
html[data-tema] body:not(.centro) .maestro-tabla thead th{position:static}

/* ============================================================ 42. ESPACIO DE LA BASE DE DATOS (2026-09-29) */
html[data-tema] body:not(.centro) .espacio-barra{height:14px;margin:4px 0 14px}
html[data-tema] body:not(.centro) .espacio-amarillo > span{background:var(--pf-ambar)}
html[data-tema] body:not(.centro) .espacio-rojo > span{background:var(--pf-rojo)}
html[data-tema] body:not(.centro) .espacio-grupos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
html[data-tema] body:not(.centro) .espacio-grupo-texto{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
html[data-tema] body:not(.centro) .espacio-grupo-texto b{color:var(--pf-titulo);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================ 43. DATOS POR COMPLETAR (2026-09-29) */
html[data-tema] body:not(.centro) .datos-barra{height:10px;margin:0 0 16px}
html[data-tema] body:not(.centro) .datos-revisiones{list-style:none;margin:0 0 16px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
html[data-tema] body:not(.centro) .datos-revision{display:grid;gap:2px;padding:12px 14px;border-radius:14px;text-decoration:none;
  background:var(--pf-carta);border:1px solid var(--pf-linea);color:var(--pf-texto)}
html[data-tema] body:not(.centro) .datos-revision b{font-size:24px;color:var(--pf-ambar);font-variant-numeric:tabular-nums}
html[data-tema] body:not(.centro) .datos-revision.ok b{color:var(--pf-verde)}
html[data-tema] body:not(.centro) .datos-revision:hover{background:var(--pf-hover)}
html[data-tema] body:not(.centro) .datos-revision.activa{border-color:var(--pf-azul);box-shadow:0 0 0 2px var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .datos-faltas{display:flex;flex-wrap:wrap;gap:6px}
html[data-tema] body:not(.centro) .datos-faltas a{text-decoration:none}

/* ============================================================ 44. REPORTE MENSUAL PARA GERENCIA (2026-09-29) */
html[data-tema] body:not(.centro) .reporte-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin:16px 0}
html[data-tema] body:not(.centro) .reporte-rejilla .pf-tarjeta{margin:0}
html[data-tema] body:not(.centro) .reporte-sub{margin:14px 0 6px;color:var(--pf-titulo);font-size:15px}
html[data-tema] body:not(.centro) .reporte-lista{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
html[data-tema] body:not(.centro) .reporte-para{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px}
@media (max-width:640px){ html[data-tema] body:not(.centro) .reporte-rejilla{grid-template-columns:1fr} }
html[data-tema] body:not(.centro) a.cuentas-ancla{text-decoration:none;color:inherit}
html[data-tema] body:not(.centro) a.cuentas-ancla:hover .ficha-cifra-txt{text-decoration:underline}
html[data-tema] body:not(.centro) .boton-enlace.mini{padding:5px 12px;font-size:.85rem;white-space:nowrap;margin:0}
html[data-tema] body:not(.centro) :is(td,span,small).sin-corte{white-space:nowrap}
html[data-tema] body:not(.centro) td.col-decision{min-width:10rem}
/* Encuestas de clima (2026-09-30) */
html[data-tema] body:not(.centro) .encuesta-editor{list-style:decimal;padding-left:1.4rem;display:grid;gap:var(--space-3)}
html[data-tema] body:not(.centro) .encuesta-editor-fila{border:1px solid var(--pf-linea);border-radius:var(--pf-radio);padding:var(--space-3);display:grid;gap:var(--space-2)}
html[data-tema] body:not(.centro) .encuesta-editor-fila .q-quitar{justify-self:start}
html[data-tema] body:not(.centro) .encuesta-preguntas{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
html[data-tema] body:not(.centro) .encuesta-preguntas fieldset{border:0;margin:0;padding:0}
html[data-tema] body:not(.centro) .encuesta-preguntas legend{font-weight:700;color:var(--pf-titulo);margin-bottom:var(--space-2)}
html[data-tema] body:not(.centro) .encuesta-opciones{display:flex;flex-wrap:wrap;gap:var(--space-2)}
html[data-tema] body:not(.centro) .encuesta-opcion{display:flex;align-items:center;gap:6px;border:1px solid var(--pf-linea);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .encuesta-opcion:has(input:checked){background:var(--pf-azul-suave);border-color:var(--pf-azul);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .encuesta-opcion:focus-within{outline:2px solid var(--pf-azul);outline-offset:2px}
html[data-tema] body:not(.centro) .encuesta-enps .encuesta-opcion{min-width:44px;justify-content:center}
html[data-tema] body:not(.centro) .encuesta-barras{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
html[data-tema] body:not(.centro) .encuesta-barras li{display:grid;grid-template-columns:minmax(120px,220px) minmax(80px,1fr) auto auto;gap:var(--space-3);align-items:center}
html[data-tema] body:not(.centro) .encuesta-barra{height:10px;border-radius:999px;background:var(--pf-linea);overflow:hidden}
html[data-tema] body:not(.centro) .encuesta-barra span{display:block;height:100%;background:var(--pf-azul);border-radius:999px}
html[data-tema] body:not(.centro) .encuesta-comentarios li{margin-bottom:var(--space-2)}
@media (max-width:560px){html[data-tema] body:not(.centro) .encuesta-barras li{grid-template-columns:1fr auto}html[data-tema] body:not(.centro) .encuesta-barra{grid-column:1 / -1}}

/* ---------- Tienda de beneficios (2026-10-11) ---------- */
html[data-tema] body:not(.centro) .tienda-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:16px}
html[data-tema] body:not(.centro) .tienda-producto{display:flex;flex-direction:column;overflow:hidden;background:var(--pf-carta);
  border:1px solid var(--pf-linea);border-radius:var(--pf-radio);box-shadow:var(--pf-sombra)}
html[data-tema] body:not(.centro) .tienda-producto.agotado .tienda-foto img{filter:grayscale(1);opacity:.6}
html[data-tema] body:not(.centro) .tienda-foto{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--pf-hover)}
html[data-tema] body:not(.centro) .tienda-foto img{width:100%;height:100%;object-fit:cover;display:block}
html[data-tema] body:not(.centro) .tienda-cuerpo{display:grid;gap:8px;padding:14px 16px 16px}
html[data-tema] body:not(.centro) .tienda-nombre{margin:0;font-size:17px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .tienda-desc{margin:0;font-size:14px;color:var(--pf-suave);line-height:1.45}
html[data-tema] body:not(.centro) .tienda-precios{list-style:none;margin:0;padding:0;font-size:14px;color:var(--pf-texto);
  font-variant-numeric:tabular-nums;display:grid;gap:2px}
html[data-tema] body:not(.centro) .tienda-dispo{margin:2px 0 0}
html[data-tema] body:not(.centro) .bodega-mini{width:44px;height:55px;object-fit:cover;border-radius:8px;display:block}
html[data-tema] body:not(.centro) .bodega-foto{display:block;max-width:220px;width:100%;border-radius:var(--pf-radio);margin-bottom:12px}
html[data-tema] body:not(.centro) .tienda-cantidad{display:grid;gap:4px;font-size:14px;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .tienda-cantidad input{max-width:110px}
html[data-tema] body:not(.centro) .tienda-total{position:sticky;bottom:12px;margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;padding:14px 18px;background:var(--pf-carta);border:1px solid var(--pf-azul-borde);
  border-radius:var(--pf-radio);box-shadow:var(--pf-sombra);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .tienda-total button{width:auto;margin:0}
html[data-tema] body:not(.centro) .tienda-qr{display:block;width:100%;max-width:260px;border-radius:12px;background:#fff;padding:8px;margin:8px 0}
html[data-tema] body:not(.centro) .tienda-pago-texto{white-space:pre-line}
html[data-tema] body:not(.centro) .tienda-comprobante{display:block;max-width:100%;max-height:520px;border:1px solid var(--pf-linea);border-radius:10px;margin:8px 0}
html[data-tema] body:not(.centro) .tienda-fases{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;padding:0;counter-reset:fase}
html[data-tema] body:not(.centro) .tienda-fases li{counter-increment:fase;padding:7px 14px;border-radius:999px;font-size:14px;
  background:var(--pf-hover);color:var(--pf-suave);border:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .tienda-fases li::before{content:counter(fase) ". "}
html[data-tema] body:not(.centro) .tienda-fases li.hecha{background:var(--pf-verde-suave);color:var(--pf-verde-texto);border-color:var(--pf-verde-borde)}
html[data-tema] body:not(.centro) .tienda-fases li.actual{background:var(--pf-azul-suave);color:var(--pf-azul-texto);border-color:var(--pf-azul-borde);font-weight:700}
html[data-tema] body:not(.centro) .tienda-historia{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--pf-texto)}
/* En el celular (2026-10-11): las casillas a 16 px (con 15 px el iPhone acerca la pantalla al tocarlas, en
   todos los formularios) y en la tienda la foto cuadrada (la 4:5 llenaba la pantalla). */
@media (max-width:600px){
  html[data-tema] body:not(.centro) input:not([type=checkbox]):not([type=radio]):not([type=file]),
  html[data-tema] body:not(.centro) select,
  html[data-tema] body:not(.centro) textarea{font-size:16px}
  html[data-tema] body:not(.centro) .tienda-rejilla{gap:14px}
}
/* Tarifas grandes en el catálogo (JuanJo, 2026-10-11). */
html[data-tema] body:not(.centro) .tienda-tarifas{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
html[data-tema] body:not(.centro) .tienda-tarifa{display:grid;gap:2px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--pf-linea);background:var(--pf-hover);font-variant-numeric:tabular-nums}
html[data-tema] body:not(.centro) .tienda-tarifa.empleado{background:var(--pf-verde-suave);border-color:var(--pf-verde-borde)}
html[data-tema] body:not(.centro) .tienda-tarifa-etq{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .tienda-tarifa.empleado .tienda-tarifa-etq{color:var(--pf-verde-texto)}
html[data-tema] body:not(.centro) .tienda-tarifa-valor{font-size:26px;font-weight:800;line-height:1.1;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .tienda-tarifa.empleado .tienda-tarifa-valor{color:var(--pf-verde-texto)}
html[data-tema] body:not(.centro) .tienda-tarifa.mayor .tienda-tarifa-valor{font-size:21px}
html[data-tema] body:not(.centro) .tienda-tarifa-nota{font-size:13px;color:var(--pf-suave)}
/* Pocas unidades (JuanJo, 2026-10-11): advertencia en el catálogo con 10 o menos. */
html[data-tema] body:not(.centro) .tienda-pocas{display:inline-block;padding:6px 10px;border-radius:10px;font-size:14px;font-weight:700;
  background:var(--pf-ambar-suave);color:var(--pf-ambar-texto);border:1px solid var(--pf-ambar)}
/* Cupo del mes en el catálogo (JuanJo, 2026-10-11). */
html[data-tema] body:not(.centro) .tienda-cupo{margin:0;font-size:14px;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .tienda-cupo b{font-size:16px;color:var(--pf-verde-texto)}
html[data-tema] body:not(.centro) .tienda-cupo-vivo{margin:0;font-size:13.5px;font-weight:600;color:var(--pf-azul-texto)}
/* Todas las fotos del catálogo del mismo tamaño (JuanJo, 2026-10-11): el recuadro es SIEMPRE 4:5 (como las
   imágenes de los productos) y la foto lo llena sin estirarlo, aunque sea más alta o más ancha. */
html[data-tema] body:not(.centro) .tienda-foto{position:relative;aspect-ratio:4/5;min-height:0;flex:0 0 auto;overflow:hidden}
html[data-tema] body:not(.centro) .tienda-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Llave Bre-B en el pedido (JuanJo, 2026-10-13). */
html[data-tema] body:not(.centro) .tienda-llave{display:grid;gap:6px;justify-items:start;margin:10px 0;padding:12px 14px;
  border-radius:12px;border:1px solid var(--pf-azul-borde);background:var(--pf-azul-suave)}
html[data-tema] body:not(.centro) .tienda-llave-valor{font-size:24px;font-weight:800;color:var(--pf-titulo);word-break:break-all;
  font-variant-numeric:tabular-nums;user-select:all}
html[data-tema] body:not(.centro) .tienda-llave button{width:auto;margin:0}
/* Arreglar marcas (2026-10-15). */
html[data-tema] body:not(.centro) .marca-arreglo{padding:12px 0;border-bottom:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .marca-arreglo.anulada > p:first-child{text-decoration:line-through;color:var(--pf-suave)}
html[data-tema] body:not(.centro) .anular-dia{margin:6px 0 14px}
html[data-tema] body:not(.centro) .anular-dia summary{cursor:pointer;color:var(--pf-azul-texto);font-weight:600}

/* ============ ESPACIADO GENERAL (JuanJo, 2026-10-15) ============
   Botones y enlaces seguidos en una misma línea nunca quedan pegados: van en fila con espacio, y si no caben,
   bajan a la siguiente con aire entre líneas. */
html[data-tema] body:not(.centro) .fila-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
html[data-tema] body:not(.centro) .fila-botones .boton-enlace{margin:0}
/* Enlaces cortos separados por «·» (atajos, acciones de una fila de tabla): al partir línea no se tocan. */
html[data-tema] body:not(.centro) a.mini-enlace{display:inline-block;margin-block:3px}

/* Red de seguridad: dos botones-enlace seguidos dentro de un párrafo normal tampoco quedan pegados. */
html[data-tema] body:not(.centro) p:not(.fila-botones) > .boton-enlace + .boton-enlace{margin-left:var(--space-2)}

/* Turnos (2026-10-15): editar y desactivar desde GH › Jornada › Turnos. */
html[data-tema] body:not(.centro) .turno-inactivo td{color:var(--pf-suave)}
html[data-tema] body:not(.centro) .turno-editar{margin:var(--space-4) 0;padding:var(--space-4);border:1px solid var(--pf-linea);
  border-radius:var(--pf-radio);background:var(--pf-hover)}
html[data-tema] body:not(.centro) .turno-editar h4{margin-top:0}

/* Turnos de una persona, día por día (2026-10-15). */
html[data-tema] body:not(.centro) .turno-dia{margin:0 0 var(--space-3);padding:var(--space-3) var(--space-4) var(--space-4);
  border:1px solid var(--pf-linea);border-radius:var(--pf-radio);min-width:0}
html[data-tema] body:not(.centro) .turno-dia legend{padding:0 var(--space-2);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
html[data-tema] body:not(.centro) .turno-dia.pasado{opacity:.75}
html[data-tema] body:not(.centro) .turno-dia .estado-sub{margin:var(--space-2) 0 0}
html[data-tema] body:not(.centro) .turno-descansa{display:inline-flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);font-weight:600}
html[data-tema] body:not(.centro) .turno-descansa input{width:auto;margin:0}
html[data-tema] body:not(.centro) .turno-horas{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
html[data-tema] body:not(.centro) .turno-horas input:disabled{opacity:.45}
html[data-tema] body:not(.centro) .grilla-persona{display:flex;flex-direction:column;align-items:flex-start;gap:2px}

/* Licencias (2026-10-17, como en WCL): tarjeta por cliente, cifras, desplegables y módulos (fase 2). */
html[data-tema] body:not(.centro) .lic-numeros{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
html[data-tema] body:not(.centro) .lic-desplegable{margin:var(--space-3) 0}
html[data-tema] body:not(.centro) .lic-desplegable > summary{cursor:pointer;color:var(--pf-azul-texto);font-weight:600}
html[data-tema] body:not(.centro) .lic-desplegable[open] > summary{margin-bottom:var(--space-2)}
html[data-tema] body:not(.centro) .lic-calc-campo{display:block;max-width:260px}
html[data-tema] body:not(.centro) .lic-calc-precio{font-size:18px;margin:var(--space-3) 0 var(--space-1)}
html[data-tema] body:not(.centro) .lic-tarjeta{padding:var(--space-4) var(--space-5)}
html[data-tema] body:not(.centro) .lic-cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4)}
html[data-tema] body:not(.centro) .lic-cabeza h3{margin:0 0 var(--space-1)}
html[data-tema] body:not(.centro) .lic-cifras{display:flex;flex-direction:column;gap:var(--space-1);text-align:right}
html[data-tema] body:not(.centro) .lic-modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:var(--space-2) var(--space-4)}
html[data-tema] body:not(.centro) .lic-modulo{display:flex;align-items:flex-start;gap:var(--space-2);font-weight:400}
html[data-tema] body:not(.centro) .lic-modulo input{width:auto;margin:3px 0 0}
html[data-tema] body:not(.centro) .enlace-copiar{user-select:all;word-break:break-all}
@media (max-width:600px){
  html[data-tema] body:not(.centro) .lic-cifras{text-align:left}
}

/* Página de pago del cliente (/suscripcion, licencias fase 3): copiada de WCL, con sus nombres de clases. */
body.suscripcion{background:var(--pf-fondo)}
body.suscripcion .ancho-suscripcion{max-width:720px;margin:0 auto;padding:24px 16px 40px}
body.suscripcion .logo-marco{display:inline-block;margin-bottom:var(--space-3)}
body.suscripcion .logo-marco .logo-img{height:44px;width:auto}
body.suscripcion .titulo-bajada{color:var(--pf-suave);margin:0 0 var(--space-4)}
body.suscripcion .tarjeta-novedad{margin:0 0 var(--space-4);padding:var(--space-4) var(--space-5);background:var(--pf-carta);
  border:1px solid var(--pf-linea);border-radius:var(--pf-radio)}
body.suscripcion .tarjeta-novedad.acento-azul{border-left:4px solid var(--pf-azul)}
body.suscripcion .fb-numeros{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-3) 0}
body.suscripcion .pildora{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--pf-hover)}
body.suscripcion .pildora.verde{background:#dcf5e7;color:#13723f}
body.suscripcion .pildora.azul{background:#e1ecff;color:#1d4fb8}
body.suscripcion .formas-pago{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--space-3);
  margin-top:var(--space-3)}
body.suscripcion .forma-pago{border:1px solid var(--pf-linea);border-radius:12px;padding:var(--space-3)}
body.suscripcion .forma-pago.elegida{border-color:var(--pf-azul);box-shadow:0 0 0 2px var(--pf-azul-suave)}
body.suscripcion .forma-pago p{margin:0 0 var(--space-1)}
body.suscripcion .mini-boton{width:auto;padding:6px 14px;margin-top:var(--space-2)}
body.suscripcion .lista-palomas{padding-left:20px}
body.suscripcion .fb-forma{display:flex;flex-direction:column;gap:var(--space-2)}
body.suscripcion .fb-forma label{margin:var(--space-2) 0 0}
body.suscripcion .tj-fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
body.suscripcion .celda-inter{display:flex;align-items:flex-start;gap:var(--space-2);font-weight:400}
body.suscripcion .celda-inter input{width:auto;margin:4px 0 0}
body.suscripcion .boton-grande{padding:14px 20px;font-size:16px;margin-top:var(--space-3)}

/* Marcar con QR: los cuatro eventos (JuanJo, 2026-10-17). Botones grandes del mismo tamaño, el sugerido resaltado. */
html[data-tema] body:not(.centro) .marcar-pregunta{font-size:18px;font-weight:700;color:var(--pf-titulo);margin:var(--space-3) 0 var(--space-2)}
html[data-tema] body:not(.centro) .marcar-eventos{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
html[data-tema] body:not(.centro) .marcar button.marcar-evento{width:100%;min-height:84px;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-size:18px;font-weight:700;border-radius:18px;
  background:var(--pf-carta);color:var(--pf-titulo);border:2px solid var(--pf-linea-2)}
html[data-tema] body:not(.centro) .marcar button.marcar-evento:hover{border-color:var(--pf-azul);color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .marcar button.marcar-evento.sugerido{background:var(--pf-azul);border-color:var(--pf-azul);color:#fff}
html[data-tema] body:not(.centro) .marcar-evento-sugerido{font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;
  background:rgba(255,255,255,.22)}
html[data-tema] body:not(.centro) .marcar-confirmar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
html[data-tema] body:not(.centro) .marcar-confirmar .boton-enlace{margin:0}
@media (max-width:360px){
  html[data-tema] body:not(.centro) .marcar-eventos{grid-template-columns:1fr}
}

/* Escuelas de conducción (módulo de sector, 2026-10-17): semáforo de vencimientos y cifras del tablero. */
html[data-tema] body:not(.centro) .flota-sem{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
html[data-tema] body:not(.centro) .flota-verde{background:#dcf5e7;color:#13723f}
html[data-tema] body:not(.centro) .flota-amarillo{background:#fff3d6;color:#8a5a00}
html[data-tema] body:not(.centro) .flota-rojo{background:#fde2e1;color:#b42318}
html[data-tema] body:not(.centro) .flota-falta{background:#fde2e1;color:#b42318}
html[data-tema="oscuro"] body:not(.centro) .flota-verde{background:rgba(52,199,123,.18);color:#7ee2ad}
html[data-tema="oscuro"] body:not(.centro) .flota-amarillo{background:rgba(255,186,8,.18);color:#ffd166}
html[data-tema="oscuro"] body:not(.centro) .flota-rojo,html[data-tema="oscuro"] body:not(.centro) .flota-falta{background:rgba(240,68,56,.2);color:#ff9a92}
html[data-tema] body:not(.centro) .flota-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:var(--space-3);margin:0 0 var(--space-4)}
html[data-tema] body:not(.centro) .flota-cifra{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);
  background:var(--pf-carta);border:1px solid var(--pf-linea);border-radius:var(--pf-radio);text-decoration:none;color:var(--pf-texto)}
html[data-tema] body:not(.centro) .flota-cifra b{font-size:30px;color:var(--pf-titulo)}
html[data-tema] body:not(.centro) .flota-cifra.rojo b{color:#d92d20}
html[data-tema] body:not(.centro) .flota-doc{padding:var(--space-3) 0;border-bottom:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .flota-doc:last-child{border-bottom:0}
html[data-tema] body:not(.centro) .flota-doc-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
html[data-tema] body:not(.centro) .flota-tipo{padding:var(--space-2) 0;border-bottom:1px solid var(--pf-linea)}
html[data-tema] body:not(.centro) .flota-tipo input[name=nombre]{min-width:220px;flex:1 1 220px}
html[data-tema] body:not(.centro) .flota-tipo input[type=checkbox]{width:auto;margin:0 4px 0 0}
html[data-tema] body:not(.centro) .flota-dias{width:70px !important}
html[data-tema] body:not(.centro) .flota-placa{min-width:110px}
html[data-tema] body:not(.centro) .flota-placa a{white-space:nowrap;font-size:15px;letter-spacing:.03em}