/* STOLZEL OPS — sistema de diseño "Mesa de Tesorería".
 *
 * Dirección elegida por panel de diseño (2026-08-03, ARQUITECTURA §11):
 * back-office bancario — tinta fría, papel blanco, dinero en monoespaciada,
 * doble raya contable como código de estado. El púrpura de marca sale del
 * fondo y se concentra como firma de acción.
 *
 * Regla de la casa: ninguna pantalla define colores propios. Si un color no
 * está acá, se agrega acá — no en la página.
 *
 * Contratos de contraste (WCAG AA, verificados):
 *   texto/blanco 12.1:1 · texto-suave 6.3:1 · marca-800/blanco 12.0:1
 *   semánticos fuertes sobre su suave >= 5.4:1 · borde-campo 3.2:1 (1.4.11)
 *   --texto-tenue 3.9:1 -> SOLO >=18px, placeholders o decorativo. NUNCA datos.
 */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Marca — la paleta oficial de Stolzel (04-sep-2026), la misma que
     web/marca.py: morado #9B2E8C · azul #3157A7 · ciruela #5C185F ·
     grafito #363636. Los lavados se derivan de esos cuatro; el test de
     estilos comprueba que este bloque y web/marca.py digan lo mismo. */
  --marca-900: #363636;  /* tinta institucional: lateral, rayas de libro mayor */
  --marca-800: #5C185F;  /* acción primaria, links — blanco encima 12.0:1 */
  --marca-700: #4E1451;  /* hover del primario: oscurece, nunca aclara */
  --marca-500: #9B2E8C;  /* el magenta del logo: foco en claro e indicadores (6.64:1) */
  --marca-100: #E1C0DC;  /* SOLO sobre oscuro: nav activa, foco en el lateral */
  --marca-050: #F5EAF4;  /* lavado: hover de fila, hover fantasma, chips */
  --acero-500: #3157A7;  /* el azul del logo; portada de ficha, información */

  /* Semánticos: el significado, no el color. Se usan por lo que dicen. */
  --ok-fuerte: #0B6E4F;      --ok-suave: #E6F3ED;
  --alerta-fuerte: #8A4D08;  --alerta-suave: #FCF3E3;
  --critico-fuerte: #B42318; --critico-suave: #FBEAE8;
  --info-fuerte: #3157A7;    --info-suave: #EAEEF6;

  /* Neutros */
  --fondo: #EEF0F4;           /* gris frío de mesa de operaciones */
  --superficie: #FFFFFF;      /* papel */
  --borde: #DFE2EA;           /* cards, contenedores */
  --borde-hairline: #EAECF2;  /* separadores de fila */
  --borde-campo: #8A90A8;     /* inputs y fantasma: 3.2:1, cumple 1.4.11 */
  --texto: #363636;           /* el grafito del logotipo */
  --texto-suave: #5A5F73;     /* labels, th, .sub */
  --texto-tenue: #7D8195;     /* contrato restringido — ver cabecera */

  /* Foco: par claro/oscuro, cero ambigüedad */
  --foco-claro: #9B2E8C;      /* 6.64:1 sobre blanco */
  --foco-oscuro: #E1C0DC;     /* 7.35:1 sobre marca-900 */

  /* Espaciado — escala de 4px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 22px; --e6: 30px; --e7: 42px;

  /* Geometría: el papel se apila con líneas, no con humo */
  --r-s: 6px; --r-m: 8px; --r-l: 10px;
  --r-btn: 8px;               /* controles: 8px lee actual, 6px lee 2015 */
  --sombra-1: 0 1px 2px rgba(23, 26, 46, .05);
  --sombra-2: 0 8px 24px rgba(23, 26, 46, .14);  /* SOLO overlays flotantes */
  /* Relieve de control: dos capas muy bajas. Da forma sin inventar volumen
     — el sistema sigue construido sobre bordes, no sobre humo. */
  --sombra-boton: 0 1px 1px rgba(23, 26, 46, .04), 0 1px 3px rgba(23, 26, 46, .07);
  --sombra-boton-alta: 0 1px 2px rgba(23, 26, 46, .06), 0 3px 8px rgba(23, 26, 46, .10);

  /* Tipografía: Plex Sans para la interfaz, Plex Mono para el dinero.
     Si los woff2 aún no están vendorizados, el stack cae a Segoe/Consolas. */
  --fuente: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fuente-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Layout */
  --lateral-ancho: 248px;   /* las etiquetas en castellano piden más aire */
  /* 1080 dejaba media ventana vacia en un monitor ancho. 1560 aprovecha
     el espacio sin que una linea de texto se vuelva ilegible: la columna de
     lectura real la fija .dos-col, no este tope. */
  --pagina-ancho: 1560px;

  /* Escala tipográfica — 10 pasos y ni uno más. Los 20 tamaños ad-hoc
     (con medios píxeles borrosos en pantallas 1x) colapsaron aquí el
     2026-08-09. Ningún font-size nuevo se escribe en px: se elige un paso. */
  --t-2xs: 10px;  --t-xs: 11px;  --t-sm: 12px;   --t-base: 13px;
  --t-md: 14px;   --t-lg: 16px;  --t-xl: 18px;   --t-2xl: 22px;
  --t-3xl: 27px;  --t-display: 40px;
  --lh-densa: 1.25;   /* chips, badges, celdas de una línea */
  --lh-datos: 1.4;    /* tablas — mínimo legible en datos densos */
  --lh-lectura: 1.55; /* párrafos */

  /* Segunda densidad — ver la doctrina abajo (.lectura) */
  --t-lectura: 15px;                                /* cuerpo cómodo */
  --r-lectura: 14px;                                /* tarjeta blanda */
  --sombra-lectura: 0 2px 9px rgba(23, 26, 46, .10);
  --banda-lavada: #F5EAF4;   /* separar zonas por tinte, no por línea */
}

/* ------------------------------------------------------------------
   DOCTRINA DE LAS DOS DENSIDADES
   (estudio de plataformas 2026-08-16, ESTUDIO_PLATAFORMAS.md §3.7)

   Medimos el sistema de diseño de Buk y encontramos de dónde sale su
   amabilidad: cuerpo de 16-18px, radio 16 en tarjetas, sombra suave en
   vez de borde, y aire. Copiarlo entero sería un error — nuestros 13px
   existen porque la grilla del mes muestra 31 días por 300 personas, y
   con 18px esa grilla no entra en la pantalla.

   Entonces el sistema tiene DOS densidades declaradas:

   · OPERACIÓN (la de siempre, sin clase) — grillas, captura, novedades,
     cierre. Densa, de líneas finas, dinero en monoespaciada. Es una
     herramienta de trabajo y se usa ocho horas por día.

   · LECTURA (clase `.lectura`) — ficha 360, simulador, boleta, y en su
     momento el portal del trabajador y el panel del cliente. Se LEE, no
     se opera: texto más grande, esquinas blandas, sombra en vez de
     borde. Es lo que mira gente de afuera de la operación.

   Regla del ámbito: `.lectura` afloja SOLO lo que se lee de corrido.
   Las tablas que viven adentro conservan la densidad de operación a
   propósito — una tabla de planilla agrandada deja de ser consultable.
   ------------------------------------------------------------------ */
.lectura {
  font-size: var(--t-lectura);
  line-height: var(--lh-lectura);
}
.lectura p, .lectura li, .lectura .dato-ico {
  font-size: var(--t-lectura);
}
/* Los VALORES de la ficha son lo que más se lee de toda la pantalla —
   se le gana a `.datos dd` sumando un elemento, sin !important. */
.lectura .datos dd { font-size: var(--t-lectura); }
.lectura .panel h2 { font-size: var(--t-xl); }
.lectura dl { row-gap: var(--e3); }

/* Las esquinas blandas y la sombra NO se definen acá: la piel «liquida»
   ya le da a todo panel 18px de radio y `0 8px 32px rgba(31,38,135,.08)`
   — medido en pantalla el 2026-08-16, y es más lindo que lo que iba a
   poner. Los tokens --r-lectura y --sombra-lectura quedan declarados
   arriba para superficies futuras que no vivan bajo esa piel (el portal
   del trabajador, el panel del cliente). Si alguien vuelve a escribir
   aquí un border-radius, está peleando una guerra ya ganada.

   La banda sí necesita fuerza propia: `body.liquida .page .panel` pinta
   todo panel de blanco, así que el tinte se impone con una clase más. */
.page .lectura .panel.banda {
  background: var(--banda-lavada);
  box-shadow: none;
}

/* Lo que NO se afloja: los datos densos siguen siendo densos, y el
   dinero sigue en monoespaciada alineado a la derecha. */
.lectura table, .lectura .grilla, .lectura .tabla {
  font-size: var(--t-base);
  line-height: var(--lh-datos);
}

/* ------------------------------------------------------------------
   PUENTE shadcn → piel Stolzel  (ver docs/21st_y_nuestra_piel.md)

   No define un solo color: REEXPORTA los nuestros con el vocabulario
   que usa todo el ecosistema shadcn/21st.dev. Así un snippet de CSS
   ajeno se pega tal cual y sale con NUESTRA paleta — la que tiene los
   contrastes medidos — en vez de con la de un desconocido.

   Nuestros nombres siguen siendo la fuente de verdad. Estos son alias
   de lectura: si algún día se borra este bloque, no se cae nada de la
   casa, solo dejan de entrar snippets sin traducir.
   ------------------------------------------------------------------ */
:root {
  --background: var(--superficie);
  --foreground: var(--texto);
  --card: var(--superficie);
  --card-foreground: var(--texto);
  --popover: var(--superficie);
  --popover-foreground: var(--texto);
  --primary: var(--marca-800);
  --primary-foreground: #FFFFFF;
  --secondary: var(--marca-050);
  --secondary-foreground: var(--marca-800);
  --muted: var(--fondo);
  --muted-foreground: var(--texto-suave);
  --accent: var(--marca-050);
  --accent-foreground: var(--marca-800);
  --destructive: var(--critico-fuerte);
  --destructive-foreground: #FFFFFF;
  --border: var(--borde);
  --input: var(--borde-campo);
  --ring: var(--foco-claro);
  --radius: var(--r-l);

  /* Los controles nativos (scrollbars, select, autofill) renderizan en
     claro coherente con la piel — sin esto, Windows en tema oscuro mete
     controles oscuros sobre papel blanco. */
  color-scheme: light;
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }

body {
  font-family: var(--fuente);
  margin: 0;
  color: var(--texto);
  background: var(--fondo);
}

h1 {
  color: var(--marca-900); font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: -0.2px; margin: 0 0 var(--e1);
}
h2 { color: var(--marca-900); font-size: var(--t-lg); font-weight: 600; margin: var(--e5) 0 var(--e2); }
h3 { color: var(--marca-900); font-size: var(--t-md); font-weight: 600; margin: var(--e4) 0 var(--e2); }
a { color: var(--marca-800); }

.sub {
  color: var(--texto-suave);
  font-size: var(--t-md);
  margin-bottom: var(--e5);
  max-width: 70ch;
  line-height: 1.55;
}

/* Foco de teclado: anillo explícito en cada control, nunca el del navegador. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco-claro);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- cascarón -- */
/* El lateral era tinta oscura de banca. Pasa a papel: en una herramienta que
   se usa ocho horas seguidas, una columna negra fija compite todo el dia con
   el contenido, que es lo unico que deberia pesar. El color de marca queda
   para lo que se puede tocar. */
/* El <aside> sale del flujo (fixed) y el contenido se corre con un
   padding que lo acompaña — el patrón de los dashboards que el dueño
   señaló (shadcn/ui). Nada de encogerle el ancho a un elemento con
   `view-transition-name`, que es lo que no reaccionaba al clic. */
.shell { display: block; min-height: 100vh; background: var(--fondo); }

.lateral {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: var(--lateral-ancho);
  transition: width .15s cubic-bezier(0, 0, .2, 1);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: var(--e4) 0 var(--e3);
  display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
}

.marca {
  padding: 0 var(--e4) var(--e4);
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.2px;
  color: var(--marca-900);
}
.marca small {
  display: block; font-family: var(--fuente-mono); font-size: var(--t-2xs);
  font-weight: 400; color: var(--texto-tenue);
  letter-spacing: 1.4px; margin-top: 3px;
}
/* La marca: el logo pleno y el isologo viven APILADOS en la misma
   celda y se cruzan en fundido cuando el menú se pliega — nada de
   display:none, que no sabe animar. La escala sutil (0.85 → 1) le da
   el remate profesional; con reduced-motion el cruce es instantáneo. */
.marca { display: grid; place-items: center start; min-height: 56px;
  overflow: hidden; }
.marca .logo-pleno, .marca .logo-iso {
  grid-area: 1 / 1; display: block; max-width: 100%;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.marca .logo-pleno { height: 48px; width: auto;
  opacity: 1; transform: scale(1); }
/* El isologo es la ONDA (2,13:1 de aspecto): se dimensiona por ANCHO
   contra el riel plegado de 60px — por alto desbordaba y se cortaba. */
.marca .logo-iso { width: 46px; height: auto; justify-self: center;
  opacity: 0; transform: scale(.85); pointer-events: none; }
/* Plegado, el pleno INVISIBLE también encoge: si conserva su ancho,
   la celda del grid queda más ancha que el riel y corre al isologo
   fuera de cuadro — el bug del isologo cortado. */
:root.menu-plegado .marca { place-items: center; }
:root.menu-plegado .marca .logo-pleno { width: 100%; height: auto;
  opacity: 0; transform: scale(.85); pointer-events: none; }
:root.menu-plegado .marca .logo-iso {
  opacity: 1; transform: scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .marca .logo-pleno, .marca .logo-iso { transition: none; }
}

.ngrp {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--texto-tenue);
  padding: var(--e4) var(--e4) var(--e1);
}

/* Pildora, no barra lateral: el activo se marca por relleno y color, que
   sobrevive mejor a un zoom del 200% que una linea de 3px. */
.nitem {
  display: flex; gap: 11px; align-items: center;
  color: var(--texto-suave); text-decoration: none;
  font-size: var(--t-base); font-weight: 500;
  padding: 9px 12px; margin: 1px var(--e2); border-radius: var(--r-btn);
  transition: background-color .14s ease, color .14s ease;
}
.nitem:hover { background: var(--fondo); color: var(--marca-800); }
.nitem.act {
  background: var(--marca-050); color: var(--marca-800); font-weight: 600;
}
.nitem .ico { display: inline-flex; flex-shrink: 0; opacity: .7; }
.nitem.act .ico, .nitem:hover .ico { opacity: 1; }

/* Pie del menú: quién opera. Con P3 (login) muestra el usuario real. */
.lateral .pie {
  margin-top: auto; padding: var(--e3) var(--e4) 0;
  border-top: 1px solid var(--borde-hairline);
  font-size: var(--t-xs); color: var(--texto-tenue);
}
.lateral .pie .mono { letter-spacing: normal; }

/* Columna derecha: barra superior fija + contenido. */
/* el contenido se corre con padding, no con una columna: mismo truco
   que usa el panel que el dueño señaló, y anima sin pelear con nada */
.principal {
  min-width: 0; display: flex; flex-direction: column;
  padding-left: var(--lateral-ancho);
  transition: padding-left .15s cubic-bezier(0, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .principal { transition: none; }
}

.barra {
  height: 60px; flex-shrink: 0;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: 0 var(--e6);
  position: sticky; top: 0; z-index: 20;
}
.barra .donde { font-size: var(--t-base); color: var(--texto-suave); font-weight: 500; }
.barra .quien {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-sm); color: var(--texto-suave);
}
.barra .quien .ficha-mini {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--marca-050); color: var(--marca-800);
  display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600;
}

/* Centrado: en una ventana más ancha que el tope, el sobrante repartido a los
   dos lados se lee como margen; todo junto a la derecha se lee como que la
   página se quedó corta. */
.page {
  max-width: var(--pagina-ancho); width: 100%;
  margin: 0 auto; padding: var(--e6) clamp(var(--e5), 3vw, var(--e7));
}

/* ------------------------------------------------------------- controles -- */
/* Los botones eran bloques macizos de purpura con esquinas duras: todo pesaba
   lo mismo y nada guiaba. Ahora el peso visual dice la jerarquia — el relleno
   se reserva a la accion principal y el resto vive sobre papel con su borde.
   Radio 8px y transiciones de 160-200ms segun la guia de UI/UX Pro Max. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  background: var(--marca-800); color: #fff;
  border: 1px solid var(--marca-800); border-radius: var(--r-btn);
  padding: 9px 18px; font-size: var(--t-md); font-weight: 600; font-family: inherit;
  line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sombra-boton);
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, color .16s ease, transform .06s ease;
}
button:hover, .btn:hover {          /* oscurece, nunca aclara */
  background: var(--marca-700); border-color: var(--marca-700);
  box-shadow: var(--sombra-boton-alta);
}
/* Tecla hundida: confirmacion fisica de que el click registro. */
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }
button:disabled, .btn[aria-disabled="true"] {
  background: var(--fondo); color: var(--texto-tenue);
  border-color: var(--borde); box-shadow: none;
  cursor: not-allowed; transform: none;
}
/* Verde reservado a confirmaciones contables: confirmar, aprobar, visar. */
button.sec, .btn.sec { background: var(--ok-fuerte); border-color: var(--ok-fuerte); }
button.sec:hover, .btn.sec:hover { background: #095C42; border-color: #095C42; }

/* El secundario es el caso COMUN, no la excepcion: papel con su borde. */
button.fantasma, .btn.fantasma {
  background: var(--superficie); color: var(--marca-800);
  border-color: var(--borde-campo); font-weight: 550;
}
button.fantasma:hover, .btn.fantasma:hover {
  background: var(--marca-050); border-color: var(--marca-800);
  color: var(--marca-700);
}
/* Terciario: sin caja hasta que se lo toca. Para acciones de fila. */
button.plano, .btn.plano {
  background: transparent; color: var(--texto-suave);
  border-color: transparent; box-shadow: none; font-weight: 550;
}
button.plano:hover, .btn.plano:hover {
  background: var(--marca-050); color: var(--marca-800); border-color: transparent;
}
.btn.chico, button.chico { padding: 5px 12px; font-size: var(--t-sm); font-weight: 550; }
/* Boton de solo icono: cuadrado y con area tactil de 40px (guia: 44 minimo
   con separacion, 40 aceptable en escritorio denso). */
.btn.icono, button.icono { padding: 0; width: 40px; height: 40px; }
.btn .ico, button .ico { display: inline-flex; flex-shrink: 0; }

.desc { margin: var(--e4) 0; display: flex; gap: var(--e3); flex-wrap: wrap; }

/* ----------------------------------------------------------------- datos -- */
.cards { display: flex; gap: var(--e3); flex-wrap: wrap; margin: 18px 0; }
.card {
  flex: 1 1 150px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: var(--e4) 20px; box-shadow: var(--sombra-1);
}
.card .n {
  font-size: var(--t-2xl); font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums lining-nums;
}
.card .l {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--texto-suave); margin-top: 2px;
}
/* Estado conciliado: la cifra lleva la doble raya (ver sección signature). */
.card.cerrada .n {
  border-bottom: 3px double var(--texto);
  width: max-content; padding-bottom: 2px;
}

table {
  width: 100%; border-collapse: collapse; background: var(--superficie);
  font-size: var(--t-base); border: 1px solid var(--borde); border-radius: var(--r-m);
  overflow: hidden; box-shadow: var(--sombra-1);
}
th {
  background: #F7F8FA; color: var(--texto-suave); text-align: left;
  padding: var(--e2) var(--e3);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  /* La raya de libro mayor: estructura, siempre presente. */
  border-bottom: 2px solid var(--marca-900);
}
td { padding: 8px var(--e3); border-top: 1px solid var(--borde-hairline); }
tr:hover td { background: var(--marca-050); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--fuente-mono); font-size: var(--t-base); }
/* Negativos: el rojo NUNCA es canal único — van además entre paréntesis
   contables, formateados por web/ui.py::bs(). */
td.num .neg, .neg { color: var(--critico-fuerte); }

/* Fila de totales: la suma existe (raya simple). Solo conciliada lleva doble. */
tr.total td { border-top: 2px solid var(--marca-900); font-weight: 500; }

.mono {
  font-family: var(--fuente-mono); letter-spacing: normal;
  font-feature-settings: 'zero' 1;   /* cero barrado: 0 vs O en CI y cuentas */
}

/* ------------------------------------------------- signature: doble raya -- */
/* La raya simple dice "acá hay una suma"; la doble dice "esta suma es
   palabra mayor". SOLO cifras conciliadas: el total de un período cerrado,
   el neto de la boleta, el veredicto de paridad en cero. Borradores, jamás. */
tr.total.cerrada td, .cifra-cerrada {
  border-top: 1px solid var(--texto);
  border-bottom: 3px double var(--texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.veredicto-cuadra { border-bottom: 3px double var(--ok-fuerte); }

/* Texto de estado en tablas (compat) */
.ok { color: var(--ok-fuerte); font-weight: 600; }
.cent { color: var(--alerta-fuerte); font-weight: 600; }

/* --------------------------------------------------------------- avisos -- */
.aviso {
  background: var(--info-suave); border: 1px solid var(--borde);
  border-left: 3px solid var(--info-fuerte);
  border-radius: var(--r-s); padding: 10px 14px; margin: 7px 0;
  font-size: var(--t-base); line-height: 1.5;
}
.aviso b { color: var(--info-fuerte); }
.aviso.ok      { background: var(--ok-suave);      border-left-color: var(--ok-fuerte); }
.aviso.ok b    { color: var(--ok-fuerte); }
.aviso.alerta  { background: var(--alerta-suave);  border-left-color: var(--alerta-fuerte); }
.aviso.alerta b { color: var(--alerta-fuerte); }
.aviso.critico { background: var(--critico-suave); border-left-color: var(--critico-fuerte); }
.aviso.critico b { color: var(--critico-fuerte); }

/* Compatibilidad con el estándar §7 de formularios (errbox/okbox). */
.errbox {
  background: var(--critico-suave); border: 1px solid var(--borde);
  border-left: 3px solid var(--critico-fuerte);
  padding: 10px 14px; border-radius: var(--r-s); margin: 6px 0; font-size: var(--t-base);
}
.okbox {
  background: var(--ok-suave); border: 1px solid var(--borde);
  border-left: 3px solid var(--ok-fuerte);
  padding: 12px 16px; border-radius: var(--r-s);
}

/* --------------------------------------------------------------- badges -- */
/* Eran sellos entintados en MAYÚSCULAS con borde a plena tinta — el lenguaje
   del formulario en papel. Al lado de la portada y las pestañas nuevas leían
   como de otro sistema. Ahora son píldoras: fondo teñido, texto en su tono
   fuerte, borde apenas insinuado. El borde no desaparece porque una impresora
   no imprime fondos: sin él, en papel el sello se esfuma. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); font-weight: 550; letter-spacing: 0;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: var(--marca-050); color: var(--marca-800);
}
/* El punto de estado: leerlo no depende de distinguir el color de fondo. */
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge.ok      { background: var(--ok-suave);      color: var(--ok-fuerte); }
.badge.alerta  { background: var(--alerta-suave);  color: var(--alerta-fuerte); }
.badge.critico { background: var(--critico-suave); color: var(--critico-fuerte); }
.badge.info    { background: var(--info-suave);    color: var(--info-fuerte); }
.badge.neutro  { background: var(--fondo);         color: var(--texto-suave); }
/* Los sellos largos (la lista de campos que faltan) no llevan punto: ahí el
   texto ya es la información y el punto sólo estorba. */
.badge.largo { font-size: var(--t-sm); }
.badge.largo::before { display: none; }
/* Estado del período — el momento teatral: BORRADOR / CALCULADO / CONCILIADO */
.badge.sello-xl {
  font-size: var(--t-base); padding: 7px 16px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
}

/* ---------------------------------------------------------- estado vacío -- */
.vacio {
  background: var(--superficie); border: 1px dashed #C8CCDA;
  border-radius: var(--r-m);
  padding: var(--e7) var(--e5); text-align: center; color: var(--texto-suave);
}
.vacio .ico { font-size: var(--t-3xl); opacity: .45; display: block; margin-bottom: var(--e2); }
.vacio .ico:has(.kit-medallon) { opacity: 1; font-size: inherit; }
.vacio .ico .kit-medallon { margin: 0 auto var(--e2); }
.vacio b { display: block; color: var(--texto); font-size: var(--t-lg); margin-bottom: var(--e1); }
.vacio p { font-size: var(--t-base); margin: 0 0 var(--e4); }

/* ----------------------------------------------------------- flujo pasos -- */
.pasos { display: flex; gap: var(--e2); align-items: center; margin-bottom: var(--e5); flex-wrap: wrap; }
.pasos .paso {
  display: flex; align-items: center; gap: 7px; font-size: var(--t-base);
  color: var(--texto-suave); white-space: nowrap;
}
.pasos .paso .bola {
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--fuente-mono); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid var(--borde-campo);
  background: var(--superficie); color: var(--texto-suave);
}
.pasos .paso.act { color: var(--marca-900); font-weight: 600; }
.pasos .paso.act .bola { background: var(--marca-800); border-color: var(--marca-800); color: #fff; }
.pasos .paso.hecho { color: var(--ok-fuerte); }
.pasos .paso.hecho .bola { background: var(--ok-suave); border-color: var(--ok-fuerte); color: var(--ok-fuerte); }
.pasos .sep { color: var(--borde-campo); }

/* --------------------------------------------------------------- filtros -- */
.chips { display: flex; gap: var(--e2); flex-wrap: wrap; margin: var(--e3) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm);
  background: var(--marca-050); color: var(--marca-800);
  border: 1px solid #E5DAE5; border-radius: 4px;
  padding: 3px 5px 3px 10px; text-decoration: none;
}
.chip:hover { background: #F5EAF4; }
.chip .x {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 3px; font-size: var(--t-sm); line-height: 1;
  background: rgba(59, 30, 119, .10);
}
.chip:hover .x { background: rgba(59, 30, 119, .22); }

/* --------------------------------------------------------------- zona DnD -- */
.zona {
  background: #FAFBFC; border: 2px dashed var(--borde-campo);
  border-radius: var(--r-m);
  padding: var(--e6); text-align: center; margin-bottom: var(--e4);
}
.zona.encima { border-color: var(--marca-800); background: var(--marca-050); }
.zona input { margin: 10px 0; }

.crono {
  font-family: var(--fuente-mono); font-size: var(--t-md);
  color: var(--ok-fuerte); font-weight: 500; margin: var(--e2) 0;
}

/* ----------------------------------------------------------- expediente -- */
/* La ficha 360. Antes era una pila de <h2> con estilos inline; el problema no
   era el color sino que no había piezas. Éstas son las piezas. */

.hero {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-l); box-shadow: var(--sombra-1);
  margin-bottom: var(--e5); overflow: hidden;
}
/* Portada: la única superficie donde el degradado de marca aparece entero.
   Es decorativa y va marcada como tal — no comunica nada que el texto no diga. */
.hero-tapa {
  height: 160px; position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--marca-800) 0%, #9B2E8C 38%,
              #3157A7 68%, var(--acero-500) 100%);
}
/* La cinta del logotipo, en trazo tenue: le da forma a la portada sin sumar
   una sola petición ni un kilobyte de imagen. */
.tapa-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* La foto monta EXACTAMENTE la mitad sobre la portada. Los 64px que quedan
   debajo de la línea son los que alojan el nombre: con una foto más chica el
   título no entra y se sube al degradado, que es como se veía antes. */
.hero .avatar { width: 128px; height: 128px; border-width: 4px; }
.hero .avatar.ini { font-size: var(--t-display); }
/* Anclaje por ARRIBA, no por abajo. Alineando el bloque de nombre al pie de
   la foto, todo lo que no entra en los 64px de blanco se sube al degradado —
   y el bloque mide 82px, asi que el titulo cruzaba la linea. Anclado arriba
   crece hacia abajo: un nombre largo, un cargo largo o un sello mas nunca
   pueden volver a invadir la portada. */
.hero-info {
  display: flex; align-items: flex-start; gap: var(--e5);
  padding: var(--e3) var(--e5) var(--e4);
}
.hero-info > .avatar, .hero-info > .avatar-caja {
  margin-top: -76px;               /* solo la foto monta sobre la portada */
}
.hero h1 {
  font-size: var(--t-3xl); font-weight: 700; margin: 0;
  letter-spacing: -.5px; line-height: 1.15; color: var(--marca-900);
}
.hero-cuerpo { flex: 1; min-width: 0; }
.hero-acciones {
  display: flex; gap: var(--e2); flex-shrink: 0; padding-bottom: var(--e2);
}
/* Subtítulo: una sola línea con lo que identifica a la persona en la empresa.
   Antes esto era una rejilla de seis campos que competía con el nombre. */
.hero-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e5);
  color: var(--texto-suave); font-size: var(--t-md); margin-top: 7px;
}
.hero-sub a { color: var(--texto-suave); text-decoration: none; }
.hero-sub a:hover { color: var(--marca-800); text-decoration: underline; }

/* Dato con icono: el icono es decorativo y va apagado — el que tiene que
   leerse es el dato, no el dibujo. */
.dato-ico { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dato-ico .ico-mini { flex-shrink: 0; opacity: .55; }
.hero-badges { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: 9px; }
.hero-badges:empty { display: none; }

.avatar {
  width: 96px; height: 96px; flex-shrink: 0; display: block;
  border-radius: 50%; border: 3px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--borde), var(--sombra-1);
  object-fit: cover; background: var(--fondo);
}
.avatar.ini {
  display: grid; place-items: center;
  background: var(--marca-050); color: var(--marca-800);
  box-shadow: 0 0 0 1px #E5DAE5, var(--sombra-1);
  font-size: var(--t-3xl); font-weight: 600; letter-spacing: 1px;
}

/* Organización: cuadrado redondeado y encuadre `contain`. Un logotipo es casi
   siempre apaisado; recortado al centro de un círculo se pierde media marca.
   El fondo blanco es parte del trato — muchos logotipos se entregan sobre
   blanco y sin él quedan sucios. */
.avatar.org {
  border-radius: var(--r-l);
  object-fit: contain; background: var(--superficie); padding: 6px;
}
.hero .avatar.org { border-radius: 14px; }
.avatar-lanza:has(.avatar.org) .avatar-capa { border-radius: 12px; }

/* La foto ES el control para cambiarla: se hace clic encima. */
.avatar-caja { margin: 0; flex-shrink: 0; }
.avatar-lanza { position: relative; display: block; cursor: pointer; }
.avatar-lanza input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip-path: inset(50%);
}
.avatar-capa {
  position: absolute; inset: 3px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 26, 46, .55); color: #fff;
  opacity: 0; transition: opacity .18s ease;
}
.avatar-lanza:hover .avatar-capa { opacity: 1; }
/* Arrastre encima: la capa se muestra y el borde se marca, para que se vea
   dónde va a caer el archivo antes de soltarlo. */
.avatar-lanza.encima .avatar-capa { opacity: 1; background: rgba(59, 30, 119, .72); }
.avatar-lanza.encima .avatar {
  box-shadow: 0 0 0 1px var(--borde), 0 0 0 4px var(--marca-500);
}
/* El foco por teclado tiene que ANUNCIARSE igual que el hover: si no, quien
   navega con Tab llega al control y no ve que lo tiene encima. */
.avatar-lanza:focus-within .avatar-capa { opacity: 1; }
.avatar-lanza:focus-within .avatar {
  box-shadow: 0 0 0 1px var(--borde), 0 0 0 4px var(--foco-claro);
}

/* Texto solo para lectores de pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Etiqueta a la izquierda, valor a la derecha, una fila por dato. Es la forma
   más rápida de leer: el ojo baja por una sola columna de etiquetas en vez de
   saltar en zigzag por una rejilla. Sin rayas entre filas — el espacio ya
   separa, y las rayas convierten datos de identidad en una tabla, que dice
   "estas filas se comparan entre sí" cuando no se comparan con nada. */
.datos { display: flex; flex-direction: column; gap: var(--e5); margin: 0; }
.datos .campo {
  display: grid; grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--e2) var(--e4); align-items: baseline; min-width: 0;
}
.datos dt {
  font-size: var(--t-base); font-weight: 500; color: var(--texto-suave); margin: 0;
}
.datos dd {
  margin: 0; font-size: var(--t-base); color: var(--texto); overflow-wrap: anywhere;
}
.datos dd:empty::before { content: "—"; color: var(--texto-tenue); }

/* Columna estrecha: la etiqueta va arriba y en versalitas, porque a 260px de
   ancho dos columnas dejan al valor sin sitio. */
.datos.apilada .campo { grid-template-columns: 1fr; gap: 2px; }
.datos.apilada { gap: var(--e4); }
.datos.apilada dt {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--texto-suave);
}
/* Dos columnas de datos apilados (rediseño 01-sep): la ficha ancha se
   lee completa sin estirar la página, y el hairline de cada campo da
   el ritmo que la columna sola conseguía con el espacio. */
.datos--dos { display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 var(--e6); }
.datos--dos .campo { padding: 10px 0;
  border-bottom: 1px solid var(--borde-hairline); }
@media (max-width: 760px) {
  .datos--dos { grid-template-columns: 1fr; }
}

/* Pestañas: enlaces reales con su propia URL, no widgets de JavaScript.
   Subrayado en vez de caja — la caja hace que cada pestaña parezca un botón
   y compita con los botones de verdad. */
.tabs {
  display: flex; gap: var(--e5); flex-wrap: wrap;
  border-top: 1px solid var(--borde-hairline);
  padding: 0 var(--e5); margin: 0;
}
.tab {
  padding: 16px 0 14px; font-size: var(--t-lg); font-weight: 500;
  color: var(--texto-suave); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.tab:hover { color: var(--marca-800); border-bottom-color: var(--borde); }
.tab.act {
  color: var(--marca-900); font-weight: 600;
  border-bottom-color: var(--marca-800);
}
.tab .n {
  font-family: var(--fuente-mono); font-size: var(--t-sm);
  background: var(--fondo); color: var(--texto-suave);
  border-radius: 20px; padding: 2px 8px;
}
.tab.act .n { background: var(--marca-050); color: var(--marca-800); }

/* El desplegable de "+ registrar…": es una acción, y tiene que parecerlo. */
summary.mas {
  cursor: pointer; color: var(--marca-800);
  font-weight: 600; font-size: var(--t-base); margin: var(--e3) 0;
  display: inline-block;
}
summary.mas:hover { color: var(--marca-700); }

/* Contenido en dos columnas: lo principal a la izquierda, la ficha de
   referencia a la derecha. Bajo 900px se apilan, la estrecha primero no —
   quien entra viene a leer lo principal. */
.dos-col {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--e5); align-items: start;
}
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }

/* Panel como tarjeta: es lo que hace que el contenido se lea como fichas y no
   como un documento continuo. */
.panel {
  position: relative;
  margin-bottom: var(--e5);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-l); box-shadow: var(--sombra-1);
  padding: var(--e5) var(--e5) var(--e5);
}

/* El botón «Editar» de la esquina. Es el <summary> de un <details>, colocado
   en la cabecera del panel: la acción queda junto a lo que modifica en vez de
   al final de la página. El contenido va antes en el DOM — se lee y se tabula
   primero el dato y después la acción — y se sube visualmente con posición
   absoluta, que no altera ese orden. */
details.editable > summary {
  position: absolute; top: var(--e4); right: var(--e5);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-btn);
  border: 1px solid var(--borde-campo); background: var(--superficie);
  color: var(--marca-800); font-size: var(--t-sm); font-weight: 550;
  cursor: pointer; list-style: none; user-select: none;
  box-shadow: var(--sombra-boton);
  transition: background-color .16s ease, border-color .16s ease;
}
/* El botón flota sobre la cabecera, así que el título necesita reservarle el
   sitio: sin esto un título largo se le mete por debajo. */
.panel:has(> details.editable) > h2 { padding-right: 120px; }
details.editable > summary::-webkit-details-marker { display: none; }
details.editable > summary::marker { content: ""; }
details.editable > summary:hover {
  background: var(--marca-050); border-color: var(--marca-800);
}
details.editable > summary:focus-visible {
  outline: 2px solid var(--foco-claro); outline-offset: 2px;
}
details.editable[open] > summary {
  background: var(--marca-050); border-color: var(--marca-800);
}
details.editable > :not(summary) {
  margin-top: var(--e5); padding-top: var(--e5);
  border-top: 1px solid var(--borde-hairline);
}
.panel > h2:first-child { margin-top: 0; }
.panel-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e5);
}
.panel-cab h2 { margin: 0; }
/* Una tabla dentro de una tarjeta no necesita su propio marco ni su sombra. */
.panel table { border: 0; box-shadow: none; border-radius: 0; }
.panel > table:last-child { margin-bottom: 0; }
.panel-nota {
  color: var(--texto-suave); font-size: var(--t-sm); margin: -2px 0 var(--e2);
  max-width: 70ch;
}

/* --------------------------------------------------------- línea de tiempo -- */
/* El hilo es un borde, no una imagen: sobrevive a la impresora igual que el
   resto de la jerarquía de la casa. */
.crono-linea {
  list-style: none; margin: 0; padding: 0 0 0 var(--e5);
  border-left: 2px solid var(--borde);
}
.crono-linea .ev {
  position: relative; padding: 0 0 var(--e4) var(--e4);
  display: flex; flex-wrap: wrap; gap: 2px var(--e3); align-items: baseline;
}
.crono-linea .ev:last-child { padding-bottom: 0; }
/* El hito: cuadrado como los sellos (radius 4), no punto redondo. */
.crono-linea .ev::before {
  content: ""; position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--superficie); border: 2px solid var(--borde-campo);
}
.crono-linea .ev.ok::before      { border-color: var(--ok-fuerte);      background: var(--ok-suave); }
.crono-linea .ev.alerta::before  { border-color: var(--alerta-fuerte);  background: var(--alerta-suave); }
.crono-linea .ev.critico::before { border-color: var(--critico-fuerte); background: var(--critico-suave); }
.crono-linea .ev.info::before    { border-color: var(--info-fuerte);    background: var(--info-suave); }

.crono-linea time {
  font-family: var(--fuente-mono); font-size: var(--t-sm);
  color: var(--texto-suave); white-space: nowrap;
  min-width: 15ch; flex-shrink: 0;
}
.crono-linea .ev-cuerpo { flex: 1; min-width: 200px; font-size: var(--t-base); }
.crono-linea .ev-cuerpo b, .crono-linea .ev-cuerpo a { color: var(--texto); }
.crono-linea .ev.critico .ev-cuerpo b { color: var(--critico-fuerte); }
.crono-linea .ev.alerta  .ev-cuerpo b { color: var(--alerta-fuerte); }
.crono-linea .det {
  display: block; color: var(--texto-suave); font-size: var(--t-sm); margin-top: 1px;
}

/* Lo que todavía no pasó se lee distinto de lo que ya pasó: raya punteada,
   porque es previsión y no registro. */
.crono-linea.porvenir { border-left-style: dashed; }

/* ----------------------------------------------------------------- grilla -- */
/* La planilla como hoja de cálculo. El lenguaje visual es el de la casa —
   papel, bordes, mono para el dinero — pero el contrato de uso es el de
   Excel: celda seleccionada con anillo, edición en el lugar, y la esquina
   doblada marcando lo pisado a mano (como la nota de una celda de Excel). */
.grilla-panel { padding: 0; overflow: hidden; border-radius: var(--r-l); }
.grilla-envoltura {
  overflow: auto; max-height: calc(100vh - 320px);
  border-radius: var(--r-l) var(--r-l) 0 0;
  /* Ajustable jalando la esquina inferior: cada operador decide cuantas
     filas ve. El alto elegido se guarda por usuario y por planilla
     (grilla.js -> Prefs), asi que cada mes recuerda su tamano. */
  resize: vertical; min-height: 220px;
}
table.grilla {
  border: 0; box-shadow: none; border-radius: 0;
  /* La regla global de <table> trae overflow:hidden (para el radio) y
     eso rompe position:sticky: el encabezado se pega a la tabla, que
     no scrollea, en vez de pegarse al contenedor que si. */
  overflow: visible;
  /* Y border-collapse:collapse rompe lo otro: los bordes pertenecen a la
     RETICULA, no a la celda, asi que la columna fija se pega pero sus
     lineas se van con el scroll. Con separate, cada celda pinta y se
     lleva sus propios bordes. */
  border-collapse: separate; border-spacing: 0;
}
table.grilla thead th {
  position: sticky; top: 0; z-index: 3; background: #F7F8FA;
  white-space: nowrap;
}
table.grilla .fija {
  /* UNA columna pegajosa, patron de libro. (Las mediciones que sugerian un
     corrimiento venian del panel embebido sin composicion de frames — no
     del navegador real.) */
  position: sticky; left: 0; z-index: 2; background: var(--superficie);
  text-align: left; font-weight: 500; white-space: nowrap;
  /* Suave, no libro mayor: la raya negra de 2px era lo mas "recto y
     anticuado" de la tabla. La sombra lateral separa igual y respira. */
  border-right: 1px solid var(--borde);
  box-shadow: 6px 0 8px -6px rgba(23, 26, 46, .10);
  padding: 8px var(--e3);
}
table.grilla thead .fija {
  z-index: 4; background: #F7F8FA;
  position: sticky;              /* el TOP sí funciona: solo vertical */
}
table.grilla td.celda { cursor: cell; position: relative; white-space: nowrap; }
table.grilla td.celda:focus { outline: none; }
table.grilla td.ro { cursor: default; }
table.grilla td.ro.sel {
  box-shadow: inset 0 0 0 2px var(--borde-campo);
  border-radius: 6px;
}
table.grilla td.celda.sel {
  box-shadow: inset 0 0 0 2px var(--marca-800);
  border-radius: 6px;               /* con separate, el radio si funciona */
  background: var(--marca-050);
}
table.grilla td.vacia { color: var(--texto-tenue); }
/* Los totales se distinguen por su FONDO y su raya, no por el peso de
   la letra (Will, 2026-08-17). Venían en 600 y eso rompía la negrita por
   columna sin que se notara la causa: alternar movía 600↔700 —un cambio
   que el ojo no registra— y el operador leía «no funciona». La negrita
   es del operador; ninguna columna se la lleva puesta de fábrica. */
table.grilla td.total {
  background: #F7F8FA; font-weight: 400;
  border-left: 1px solid var(--borde);
}

/* --- el mapa del proyecto: la configuración que rige la planilla, a la
   vista encima de la tabla. Cada dato lleva su fuente porque esa es su
   legitimidad — un % sin norma ni acuerdo al lado es solo un número. */
.mapa .panel-cab { margin-bottom: var(--e4); }
.mapa-nota { font-size: var(--t-sm); color: var(--texto-suave); max-width: 44ch; }
.mapa-datos {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); margin: 0;
}
/* Cada dato es UNA tarjeta de dos líneas exactas: rótulo y valor. Nada se
   parte a una segunda fila al angostar la ventana — lo que no cabe se
   recorta con elipsis y el texto completo vive en el title (tooltip). */
.mapa-dato {
  border: 1px solid var(--borde); border-radius: var(--r-m);
  background: var(--fondo); padding: 8px 12px; min-width: 0;
}
.mapa-dato dt {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-dato dd {
  margin: 1px 0 0; font-family: var(--fuente-mono); font-size: var(--t-md);
  font-weight: 600; color: var(--marca-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-dato small { font-size: var(--t-xs); color: var(--texto-tenue); }

/* --- el look de hoja de cálculo: retícula completa, filas densas, y las
   bandas de color por bloque que usan las propias prefacturas de Stolzel. */
table.grilla.excel td, table.grilla.excel th {
  border-right: 1px solid var(--borde-hairline);
  border-bottom: 1px solid var(--borde-hairline);
  padding: 5px 10px; font-size: var(--t-sm);
}
table.grilla.excel td:last-child, table.grilla.excel th:last-child {
  border-right: 0;
}
table.grilla.excel tbody tr { height: 38px; }
table.grilla.excel tr:hover td { background: var(--info-suave); }
table.grilla.excel tbody tr:hover th.fija { background: var(--info-suave); }
table.grilla.excel tbody tr:hover .quien { color: var(--marca-800);
  text-decoration: underline; }
table.grilla.excel tr:hover td.celda.sel { background: var(--marca-050); }
/* UNA sola columna pegajosa. Dos columnas sticky en una tabla hacen que
   Chromium resuelva mal el anclaje de la segunda (se corría 23px): el N°
   vive DENTRO de la celda del nombre y el problema no puede existir. */
table.grilla .nro-in, .fila-quien .nro-in, .oc-sel-item .nro-in,
.ing-nom .nro-in {
  display: inline-block; min-width: 22px; text-align: right;
  margin-right: 8px; color: var(--texto-tenue);
  font-family: var(--fuente-mono); font-size: var(--t-xs);
}
/* La misma cara que la grilla, en los paneles: N° + circulo + nombre. */
.fila-quien { display: flex; align-items: center; min-width: 0; }
.fila-quien .nro-in, .oc-sel-item .nro-in, .ing-nom .nro-in {
  margin-right: 4px; }
.fila-quien .avatar-chip, .oc-sel-item .avatar-chip,
.ing-nom .avatar-chip { flex: 0 0 auto; margin-right: 6px; }
.fila-nom { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.fila-quien select { min-width: 0; }
.ico-panel { width: 18px; height: 18px; margin-right: 9px;
  vertical-align: -3px; color: var(--texto-suave); }
table.grilla th.fija .ci {
  font-size: var(--t-xs); color: var(--texto-suave);
  letter-spacing: .3px; margin-left: 8px;
}
/* el nombre del trabajador, no los botones que viven a su lado:
   sin el :not() esta regla le pintaba el texto oscuro al botón
   sobre su fondo púrpura y quedaba ilegible */
table.grilla th.fija a:not(.btn) { color: var(--texto); text-decoration: none; }
/* el subrayado y el morado son del NOMBRE; el botón de al lado tiene
   su propio hover y con esta regla se le oscurecía el texto sobre el
   fondo púrpura hasta volverse ilegible */
table.grilla th.fija a:not(.btn):hover {
  color: var(--marca-800); text-decoration: underline;
}
table.grilla th.fija a.btn:hover { color: #fff; text-decoration: none; }
.avatar-chip {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--marca-050); color: var(--marca-800);
  font-size: var(--t-2xs); font-weight: 700; margin-right: 8px; vertical-align: middle;
}

/* Las bandas de grupo del encabezado. Tinte suave: separan sin gritar. */
table.grilla tr.grupos th {
  position: sticky; top: 0; z-index: 3;
  font-size: var(--t-2xs); letter-spacing: 1.2px; text-transform: uppercase;
  text-align: center; padding: 0 8px;
  /* Altura FIJA: la fila de abajo se pega en top:25px, y si esta midiera
     23 o 27 según el font, quedaría una rendija por la que se ve pasar el
     contenido al scrollear. */
  height: 25px; line-height: 25px;
  border-bottom: 1px solid var(--borde);
}
table.grilla thead tr:nth-child(2) th { top: 25px; }
table.grilla thead th.con-titulo {
  white-space: normal; min-width: 86px; max-width: 118px;
  line-height: 1.2; vertical-align: bottom; font-size: var(--t-xs);
  padding-bottom: 5px;
  text-align: center;               /* el titulo centrado, no a la derecha */
}
table.grilla thead th.con-titulo small {
  display: block; font-family: var(--fuente-mono); font-size: var(--t-sm);
  font-weight: 700; color: var(--marca-800); margin-top: 3px;
  letter-spacing: 0;                /* el % es dato, no decoracion: se ve */
}

/* CI, contrato y fechas: casillas propias, de solo lectura. */
table.grilla td.ci { font-size: var(--t-sm); color: var(--texto-suave); }
table.grilla td.fecha { font-size: var(--t-xs); color: var(--texto-suave); white-space: nowrap; }
table.grilla td.contrato { white-space: nowrap; }
table.grilla td.contrato .badge { font-size: var(--t-2xs); padding: 2px 8px; }
/* La fila de un EVENTUAL se distingue de un vistazo: lavado ambar tenue.
   No es decoracion — el regimen eventual es justo donde vivieron los casos
   Ortega y Quispe. */
table.grilla tr.eventual td, table.grilla tr.eventual th.fija {
  background: #FDF9EF;
}
table.grilla tr.grupos .grupo {
  font-weight: 800; font-size: var(--t-sm); letter-spacing: 1.4px;
  /* Relieve: brillo arriba, sombra abajo — la banda como pieza con cuerpo,
     no una etiqueta plana. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
              inset 0 -2px 3px rgba(23, 26, 46, .07);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
/* El módulo se NOTA de arriba a abajo: cada familia tiñe apenas sus celdas
   y arranca con una costura más marcada. */
table.grilla td.g-ing-t  { background: color-mix(in srgb, var(--ok-fuerte) 2.5%, white); }
table.grilla td.g-desc-t { background: color-mix(in srgb, var(--critico-fuerte) 2.5%, white); }
table.grilla td.g-pat-t  { background: color-mix(in srgb, var(--info-fuerte) 2.5%, white); }
table.grilla td.g-prov-t { background: color-mix(in srgb, var(--alerta-fuerte) 2.5%, white); }
table.grilla td.g-oc-t   { background: color-mix(in srgb, #9B2E8C 2.5%, white); }
table.grilla td.g-fac-t  { background: color-mix(in srgb, var(--acero-500) 3.5%, white); }
table.grilla .fam-ini { border-left: 2px solid var(--borde-campo); }
table.grilla tr.grupos .grupo.g-datos,
table.grilla .grupo { border-left: 2px solid var(--borde-campo); }
table.grilla .grupo.g-ing {
  background: color-mix(in srgb, var(--ok-fuerte) 14%, white);
  color: var(--ok-fuerte); border-bottom: 2px solid var(--ok-fuerte);
}
table.grilla .grupo.g-desc {
  background: color-mix(in srgb, var(--critico-fuerte) 12%, white);
  color: var(--critico-fuerte); border-bottom: 2px solid var(--critico-fuerte);
}
table.grilla .grupo.g-pat {
  background: color-mix(in srgb, var(--info-fuerte) 13%, white);
  color: var(--info-fuerte); border-bottom: 2px solid var(--info-fuerte);
}
table.grilla .grupo.g-prov {
  background: color-mix(in srgb, var(--alerta-fuerte) 14%, white);
  color: var(--alerta-fuerte); border-bottom: 2px solid var(--alerta-fuerte);
}
table.grilla .grupo.g-tot,
table.grilla th.g-tot {
  background: color-mix(in srgb, var(--marca-800) 10%, white);
  color: var(--marca-800);
}
table.grilla tr.grupos .grupo.g-tot { border-bottom: 2px solid var(--marca-800); }
table.grilla .grupo.g-datos {
  background: #F1F2F6; color: var(--texto-suave);
  border-bottom: 2px solid var(--borde-campo);
}
table.grilla .sin-grupo { background: #F7F8FA; text-align: left; }

/* El plegador: chico y quieto hasta que hace falta. */
.plegar {
  background: transparent; border: 1px solid var(--borde);
  border-radius: 5px; padding: 2px 8px; margin-left: 6px;
  font: inherit; font-size: var(--t-2xs); letter-spacing: .5px;
  color: var(--texto-suave); cursor: pointer; box-shadow: none;
  text-transform: none;
}
.plegar:hover { background: var(--marca-050); color: var(--marca-800);
  border-color: var(--marca-800); }
/* Una columna oculta por el Desglose desaparece entera: th y todos sus td. */
table.grilla .oculta { display: none; }
/* La esquina del Desglose: la MISMA celda pegajosa que los nombres (una
   sola columna, sin colspan — el colspan era lo que rompía el anclaje).

   La escalera de apilamiento de la grilla, de abajo hacia arriba:
     z2  nombres del cuerpo y pie de sumas   (los td scrollean por debajo)
     z3  encabezados que SÍ scrollean        (bandas y títulos de columna)
     z4  Trabajador, pegajoso a la izquierda (los títulos pasan por debajo)
     z6  esta esquina, pegajosa en AMBOS ejes: nada pasa por encima.
   El selector repite tr.grupos a propósito: la regla general de la fila
   (table.grilla tr.grupos th, especificidad 0-2-3) fijaba z-index 3 y le
   ganaba a un selector más corto — la banda entraba a pintarse SOBRE el
   botón al deslizar. Con 0-3-3 la esquina gana siempre. */
table.grilla tr.grupos th.esquina {
  position: sticky; left: 0; top: 0; z-index: 6;
  background: #F7F8FA; padding: 0;
}

/* Los botones de la esquina sobre Trabajador (Desglose y Mes): la celda
   pegajosa en ambos ejes (z6 — la banda no puede pintarse encima). El
   contenedor va absoluto contra los cuatro bordes de la celda y los
   botones se reparten el espacio real de la fila, mida lo que mida. */
table.grilla th.esquina .esquina-botones {
  position: absolute; inset: 0; display: flex; align-items: stretch;
}
table.grilla th.esquina .tab-grilla {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 0 8px;
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  color: var(--marca-800); background: transparent; cursor: pointer;
  border: 0; border-bottom: 2px solid var(--marca-800);
  border-radius: 0; box-shadow: none; text-transform: none;
}
table.grilla th.esquina .tab-grilla + .tab-grilla {
  border-left: 1px solid var(--borde); flex: 0 0 74px;
}
table.grilla th.esquina .tab-grilla:hover { background: var(--marca-050); }
table.grilla th.esquina .tab-grilla svg { display: block; flex: none; }

/* El menú del Mes: la lista de planillas vigentes del cliente. */
.menu-mes { width: 210px; padding: 6px; }
.mes-opcion {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 10px; border-radius: 6px; font-size: var(--t-base);
  color: var(--texto); text-decoration: none;
  font-family: var(--fuente-mono);
}
.mes-opcion small {
  color: var(--texto-tenue); font-size: var(--t-xs); margin-left: 10px;
  font-family: var(--fuente);
}
.mes-opcion:hover { background: var(--marca-050); color: var(--marca-800); }
.mes-opcion.actual {
  background: var(--marca-050); font-weight: 700; color: var(--marca-800);
}

/* Celda vacía de ENTRADA: se puede tipear; el guión invita, no bloquea. */
table.grilla td.celda.nueva { color: var(--texto-tenue); cursor: cell; }
/* SALIDA: se mira, no se tipea. */
table.grilla td.salida { color: var(--texto); }
/* No corresponde: la decisión a la vista, no un cero disfrazado. */
table.grilla td.nc {
  color: var(--alerta-fuerte); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .5px; text-transform: uppercase;
  background: color-mix(in srgb, var(--alerta-fuerte) 7%, white);
}

/* El pie de sumatorias: la raya de libro mayor y las Σ de cada columna. */
table.grilla tfoot .suma th, table.grilla tfoot .suma td {
  border-top: 2px solid var(--marca-900);
  background: #F7F8FA; font-weight: 700; font-size: var(--t-sm);
  position: sticky; bottom: 0; z-index: 2;
}
table.grilla tfoot .suma th.fija { z-index: 3; }
table.grilla tfoot .suma .liq { color: var(--marca-900); }

/* El menú del clic derecho: una sola decisión, sin adornos. */
.menu-nc {
  position: absolute; z-index: 60;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); box-shadow: var(--sombra-2); padding: 4px;
}
.menu-nc button {
  background: transparent; color: var(--texto); border: 0; box-shadow: none;
  font-size: var(--t-sm); font-weight: 500; padding: 7px 12px; width: 100%;
  text-align: left; border-radius: 5px;
}
.menu-nc button:hover { background: var(--alerta-suave);
  color: var(--alerta-fuerte); }

/* Derivada: calculada de tasa x base definidas en /rules/. Se distingue de
   lo importado (tinta suave y punto de color) sin dejar de ser un numero. */
table.grilla td.derivada { color: var(--texto-suave); position: relative; }
table.grilla td.derivada::before {
  content: ""; position: absolute; left: 3px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; transform: translateY(-50%);
  background: var(--acero-500); opacity: .55;
}

/* Bandas de las familias nuevas. */
table.grilla .grupo.g-jor {
  background: color-mix(in srgb, var(--texto-suave) 12%, white);
  color: var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
}
table.grilla .grupo.g-oc {
  background: color-mix(in srgb, #9B2E8C 12%, white);
  color: #5C185F; border-bottom: 2px solid #9B2E8C;
}
table.grilla .grupo.g-fac {
  background: color-mix(in srgb, var(--acero-500) 14%, white);
  color: var(--acero-500); border-bottom: 2px solid var(--acero-500);
}
/* Gastos administrativos demostrables: la hoja aparte del Excel, con su
   cadena propia. Verde azulado — cobro al cliente, pero no prefactura. */
table.grilla .grupo.g-ga {
  background: color-mix(in srgb, #0F766E 14%, white);
  color: #0F766E; border-bottom: 2px solid #0F766E;
}
table.grilla td.g-ga-t { background: color-mix(in srgb, #0F766E 2.5%, white); }
table.grilla td.jornada { color: var(--texto-suave); }

/* La línea del TOTAL A FACTURAR del resumen: es LA cifra del mes. */
.mapa-dato.total-facturar dd {
  color: var(--marca-900); font-weight: 800; font-size: var(--t-xl);
}
.mapa-dato.total-facturar dt { color: var(--marca-800); font-weight: 700; }

/* El panel del Desglose: flota bajo su boton, estilo Meta Ads pero de la
   casa. Cada columna con su casilla; las sin datos, marcadas y elegibles. */
.desglose {
  position: fixed; z-index: 90;
  width: 300px; max-height: 430px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-l); box-shadow: var(--sombra-2);
  padding: var(--e3);
}
.grilla-panel { position: relative; }
.desglose input[type="search"] {
  width: 100%; padding: 7px 11px; margin-bottom: var(--e2);
  border: 1px solid var(--borde-campo); border-radius: var(--r-btn);
  font: inherit; font-size: var(--t-base);
}
.desglose details { border-bottom: 1px solid var(--borde-hairline);
  padding: 4px 0; }
.desglose summary {
  cursor: pointer; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--texto-suave); padding: 5px 2px;
}
.desglose label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; font-size: var(--t-sm); border-radius: 5px; cursor: pointer;
}
.desglose label:hover { background: var(--marca-050); }
.desglose label small {
  margin-left: auto; font-size: var(--t-2xs); color: var(--texto-tenue);
  border: 1px solid var(--borde); border-radius: 20px; padding: 1px 7px;
}
.desglose input[type="checkbox"] { accent-color: var(--marca-800); }
.desglose-pie { display: flex; justify-content: flex-end; padding-top: var(--e2); }
table.grilla td.total.liq { color: var(--marca-900); }

/* La esquina doblada: esta celda la pisó una persona. Ámbar si todavía no
   dijo por qué — es lo que el cierre del mes va a exigir. */
table.grilla td.pisada::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 9px 9px 0;
  border-color: transparent var(--marca-500) transparent transparent;
}
table.grilla td.pisada { font-weight: 600; color: var(--marca-800); }
table.grilla td.pisada.sin-motivo { background: var(--alerta-suave); }
table.grilla td.pisada.sin-motivo::after {
  border-right-color: var(--alerta-fuerte);
}

/* El editor de celda es UNO solo y FLOTA: no vive dentro del <td> sino
   encima de la tabla, colocado por coordenadas. Tres cosas se ganan con
   eso: el cuerpo de la tabla puede reemplazarse entero (el refresco
   silencioso) sin arrancarle el input de las manos a quien escribe; la
   columna ya no se ensancha al abrir (antes hacían falta `min-width:0`
   y un `size=1` para pelear contra el ancho intrínseco del input); y la
   decoración que viene —rango, esquinita de autorrelleno— tiene capa
   propia donde dibujarse. El tipo, el alineado y los rellenos los copia
   el JS de la celda que tapa: la grilla tiene zoom por sesión y negrita
   por columna, y el editor debe verse como la celda, no como un cuadro
   ajeno posado encima. */
.celda-editor {
  position: fixed; z-index: 50;
  box-sizing: border-box; margin: 0;
  border: 2px solid var(--foco-claro); border-radius: var(--r-s);
  background: var(--superficie); color: var(--texto);
  text-align: right; outline: none;
  box-shadow: var(--sombra-2);
}
.celda-editor[hidden] { display: none; }
/* La celda se fue de cuadro: quedó bajo el encabezado pegajoso, detrás
   de la primera columna fija o fuera del marco al scrollear. El editor
   se aparta de la vista SIN perder el foco ni lo tipeado — se sigue
   escribiendo y Enter confirma igual. */
.celda-editor.fuera { opacity: 0; pointer-events: none; }

/* La tarjeta emergente: clic en un nombre y la persona en resumen, sin
   irse de la grilla. El boton de abajo lleva al perfil completo. */
.tarjeta-persona {
  position: absolute; z-index: 40; width: 300px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-l); box-shadow: var(--sombra-2);
  padding: var(--e4);
}
.tarjeta-persona .tp-cab {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--e3);
}
.tarjeta-persona .tp-cab b { font-size: var(--t-md); color: var(--marca-900); }
.tarjeta-persona .tp-cab small {
  display: block; color: var(--texto-suave); font-size: var(--t-sm);
}
.tarjeta-persona dl {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 0 0 var(--e3); font-size: var(--t-sm);
}
.tarjeta-persona dt { color: var(--texto-suave); }
.tarjeta-persona dd { margin: 0; color: var(--texto); text-align: right; }
.tarjeta-persona .tp-pie { display: flex; justify-content: flex-end; }

/* La barra de la celda: el equivalente de la barra de fórmulas. Vive pegada
   al pie de la grilla y cuenta la historia de la celda seleccionada. */
.barra-celda {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-top: 2px solid var(--marca-900); background: var(--superficie);
  font-size: var(--t-sm); color: var(--texto-suave);
}
.barra-celda .bc-donde { min-width: 180px; }
.barra-celda .bc-donde b { color: var(--texto); }
.barra-celda .bc-datos { display: flex; gap: var(--e3); white-space: nowrap; }
.barra-celda .bc-motivo {
  display: flex; align-items: center; gap: var(--e2); flex: 1; min-width: 240px;
}
.barra-celda .bc-motivo input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--borde-campo);
  border-radius: var(--r-btn); font: inherit;
}
.barra-celda .bc-motivo input:disabled {
  background: var(--fondo); border-color: var(--borde);
}
#bc-estado { font-weight: 600; color: var(--ok-fuerte); white-space: nowrap; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 820px) {
  .hero { flex-wrap: wrap; }
  .hero-acciones { flex-direction: row; width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .crono-linea time { min-width: 100%; }
  .shell { display: block; }
  .lateral { width: 100%; padding-bottom: var(--e2); }
  .lateral .pie { margin-top: var(--e3); }
  .ngrp { padding-top: var(--e2); }
  .page { padding: var(--e5) var(--e4); max-width: 100%; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Contrato de degradación a papel: los bordes son lo único que toda
   impresora respeta — toda la jerarquía está construida sobre ellos.
   La raya de th, tr.total, la doble raya y los bordes de badge imprimen
   nativos porque SON bordes. */
@media print {
  * { box-shadow: none !important; }
  .lateral, .barra, .btn, button, .desc, .pasos,
  .tabs, .hero-tapa, .avatar-capa { display: none !important; }
  .page { max-width: 100%; padding: 0; }
  body { background: #fff; }
  .card, table, .hero { border: 1px solid #999; }
  /* La portada es decoración: en papel sobra y se lleva medio folio de tinta.
     Lo que sí tiene que imprimirse es todo lo demás de la cabecera. */
  .hero-info { margin-top: 0; padding-top: var(--e4); }
}

/* ========================================================= piel líquida -- */
/* La suavidad iOS del mockup de Stitch, en versión LIGERA: fondo blanco
   sin textura, radios generosos, sombras suaves, píldoras y aire — y CERO
   backdrop-filter en superficies grandes. El blur es el efecto más caro
   del compositor (re-desenfoca lo de atrás en cada frame, y el costo
   escala con los píxeles): sobre un fondo liso no compra nada. Solo el
   panel flotante del Desglose lo conserva, porque bajo él sí pasa la
   tabla. Todo lo funcional (celdas pegajosas, z-ladder, tintes, edición)
   queda intacto — acá solo cambian materiales y luz. */
body.liquida .page {
  background: #FFFFFF;
  min-height: 100%;
}
body.liquida .page .panel,
body.liquida .page .card {
  background: #FFFFFF;
  border: 1px solid rgba(23, 26, 46, .08);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, .08);
}
body.liquida .grilla-envoltura { border-radius: 0; }

/* encabezados serenos, tipografía calma */
body.liquida table.grilla thead th { background: #F9F2F8; }
body.liquida table.grilla tr.grupos .grupo {
  /* fuera el relieve 3D: las bandas son serenas y la identidad de cada
     módulo queda en su subrayado de color (que se conserva). */
  box-shadow: none; text-shadow: none;
  font-weight: 700; font-size: var(--t-xs); letter-spacing: 1.3px;
  color: #64748B; background: #F9F2F8;
}
body.liquida table.grilla th.g-tot {
  background: #F5EAF4; color: var(--marca-800);
}
body.liquida table.grilla .fija { background: #F9F2F8; }
body.liquida table.grilla thead .fija,
body.liquida table.grilla tr.grupos th.esquina {
  background: #F9F2F8;
}
body.liquida table.grilla .fam-ini {
  border-left-color: rgba(100, 116, 139, .28);
}

/* tintes de módulo en versión translúcida: se notan sobre el vidrio */
body.liquida table.grilla td.g-ing-t  { background: rgba(5, 150, 105, .04); }
body.liquida table.grilla td.g-desc-t { background: rgba(220, 38, 38, .035); }
body.liquida table.grilla td.g-pat-t  { background: rgba(2, 132, 199, .04); }
body.liquida table.grilla td.g-prov-t { background: rgba(217, 119, 6, .04); }
body.liquida table.grilla td.g-oc-t   { background: rgba(124, 58, 237, .04); }
body.liquida table.grilla td.g-fac-t  { background: rgba(71, 85, 105, .05); }
body.liquida table.grilla td.g-ga-t   { background: rgba(15, 118, 110, .045); }

/* filas: más aire, divisores de pelo, hover que ilumina sin mover nada
   (transform en <tr> desancla las celdas pegajosas en Chromium) */
body.liquida table.grilla.excel tbody tr { height: 44px; }
body.liquida table.grilla td, body.liquida table.grilla tbody th.fija {
  border-color: rgba(120, 130, 155, .16);
}
body.liquida table.grilla.excel tr:hover td {
  background: #F4F6FE;
}
body.liquida table.grilla.excel tbody tr:hover th.fija {
  background: #F4F6FE;
}
body.liquida table.grilla tr.eventual td,
body.liquida table.grilla tr.eventual th.fija {
  background: #FDF9EF;
}

/* la píldora de estado con su punto, como el mockup */
body.liquida table.grilla .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 3px 10px;
}
body.liquida table.grilla .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* pie de sumas y barra de edición: vidrio sobre vidrio */
body.liquida table.grilla tfoot .suma th,
body.liquida table.grilla tfoot .suma td {
  background: #FAFAFE;
  border-top: 2px solid rgba(71, 85, 105, .30);
}
body.liquida .barra-celda {
  background: #FFFFFF;
  border-top: 1px solid rgba(148, 163, 184, .25);
}
body.liquida .barra-celda input {
  background: #FFFFFF;
  border: 1px solid rgba(148, 163, 184, .40); border-radius: 10px;
}
body.liquida #bc-revertir {
  background: #FFFFFF; color: var(--marca-800);
  border: 1px solid #E5DAE5; border-radius: 10px; font-weight: 600;
  transition: transform 160ms ease, background 160ms ease;
}
body.liquida #bc-revertir:hover { background: var(--marca-050); }
body.liquida #bc-revertir:active { transform: scale(.96); }

/* el panel del Desglose, flotante y esmerilado: el ÚNICO blur de la piel
   — es chico y bajo él sí pasa la tabla, ahí el vidrio se ve de verdad */
body.liquida .desglose {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, .30); border-radius: 16px;
}

/* barra de scroll fina y discreta */
body.liquida .grilla-envoltura::-webkit-scrollbar { height: 9px; width: 9px; }
body.liquida .grilla-envoltura::-webkit-scrollbar-track {
  background: rgba(23, 26, 46, .05); border-radius: 5px;
}
body.liquida .grilla-envoltura::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .38); border-radius: 5px;
}
body.liquida .grilla-envoltura::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .60);
}

/* Cada persona con su tono, como los contactos de iOS: el id elige de una
   paleta fija de 8 — estable entre visitas, sin estado que mantener. */
.avatar-c0 { background: #E0E7FF; color: #4338CA; }
.avatar-c1 { background: #DBEAFE; color: #1D4ED8; }
.avatar-c2 { background: #F3E8FF; color: #7E22CE; }
.avatar-c3 { background: #FFE4E6; color: #BE123C; }
.avatar-c4 { background: #CCFBF1; color: #0F766E; }
.avatar-c5 { background: #FFEDD5; color: #C2410C; }
.avatar-c6 { background: #CFFAFE; color: #0E7490; }
.avatar-c7 { background: #ECFCCB; color: #4D7C2F; }

/* ------------------------------------------- portafolio del índice ------ */
/* Cliente → proyecto → meses con <details> nativo: desplegable sin
   JavaScript, accesible, sin nada que romper. La jerarquía del mockup de
   Stitch (recursos/stitch_aura_hr) hablada en el idioma de la casa. */
.portafolio { padding: var(--e3); }
.portafolio summary { list-style: none; cursor: pointer; }
.portafolio summary::-webkit-details-marker { display: none; }
.portafolio .chev { transition: transform 200ms ease; color: var(--texto-tenue); flex: none; }
.portafolio details[open] > summary > .chev { transform: rotate(180deg); }

.cli > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 12px; transition: background 160ms ease;
}
.cli > summary:hover { background: var(--marca-050); }
.cli[open] > summary { background: #F9F2F8; }
.cli + .cli { border-top: 1px solid var(--borde-hairline); margin-top: 4px; }
.cli .avatar-chip {
  width: 36px; height: 36px; border-radius: 11px; font-size: var(--t-sm);
  margin-right: 0;
}
/* El logo real del cliente cuando lo hay. `contain` y no `cover`: un
   logotipo recortado deja de ser el logotipo de nadie. Fondo blanco
   porque casi todos vienen con transparencia pensada para papel. */
.logo-cli {
  object-fit: contain; padding: 3px; background: var(--superficie);
  border: 1px solid var(--borde-hairline);
}
.cli-nombre { font-weight: 600; font-size: var(--t-lg); color: var(--texto); }
.cli-meta {
  color: var(--texto-suave); font-size: var(--t-sm);
  margin-left: auto; margin-right: 6px;
}

.proy {
  margin: 2px 12px 12px 60px; padding: 4px;
  background: #FBFBFD; border: 1px solid var(--borde-hairline);
  border-radius: 12px;
}
.proy > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; font-weight: 600; font-size: var(--t-base);
  color: var(--texto);
}
.proy > summary:hover { background: var(--marca-050); }
.proy > summary svg:first-child { color: var(--marca-800); }
.proy > summary .chev { margin-left: auto; }

.meses {
  margin: 2px 10px 8px 26px; padding-left: 12px;
  border-left: 2px solid #F5EAF4; display: grid; gap: 2px;
}
.mes-fila {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 8px; text-decoration: none; color: var(--texto);
  font-size: var(--t-base); transition: background 140ms ease;
}
.mes-fila:hover { background: var(--marca-050); }
.mes-fila .per { font-family: var(--fuente-mono); font-weight: 600; }
.mes-fila small { color: var(--texto-suave); }
.mes-fila .monto {
  margin-left: auto; font-family: var(--fuente-mono); font-weight: 600;
  color: var(--marca-900);
}

/* Las bandas arrastrables: mano al agarrar, sombra al pasar por encima. */
table.grilla tr.grupos .grupo[draggable="true"] { cursor: grab; }
table.grilla tr.grupos .grupo.arrastrada { opacity: .45; }
table.grilla tr.grupos .grupo.sobre {
  outline: 2px dashed var(--marca-800); outline-offset: -2px;
}

/* Paneles desplegables (Resumen, Reglas normativas, Auditoría): mismo
   lenguaje que el portafolio — <details> nativo, chevron que gira. */
details.panel.plegable > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
details.panel.plegable > summary::-webkit-details-marker { display: none; }
details.panel.plegable > summary h2 { margin: 0; }
details.panel.plegable > summary .chev {
  transition: transform 200ms ease; color: var(--texto-tenue);
  margin-left: auto;
}
details.panel.plegable[open] > summary .chev { transform: rotate(180deg); }
details.panel.plegable[open] > summary { margin-bottom: var(--e4); }

/* El fantasma del drag de familias: el sector de la tabla en la mano —
   inclinado, con sombra profunda, siguiendo al puntero. */
.fantasma-familia {
  position: fixed; z-index: 300; pointer-events: none;
  transform: rotate(2.5deg) scale(1.02); transform-origin: top left;
  max-width: 340px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(23, 26, 46, .28),
              0 4px 12px rgba(23, 26, 46, .16);
  border-collapse: collapse; font-size: var(--t-xs); opacity: .96;
}
.fantasma-familia td, .fantasma-familia th {
  padding: 4px 8px; border: 1px solid var(--borde-hairline);
  white-space: nowrap; max-width: 110px; overflow: hidden;
  text-overflow: ellipsis;
}
table.grilla tr.grupos .grupo.en-vuelo { opacity: .4; }
body.arrastrando-familia { cursor: grabbing; user-select: none; }
body.arrastrando-familia table.grilla { cursor: grabbing; }
table.grilla tr.grupos .grupo { user-select: none; }

/* El diálogo de la casa para pedir un motivo (No corresponde). */
.velo-dialogo {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(23, 26, 46, .35);
  display: flex; align-items: center; justify-content: center;
}
.velo-dialogo .dialogo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; box-shadow: var(--sombra-2);
  padding: var(--e5); width: min(420px, 92vw);
}
.velo-dialogo h3 { margin: 0 0 var(--e3); font-size: var(--t-lg); }
.velo-dialogo input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: var(--t-base);
  border: 1px solid var(--borde-campo); border-radius: 9px;
}
.velo-dialogo input.falta { border-color: var(--critico-fuerte); }
.dialogo-botones {
  display: flex; justify-content: flex-end; gap: var(--e2);
  margin-top: var(--e4);
}

/* El estado del mes en el portafolio: pill con punto, como el contrato. */
.mes-fila .mes-estado { margin-left: auto; }
.mes-fila .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 3px 10px;
}
.mes-fila .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* La tabla de auditoría: compacta, cronológica, sin adornos. */
table.auditoria { width: 100%; }
table.auditoria th {
  font-size: var(--t-xs); letter-spacing: .8px; text-transform: uppercase;
  color: var(--texto-suave); text-align: left;
}
table.auditoria td { font-size: var(--t-sm); padding: 6px 10px; }
table.auditoria td.mono {
  font-family: var(--fuente-mono); font-size: var(--t-sm);
  color: var(--texto-suave); white-space: nowrap;
}

/* La familia Finiquito: la liquidación con voz propia. Rosa profundo —
   cierre de ciclo, ni ingreso ni ocurrencia genérica. */
table.grilla .grupo.g-fin {
  background: color-mix(in srgb, #BE185D 12%, white);
  color: #9D174D; border-bottom: 2px solid #BE185D;
}
table.grilla td.g-fin-t { background: color-mix(in srgb, #BE185D 2.5%, white); }
body.liquida table.grilla td.g-fin-t { background: rgba(190, 24, 93, .04); }

/* ---- formularios bajo la grilla: gastos adm y ocurrencias del mes ----
   La última columna (botones) es FIJA: con `auto`, cada fila-grid medía
   la suya y las columnas bailaban entre filas — títulos desplazados. */
.ga-fila {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 90px 120px 120px 156px;
  gap: 8px; align-items: center; margin: 4px 0;
}
.oc-fila {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 1fr) 158px 104px 110px 156px;
  gap: 8px; align-items: center; margin: 4px 0;
}
.ga-encab { font-size: var(--t-sm); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--borde); padding-bottom: 4px; }
.ga-fila input, .oc-fila input, .oc-fila select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie);
  min-width: 0; width: 100%; box-sizing: border-box; }
.ga-fila input.num, .oc-fila input.num { text-align: right;
  font-family: var(--fuente-mono); }
.ga-fila .num, .oc-fila .num { text-align: right; }
.ga-botones { display: flex; gap: 6px; justify-content: flex-end; }
.ga-nueva input, .oc-nueva input, .oc-nueva select {
  border-style: dashed; }

/* Selector múltiple de trabajadores (ocurrencias): agrupado por cargo,
   con «Todos», check por cargo y lista de elegidos con quitar fácil. */
.oc-sel { position: relative; min-width: 0; }
/* Con cara de CONTROL, no de texto suelto: borde firme, chevron y
   hover — punteado blanco sobre blanco era invisible. */
.oc-sel-btn { font: inherit; width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 6px 10px; border: 1px solid var(--borde-campo);
  border-radius: 8px; background: var(--superficie); cursor: pointer;
  color: var(--texto); }
.oc-sel-btn::after { content: "▾"; color: var(--texto-suave);
  flex: none; }
.oc-sel-btn:hover { border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-050);
  /* el hover global de button pinta marca-700 y tapaba el texto —
     este es un control de formulario, no un boton de accion */
  background: var(--superficie); color: var(--texto); }
/* El panel crece hasta el nombre más largo: cada trabajador en UNA
   línea («JOSUE PABON», no partido en dos), todo colgado del borde
   izquierdo. */
.oc-sel-panel { position: absolute; z-index: 40; top: calc(100% + 4px);
  left: 0; width: max-content; min-width: 300px; max-width: 480px;
  max-height: 320px; overflow: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(23, 26, 46, .18);
  padding: 8px 10px; }
/* El panel vive dentro del form .oc-fila, cuyo input{width:100%}
   alcanzaba TAMBIEN a estos checkboxes: una caja invisible de 105px
   que empujaba nombres y cargos al borde derecho (la captura de Will
   lo desnudo). El checkbox mide lo que mide un checkbox. */
.oc-sel-panel input[type='checkbox'] {
  width: 15px; height: 15px; flex: 0 0 auto; margin: 0; padding: 0; }
.oc-sel-panel label { display: flex; gap: 8px; align-items: center;
  justify-content: flex-start; text-align: left;
  font-size: var(--t-base); padding: 3px 4px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; }
.oc-sel-panel label:hover { background: var(--marca-050);
  color: var(--texto); }
.oc-sel-grupo { margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--borde); }
.oc-sel-grupo > label { font-weight: 700; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto); }
.oc-sel-item { margin-left: 18px; }
.oc-sel-todos { font-weight: 700; }
.oc-chips { display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start; margin: 6px 0 2px; }
.oc-chip { display: inline-flex; gap: 8px; align-items: center;
  font-size: var(--t-sm); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 2px 6px 2px 12px; }
.oc-chip button { border: 0; background: none; cursor: pointer;
  color: var(--critico-fuerte); font-size: var(--t-sm); padding: 2px 6px; }

/* Pagos por acuerdo: la MISMA gramatica que Ocurrencias (oc-fila,
   ga-encab, badges, .chico) con dos agregados: la fila de lectura se
   abre para editar (details) y el alta vive plegada. */
.ing-fila {
  grid-template-columns: minmax(140px, 1fr) minmax(148px, 1.1fr) 100px 100px minmax(240px, 1.4fr) 56px;
}
/* El display de autor le gana a la regla del navegador que esconde el
   contenido de un details cerrado: sin esta guardia, TODOS los
   formularios de edicion quedaban desplegados a la vez. */
details.ing-det:not([open]) > *:not(summary) { display: none; }
summary.ing-fila { cursor: pointer; list-style: none; }
summary.ing-fila::-webkit-details-marker { display: none; }
summary.ing-fila:hover { background: var(--fondo); border-radius: 8px; }
.ing-conc { color: var(--texto-suave); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ing-nom { display: flex; align-items: center; min-width: 0; }
.ing-monto { font-family: var(--fuente-mono); }
.ing-mes { font-weight: 600; }
.ing-sellos { display: flex; gap: 4px; flex-wrap: wrap; }
.ing-sellos .badge { white-space: nowrap; }
.ing-fila .btn.fantasma { padding: 2px 9px; }
/* El formulario NO vive en la grilla de columnas de lectura: cada
   control con su ancho natural — el monto no se estira, el select de
   modo no se aplasta y los checkboxes miden lo que un checkbox mide. */
.ing-editar { display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; padding: 6px 4px 10px 12px; }
.ing-editar input, .ing-editar select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie);
  box-sizing: border-box; }
.ing-editar input.num { text-align: right; font-family: var(--fuente-mono);
  width: 118px; }
.ing-editar select { min-width: 218px; }
.ing-editar input[name='nombre'] { flex: 1 1 250px; }
.ing-editar .ga-botones { margin-left: auto; }
.ing-marcas { display: flex; gap: 16px;
  font-size: var(--t-sm); color: var(--texto-suave); }
.ing-marcas label { display: flex; gap: 6px; align-items: center;
  white-space: nowrap; }
.ing-marcas input[type='checkbox'] { width: 15px; height: 15px;
  padding: 0; margin: 0; flex: 0 0 auto; }
.ing-nueva input, .ing-nueva select { border-style: dashed; }
.ing-mas { cursor: pointer; color: var(--texto-suave);
  font-size: var(--t-sm); padding: 8px 0 2px; list-style: none;
  width: fit-content; }
.ing-mas::-webkit-details-marker { display: none; }
.ing-mas:hover { color: var(--texto); }
.ing-como > summary { cursor: pointer; font-size: var(--t-sm);
  color: var(--texto-suave); list-style: none; width: fit-content;
  margin: -4px 0 6px; text-decoration: underline dotted; }
.ing-como > summary::-webkit-details-marker { display: none; }

/* ================================================== plataforma 2026 -- */
/* Paquete perceptual del 2026-08-09: navegación con transición, avisos
   vivos, números tabulares y los dos candados nuevos de WCAG 2.2.
   Todo CSS puro con degradación silenciosa — donde el navegador no
   soporta algo, simplemente no pasa nada. */

/* Transición entre documentos: la navegación desliza en vez de
   parpadear. El lateral y la barra conservan su identidad y no se
   repintan visualmente al cambiar de página. */
@view-transition { navigation: auto; }
.lateral { view-transition-name: lateral; }
.barra   { view-transition-name: barra; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .18s;
}

/* Movimiento reducido: la preferencia del sistema manda sobre TODA
   animación de la casa — vestibular primero, estética después. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Barra de progreso de 2px bajo la barra superior: HTMX marca el body
   con .htmx-request mientras viaja una petición boosted. */
#progreso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--marca-500), var(--marca-100));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease; pointer-events: none;
}
.barra { position: relative; }
body.htmx-request #progreso {
  transform: scaleX(.85);
  transition: transform 8s cubic-bezier(.1, .8, .2, 1);
}

/* Avisos flash: confirmación visible de que la acción ocurrió. Se
   descartan solos por animación; lo crítico se queda hasta que se lee. */
.avisos { position: sticky; top: 0; z-index: 90; padding: 0 var(--e5); }
.aviso-flash {
  margin: var(--e2) 0 0; padding: var(--e2) var(--e4);
  border-radius: var(--r-m); font-size: var(--t-base);
  border: 1px solid var(--ok-fuerte);
  background: var(--ok-suave); color: var(--ok-fuerte);
  box-shadow: var(--sombra-1);
  animation: aviso-sale 6s forwards;
}
.aviso-flash.n-alerta {
  border-color: var(--alerta-fuerte);
  background: var(--alerta-suave); color: var(--alerta-fuerte);
}
.aviso-flash.n-critico {
  border-color: var(--critico-fuerte);
  background: var(--critico-suave); color: var(--critico-fuerte);
  animation: none;   /* un error no se va solo */
}
@keyframes aviso-sale {
  0%, 85% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Números tabulares: los montos se comparan en columna, cada dígito con
   el mismo ancho — el gesto de Excel que la grilla debe igualar. */
table.grilla td, tfoot .suma, .num, .dinero {
  font-variant-numeric: tabular-nums;
}

/* WCAG 2.2 · 2.4.11 — el foco navegado con teclado nunca queda enterrado
   bajo el encabezado pegajoso ni bajo el pie de sumas. */
table.grilla td, table.grilla th.fija { scroll-margin: 72px 0 56px 220px; }
html { scroll-padding-top: 60px; }

/* WCAG 2.2 · 2.5.8 — ningún control de fila por debajo del área mínima
   de puntería (24px legal; 28 da margen de guante). */
table button, table .btn, .aviso-flash button {
  min-height: 28px; min-width: 28px;
}

/* ==================================================== panel maestro -- */
/* KPIs del mes con su delta, bandeja de excepciones y resaltado de filas
   por estado de variación. Gestión por excepción: la revisión cuesta
   proporcional a los cambios, no al headcount. */
.kpis {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch; margin: var(--e3) 0 var(--e2);
}
/* La cabecera del mes en el lenguaje de las tarjetas de la casa
   (pedido de Will 2026-08-20): rótulo en versalitas, número grande
   tabular, delta como renglón propio. Anchos IGUALES — nada de fila
   dentada — y el borde hairline de siempre en vez de sombra. */
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: 10px 14px 9px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.kpi small {
  font-size: var(--t-2xs); letter-spacing: .8px; text-transform: uppercase;
  font-weight: 600; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi b {
  font-family: var(--fuente-mono); font-size: var(--t-2xl);
  font-weight: 600; line-height: 1.1; color: var(--marca-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-delta {
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
  font-family: var(--fuente-mono);
}
.kpi-delta.up   { color: var(--info-fuerte); }
.kpi-delta.down { color: var(--texto-suave); }
.kpi-delta.flat { color: var(--texto-tenue); }
.kpi.kpi-alerta { border-color: var(--critico-fuerte); }
.kpi.kpi-alerta b { color: var(--critico-fuerte); }
.kpi-acciones {
  display: flex; align-items: center; justify-content: flex-end;
  grid-column: 1 / -1;
}

/* --- Resumen para facturación: el ESTADO DE CUENTA del mes ----------
   Siempre visible (nunca un desplegable), debajo de la grilla y antes
   de los gastos. Una columna angosta como un estado bancario: rótulo a
   la izquierda con su aritmética en pequeño, monto a la derecha en
   mono tabular, y el total con la regla fuerte de la marca — la doble
   raya queda reservada al mes CERRADO, como manda la casa. */
.resumen-factura .rf-lineas {
  margin: var(--e2) 0 0; max-width: 520px;
}
.rf-linea, .rf-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); padding: 7px 2px;
}
.rf-linea { border-bottom: 1px solid var(--borde-hairline); }
.rf-linea dt { font-size: var(--t-sm); color: var(--texto); min-width: 0; }
.rf-linea dt small {
  display: block; font-size: var(--t-2xs); color: var(--texto-tenue);
  letter-spacing: .2px;
}
.rf-linea dd, .rf-total dd {
  margin: 0; font-family: var(--fuente-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rf-total {
  border-top: 2px solid var(--marca-800); margin-top: 2px;
  padding-top: 9px;
}
.rf-total dt {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--marca-800);
}
.rf-total dd { font-size: var(--t-xl); color: var(--marca-900); }
.rf-fuente { font-size: var(--t-xs); color: var(--texto-tenue);
  margin: var(--e2) 0 0; }

.bandeja {
  background: var(--superficie);
  border: 1px solid rgba(23, 26, 46, .08); border-radius: 14px;
  box-shadow: var(--sombra-1);
  padding: var(--e2) var(--e4); margin: 0 0 var(--e3);
}
.bandeja summary {
  cursor: pointer; font-size: var(--t-base); font-weight: 600;
  color: var(--texto);
}
.bandeja ul { margin: var(--e2) 0 var(--e1); padding-left: var(--e5); }
.bandeja li { font-size: var(--t-sm); margin: 3px 0; line-height: var(--lh-datos); }
.bandeja li.b-fuera       { color: var(--critico-fuerte); }
.bandeja li.b-estructural { color: var(--alerta-fuerte); }
.bandeja li.b-mov         { color: var(--info-fuerte); }
.bandeja li.b-explicado   { color: var(--texto-suave); }
.bandeja-ok {
  font-size: var(--t-sm); color: var(--ok-fuerte);
  background: var(--ok-suave); border: 1px solid var(--ok-fuerte);
  border-radius: var(--r-m); padding: var(--e2) var(--e4);
  margin: 0 0 var(--e3);
}

/* Estado de variación por fila: una ceja de color en la celda del nombre.
   Rojo = se movió sin explicación; ámbar = cambió (con explicación);
   azul = alta del mes. Sin cambio = sin ceja: el silencio también informa. */
table.grilla tbody tr.var-fuera th.fija {
  box-shadow: inset 3px 0 0 var(--critico-fuerte);
}
table.grilla tbody tr.var-cambiada th.fija {
  box-shadow: inset 3px 0 0 var(--alerta-fuerte);
}
table.grilla tbody tr.var-alta th.fija {
  box-shadow: inset 3px 0 0 var(--info-fuerte);
}
/* El chip «Solo cambiados» esconde las filas que no se movieron. */
table.grilla.solo-cambiados tbody tr.var-igual { display: none; }
#chip-cambiados[aria-pressed="true"] {
  background: var(--marca-800); color: #fff;
}

/* ==================================================== cierre del mes -- */
/* El Main de Gerencia de Operaciones: tarjetas por cliente con su ciclo,
   checklist y firmas. Los colores de estado son los semánticos de la
   casa; el cerrado viste la marca — es el sello final. */
.selector-mes { margin: var(--e2) 0 var(--e4); font-size: var(--t-base); }
/* La tarjeta de cliente es PLEGABLE (2026-08-16, pedido de Will): con
   48 clientes, una página de tarjetas abiertas es un scroll infinito.
   Plegada tiene que decirlo todo — nombre, estado, en qué parada del
   circuito va y qué falta — para que abrirla sea una decisión, no un
   requisito. Mismo patrón que el índice de finiquitos. */
.cierre-tarjeta { margin-bottom: var(--e4); }
.cierre-tarjeta > summary {
  display: flex; align-items: center; gap: var(--e3);
  cursor: pointer; list-style: none; flex-wrap: wrap;
}
.cierre-tarjeta > summary::-webkit-details-marker { display: none; }
.cierre-tarjeta > summary::before {
  content: "▸"; color: var(--texto-tenue); font-size: var(--t-sm);
  transition: transform .15s ease;
}
.cierre-tarjeta[open] > summary::before { transform: rotate(90deg); }
.ct-nombre { font-size: var(--t-lg); font-weight: 700; }
/* El botón de la tabla vive en la CABECERA plegada y a la derecha del
   todo: es la acción que más se usa desde el cierre — ir a mirar los
   números del cliente. Antes había ahí un texto que repetía lo que el
   circuito ya dice, y un enlace pequeño escondido adentro. */
.ct-tabla { margin-left: auto; white-space: nowrap; }
.ct-cuerpo { margin-top: var(--e4); }
.cierre-tarjeta header {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e2);
}
.cierre-tarjeta header h2 { margin: 0; font-size: var(--t-lg); }

/* El circuito: las cuatro paradas del cierre de un cliente, legibles
   sin abrir la tarjeta. Cumplida en verde, la que toca en marca, las
   que faltan en gris. El color nunca es canal único — cada parada
   lleva su símbolo (✓ ● ○) y su rótulo. */
.circuito { display: inline-flex; align-items: center; gap: var(--e1); }
.parada {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-2xs); letter-spacing: .3px; white-space: nowrap;
}
.parada i { font-style: normal; font-size: var(--t-xs); }
.parada em { font-style: normal; }
.parada.cumplida { background: var(--ok-suave); color: var(--ok-fuerte); }
.parada.en-curso {
  background: var(--marca-050); color: var(--marca-800); font-weight: 700;
  outline: 1px solid var(--marca-500);
}
.parada.pendiente { background: var(--fondo); color: var(--texto-tenue); }

/* Una excepción ofrece dos caminos: arreglarla donde vive, o explicar
   por escrito por qué queda así. El botón de ir a arreglarla es lo
   primero — anotar es la salida cuando no se puede corregir. */
.chk-items .exc-texto { display: block; }
.chk-items .ir-arreglar { margin: 4px 0; display: inline-block; }
/* OJO: `.chk` es una grilla de tres columnas (18px | 190px | resto).
   Todo hijo suyo cae en la primera columna si no dice lo contrario —
   y 18px de ancho parten cada palabra en su propio renglón. Lo mismo
   que ya hacía `.chk-items`. */
details.explicadas { grid-column: 2 / -1; margin-top: var(--e3); }
details.explicadas > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--ok-fuerte);
}
details.explicadas ul { margin: var(--e2) 0 0; padding-left: var(--e4); }
details.explicadas li { margin-bottom: var(--e2); }
details.explicadas small {
  display: block; color: var(--texto-suave); font-size: var(--t-xs);
}
.estado-chip {
  border-radius: 999px; padding: 3px 12px; font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .4px;
}
.estado-chip.e-borrador { background: var(--fondo); color: var(--texto-suave); }
.estado-chip.e-revision { background: var(--info-suave); color: var(--info-fuerte); }
.estado-chip.e-aprobado { background: var(--ok-suave); color: var(--ok-fuerte); }
.estado-chip.e-cerrado  { background: var(--marca-800); color: #fff; }

/* La banda del candado del MES: vive arriba de las tarjetas porque
   manda sobre todas. Cerrado grita en critico; abierto no molesta. */
.banda-periodo { margin-bottom: var(--e4); }
.banda-periodo .periodo-estado {
  display: flex; align-items: center; gap: var(--e3);
  font-weight: 600; margin-bottom: var(--e2);
}
.banda-periodo p { margin: 0 0 var(--e3); font-size: var(--t-base);
                   color: var(--texto-suave); max-width: 76ch; }
.banda-periodo p b { color: var(--texto); }
.banda-periodo.banda-cerrada {
  border-left: 4px solid var(--critico-fuerte);
  background: var(--critico-suave);
}

.firmas { font-size: var(--t-sm); color: var(--texto-suave);
          margin-bottom: var(--e2); }
/* El checklist del cierre. Se llamaba `.pasos/.paso` — los mismos
   nombres que el stepper de ui.pasos(), que es un flex HORIZONTAL con
   align-items:center. `.pasos .paso` le ganaba en especificidad al
   `.paso` de acá, así que las filas salían angostas y centradas en
   medio del panel. Namespace propio: dos cosas distintas, dos nombres. */
.chklist { display: grid; gap: 2px; }
.chk {
  display: grid; grid-template-columns: 18px 190px 1fr; gap: var(--e2);
  align-items: baseline; padding: 5px var(--e2);
  border-radius: var(--r-m); font-size: var(--t-base);
}
/* la columna del título es FIJA: con `auto` cada fila es su propia
   grilla y los detalles arrancan en una x distinta — se lee como texto
   desalineado, no como una lista */
.chk b { font-family: var(--fuente-mono); }
.chk small { color: var(--texto-suave); font-size: var(--t-sm); }
.chk.chk-ok b { color: var(--ok-fuerte); }
.chk.chk-mal { background: var(--critico-suave); }
.chk.chk-mal b { color: var(--critico-fuerte); }
.chk-items { grid-column: 2 / -1; margin: var(--e1) 0 0;
             padding-left: var(--e4); font-size: var(--t-sm); }
.chk-items li { margin: 3px 0; }
/* Excepciones con su mini-formulario: texto a la izquierda y el
   formulario en columnas FIJAS a la derecha — explicación, firma y
   botón caen en la misma columna en TODAS las filas (la lección de
   las filas torcidas de finiquitos, misma medicina). */
.chk-items li { display: grid; align-items: center; gap: var(--e3);
                grid-template-columns: minmax(0, 1fr) auto; }
.anota { display: grid; margin: 0; align-items: center; gap: var(--e1);
         grid-template-columns: 230px 150px 78px; }
.anota input { font-size: var(--t-sm); padding: 5px 8px;
               border: 1px solid var(--borde-campo);
               border-radius: var(--r-s); width: 100%; box-sizing: border-box; }
.anota .btn.chico { width: 100%; }

.acciones { display: flex; gap: var(--e3); margin-top: var(--e3);
            flex-wrap: wrap; }
.accion { display: inline-flex; gap: var(--e2); align-items: center;
          flex-wrap: wrap; }
.accion input { padding: 6px 10px; border: 1px solid var(--borde-campo);
                border-radius: var(--r-s); font-size: var(--t-sm); }
.paquete {
  margin-top: var(--e3); padding: var(--e2) var(--e4);
  background: var(--marca-050); border: 1px solid var(--marca-800);
  border-radius: var(--r-m); font-size: var(--t-base);
}
.paquete a { margin: 0 4px; }

/* ============================================ calendario: base -- */
/* La hoja de asistencia real hecha pantalla: grilla del mes con el
   domingo señalado y cada código con su color semántico. (La paleta
   de pinceles y los totales laterales de la v1 murieron con la v2 —
   poda de la auditoría 26-ago.) */
.cal-grilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-sem {
  font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .6px; color: var(--texto-suave);
  text-align: center; padding: var(--e1) 0;
}
.cal-dia {
  min-height: 54px; border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 4px 6px; position: relative;
  background: var(--superficie); cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cal-dia:not([data-dia]) { cursor: default; }
.cal-dia[data-dia]:hover { border-color: var(--marca-500); }
.cal-dia:focus-visible { outline: 2px solid var(--foco-claro); }
.cal-num { font-size: var(--t-xs); color: var(--texto-suave); }
.cal-cod {
  font-family: var(--fuente-mono); font-weight: 700;
  font-size: var(--t-md); align-self: center;
}
.cal-vacia { border: none; background: transparent; }
.cal-fuera { background: var(--fondo); opacity: .45; cursor: default; }
.cal-domingo.cal-sem, .cal-dia.cal-domingo .cal-num {
  color: var(--critico-fuerte); font-weight: 700;
}
/* los códigos, con la semántica de la casa */
.cal-d   { background: var(--info-suave); }
.cal-d   .cal-cod { color: var(--info-fuerte); }
.cal-n   { background: var(--marca-900); border-color: var(--marca-900); }
.cal-n   .cal-cod, .cal-n .cal-num { color: #fff; }
.cal-n4  { background: var(--marca-050); }
.cal-n4  .cal-cod { color: var(--marca-800); }
.cal-des { background: var(--ok-suave); }
.cal-des .cal-cod { color: var(--ok-fuerte); }
.cal-f   { background: var(--critico-suave); }
.cal-f   .cal-cod { color: var(--critico-fuerte); }
.cal-l   { background: var(--alerta-suave); }
.cal-l   .cal-cod { color: var(--alerta-fuerte); }

.cal-aplicar { margin-top: var(--e3); display: flex;
               flex-direction: column; gap: var(--e1); }
.cal-aplicar small { color: var(--texto-suave); font-size: var(--t-xs); }

/* ================================================ calendario v2 -- */
/* Tap-que-rota + hoja del día con horas. Lección aprendida: el
   contraste manda — cada chip y botón lleva su color de fondo FUERTE
   con texto que se lee, y el código es texto antes que color. */
.cal-vivo {
  margin-top: var(--e3); font-size: var(--t-base);
  background: var(--marca-050); border-radius: var(--r-m);
  padding: var(--e2) var(--e4);
}
.cal-leyenda {
  margin-top: var(--e2); font-size: var(--t-sm);
  color: var(--texto-suave); line-height: 2;
}
.cal-chip {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: var(--t-xs); font-weight: 700;
  border: 1px solid var(--borde-campo); background: var(--superficie);
}
.cal-hoy { box-shadow: 0 0 0 2px var(--marca-500); }
.cal-dia { user-select: none; }
.cal-panel { display: block; }
.cal-grilla { max-width: 560px; }

/* chips de la leyenda heredan los colores de los códigos */
.cal-chip.cal-d   { background: var(--info-suave); color: var(--info-fuerte); border-color: var(--info-fuerte); }
.cal-chip.cal-n   { background: var(--marca-900); color: #fff; border-color: var(--marca-900); }
.cal-chip.cal-n4  { background: var(--marca-050); color: var(--marca-800); border-color: var(--marca-800); }
.cal-chip.cal-des { background: var(--ok-suave); color: var(--ok-fuerte); border-color: var(--ok-fuerte); }
.cal-chip.cal-f   { background: var(--critico-suave); color: var(--critico-fuerte); border-color: var(--critico-fuerte); }
.cal-chip.cal-l   { background: var(--alerta-suave); color: var(--alerta-fuerte); border-color: var(--alerta-fuerte); }

/* la hoja del día */
#cal-editor {
  border: 1px solid var(--borde); border-radius: 16px;
  padding: var(--e5); max-width: 520px; width: 92vw;
  box-shadow: var(--sombra-2);
}
#cal-editor::backdrop { background: rgba(23, 26, 46, .45); }
#cal-editor h3 { margin: 0 0 var(--e3); font-size: var(--t-lg); }
#cal-editor h4 { margin: var(--e4) 0 var(--e1); font-size: var(--t-base); }
#cal-editor h4 small { color: var(--texto-suave); font-weight: 400;
                       font-size: var(--t-xs); }
.cal-botones-cod {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2);
}
.cal-boton-cod {
  min-height: 52px; border-radius: var(--r-m); cursor: pointer;
  border: 2px solid var(--borde-campo); background: var(--superficie);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; font-size: var(--t-xs);
}
.cal-boton-cod b { font-family: var(--fuente-mono);
                   font-size: var(--t-md); }
.cal-boton-cod.cal-d   { background: var(--info-suave); color: var(--info-fuerte); border-color: var(--info-fuerte); }
.cal-boton-cod.cal-n   { background: var(--marca-900); color: #fff; border-color: var(--marca-900); }
.cal-boton-cod.cal-n4  { background: var(--marca-050); color: var(--marca-800); border-color: var(--marca-800); }
.cal-boton-cod.cal-des { background: var(--ok-suave); color: var(--ok-fuerte); border-color: var(--ok-fuerte); }
.cal-boton-cod.cal-f   { background: var(--critico-suave); color: var(--critico-fuerte); border-color: var(--critico-fuerte); }
.cal-boton-cod.cal-l   { background: var(--alerta-suave); color: var(--alerta-fuerte); border-color: var(--alerta-fuerte); }

/* la grilla de horas: 6:00 → 5:00, cada hora un botón táctil */
.cal-horas {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.cal-hora {
  min-height: 44px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--borde); background: var(--fondo);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0;
}
.cal-hora-n { font-family: var(--fuente-mono); font-size: var(--t-sm); }
.cal-hora-clase { font-size: var(--t-2xs); font-weight: 700;
                  letter-spacing: .4px; }
.cal-hora.h-dia   { background: var(--info-suave); color: var(--info-fuerte); border-color: var(--info-fuerte); }
.cal-hora.h-noche { background: var(--marca-900); color: #fff; border-color: var(--marca-900); }
.cal-hora.h-extra { background: var(--critico-suave); color: var(--critico-fuerte); border-color: var(--critico-fuerte); }
.cal-hora.h-override { background: var(--alerta-suave); color: var(--alerta-fuerte); border-color: var(--alerta-fuerte); }
.cal-horas-resumen { margin-top: var(--e2); font-size: var(--t-sm);
                     color: var(--texto-suave); }
.cal-editor-acciones { display: flex; gap: var(--e2);
                       margin-top: var(--e4); }

/* el estampador de patrones */
.cal-patron { margin: 0 0 var(--e3); background: var(--superficie);
              border: 1px solid var(--borde); border-radius: var(--r-m);
              padding: var(--e2) var(--e4); }
.cal-patron summary { cursor: pointer; font-weight: 600;
                      font-size: var(--t-base); }
.cal-patron-forma { display: flex; flex-wrap: wrap; gap: var(--e3);
                    margin-top: var(--e3); align-items: end; }
/* Los <label> del formulario apilan rótulo sobre campo... salvo los de
   la lista de compañeros, que son casilla AL LADO del nombre. Sin este
   :not(), esta regla le ganaba por especificidad y dejaba el cuadrito
   montado encima del nombre. */
.cal-patron-forma label:not(.cal-comp):not(.cal-check-linea) {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--t-xs); color: var(--texto-suave);
}
.cal-patron-forma input, .cal-patron-forma select {
  padding: 6px 8px; border: 1px solid var(--borde-campo);
  border-radius: var(--r-s); font-size: var(--t-sm);
}

/* ---- calendario v2.1: horas que mandan, celdas que se explican ---- */
.cal-sub {
  display: block; font-size: var(--t-2xs); line-height: 1.1;
  text-align: center; font-weight: 600; opacity: .85;
}
.cal-dia { min-height: 60px; }
.cal-mx {
  background: linear-gradient(135deg, var(--info-suave) 50%,
                              var(--marca-050) 50%);
}
.cal-mx .cal-cod { color: var(--marca-800); }
.cal-chip.cal-mx, .cal-boton-cod.cal-mx {
  background: linear-gradient(135deg, var(--info-suave) 50%,
                              var(--marca-050) 50%);
  color: var(--marca-800); border-color: var(--marca-800);
}

.cal-horas { grid-template-columns: repeat(7, 1fr); }
.cal-hora { min-height: 46px; }
.cal-hora-n { font-size: var(--t-base); font-weight: 600; }
.cal-hora-clase { font-size: var(--t-2xs); }
/* la hora sin marcar se lee como lo que es: disponible, no apagada */
/* OJO: estas cadenas de :not() deben nombrar TODAS las clases que
   pintan una hora marcada (h-dia h-noche h-tercera h-extra
   h-override). Si falta una, la regla la matchea y le gana por
   especificidad: la hora marcada se ve en blanco. Paso exactamente eso
   con la 3ra. `tests/test_calendario.py` lo vigila. */
.cal-hora:not(.h-dia):not(.h-noche):not(.h-tercera):not(.h-extra):not(.h-override) {
  background: var(--superficie); color: var(--texto);
  border-style: dashed;
}

/* copiar el calendario a compañeros: LISTA, no una fila que envuelve.
   En flex-wrap horizontal los nombres se acomodaban donde caían y era
   imposible barrer la casilla con la vista: uno por renglón, cada
   nombre alineado bajo el anterior, y el botón al final. */
.cal-comps {
  /* renglón entero dentro del formulario flex: si no, la lista se
     encoge al ancho del nombre más largo y queda flotando al centro */
  flex: 1 1 100%; width: 100%;
  display: flex; flex-direction: column; gap: 1px;
  max-height: 44vh; overflow-y: auto;
  border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: 4px; margin-bottom: var(--e3);
}
.cal-comp {
  /* grid, no flex: la casilla ocupa una columna FIJA y todos los
     nombres arrancan en la misma vertical. Con flex, un nombre largo
     empujaba y la columna dejaba de existir. `align-items:center` en
     lugar de baseline evita que la casilla se monte sobre el texto. */
  display: grid; grid-template-columns: 18px 1fr; gap: var(--e3);
  align-items: center; text-align: left;
  font-size: var(--t-base); padding: 8px 10px; cursor: pointer;
  border-radius: var(--r-s); width: 100%;
}
.cal-comp:hover { background: var(--marca-050); }
.cal-comp input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
.cal-comp:has(input:checked) { background: var(--marca-050);
                               font-weight: 600; }
.cal-comps-jefe {
  display: flex; align-items: center; gap: var(--e3);
  font-size: var(--t-sm); color: var(--texto-suave);
  margin-bottom: var(--e2);
}
.cal-comps-jefe button { font-size: var(--t-sm); }
.cal-comps-n { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- horario del dia: linea de tiempo 6x6, nada cojea ---- */
.cal-horario {
  display: grid; grid-template-columns: 92px repeat(6, 1fr);
  gap: 4px; align-items: stretch;
}
.cal-hfila-rotulo {
  display: flex; align-items: center; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: .4px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* la hora que cae en ventana nocturna se distingue ANTES de marcarla */
.cal-hora.h-ventana:not(.h-dia):not(.h-noche):not(.h-tercera):not(.h-extra):not(.h-override) {
  background: var(--marca-050); border-style: dashed;
}

/* ---- hoja del dia v2.2: mas aire, flechas y textos que se leen ---- */
#cal-editor {
  max-width: 760px; width: 94vw; max-height: 94vh;
  padding: var(--e5) var(--e6); overflow: visible;
}
.cal-editor-cuerpo { max-height: 84vh; overflow-y: auto;
                     padding-right: var(--e2); }
#cal-editor h3 { display: flex; align-items: baseline; gap: var(--e3); }

/* recorrer los dias sin cerrar la hoja */
.cal-nav-dia {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 72px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: var(--t-2xl); line-height: 1; color: var(--marca-800);
  box-shadow: var(--sombra-1);
}
.cal-nav-dia.izq { left: -22px; }
.cal-nav-dia.der { right: -22px; }
.cal-nav-dia:hover:not(:disabled) { background: var(--marca-050); }
.cal-nav-dia:disabled { opacity: .3; cursor: default; }

/* el guardado se anuncia solo */
.cal-guardado {
  font-size: var(--t-xs); font-weight: 600; color: var(--ok-fuerte);
  opacity: 0; transition: opacity .2s;
}
.cal-guardado.visible { opacity: 1; }

/* el boton Borrar tiene su propio color: antes era blanco sobre blanco */
.cal-boton-cod.cal-borrar {
  background: var(--fondo); color: var(--texto);
  border-color: var(--borde-campo);
}
.cal-boton-cod.cal-borrar b { color: var(--critico-fuerte); }

/* sobre la noche (fondo tinta) TODO el texto va en blanco */
.cal-n .cal-sub, .cal-n .cal-num, .cal-n .cal-cod { color: #fff; }
.cal-mx .cal-sub { color: var(--marca-800); }
.cal-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---- hoja del dia v2.3: titulo que se lee, flechas que no saltan ---- */
/* La altura del cuerpo NO cambia al recorrer los dias: sin salto, las
   flechas se quedan quietas (era la «animacion extraña»). */
.cal-editor-cuerpo { min-height: 560px; }
.cal-nav-dia { top: 96px; transform: none; }

#cal-editor h3 { font-size: var(--t-base); font-weight: 400;
                 color: var(--texto-suave); }
#cal-editor h3 b { font-size: var(--t-lg); font-weight: 700;
                   color: var(--texto); letter-spacing: .5px; }
#cal-editor-fecha.es-domfer b { color: var(--critico-fuerte); }
.cal-marca-dia {
  background: var(--critico-suave); color: var(--critico-fuerte);
  border-radius: 999px; padding: 1px 8px; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: .6px;
}

/* el rotulo de cada fila dice su franja con PALABRAS, no simbolos */
.cal-hfila-rotulo {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0; line-height: 1.15;
}
.cal-hfila-rotulo b { font-family: var(--fuente-mono);
                      font-size: var(--t-sm); color: var(--texto); }
.cal-hfila-rotulo .f-noche { color: var(--marca-800); font-weight: 700; }
.cal-hfila-rotulo .f-dia   { color: var(--info-fuerte); font-weight: 700; }
.cal-hfila-rotulo .f-mixta { color: var(--texto-suave); font-weight: 700; }
.cal-horario { grid-template-columns: 104px repeat(6, 1fr); }
.cal-nota-dia { font-size: var(--t-2xs); color: var(--critico-fuerte);
                font-weight: 600; }

/* ---- avisos de norma: sutiles, informativos, nunca bloqueantes ---- */
.cal-avisos { display: flex; flex-direction: column; gap: 4px;
              margin: var(--e2) 0 0; }
.cal-aviso {
  display: flex; gap: var(--e2); align-items: baseline;
  border-left: 3px solid var(--alerta-fuerte);
  background: var(--alerta-suave); color: var(--alerta-fuerte);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 5px var(--e3); font-size: var(--t-xs);
  line-height: var(--lh-datos);
}
.cal-aviso-txt { flex: 1; }
.cal-aviso-norma {
  font-weight: 700; white-space: nowrap; font-size: var(--t-2xs);
  letter-spacing: .3px; opacity: .85;
}
/* el feriado se ve en la grilla del mes, antes de tocarlo */
.cal-feriado { box-shadow: inset 0 -3px 0 var(--critico-fuerte); }
.cal-feriado .cal-num::after { content: " ★"; color: var(--critico-fuerte); }
/* los códigos nuevos del catálogo, cada uno con su color legible */
.cal-lv, .cal-l  { background: var(--alerta-suave); }
.cal-lv .cal-cod, .cal-l .cal-cod { color: var(--alerta-fuerte); }
.cal-bm, .cal-at { background: var(--info-suave); }
.cal-bm .cal-cod, .cal-at .cal-cod { color: var(--info-fuerte); }
.cal-ld, .cal-lp { background: var(--ok-suave); }
.cal-ld .cal-cod, .cal-lp .cal-cod { color: var(--ok-fuerte); }
.cal-sg { background: var(--fondo); }
.cal-sg .cal-cod { color: var(--texto-suave); }
.cal-boton-cod.cal-lv, .cal-boton-cod.cal-bm, .cal-boton-cod.cal-at,
.cal-boton-cod.cal-ld, .cal-boton-cod.cal-lp, .cal-boton-cod.cal-sg {
  border-color: var(--borde-campo); color: var(--texto);
}
.cal-botones-cod { grid-template-columns: repeat(3, 1fr); }
/* mientras se arrastra, el texto no se selecciona */
.cal-horario { user-select: none; }

/* el puente calendario ↔ formulario */
.cal-difs { margin: var(--e2) 0; padding-left: var(--e5);
            font-size: var(--t-sm); }
.cal-difs li { margin: 2px 0; }
.cal-sync { display: flex; align-items: center; gap: var(--e3);
            flex-wrap: wrap; margin-top: var(--e2); }
.cal-sync small { color: var(--texto-suave); font-size: var(--t-xs); }

/* ---- copiar el formato de un dia a otros: el mini-calendario ---- */
.cal-copiar-a { margin-top: var(--e3); border-top: 1px solid var(--borde);
                padding-top: var(--e2); }
.cal-copiar-a summary { cursor: pointer; font-size: var(--t-base);
                        font-weight: 600; }
.cal-copiar-ayuda { font-size: var(--t-xs); color: var(--texto-suave);
                    margin: var(--e2) 0; }
.cal-mini { display: grid; grid-template-columns: repeat(7, 1fr);
            gap: 3px; user-select: none; }
.cal-mini-dia {
  min-height: 38px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1.05;
}
.cal-mini-dia span { font-size: var(--t-sm); font-weight: 600; }
.cal-mini-dia small { font-size: var(--t-2xs); color: var(--texto-suave); }
.cal-mini-dia.elegido {
  background: var(--marca-800); color: #fff; border-color: var(--marca-800);
}
.cal-mini-dia.elegido small { color: #fff; opacity: .8; }
.cal-mini-dia.es-origen {
  background: var(--alerta-suave); border-color: var(--alerta-fuerte);
  color: var(--alerta-fuerte); cursor: default;
}
.cal-copiar-pie { display: flex; gap: var(--e2); margin-top: var(--e3); }

/* ---- el mini-calendario, legible y con el orden del mes ---- */
.cal-mini-sem {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); text-align: center; padding-bottom: 2px;
}
.cal-mini-sem.es-domingo { color: var(--critico-fuerte); font-weight: 700; }
.cal-mini-hueco { min-height: 38px; }
/* el número del día se lee: antes heredaba un color transparente */
.cal-mini-dia { color: var(--texto); }
.cal-mini-dia span { color: inherit; }
.cal-mini-dia small { color: var(--texto-tenue); }
.cal-mini-dia.es-domingo span { color: var(--critico-fuerte); }
.cal-mini-dia.es-feriado { box-shadow: inset 0 -3px 0 var(--critico-fuerte); }
.cal-mini-dia.elegido span, .cal-mini-dia.elegido small { color: #fff; }
.cal-mini-dia.es-origen span, .cal-mini-dia.es-origen small {
  color: var(--alerta-fuerte);
}
.cal-mini-dia:disabled { opacity: 1; }
/* la hora con franja declarada a mano por la casa */
.cal-hora.h-franja {
  background: var(--marca-500); color: #fff;
  border-color: var(--marca-800);
}

/* ---- horas v3: la 3ra se distingue, y el dialogo no se mueve ---- */
/* 2da = tinta (antes de medianoche) · 3ra = purpura de marca (dentro
   de la mina): dos franjas, dos colores, no dos tonos del mismo. */
.cal-hora.h-tercera {
  background: var(--marca-800); color: #fff; border-color: var(--marca-800);
}
.cal-hora.h-extra {
  background: var(--critico-suave); color: var(--critico-fuerte);
  border-color: var(--critico-fuerte);
}
/* la hora extra conserva su franja en el borde izquierdo */
.cal-hora.h-extra.h-noche   { box-shadow: inset 4px 0 0 var(--marca-900); }
.cal-hora.h-extra.h-tercera { box-shadow: inset 4px 0 0 var(--marca-800); }
/* lo declarado a mano lleva su marca sin perder el color de franja */
.cal-hora.h-forzada { outline: 2px dashed var(--alerta-fuerte);
                      outline-offset: -3px; }

/* El dialogo se ANCLA arriba: centrado, cada aviso que aparecia lo
   re-centraba y el calendario de horas saltaba bajo el dedo. */
#cal-editor { margin-block: 3vh auto; }
/* y los avisos tienen su sitio reservado: aparecer no empuja nada */
#cal-avisos { min-height: 62px; }

/* ---- el recuadro del cálculo instantáneo -------------------------- */
/* Era una tabla desnuda con los códigos del motor en crudo y el monto
   huyendo al borde derecho de la pantalla. Tres cambios de lectura: el
   líquido es el titular, los rótulos van pegados a su cifra en una
   columna angosta, y los cuatro aportes viven bajo la Gestora. */
.calc-tarjeta {
  margin: var(--e4) 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-2);
  overflow: hidden;
  max-width: 620px;          /* la distancia rótulo→monto no se estira */
}
.calc-cabecera {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5);
  background: var(--ok-suave);
  border-bottom: 1px solid var(--borde);
}
.calc-cabecera b { display: block; font-size: var(--t-base); }
.calc-cabecera small {
  display: block; color: var(--texto-suave); font-size: var(--t-sm);
}
.calc-check {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--ok-fuerte); color: #fff;
}
/* el titular: la cifra que todos vinieron a ver */
.calc-liquido {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borde);
}
.calc-liquido span {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-suave);
}
.calc-liquido b {
  font-size: var(--t-2xl); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--marca-900);
}
.calc-cuerpo { padding: var(--e3) var(--e5) var(--e5); }
.calc-grupo + .calc-grupo { margin-top: var(--e4); }
.calc-fila {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: 3px 0; font-size: var(--t-base);
}
.calc-rotulo { flex: 1 1 auto; color: var(--texto-suave); }
/* la guía de puntos: el ojo llega al monto sin perder la fila */
.calc-fila:not(.calc-encabezado) .calc-rotulo::after {
  content: ""; display: inline-block; width: 100%; margin-left: 6px;
  border-bottom: 1px dotted var(--borde);
  transform: translateY(-3px);
}
.calc-monto {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--texto); min-width: 6.5rem; text-align: right;
}
.calc-fila.calc-encabezado {
  margin-bottom: 2px; padding-bottom: var(--e1);
  border-bottom: 1px solid var(--borde);
}
.calc-encabezado .calc-rotulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--texto);
}
.calc-encabezado .calc-monto { font-weight: 700; }
.calc-ingresos .calc-encabezado .calc-monto { color: var(--ok-fuerte); }
.calc-descuentos .calc-encabezado .calc-monto { color: var(--critico-fuerte); }
/* la Gestora: una línea, y el desglose a un clic */
.calc-desglose summary {
  list-style: none; cursor: pointer; border-radius: var(--r-s);
}
.calc-desglose summary::-webkit-details-marker { display: none; }
.calc-desglose summary .calc-rotulo::before {
  content: "▸ "; color: var(--texto-tenue);
}
.calc-desglose[open] summary .calc-rotulo::before { content: "▾ "; }
.calc-desglose summary:hover { background: var(--marca-050); }
.calc-fila.calc-hijo { padding-left: var(--e4); font-size: var(--t-sm); }
.calc-fila.calc-hijo .calc-rotulo { color: var(--texto-tenue); }
@media (max-width: 640px) {
  .calc-tarjeta { max-width: none; }
  .calc-liquido b { font-size: var(--t-xl); }
}

/* ---- novedades: formulario y calendario, una sola pantalla --------- */
/* El calendario tenía página propia y obligaba a ir y volver para ver
   el efecto de lo que marcabas. Ahora conviven: el formulario manda
   —da la última palabra— así que va primero en el orden de lectura, y
   el calendario queda al costado como la guía. */
/* Container query, no media query: lo que decide si entran dos columnas
   es el ancho DISPONIBLE, no el de la ventana — la barra lateral se
   come 280px y un monitor de 1130 dejaba 800 útiles. */
/* la envoltura es el contenedor medido; .nov-doble es lo que responde
   (un @container no puede estilar a su propio contenedor) */
.nov-envoltura { container-type: inline-size; }
.nov-doble {
  display: grid; gap: var(--e5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* El formulario pedía aire y el calendario tenía espacio muerto: la
   grilla de 7 días se estira sin ganar nada pasados ~560px. Así que el
   formulario toma lo que necesita para que sus cuatro campos por fila
   se lean, y el calendario se queda con el resto. */
@container (min-width: 980px) {
  .nov-doble { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .nov-doble > .nov-calendario { position: sticky; top: var(--e4); }
}
@container (min-width: 1320px) {
  /* con mucho aire el formulario se topa: más ancho no lo mejora */
  .nov-doble { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
}
.nov-calendario { min-width: 0; }
.cal-titulo {
  display: flex; align-items: baseline; gap: var(--e3);
  margin: 0 0 var(--e3); font-size: var(--t-lg);
}
.cal-titulo small {
  font-size: var(--t-sm); font-weight: 400; color: var(--texto-suave);
}

/* la cabecera con el selector de trabajador */
.nov-cabecera { display: flex; align-items: center; gap: var(--e2);
                flex-wrap: wrap; margin-bottom: var(--e1); }
.nov-cabecera h1 { margin: 0; font-size: var(--t-xl); }
.nov-salto { position: relative; }
.nov-salto > summary {
  list-style: none; cursor: pointer; border-radius: var(--r-s);
  padding: 4px 10px; border: 1px solid var(--borde);
  background: var(--superficie); font-size: var(--t-sm);
  color: var(--texto-suave); display: inline-flex; gap: 6px;
  align-items: center;
}
.nov-salto > summary::-webkit-details-marker { display: none; }
.nov-salto > summary:hover { background: var(--marca-050);
                             border-color: var(--marca-500); }
.nov-salto[open] > summary { background: var(--marca-050); }
.nov-lista {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  min-width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); box-shadow: var(--sombra-2); padding: 6px;
}
.nov-lista a {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: 7px 10px; border-radius: var(--r-s); text-decoration: none;
  color: var(--texto); font-size: var(--t-base);
}
.nov-lista a:hover { background: var(--marca-050); }
.nov-lista a.actual { background: var(--marca-800); color: #fff; }
.nov-lista a small { color: var(--texto-tenue); white-space: nowrap; }
.nov-lista a.actual small { color: rgba(255, 255, 255, .75); }
.nov-lista-buscar {
  width: 100%; padding: 7px 10px; margin-bottom: 4px;
  border: 1px solid var(--borde-campo); border-radius: var(--r-s);
  font-size: var(--t-base);
}

/* ---- horarios guardados: la jornada tipo, reusable ----------------- */
.cal-guardar-horario { margin: var(--e3) 0; }
.cal-guardar-horario > summary {
  cursor: pointer; font-size: var(--t-sm); font-weight: 600;
  color: var(--marca-800); list-style: none;
}
.cal-guardar-horario > summary::-webkit-details-marker { display: none; }
.cal-guardar-horario > summary::before { content: "▸ "; }
.cal-guardar-horario[open] > summary::before { content: "▾ "; }
.cal-guardar-forma { display: flex; gap: var(--e2); flex-wrap: wrap;
                     align-items: center; }
.cal-guardar-forma input {
  flex: 1 1 200px; padding: 7px 10px; font-size: var(--t-base);
  border: 1px solid var(--borde-campo); border-radius: var(--r-s);
}
.cal-check-linea { display: flex; align-items: center; gap: 7px;
                   font-size: var(--t-sm); }
.cal-check-linea input { width: 16px; height: 16px; }
.cal-horario-cuadrilla { width: 100%; }
.cal-horario-cuadrilla > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--marca-800);
  padding: 4px 0;
}

/* ---- vista de cuadrilla: el estado y la puerta, en la celda fija --- */
/* Van dentro de la primera columna a propósito: es la única que queda
   fija al hacer scroll horizontal, así que el chip y el botón
   acompañan a la persona en vez de perderse a la derecha. */
.cuad-pie {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: 4px; flex-wrap: wrap;
}
.cuad-chip {
  border-radius: 999px; padding: 2px 9px; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.cuad-chip.ok   { background: var(--ok-suave);      color: var(--ok-fuerte); }
.cuad-chip.calc { background: var(--info-suave);    color: var(--info-fuerte); }
.cuad-chip.pend { background: var(--alerta-suave);  color: var(--alerta-fuerte); }
.cuad-pie .btn { padding: 3px 9px; font-size: var(--t-2xs); }
.cuad-alertas-tit {
  font-size: var(--t-lg); margin: var(--e5) 0 var(--e2);
}

/* ---- la barra lateral se pliega ------------------------------------ */
/* 240px de menú son un tercio de la grilla. Al trabajar el menú no se
   usa, así que se guarda con un botón y el estado se recuerda. */
.btn-plegar {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: var(--r-btn);
  cursor: pointer;
}
.btn-plegar:hover {
  background: var(--marca-050); color: var(--marca-800);
  border-color: var(--marca-500);
}
/* Se pliega moviendo la VARIABLE, no la regla del elemento. El aside
   lleva `view-transition-name: lateral`, y con eso Chrome lo trata como
   una capa aparte: cambiarle una clase en caliente no le recalculaba el
   ancho —funcionaba al recargar y no al hacer clic, que es exactamente
   lo que se veía. Un custom property invalida siempre. */
/* Plegado = RIEL de iconos, no desaparición. Los iconos siguen ahí, así
   que uno sabe dónde está parado y llega a cualquier lugar sin
   desplegar; y volver no obliga a buscar un botón perdido. */
:root.menu-plegado { --lateral-ancho: 60px; }
:root.menu-plegado .nlabel { display: none; }
:root.menu-plegado .ngrp {
  font-size: 0; padding: var(--e3) 0 0; margin: 0 var(--e2);
  border-top: 1px solid var(--borde-hairline);
}
:root.menu-plegado .nitem {
  justify-content: center; padding: 10px 0; margin: 2px var(--e2);
}
:root.menu-plegado .marca { padding: 0 0 var(--e4); }
:root.menu-plegado .lateral .pie { display: none; }


/* ---- novedades: una sola pantalla, un solo blanco ------------------ */
/* Convivían tres superficies distintas: el panel del calendario, las
   tarjetas de los paneles plegables y el fondo del formulario, cada uno
   con su tono. Con las dos columnas a la vista la diferencia se nota, y
   se lee como suciedad. Un solo `--superficie` y un solo borde. */
.nov-formulario, .nov-calendario .cal-panel,
.nov-calendario .cal-patron, .nov-calendario .cal-copiar-comps {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}
.nov-formulario { padding: var(--e5); }
.nov-calendario .cal-panel { padding: var(--e4) var(--e5) var(--e5); }
.nov-calendario .cal-patron { padding: var(--e2) var(--e4); }
/* el formulario ya vive dentro de su tarjeta: sin doble marco */
.fgrid-novedades { max-width: none; }
.nov-formulario .fgrid { background: transparent; box-shadow: none;
                         border: 0; padding: 0; }
/* los desplegables del calendario, apilados con un ritmo parejo */
.nov-calendario > .cal-patron { margin-bottom: var(--e3); }
.nov-calendario .cal-titulo { padding: 0 2px; }
/* la fila de campos respira: cuatro por renglón necesitan mínimo */
.fgrid-novedades .frow { gap: var(--e3) var(--e4); }
.fgrid-novedades .fld { min-width: 120px; }

/* mientras llega el mes nuevo: la tabla se atenúa apenas y el cursor lo
   dice. Ni spinner ni salto de layout — solo que algo está pasando. */
:root.cambiando-mes .grilla-panel { opacity: .55; transition: opacity .1s; }
:root.cambiando-mes { cursor: progress; }

/* el CI y su extensión son UN dato: «9100437 LP» no se parte en dos
   renglones por más angosta que quede la columna */
table.grilla td.ci { white-space: nowrap; }

/* ---- personalización por sesión: tamaño y negrita ------------------ */
/* Cada operador de Stolzel mira la grilla distinto. El tamaño vive como
   variable para que TODA la tabla escale junta —números, celdas y
   encabezados— y no se descuadre nada; y el tope está acotado para que
   la grilla no se salga de su envoltura. */
table.grilla { --num: 1; }
table.grilla td.num, table.grilla td.celda, table.grilla td.asist,
table.grilla tfoot td, table.grilla td.mono {
  font-size: calc(var(--t-sm) * var(--num));
}
table.grilla.n-2 { --num: 1.12; }
table.grilla.n-3 { --num: 1.26; }
table.grilla.n-4 { --num: 1.42; }
/* Plata de finiquito sin finiquito emitido detrás: se ve, se tacha y
   NO se suma. Mostrarla en blanco sería esconder el problema; borrarla
   sola, decidir por el operador. Se lee «esto existe, no lo estoy
   facturando, andá a resolverlo». */
table.grilla td.sin-respaldo {
  text-decoration: line-through;
  color: var(--critico-fuerte);
  background: var(--critico-suave);
}

/* la negrita por columna, elegida con clic derecho en su encabezado */
table.grilla td.col-fuerte, table.grilla th.col-fuerte {
  font-weight: 700; color: var(--texto);
}
/* `.col-suave` ya no la escribe nadie (el mapa de negritas guarda solo
   las encendidas), pero se conserva para los guardados viejos que la
   traigan — apagarla de golpe les cambiaría la vista sin aviso. */
table.grilla td.col-suave, table.grilla th.col-suave {
  font-weight: 400 !important;
}

.tabla-zoom {
  display: flex; align-items: center; gap: 2px;
  justify-content: flex-end; padding: 4px var(--e3) 0;
  font-size: var(--t-2xs); color: var(--texto-tenue);
}
.tabla-zoom button {
  width: 24px; height: 24px; padding: 0; line-height: 1;
  background: transparent; color: var(--texto-tenue);
  border: 1px solid transparent; border-radius: var(--r-s);
  font-size: var(--t-base); cursor: pointer;
}
.tabla-zoom button:hover {
  background: var(--marca-050); color: var(--marca-800);
  border-color: var(--borde);
}
.tabla-zoom button:disabled { opacity: .35; cursor: default; }
.tabla-zoom span { min-width: 34px; text-align: center;
                   font-variant-numeric: tabular-nums; }

/* el menú de clic derecho del encabezado */
.menu-col {
  position: fixed; z-index: 60; min-width: 210px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); box-shadow: var(--sombra-2); padding: 5px;
}
.menu-col button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 8px 10px; border-radius: var(--r-s);
  font-size: var(--t-base); color: var(--texto); cursor: pointer;
}
.menu-col button:hover { background: var(--marca-050);
                         color: var(--marca-800); }
.menu-col small { display: block; padding: 4px 10px 6px;
                  color: var(--texto-tenue); font-size: var(--t-2xs); }

/* el rango seleccionado: azul suave, como una hoja de cálculo. Solo en
   asistencia, que es lo editable — la plata no se copia entre personas */
table.grilla td.asist.rango {
  background: var(--info-suave);
  box-shadow: inset 0 0 0 1px var(--info-fuerte);
}

/* el globo de copiar/pegar: dice qué pasó sin robar el foco */
.globo-rango {
  position: fixed; z-index: 70; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: var(--marca-900); color: #fff;
  padding: 9px 16px; border-radius: 999px;
  font-size: var(--t-sm); box-shadow: var(--sombra-2);
  pointer-events: none;
}

/* ============================================================
   FINIQUITOS — el módulo del reloj
   El plazo es de 15 días y la multa del 30%: acá el tiempo no es
   un dato más, es LA jerarquía. Por eso el plazo se lee antes que
   el nombre y el color lo dice sin leer.
   ============================================================ */
.fq-cliente { padding: 0; margin-bottom: var(--e4); }
.fq-cliente > summary {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5); cursor: pointer;
  font-size: var(--t-lg); border-radius: var(--r-l);
}
.fq-cliente > summary::-webkit-details-marker { display: none; }
.fq-cliente > summary::marker { content: ""; }
.fq-cliente > summary::before {
  content: "›"; font-size: var(--t-xl); color: var(--texto-tenue);
  transition: transform .12s ease; line-height: 1;
}
.fq-cliente[open] > summary::before { transform: rotate(90deg); }
.fq-cliente > summary:hover { background: var(--marca-050); }
.fq-cuenta { color: var(--texto-suave); font-size: var(--t-sm);
             font-weight: 400; margin-left: auto; }

.fq-proyecto { padding: 0 var(--e5) var(--e4); }
.fq-proyecto h3 {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--texto-suave);
  margin: var(--e3) 0 var(--e2); font-weight: 600;
}
.fq-proyecto h3 small {
  background: var(--marca-050); color: var(--marca-800);
  border-radius: 999px; padding: 1px 7px; font-size: var(--t-2xs);
  letter-spacing: 0;
}

/* la fila: quién · cuánto · en qué estado · cuánto tiempo queda */
.fq-fila {
  display: grid; align-items: center; gap: var(--e3);
  /* Columnas FIJAS: nombre · monto · estado · plazo. Con `auto`, una
     fila sin monto corría el chip a la columna del dinero y el índice
     se leía torcido — cada cosa en su columna, siempre. */
  grid-template-columns: minmax(0, 1fr) 120px 230px 160px;
  padding: 11px var(--e3); border-radius: var(--r-m);
  border-bottom: 1px solid var(--borde-hairline);
  color: var(--texto); text-decoration: none;
}
.fq-fila .fq-monto { justify-self: end; }
.fq-fila .fq-chip { justify-self: start; }
.fq-fila .fq-plazo { justify-self: end; text-align: right; }
.fq-fila:last-child { border-bottom: 0; }
.fq-fila:hover { background: var(--marca-050); }
.fq-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fq-quien small { color: var(--texto-suave); font-size: var(--t-xs); }
.fq-quien b { font-size: var(--t-md); }
.fq-monto { font-family: var(--fuente-mono); font-size: var(--t-base);
            font-variant-numeric: tabular-nums; }

.fq-chip {
  font-size: var(--t-2xs); padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; font-weight: 600; letter-spacing: .02em;
}
.fq-chip.pend { background: var(--critico-suave); color: var(--critico-fuerte); }
.fq-chip.calc { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.fq-chip.ok   { background: var(--ok-suave);     color: var(--ok-fuerte); }
/* En cero: no corresponde pago — informativo, sin urgencia de dinero */
.fq-chip.cero { background: var(--superficie-2, #eee); color: var(--texto-suave, #666); }

/* el plazo: alineado a la derecha, monoespaciado, con su color */
.fq-plazo {
  text-align: right; font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fq-plazo.n-ok      { color: var(--texto-suave); font-weight: 400; }
.fq-plazo.n-alerta  { color: var(--alerta-fuerte); }
.fq-plazo.n-critico { color: var(--critico-fuerte); }

/* --- el detalle --- */
.fq-cabecera { display: flex; align-items: center; gap: var(--e3);
               margin-bottom: var(--e4); }
.fq-cabecera .fq-plazo { text-align: left; }
.fq-detalle { padding: var(--e5); }
.fq-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e4); padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}
.fq-resumen dt { font-size: var(--t-2xs); text-transform: uppercase;
                 letter-spacing: .09em; color: var(--texto-suave);
                 margin-bottom: 3px; }
.fq-resumen dd { margin: 0; font-size: var(--t-lg);
                 font-variant-numeric: tabular-nums; }
.fq-resumen .fq-liquido { font-size: var(--t-2xl); font-weight: 600;
                          color: var(--marca-800); }

.fq-items { padding: var(--e4) 0; }
.fq-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e4); padding: 7px 0; font-size: var(--t-md);
  border-bottom: 1px dotted var(--borde-hairline);
}
.fq-item b { font-family: var(--fuente-mono);
             font-variant-numeric: tabular-nums; }

/* la puerta: el formulario que aprueba, y lo que se habilita después */
.fq-detalle .accion {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3);
  padding-top: var(--e4); border-top: 1px solid var(--borde);
}
.fq-detalle .accion label { display: flex; flex-direction: column; gap: 3px;
                            font-size: var(--t-xs); color: var(--texto-suave); }
.fq-detalle .accion small { flex-basis: 100%; color: var(--texto-tenue);
                            font-size: var(--t-xs); }
.fq-emitido { display: flex; flex-direction: column; gap: var(--e4);
              padding-top: var(--e4); border-top: 1px solid var(--borde); }
.fq-emitido > .btn { align-self: flex-start; }
.fq-emitido .accion { border-top: 0; padding-top: 0; }

/* El buscador de personas busca solo, mientras se escribe. El botón
   «Filtrar» queda de respaldo (sin JS sigue siendo un form GET normal)
   y el aviso dice que algo está pasando sin mover nada de lugar. */
.buscando {
  margin-left: 10px; font-size: var(--t-xs); font-weight: 400;
  color: var(--texto-tenue); text-transform: none; letter-spacing: 0;
}

/* ============================================================
   TABLERO DEL CIERRE — la pantalla del gerente de operaciones
   Tres preguntas en el orden en que se hacen: cuánto mueve el mes,
   dónde está parado el ciclo, qué lo traba. La última es la única
   accionable, así que es la que tiene nombre propio y color fuerte.
   ============================================================ */
.tablero { padding: var(--e5); }
.tab-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e5); padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borde);
}
.tab-kpi dt {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--texto-suave); margin-bottom: 5px;
}
.tab-kpi dd {
  margin: 0; font-size: var(--t-3xl); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
/* el denominador no compite con el numerador: es contexto, no dato */
.tab-kpi dd i { font-style: normal; font-size: var(--t-xl); font-weight: 400;
            color: var(--texto-tenue); }
.tab-kpi small { display: block; margin-top: 6px; font-size: var(--t-xs);
             color: var(--texto-tenue); }

/* la barra del ciclo: los tramos son proporcionales al conteo real —
   si fuera decorativa mentiría sobre dónde está parado el mes.
   SIEMPRE con el prefijo .ciclo: a secas, «.barra» es la cabecera de
   toda la plataforma — este bloque la aplastó a 9px una vez. */
.ciclo { padding: var(--e4) 0; border-bottom: 1px solid var(--borde); }
.ciclo .barra {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--borde-hairline); gap: 2px;
  position: static; border-bottom: 0; padding: 0;
}
.ciclo .barra .tr { flex: 1; min-width: 6px; }
.ciclo .barra .e-borrador { background: var(--borde-campo); }
.ciclo .barra .e-revision { background: var(--info-fuerte); }
.ciclo .barra .e-aprobado { background: var(--ok-fuerte); }
.ciclo .barra .e-cerrado  { background: var(--marca-800); }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
           margin-top: var(--e3); font-size: var(--t-sm);
           color: var(--texto-suave); }
.leyenda .lg { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.leyenda .e-borrador { background: var(--borde-campo); }
.leyenda .e-revision { background: var(--info-fuerte); }
.leyenda .e-aprobado { background: var(--ok-fuerte); }
.leyenda .e-cerrado  { background: var(--marca-800); }

.trabas { padding-top: var(--e4); }
.trabas h3 {
  display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e3);
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--texto-suave); font-weight: 600;
}
.trabas h3 small {
  background: var(--critico-suave); color: var(--critico-fuerte);
  border-radius: 999px; padding: 1px 8px; letter-spacing: 0;
  font-size: var(--t-2xs);
}
.trabas ul { list-style: none; margin: 0; padding: 0; display: grid;
             gap: 2px; }
.trabas li {
  display: grid; grid-template-columns: minmax(0, 220px) 190px 1fr;
  gap: var(--e3); align-items: baseline; padding: 6px var(--e2);
  border-radius: var(--r-m); font-size: var(--t-base);
  border-left: 3px solid var(--critico-fuerte);
  background: var(--critico-suave);
}
.trabas li span { color: var(--texto); }
.trabas li small { color: var(--texto-suave); font-size: var(--t-sm); }
.trabas.listo h3 { color: var(--ok-fuerte); }
.trabas.listo p { margin: 0; font-size: var(--t-base);
                  color: var(--texto-suave); }

/* Los que ni siquiera entraron al circuito: el contrato vencio por su
   fecha y nadie cerro la baja. Van ARRIBA y separados de los
   pendientes, porque no se resuelven igual — uno necesita un tramite,
   el otro un calculo. El borde rojo del panel entero dice que esto no
   es «uno mas de la lista». */
.fq-colgados {
  border-left: 4px solid var(--critico-fuerte);
  background: var(--critico-suave);
  padding: var(--e5);
}
.fq-colgados h2 {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e2); font-size: var(--t-lg);
  color: var(--critico-fuerte);
}
.fq-colgados h2 small {
  background: var(--critico-fuerte); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: var(--t-2xs); font-weight: 700;
}
.fq-colgados > .desc { margin: 0 0 var(--e4); max-width: 78ch; }
.fq-colgados .fq-fila { border-bottom-color: rgba(180, 35, 24, .18); }
.fq-colgados .fq-fila:hover { background: rgba(255, 255, 255, .55); }
.fq-colgados .fq-monto { font-family: var(--fuente); font-size: var(--t-sm);
                         color: var(--texto-suave); }

/* Las dos salidas del finiquito aprobado. El impreso es el documento
   que se firma; el Excel es archivo. La jerarquia lo dice: boton
   primario contra fantasma. */
.fq-salidas { display: flex; flex-wrap: wrap; align-items: center;
              gap: var(--e3); }
.fq-salidas small { flex-basis: 100%; color: var(--texto-tenue);
                    font-size: var(--t-xs); }

/* Los datos de la razon social que el finiquito imprime. Se llena una
   vez, asi que no tiene lugar en el menu: se llega desde el aviso. */
.emp-form { display: grid; gap: var(--e3); padding: var(--e5); }
.emp-form h2 { margin: 0; font-size: var(--t-lg); }
.emp-form > .desc { margin: 0; max-width: 74ch; }
.emp-form label { display: grid; gap: 3px; font-size: var(--t-xs);
                  color: var(--texto-suave); }
.emp-form button { justify-self: start; }

/* Los dos hitos del contrato en el almanaque. El de CIERRE lleva mas
   peso a proposito: la fecha de retiro se tipeaba a mano en un campo, y
   ahi es donde se cometen los errores de un dia — que en un finiquito
   son un dia de indemnizacion que el Excel no paga.
   El motor cuenta con dia final INCLUSIVO, asi que el dia pintado ES el
   ultimo trabajado. La barra va al borde derecho: cierra el periodo. */
.cal-dia.cal-inicio { box-shadow: inset 3px 0 0 var(--ok-fuerte); }
.cal-dia.cal-cierre {
  box-shadow: inset -3px 0 0 var(--critico-fuerte);
  background: var(--critico-suave);
}
.cal-dia.cal-cierre .cal-num { font-weight: 700;
                               color: var(--critico-fuerte); }
/* la banderita, en la esquina donde no pisa ni el numero ni el codigo */
.cal-dia.cal-cierre::after {
  content: "▌"; position: absolute; top: 2px; right: 3px;
  font-size: 9px; line-height: 1; color: var(--critico-fuerte);
}
.cal-dia.cal-inicio::after {
  content: "▌"; position: absolute; top: 2px; left: 3px;
  font-size: 9px; line-height: 1; color: var(--ok-fuerte);
}
.cal-chip.hito-fin { color: var(--critico-fuerte); background: none;
                     border: 0; padding: 0 2px; font-weight: 700; }

/* La salida de emergencia del finiquito: vuelve a «por calcular».
   Plegada y al final — no es un paso del circuito, y un boton que
   borra no puede estar al lado de uno que aprueba. */
.fq-deshacer > summary {
  cursor: pointer; font-size: var(--t-sm); font-weight: 600;
  color: var(--critico-fuerte); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.fq-deshacer > summary::-webkit-details-marker { display: none; }
.fq-deshacer > summary::marker { content: ""; }
.fq-deshacer > summary::before { content: "\21ba"; font-size: var(--t-lg);
                                 line-height: 1; }
.fq-deshacer[open] > summary { margin-bottom: var(--e3); }
.fq-deshacer > .desc { max-width: 76ch; }
.btn.peligro, button.peligro {
  background: var(--critico-fuerte); border-color: var(--critico-fuerte);
  color: #fff;
}
.btn.peligro:hover, button.peligro:hover { background: #94190F;
                                           border-color: #94190F; }


/* La seccion Desvinculacion de la ficha: dejo de ser un «(opcional)»
   enterrado en el form de edicion — del registro de la baja depende el
   finiquito entero. Y deshacer es salida de emergencia: rojo, plegado. */
.fh2 { font-size: 15px; color: var(--marca-800); margin: 16px 0 6px; }
.fgrid.dvz { padding: 13px 18px; }
.dvz-undo { margin-top: 8px; }
.dvz-undo > summary { cursor: pointer; color: var(--critico-fuerte);
                      font-weight: 600; font-size: 13px; }
.dvz-undo form { margin-top: 8px; display: flex; gap: 8px;
                 flex-wrap: wrap; }
.dvz-motivo { flex: 1; min-width: 240px; }

/* ============================================================
   EDITOR DE CONTRATOS — plantillas con huecos, datos vivos
   La vista renderizada arriba (lo que va a imprimirse, con los datos
   en negrita y los huecos sin dato en amarillo) y el texto crudo
   abajo, editable. La edicion es la excepcion: la seccion editada se
   marca, y volver a la plantilla es un boton.
   ============================================================ */
.ced-barra { display: grid; gap: var(--e3); padding: var(--e4) var(--e5); }
.ced-inline { display: flex; flex-wrap: wrap; gap: var(--e2);
              align-items: center; }
.ced-inline small { flex-basis: 100%; color: var(--texto-tenue);
                    font-size: var(--t-xs); }
.ced-claves { font-size: var(--t-xs); color: var(--texto-suave);
              line-height: 2; }
.ced-claves code { background: var(--marca-050); color: var(--marca-800);
                   padding: 1px 6px; border-radius: 4px; cursor: help; }
.ced-sec { padding: var(--e3) var(--e5); }
.ced-sec > summary { cursor: pointer; padding: var(--e2) 0;
                     font-size: var(--t-md); }
.ced-vista {
  background: var(--fondo); border-radius: var(--r-m);
  padding: var(--e4); margin: var(--e3) 0; font-size: var(--t-base);
  line-height: 1.65; max-width: 88ch;
}
.ced-vista mark.hueco { background: #FFE28A; font-weight: 700;
                        padding: 0 4px; border-radius: 3px; }
.ced-form textarea {
  width: 100%; font-family: var(--fuente-mono); font-size: var(--t-sm);
  line-height: 1.5; padding: var(--e3); border-radius: var(--r-m);
  border: 1px solid var(--borde-campo); resize: vertical;
}
.ced-pie { display: flex; flex-wrap: wrap; gap: var(--e2);
           align-items: center; margin-top: var(--e2); }
.ced-restaurar { display: inline-flex; gap: var(--e2); }

/* ================================================================
   REDISEÑO 2026 — patrones `rd-` (docs/rediseno-ui.md)
   Estilo Aether/Stitch traducido a la casa: tarjetas blancas con
   borde fino sin sombra, jerarquía por peso, píldoras con punto
   vivo, hover que oscurece el borde. Primero se define en el
   cuaderno, después se aplica.
   ================================================================ */
.rd-lista { display: grid; gap: var(--e4); }
.rd-carta { display: flex; align-items: center; gap: var(--e5, 24px);
  justify-content: space-between; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid #C6CCDB;
  border-radius: 12px; padding: 20px 24px;
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease; }
/* el hover de la casa: el lavado morado de marca, no una sombra */
a.rd-carta:hover { background: var(--marca-050);
  border-color: var(--borde-campo); text-decoration: none; }
.rd-carta--fin { opacity: .7; }
.rd-carta-cuerpo { display: grid; gap: 4px; min-width: 220px;
  flex: 1; }
.rd-carta-titulo { margin: 0; font-size: var(--t-md);
  font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto); }
.rd-carta-sub { margin: 0; color: var(--texto-suave);
  font-size: var(--t-base); }
.rd-carta-cola { display: flex; align-items: center;
  gap: var(--e5, 24px); flex-wrap: wrap; }
/* la píldora de estado: punto vivo + ANCHO FIJO — la columna de
   estados queda alineada a plomada entre tarjetas */
.rd-pildora { display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; width: 9.5em;
  padding: 4px 0; border-radius: 999px; font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; }
.rd-pildora i { width: 6px; height: 6px; border-radius: 50%;
  background: currentcolor; }
.rd-pildora--ok { background: var(--exito-suave, #E7F4EC);
  color: var(--exito-fuerte, #1B7A3D); }
.rd-pildora--mal { background: var(--critico-suave);
  color: var(--critico-fuerte); }
.rd-pildora--alerta { background: var(--alerta-suave);
  color: var(--alerta-fuerte); }
.rd-pildora--neutro { background: var(--fondo);
  color: var(--texto-suave); }
.rd-estado { display: grid; gap: 3px; justify-items: center; }
/* la cifra fuerte con su metadato en small-caps */
.rd-cifra { display: grid; gap: 2px; justify-items: end;
  text-align: right; width: 160px; }
/* la paginación: números sobrios, la activa en morado de marca */
.rd-pager { display: flex; align-items: center; gap: var(--e2);
  margin-top: var(--e4); flex-wrap: wrap; }
.rd-pager .desc { margin-left: auto; }
.rd-pag { display: grid; place-items: center; min-width: 34px;
  height: 34px; padding: 0 6px; border: 1px solid var(--borde);
  border-radius: 8px; color: var(--texto); text-decoration: none;
  font-variant-numeric: tabular-nums; font-size: var(--t-sm);
  transition: border-color .15s, background-color .15s; }
.rd-pag:hover { background: var(--marca-050);
  border-color: var(--borde-campo); text-decoration: none; }
.rd-pag--act { background: var(--marca-800); color: #fff;
  border-color: var(--marca-800); pointer-events: none; }
.rd-cifra b { font-size: var(--t-md, 15px); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.rd-cifra span { font-size: var(--t-2xs, 10px); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-suave); }
/* lo que espera acción, en moradito bold dentro de la cifra */
.rd-cifra-nuevas { font-style: normal; font-size: var(--t-base);
  font-weight: 700; color: var(--marca-800); }
/* el cuadro del arte de difusión: CUALQUIER proporción entra
   completa (contain sobre fondo) — la tarjeta nunca cambia de alto */
.rd-carta-arte { width: 64px; height: 64px; flex: 0 0 64px;
  position: relative;
  border: 1px solid var(--borde-hairline); border-radius: 10px;
  background: var(--fondo); overflow: hidden;
  display: grid; place-items: center; }
/* ABSOLUTA contra el cuadro: con height % en fila de grid `auto`
   la fila crecía con la imagen y el 100% se resolvía contra la fila
   crecida (las historias 1080x1920 se escapaban a 146px) */
.rd-carta-arte img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; }
.rd-arte-nada { font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-suave); text-align: center; }
/* a sangre completa dentro del cuadro: la pastilla flotante quedaba
   más ancha que los 64px y el recorte la corría de centro */
.rd-arte-nada--elim { position: absolute; inset: 0;
  display: grid; place-items: center; padding: 0;
  line-height: 1.35; letter-spacing: .04em;
  background: var(--critico-suave); color: var(--critico-fuerte); }
.rd-smallcaps { font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-suave); }

/* --- rd-dlg: los popups del rediseño (la acción primaria vive EN
   la línea del título: ui.titulo(accion=...)) ---------------------- */
/* el scroll vive ADENTRO (rd-dlg-cuerpo): con overflow en el dialog
   la barra quedaba fuera del redondeado; y el fondo NO se desplaza
   mientras un popup está abierto */
body:has(dialog.rd-dlg[open]) { overflow: hidden; }
dialog.rd-dlg { border: 1px solid var(--borde);
  border-radius: 14px; padding: 0;
  width: min(1020px, 94vw); max-height: 92vh; overflow: hidden;
  display: none; flex-direction: column; }
dialog.rd-dlg[open] { display: flex; }
dialog.rd-dlg::backdrop { background: rgb(20 16 40 / 55%); }
dialog.rd-dlg--chica { width: min(560px, 94vw); }
dialog.rd-dlg > header { display: flex; align-items: center;
  justify-content: space-between; gap: var(--e3); flex: 0 0 auto;
  padding: var(--e4) var(--e6, 30px);
  border-bottom: 1px solid var(--borde-hairline); }
dialog.rd-dlg > header h3 { margin: 0; font-size: var(--t-xl); }
.rd-dlg-cuerpo { overflow: auto; flex: 1 1 auto;
  padding: var(--e4) var(--e6, 30px) var(--e5, 22px); }
/* el error dentro del popup: se dice AHÍ, no en otra página */
.rd-error { background: var(--critico-suave);
  color: var(--critico-fuerte); border-radius: 8px;
  padding: 10px 14px; font-weight: 600; margin: 0 0 var(--e3); }
/* la chica no tiene cuerpo aparte: su form respira solo */
dialog.rd-dlg--chica > form { padding: var(--e4) var(--e6, 30px)
  var(--e5, 22px); }
/* el botón primario EN la línea del título (sin huecos) */
.titulo-fila { display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
  /* el aire que traía el subtítulo: sin él (pantallas del rediseño)
     el botón de la esquina quedaba encima de lo que sigue */
  margin-bottom: var(--e5); }
.titulo-fila .sub:last-child { margin-bottom: 0; }
.titulo-accion { padding-top: 6px; flex: 0 0 auto; }
/* adentro del popup el rd-form no duplica tarjeta: el diálogo ya
   es la caja */
.rd-dlg form.rd-form { border: 0; padding: 2px; max-width: none; }

/* --- rd-form: el formulario del rediseño (docs/rediseno-ui.md) ----
   Un interruptor: form.fgrid.rd-form y el formkit entero adopta la
   receta Stitch — tarjeta blanca, grilla de 2 columnas IGUALES,
   fills plomo suave de altura uniforme, foco con anillo morado,
   secciones con hairline y botonera al pie a la derecha. */
form.rd-form { background: var(--superficie);
  border: 1px solid #C6CCDB; border-radius: 12px;
  padding: 28px 32px; max-width: 980px;
  display: block; }
.rd-form .fsec { font-size: var(--t-lg); font-weight: 600;
  color: var(--texto); text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--borde-hairline);
  padding-bottom: 10px; margin: 26px 0 18px; }
.rd-form .fsec:first-child { margin-top: 0; }
.rd-form .frow { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px; }
.rd-form .frow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-form .fld { display: grid; gap: 6px; align-content: start; }
.rd-form .fld--total { grid-column: 1 / -1; }
.rd-form .fld > label { font-size: var(--t-sm); font-weight: 600;
  color: var(--texto); }
/* TODOS los fills al mismo ancho y la misma altura: la armonía del
   diseño sale de acá — las clases w-s/w-m/w-l no mandan adentro */
.rd-form .fld :is(input, select, textarea):not([type=checkbox]) {
  width: 100%; box-sizing: border-box; min-height: 42px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 8px; padding: 9px 14px;
  font-size: var(--t-md); color: var(--texto);
  transition: border-color .15s, box-shadow .15s; }
.rd-form .fld select { appearance: auto; }
/* sin sumadores de a 1 en los montos: puro ruido (pedido de Will) */
.rd-form input[type=number] { appearance: textfield; }
.rd-form input[type=number]::-webkit-inner-spin-button,
.rd-form input[type=number]::-webkit-outer-spin-button {
  appearance: none; margin: 0; }
.rd-form .fld :is(input, select, textarea):focus {
  outline: none; border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-050); background: var(--superficie); }
.rd-form .fld .hint { font-size: var(--t-xs);
  color: var(--texto-suave); }
.rd-form .fld--fila { display: flex; align-items: center; gap: 8px;
  grid-column: 1 / -1; }
.rd-form .fld--fila label { font-weight: 500; font-size: var(--t-base); }
.rd-form .rd-pie { display: flex; justify-content: flex-end;
  gap: 12px; border-top: 1px solid var(--borde-hairline);
  margin-top: 26px; padding-top: 20px; }
@media (max-width: 760px) {
  .rd-form .frow, .rd-form .frow--3 { grid-template-columns: 1fr; }
  form.rd-form { padding: 18px; }
}

/* Formulario en línea dentro de una celda (botón eliminar de tablas) */
form.inl { display: inline; margin: 0; }

/* --- la ficha del candidato: conmutador aplanado/original ----------
   Radios ocultos + labels: CSS puro, sin recarga. El seleccionado
   lleva el lavado morado de la casa. */
.emp-vcv-barra { display: inline-flex; overflow: hidden;
  border: 1px solid var(--borde); border-radius: 8px;
  margin-bottom: var(--e3); }
.emp-vcv-barra label { padding: 8px 16px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--texto-suave); background: var(--fondo);
  transition: background .15s, color .15s; }
.emp-vcv-barra label + label { border-left: 1px solid var(--borde); }
.emp-vcv-caja > input[id^="vcv-plano"]:checked
  ~ .emp-vcv-cab label[for^="vcv-plano"],
.emp-vcv-caja > input[id^="vcv-orig"]:checked
  ~ .emp-vcv-cab label[for^="vcv-orig"] {
  background: var(--marca-050); color: var(--marca-800);
  box-shadow: inset 0 -2px 0 var(--marca-800); }
/* los radios son alcanzables con teclado (solo-lectores): el foco se ve en la barra */
.emp-vcv-caja > input.emp-vcv:focus-visible ~ .emp-vcv-cab .emp-vcv-barra {
  outline: 2px solid var(--marca-800); outline-offset: 2px; }
/* la cabecera del conmutador: barra + UNA leyenda, para las dos vistas */
.emp-vcv-cab { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--e3); }
.emp-vcv-cab .emp-vcv-barra { margin: 0; }
.emp-vcv-cab .cvd-leyenda--arriba { margin: 0; padding: 0; border: 0; }
.emp-vcv-caja > input[id^="vcv-plano"]:checked ~ .emp-vcv-orig,
.emp-vcv-caja > input[id^="vcv-orig"]:checked ~ .emp-vcv-plano {
  display: none; }
.emp-cv-pdf { width: 100%; height: 72vh; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--fondo); }
/* las tintas del marcador (las usa la comparativa) */
.emp-ley { display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.emp-ley--ok { background: rgba(107, 199, 120, .75); }
.emp-ley--parcial { background: rgba(240, 196, 84, .75); }
.emp-ley--mal { background: rgba(242, 140, 130, .75); }
.emp-ley--fuerte { background: rgba(115, 158, 235, .75); }

/* la evaluación remarcada: pildoras de requisito + listas con banda */
.emp-req-pild { font-size: var(--t-2xs); }
.emp-ev-lista { list-style: none; padding: 0; margin: var(--e2) 0;
  display: grid; gap: var(--e2); }
.emp-li { padding: var(--e2) var(--e3); border-radius: var(--r-s);
  border-left: 3px solid var(--borde); background: var(--fondo); }
.emp-li--fort { border-left-color: var(--exito-fuerte, #1B7A3D);
  background: var(--exito-suave, #E7F4EC); }
.emp-li--rev { border-left-color: var(--critico-fuerte);
  background: var(--critico-suave); }
/* la tabla de requisitos: pregunta + evidencia en una celda, el estado a la derecha */
.emp-req-tabla { margin-top: var(--e2); }
.emp-req-tabla td { vertical-align: top; padding: 8px 10px; }
.emp-req-tabla tr:first-child td { border-top: 0; }
.emp-req__q { font-weight: 600; font-size: var(--t-base); line-height: 1.35; }
.emp-req__ev { color: var(--texto-suave); font-size: var(--t-sm); line-height: 1.45; margin-top: 2px; }
.emp-req__est { width: 1%; white-space: nowrap; text-align: right; }
.emp-rec-motivos { margin: 0 0 var(--e3); font-size: var(--t-sm); color: var(--texto); }
.emp-ev-h { margin: var(--e4) 0 var(--e2); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }
.emp-ev-h__n { font-family: var(--fuente-mono); font-size: var(--t-2xs); background: var(--fondo);
  border-radius: 20px; padding: 1px 7px; margin-left: 4px; letter-spacing: 0; }
/* en la ficha las listas son tarjetas finas (la comparativa conserva las suyas) */
.cv-eval-grid .emp-li { background: var(--superficie); border: 1px solid var(--borde-hairline);
  border-left-width: 3px; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; }
.cv-eval-grid .emp-li--fort { border-left-color: var(--ok-fuerte); }
.cv-eval-grid .emp-li--rev { border-left-color: var(--critico-fuerte); }
.emp-gv__item--posible { border-left-color: var(--alerta-fuerte); }
.panel-nota--pie { margin: var(--e3) 0 0; padding-top: var(--e2);
  border-top: 1px solid var(--borde-hairline); max-width: none; }
.emp-fin-ok { color: var(--exito-fuerte, #1B7A3D); font-weight: 600; }
.emp-fin-mal { color: var(--critico-fuerte); font-weight: 600; }
/* las caras de la comparativa y de la conclusión */
.cmp5-quien { display: inline-flex; align-items: center; gap: 8px; }
.cmp5-ava, .emp-fin-ava {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; display: inline-grid; place-items: center;
  background: var(--marca-050); color: var(--marca-800);
  font-weight: 700; font-size: var(--t-sm); font-style: normal;
}
.emp-fin-ava { width: 36px; height: 36px; }
.emp-li--fin { display: flex; gap: 10px; align-items: flex-start; }
.emp-li--fin .emp-fin-ava { margin-top: 2px; }
.emp-fin-nombre { color: var(--marca-700); }
.emp-ev-resumen.emp-ev-resumen--just { text-align: justify;
  max-width: none; }
/* nombres de candidatos SIEMPRE en mayúsculas */
.emp-fin-nombre, .emp-li--fin b, .cmp5-quien span {
  text-transform: uppercase; }
/* pareja de botones del panel, pegaditos */
.acc-par { display: inline-flex; gap: 8px; align-items: center; }
/* los estados de la comparativa: fichas redondas, no texto */
.cmp5-est { display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-weight: 700; font-size: 13px; }
.cmp5-est--ok { background: var(--exito-suave, #E7F4EC);
  color: var(--exito-fuerte, #1B7A3D); }
.cmp5-est--parcial { background: var(--alerta-suave);
  color: var(--alerta-fuerte, #B57E10); }
.cmp5-est--sin { background: var(--fondo); color: var(--texto-suave);
  border: 1px solid var(--borde); }
.cmp5-ley { display: flex; align-items: center; gap: 6px;
  margin: var(--e2) 0 0; }
.cmp5 td { text-align: center; }
.cmp5 td:first-child { text-align: left; }

/* Comparativa de finalistas (/empleos, pestaña Candidatos): los 5
   mejores lado a lado — rueda horizontal, la página jamás */
.cmp5-rodante { overflow-x: auto; }
.cmp5 { min-width: 640px; }
/* los estados de la comparativa: MISMO ancho todos (verde, ámbar,
   plomo) y el plomo con palabras — nada de guiones mudos */
.cmp5 td .badge { display: inline-flex; justify-content: center;
  width: 118px; text-transform: uppercase;
  letter-spacing: .04em; font-size: var(--t-2xs); font-weight: 700; }
/* la cabecera de la oferta: sin la cinta (el banner chirriaba acá)
   y el nombre del puesto EN GRANDE */
.emp-of-hero .hero-tapa { display: none; }
.emp-of-hero .hero h1 { font-size: var(--t-2xl); }
.cmp5 th:first-child, .cmp5 td:first-child { min-width: 200px; }
.cmp5 td:not(:first-child) { white-space: nowrap; }

/* Subir el PDF original junto a «Re-aplanar» (postulaciones viejas) */
.emp-cv-re { max-width: 220px; font-size: var(--t-xs); }

/* Bandeja de marcas: el cotejo selfie·ficha en MINIATURA (a tamaño
   natural la selfie del celular comía la pantalla); clic = grande */
.mk-par { display: flex; gap: var(--e2); align-items: center; }
.mk-par a { line-height: 0; }
.mk-selfie { width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-m); border: 1px solid var(--borde); }
/* y el veredicto ordenado: firma+nota arriba, los 3 botones abajo */
.mk-acciones { display: grid; gap: var(--e2); min-width: 280px; }
.mk-fila { display: flex; gap: var(--e2); flex-wrap: wrap;
  align-items: center; }
.mk-fila input[name='nota'] { flex: 1; min-width: 140px; }
/* la franja del día: se ve CLARAMENTE de qué día es cada marca */
tr.mk-dia td { background: var(--fondo); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-suave); }
.mk-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
/* el semáforo de distancia: pastilla con su punto de color — verde
   dentro del radio, ámbar hasta 3×, rojo lejos */
.mk-sem { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs);
  font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.mk-sem i { width: 8px; height: 8px; border-radius: 50%; }
.mk-sem--ok { background: var(--exito-suave, #E7F4EC);
  color: var(--exito-fuerte, #1B7A3D); }
.mk-sem--ok i { background: var(--exito-fuerte, #1B7A3D); }
.mk-sem--medio { background: var(--alerta-suave);
  color: var(--alerta-fuerte); }
.mk-sem--medio i { background: var(--alerta-fuerte); }
.mk-sem--mal { background: var(--critico-suave);
  color: var(--critico-fuerte); }
.mk-sem--mal i { background: var(--critico-fuerte); }
.mk-sem--nulo { color: var(--texto-suave);
  border: 1px dashed var(--borde); }
.mk-radio { max-width: 90px; }
/* --- el POPUP de mapas (visor y editor): el scroll de la página ya
   no pelea con el zoom ------------------------------------------- */
dialog.mk-dialogo { border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e4);
  width: min(860px, 94vw); }
dialog.mk-dialogo::backdrop { background: rgb(20 16 40 / 55%); }
dialog.mk-dialogo header { display: flex; align-items: center;
  justify-content: space-between; gap: var(--e3);
  margin-bottom: var(--e3); }
dialog.mk-dialogo header h3 { margin: 0; }
.mk-lienzo { height: min(440px, 55vh); border: 1px solid var(--borde);
  border-radius: var(--r-m); margin: var(--e3) 0; }
/* el buscador moderno: campo y botón soldados en una sola pieza */
.mk-buscador { display: flex; }
.mk-buscador input { flex: 1; border-radius: var(--r-m) 0 0 var(--r-m);
  border-right: 0; }
.mk-buscador .btn { border-radius: 0 var(--r-m) var(--r-m) 0;
  margin: 0; }
ul.mk-dir-res { list-style: none; margin: var(--e2) 0 0; padding: 0; }
ul.mk-dir-res li { padding: 6px 12px; border: 1px solid var(--borde);
  border-radius: var(--r-m); margin-bottom: 4px; cursor: pointer;
  font-size: var(--t-sm); }
ul.mk-dir-res li:not(.desc)::before { content: '📍 '; }
ul.mk-dir-res li:hover { background: var(--fondo); }
ul.mk-dir-res li.desc { cursor: default; border-style: dashed; }
/* campos con su NOMBRE arriba (el radio ya no se adivina) */
.mk-campo { display: grid; gap: 3px; flex: 1; }
.mk-campo > span { font-size: var(--t-xs); font-weight: 600;
  color: var(--texto-suave); }
.mk-campo--corto { flex: 0 0 130px; }
.mk-editor .mk-fila { align-items: end; }
.mk-quitar { margin-top: var(--e2); }
/* --- el ORDEN de la bandeja (la queja de Will) ------------------
   Cada celda con su estructura fija; los editores de punto (form +
   mapa) viven en una fila PROPIA a lo ancho, oculta hasta abrirse */
.mk-rodante { overflow-x: auto; }
.mk-tabla th:nth-child(1) { min-width: 148px; }
.mk-tabla th:nth-child(2) { min-width: 150px; }
.mk-tabla th:nth-child(4) { min-width: 180px; }
.mk-tabla th:nth-child(5) { min-width: 300px; }
.mk-tabla td { vertical-align: top; }
/* Dónde: el semáforo arriba, los dos botones alineados abajo */
.mk-donde { display: grid; gap: var(--e2); justify-items: start; }
/* la firma corta, la nota estira: misma silueta en cada fila */
.mk-acciones input[name='quien'] { max-width: 110px; }
.mk-editor { display: grid; gap: var(--e2); margin-bottom: var(--e2); }
/* el 📌 con su estado (pedido de Will): verde claro = rige el punto
   GLOBAL del proyecto; morado claro = tiene punto PERSONAL */
.mk-pin--no { background: var(--exito-suave, #E7F4EC);
  color: var(--exito-fuerte, #1B7A3D); }
.mk-pin--si { background: var(--marca-050);
  color: var(--marca-800); }
/* el match entrada↔salida: las horas de la jornada, discretas */
.mk-jornada { font-size: var(--t-xs); color: var(--texto-suave);
  font-variant-numeric: tabular-nums; }
/* el pin 3D del mapa: gota con la foto de PERFIL y la hora debajo */
.mk-pin3d-caja { filter: drop-shadow(0 6px 8px rgb(0 0 0 / 35%)); }
.mk-pin3d { width: 48px; height: 48px; margin: 0 auto;
  border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: linear-gradient(145deg, var(--marca-500),
    var(--marca-800)); border: 3px solid var(--marca-800);
  display: grid; place-items: center; }
.mk-pin3d-cara { width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; transform: rotate(45deg); background: var(--fondo);
  display: grid; place-items: center; font-size: 20px;
  border: 2px solid rgb(255 255 255 / 85%); }
/* especificidad a propósito: leaflet.css trae
   «.leaflet-container .leaflet-marker-pane img { width: auto }» y
   carga DESPUÉS — sin estos tres eslabones la foto salía a tamaño
   natural dentro del círculo (la «mancha café» de Will) */
.leaflet-container .mk-pin3d .mk-pin3d-cara img {
  width: 100%; height: 100%; object-fit: cover; }
.mk-pin3d-sombra { width: 16px; height: 5px; margin: 3px auto 0;
  border-radius: 50%; background: rgb(0 0 0 / 30%);
  filter: blur(1.5px); }
.mk-pin3d-hora { margin-top: 2px; text-align: center;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--marca-900, #363636);
  background: rgb(255 255 255 / 92%); border-radius: 999px;
  padding: 1px 6px; width: fit-content; margin-inline: auto;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
/* el cotejo: selfie y ficha lado a lado, en grande y rotuladas */
dialog.mk-cotejo { border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e4);
  max-width: min(760px, 92vw); }
dialog.mk-cotejo::backdrop { background: rgb(20 16 40 / 55%); }
dialog.mk-cotejo h3 { margin: 0 0 var(--e3); }
.mk-cotejo-par { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e3); margin-bottom: var(--e3); }
.mk-cotejo-par figure { margin: 0; }
.mk-cotejo-par figcaption { font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); margin-bottom: var(--e1); }
.mk-cotejo-par img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-m); border: 1px solid var(--borde); }

/* Nombres de persona: el fill muestra MAYÚSCULAS mientras se escribe
   (la forma canónica del sistema); el JS y la compuerta del servidor
   la imponen de verdad. */
input[data-mayus] { text-transform: uppercase; }

/* ---- Clientes y proyectos: el molde de Personas ------------------- */
.cli-nombre { display: flex; align-items: center; gap: var(--e2); }
.chk-linea { font-weight: 400; font-size: var(--t-sm);
             display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* El diálogo del alta: el popup crea, la página lista. */
dialog.dlg { border: 1px solid var(--borde); border-radius: var(--r-l);
             box-shadow: var(--sombra-3, 0 18px 50px rgba(0,0,0,.25));
             padding: var(--e5) var(--e6); max-width: 620px; width: 92vw; }
dialog.dlg::backdrop { background: rgba(15, 10, 40, .45); }
.dlg-acciones { display: flex; justify-content: flex-end; gap: var(--e2);
                margin-top: var(--e4); }

/* Contingencia del finiquito: cada concepto con su monto editable en
   columnas parejas; el ⚠ marca lo ya pisado. */
.fq-cont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2);
           margin-top: var(--e2); }
.fq-cont-fila { display: grid; grid-template-columns: minmax(0,1fr) 120px;
                gap: var(--e2); align-items: center; font-size: var(--t-sm); }
.fq-cont-fila input { text-align: right; font-variant-numeric: tabular-nums;
                      padding: 4px 8px; border: 1px solid var(--borde-campo);
                      border-radius: var(--r-s); }
.fq-cont > input, .fq-cont > button { grid-column: 1 / -1; }
.fq-cont > input { padding: 6px 9px; border: 1px solid var(--borde-campo);
                   border-radius: var(--r-s); font: inherit; }

/* Acciones dentro de una alerta programada (posponer/desactivar) */
form.alerta-acciones { display: inline-block; margin: 4px 8px 0 0; }

/* Las dos marcas del pago por acuerdo, apiladas y legibles */
.ing-marcas { display: flex; flex-direction: column; gap: 3px; }
.ing-marcas label { display: flex; gap: 6px; align-items: center;
                    font-size: 12.5px; }

/* ===========================================================================
   LA PUERTA — la única pantalla que se ve sin haber entrado.
   Centrada, sin menú y sin nada que mirar salvo el formulario: quien está
   afuera no necesita el mapa de la casa.
   ======================================================================== */
.puerta-fondo {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--e5);
  /* vida sin gritar: dos lavados de marca sobre el lienzo
     (color-mix sobre tokens — acá no entran hex nuevos) */
  background:
    radial-gradient(720px 480px at 10% -10%,
                    color-mix(in srgb, var(--marca-500) 11%,
                              transparent), transparent 62%),
    radial-gradient(820px 560px at 110% 115%,
                    color-mix(in srgb, var(--marca-500) 9%,
                              transparent), transparent 62%),
    var(--fondo);
}
.puerta {
  position: relative;
  width: min(430px, calc(100vw - 2 * var(--e5)));
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(92, 24, 95, .35), 0 10px 30px -12px rgba(54, 54, 54, .14);
  padding: 34px 32px 32px;
  display: grid; gap: var(--e4);
}
/* la raya del kit y el medallón centrado: la puerta es una hoja del informe */
.puerta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--marca-800), var(--marca-500) 55%, var(--info-fuerte)); }
.puerta .kit-medallon { margin: 0 auto -6px; }
.puerta .kit-caja { margin: 0; }
.puerta .kit-caja p { font-size: var(--t-xs, 12px); }
.puerta-form .kit-btn { margin-top: var(--e2); }
/* el wordmark real, centrado — la «S» dibujada murió el 30-ago */
.puerta-marca {
  display: grid; justify-items: center; gap: var(--e2);
  margin-bottom: var(--e2);
}
.puerta-marca img { height: 48px; width: auto; }
.puerta-marca small {
  color: var(--texto-suave); font-size: var(--t-2xs, 10px);
  text-transform: uppercase; letter-spacing: .14em;
}
.puerta h1 { margin: 0; font-size: var(--t-xl, 18px); text-align: center; color: var(--marca-800); }
.puerta .puerta-nota { text-align: center; }
.puerta-form + .puerta-nota, .puerta-form ~ .puerta-nota { text-align: center; }
.puerta-form { display: grid; gap: var(--e3); }
.puerta-form label {
  display: grid; gap: 6px;
  font-size: var(--t-sm, 12px); font-weight: 600; color: var(--texto);
}
/* fills = receta rd-form (docs/rediseno-ui.md) */
.puerta-form input {
  width: 100%; box-sizing: border-box; min-height: 42px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 8px; padding: 9px 14px;
  font-size: var(--t-md); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.puerta-form input:focus {
  outline: none; border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-050);
  background: var(--superficie);
}
.puerta-form button { margin-top: var(--e2); width: 100%; }   /* la altura la pone el kit: 44, 54 en --grande */
/* el segundo paso: popup sobre la puerta (solo con 2FA activo) */
.puerta-velo {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: var(--e5);
  background: rgba(23, 26, 46, .45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.puerta-paso2 { width: min(400px, calc(100vw - 2 * var(--e5))); }
.puerta-paso2 h1 { font-size: var(--t-lg, 16px); }
/* seis dígitos, un fill por dígito */
.puerta-otp { display: flex; gap: 10px; justify-content: center; }
.puerta-otp .otp-d {
  width: 46px; min-height: 56px; padding: 0; text-align: center;
  font-size: var(--t-2xl, 22px); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.puerta-nota {
  margin: 0; font-size: var(--t-xs, 12px); color: var(--texto-suave);
  line-height: 1.5;
}
/* Las cuentas: filas planas con la persona, su sombrero y sus palancas.
   Mismo lenguaje en Usuarios y en Mis dispositivos. */
.cuentas { display: grid; gap: var(--e2); margin: var(--e4) 0; }
.cuenta-fila {
  display: grid; gap: var(--e3); align-items: center;
  grid-template-columns: minmax(180px, 1.3fr) minmax(120px, .9fr)
                         minmax(120px, .9fr) minmax(150px, 1fr)
                         minmax(220px, 1.6fr);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e3) var(--e4);
}
.cuenta-quien b { display: block; }
.cuenta-quien small { color: var(--texto-suave); }
.cuenta-ult small { color: var(--texto-suave); }
.cuenta-acciones {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  justify-content: flex-end;
}
.enlinea { display: inline-flex; gap: var(--e2); align-items: center; }
.chip-ok, .chip-mal, .chip-neutro {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--t-xs, 12px); white-space: nowrap;
}
.chip-ok { background: var(--exito-suave, #E7F4EC); color: var(--exito-fuerte, #1B7A3D); }
.chip-mal { background: var(--critico-suave); color: var(--critico-fuerte); }
.chip-neutro { background: var(--fondo); color: var(--texto-suave); }

/* La firma de la sesión: «Firma» arriba en chico, el nombre debajo con
   peso. Antes era «✍ Nombre» en una línea y el garabato no alcanzaba a
   explicar qué era esa palabra suelta al lado del botón de guardar. */
.chip-ok.firma-sesion {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; padding: 3px 10px; text-align: left;
}
.chip-ok.firma-sesion small {
  font-size: var(--t-2xs); letter-spacing: .6px; text-transform: uppercase;
  opacity: .75;
}
.chip-ok.firma-sesion b { font-size: var(--t-sm); font-weight: 700; }
/* El QR del segundo factor: tamaño de escaneo cómodo, nunca borroso. */
.qr svg { width: 190px; height: 190px; }
.qr { margin: var(--e3) 0; }
/* En pantallas angostas las filas de cuenta se apilan. */
@media (max-width: 900px) {
  .cuenta-fila { grid-template-columns: 1fr; gap: var(--e2); }
  .cuenta-acciones { justify-content: flex-start; }
}

/* El chip del operador enlaza a Mi cuenta; Salir es discreto al lado. */
.quien-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none;
}
.quien-link:hover { text-decoration: underline; }
.quien .salir {
  margin-left: var(--e3); font-size: var(--t-xs, 12px);
  color: var(--texto-suave); text-decoration: none;
  border: 1px solid var(--borde); border-radius: var(--r-btn);
  padding: 2px 10px;
}
.quien .salir:hover { color: var(--critico-fuerte); border-color: currentColor; }

/* Sub-navegación del módulo Organización: tres caras del mismo tema. */
.subnav {
  display: flex; gap: var(--e2); margin: var(--e3) 0 var(--e4);
  border-bottom: 1px solid var(--borde); padding-bottom: 0;
}
.subnav a {
  padding: var(--e2) var(--e4); text-decoration: none;
  color: var(--texto-suave); border-radius: var(--r-s) var(--r-s) 0 0;
  border: 1px solid transparent; border-bottom: 0;
}
.subnav a.activo {
  color: var(--texto); background: var(--superficie);
  border-color: var(--borde); font-weight: 600;
  margin-bottom: -1px; padding-bottom: calc(var(--e2) + 1px);
}
.subnav a:hover { color: var(--texto); }

/* La matriz de permisos: una tabla que se lee como el archivo. */
.tabla-permisos-envoltura { overflow-x: auto; margin: var(--e3) 0; }
.tabla-permisos {
  border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
}
.tabla-permisos th, .tabla-permisos td {
  padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde-hairline);
  text-align: center; font-size: var(--t-s, 13px);
}
.tabla-permisos td.permiso { text-align: left; }
.tabla-permisos tr.grupo-permisos th {
  text-align: left; background: var(--fondo); color: var(--texto-suave);
  font-size: var(--t-xs, 12px); letter-spacing: .4px;
  text-transform: uppercase;
}
.tabla-permisos td.fija { color: var(--texto-suave); }
/* la celda ajustada se distingue: no es la base, es una decisión */
.tabla-permisos td.celda-permiso.ajustada { background: var(--info-suave); }
.tabla-permisos input[type=checkbox] { width: 16px; height: 16px; }

/* El organigrama: un árbol con conectores simples, foto o iniciales. */
.organigrama, .organigrama ul {
  list-style: none; margin: 0; padding-left: var(--e6);
  border-left: 1px solid var(--borde);
}
.organigrama { border-left: 0; padding-left: 0; }
.organigrama li { margin: var(--e2) 0; position: relative; }
.organigrama ul li::before {
  content: ""; position: absolute; left: calc(-1 * var(--e6));
  top: 18px; width: calc(var(--e6) - var(--e2));
  border-top: 1px solid var(--borde);
}
.org-nodo {
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e2) var(--e4);
}
.org-nodo img, .org-nodo .org-ini {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.org-nodo .org-ini {
  display: grid; place-items: center; background: var(--fondo);
  color: var(--texto-suave); font-size: var(--t-xs, 12px); font-weight: 700;
}
.org-nodo small { color: var(--texto-suave); }

/* La cabecera de Mi cuenta: el avatar arrastrable junto al título. */
.cuenta-cabecera {
  display: flex; gap: var(--e5); align-items: flex-start;
  margin-bottom: var(--e3);
}
/* El chip de la barra con foto real. */
.ficha-mini.foto { object-fit: cover; border-radius: 50%; }


/* El diálogo de permisos propios: una lista compacta, lo pisado resalta. */
.dlg-permisos { max-width: 560px; }
.permisos-lista {
  display: grid; gap: var(--e1); max-height: 50vh; overflow-y: auto;
  margin: var(--e3) 0;
}
.permisos-lista label {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); padding: var(--e1) var(--e2); border-radius: var(--r-s);
}
.permisos-lista label.pisado { background: var(--info-suave); }
.permisos-lista .mono { font-size: var(--t-xs, 12px); }


/* El panel TI: tarjetas de salud y tablas densas de operación. */
.ti-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--e3); margin: var(--e4) 0;
}
.ti-kpi {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e3) var(--e4);
}
.ti-kpi dt { font-size: var(--t-xs, 12px); color: var(--texto-suave); }
.ti-kpi dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; }
.ti-kpi small { color: var(--texto-suave); }
.ti-kpi.ti-rojo { border-color: var(--critico-fuerte); }
.ti-kpi.ti-rojo dd { color: var(--critico-fuerte); }
.ti-tabla {
  width: 100%; border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
  font-size: var(--t-s, 13px); margin: var(--e3) 0;
}
.ti-tabla th, .ti-tabla td {
  padding: var(--e2) var(--e3); text-align: left;
  border-bottom: 1px solid var(--borde-hairline);
}
.ti-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ti-tabla td.ti-lento { color: var(--critico-fuerte); font-weight: 700; }
.ti-tabla tr.ti-alerta { background: var(--critico-suave); }
.ti-tabla tr.ti-ev-acceso td { background: var(--info-suave); }
.ti-detalle { max-width: 480px; overflow-wrap: anywhere; }
.ti-filtros { margin-bottom: var(--e3); }


/* La bandeja pro — anatomía de WhatsApp Web (fila 72px, avatar 48,
   burbujas con sombra y cola, hora flotada adentro) con la paleta
   sobria de la casa: azul niebla en salientes, nada de verde
   disfrazado. Investigación 2026-08-14. */
/* los tokens del mensajero viven donde los usan la bandeja Y el
   widget flotante: definidos solo en .bandeja, las burbujas del
   flotante quedaban desnudas (var() sin resolver = transparente) */
.bj-modulo, .eq-panel {
  /* pedido de Will 2026-08-15: fondo y burbujas como WhatsApp — la
     familiaridad manda sobre la paleta corporativa EN el chat */
  --bj-hilo: #efeae2;                 /* el beige clásico de WA */
  --bj-out: #d9fdd3;                  /* el verde clarito del saliente */
  --bj-sombra: 0 1px .5px rgba(11, 20, 26, .13);
  --bj-radio: 8px;
  --bj-fila: 72px;
  --bj-avatar: 48px;
}
.bj-modulo {
  display: grid; grid-template-columns: minmax(300px, 30%) 1fr;
  gap: var(--e4); align-items: stretch; margin-top: var(--e3);
  height: calc(100vh - 200px); min-height: 480px;
}
.bj-panel-lista {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); overflow: hidden;
}
.bj-buscar {
  margin: var(--e2) var(--e3); height: 35px; flex: none;
  border: 1px solid transparent; border-radius: 8px;
  padding: 0 var(--e3); font-size: var(--t-sm);
  background: var(--fondo); transition: border-color 120ms ease;
}
.bj-buscar:focus-visible { outline: none;
  border-color: var(--info-fuerte); background: var(--superficie); }
.bj-lista { overflow-y: auto; min-height: 0; }
.bj-conv {
  display: flex; gap: var(--e3); align-items: center;
  height: var(--bj-fila); padding: 0 var(--e3);
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--borde-hairline);
  transition: background-color 120ms ease;
}
.bj-conv:hover { background: var(--fondo); }
.bj-conv.activa { background: var(--bj-hilo); }
.bj-conv:focus-visible { outline: 2px solid var(--info-fuerte);
  outline-offset: -2px; }
.bj-conv-cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bj-avatar {
  width: var(--bj-avatar); height: var(--bj-avatar);
  border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: .5px;
}
.av-1 { background: linear-gradient(135deg, #5b8ac1, #3d6795); }
.av-2 { background: linear-gradient(135deg, #67a166, #47764a); }
.av-3 { background: linear-gradient(135deg, #bd7f4a, #92582b); }
.av-4 { background: linear-gradient(135deg, #8f70bd, #64478f); }
.av-5 { background: linear-gradient(135deg, #c66b91, #96426a); }
.av-6 { background: linear-gradient(135deg, #55a0b5, #337184); }
.bj-quien { display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--e2); }
.bj-quien b { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 15px; font-weight: 500; }
.bj-quien small { color: var(--texto-tenue); flex: none;
  font-size: 12px; }
.bj-conv[data-unread] .bj-quien b { font-weight: 700; }
.bj-conv[data-unread] .bj-quien small {
  color: var(--info-fuerte); font-weight: 600; }
.bj-prev {
  color: var(--texto-suave); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: var(--e1);
}
.bj-conv[data-unread] .bj-prev { color: inherit; font-weight: 600; }
.bj-noleidos {
  background: var(--info-fuerte); color: #fff; border-radius: 999px;
  min-width: 20px; height: 20px; display: inline-grid; flex: none;
  place-items: center; font-size: 12px; font-weight: 600;
  padding: 0 6px; margin-left: auto;
  transition: transform 150ms ease, opacity 150ms ease;
}
.bj-chip {
  flex: none; font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; border-radius: 4px; padding: 1px 5px;
}
.bj-chip.trabajador { background: var(--info-suave);
  color: var(--info-fuerte); }
.bj-chip.cliente { background: var(--alerta-suave, #f6ecd9);
  color: var(--alerta-fuerte); }
/* la sección del equipo dentro de la misma lista */
.bj-seccion {
  padding: var(--e3) var(--e3) var(--e1); font-size: 11px;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-suave); border-top: 1px solid var(--borde);
  margin-top: var(--e2); position: sticky; top: 0;
  background: var(--superficie); z-index: 1;
}
.bj-sala { background: linear-gradient(135deg, #6a7f96, #45586c);
  font-size: 20px; }
img.bj-avatar { object-fit: cover; }
.bj-dot.interno { background: var(--info-fuerte);
  box-shadow: 0 0 0 2px var(--info-suave); }
.bj-hilo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); display: grid;
  grid-template-rows: auto 1fr auto auto; min-height: 0;
}
.bj-sinhilo {
  display: grid; place-items: center;
  border: 1px dashed var(--borde); border-radius: var(--r-m);
}
.bj-hueco { text-align: center; display: grid; gap: var(--e2);
  justify-items: center; }
.bj-hueco-icono { font-size: 40px; opacity: .5; }
.bj-cabecera {
  padding: var(--e2) var(--e4); border-bottom: 1px solid var(--borde);
  display: flex; gap: var(--e3); align-items: center;
}
.bj-cab-datos { display: grid; line-height: 1.25; }
.bj-cab-datos small { color: var(--texto-tenue);
  display: inline-flex; align-items: center; gap: 5px; }
/* el guiño al canal: un punto verde de "conectado a WhatsApp" */
.bj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #25d366; box-shadow: 0 0 0 2px rgba(37, 211, 102, .18); }
.bj-cabecera .btn { margin-left: auto; }
.bj-reunion { flex: none; }
.bj-texto a { color: var(--info-fuerte); text-decoration: underline;
  overflow-wrap: anywhere; }
.bj-mensajes {
  overflow-y: auto; padding: var(--e3) 6%;
  display: flex; flex-direction: column;
  min-height: 0;
}
/* el fondo del hilo — en la bandeja Y en el flotante: el beige de
   WhatsApp con garabatos de la casa (planilla, reloj, boleta, chat)
   en trazo cálido tenue */
.bj-mensajes, .eq-cuerpo.eq-en-hilo {
  background-color: var(--bj-hilo, #efeae2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23cbc3b5' stroke-width='1.3' opacity='.5' stroke-linecap='round'%3E%3Cpath d='M28 36h30a7 7 0 0 1 7 7v16a7 7 0 0 1-7 7H40l-9 8v-8a7 7 0 0 1-3-14z'/%3E%3Ccircle cx='160' cy='60' r='13'/%3E%3Cpath d='M160 51v9l6 4'/%3E%3Crect x='250' y='30' width='40' height='30' rx='4'/%3E%3Cpath d='M258 40h24M258 47h16'/%3E%3Cpath d='M60 150c8-9 16 9 24 0s16 9 24 0'/%3E%3Crect x='200' y='140' width='34' height='42' rx='4'/%3E%3Cpath d='M207 150h20M207 158h20M207 166h12'/%3E%3Ccircle cx='90' cy='250' r='11'/%3E%3Cpath d='M84 262c1-6 11-6 12 0'/%3E%3Cpath d='M180 250l10 10m0-10l-10 10' /%3E%3Cpath d='M260 236v22M249 247h22'/%3E%3Cpath d='M30 300h40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
/* scroll anclado al fondo sin JS: todo desancla menos el ancla final */
.bj-mensajes > * { overflow-anchor: none; }
.bj-ancla { overflow-anchor: auto; height: 1px; flex: none; }
.bj-dia { align-self: center; position: sticky; top: 6px; z-index: 2;
  margin: var(--e3) 0 var(--e2); }
.bj-dia span {
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  box-shadow: var(--bj-sombra);
  border-radius: var(--bj-radio); padding: 5px 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; color: var(--texto-suave);
}
.bj-burbuja {
  position: relative; max-width: 65%; width: fit-content;
  /* min-width: que hasta un «ok» tenga lugar para su hora al lado —
     y que la burbuja optimista no colapse en columna de letras */
  min-width: 90px;
  padding: 6px 8px 8px 10px; margin-top: 2px;
  border-radius: var(--bj-radio); font-size: 14.2px;
  line-height: 19px; box-shadow: var(--bj-sombra);
}
.bj-burbuja.inicio { margin-top: 12px; }
.bj-burbuja.in {
  align-self: flex-start; background: var(--superficie);
}
.bj-burbuja.out {
  align-self: flex-end; background: var(--bj-out);
}
/* la cola, solo en la primera burbuja del grupo */
.bj-burbuja.in.inicio { border-top-left-radius: 0; }
.bj-burbuja.out.inicio { border-top-right-radius: 0; }
.bj-burbuja.inicio::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.bj-burbuja.in.inicio::before {
  left: -8px; background: var(--superficie);
  clip-path: path("M8 0 L8 13 C4 9 1 4 0 0 Z");
}
.bj-burbuja.out.inicio::before {
  right: -8px; background: var(--bj-out);
  clip-path: path("M0 0 L0 13 C4 9 7 4 8 0 Z");
}
/* break-word y NO anywhere: anywhere deja quebrar en cualquier letra
   y con width:fit-content encoge la burbuja cortando palabras sanas */
/* el asistente esta escribiendo: burbuja efimera que dibuja el
   servidor en el DM con el bot; los puntos laten de a uno */
.bj-escribiendo .bj-texto { color: var(--texto-suave); font-style: italic; }
.bj-puntos i { font-style: normal; animation: bj-punto 1.2s infinite; }
.bj-puntos i:nth-child(2) { animation-delay: .2s; }
.bj-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes bj-punto { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bj-puntos i { animation: none; }
}
.bj-texto { white-space: pre-wrap; overflow-wrap: break-word;
  word-break: normal; }
.bj-por { display: block; font-size: 11px; font-weight: 600;
  color: var(--info-fuerte); margin-bottom: 1px; }
/* hora + acuse al FINAL del texto, flotados a la derecha: caen en la
   última línea, abajo a la esquina — el formato exacto de WhatsApp */
.bj-meta-msg {
  float: right; margin: 8px -3px -5px 10px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--texto-tenue); user-select: none;
  line-height: 15px;
}
.bj-ticks { letter-spacing: -2px; color: #8696a0; }
.bj-ticks.leida { color: #53bdeb; }   /* el azul de leído de WA */
.bj-burbuja {
  animation: bj-entra 180ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes bj-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.bj-burbuja.pendiente { opacity: .85; }
.bj-burbuja.fallo {
  background: var(--critico-suave, #fbeaea);
  outline: 1px solid var(--critico-fuerte);
}
.bj-burbuja.fallo .bj-meta-msg { color: var(--critico-fuerte); }
.bj-responder {
  display: flex; gap: var(--e3); padding: var(--e2) var(--e3);
  min-height: 62px; border-top: 1px solid var(--borde);
  align-items: center; background: var(--fondo);
  border-radius: 0 0 var(--r-m) var(--r-m);
}
.bj-responder input {
  flex: 1; min-height: 40px; border-radius: 8px;
  padding: 9px 14px; border: 1px solid var(--borde);
  background: var(--superficie); font-size: 15px; line-height: 20px;
  transition: border-color 120ms ease;
}
.bj-responder input:focus-visible {
  outline: 2px solid var(--info-fuerte); outline-offset: -1px;
}
.bj-enviar {
  border-radius: 50%; width: 44px; height: 44px; flex: none;
  padding: 0; display: grid; place-items: center; font-size: 17px;
  background: var(--info-fuerte); color: #fff; border: 0;
}
.bj-enviar:disabled { opacity: .5; }
.bj-nota { margin: 0 var(--e4) var(--e2); font-size: 11px; }
@media (max-width: 900px) {
  .bj-modulo { grid-template-columns: 1fr; height: auto; }
  .bj-hilo { min-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-burbuja { animation: none; }
  .bj-conv, .bj-noleidos, .bj-buscar,
  .bj-responder input { transition: none; }
}

/* La sala de reunión del equipo: Jitsi enmarcado dentro de OPS. */
.sala-video {
  width: 100%; height: calc(100vh - 190px); min-height: 480px;
  border: 1px solid var(--borde); border-radius: var(--r-m);
  background: #111;
}

/* las imágenes del chat (capturas) se ven en línea */
.bj-imagen-link { display: block; margin: 2px 0 4px; }
.bj-imagen {
  max-width: 100%; max-height: 260px; border-radius: 6px;
  display: block; box-shadow: var(--bj-sombra);
}

/* La agenda: Cal.com embebido + las reservas del webhook. */
.agenda {
  display: grid; grid-template-columns: 1fr minmax(240px, 300px);
  gap: var(--e4); margin-top: var(--e3);
  height: calc(100vh - 200px); min-height: 480px;
}
.ag-marco {
  width: 100%; height: 100%; border: 1px solid var(--borde);
  border-radius: var(--r-m); background: var(--superficie);
}
.ag-invitacion { display: grid; place-items: center; }
.ag-lado { min-width: 0; overflow-y: auto; }
.ag-lista { list-style: none; margin: var(--e2) 0; padding: 0;
  display: grid; gap: var(--e2); }
.ag-item { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e2) var(--e3);
  font-size: var(--t-sm); }
.ag-item.ag-ok b { color: var(--info-fuerte); }
.ag-item.ag-critico b { color: var(--critico-fuerte); }
@media (max-width: 900px) { .agenda { grid-template-columns: 1fr;
  height: auto; } .ag-marco { min-height: 70vh; } }

/* El chat del equipo, flotante en toda la plataforma. */
/* El atributo hidden de HTML pierde contra cualquier display de CSS
   (flex/grid lo pisan): sin esta regla, el panel "cerrado" seguía en
   pantalla — el popup que nunca se retraía. */
#eq-panel[hidden], #eq-badge[hidden], #eq-form[hidden],
#eq-volver[hidden], #eq-reunion[hidden] { display: none !important; }
.eq-boton {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: var(--info-fuerte); color: #fff; font-size: 24px;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
  transition: transform 120ms ease;
}
.eq-boton:hover { transform: scale(1.06); }
.eq-boton.abierto { transform: scale(.92); opacity: .85; }
.eq-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--critico-fuerte);
  color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--fondo);
}
.eq-panel {
  position: fixed; right: 22px; bottom: 86px; z-index: 60;
  width: min(360px, calc(100vw - 44px));
  height: min(520px, calc(100vh - 130px));
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
  display: flex; flex-direction: column; overflow: hidden;
}
.eq-cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.eq-cab b { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.eq-icono {
  border: 0; background: none; cursor: pointer; font-size: 16px;
  color: var(--texto-suave); padding: 4px 7px; border-radius: 6px;
  text-decoration: none; line-height: 1;
}
.eq-icono:hover { background: var(--borde-hairline);
  color: var(--texto, #111b21); }
.eq-cuerpo { flex: 1; overflow-y: auto; min-height: 0; }
.eq-cuerpo.eq-en-hilo {
  display: flex; flex-direction: column;
  padding: var(--e2) var(--e3);
}
.eq-cuerpo.eq-en-hilo > * { overflow-anchor: none; }
.eq-cuerpo .bj-conv { height: 60px; }
.eq-cuerpo .bj-avatar { width: 40px; height: 40px; font-size: 14px; }
.eq-cuerpo .bj-burbuja { max-width: 85%; }
/* la lupa: la imagen del chat ampliada sobre un velo — un clic o
   Escape la cierran; nada se descarga */
.bj-imagen { cursor: zoom-in; }
.bj-lupa {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 22, 30, .85);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; cursor: zoom-out;
}
.bj-lupa img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}

/* el timbre: te están llamando — la tarjeta late abajo a la derecha
   en cualquier pantalla del OPS hasta que atiendas o rechaces */
.eq-ring {
  position: fixed; right: 24px; bottom: 96px; z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel, #fff); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  animation: eq-late 1.2s ease-in-out infinite;
}
.eq-ring-icono { font-size: 26px; }
.eq-ring-quien { max-width: 200px; }
.eq-ring-botones { display: flex; gap: 8px; }
@keyframes eq-late {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .eq-ring { animation: none; }
}

/* el panel flotante de la llamada: la sala de voz en la misma
   pantalla — sin pestañas; Colgar la corta */
/* ARRIBA a la derecha, no abajo: abajo tapaba justo el cuadro donde se
   escriben los mensajes, que es lo último que uno quiere perder durante
   una llamada. Acá se lee como una barra de estado y no estorba nada. */
.eq-llamada-panel {
  position: fixed; right: 24px; top: 16px; z-index: 9998;
  width: 340px; display: flex; flex-direction: column;
  background: var(--panel, #fff); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
/* Sin nada que mirar, el panel es apenas una barra de teléfono. El
   ancho y el alto van FIJOS —no `auto`— porque de ahí sale el plegado:
   `auto` no se puede animar, y una pastilla que aparece de golpe no es
   plegarse, es parpadear. */
.eq-llamada-panel.solo-voz { width: 250px; height: 80px; }
/* …salvo cuando hay algo abierto adentro: entonces el alto lo manda el
   contenido, o la lista de invitados quedaría cortada por el recorte
   del panel. */
.eq-llamada-panel.solo-voz:has(.eq-aviso:not([hidden])) { height: auto; }
.eq-llamada-panel.solo-voz:has(.eq-invitar:not([hidden])) {
  width: 300px; height: auto;
}
.eq-llamada-panel {
  transition: width .26s cubic-bezier(.4, 0, .2, 1),
              height .26s cubic-bezier(.4, 0, .2, 1),
              border-radius .26s cubic-bezier(.4, 0, .2, 1);
}

/* PLEGADO: a los 5 segundos ya leíste con quién hablás, así que el
   panel se hace a un lado y queda un botón redondo con el auricular.
   El :hover lo devuelve entero — el JS solo pone la clase, abrir y
   cerrar es del CSS, que nunca se traba. `:focus-within` cubre al que
   navega con teclado y a la lista de invitados abierta. */
.eq-llamada-panel.plegado.solo-voz:not(:hover):not(:focus-within) {
  width: 46px; height: 46px; border-radius: 23px;
}
.eq-llamada-panel.plegado.solo-voz:not(:hover):not(:focus-within)
  .eq-llamada-cab { opacity: 0; }
.eq-llamada-panel.plegado.solo-voz:not(:hover):not(:focus-within)
  .eq-mini { opacity: 1; }
.eq-llamada-cab, .eq-mini { transition: opacity .18s ease; }
/* el auricular de la pastilla: lo único que se ve plegado, así que
   late para decir que la llamada sigue viva */
.eq-mini {
  position: absolute; inset: 0; display: flex; opacity: 0;
  align-items: center; justify-content: center; pointer-events: none;
  color: var(--ok-fuerte, #15803d);
  animation: eq-latido 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .eq-mini { animation: none; }
  .eq-llamada-panel, .eq-llamada-cab, .eq-mini { transition: none; }
}
/* `display:flex` le gana al `hidden` del navegador: sin esto, la lista
   de invitados se queda a la vista aunque el código la dé por cerrada. */
.eq-invitar[hidden], .eq-aviso[hidden] { display: none; }
/* el aviso de qué elegir al compartir pantalla */
.eq-aviso {
  margin: 0; font-size: 11.5px; line-height: 1.35; opacity: .8;
  border-top: 1px solid var(--borde); padding-top: 7px;
}
.eq-llamada-cab {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
}
.eq-llamada-titulo {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
/* el punto que dice «esto está vivo» */
.eq-punto {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--ok-fuerte, #15803d);
  animation: eq-latido 1.8s ease-in-out infinite;
}
@keyframes eq-latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .eq-punto { animation: none; }
}
.eq-llamada-rotulo {
  font-size: 12.5px; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 250px;
}
/* Íconos cuadrados, del mismo tamaño, y Colgar separado del resto para
   que no se apriete por accidente. */
.eq-llamada-tira { display: flex; align-items: center; gap: 6px; }
.eq-llamada-tira .btn {
  width: 34px; height: 34px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.eq-llamada-tira .eq-colgar { margin-left: auto; }
/* el mismo auricular del timbre, boca abajo: el gesto universal de
   cortar, sin una palabra */
.eq-ico-colgar { transform: rotate(135deg); }

/* Sumar gente: la lista con casillas, como el «Añadir participante» de
   WhatsApp. Vive dentro del panel para no abrir otra ventana. */
.eq-invitar {
  border-top: 1px solid var(--borde); padding-top: 8px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.eq-invitar-lista {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 190px; overflow-y: auto;
}
.eq-invitar-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 8px; cursor: pointer;
  font-size: 13px;
}
.eq-invitar-fila:hover { background: var(--fondo-suave, #f1f5f9); }
.eq-invitar-fila small { margin-left: auto; opacity: .6; font-size: 11px; }
.eq-invitar-nota { font-size: 12px; opacity: .75; margin: 0; }
.eq-llamada-sala { width: 100%; }
.eq-llamada-panel iframe { width: 100%; height: 100%; border: 0; }
.eq-llamada-sala iframe { display: block; }

/* SOLO VOZ: no hay nada que mirar, así que la sala no ocupa pantalla —
   sigue viva (el audio corre), simplemente no se muestra. El panel es
   una barra de teléfono. */
.eq-llamada-panel.solo-voz .eq-llamada-sala { height: 0; overflow: hidden; }
.eq-llamada-panel.solo-voz .eq-max { display: none; }

/* ALGUIEN COMPARTE PANTALLA: el panel se agranda solo, de los dos
   lados, y aparece «⛶» para verlo en grande. La llamada nunca se corta:
   es la misma sala con una pista más. */
.eq-llamada-panel:not(.solo-voz) .eq-llamada-sala { height: 320px; }

/* MAXIMIZADO: ocupa la ventana. Sin ir a otra pestaña ni perder el
   audio — el mismo nodo, otro tamaño. */
.eq-llamada-panel.maximizado {
  inset: 2vh 2vw auto 2vw; width: auto; right: 2vw; bottom: auto;
  z-index: 10001;
}
.eq-llamada-panel.maximizado .eq-llamada-sala { height: 82vh; }

/* El campo al que alguien vino a arreglar algo. Llega desde el cierre
   del mes («fulano · sin cuenta bancaria») con ?fijar= : la ficha abre
   el editor y este anillo dice cuál de los treinta campos es. Se apaga
   solo al escribir — ya cumplió. */
.campo-en-foco {
  border-color: var(--critico-fuerte) !important;
  box-shadow: 0 0 0 3px var(--critico-suave);
  animation: campo-late 1.1s ease-in-out 3;
}
.campo-en-foco:focus { animation: none; }
@keyframes campo-late {
  0%, 100% { box-shadow: 0 0 0 3px var(--critico-suave); }
  50% { box-shadow: 0 0 0 6px var(--critico-suave); }
}
@media (prefers-reduced-motion: reduce) {
  .campo-en-foco { animation: none; }
}

/* el resorte del arrastre: mientras la tarjeta espera encima, el
   destino avisa que está por abrirse */
.eq-espera {
  outline: 2px dashed #53bdeb; outline-offset: 2px;
  filter: brightness(1.06);
}

/* crear grupo: la pantalla de nacimiento, con su gente en casillas */
.bj-crear {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); overflow-y: auto;
}
.bj-crear input[name=nombre] {
  padding: 10px 12px; font-size: 15px; min-width: 0;
}
.bj-miembros {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--borde); border-radius: var(--bj-radio);
  padding: var(--e2); max-height: 340px; overflow-y: auto;
  background: var(--fondo);
}
.bj-miembro {
  display: flex; align-items: center; gap: var(--e3);
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.bj-miembro:hover { background: var(--fondo-suave); }
.bj-miembro .bj-avatar { width: 34px; height: 34px; font-size: 13px; }
.bj-miembro small { color: var(--texto-suave); display: block; }
.bj-crear .btn { align-self: flex-start; }

/* el compositor del flotante es angosto y ahora lleva tres botones:
   todo compacto para que el de enviar no se caiga del borde */
.eq-form { border-radius: 0; gap: 2px; padding: var(--e2); }
.eq-form .bj-clip { padding: 3px 2px; }
.eq-form input[name=texto] {
  min-width: 0; padding: 8px 10px; font-size: 14px;
}
.eq-form .bj-enviar { width: 36px; height: 36px; font-size: 14px; }
.bj-responder input[name=texto] { min-width: 0; }
.eq-toast {
  position: fixed; right: 22px; bottom: 90px; z-index: 70;
  background: var(--texto, #1c2024); color: #fff;
  padding: var(--e2) var(--e4); border-radius: 999px;
  font-size: var(--t-sm); cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .3);
  animation: bj-entra 180ms cubic-bezier(.2, 0, 0, 1);
}
.bj-clip {
  cursor: pointer; font-size: 17px; flex: none; border: 0;
  background: none; color: var(--texto-suave); padding: 4px;
  display: inline-grid; place-items: center;
}
.bj-clip:hover { color: var(--info-fuerte); }
.bj-clip svg { display: block; }
.bj-vencido { color: var(--texto-tenue); text-decoration: none;
  cursor: default; }
/* la vista previa de la tarjeta, arriba del compositor */
.bj-preview {
  padding: var(--e2) var(--e3) 0; background: var(--fondo);
  border-top: 1px solid var(--borde);
}
.bj-preview small { color: var(--texto-suave); }
.bj-preview .bj-tarjeta { margin: 4px 0 var(--e2); }
.bj-preview { position: relative; }
.bj-preview-x {
  position: absolute; top: 4px; right: 8px; z-index: 1;
  border: 0; background: none; cursor: pointer; font-size: 16px;
  color: var(--texto-suave); padding: 2px 6px; border-radius: 6px;
}
.bj-preview-x:hover { background: var(--borde-hairline);
  color: var(--critico-fuerte); }
/* la tarjeta dentro de la burbuja va ARRIBA del texto (como la cita
   de WhatsApp): aire hacia abajo, no hacia arriba */
.bj-burbuja .bj-tarjeta { margin: 2px 0 6px; }
.bj-mencion {
  background: var(--alerta-suave, #fdf3d7); color: var(--alerta-fuerte);
  border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.bj-resultado .bj-quien small { font-size: 11px; }
/* la tarjeta viva: un link a una ficha se vuelve tarjeta clickeable */
.bj-tarjeta {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: 6px; padding: var(--e2) var(--e3);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--bj-radio, 8px); text-decoration: none;
  color: inherit; box-shadow: var(--bj-sombra);
  transition: border-color 120ms ease;
}
.bj-tarjeta:hover { border-color: var(--info-fuerte); }
.bj-tarjeta-icono { font-size: 20px; flex: none; }
.bj-tarjeta-datos { display: grid; line-height: 1.3; min-width: 0; }
.bj-tarjeta-datos small { color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* la paleta de emojis del compositor */
#paleta-emojis {
  position: fixed; z-index: 80; width: 232px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: var(--e2);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .22);
}
#paleta-emojis button {
  border: 0; background: none; font-size: 20px; cursor: pointer;
  border-radius: 6px; padding: 4px;
}
#paleta-emojis button:hover { background: var(--fondo); }

.bj-adjunto {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0; font-size: 13px; color: var(--info-fuerte);
  text-decoration: underline; overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .eq-panel { right: 8px; bottom: 78px; }
  .eq-boton { right: 12px; bottom: 14px; }
}

/* La ficha compacta que vive dentro de Chatwoot (Dashboard App). */
.pf-cuerpo { background: var(--fondo); padding: var(--e3); }
.pf-caja { display: grid; gap: var(--e2); }
.pf-nombre { margin: 0; font-size: var(--t-md, 16px); }
.pf-dato { margin: 0; }

/* el panel de préstamos de la ficha: la fila de abono y el alta */
.fila-abono { display: flex; gap: 4px; }
.fgrid.f-suave { margin-top: 6px; padding: 14px 18px; max-width: 680px; }

/* el botón de reproceso convive en línea con los enlaces del pie del lote */
.desc.en-linea { display: inline-block; }

/* Las preguntas que el importador hace cuando el archivo no alcanza:
   ocupan la fila entera porque son la decisión más pesada de la pantalla
   de confirmación y no deben quedar apretadas al lado de un desplegable. */
.fld-pregunta { flex-basis: 100%; }

/* La nota al pie de la pantalla de reglas del mes: separada del último
   panel para que se lea como comentario del autor y no como una banda
   más de configuración. */
.cfg-nota { margin-top: 18px; }

/* La tabla de reglas del mes: tres columnas —concepto, valor, de dónde
   sale—. La tercera es la que hace que se pueda confiar en el número, así
   que no se achica hasta que no queda otra. */
.cfg { width: 100%; border-collapse: collapse; }
.cfg th { text-align: left; font-weight: 600; font-size: 12.5px;
          color: var(--texto-tenue); border-bottom: 1px solid var(--borde);
          padding: 6px 8px; }
.cfg td { padding: 6px 8px; border-bottom: 1px solid var(--borde-tenue); }
.cfg td.desc { font-size: 12.5px; color: var(--texto-tenue); }

/* El acceso a las reglas del mes desde la grilla: botón + aclaración en
   una línea, arriba de las tarjetas de valores. */
.mapa-config-link { display: flex; gap: 10px; align-items: center;
                    margin: 4px 0 10px; flex-wrap: wrap; }

/* El gross-up derivado en la pantalla de reglas del mes: se muestra como
   resultado, no como campo — la caja distinta ES el mensaje. */
.cfg-derivado { font-size: 18px; font-weight: 700; padding: 6px 0; }

/* Heredar la config del mes anterior: un clic con rastro, nunca en
   silencio (el aviso de exito lo dice: heredar no es decidir). */
.cfg-heredar { margin-top: 10px; }

/* Anular un lote confirmado: el deshacer con motivo obligatorio. */
.anular-caja { display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-top: 6px; }
.anular-motivo { font: inherit; padding: 5px 8px; width: min(420px, 100%);
  border: 1px dashed var(--borde); border-radius: 8px;
  background: var(--superficie); }
button.peligro { background: var(--critico-fuerte);
  border-color: var(--critico-fuerte); }
button.peligro:hover { background: #8F1C13; border-color: #8F1C13; }

/* --- Barra de acciones del contrato (ficha 360) ---------------------
   Pestañas de una fila en vez de details apilados: cada acción con su
   nombre claro, un solo panel abierto, y el panel como tarjeta de la
   casa. El tooltip lleva la pista larga («correcciones auditadas…»). */
.ct-acciones {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  margin: var(--e3) 0 var(--e2);
  border-bottom: 1px solid var(--borde); padding-bottom: var(--e2);
}
.ct-tab {
  appearance: none; cursor: pointer;
  background: var(--superficie); color: var(--marca-800);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 5px 14px; font-size: var(--t-sm); font-weight: 600;
  font-family: inherit; line-height: 1.4;
}
.ct-tab:hover { background: var(--marca-050); }
.ct-tab[aria-expanded="true"] {
  background: var(--marca-800); color: #fff; border-color: var(--marca-800);
}
.ct-panel {
  border: 1px solid var(--borde); border-radius: var(--r-m);
  background: var(--superficie); padding: var(--e3) var(--e4);
  margin: 0 0 var(--e3);
}

/* --- Archivado de clientes y proyectos (pedido 10) ------------------ */
.fila-archivada td { opacity: .55; }
.arch-form { display: flex; gap: var(--e1); align-items: center; }
.arch-form input { font-size: var(--t-xs); }
/* el bloque de archivar (rediseño 01-sep): la explicación ARRIBA,
   la acción abajo — motivo y botón en una fila, el botón chico
   porque es una acción rara, no la primaria de la pantalla */
.arch-cliente { margin-top: var(--e4); padding-top: var(--e4);
  border-top: 1px solid var(--borde-hairline); }
.arch-nota { margin: 0 0 12px; color: var(--texto-suave);
  font-size: var(--t-sm); line-height: 1.55; text-align: justify; }
.arch-accion { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.arch-accion .btn { flex: 0 0 auto; }

/* rd-fill — el campo suelto con la piel del rd-form (fuera de un
   .fgrid no heredaba nada y se veía de otra época) */
.rd-fill { flex: 1 1 240px; min-width: 0; box-sizing: border-box;
  min-height: 42px; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 9px 14px; font-size: var(--t-md); font-family: inherit;
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s; }
.rd-fill::placeholder { color: var(--texto-tenue); }
.rd-fill:focus { outline: none; border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-050);
  background: var(--superficie); }

/* la ficha del cliente estrena el mismo encuadre que la de la
   oferta en /empleos: sin banda decorativa y compacta, para que
   las pestañas se lean idénticas en las dos pantallas */
.cli-hero .hero-tapa { display: none; }

/* los dos bloques del resumen, a la MISMA altura (Will, 01-sep):
   la columna se estira con el grid y su panel llena la columna —
   «De un vistazo» acompaña a «Datos del cliente» hasta el pie */
.dos-col--pareja { align-items: stretch; }
.dos-col--pareja > div, .dos-col--pareja > aside {
  display: flex; flex-direction: column; }
.dos-col--pareja > aside > .panel { flex: 1 1 auto; }

/* ------------------------------------------------ editor del sitio -- */
/* Dos columnas: paneles de edicion a la izquierda, visor del borrador
   pegajoso a la derecha. En pantallas angostas el visor baja. */
.editor-sitio{display:grid;grid-template-columns:minmax(420px,46%) 1fr;
              gap:18px;align-items:start}
.es-paneles{min-width:0}
.es-visor{position:sticky;top:12px;min-width:0}
.es-visor iframe{width:100%;height:calc(100vh - 120px);border:1px solid
                 var(--borde);border-radius:12px;background:var(--superficie)}
.es-visor-cab{display:flex;justify-content:space-between;align-items:center;
              font-size:12px;color:var(--texto-suave);margin-bottom:6px}
.eq-fila{display:flex;gap:10px;align-items:center;padding:8px 0;
         border-bottom:1px solid var(--borde-hairline)}
.eq-foto{width:44px;height:58px;object-fit:cover;border-radius:8px;
         border:1px solid var(--borde)}
.eq-foto--ancha{width:180px;height:132px;margin-bottom:8px}
.sec-oculta td{opacity:.5}
.acciones-sec form{display:flex;gap:4px}
@media (max-width:1100px){.editor-sitio{grid-template-columns:1fr}
  .es-visor iframe{height:60vh}}

/* ---------------------------------------------------- modulo empleos -- */
/* .fld.fld--fila: doble clase A PROPOSITO — forms.css define
   .fld{flex-direction:column} y se carga DESPUES de esta hoja;
   con especificidad igual, la fila nunca aplicaba (auditoria
   26-ago: el checkbox de salario se apilaba desde siempre) */
.fld.fld--fila{flex-direction:row;gap:8px;align-items:baseline}
.fld--total{flex:1 1 100%}
.texto-plegado{white-space:pre-wrap}
.cv-texto{white-space:pre-wrap;font-family:var(--mono,Consolas,monospace);
          font-size:12.5px;max-height:60vh;overflow:auto;
          background:var(--fondo);border:1px solid var(--borde);
          border-radius:10px;padding:14px}

/* ------------------------------------- editor enriquecido (empleos) -- */
.oculto{display:none}
.rt-editor{border:1px solid var(--borde-campo);border-radius:10px;
           background:var(--superficie);overflow:hidden}
.rt-toolbar{display:flex;gap:2px;padding:6px;background:var(--fondo);
            border-bottom:1px solid var(--borde)}
.rt-toolbar button{border:1px solid transparent;background:none;
  border-radius:6px;padding:4px 10px;font-size:12.5px;cursor:pointer;
  color:var(--texto)}
.rt-toolbar button:hover{background:var(--marca-050);
  border-color:var(--borde)}
/* el placeholder DE FONDO del editor: guía, no texto preescrito que
   había que borrar (pedido de Will) */
.rt-area:empty::before{content:attr(data-placeholder);
  color:var(--texto-suave);pointer-events:none;display:block}
.rt-area{min-height:220px;max-height:55vh;overflow:auto;padding:14px 16px;
         font-size:14px;line-height:1.6;outline:none}
.rt-area h3{margin:14px 0 4px;font-size:15px}
.rt-area ul,.rt-area ol{padding-left:22px;margin:6px 0}
.eq-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;
         border:1px solid var(--borde);background:var(--superficie);
         padding:3px}
.eq-logo--vacio{display:inline-grid;place-items:center;
                color:var(--texto-tenue);font-size:18px}
/* el visor del editor del sitio, en pantallas angostas: PRIMERO y a
   media altura — antes caía debajo de todos los paneles y "no se veía" */
@media (max-width:1100px){
  .es-visor{order:-1;position:static;margin-bottom:14px}
  .es-visor iframe{height:52vh}
}
/* grupos plegables del editor de textos del sitio */
.es-grupo{border:1px solid var(--borde-hairline);border-radius:10px;
          margin:6px 0;padding:0}
.es-grupo summary{cursor:pointer;padding:9px 14px;font-weight:600;
                  font-size:13px;color:var(--marca-800)}
.es-grupo[open]{background:var(--fondo)}
.es-grupo .frow{padding:4px 14px 12px}
/* toast del editor: guardado sin recargar */
.es-toast{position:fixed;right:22px;bottom:22px;z-index:600;
  background:var(--marca-900);color:var(--superficie);border-radius:10px;
  padding:11px 18px;font-size:13px;opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;box-shadow:0 8px 30px
  rgba(23,26,46,.35)}
.es-toast.va{opacity:1;transform:none}
.es-toast--mal{background:var(--critico-fuerte)}
/* editor enriquecido: estado activo de la barra + botones de IA */
.rt-toolbar button.rt-activo{background:var(--marca-800);color:var(--superficie);
  border-color:var(--marca-800)}
.rt-sep{width:1px;align-self:stretch;background:var(--borde);margin:0 4px}
.rt-ia{color:var(--marca-800);font-weight:600}
.rt-ia:disabled{opacity:.6;cursor:wait}
/* panel de datos de «Crear con IA» */
.rt-ia-panel{border-top:1px solid var(--borde);background:var(--marca-050);
  padding:12px 16px}
.rt-ia-panel__titulo{font-weight:600;font-size:13px;color:var(--marca-800);
  margin-bottom:8px}
.rt-ia-panel textarea,.rt-ia-panel input{width:100%;font:inherit;
  font-size:13px;border:1px solid var(--borde-campo);border-radius:8px;
  padding:7px 10px;background:var(--superficie)}

/* --- CV con lectura asistida: evaluación y CV lado a lado ---------- */
.cv-eval-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;align-items:start}
@media (max-width:1100px){.cv-eval-grid{grid-template-columns:1fr}}
.cv-eval-grid>section.panel{margin:0}
.cvd-sec{margin:0 0 14px}
.cvd-sec h4{margin:0 0 4px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marca-700);
  border-bottom:1px solid var(--borde-hairline);padding-bottom:3px}
.cvd-texto{white-space:pre-wrap;font-size:13.5px;line-height:1.55;
  color:var(--texto)}
.cvd mark{border-radius:4px;padding:0 3px;cursor:help;color:inherit}
mark.mk-req{background:var(--ok-100,#d9f2e3);
  box-shadow:inset 0 -2px 0 var(--ok-500,#2e9e5b)}
mark.mk-parcial{background:var(--alerta-100,#fdf0d3);
  box-shadow:inset 0 -2px 0 var(--alerta-500,#d99a1b)}
mark.mk-fuerte{background:var(--info-100,#dce9fb);
  box-shadow:inset 0 -2px 0 var(--info-500,#3f7bd9)}
mark.mk-alerta{background:var(--critico-100,#fbe1e1);
  box-shadow:inset 0 -2px 0 var(--critico-500,#cf4444)}
mark[class^='mk-']{border-radius:4px;padding:0 2px;cursor:help;
  color:inherit;transition:box-shadow .15s,filter .15s}
/* la lumbre: al pasar por el requisito, su evidencia se enciende */
mark.mk-lumbre{filter:saturate(1.6);
  box-shadow:0 0 0 3px var(--marca-200,#E1C0DC),
             inset 0 -2px 0 currentColor}
tr[data-mk-ref]{cursor:pointer}
tr[data-mk-ref]:hover td{background:var(--fondo)}
li[data-mk-ref]{cursor:pointer}
li[data-mk-ref]:hover{background:var(--fondo);border-radius:6px}
tr.mk-fila-activa td{background:var(--marca-50,#F5EAF4)}
li.mk-fila-activa{background:var(--marca-50,#F5EAF4);border-radius:6px}
.cvd-leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  padding-top:8px;border-top:1px dashed var(--borde-hairline);
  font-size:12px;color:var(--texto-suave)}
.cvd-leyenda--arriba{border-top:0;padding-top:0;margin:0 0 12px;
  border-bottom:1px dashed var(--borde-hairline);padding-bottom:8px}

/* --- CV como perfil (estilo LinkedIn) ------------------------------ */
.cvp-titular{font-size:15px;font-weight:700;
  color:var(--texto);margin:0 0 12px}
/* el tablero arrastrable: la tarjeta se LEVANTA (3D) y la columna
   destino se enciende con el lavado de la casa */
.tab-col .cand-card[data-post]{cursor:grab;touch-action:none}
.cand-card.volando{position:fixed;z-index:130;pointer-events:none;
  cursor:grabbing;transform:rotate(2deg) scale(1.05);
  box-shadow:0 24px 48px rgb(23 26 46 / 32%);
  transition:transform .1s, box-shadow .1s}
.cand-hueco{border:2px dashed var(--borde);border-radius:12px;
  background:var(--fondo);margin-bottom:10px}
body.arrastrando-ficha{cursor:grabbing;user-select:none}
@media (prefers-reduced-motion: reduce){
  .cand-card.volando{transform:none;transition:none}}
.tab-col.col-destino .tab-col-cuerpo{
  outline:2px dashed var(--marca-500);outline-offset:-4px;
  background:var(--marca-050);border-radius:10px}
@media (prefers-reduced-motion: reduce){
  .cand-card.arrastrando{transform:none;transition:none}}
.cvp-h{margin:22px 0 10px;font-size:15px;font-weight:700;
  color:var(--marca-900);border-bottom:2px solid var(--borde-hairline);
  padding-bottom:5px}
.cvp-acerca{font-size:13.5px;line-height:1.6}
.cvp-datos{overflow-wrap:anywhere;display:grid;grid-template-columns:repeat(auto-fit,
  minmax(210px,1fr));gap:8px 18px;background:var(--fondo);
  border:1px solid var(--borde-hairline);border-radius:10px;
  padding:12px 14px;margin:0 0 6px}
.cvp-dato span{display:block;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto-suave)}
.cvp-dato b{font-size:13px;font-weight:600;word-break:break-word}
.cvp-tarjetas{display:flex;flex-direction:column;gap:10px}
.cvp-tarjeta{border:1px solid var(--borde);border-radius:10px;
  padding:12px 14px;background:var(--superficie)}
.cvp-tarjeta--chica{padding:10px 14px}
.cvp-tarjeta-cab{display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px}
.cvp-cargo{font-weight:700;font-size:14.5px;line-height:1.3}
.cvp-org{font-size:13px;color:var(--texto-suave);margin-top:2px}
.cvp-pill{flex:none;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--fondo);border:1px solid var(--borde-hairline);
  border-radius:999px;padding:3px 11px;color:var(--texto-suave)}
.cvp-vinetas{list-style:none;margin:9px 0 0;padding:0;font-size:13px;
  line-height:1.55}
.cvp-vinetas li{position:relative;padding-left:18px;margin-bottom:5px}
.cvp-vinetas li::before{content:"▸";position:absolute;left:3px;
  top:0;color:var(--marca-700);font-size:14px;line-height:1.5}
.cvp-chips{display:flex;flex-wrap:wrap;gap:7px}
.cvp-chip{border:1px solid var(--borde);border-radius:999px;
  padding:4px 12px;font-size:12.5px;background:var(--superficie)}
.cvp mark,.cvp-chip mark{border-radius:4px;padding:0 2px;cursor:help;
  color:inherit}

/* --- anillo de puntaje en la cabecera de ficha --------------------- */
.anillo{position:relative;width:84px;height:84px;flex:none}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo-fondo{fill:none;stroke:var(--borde-hairline);stroke-width:9}
.anillo-arco{fill:none;stroke:var(--marca-700);stroke-width:9;
  stroke-linecap:round;transition:stroke-dashoffset .4s}
.anillo--ok .anillo-arco{stroke:var(--ok-fuerte)}
.anillo--info .anillo-arco{stroke:var(--info-fuerte)}
.anillo--neutro .anillo-arco{stroke:var(--texto-tenue)}
.anillo-num{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:20px;
  color:var(--marca-900)}
.anillo-num small{font-size:10px;font-weight:400;opacity:.7;
  margin-left:1px}


/* --- hero compacta: la misma cabecera a media portada -------------- */
.hero--compacta .hero-tapa{height:34px}
.hero--compacta .avatar{width:84px;height:84px;border-width:3px}
.hero--compacta .avatar.ini{font-size:var(--t-2xl)}
.hero--compacta .hero-info>.avatar,
.hero--compacta .hero-info>.avatar-caja{margin-top:0}
.hero--compacta .hero-info{padding-top:14px}
.hero--compacta h1{font-size:var(--t-2xl)}
.hero--compacta .anillo{width:72px;height:72px}
.hero--compacta .anillo-num{font-size:17px}

/* --- la ficha del candidato como dialogo --------------------------- */
.ficha-dialogo{border:0;border-radius:14px;padding:0;
  width:min(1720px,98vw);background:var(--fondo);
  box-shadow:0 24px 70px rgba(23,16,46,.35)}
.ficha-dialogo::backdrop{background:rgba(23,16,46,.55)}
/* el fondo NO se desplaza mientras la ficha está abierta (y la barra del
   navegador no salta: canal reservado) */
html:has(dialog.ficha-dialogo[open]){overflow:hidden;scrollbar-gutter:stable}
/* el resumen de ajuste, con voz propia */
.emp-ev-resumen{font-weight:500;font-size:var(--t-md);
  line-height:1.6;color:var(--texto);max-width:70ch}
/* las notas y el resumen de la ficha: justificados y a
   TODO el ancho (el max-width base los cortaba a 70ch) */
.cv-eval-grid .panel-nota,.cv-eval-grid .emp-ev-resumen{text-align:justify;
  max-width:none;hyphens:auto;text-wrap:pretty}
/* Decisión siempre a mano: una BARRA al pie de la columna, fuera del scroll —
   la decisión a la izquierda, lo demás a la derecha; sin título ni tarjeta */
.emp-decision{flex:0 0 auto;background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r-l);padding:10px 14px;box-shadow:0 -8px 18px rgba(23,26,46,.07)}
.emp-decision__fila{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.emp-decision__grupo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.emp-decision__grupo--sec{margin-left:auto}
.emp-decision__nota{margin:6px 0 0;font-size:var(--t-xs);color:var(--texto-suave)}
@media (max-height:820px){.emp-decision__nota{display:none}}
.ficha-cuerpo{max-height:93vh;overflow:auto;padding:18px 22px 14px}
.ficha-cerrar{position:absolute;top:26px;right:30px;z-index:6;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--borde);
  background:var(--superficie);color:var(--texto-suave);font-size:19px;
  line-height:1;cursor:pointer}
.ficha-cerrar:hover{color:var(--texto)}
/* la navegación entre candidatos vive en las acciones de la hero, con el anillo */
.ficha-nav{display:flex;align-items:center;gap:10px;margin:0}
.ficha-nav__pos{font-size:var(--t-sm);color:var(--texto-suave);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-acciones:has(.ficha-nav){align-items:center;gap:14px;padding-bottom:0}
.emp-ajuste{display:grid;justify-items:center;gap:2px}
.emp-ajuste__cap{font-size:var(--t-2xs);letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto-suave);white-space:nowrap}
/* la hero compacta DENTRO del diálogo: es un modal de trabajo, no una portada
   (compacta a secas la usan otras fichas: no se toca) */
.ficha-dialogo .hero--compacta{margin-bottom:var(--e4)}
.ficha-dialogo .hero--compacta .hero-tapa{height:28px}
.ficha-dialogo .hero--compacta .avatar{width:64px;height:64px;border-width:3px}
.ficha-dialogo .hero--compacta .avatar.ini{font-size:var(--t-xl)}
.ficha-dialogo .hero--compacta .hero-info{padding:10px var(--e5) 12px;gap:var(--e4)}
.ficha-dialogo .hero--compacta h1{font-size:var(--t-xl)}
.ficha-dialogo .hero--compacta .hero-sub{margin-top:4px;font-size:var(--t-base)}
.ficha-dialogo .hero--compacta .hero-badges{margin-top:6px}
.ficha-dialogo .hero--compacta .anillo{width:60px;height:60px}
.ficha-dialogo .hero--compacta .anillo-num{font-size:15px}
.ficha-dialogo .hero--compacta .tab{padding:9px 0 8px;font-size:var(--t-md)}
/* densidad de herramienta, no de página: solo dentro del diálogo */
.ficha-dialogo .panel{padding:var(--e4)}
.ficha-dialogo .panel>h2:first-child,.ficha-dialogo .panel-cab h2{font-size:var(--t-md)}
.ficha-dialogo .panel-cab{margin-bottom:var(--e3)}


/* --- modal de progreso al reevaluar CVs ---------------------------- */
.eval-progreso{border:0;border-radius:14px;padding:26px 34px;
  text-align:center;background:var(--superficie);
  box-shadow:0 24px 70px rgba(23,16,46,.35);min-width:320px}
.eval-progreso::backdrop{background:rgba(23,16,46,.55)}
.eval-progreso b{display:block;font-size:16px;color:var(--marca-900);
  margin-bottom:6px}
.eval-progreso .desc{margin:0}
.eval-barra{height:8px;border-radius:999px;background:var(--fondo);
  margin:14px 0 4px;overflow:hidden}
.eval-barra i{display:block;height:100%;width:0;border-radius:999px;
  background:var(--marca-700);transition:width .6s}

/* --- pastilla flotante del lote minimizado ------------------------- */
.eval-pill{position:fixed;right:18px;bottom:18px;z-index:60;
  border:1px solid var(--borde);border-radius:999px;cursor:pointer;
  background:var(--superficie);color:var(--texto);font:inherit;
  font-size:13px;font-weight:600;padding:10px 18px;
  box-shadow:0 8px 26px rgba(23,16,46,.22)}
.eval-pill:hover{border-color:var(--marca-700)}
.eval-pill--alerta{border-color:var(--alerta-500,#d99a1b);
  background:var(--alerta-100,#fdf0d3);color:var(--texto)}

/* --- panel de reclutamiento: Top 5 y tablero por estados ----------- */
/* la galeria de la pre-alta (lado Stolzel): miniaturas clicables —
   el CI a tamano natural (1600px) se comia la ventana entera */
.pa-galeria{display:flex;gap:14px;flex-wrap:wrap}
.pa-galeria figure{margin:0;text-align:center}
.pa-galeria img{max-height:190px;max-width:280px;width:auto;
  border:1px solid var(--borde);border-radius:var(--r-m);display:block}
.pa-galeria figcaption{font-size:11.5px;color:var(--texto-suave);
  margin-top:4px}

/* utilidades del buscador: el campo libre crece, la fila alinea
   sus pies (mismo dibujo que el buscador de /base, sin style= inline) */
.fld--crece{flex:1;min-width:220px}
.frow--pie{align-items:flex-end}

/* convocatoria terminada (cerrada o vencida): la fila se apaga,
   el badge critico sigue gritando porque no hereda estos colores */
.of-terminada td b,.of-terminada td .desc{color:var(--texto-tenue)}
.tablero-h{margin:4px 0 10px}
/* --- el tablero de candidatos por estado (05-sep): SIN scroll anidado (la
   página desplaza), columnas como tarjetas del kit y la ficha limpia;
   el podio de los mejores ajustes con su medallón --------------------- */
.top5{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:22px}
.cand-tablero{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;align-items:start}
@media (max-width:1150px){.cand-tablero{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cand-tablero{grid-template-columns:1fr}}
.tab-col{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;min-width:0;
  box-shadow:0 12px 26px -18px rgba(54,54,54,.35);overflow:hidden}
.tab-col>header{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);padding:11px 14px;
  border-bottom:1px solid var(--borde-hairline);background:var(--fondo)}
.tab-col-punto{width:10px;height:10px;border-radius:50%;background:var(--texto-tenue);flex:none}
.col-nueva .tab-col-punto{background:var(--alerta-fuerte)}
.col-vista .tab-col-punto{background:var(--info-fuerte)}
.col-pre .tab-col-punto{background:var(--ok-fuerte)}
.tab-col-rotulo{flex:1 1 auto;min-width:0}
.tab-col>header .n{font-size:var(--t-2xs);font-weight:700;background:var(--superficie);
  border:1px solid var(--borde);border-radius:999px;padding:1px 9px;color:var(--texto);letter-spacing:0}
.tab-col-cuerpo{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:96px}
.tab-col-vacia{text-align:center;margin:8px 0}
.cand-card{position:relative;background:var(--superficie);cursor:pointer;
  border:1px solid var(--borde);border-radius:12px;padding:10px 12px;
  transition:box-shadow .15s,border-color .15s}
.cand-card:hover{border-color:var(--marca-500);box-shadow:0 10px 22px -14px rgba(92,24,95,.45)}
.cand-cab{display:flex;gap:10px;align-items:center;min-width:0}
.cand-card .avatar{width:40px;height:40px;flex:none}
.cand-card .avatar.ini{font-size:14px}
.cand-quien{min-width:0;display:flex;flex-direction:column;flex:1 1 auto}
.cand-nombre{font-weight:600;font-size:13.5px;line-height:1.25;color:var(--texto);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-nombre:hover{color:var(--marca-800)}
.cand-quien .desc{margin:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:8px}
.cand-insignias{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.cand-insignias .badge{font-size:var(--t-2xs)}
.cand-rapidas{display:flex;gap:4px;flex:none}
.cand-rapida.btn{width:30px;height:30px;padding:0;border-radius:8px}
.cand-rapida .ico svg{width:14px;height:14px;display:block}
.cand-rapida--ok:hover{border-color:var(--ok-fuerte);color:var(--ok-fuerte);background:var(--ok-suave)}
.cand-rapida--mal:hover{border-color:var(--critico-fuerte);color:var(--critico-fuerte);background:var(--critico-suave)}
.cand-rango{position:absolute;top:-9px;left:-7px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--marca-800),var(--marca-500));color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(23,16,46,.3);z-index:1}
.cand-card--podio{padding-top:14px;border-color:var(--marca-100)}
.cand-card--podio::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:12px 12px 0 0;
  background:linear-gradient(90deg,var(--marca-800),var(--marca-500) 60%,var(--info-fuerte))}
.cand-medalla{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;color:#fff;line-height:1;
  background:linear-gradient(135deg,var(--marca-800),var(--marca-500));box-shadow:0 8px 16px -8px rgba(155,46,140,.8)}
.cand-medalla b{font-size:var(--t-md);font-weight:800;font-variant-numeric:tabular-nums}
.cand-medalla small{font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-top:2px}
.cvp-h--exp{font-size:17px;border-bottom:3px solid var(--marca-700);
  color:var(--marca-900)}
.cvp-cuenta{font-size:12px;font-weight:600;background:var(--chip,#F5EAF4);
  color:var(--marca-700);border-radius:999px;padding:2px 10px;
  vertical-align:2px;margin-left:6px}

/* --- el lado corto ACOMPAÑA al CV largo: columna izquierda sticky --
   El CV siempre es el bloque largo; sin esto, al scrollear el lado
   de la evaluación/datos quedaba vacío. Pegajosa y con su propio
   scroll interno si ella es la larga. */
.cv-eval-grid>*:first-child{position:sticky;top:74px;
  max-height:calc(100vh - 96px);display:flex;
  flex-direction:column;gap:16px}
/* el scroll vive en la parte de ARRIBA; Decisión queda como pie
   fijo de la columna, fuera del desplazable (pedido de Will) */
.emp-col-scroll{overflow-y:auto;flex:1 1 auto;min-height:0;
  display:grid;gap:12px;align-content:start;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--borde) transparent;
  scrollbar-gutter:stable;overscroll-behavior:contain}
/* el ritmo lo pone SOLO el gap: sin el margin-bottom de .panel */
.emp-col-scroll>.panel,.emp-col-scroll .emp-entrevista>.panel,
.emp-col-scroll>.aviso,.emp-col-scroll>.vacio{margin:0}

/* --- la ficha en el diálogo: cabecera fija, dos columnas con scroll propio --
   .ficha-cuerpo sigue siendo EL desplazable para Tests e Informe; solo cuando
   muestra la Evaluación (:has(.cv-eval-grid)) se congela y el scroll baja a
   las dos columnas: la rueda mueve una u otra, nunca la cabecera. Fuera del
   diálogo (página completa) rige la sticky de arriba. */
.ficha-cuerpo:has(.cv-eval-grid){display:flex;flex-direction:column;
  height:93vh;overflow:hidden}
.ficha-cuerpo:has(.cv-eval-grid)>*{flex:0 0 auto}
.ficha-cuerpo:has(.cv-eval-grid)>.cv-eval-grid{flex:1 1 auto;min-height:0;
  align-items:stretch;grid-template-rows:minmax(0,1fr)}
.ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>*{min-height:0;display:flex;
  flex-direction:column;gap:12px}
.ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>*:first-child{position:static;
  top:auto;max-height:none}
/* columna derecha: la cabecera del panel CV fija (título, acciones,
   conmutador, leyenda) y UN solo desplazable: el perfil, el texto plano
   o el iframe, según el caso */
.ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>div:last-child>.panel{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0}
.ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>div:last-child>.panel
  >:is(.cvp,.cvd,.cv-texto){flex:1 1 auto;min-height:0;max-height:none;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--borde) transparent;scrollbar-gutter:stable}
.ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-caja{flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-plano{flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--borde) transparent;scrollbar-gutter:stable}
/* el texto plano dentro del conmutador no lleva su propio scroll anidado */
.ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-plano>.cv-texto{max-height:none;
  overflow:visible}
.ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-orig{flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.ficha-cuerpo:has(.cv-eval-grid) .emp-cv-pdf{flex:1 1 auto;min-height:0;
  height:auto}
/* apilado (< 1100 px): un solo scroll, el del diálogo */
@media (max-width:1100px){
  .ficha-cuerpo:has(.cv-eval-grid){display:block;height:auto;max-height:93vh;
    overflow:auto;overscroll-behavior:contain}
  .ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>*{display:block}
  .cv-eval-grid>*:first-child{position:static;max-height:none;display:block}
  .emp-col-scroll{overflow:visible;max-height:none;padding-right:0}
  .emp-col-scroll>.panel,.emp-col-scroll .emp-entrevista>.panel{margin:0 0 12px}
  .ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>div:last-child>.panel,
  .ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-caja,
  .ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-orig{display:block}
  .ficha-cuerpo:has(.cv-eval-grid) .emp-vcv-plano,
  .ficha-cuerpo:has(.cv-eval-grid) .cv-eval-grid>div:last-child>.panel
    >:is(.cvp,.cvd,.cv-texto){overflow:visible}
  .ficha-cuerpo:has(.cv-eval-grid) .emp-cv-pdf{height:72vh}
  .emp-decision{box-shadow:none}
}

/* --- decisión sobria: una familia, aire, color solo al hover ------- */
.botonera--aire{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn.d-ok:hover{border-color:var(--exito-fuerte,#1B7A3D);
  color:var(--exito-fuerte,#1B7A3D)}
.btn.d-mal:hover{border-color:var(--critico-fuerte);
  color:var(--critico-fuerte)}

/* --- vista de la imagen de difusión -------------------------------- */
.dif-texto{width:100%;min-height:430px;margin:6px 0 12px;padding:10px;
  border:1px solid var(--borde);border-radius:8px;font-size:.85rem;
  line-height:1.45;resize:vertical}
.dif-texto-cab{display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.prev-tabs{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.liprev-avatar{border-radius:4px !important}
.liprev-link{background:#EEF3F8;padding:10px 12px;display:flex;
  flex-direction:column;gap:2px}
.liprev-link b{font-size:.92rem}
.liprev-link span{color:#666;font-size:.78rem}
.dif-hcard .btn{margin-top:2px}
/* galería de plantillas: una tarjeta por diseño, radio para elegir */
.dif-galeria{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.dif-card{display:flex;flex-direction:column;gap:8px;padding:10px;
  border:2px solid var(--borde);border-radius:10px;cursor:pointer;
  background:var(--panel,#fff)}
.dif-card img{width:100%;border-radius:6px;border:1px solid var(--borde)}
.dif-card:has(input:checked),.dif-card--elegida{
  border-color:var(--marca-800);background:var(--marca-050)}
.dif-card__pie{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
/* secciones ordenadas bajo la galería */
.dif-seccion{border-top:1px solid var(--borde);margin-top:16px;
  padding-top:12px;display:flex;flex-direction:column;gap:10px}
.dif-seccion__titulo{font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-suave,#666)}
.dif-historias{display:flex;gap:14px;align-items:stretch;
  flex-wrap:wrap}
.dif-historia{display:flex;gap:10px;align-items:center;cursor:pointer;
  padding:10px 14px;border:1px solid var(--borde);border-radius:8px}
.dif-historia:has(input:checked){border-color:var(--marca-800);
  background:var(--marca-050)}
.dif-hcard{display:flex;flex-direction:column;gap:4px;
  align-items:center;padding:8px;border:2px solid var(--borde);
  border-radius:8px;cursor:pointer;font-size:.8rem}
.dif-hcard img{width:76px;border-radius:6px}
.dif-hcard:has(input:checked){border-color:var(--marca-800);
  background:var(--marca-050)}
/* «Otra foto» sin recarga: mientras genera, las vistas se atenúan
   y cada tarjeta muestra su pastilla — suavidad, cero saltos */
.dif-card,.dif-hcard{position:relative}
.dif-generando .dif-card img,.dif-generando .dif-hcard img{
  opacity:.3;filter:grayscale(60%)}
.dif-generando .dif-card::after,.dif-generando .dif-hcard::after{
  content:"Generando imagen…";position:absolute;top:40%;left:50%;
  transform:translate(-50%,-50%);background:var(--marca-800);
  color:#fff;padding:6px 14px;border-radius:999px;font-size:.75rem;
  white-space:nowrap;box-shadow:var(--sombra-1)}
.btn[data-ocupado]{pointer-events:none;opacity:.55}
.dif-redes{list-style:none;padding:0;display:flex;gap:22px;
  flex-wrap:wrap}
.dif-redes li{display:flex;gap:8px;align-items:center}
.red-ico{width:20px;height:20px;flex:none}
.red-ico--fb{fill:#1877F2}   /* azul oficial de Facebook */
.red-ico--li{fill:#0A66C2}   /* azul oficial de LinkedIn */
/* previsualización estilo Facebook */
.dif-publicar{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.fbprev-tarjeta{border:1px solid #dadde1;border-radius:10px;
  background:#fff;color:#050505;overflow:hidden;max-width:480px;
  font-family:Helvetica,Arial,sans-serif}
.fbprev-cab{display:flex;gap:8px;align-items:center;padding:10px 12px}
.fbprev-cab img{width:40px;height:40px;border-radius:50%;
  object-fit:contain;border:1px solid #dadde1;background:#fff}
.fbprev-cab div{display:flex;flex-direction:column;line-height:1.2}
.fbprev-cab span{color:#65676b;font-size:.78rem}
.fbprev-texto{padding:0 12px 10px;white-space:pre-wrap;
  font-size:.9rem;max-height:220px;overflow:hidden}
.fbprev-media img{width:100%;display:block}
.fbprev-link{background:#f0f2f5;padding:10px 12px;display:flex;
  flex-direction:column;gap:2px}
/* el display:flex de arriba pisaba al atributo hidden: la barra de
   link salía también con las plantillas cuadradas */
.fbprev-link[hidden]{display:none}
.fbprev-link span:first-child{color:#65676b;font-size:.72rem;
  letter-spacing:.02em}
.fbprev-link b{font-size:.95rem}
.fbprev-link span:last-child{color:#65676b;font-size:.82rem}
.dif-vista{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.dif-vista img{width:min(460px,100%);border-radius:12px;
  border:1px solid var(--borde);box-shadow:var(--sombra-1)}
.dif-acciones{display:flex;flex-direction:column;gap:10px}

/* .pliegue: el <details> del kit — antes cada pantalla dibujaba
   el suyo con estilos inline (auditoria 26-ago) */
.pliegue{margin:10px 0}
.pliegue>summary{cursor:pointer;color:var(--marca-800);
  font-weight:600;font-size:13.5px}

/* ui.progreso(): barra de avance del kit — el ancho es el
   UNICO style= permitido (dato calculado, no diseño) */
.progreso{margin:6px 0}
.progreso__pista{background:var(--fondo);border:1px solid
  var(--borde-hairline);border-radius:6px;height:10px;
  overflow:hidden}
.progreso__hecho{height:100%;background:var(--alerta-fuerte)}
.progreso--completo .progreso__hecho{background:var(--ok-fuerte)}
/* la tarjeta del supervisor en la lista */
.sup-nombre{font-size:16px;font-weight:700;
  color:var(--marca-800)}
.sup-alcance{font-size:12.5px;color:var(--texto-suave);
  margin:4px 0}

/* --- clases que el HTML ya emitía sin estilo (auditoría 26-ago) ---
   Cada una nació con intención visible y quedó a medio camino. */
.botonera { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.botonera--aire { margin-top: var(--e4); }
/* simulador: la fecha de retiro ELEGIDA se tiene que ver de un vistazo */
.comparativa tr.es-la-elegida td { background: var(--ok-suave); font-weight: 600; }
.fq-item.fq-total { border-top: 2px solid var(--borde); font-weight: 600; }
/* cuentas: rol y estado como líneas secundarias de la tarjeta */
.cuenta-rol { font-size: 12.5px; color: var(--texto-suave); }
.cuenta-estado { font-size: 12.5px; margin-top: 2px; }
.bj-vacia { padding: var(--e4) 0; }
/* /alertas: el pliegue de las acusadas, mismo trato que las explicadas */
details.alertas-acusadas { margin-top: var(--e3); }
details.alertas-acusadas > summary { cursor: pointer;
  color: var(--texto-suave); font-size: var(--t-sm); }
.fq-acciones { margin-top: var(--e3); }
.cfg-volver { margin-top: var(--e4); }

/* --- /pagos: el módulo de contabilidad -------------------------- */
.pg-resumen { position: sticky; top: 8px; z-index: 5;
  border-left: 4px solid var(--marca-500); }
.pg-resumen [data-r-detalle] { margin-top: var(--e2); }
.pg-proy { margin: var(--e4) 0 var(--e2); font-size: var(--t-base);
  color: var(--texto-suave); font-weight: 600; }
.pg-estados { margin: var(--e2) 0 0; padding-left: var(--e4); }
.pg-estados li { margin-bottom: var(--e2); }

/* --- marcas del celular en la hoja del día del calendario -------- */
.cal-marcas { margin-top: var(--e2); font-size: var(--t-sm); }
.cal-marcas-titulo { color: var(--texto-suave); font-weight: 600; }
.cal-marca-chip { display: inline-block; border-radius: 12px;
  padding: 2px 10px; margin: 2px 4px 2px 0;
  background: var(--fondo); border: 1px solid var(--borde); }
.cal-marca-aprobada { border-color: var(--ok-fuerte);
  color: var(--ok-fuerte); }
.cal-marca-rechazada { border-color: var(--critico-fuerte);
  color: var(--critico-fuerte); text-decoration: line-through; }


/* ==================================================================
   TESTS DE SELECCIÓN — la página del candidato (móvil primero) y el
   panel del reclutador
   ================================================================== */
.ts-progreso { height: 6px; background: var(--fondo);
  border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.ts-progreso-b { height: 100%; width: 0;
  background: var(--marca-500); transition: width .25s; }
.ts-grupo { display: none; border: 0; padding: 0; margin: 0; }
.ts-grupo.ts-activo { display: block; }
.ts-grupo legend { font-weight: 700; font-size: var(--t-sm);
  color: var(--marca-700); margin-bottom: 8px; }
.ts-grupo.ts-falta { animation: ts-tiembla .5s; }
@keyframes ts-tiembla {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); } }
.ts-situacion { font-weight: 600; margin: 0 0 10px;
  line-height: 1.5; }
.ts-cabcols { display: grid;
  grid-template-columns: 1fr 84px 84px; gap: 6px;
  font-size: var(--t-2xs); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px; text-align: center; }
.ts-cabcols span:first-child { text-align: left; }
.ts-fila { display: grid; grid-template-columns: 1fr 84px 84px;
  gap: 6px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--borde-hairline); }
.ts-fila input[type=radio] { width: 22px; height: 22px;
  justify-self: center; accent-color: var(--marca-500); }
.ts-opcion { display: block; padding: 10px 12px; margin: 6px 0;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 8px; cursor: pointer; line-height: 1.45; }
.ts-opcion:has(input:checked) { border-color: var(--marca-500);
  background: var(--marca-050); }
.ts-reloj { color: var(--critico-fuerte); font-weight: 700; }
.ts-pie { display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 14px; }

/* el panel de tests en la ficha del candidato (lado reclutador) */
.emp-test-fila { display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--borde-hairline);
  flex-wrap: wrap; }
.emp-test-fila:last-of-type { border-bottom: 0; }
.emp-test-fila > b { flex: 1 1 170px; font-size: var(--t-base);
  font-weight: 600; }
.emp-test-fila .desc { margin: 0; }
.emp-test-asig { display: inline-flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
/* el chip de la batería sugerida: ancho LIBRE (la rd-pildora mide
   9.5em fijos y los nombres largos de tests se montaban encima) */
.emp-test-chip { display: inline-flex; align-items: center;
  gap: 6px; padding: 3px 12px; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--texto-suave); font-size: var(--t-2xs);
  font-weight: 600; white-space: nowrap; margin: 2px 6px 2px 0;
  vertical-align: middle; }
.emp-test-chip i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--marca-500); flex: none; }
.emp-global-desglose { margin: 8px 0 0; font-size: var(--t-sm);
  color: var(--texto-suave); }

/* Fase 1.5 — la escala Likert del Big Five (móvil primero) */
.ts-lik-cab { display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr); gap: 4px;
  font-size: var(--t-2xs); color: var(--texto-suave);
  text-align: center; align-items: end; margin: 10px 0 4px; }
.ts-lik-fila { display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr); gap: 4px;
  align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--borde-hairline); }
.ts-lik-fila > span { line-height: 1.35; font-size: var(--t-base); }
.ts-lik-fila input[type=radio] { width: 20px; height: 20px;
  justify-self: center; accent-color: var(--marca-500); }

/* el calibrador de perfiles ideales en la oferta */
.emp-perf { margin: 8px 0 4px; }
.emp-perf > summary { cursor: pointer; font-size: var(--t-sm);
  color: var(--marca-700); font-weight: 600; }
.emp-perf-grupo { margin: 10px 0 4px; }
.emp-perf-grupo h4 { margin: 0 0 4px; font-size: var(--t-sm); }
.emp-perf-dim { display: grid;
  grid-template-columns: 46px 1fr 34px; gap: 8px;
  align-items: center; padding: 2px 0; max-width: 420px; }
.emp-perf-dim > span { font-size: var(--t-2xs); font-weight: 600;
  color: var(--texto-suave); }
.emp-perf-dim input[type=range] { accent-color: var(--marca-500); }
.emp-perf-dim output { font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); text-align: right; }
.emp-perf-sugerir { display: inline-block; }
.emp-tests-sug .emp-perf-sugerir { margin-left: 6px; }

/* el panel de tests: los instrumentos sin historia, plegados */
.emp-test-mas { margin-top: 6px; }
.emp-test-mas > summary { cursor: pointer; font-size: var(--t-sm);
  color: var(--texto-suave); }
.emp-test-asig form { display: inline; }

/* La pestaña «Tests» de la ficha vive al final de esta hoja (bloque
   emp-tst- sobre el kit, 05-sep); acá quedan las barras por dimensión */
.emp-tst-dim progress { width: 100%; height: 8px; accent-color: var(--marca-500); }
.emp-tst-dim { display: grid; align-items: center; gap: 8px;
  grid-template-columns: 42px 1fr 116px; font-size: var(--t-sm); }
.emp-tst-dim--una { grid-template-columns: 1fr 128px; }
.emp-tst-dim > span { font-weight: 700; color: var(--texto-suave);
  font-size: var(--t-2xs); }
.emp-tst-dim em { font-style: normal; color: var(--texto-suave);
  font-size: var(--t-2xs); text-align: right;
  font-variant-numeric: tabular-nums; }

/* el aviso disuasivo de los tests de acierto (informe antifraude:
   la consecuencia creíble y verdadera, jamás la amenaza vacía) */

/* antifraude liviano: el enunciado no se selecciona ni copia */
.ts-situacion, .ts-fila > span, .ts-opcion,
.ts-lik-fila > span, .kit-hoja legend {
  user-select: none; -webkit-user-select: none; }

/* ==================================================================
   EL BANCO DE PREGUNTAS (/empleos/tests) — editor de gerencia
   ================================================================== */
/* los desplegables de la casa: sin el triángulo nativo, con chevrón
   propio que gira (vale también para la pestaña Tests y la oferta) */
.emp-bi-alta > summary, .emp-bi-item > summary,
.emp-bi-borrar > summary, .emp-test-mas > summary,
.emp-perf > summary {
  list-style: none; cursor: pointer; user-select: none; }
.emp-bi-alta > summary::-webkit-details-marker,
.emp-bi-item > summary::-webkit-details-marker,
.emp-bi-borrar > summary::-webkit-details-marker,
.emp-test-mas > summary::-webkit-details-marker,
.emp-perf > summary::-webkit-details-marker { display: none; }

.emp-bi-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 14px; }
.emp-bi-card { display: flex; flex-direction: column; gap: 4px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 16px 18px; text-decoration: none;
  color: var(--texto); position: relative;
  transition: border-color .12s, box-shadow .12s; }
.emp-bi-card:hover { border-color: var(--marca-500);
  box-shadow: 0 4px 14px rgba(27, 33, 54, .07); }
.emp-bi-card b { font-size: var(--t-base); padding-right: 52px;
  line-height: 1.35; }
.emp-bi-card .desc { margin: 0; }
.emp-bi-n { position: absolute; top: 14px; right: 16px;
  font-size: var(--t-lg); font-weight: 800;
  color: var(--marca-700); font-variant-numeric: tabular-nums; }

/* el alta: tarjeta punteada con el más en chip */
.emp-bi-alta { margin: 14px 0; background: var(--superficie);
  border: 1px dashed var(--borde); border-radius: 12px;
  padding: 4px 16px; }
.emp-bi-alta > summary { display: flex; align-items: center;
  gap: 10px; font-weight: 600; color: var(--marca-700);
  padding: 10px 2px; }
.emp-bi-alta[open] { border-style: solid;
  border-color: var(--marca-500); }
.emp-bi-mas { display: grid; place-items: center; width: 24px;
  height: 24px; border-radius: 8px; background: var(--marca-050);
  color: var(--marca-700); font-weight: 800; flex: none; }

/* la lista: cada pregunta es una fila serena con chevrón */
.emp-bi-lista { margin-top: 12px; padding: 6px 12px; }
.emp-bi-item { border-bottom: 1px solid var(--borde-hairline); }
.emp-bi-item:last-child { border-bottom: 0; }
.emp-bi-item > summary { display: flex; align-items: center;
  gap: 10px; padding: 10px 8px; border-radius: 8px;
  line-height: 1.45; }
.emp-bi-item > summary:hover { background: var(--fondo); }
.emp-bi-item[open] > summary { background: var(--fondo);
  border-radius: 8px 8px 0 0; }
.emp-bi-item > summary::after { content: ""; width: 7px;
  height: 7px; flex: none; margin-left: auto;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg); transition: transform .15s; }
.emp-bi-item[open] > summary::after {
  transform: rotate(225deg); }
.emp-bi-num { display: grid; place-items: center; min-width: 26px;
  height: 22px; padding: 0 4px; border-radius: 7px;
  background: var(--marca-050); color: var(--marca-700);
  font-size: var(--t-2xs); font-weight: 700; flex: none;
  font-variant-numeric: tabular-nums; }
.emp-bi-res { flex: 1 1 auto; min-width: 0; }
.emp-bi-tag { flex: none; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 6px;
  padding: 1px 7px; background: var(--superficie); }
.emp-bi-tag--inv { color: var(--alerta-fuerte);
  border-color: var(--alerta-fuerte); }

/* el formulario de edición vive en su propio lienzo suave */
.emp-bi-form { margin: 0 8px 12px; padding: 14px 16px;
  background: var(--fondo); border-radius: 0 0 10px 10px; }
.emp-bi-form .botonera { align-items: center; }
.emp-bi-enun textarea { width: 100%; }

/* la zona de peligro: discreta hasta que se abre */
.emp-bi-borrar { margin: 10px 0 2px; }
.emp-bi-borrar > summary { color: var(--critico-fuerte);
  font-size: var(--t-sm); padding: 4px 0; }
.emp-bi-borrar-caja { display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-top: 6px;
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--critico-fuerte);
  background: var(--superficie); }
.emp-bi-borrar-caja .desc { margin: 0; flex: 1 1 260px; }
.emp-bi-rojo { color: var(--critico-fuerte); }

/* los desplegables hermanos (pestaña Tests y calibrador) heredan
   el chevrón a la izquierda */
.emp-test-mas > summary::before,
.emp-perf > summary::before { content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 8px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(-45deg); transition: transform .15s;
  vertical-align: 2px; }
.emp-test-mas[open] > summary::before,
.emp-perf[open] > summary::before { transform: rotate(45deg); }

/* el control SEGMENTADO de la casa (modalidad de los tests): dos
   opciones a la vista, cero desplegable nativo */
.emp-seg { display: inline-flex; border: 1px solid var(--borde);
  border-radius: 9px; overflow: hidden;
  background: var(--superficie); }
.emp-seg label { cursor: pointer; }
.emp-seg input { position: absolute; opacity: 0;
  pointer-events: none; }
.emp-seg span { display: inline-block; padding: 7px 14px;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--texto-suave); }
.emp-seg label + label span {
  border-left: 1px solid var(--borde); }
.emp-seg label:has(input:checked) span {
  background: var(--marca-050); color: var(--marca-700); }

/* los <select> que quedan en el módulo de tests (editor del banco y
   calibrador) llevan la piel de la casa, no la del sistema */
.emp-bi-form select, .emp-test-asig select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--borde); border-radius: 8px;
  background-color: var(--superficie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A6178' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 8px 32px 8px 12px; font: inherit;
  color: var(--texto); }
.emp-bi-form select:focus, .emp-test-asig select:focus {
  outline: 2px solid var(--marca-500); outline-offset: 1px; }

/* las señales de la tarjeta: badge corto + detalle que envuelve */
.emp-tst-senales { display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; padding-top: 2px; }
.emp-tst-senales .desc { margin: 0; line-height: 1.45;
  flex: 1 1 200px; }

/* afinado de tarjetas (Will, 01-sep): puntaje SIEMPRE esquinado,
   explicaciones justificadas y señales legibles */
.emp-tst-exp { margin: 4px 0 0; color: var(--texto-suave);
  font-size: var(--t-sm); line-height: 1.5; text-align: justify; }
.emp-tst-senal-det { color: var(--texto); font-size: var(--t-sm);
  line-height: 1.5; flex: 1 1 200px; }

/* Publicación y difusión (Will, 01-sep): notas a lo ancho y
   justificadas, pie de plantilla compacto, bloque de foto propia */
.dif-tab .panel-nota { max-width: none; text-align: justify; }
.dif-card__pie .desc { margin: 0; }
.dif-propia { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--borde-hairline); }
.dif-propia .desc { flex: 1 1 260px; }

/* difusión compacta (Will, 01-sep): filas apretadas y zona de
   arrastre para la foto propia */
.dif-fila { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.dif-seccion[data-dif-drop] { border-radius: 10px; }
.dif-drop--sobre { outline: 2px dashed var(--marca-500);
  outline-offset: 4px; background: var(--marca-050); }

/* ==================================================================
   rd-buscador — el filtro como tarjeta propia, del ANCHO de su lista
   (docs/rediseno-ui.md). El .fgrid genérico corta en 760px y contra
   una tabla al 100% se veía angosto y pegado: acá va a lo ancho,
   sin sombra (regla 1 del rediseño: borde fino, nada de elevación)
   y con aire abajo que separa de los resultados.
   ================================================================== */
/* doble clase deliberada (.fgrid.rd-…, 0-2-0): forms.css se carga
   DESPUÉS que este archivo y su .fgrid{max-width:760px} ganaba por
   orden — el buscador quedaba angosto contra su tabla. Sin el
   prefijo `form.` para que sirva igual donde el buscador es un
   <div> (la barra de /empleos) */
.fgrid.rd-buscador { max-width: none; box-shadow: none;
  padding: var(--e4) var(--e5); margin-bottom: var(--e5); }
.fgrid.rd-buscador .frow:last-child { margin-bottom: 0; }
.fgrid.rd-buscador .fsec { margin-top: 0; }

/* el campo con su lupa adentro (el ícono es parte del campo, no un
   botón: buscar ya ocurre solo mientras se escribe) */
.fld input.rd-lupa { padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8098' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center; }

/* la lista que el buscador filtra: su tabla es la SEGUNDA tarjeta —
   mismo borde, sin sombra, para que las dos se lean como pareja */
.rd-resultados > table { box-shadow: none; }

/* la cabecera de la lista filtrada: título con su contador y la
   salida a CSV a la derecha (reemplaza los style= inline de /base) */
.rd-tabla-h { font-size: var(--t-md); color: var(--marca-700);
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.rd-tabla-h .desc { margin: 0; font-weight: 400; }
.rd-tabla-csv { margin-left: auto; font-size: var(--t-sm);
  font-weight: 600; }

/* el caret del selector de país (era un style= inline en forms.js) */
.tel-caret { color: var(--texto-tenue); }

/* el par bandera+número dentro de un rd-form: el .telbtn nace de 34px
   y el fill de al lado mide 42 — ese desnivel es el «fill desplazado»
   que Will no quiere ver */
.rd-form .fld--tel { display: flex; gap: 6px; align-items: center; }
.rd-form .fld--tel input { flex: 1 1 auto; min-width: 0; width: auto; }
.rd-form .fld--tel .telbtn { min-height: 42px; border-radius: 8px; }
.rd-form .fld--tel .combo, .rd-form .fld--tel .telsel { flex: 0 0 auto; }

/* piezas propias del módulo de clientes (matan los style= inline) */
.cli-portal-chk { display: flex; gap: 8px; align-items: baseline; }
.cli-clave { font-size: var(--t-xl); letter-spacing: 1px;
  margin: 10px 0; font-family: var(--fuente-mono); }
.btn-icono { display: grid; place-items: center; width: 34px;
  height: 34px; padding: 0; border: 1px solid var(--borde);
  border-radius: 9px; background: var(--superficie);
  color: var(--texto-suave); font-size: var(--t-md);
  cursor: pointer; transition: border-color .15s, color .15s,
  background .15s; }
.btn-icono:hover { border-color: var(--marca-500);
  color: var(--marca-700); background: var(--marca-050); }

/* la caja de la contraseña de un solo uso del portal */
.cli-clave-caja { padding: 18px; max-width: 560px; }

/* --- contabilidad (fase 1, 2026-09-02): el libro, el balance y su árbol.
   Las tablas heredan la piel de .rd-resultados; aquí solo la sangría por
   nivel del plan, los totales y la barra de empresa/mes. ------------------ */
.cont-filtros { display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; margin: 0 0 var(--e4); }
.cont-filtros .emp { display: inline-flex; border: 1px solid var(--borde);
  border-radius: 999px; overflow: hidden; }
.cont-filtros .emp a { padding: 5px 14px; font-size: var(--t-sm);
  font-weight: 600; text-decoration: none; color: var(--texto-suave); }
.cont-filtros .emp a.act { background: var(--marca-700);
  color: var(--superficie); }
.cont-filtros .meses { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cont-filtros select { max-width: 520px; }
.cont-lineas .num, .cont-arbol .num { font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.cont-arbol td:first-child { white-space: nowrap; }
.cont-n1 td, .cont-n2 td { font-weight: 700; }
.cont-n1 td { background: var(--fondo); }
.cont-n3 td:nth-child(2) { padding-left: 22px; }
.cont-n4 td:nth-child(2) { padding-left: 38px; }
.cont-n5 td:nth-child(2) { padding-left: 54px; }
.cont-sin-mov td { color: var(--texto-tenue); }
.cont-total td { font-weight: 700; border-top: 2px solid var(--texto);
  background: var(--fondo); }
.cont-alcance { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cont-manual .frow--linea { grid-template-columns: 2fr 2fr 1fr 1fr; }

/* la marca «cada mes» de una ocurrencia (se hereda al abrir el mes) */
.oc-rec { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); color: var(--texto-suave); white-space: nowrap;
  margin-right: 6px; }
.oc-rec input { margin: 0; }

/* --- el nivel superior: la razón social (Stolzel / SPBEJL) en grilla,
   cierre y pagos (02-sep) --------------------------------------------- */
.rs-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 4px 4px 12px; margin: 0 0 8px; border-bottom: 1px solid var(--borde); }
.rs-cab h2 { margin: 0; font-size: var(--t-lg); font-weight: 700; letter-spacing: .02em; }
.rs-cab small { color: var(--texto-suave); margin-left: auto; }
.rs-cab--cierre { margin-top: var(--e5, 24px); border-bottom: 0;
  border-top: 2px solid var(--texto); padding-top: 14px; }
.rs-sello { display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em;
  background: var(--marca-700); color: var(--superficie); }
.rs-bloque + .rs-bloque { margin-top: var(--e5, 24px); }
.pg-estados .rs-titulo { list-style: none; font-weight: 700; margin: 12px 0 6px;
  color: var(--texto); }

/* el resumen del calendario del cliente en la tabla de proyectos */
.cal-resumen { font-size: var(--t-sm); color: var(--texto-suave);
  max-width: 260px; }

/* ---------------------------------------------------------------------------
   Centro de alertas (02-sep-2026): una bandeja, familias, responsable y
   acción. Prefijo al- (módulo alertas).
   --------------------------------------------------------------------------- */
.al-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3); margin: var(--e3) 0 var(--e4); }
.al-familia { display: flex; align-items: baseline; gap: var(--e3);
  margin: var(--e5) 0 var(--e2); padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borde); }
.al-familia h2 { margin: 0; font-size: var(--t-lg); }
.al-familia .rd-smallcaps { flex: 1; }
.al-familia .al-n { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.al-lista { display: grid; gap: var(--e2); }
.al-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3);
  align-items: start; padding: var(--e3) var(--e4); background: var(--superficie);
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--radio); }
.al-item--critico { border-left-color: var(--critico-fuerte); }
.al-item--alerta  { border-left-color: var(--alerta-fuerte); }
.al-item--info    { border-left-color: var(--info-fuerte); }
.al-item .rd-pildora { min-width: 6.5em; }
.al-cuerpo { min-width: 0; }
.al-titulo { margin: 0; font-size: var(--t-base); font-weight: 600; }
.al-titulo small { font-weight: 400; color: var(--texto-suave); }
.al-msg { margin: 2px 0 var(--e2); }
.al-meta { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  font-size: var(--t-xs); color: var(--texto-suave); }
.al-meta b { color: var(--texto); font-weight: 600; }
.al-acciones { display: grid; gap: var(--e2); justify-items: end; }
.al-acciones form { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.al-vacia-familia { color: var(--texto-suave); font-size: var(--t-sm); }
@media (max-width: 720px) {
  .al-item { grid-template-columns: 1fr; }
  .al-acciones { justify-items: start; }
}

/* --- requisitos internos de la oferta: editor por prioridades ------
   (Will, 03-sep-2026: limpio como el bloque de descripción; el orden
   dentro de cada prioridad se arrastra y pesa en la IA) */
.ri-editor{border:1px solid var(--borde-campo);border-radius:10px;
  background:var(--superficie);overflow:hidden}
.ri-intro{margin:0;padding:12px 16px;background:var(--fondo);
  border-bottom:1px solid var(--borde);font-size:13px;line-height:1.55;
  color:var(--texto-suave)}
.ri-grupo{padding:10px 16px 12px;border-bottom:1px solid var(--borde-hairline)}
.ri-grupo:last-of-type{border-bottom:0}
.ri-grupo__cab{display:flex;align-items:center;gap:10px;min-height:30px}
.ri-grupo__guia{font-size:12.5px;color:var(--texto-suave);flex:1}
.ri-grupo__n{font-size:12px;color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.ri-prio-chip{display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:var(--fondo);color:var(--texto-suave);white-space:nowrap}
.ri-prio-chip--alta{background:var(--marca-800);color:var(--superficie)}
.ri-prio-chip--media{background:var(--info-suave);color:var(--info-fuerte)}
.ri-prio-chip--baja{background:var(--marca-050);color:var(--marca-800)}
.ri-prio-chip--info,.ri-prio-chip--notas{background:var(--fondo);color:var(--texto-suave);
  border:1px dashed var(--borde)}
.ri-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.ri-item{display:grid;grid-template-columns:auto 22px minmax(0,1fr) auto auto;
  align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--borde-hairline);
  border-radius:8px;background:var(--superficie)}
.ri-item:focus-within{border-color:var(--marca-800)}
.ri-item.ri-arrastrando{opacity:.45}
.ri-item.ri-destino{border-top:2px solid var(--marca-800)}
.ri-asa{cursor:grab;color:var(--texto-tenue);font-size:14px;letter-spacing:-2px;
  padding:0 2px;user-select:none;border-radius:4px}
.ri-asa:focus{outline:2px solid var(--marca-800);outline-offset:1px;color:var(--marca-800)}
.ri-num{font-size:12px;color:var(--texto-tenue);text-align:right;
  font-variant-numeric:tabular-nums}
.ri-texto{width:100%;min-width:0;border:0;background:transparent;font:inherit;
  font-size:13.5px;padding:4px 2px;outline:none;color:var(--texto)}
.ri-texto::placeholder{color:var(--texto-tenue)}
.ri-prio{font:inherit;font-size:12px;border:1px solid var(--borde);border-radius:6px;
  padding:3px 6px;background:var(--fondo);color:var(--texto)}
.ri-quitar{border:0;background:none;color:var(--texto-tenue);font-size:18px;
  line-height:1;padding:0 4px;cursor:pointer;border-radius:4px}
.ri-quitar:hover{color:var(--critico-fuerte);background:var(--critico-suave)}
.ri-vacio{margin:8px 0 0;font-size:12.5px;color:var(--texto-tenue);font-style:italic}
.ri-grupo:has(.ri-item) .ri-vacio{display:none}
.ri-notas{padding:12px 16px 14px;background:var(--fondo);border-top:1px solid var(--borde)}
.ri-notas label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.ri-notas textarea{width:100%;font:inherit;font-size:13px;border:1px solid var(--borde-campo);
  border-radius:8px;padding:8px 10px;background:var(--superficie)}
/* lectura en la ficha */
.ri-lectura{display:flex;flex-direction:column;gap:14px}
.ri-lectura__cab{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ri-lectura__lista{margin:0;padding-left:26px;font-size:13.5px;line-height:1.6}
.ri-lectura__lista li{padding-left:4px}
.ri-lectura__lista li::marker{color:var(--texto-tenue);font-size:12px;
  font-variant-numeric:tabular-nums}
.ri-lectura__notas p{margin:0;font-size:13.5px;line-height:1.6;color:var(--texto-suave);
  white-space:pre-line}
@media (max-width:720px){
  .ri-item{grid-template-columns:auto 18px minmax(0,1fr) auto;grid-auto-rows:auto}
  .ri-item .ri-prio{grid-column:3;justify-self:start}
}

/* --- guía personal de entrevista (ficha del postulante y PDF) -------- */
.emp-gv{list-style:none;margin:var(--e2) 0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.emp-gv__item{border:1px solid var(--borde-hairline);border-left:3px solid var(--alerta-fuerte);
  border-radius:8px;padding:8px 12px;font-size:13.5px;line-height:1.5;cursor:pointer}
.emp-gv__item--detectada{border-left-color:var(--critico-fuerte)}
.emp-gv__item--sin_respaldo{border-left-color:var(--borde);cursor:default}
.emp-gv__item .badge{margin-right:6px;vertical-align:1px}
.emp-gv__cita,.emp-gv__preg,.emp-gv__doc{display:block;margin-top:4px}
.emp-gv__cita{color:var(--texto-suave);font-style:italic;font-size:12.5px}
.emp-gv__preg{color:var(--texto)}
.emp-gv__doc{color:var(--texto-suave);font-size:12.5px}
/* conclusión v2 de finalistas */
.emp-fin-cli{color:var(--marca-800);font-weight:600}
.emp-fin-preg{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--texto-suave)}
.emp-fin-preg li{margin:0 0 2px}
.emp-fin-cli-tabla td,.emp-fin-cli-tabla th{text-align:left;vertical-align:top;font-size:13px}
.emp-fin-cli-tabla th{color:var(--marca-800)}

/* confiabilidad laboral: los avisos de cautela del índice */
.emp-tst-exp--cautela{color:var(--alerta-fuerte);font-weight:500}

/* --- entrevista calificada con anclas ------------------------------ */
.emp-ent-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--borde-hairline)}
.emp-ent-dim{font-size:13.5px;min-width:0}
.emp-ent-anclas{margin-top:2px;font-size:12px;color:var(--texto-suave)}
.emp-ent-anclas summary{cursor:pointer;color:var(--marca-800)}
.emp-ent-anclas ol{margin:4px 0 0;padding-left:18px}
.emp-ent-anclas li{margin:0 0 2px}
.emp-ent-ops{display:flex;gap:4px;flex-shrink:0}
.emp-ent-op{position:relative;cursor:pointer}
.emp-ent-op input{position:absolute;opacity:0;inset:0;cursor:pointer}
.emp-ent-op span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--borde);font-size:13px;font-variant-numeric:tabular-nums;background:var(--superficie)}
.emp-ent-op input:checked+span{background:var(--marca-800);color:var(--superficie);border-color:var(--marca-800)}
.emp-ent-op input:focus-visible+span{outline:2px solid var(--marca-800);outline-offset:1px}
.emp-ent-notas{display:block;margin-top:10px;font-size:13px;font-weight:600}
.emp-ent-notas textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:13px;font-weight:400;
  border:1px solid var(--borde-campo);border-radius:8px;padding:8px 10px}
.emp-ent-ops{align-items:center}
.emp-ent-ext{font-size:var(--t-2xs);color:var(--texto-tenue);text-transform:uppercase;
  letter-spacing:.05em;margin:0 4px}
.emp-ent-firma{margin:var(--e2) 0 0;font-size:var(--t-sm);color:var(--texto-suave)}
.emp-rec .badge{cursor:help}

/* la tarjeta entera abre la ficha; los botones rápidos conservan su cursor */
.cand-card .cand-rapidas{cursor:default}
.cand-card.volando{cursor:grabbing}

/* --- informe de evaluación personal (vista previa) ------------------- */
.emp-inf-tabla{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 10px}
.emp-inf-tabla th{text-align:left;color:var(--marca-800);font-weight:600;padding:6px 8px;
  border-bottom:1px solid var(--marca-800);font-size:12px}
.emp-inf-tabla td{padding:6px 8px;border-bottom:1px solid var(--borde-hairline);vertical-align:top}
.emp-inf-lista{margin:4px 0 8px;padding-left:20px;font-size:13.5px}
.emp-inf-lista li{margin:0 0 3px}
.emp-inf-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13.5px}
@media (max-width:720px){.emp-inf-dos{grid-template-columns:1fr}}

/* --- confiabilidad laboral: tarjetas de riesgo ------------------------ */
.emp-conf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.emp-conf-card{border:1px solid var(--borde);border-radius:10px;padding:10px 8px;text-align:center;
  display:flex;flex-direction:column;gap:3px;cursor:help;background:var(--superficie)}
.emp-conf-card__nombre{font-size:12px;color:var(--texto-suave)}
.emp-conf-card__valor{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.emp-conf-card__riesgo{font-size:12px;font-weight:600}
.emp-conf-card--bajo{border-color:var(--exito-fuerte,#1B7A3D);background:var(--exito-suave,#E7F4EC)}
.emp-conf-card--bajo .emp-conf-card__riesgo{color:var(--exito-fuerte,#1B7A3D)}
.emp-conf-card--medio{border-color:var(--alerta-fuerte);background:var(--alerta-suave)}
.emp-conf-card--medio .emp-conf-card__riesgo{color:var(--alerta-fuerte)}
.emp-conf-card--alto{border-color:var(--critico-fuerte);background:var(--critico-suave)}
.emp-conf-card--alto .emp-conf-card__riesgo{color:var(--critico-fuerte)}
.emp-conf-card--control .emp-conf-card__valor{font-size:12px;font-weight:500;color:var(--texto-tenue)}
@media (max-width:520px){.emp-conf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- competencias laborales: tabla de resultado y calibrador ---------- */
.emp-cmp-tabla{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.emp-cmp-tabla th{text-align:left;color:var(--texto-suave);font-weight:600;font-size:11.5px;
  padding:4px 6px;border-bottom:1px solid var(--borde)}
.emp-cmp-tabla td{padding:6px;border-bottom:1px solid var(--borde-hairline);vertical-align:top;
  font-variant-numeric:tabular-nums}
.emp-cmp-det summary{cursor:pointer;font-weight:600;list-style:none}
.emp-cmp-det summary::-webkit-details-marker{display:none}
.emp-cmp-det[open] summary{color:var(--marca-800)}
.emp-cmp-preg{margin:2px 0 6px;padding-left:18px;font-size:12.5px;color:var(--texto-suave)}
.emp-cmp-aj{font-weight:700;padding:1px 8px;border-radius:999px;font-size:12px}
.emp-cmp-aj--ok{background:var(--exito-suave,#E7F4EC);color:var(--exito-fuerte,#1B7A3D)}
.emp-cmp-aj--alerta{background:var(--alerta-suave);color:var(--alerta-fuerte)}
.emp-cmp-aj--critico{background:var(--critico-suave);color:var(--critico-fuerte)}
.emp-perf-grupo--cmp{grid-column:1/-1}
.emp-cmp-eje{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-tenue);
  margin:10px 0 4px}
.emp-cmp-sel{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:6px;font-size:13px}
.emp-cmp-sel--on{background:var(--marca-050)}
.emp-cmp-sel__nombre{flex:1;min-width:0}
.emp-cmp-sel__campo{font-size:12px;color:var(--texto-suave);display:inline-flex;align-items:center;gap:4px}
.emp-cmp-sel__campo input{width:56px;font:inherit;font-size:12.5px;padding:2px 4px;border:1px solid var(--borde);
  border-radius:6px;text-align:center}

/* ---- popup de descarga del informe (plantillas y bloques) ---- */
.emp-inf-pdf__plantillas{display:flex;flex-wrap:wrap;gap:var(--e2);margin:var(--e2) 0 var(--e3)}
.emp-inf-pdf__plantillas label{border:1px solid var(--borde);border-radius:var(--r-btn);
  padding:var(--e1) var(--e3);cursor:pointer;font-size:var(--t-sm,13px)}
.emp-inf-pdf__plantillas label:has(input:checked){border-color:var(--marca-800);
  background:var(--marca-050);color:var(--marca-800);font-weight:600}
.emp-inf-pdf__plantillas input{margin-right:4px}
.emp-inf-pdf__bloques{display:grid;grid-template-columns:1fr 1fr;gap:var(--e1) var(--e3);
  border-top:1px solid var(--borde-hairline);padding-top:var(--e3)}
.emp-inf-pdf__bloques label{display:flex;align-items:center;gap:6px;font-size:var(--t-sm,13px)}

/* ---- pestaña Informe de la ficha: el lenguaje del PDF en la web ---- */
.inf-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;
  background:linear-gradient(120deg,var(--marca-800),var(--marca-500));border-radius:var(--r-l);
  padding:var(--e2);color:var(--primary-foreground);box-shadow:var(--sombra-1)}
.inf-cifra{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--e2) var(--e1);
  border-left:1px solid rgba(255,255,255,.25)}
.inf-cifra:first-child{border-left:0}
.inf-cifra__rot{font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.inf-cifra__val{font-size:24px;font-weight:700;line-height:1.2;margin:2px 0}
.inf-cifra__sub{font-size:11px;opacity:.85}
.inf-meta{color:var(--texto-suave);font-size:var(--t-sm,13px);margin:var(--e3) 0 0}
.inf-parrafo{text-align:justify;hyphens:auto;line-height:1.55;margin:0 0 var(--e3)}
.inf-sub{font-size:var(--t-md,15px);color:var(--marca-800);margin:var(--e4) 0 var(--e2);font-weight:600}
.inf-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
@media (max-width:720px){.inf-tarjetas{grid-template-columns:1fr}}
.inf-tarjeta{background:var(--superficie);border:1px solid var(--borde);border-left:3px solid var(--marca-800);
  border-radius:var(--r-m);padding:var(--e2) var(--e3);box-shadow:var(--sombra-1);font-size:var(--t-sm,13px)}
.inf-tarjeta h4{margin:0 0 4px;font-size:var(--t-sm,13px);color:var(--marca-800)}
.inf-tarjeta p{margin:0 0 3px;text-align:justify;hyphens:auto;line-height:1.45}
.inf-tarjeta p b{color:var(--texto);margin-right:3px}
.inf-tarjetas--ok .inf-tarjeta{border-left-color:var(--marca-800)}
.inf-tarjetas--alerta .inf-tarjeta{border-left-color:var(--marca-500)}
.inf-nivel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--e3);
  align-items:center;background:var(--superficie);border:1px solid var(--borde);border-left:3px solid var(--marca-500);
  border-radius:var(--r-m);padding:var(--e2) var(--e3);box-shadow:var(--sombra-1)}
.inf-nivel__rot{grid-column:1/3;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--marca-500)}
.inf-nivel__val{font-size:26px;font-weight:700;color:var(--marca-800)}
.inf-nivel--ok .inf-nivel__val{color:var(--ok-fuerte)}
.inf-nivel--alerta .inf-nivel__val{color:var(--alerta-fuerte)}
.inf-nivel--critico .inf-nivel__val{color:var(--critico-fuerte)}
.inf-nivel__txt{font-size:var(--t-sm,13px);color:var(--texto-suave)}
.inf-editor textarea{width:100%;font:inherit;line-height:1.5;padding:var(--e2);border:1px solid var(--borde-campo);
  border-radius:var(--r-s);resize:vertical}

/* ---- tests de selección v2 (04-sep): portada, link único, datos, cronómetro ---- */
.ts-cab.oculto, .ts-progreso.oculto, .ts-form.oculto, .ts-portada.oculto, .kit-btn.oculto { display: none !important; }
/* la cabecera compacta ya dice «Grupo 3 de 16»: la leyenda del grupo no se repite
   (en las de conocimiento queda solo el reloj de la pregunta) */
.ts-form[data-modo=escala] .ts-grupo > legend, .ts-form[data-modo=eleccion] .ts-grupo > legend { display: none; }
.ts-form[data-modo=secuencial] .ts-grupo > legend { font-size: 0; color: transparent; margin-bottom: 6px; }
.ts-form[data-modo=secuencial] .ts-reloj { font-size: var(--t-sm); display: inline-block; padding: 3px 10px;
  border-radius: 999px; background: var(--critico-suave); color: var(--critico-fuerte); }
.ts-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; }
.ts-cab h1 { font-size: var(--t-lg); margin: 0; line-height: 1.2; }
.ts-paso { display: block; color: var(--texto-suave); font-size: var(--t-sm); margin-top: 2px; }
.ts-cron { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-sm);
  color: var(--marca-800); background: var(--marca-050); border-radius: 999px; padding: 4px 10px;
  flex: none; }
.ts-pie--centro { justify-content: center; }
.ts-fila { padding: 10px 0; }
.ts-fila:hover { background: var(--fondo); }
.ts-fila input[type=radio] { width: 24px; height: 24px; }
.ts-lik-op { display: flex; justify-content: center; align-items: center; min-height: 40px;
  cursor: pointer; border-radius: 8px; }
.ts-lik-op:hover { background: var(--fondo); }
.ts-lik-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ts-lik-op i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde-campo);
  display: block; transition: transform .12s, border-color .12s, background .12s; }
.ts-lik-op:has(input:checked) i { background: var(--marca-500); border-color: var(--marca-500);
  box-shadow: 0 0 0 4px var(--marca-050); transform: scale(1.08); }
.ts-lik-op:has(input:focus-visible) i { outline: 2px solid var(--foco-claro); outline-offset: 2px; }
.ts-lik-fila > span { font-size: var(--t-base); }
.ts-lik-op small { display: none; }
/* en el celular la frase va arriba, a lo ancho, y las 5 opciones debajo con su rótulo corto */
@media (max-width: 560px) {
  .ts-lik-cab { display: none; }
  .ts-lik-fila { grid-template-columns: repeat(5, 1fr); row-gap: 6px; padding: 12px 0; }
  .ts-lik-fila > span { grid-column: 1 / -1; line-height: 1.45; }
  .ts-lik-op { flex-direction: column; gap: 4px; min-height: 56px; align-items: center; }
  .ts-lik-op small { display: block; font-size: 10px; line-height: 1.15; color: var(--texto-suave);
    text-align: center; max-width: 100%; }
  .ts-lik-op:has(input:checked) small { color: var(--marca-800); font-weight: 600; }
}
.ts-opcion { padding: 12px 14px; }
/* el link único */
.ts-estado { display: inline-block; margin-top: 4px; font-size: var(--t-2xs); font-weight: 600;
  color: var(--texto-suave); background: var(--fondo); border-radius: 999px; padding: 2px 10px;
  width: fit-content; }
.ts-estado--ok { color: var(--ok-fuerte); background: var(--ok-suave); }
.ts-estado--mal { color: var(--critico-fuerte); background: var(--critico-suave); }
.kit-foto-fila { display: flex; gap: 14px; align-items: center; margin: 10px 0 14px; }
.kit-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 3px var(--superficie), var(--sombra-1); }
.kit-foto--vacia { display: grid; place-items: center; background: var(--marca-050); color: var(--marca-500);
  font-size: var(--t-2xs); font-weight: 600; }
.kit-foto-fila b { display: block; margin-bottom: 2px; }
.kit-foto-fila .desc { display: block; margin: 0 0 6px; font-size: var(--t-sm); }
.kit-foto-fila > div { min-width: 0; flex: 1 1 auto; }
.kit-foto-fila b { overflow-wrap: anywhere; }
/* (kit, compartido con la pre-alta) la foto: el círculo es el botón (cámara
   o galería), el campo nativo va oculto y el texto de al lado solo habla si
   algo salió mal */
.kit-foto-btn { position: relative; display: block; flex: none; width: 84px; height: 84px; border-radius: 50%;
  cursor: pointer; }
.kit-foto-btn img.kit-foto { display: block; }
.kit-foto-btn .kit-foto { width: 84px; height: 84px; }
.kit-foto-btn:hover .kit-foto { box-shadow: 0 0 0 3px var(--marca-500), var(--sombra-1); }
.kit-foto-cam, .kit-foto-ok { position: absolute; right: -3px; bottom: -3px; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; background: var(--marca-800); color: #fff;
  box-shadow: 0 0 0 2px var(--superficie), var(--sombra-1); pointer-events: none; }
.kit-foto-cam svg, .kit-foto-ok svg { display: block; }
.kit-foto-ok { display: none; background: var(--ok-fuerte); }
.kit-foto-btn--lista .kit-foto-cam { display: none; }
.kit-foto-btn--lista .kit-foto-ok { display: grid; }
.kit-oculto-visual { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.kit-foto-elegir { margin-top: 8px; text-decoration: none; cursor: pointer; }
.kit-oculto-visual:focus + .kit-foto-elegir,
.kit-oculto-visual:focus-visible + .kit-btn { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.kit-foto-msj { display: block; margin-top: 6px; font-size: var(--t-sm); color: var(--critico-fuerte); }
.kit-foto-msj:empty { display: none; }
/* cortes de red: el aviso vive en la cabecera del test y la nota de
   preguntas vencidas en la portada, antes del botón */
.ts-sinred { display: block; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--alerta-suave); color: var(--alerta-fuerte); font-size: var(--t-sm); line-height: 1.4; }
.ts-sinred.oculto { display: none !important; }
.ts-sinred--fin { background: var(--critico-suave); color: var(--critico-fuerte); }
.ts-corte { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--alerta-fuerte);
  border-radius: 8px; background: var(--alerta-suave); color: var(--texto); font-size: var(--t-sm); }
.ts-grupo--uno input[type=radio]:disabled + * , .ts-grupo--uno .ts-opcion:has(input:disabled) { opacity: .6; }
@media (max-width: 560px) {
  .kit-foto-fila { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kit-foto-fila > div { width: 100%; }
}
.kit-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (max-width: 560px) { .kit-campos { grid-template-columns: 1fr; } }
.kit-campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.kit-campo > span:first-child { color: var(--texto-suave); font-weight: 600; font-size: var(--t-2xs);
  letter-spacing: .03em; text-transform: uppercase; }
.kit-campo .desc { display: block; margin: 0; font-size: var(--t-xs); color: var(--texto-suave); text-transform: none;
  letter-spacing: 0; font-weight: 400; }
/* 16 px (t-lg) a propósito: con menos, Safari iOS amplía la página al enfocar y no vuelve */
.kit-campo input, .kit-campo select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--borde-campo);
  border-radius: 8px; background: var(--superficie); font: inherit; font-size: var(--t-lg); }
.ts-aviso-ok { margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--ok-suave);
  color: var(--ok-fuerte); font-weight: 600; font-size: var(--t-sm); }
/* el link único en la ficha del reclutador */

/* ---- tests: táctil de verdad (05-sep) ---- */
.ts-fila { grid-template-columns: 1fr 76px 76px; gap: 4px; padding: 4px 0; }
.ts-cabcols { grid-template-columns: 1fr 76px 76px; gap: 4px; }
.ts-fila:hover { background: transparent; }
@media (hover: hover) { .ts-fila:hover { background: var(--fondo); } }
.ts-celda { display: flex; align-items: center; justify-content: center; min-height: 52px; height: 100%;
  cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ts-celda input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ts-celda i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borde-campo);
  display: block; background: var(--superficie); transition: transform .12s, border-color .12s, background .12s; }
.ts-celda:active i { transform: scale(.92); }
.ts-celda:has(input:checked) i { background: var(--marca-500); border-color: var(--marca-500);
  box-shadow: 0 0 0 4px var(--marca-050); }
.ts-celda--menos:has(input:checked) i { background: var(--marca-800); border-color: var(--marca-800); }
.ts-celda:has(input:focus-visible) i { outline: 2px solid var(--foco-claro); outline-offset: 2px; }
.ts-lik-op { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ts-opcion { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ts-fila > span { padding: 8px 0; }

/* ---- la demo de la portada: cómo se responde, en 5 segundos ---- */
.ts-demo { margin: 12px 0 4px; }
.ts-demo-txt { margin: 0 0 8px; color: var(--texto); font-size: var(--t-sm); line-height: 1.5; }
.ts-demo-caja { position: relative; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 12px 10px; font-size: var(--t-sm); overflow: hidden;
  box-shadow: var(--sombra-1); }
.ts-demo-cab { display: grid; grid-template-columns: 1fr 64px 64px; gap: 4px; font-size: 9px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); text-align: center;
  margin-bottom: 2px; }
.ts-demo-fila { display: grid; grid-template-columns: 1fr 64px 64px; gap: 4px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--borde-hairline); }
.ts-demo-o { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde-campo);
  display: block; justify-self: center; background: var(--superficie); }
.ts-demo-btn { display: inline-block; margin: 10px 0 0 auto; float: right; padding: 6px 14px; border-radius: 8px;
  background: var(--marca-700); color: var(--primary-foreground); font-weight: 700; font-size: var(--t-2xs); }
.ts-demo-dedo { position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--marca-500); opacity: 0; box-shadow: 0 0 0 6px var(--marca-050); pointer-events: none; }
/* elección: MÁS en la fila 2, MENOS en la fila 4, luego Siguiente */
.ts-demo--eleccion .ts-demo-fila:nth-child(3) .ts-demo-o:first-of-type { animation: ts-demo-marca 6s infinite; animation-delay: 1.2s; }
.ts-demo--eleccion .ts-demo-fila:nth-child(5) .ts-demo-o:last-of-type { animation: ts-demo-marca 6s infinite; animation-delay: 2.8s; }
.ts-demo--eleccion .ts-demo-btn { animation: ts-demo-btn 6s infinite; animation-delay: 4.2s; }
.ts-demo--eleccion .ts-demo-dedo { animation: ts-demo-dedo-eleccion 6s infinite; }
@keyframes ts-demo-marca { 0%, 12% { background: var(--superficie); border-color: var(--borde-campo); }
  15%, 100% { background: var(--marca-500); border-color: var(--marca-500); } }
@keyframes ts-demo-btn { 0%, 66% { transform: scale(1); } 70% { transform: scale(1.08); } 74%, 100% { transform: scale(1); } }
@keyframes ts-demo-dedo-eleccion {
  0% { opacity: 0; left: 62%; top: 60px; } 10% { opacity: .9; left: 62%; top: 60px; }
  20% { opacity: .9; left: 62%; top: 60px; transform: scale(.85); } 24% { opacity: .9; transform: scale(1); }
  40% { opacity: .9; left: 84%; top: 118px; } 47% { opacity: .9; left: 84%; top: 118px; transform: scale(.85); }
  51% { transform: scale(1); } 66% { opacity: .9; left: 80%; top: 156px; } 70% { opacity: .9; transform: scale(.85); }
  80% { opacity: 0; } 100% { opacity: 0; } }
/* escala: marca la 4.ª opción */
.ts-demo-fila--esc { display: block; border-bottom: 0; }
.ts-demo-fila--esc > span { display: block; margin-bottom: 8px; }
.ts-demo-esc { display: grid; grid-template-columns: repeat(5, 1fr); }
.ts-demo-esc-et { display: flex; justify-content: space-between; font-size: 9px; color: var(--texto-suave);
  margin-top: 4px; }
.ts-demo--escala .ts-demo-esc .ts-demo-o:nth-child(4) { animation: ts-demo-marca 5s infinite; animation-delay: 1.2s; }
.ts-demo--escala .ts-demo-btn { animation: ts-demo-btn 5s infinite; animation-delay: 3s; }
.ts-demo--escala .ts-demo-dedo { animation: ts-demo-dedo-escala 5s infinite; }
@keyframes ts-demo-dedo-escala {
  0% { opacity: 0; left: 68%; top: 56px; } 12% { opacity: .9; } 24% { opacity: .9; transform: scale(.85); }
  28% { transform: scale(1); } 60% { opacity: .9; left: 80%; top: 104px; } 64% { transform: scale(.85); }
  76% { opacity: 0; } 100% { opacity: 0; } }
/* secuencial: reloj que baja, marca la opción 3 */
.ts-demo-preg { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600;
  margin-bottom: 8px; }
.ts-demo-reloj { font-size: var(--t-2xs); background: var(--critico-suave); color: var(--critico-fuerte);
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.ts-demo-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--borde); }
.ts-demo-op .ts-demo-o { justify-self: start; width: 16px; height: 16px; }
.ts-demo--secuencial .ts-demo-op:nth-child(4) { animation: ts-demo-op 5s infinite; animation-delay: 1.4s; }
.ts-demo--secuencial .ts-demo-op:nth-child(4) .ts-demo-o { animation: ts-demo-marca 5s infinite; animation-delay: 1.4s; }
.ts-demo--secuencial .ts-demo-btn { animation: ts-demo-btn 5s infinite; animation-delay: 3.2s; }
.ts-demo--secuencial .ts-demo-dedo { animation: ts-demo-dedo-secuencial 5s infinite; }
@keyframes ts-demo-op { 0%, 12% { border-color: var(--borde); background: var(--fondo); }
  15%, 100% { border-color: var(--marca-500); background: var(--marca-050); } }
@keyframes ts-demo-dedo-secuencial {
  0% { opacity: 0; left: 18%; top: 96px; } 14% { opacity: .9; } 28% { opacity: .9; transform: scale(.85); }
  32% { transform: scale(1); } 62% { opacity: .9; left: 80%; top: 150px; } 66% { transform: scale(.85); }
  78% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-demo * { animation: none !important; } .ts-demo-dedo { display: none; } }

/* ==== EL KIT DEL INFORME EN LA WEB (05-sep-2026) ==============================
   La piel que Stolzel eligió en el informe PDF (db/pdf_kit.py), traída a las
   pantallas de LECTURA y de DECISIÓN y a las que ve gente de afuera (candidato,
   trabajador, cliente). Componentes en web/ui.py: portada, cifras, cinta,
   caja_icono, medallon, tarjeta_icono, checks, marca_publica, icono; el
   cascarón público en web/shell.py (cascaron_publico). Reglas: una portada por
   pantalla, cintas solo para secciones reales, máximo cuatro cifras, una línea
   de texto cuando se pueda. NO va en grillas, importador, tablas densas ni
   documentos oficiales: ahí manda el rediseño plano (rd-). */
/* el cascarón público: fondo con lavado, marco centrado y la hoja con relieve */
/* 100dvh y poco aire abajo: en el celular la barra del navegador ya suma lo suyo
   (Will vio un hueco grande bajo la tarjeta del link único, 05-sep) */
.kit-fondo { min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center;
  grid-template-columns: minmax(0, 1fr); padding: var(--e4) var(--e3) 18px;
  background: linear-gradient(180deg, var(--marca-050) 0, var(--fondo) 360px, var(--fondo) 100%); }
.kit-fondo, .kit-fondo * { box-sizing: border-box; }
.kit-marco { width: min(640px, 100%); min-width: 0; margin: 0 auto; }
.kit-hoja { position: relative; width: 100%; min-width: 0; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 22px; padding: 24px 24px 28px; overflow-wrap: anywhere;
  box-shadow: 0 30px 60px -30px rgba(92, 24, 95, .35), 0 10px 30px -12px rgba(54, 54, 54, .14); }
.kit-hoja::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--marca-800), var(--marca-500) 55%, var(--info-fuerte)); }
.kit-hoja h1 { margin: 0 0 6px; font-size: var(--t-xl); }
.kit-hoja--aviso h1 { color: var(--marca-800); }
.kit-marca { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; color: var(--texto-tenue);
  font-size: var(--t-2xs); letter-spacing: .04em; text-transform: uppercase; }
.kit-logo { height: 24px; width: auto; display: block; }
.kit-ojo { margin: 0 0 4px; color: var(--marca-500); font-weight: 600; font-size: var(--t-2xs);
  letter-spacing: .05em; text-transform: uppercase; }
.kit-nota { margin: 0 0 12px; color: var(--texto-suave); font-size: var(--t-base); line-height: 1.55;
  text-align: justify; }
.kit-volver { display: inline-block; margin-bottom: 10px; color: var(--marca-500); font-size: var(--t-sm);
  text-decoration: none; }
.kit-volver:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .kit-fondo { padding: 10px 8px 40px; }
  .kit-hoja { padding: 18px 14px 18px; border-radius: 16px; }
  .kit-hoja::before { border-radius: 16px 16px 0 0; } }
/* la portada: degradado ciruela→morado, una línea y la marca de agua del tema */
.kit-portada { position: relative; margin: 6px 0 18px; padding: 22px 24px 24px; border-radius: 16px;
  color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--marca-800) 0%, var(--marca-500) 100%);
  box-shadow: 0 18px 36px -18px rgba(92, 24, 95, .6); }
.kit-portada::after { content: ""; position: absolute; right: -50px; top: -70px; width: 240px; height: 240px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 68%); }
.kit-portada > * { position: relative; z-index: 1; }
.kit-portada h1 { color: #fff; margin: 0 0 8px; font-size: var(--t-2xl, 26px); line-height: 1.2;
  text-wrap: balance; }
.kit-portada .kit-ojo { color: rgba(255, 255, 255, .82); }
.kit-portada .kit-nota { color: rgba(255, 255, 255, .92); margin: 0; text-align: left; max-width: 46ch; }
.kit-portada .kit-volver { color: rgba(255, 255, 255, .9); }
.kit-portada-marca { position: absolute; right: 10px; bottom: -22px; width: 128px; height: 128px;
  opacity: .16; color: #fff; pointer-events: none; z-index: 0; }
.kit-portada-marca svg { width: 100%; height: 100%; }
.kit-portada--alta { padding-bottom: 46px; margin-bottom: 0; }
@media (max-width: 560px) {
  .kit-portada { padding: 18px 16px 20px; }
  .kit-portada--alta { padding-bottom: 42px; }
  .kit-portada-marca { width: 96px; height: 96px; } }
/* iconos en medallón: la base común */
.kit-cifra-ic, .kit-cinta-ic, .kit-caja-ic, .kit-tarjeta-ic, .kit-medallon { display: grid; place-items: center;
  flex: none; color: #fff; background: linear-gradient(135deg, var(--marca-800), var(--marca-500)); }
.kit-cifra-ic svg, .kit-cinta-ic svg, .kit-caja-ic svg { width: 18px; height: 18px; display: block; }
/* el panel de cifras */
.kit-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.kit-cifras:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.kit-cifras:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.kit-cifras--sobre { margin-top: -26px; padding: 0 10px; position: relative; z-index: 1; }
.kit-cifra { min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
  padding: 12px 8px 10px; text-align: center; box-shadow: 0 12px 26px -14px rgba(54, 54, 54, .35); }
.kit-cifra-ic { width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%;
  box-shadow: 0 6px 14px -6px rgba(155, 46, 140, .75); }
.kit-cifra b { display: block; font-size: var(--t-lg); color: var(--marca-800); line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* el rótulo es el span HIJO DIRECTO: un <span data-…> dentro del valor no es rótulo */
.kit-cifra > span { display: block; font-size: var(--t-2xs); color: var(--texto-suave); margin-top: 2px; }
@media (max-width: 560px) {
  .kit-cifras { gap: 6px; }
  .kit-cifras:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .kit-cifras--sobre { padding: 0 4px; }
  .kit-cifra { padding: 10px 6px 8px; }
  .kit-cifra b { font-size: var(--t-md); } }
/* la cinta de sección */
.kit-cinta { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; padding: 10px 14px;
  border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--marca-800), var(--marca-500));
  box-shadow: 0 10px 22px -12px rgba(92, 24, 95, .65); }
.kit-cinta-ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.kit-cinta b { display: block; font-size: var(--t-md); line-height: 1.2; }
.kit-cinta-paso { display: block; font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase;
  opacity: .85; }
/* la caja con icono: consejo (marca), aviso (info), cuidado (alerta), logrado (ok) */
.kit-caja { display: flex; gap: 12px; align-items: flex-start; border: 0; border-radius: 14px;
  padding: 12px 14px; margin: 10px 0 12px; text-align: left; color: var(--texto); background: var(--marca-050); }
.kit-caja p { margin: 0; line-height: 1.5; font-size: var(--t-sm); }
.kit-caja.oculto { display: none !important; }
.kit-caja-ic { width: 34px; height: 34px; border-radius: 50%; }
.kit-caja--info { background: var(--info-suave); }
.kit-caja--info .kit-caja-ic { background: linear-gradient(135deg, var(--info-fuerte), var(--marca-500)); }
.kit-caja--alerta { background: var(--alerta-suave); }
.kit-caja--alerta .kit-caja-ic { background: var(--alerta-fuerte); }
.kit-caja--ok { background: var(--ok-suave); }
.kit-caja--ok .kit-caja-ic { background: var(--ok-fuerte); }
/* la tarjeta con icono (lista de evaluaciones, documentos, planillas) */
.kit-tarjeta { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  margin: 0 0 10px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie);
  box-shadow: 0 10px 24px -14px rgba(54, 54, 54, .3); }
.kit-tarjeta-ic { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 8px 16px -8px rgba(155, 46, 140, .7); }
.kit-tarjeta-ic svg { width: 20px; height: 20px; display: block; }
.kit-tarjeta--ok .kit-tarjeta-ic { background: var(--ok-fuerte); box-shadow: 0 8px 16px -8px rgba(11, 110, 79, .6); }
.kit-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kit-tarjeta-cuerpo b { font-size: var(--t-md); }
.kit-tarjeta-cuerpo .desc { margin: 0; font-size: var(--t-sm); }
.kit-tarjeta-cola { flex: none; text-align: right; }
.kit-tarjeta-cola .desc { display: block; max-width: 130px; text-align: right; line-height: 1.3;
  font-size: var(--t-sm); color: var(--texto-suave); }
/* la lista con check */
.kit-checks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.kit-checks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--texto-suave);
  font-size: var(--t-sm); line-height: 1.5; }
.kit-check-ic { color: var(--marca-500); flex: none; width: 20px; height: 20px; margin-top: 1px; display: block; }
.kit-check-ic svg { width: 20px; height: 20px; display: block; }
/* el medallón de las pantallas de aviso */
.kit-medallon { width: 64px; height: 64px; border-radius: 50%; margin: 6px 0 14px;
  box-shadow: 0 14px 28px -12px rgba(155, 46, 140, .8); }
.kit-medallon svg { width: 30px; height: 30px; }
.kit-medallon--ok { background: var(--ok-fuerte); box-shadow: 0 14px 28px -12px rgba(11, 110, 79, .7); }
.kit-medallon--info { background: linear-gradient(135deg, var(--info-fuerte), var(--marca-500)); }
/* el botón con volumen */
.kit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 12px; color: #fff; font: inherit; font-weight: 700; font-size: var(--t-md);
  cursor: pointer; text-decoration: none; background: linear-gradient(135deg, var(--marca-800), var(--marca-500));
  box-shadow: 0 10px 20px -10px rgba(155, 46, 140, .8); transition: transform .12s, box-shadow .12s; }
.kit-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(155, 46, 140, .85); color: #fff;
  background: linear-gradient(135deg, var(--marca-700), var(--marca-500)); border-color: transparent; }
.kit-btn:active { transform: translateY(0); box-shadow: 0 6px 12px -8px rgba(155, 46, 140, .8); }
.kit-btn:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.kit-btn:disabled { opacity: .7; cursor: default; transform: none; }
.kit-btn--suave { background: var(--superficie); color: var(--marca-800); border: 1px solid var(--borde);
  box-shadow: none; }
.kit-btn--suave:hover { background: var(--marca-050); border-color: var(--marca-500); color: var(--marca-800);
  box-shadow: 0 6px 14px -8px rgba(54, 54, 54, .35); }
.kit-btn--suave:disabled { background: var(--fondo); color: var(--texto-tenue); border-color: var(--borde); }
.kit-btn--chico { min-height: 36px; padding: 0 16px; font-size: var(--t-sm); }
@media (pointer: coarse) { .kit-btn--chico { min-height: 44px; padding: 0 18px; } }   /* pulgar: 44 px */
.kit-btn--grande { width: 100%; min-height: 54px; }
.kit-btn.oculto { display: none !important; }

/* la barra de avance y el pie centrado de las pantallas de aviso */
.kit-barra { height: 8px; border-radius: 999px; background: var(--marca-050); overflow: hidden; margin: 0 0 16px; }
.kit-barra-b { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .5s;
  background: linear-gradient(90deg, var(--marca-800), var(--marca-500)); }
.kit-pie { display: flex; justify-content: center; margin: 14px 0 0; }

/* ---- pre-alta del trabajador (pa-) sobre el kit: ganchos de prealta.js ---- */
.pa-campo .req { color: var(--critico-fuerte); }
.pa-campo[data-guardado] input, .pa-campo[data-guardado] select { border-color: var(--ok-fuerte); }
.pa-error { display: block; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--critico-suave); color: var(--critico-fuerte); font-size: var(--t-sm); line-height: 1.4; }
.pa-error--suave { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.pa-error.oculto { display: none !important; }
.pa-subiendo { opacity: .6; pointer-events: none; }
.pa-ci { list-style: none; margin: 0; padding: 0; }
.pa-pie { margin-top: 18px; }
.pa-pie .kit-btn:disabled { background: var(--ok-fuerte); opacity: 1; box-shadow: none; }
.pa .kit-barra + .kit-cinta, .pa .kit-caja + .kit-cinta { margin-top: 6px; }

/* ---- marcaje móvil (mk-) sobre el kit: el botón es EL protagonista ---- */
.mk-centro { text-align: center; }
.mk-boton { width: 100%; min-height: 120px; border: 0; border-radius: 18px; font: inherit; font-size: var(--t-2xl);
  font-weight: 800; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; letter-spacing: .04em; margin: 6px 0 10px;
  transition: transform .12s, box-shadow .12s; }
.mk-boton:active { transform: translateY(1px); }
.mk-boton:disabled { opacity: .55; cursor: default; }
.mk-entrada { background: var(--ok-fuerte); box-shadow: 0 16px 30px -14px rgba(11, 110, 79, .75); }
.mk-salida { background: linear-gradient(135deg, var(--marca-800), var(--marca-500));
  box-shadow: 0 16px 30px -14px rgba(155, 46, 140, .8); }
.mk-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); }
.mk-icono svg { width: 26px; height: 26px; }
.mk-estado { text-align: center; margin: 4px 0 10px; }
.mk-historial { list-style: none; margin: 0; padding: 0; }
.mk-marca { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde-hairline); }
.mk-marca:last-child { border-bottom: 0; }
.mk-marca-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  color: #fff; background: linear-gradient(135deg, var(--marca-800), var(--marca-500)); }
.mk-marca-ic svg { width: 16px; height: 16px; }
.mk-marca b { min-width: 72px; font-size: var(--t-sm); }
.mk-marca .desc { flex: 1 1 auto; margin: 0; }

/* el kit dentro del cascarón interno (.page): portada ancha, cifras con nivel,
   cinta como encabezado de sección (h2 literal), esquina para sello o botón */
.kit-portada-esquina { position: absolute; right: 24px; top: 22px; z-index: 2; }
@media (max-width: 640px) { .kit-portada-esquina { position: static; margin-top: 10px; } }
.kit-portada .kit-btn--suave { color: var(--marca-800); }
.kit-cifra--critico b { color: var(--critico-fuerte); }
.kit-cifra--alerta b { color: var(--alerta-fuerte); }
.kit-cifra--ok b { color: var(--ok-fuerte); }
.kit-cinta h2 { margin: 0; color: #fff; font-size: var(--t-md); line-height: 1.2; font-weight: 700; }
.kit-cinta-nota { margin-left: auto; font-size: var(--t-2xs); opacity: .85; text-align: right;
  max-width: 42%; line-height: 1.3; }
@media (max-width: 640px) {   /* en el celular la nota baja bajo el título, alineada con él */
  .kit-cinta { flex-wrap: wrap; }
  .kit-cinta-nota { flex-basis: 100%; max-width: none; margin-left: 46px; text-align: left; } }
.kit-pie--izq { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.page .kit-portada { margin-top: 0; }
.page .kit-portada .kit-portada-marca { width: 170px; height: 170px; bottom: -30px; }
.page .kit-cifras { margin-bottom: 22px; }
.page .kit-cifras--sobre { padding: 0 18px; }
.al-item { border-radius: 12px; box-shadow: 0 10px 24px -16px rgba(54, 54, 54, .3); }
.al-lista { display: grid; gap: 10px; margin-bottom: 18px; }

/* la pestaña Informe y la comparativa de finalistas sobre el kit */
.inf-bloque { position: relative; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px; padding: 14px 18px 18px; margin: 0 0 18px;
  box-shadow: 0 12px 28px -18px rgba(54, 54, 54, .35); }
.inf-bloque > .desc:first-child { margin-top: 0; }
.inf-bloque .inf-descargo { margin-top: 14px; }
/* el vacío habla como .vacio (tarjeta punteada), no como texto suelto sobre el gris */
.inf-vacio { text-align: center; padding: 26px 16px 30px; background: var(--superficie);
  border: 1px dashed var(--borde-campo); border-radius: 16px; color: var(--texto-suave); }
.inf-vacio .kit-medallon { margin: 0 auto 12px; }
.inf-vacio h3 { margin: 0 0 6px; color: var(--marca-800); }
.inf-vacio .desc { justify-content: center; margin: 0; }
/* --- Informe · «Datos del candidato»: la receta rd-form SIN su marco (la
   tarjeta ya es .inf-bloque, como hace .rd-dlg form.rd-form) y una grilla
   FIJA de 3 columnas. Todo con `form.inf-datos …` (0,2,1) para ganar al
   corte de 760 px de `.rd-form .frow` y declarar los cortes propios. */
.inf-bloque form.rd-form { border: 0; border-radius: 0; padding: 0; max-width: none;
  background: transparent; box-shadow: none; }
.inf-bloque > .desc:first-child { max-width: 78ch; margin: 0 0 16px; }
.inf-datos__campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.inf-datos__campos:disabled { opacity: .6; }
form.inf-datos .frow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 0; }
form.inf-datos .fld--doble { grid-column: span 2; }
form.inf-datos .fld--total { grid-column: 1 / -1; }
form.inf-datos .fld > label { margin: 0; line-height: 1.3; }
form.inf-datos .fld .hint { margin: 0; min-height: 1em; }   /* la fecha reserva su línea */
form.inf-datos .fld textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
/* el pie: hairline del rd-pie; Guardar a la izquierda (secundario y botón por
   defecto), generar a la derecha; el hint en segunda línea */
form.inf-datos .inf-pie { justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px 12px; margin-top: 18px; padding-top: 14px; }
.inf-pie__generar { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.inf-pie .btn.chico { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; }
.inf-pie .hint { flex-basis: 100%; margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
@media (max-width: 1000px) {
  form.inf-datos .frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.inf-datos .fld--doble { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  form.inf-datos .frow { grid-template-columns: 1fr; gap: 14px; }
  form.inf-datos .fld--doble { grid-column: auto; }
  .inf-pie__generar { flex-direction: column; width: 100%; }
  form.inf-datos .inf-pie > .btn, .inf-pie__generar .kit-btn { width: 100%; } }
.kit-portada h2, .kit-portada h3 { color: #fff; margin: 0 0 8px; font-size: var(--t-xl); line-height: 1.2;
  text-wrap: balance; }
.kit-cinta h3 { margin: 0; color: #fff; font-size: var(--t-md); line-height: 1.2; font-weight: 700; }
.kit-portada-esquina .acc-par { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kit-portada-esquina form.inl { display: inline; }
.ficha-cuerpo .kit-portada, dialog .kit-portada { overflow: hidden; }

/* ---- lo que solo usan las páginas de tests (ts-) sobre el kit ---- */
.ts-pie .kit-btn:first-child { margin-right: auto; }
.ts-pie .kit-btn:only-child { margin: 0; }
.ts-portada .ts-pie { margin-top: 18px; }
.ts-datos-form .ts-pie .kit-btn { max-width: 100%; white-space: normal; }
.ts-antes { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--borde-hairline); }
.ts-antes .kit-ojo { color: var(--texto-suave); margin-bottom: 8px; }
.ts-lista { margin-top: 4px; }
.ts-lista ul { margin: 0; padding: 0; }
.ts-datos { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: 2px 16px 16px; margin-top: 8px; box-shadow: 0 10px 24px -14px rgba(54, 54, 54, .3); }
.ts-datos .kit-cinta { margin-top: 14px; }
.kit-campo input:focus, .kit-campo select:focus { outline: 2px solid var(--marca-500); outline-offset: 1px;
  border-color: var(--marca-500); }
.ts-datos-ok { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px;
  border-radius: 10px; background: var(--ok-suave); color: var(--ok-fuerte); font-weight: 600; font-size: var(--t-sm); }
.ts-datos-ok .kit-check-ic { color: var(--ok-fuerte); }
.ts-sig { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 4px; padding: 14px;
  background: var(--marca-050); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 10px 24px -14px rgba(54, 54, 54, .3); }
.ts-sig b { font-size: var(--t-md); }
.ts-sig .kit-btn { margin-top: 8px; align-self: flex-start; }
.ts-demo .kit-cinta { margin-top: 18px; }
.ts-demo-btn { background: linear-gradient(135deg, var(--marca-800), var(--marca-500)); }
.ts-cron { background: linear-gradient(135deg, var(--marca-050), var(--info-suave)); box-shadow: inset 0 0 0 1px var(--borde); }
.ts-progreso-b { background: linear-gradient(90deg, var(--marca-800), var(--marca-500)); }

/* ================================================================
   LA FICHA QUE NO SALTA (05-sep): el aviso del servidor va bajo las
   pestañas; dentro del popup sube a un toast que no tapa la × y se
   retira solo (lo crítico espera un clic).
   ================================================================ */
.ficha-cuerpo { scroll-behavior: auto; }
.ficha-cuerpo:focus { outline: none; }
.ficha-aviso { margin: 0 0 12px; }
.ficha-aviso .aviso { margin: 0; }
.ficha-toast { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -8px); z-index: 9;
  width: min(560px, calc(100% - 140px)); opacity: 0; pointer-events: none; margin: 0;
  transition: opacity .2s ease, transform .2s ease; }
.ficha-toast.va { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ficha-toast .aviso { margin: 0; position: relative; padding-right: 44px; box-shadow: var(--sombra-2); }
.ficha-toast-x { position: absolute; top: 50%; right: 8px; width: 28px; height: 28px; margin-top: -14px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: none; padding: 0; }
.ficha-toast-x:hover { background: rgba(23, 16, 46, .08); color: inherit; }

/* ================================================================
   LA PESTAÑA «TESTS» SOBRE EL KIT (05-sep): portada h2 con el GLOBAL
   en la esquina, cifras montadas, y tres secciones por estado — Por
   hacer (link único + filas), Resultados (filas plegables) y Asignar
   (selector múltiple). Reemplaza .emp-tst-hero*, las tarjetas viejas,
   .emp-tst-punt y .emp-tst-link*. Solo tokens: cero hex nuevo.
   ================================================================ */
.emp-tst-raiz { min-width: 0; }
.emp-tst-raiz .kit-cinta { margin-top: 18px; }
.emp-tst-raiz > .kit-caja { margin-top: 14px; }
.emp-tst-bloque { padding: 14px 16px; }

/* el GLOBAL en la esquina de la portada */
.emp-tst-global { display: flex; align-items: baseline; gap: 8px; color: #fff;
  padding: 6px 14px 8px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
.emp-tst-num { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.emp-tst-de { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.3; opacity: .85; }
@media (max-width: 640px) {
  .emp-tst-raiz .kit-portada-esquina { position: static; margin-top: 8px; }
  .emp-tst-global { display: inline-flex; }
  .emp-tst-num { font-size: 40px; } }

/* el link único como tarjeta del kit, cabeza de «Por hacer» */
.emp-tst-link-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.emp-tst-link-lista .kit-tarjeta { flex-wrap: wrap; align-items: flex-start; }
.emp-tst-link-lista .kit-tarjeta-cola { display: flex; flex-direction: column; gap: 6px;
  align-items: stretch; min-width: 220px; }
.emp-tst-link-lista .kit-tarjeta-cola .kit-btn { width: 100%; }
.emp-tst-link-lista .kit-tarjeta-cola .desc { max-width: none; text-align: left; margin: 0; }
.emp-tst-url { display: block; margin: 2px 0 6px; font-size: var(--t-2xs); color: var(--texto-suave);
  word-break: break-all; }
.emp-tst-vence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
  font-size: var(--t-sm); color: var(--texto-suave); }
.emp-tst-vence label { display: inline-flex; align-items: center; gap: 6px; }
.emp-tst-vence input[type=date] { min-height: 36px; padding: 2px 8px; border: 1px solid var(--borde-campo);
  border-radius: var(--r-s); font: inherit; }
@media (max-width: 640px) {
  .emp-tst-link-lista .kit-tarjeta-cola { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .emp-tst-link-lista .kit-tarjeta-cola .kit-btn { width: auto; flex: 1 1 140px; } }

/* la fila por instrumento: pendientes y resultados comparten anatomía */
.emp-tst-filas { list-style: none; margin: 0; padding: 0; }
.emp-tst-fila { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde-hairline); }
.emp-tst-fila__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--marca-700); background: var(--marca-050); flex: none; }
.emp-tst-fila__ic svg { width: 20px; height: 20px; display: block; }
.emp-tst-fila__q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emp-tst-fila__q b { font-size: var(--t-base); line-height: 1.25; }
.emp-tst-fila__q .desc { margin: 0; font-size: var(--t-sm); }
.emp-tst-fila__estado { justify-self: end; white-space: nowrap; }
.emp-tst-fila__acc { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.emp-tst-fila__acc form { display: inline; margin: 0; }
.emp-tst-fila--muda .emp-tst-fila__ic { color: var(--alerta-fuerte); background: var(--alerta-suave); }
.emp-tst-fila--curso .emp-tst-fila__ic { color: var(--info-fuerte); background: var(--info-suave); }
.emp-tst-fila--vencida .emp-tst-fila__ic { color: var(--critico-fuerte); background: var(--critico-suave); }
.emp-tst-anular, .emp-tst-anular:hover { color: var(--critico-fuerte); }
@media (max-width: 640px) {
  .emp-tst-fila { grid-template-columns: 40px minmax(0, 1fr); }
  .emp-tst-fila__estado, .emp-tst-fila__acc { grid-column: 2; justify-self: start; } }

/* resultados: legible de un golpe, detalle bajo demanda (siempre en el DOM) */
.emp-tst-res { border-top: 1px solid var(--borde-hairline); }
.emp-tst-res:first-of-type { border-top: 0; }
.emp-tst-res > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px 0; }
.emp-tst-res > summary::-webkit-details-marker { display: none; }
.emp-tst-res > summary:hover .emp-tst-fila__q b { color: var(--marca-800); }
.emp-tst-lectura { font-size: var(--t-sm); line-height: 1.45; color: var(--texto-suave); }
.emp-tst-lectura .badge { margin-right: 4px; }
.emp-tst-medalla { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; color: #fff; justify-self: end; line-height: 1;
  background: linear-gradient(135deg, var(--marca-800), var(--marca-500));
  box-shadow: 0 10px 20px -10px rgba(155, 46, 140, .8); }
.emp-tst-medalla b { font-size: var(--t-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.emp-tst-medalla small { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .85; margin-top: 3px; }
.emp-tst-res__tags { grid-column: 2 / -1; display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center;
  font-size: var(--t-sm); margin-top: 4px; }
.emp-tst-res__tags .desc { margin: 0; font-size: var(--t-2xs); }
.emp-tst-res__tags .emp-tst-senales { padding: 0; }
.emp-tst-res__meta { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
/* las señales de integridad que piden revisión no pasan de largo: caja ámbar/roja con su detalle */
.emp-tst-res__tags .emp-tst-senales:has(.badge.alerta),
.emp-tst-res__tags .emp-tst-senales:has(.badge.critico) { padding: 6px 10px; border-radius: 10px;
  background: var(--alerta-suave); border: 1px solid var(--alerta-fuerte); flex: 1 1 auto; }
.emp-tst-res__tags .emp-tst-senales:has(.badge.critico) { background: var(--critico-suave);
  border-color: var(--critico-fuerte); }
.emp-tst-res__tags .emp-tst-senales .emp-tst-senal-det { font-weight: 500; color: var(--texto); }
.emp-tst-res__ver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: var(--marca-700); user-select: none; }
.emp-tst-res__ver::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.emp-tst-res[open] .emp-tst-res__ver::after { transform: rotate(-135deg) translateY(2px); }
.emp-tst-res__det { padding: 2px 0 14px 52px; display: grid; gap: 8px; }
.emp-tst-res__det .kit-caja { margin: 4px 0; }
.emp-tst-verif { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--texto-suave); }
.emp-tst-verif form { display: inline; margin: 0; }
@media (max-width: 640px) { .emp-tst-res__det { padding-left: 0; } }

/* asignar: el selector múltiple (ficha y lote) */
.emp-tst-sel { margin: 0; }
.emp-tst-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  list-style: none; margin: 0; padding: 0; }
.emp-tst-card { position: relative; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.emp-tst-card--opcion:has(input[type=checkbox]:checked) { border-color: var(--marca-500);
  box-shadow: 0 0 0 2px var(--marca-050); }
.emp-tst-card--sug::after { content: "sugerido"; position: absolute; top: 10px; right: 12px;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--marca-700); }
.emp-tst-opcion { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); gap: 10px;
  align-items: center; cursor: pointer; }
.emp-tst-opcion input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--marca-500); }
.emp-tst-opcion__q { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 64px; }
.emp-tst-opcion__q b { font-size: var(--t-base); line-height: 1.25; }
.emp-tst-opcion__q .desc { margin: 0; font-size: var(--t-sm); }
.emp-tst-motivo { margin: 0 0 0 32px; display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-sm);
  color: var(--texto-suave); line-height: 1.45; }
.emp-tst-motivo i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--marca-500); }
.emp-tst-motivo i svg { width: 16px; height: 16px; display: block; }
.emp-tst-card--opcion .emp-seg { align-self: flex-start; margin-left: 32px; }
.emp-seg--mini span { padding: 5px 11px; font-size: var(--t-2xs); }
.emp-tst-card--opcion:not(:has(input[type=checkbox]:checked)) .emp-seg { opacity: .45; }
.emp-tst-sel__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-hairline); }
.emp-tst-sel__pie .desc { margin: 0; }
.emp-test-mas .emp-tst-cards { margin-top: 10px; }

/* ---- asignar tests a varios candidatos: el popup de la oferta ---- */
dialog.emp-lote-dlg { width: min(960px, 96vw); }
.emp-lote-form .kit-cinta { margin: 4px 0 10px; }
.emp-lote-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 22px; }
@media (max-width: 720px) { .emp-lote-cols { grid-template-columns: 1fr; } }
.emp-lote-cols .emp-tst-cards { grid-template-columns: 1fr; max-height: 46vh; overflow: auto; padding-right: 4px; }
.emp-lote-lista { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 46vh;
  overflow: auto; }
.emp-lote-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px 10px;
  align-items: center; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); }
.emp-lote-item:has(> input:checked) { border-color: var(--marca-500); background: var(--marca-050); }
.emp-lote-item > input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--marca-500); }
.emp-lote-item > label { min-width: 0; cursor: pointer; }
.emp-lote-item b { display: block; font-size: var(--t-sm); line-height: 1.25; }
.emp-lote-item .desc { display: block; margin: 0; font-size: var(--t-2xs); white-space: normal; }
.emp-lote-item--ya { opacity: .8; }
.emp-lote-grupo { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.emp-lote-grupo .n { font-weight: 600; background: var(--fondo); border-radius: 999px; padding: 0 8px; }
.emp-lote-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.emp-lote-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-hairline); }
.emp-lote-pie .desc { margin: 0; }
[data-lote-enviar]:disabled { opacity: .7; }

/* ---- la pestaña Tests de la OFERTA: envío y seguimiento por candidato ---- */
.emp-env-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; }
.emp-env-barra .desc { margin: 0; max-width: 70ch; }
.emp-env-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.emp-env-fila { display: grid; grid-template-columns: 40px minmax(200px, 260px) minmax(0, 1fr) auto;
  gap: 8px 16px; align-items: center; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); }
.emp-env-tests .badge { font-size: var(--t-2xs); padding: 2px 8px; }
.emp-env-fila .avatar { width: 40px; height: 40px; }
.emp-env-fila .avatar.ini { font-size: var(--t-md); }
.emp-env-quien { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.emp-env-quien b { font-size: var(--t-base); line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.emp-env-quien .desc { margin: 0; }
.emp-env-tests { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: var(--t-sm); align-self: center; }
.emp-env-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.emp-env-fila--muda { border-left: 3px solid var(--alerta-fuerte); }
.emp-env-fila--vencida { border-left: 3px solid var(--critico-fuerte); }
.emp-env-fila--lista { border-left: 3px solid var(--ok-fuerte); }
.emp-env-fila--sinwa { opacity: .85; }
@media (max-width: 760px) {
  .emp-env-fila { grid-template-columns: 40px minmax(0, 1fr); }
  .emp-env-tests, .emp-env-acc { grid-column: 1 / -1; justify-content: flex-start; } }

/* la barra de ponderaciones del global (pestaña Tests): una barra apilada y su leyenda */
.emp-tst-pesos { margin: 14px 0 0; padding: 12px 14px 10px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; display: grid; gap: 8px; }
.emp-tst-pesos__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; font-size: var(--t-sm); }
.emp-tst-pesos__cab > b { color: var(--marca-800); }
.emp-tst-pesos__cab .desc { margin: 0; }
.emp-tst-pesos__barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--fondo); gap: 2px; }
.emp-tst-pesos__seg { flex: 1 1 0; min-width: 6px; height: 100%; }
.emp-tst-pesos__ley { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: var(--t-sm); }
.emp-tst-pesos__ley li { display: inline-flex; align-items: center; gap: 6px; }
.emp-tst-pesos__ley b { font-variant-numeric: tabular-nums; }
.emp-tst-pesos__ley .desc { margin: 0; font-size: var(--t-2xs); }
.emp-tst-pesos__punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.emp-tst-pesos__seg--1, .emp-tst-pesos__punto.emp-tst-pesos__seg--1 { background: var(--marca-800); }
.emp-tst-pesos__seg--2, .emp-tst-pesos__punto.emp-tst-pesos__seg--2 { background: var(--marca-500); }
.emp-tst-pesos__seg--3, .emp-tst-pesos__punto.emp-tst-pesos__seg--3 { background: var(--info-fuerte); }
.emp-tst-pesos__seg--4, .emp-tst-pesos__punto.emp-tst-pesos__seg--4 { background: var(--ok-fuerte); }
.emp-tst-pesos__seg--5, .emp-tst-pesos__punto.emp-tst-pesos__seg--5 { background: var(--alerta-fuerte); }

/* la demo del test se declara ejemplo: sello arriba a la derecha de la caja */
.ts-demo-sello { position: absolute; top: 0; right: 0; padding: 4px 10px 4px 12px; border-radius: 0 12px 0 10px;
  background: var(--marca-800); color: #fff; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; z-index: 2; }
.ts-demo-caja { padding-top: 22px; }

/* --- la comparativa requisito por requisito (05-sep): cabecera y primera
   columna pegajosas, filas legibles, una barra de cumplimiento por finalista */
.cmp5{min-width:640px;border:0;box-shadow:none;background:transparent;border-collapse:separate;border-spacing:0}
.cmp5 th{position:sticky;top:0;z-index:2;background:var(--superficie);border-bottom:2px solid var(--borde);
  font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave);padding:10px 8px;
  text-align:center;vertical-align:bottom}
.cmp5 th:first-child,.cmp5 td:first-child{position:sticky;left:0;z-index:1;background:var(--superficie);text-align:left;
  min-width:220px;max-width:340px;font-size:var(--t-sm);line-height:1.35;white-space:normal}
.cmp5 th:first-child{z-index:3}
.cmp5 td{padding:9px 8px;border-bottom:1px solid var(--borde-hairline);vertical-align:middle;font-size:var(--t-sm)}
.cmp5 td.desc{display:table-cell;margin:0;font-size:var(--t-2xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--texto-suave);font-weight:600}
.cmp5 tr:hover td{background:var(--marca-050)}
.cmp5-quien{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--texto);
  letter-spacing:0;font-size:var(--t-xs);font-weight:600;max-width:150px}
.cmp5-quien:hover span{color:var(--marca-800)}
.cmp5-quien .cmp5-ava{width:40px;height:40px}
.cmp5-quien span{white-space:normal;line-height:1.2}
.cmp5-est{width:30px;height:30px;font-size:14px}
.cmp5-res td{background:var(--fondo)}
.cmp5-barra{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--borde-hairline);gap:1px;
  width:100%;max-width:140px;margin:0 auto 4px}
.cmp5-barra .emp-tst-pesos__seg{min-width:0}
.cmp5-barra .emp-tst-pesos__seg[data-peso='0']{display:none}
.cmp5-seg--ok{background:var(--ok-fuerte)}
.cmp5-seg--parcial{background:var(--alerta-fuerte)}
.cmp5-seg--sin{background:var(--borde-campo)}
.cmp5-res__n{display:block;font-size:var(--t-2xs);color:var(--texto-suave)}
.cmp5-res__n b{color:var(--texto);font-size:var(--t-sm)}
.cmp5-ley{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:var(--e3) 0 0;font-size:var(--t-xs)}

/* --- la pestaña Evaluación sobre el kit (05-sep): cintas por sección, cifras del
   desglose, requisitos como filas con icono, fortalezas y alertas como tarjetas */
.emp-col-scroll{gap:10px}
.emp-col-scroll .kit-cinta{margin:0 0 -2px}
.emp-col-scroll .inf-bloque,.emp-col-scroll .emp-entrevista{margin:0}
.emp-entrevista{display:grid;gap:8px}
.emp-ev-bloque{padding:14px 16px 14px}
.emp-ev-bloque .kit-cifras{margin:0 0 12px}
.emp-ev-bloque .kit-cifra{padding:10px 6px 8px}
.emp-ev-bloque .kit-cifra b{font-size:var(--t-lg)}
.emp-ev-bloque .kit-caja{margin:0 0 12px}
.emp-ev-bloque .emp-ev-resumen{margin:0 0 6px}
.emp-ev-bloque .emp-ev-h:first-child{margin-top:0}
.emp-req-lista{list-style:none;margin:0;padding:0}
.emp-req-fila{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:9px 6px;margin:0 -6px;border-top:1px solid var(--borde-hairline);cursor:pointer;border-radius:8px}
.emp-req-fila:first-child{border-top:0}
.emp-req-fila:hover{background:var(--fondo)}
.emp-req-fila__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--fondo);color:var(--texto-suave);margin-top:1px}
.emp-req-fila__ic svg{width:16px;height:16px;display:block}
.emp-req-fila--cumple .emp-req-fila__ic{background:var(--ok-suave);color:var(--ok-fuerte)}
.emp-req-fila--parcial .emp-req-fila__ic{background:var(--alerta-suave);color:var(--alerta-fuerte)}
.emp-req-fila__q{display:flex;flex-direction:column;gap:2px;min-width:0}
.emp-req-fila__q b{font-size:var(--t-base);line-height:1.35}
.emp-req-fila__est{white-space:nowrap;margin-top:6px}
li.emp-req-fila.mk-fila-activa{background:var(--marca-050)}
.emp-ev-tarjeta{padding:10px 12px;align-items:flex-start;cursor:pointer}
.emp-ev-tarjeta .kit-tarjeta-ic{width:34px;height:34px;border-radius:10px;box-shadow:none;flex:none}
.emp-ev-tarjeta .kit-tarjeta-ic svg{width:17px;height:17px}
.emp-ev-tarjeta .kit-tarjeta-cuerpo span{font-size:13.5px;line-height:1.5}
.emp-ev-tarjeta--fort .kit-tarjeta-ic{background:var(--ok-fuerte)}
.emp-ev-tarjeta--rev .kit-tarjeta-ic{background:var(--alerta-fuerte)}
li.emp-ev-tarjeta.mk-fila-activa{border-color:var(--marca-500);background:var(--marca-050)}
.emp-gv__item{cursor:pointer;border-radius:10px}
.emp-ev-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--borde-hairline)}
.emp-ev-pie .desc{margin:0;font-size:var(--t-xs);max-width:60ch;display:block}
.emp-ev-nota{margin:10px 0 0;font-size:var(--t-xs);display:block}
.emp-cv-cab{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.emp-cv-cab .kit-cinta{flex:1 1 auto;margin:0}
.emp-cv-acc{flex:none}

/* --- pines de evidencia (05-sep): cada marca del CV lleva el número de su
   requisito (F/A/S para fortalezas, alertas y señales) y el mismo número vive
   en la fila del desglose; el pin activo late --------------------------- */
mark[data-n]{padding:1px 4px 1px 2px;border-radius:6px}
mark[data-n]::before{content:attr(data-n);display:inline-grid;place-items:center;min-width:16px;height:16px;
  padding:0 4px;margin:0 5px 0 0;border-radius:999px;font-size:9.5px;font-weight:800;line-height:1;color:#fff;
  background:var(--texto-suave);vertical-align:2px;font-family:var(--fuente-mono);letter-spacing:0;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
mark.mk-req::before{background:var(--ok-fuerte)}
mark.mk-parcial::before{background:var(--alerta-fuerte)}
mark.mk-fuerte::before{background:var(--info-fuerte)}
mark.mk-alerta::before{background:var(--critico-fuerte)}
mark[data-mk]{cursor:pointer}
mark.mk-previo{filter:saturate(1.5);box-shadow:0 0 0 2px var(--marca-200),inset 0 -2px 0 currentColor}
mark.mk-lumbre::before{animation:emp-pin-pulso 1.2s ease-out infinite}
@keyframes emp-pin-pulso{0%{box-shadow:0 0 0 0 rgba(155,46,140,.55)}100%{box-shadow:0 0 0 10px rgba(155,46,140,0)}}
@media (prefers-reduced-motion: reduce){mark.mk-lumbre::before{animation:none}}
.emp-req-fila__ic b{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;font-family:var(--fuente-mono)}
.emp-req-fila--cumple .emp-req-fila__ic{background:var(--ok-fuerte);color:#fff}
.emp-req-fila--parcial .emp-req-fila__ic{background:var(--alerta-fuerte);color:#fff}
.emp-req-fila--sin_evidencia .emp-req-fila__ic,.emp-req-fila--sin .emp-req-fila__ic{background:var(--superficie);
  color:var(--texto-suave);border:1px dashed var(--borde-campo)}
.emp-pin{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-right:6px;
  border-radius:999px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:var(--texto-suave);
  vertical-align:1px;font-family:var(--fuente-mono)}
.emp-pin--fuerte{background:var(--info-fuerte)}
.emp-pin--alerta{background:var(--critico-fuerte)}
/* la barra de cumplimiento del desglose */
.emp-ev-barra{margin:0 0 12px}
.emp-ev-barra__pista{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--borde-hairline);gap:2px}
.emp-ev-barra__pista .emp-tst-pesos__seg{min-width:0}
.emp-ev-barra__pista .emp-tst-pesos__seg[data-peso='0']{display:none}
.emp-ev-barra__seg--ok{background:var(--ok-fuerte)}
.emp-ev-barra__seg--par{background:var(--alerta-fuerte)}
.emp-ev-barra__seg--sin{background:var(--borde-campo)}
.emp-ev-barra .desc{margin:6px 0 0;font-size:var(--t-xs);display:block}
/* el mapa de evidencia del CV: chips que filtran (y hacen de leyenda) */
.emp-cv-mapa{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px;padding:0;border:0;flex-basis:100%}
.emp-cv-mapa .desc{margin:0 0 0 auto;font-size:var(--t-2xs)}
.emp-cv-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid var(--borde);
  background:var(--superficie);color:var(--texto);font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;
  box-shadow:none;line-height:1.2}
.emp-cv-chip i{width:8px;height:8px;border-radius:50%;background:var(--marca-500)}
.emp-cv-chip--req i{background:var(--ok-fuerte)}
.emp-cv-chip--parcial i{background:var(--alerta-fuerte)}
.emp-cv-chip--fuerte i{background:var(--info-fuerte)}
.emp-cv-chip--alerta i{background:var(--critico-fuerte)}
.emp-cv-chip .n{font-family:var(--fuente-mono);font-size:var(--t-2xs);background:var(--fondo);border-radius:999px;padding:0 6px}
.emp-cv-chip:hover{border-color:var(--marca-500);background:var(--marca-050);color:var(--marca-800)}
.emp-cv-chip--on,.emp-cv-chip--on:hover{background:var(--marca-800);border-color:var(--marca-800);color:#fff}
.emp-cv-chip--on .n{background:rgba(255,255,255,.2)}
.cvp--solo-mk-req mark[data-mk]:not(.mk-req),.cvp--solo-mk-parcial mark[data-mk]:not(.mk-parcial),
.cvp--solo-mk-fuerte mark[data-mk]:not(.mk-fuerte),.cvp--solo-mk-alerta mark[data-mk]:not(.mk-alerta){
  background:transparent;box-shadow:none;color:inherit}
.cvp--solo-mk-req mark[data-mk]:not(.mk-req)::before,.cvp--solo-mk-parcial mark[data-mk]:not(.mk-parcial)::before,
.cvp--solo-mk-fuerte mark[data-mk]:not(.mk-fuerte)::before,.cvp--solo-mk-alerta mark[data-mk]:not(.mk-alerta)::before{opacity:.2}
/* la navegación por secciones del CV, en la cabecera fija */
.emp-cv-nav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 6px;flex-basis:100%}
.emp-cv-nav a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:var(--t-xs);
  font-weight:600;color:var(--texto-suave);text-decoration:none;border:1px solid transparent}
.emp-cv-nav a:hover{color:var(--marca-800);background:var(--fondo)}
.emp-cv-nav a.emp-cv-nav--on{color:var(--marca-800);border-color:var(--marca-100);background:var(--marca-050)}
.emp-cv-nav .cvp-cuenta{margin:0;padding:0 7px;font-size:10px;vertical-align:0}
.emp-vcv-cab{align-items:flex-start}
/* la experiencia como línea de tiempo; las tarjetas responden al mouse */
.cvp-tarjetas--linea{position:relative;padding-left:22px}
.cvp-tarjetas--linea::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--marca-500),var(--marca-100))}
.cvp-tarjetas--linea .cvp-tarjeta{position:relative}
.cvp-tarjetas--linea .cvp-tarjeta::before{content:"";position:absolute;left:-19px;top:18px;width:10px;height:10px;
  border-radius:50%;background:var(--superficie);border:3px solid var(--marca-500);box-sizing:border-box}
.cvp-tarjetas--linea .cvp-tarjeta:first-child::before{background:var(--marca-500)}
.cvp-tarjeta{transition:border-color .15s,box-shadow .15s}
.cvp-tarjeta:hover{border-color:var(--marca-100);box-shadow:0 8px 18px -14px rgba(92,24,95,.4)}
.cvp-h{scroll-margin-top:8px}

/* --- lectura agradable del perfil (05-sep): cabeceras de sección con la barra
   de la casa, tarjeta de contacto con iconos y «Acerca de» como texto de lectura */
.cvp-titular{font-size:var(--t-lg);font-weight:800;color:var(--marca-900);margin:0 0 12px;letter-spacing:-.01em}
.cvp-h{display:flex;align-items:center;gap:10px;margin:26px 0 12px;padding:0;border:0;font-size:var(--t-xs);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--marca-800)}
.cvp-h::before{content:"";width:18px;height:4px;border-radius:999px;flex:none;
  background:linear-gradient(90deg,var(--marca-800),var(--marca-500))}
.cvp-h::after{content:"";flex:1 1 auto;height:1px;background:var(--borde-hairline)}
.cvp-h--exp{font-size:var(--t-xs);border:0;color:var(--marca-800)}
.cvp-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;background:transparent;
  border:0;padding:0;margin:0 0 6px}
.cvp-dato{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--fondo);
  border:1px solid var(--borde-hairline);border-radius:12px;min-width:0}
.cvp-dato > div{min-width:0}
.cvp-dato__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;color:#fff;
  background:linear-gradient(135deg,var(--marca-800),var(--marca-500))}
.cvp-dato__ic svg{width:15px;height:15px;display:block}
.cvp-dato span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:2px}
.cvp-dato b{font-size:13px;font-weight:600;word-break:break-word;line-height:1.35}
.cvp-acerca-caja{position:relative;padding:14px 16px 14px 18px;border-radius:12px;background:var(--marca-050);
  border-left:3px solid var(--marca-500)}
.cvp-acerca{font-size:14px;line-height:1.7;max-width:64ch;margin:0;color:var(--texto);text-wrap:pretty}
/* requisitos internos del cliente: separador y prioridad a la vista */
.emp-req-sep{list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px -6px 4px;
  padding:10px 12px;border-radius:10px;background:var(--marca-050)}
.emp-req-sep b{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--marca-800)}
.emp-req-sep .desc{margin:0;font-size:var(--t-2xs)}
.emp-req-prio{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-bottom:3px;
  background:var(--fondo);color:var(--texto-suave)}
.emp-req-prio::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.emp-req-prio--alta{background:var(--critico-suave);color:var(--critico-fuerte)}
.emp-req-prio--media{background:var(--alerta-suave);color:var(--alerta-fuerte)}
.emp-req-fila--p-alta{background:linear-gradient(90deg,var(--critico-suave) 0,transparent 46%)}
.emp-req-fila--p-alta .emp-req-fila__q b{font-size:var(--t-md)}
/* la marca de evidencia, moderna: píldora suave con su pin, sin subrayado */
mark[data-mk]{box-shadow:none;border-radius:8px;padding:2px 8px 2px 3px;line-height:1.9;
  transition:box-shadow .15s,background .15s}
mark.mk-req{background:var(--ok-suave);box-shadow:inset 0 0 0 1px rgba(11,110,79,.22)}
mark.mk-parcial{background:var(--alerta-suave);box-shadow:inset 0 0 0 1px rgba(138,77,8,.25)}
mark.mk-fuerte{background:var(--info-suave);box-shadow:inset 0 0 0 1px rgba(29,95,191,.22)}
mark.mk-alerta{background:var(--critico-suave);box-shadow:inset 0 0 0 1px rgba(180,35,24,.22)}
mark[data-mk]:hover{box-shadow:0 0 0 2px var(--marca-200,#E1C0DC),0 6px 14px -8px rgba(92,24,95,.5)}
mark.mk-previo{filter:none;box-shadow:0 0 0 2px var(--marca-200,#E1C0DC)}
mark.mk-lumbre{filter:none;background:var(--marca-050);box-shadow:0 0 0 2px var(--marca-500)}

/* --- el CV con vida (05-sep): cabecera de perfil, cifras del CV, duración y
   «Actual» en cada puesto, estudios con icono, chips con presencia ------- */
.cvp-cab{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.cvp-cab .avatar{width:64px;height:64px;flex:none}
.cvp-cab .avatar.ini{font-size:var(--t-xl)}
.cvp-cab__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.cvp-cab__nombre{font-size:var(--t-xl);font-weight:800;color:var(--marca-900);line-height:1.15;letter-spacing:-.01em}
.cvp-cab .cvp-titular{margin:0;font-size:var(--t-md);font-weight:600;color:var(--texto-suave)}
.cvp-cifras{margin:0 0 14px}
.cvp-cifras .kit-cifras{gap:8px}
.cvp-cifras .kit-cifra{padding:10px 6px 8px;box-shadow:none}
.cvp-cifras .kit-cifra-ic{width:30px;height:30px;box-shadow:none}
.cvp-cifras .kit-cifra-ic svg{width:15px;height:15px}
.cvp-cifras .kit-cifra b{font-size:var(--t-md)}
.cvp-cargo{font-weight:700;font-size:15px;line-height:1.3;color:var(--texto)}
.cvp-org{font-size:13px;color:var(--texto-suave);margin-top:3px}
.cvp-pill{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;font-weight:600;
  white-space:nowrap;background:var(--fondo);border:1px solid var(--borde-hairline);border-radius:12px;
  padding:5px 11px;color:var(--texto-suave);line-height:1.2}
.cvp-dur{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--marca-700)}
.cvp-actual{display:inline-block;vertical-align:2px;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ok-suave);color:var(--ok-fuerte)}
.cvp-tarjetas--linea .cvp-tarjeta--actual::before{background:var(--ok-fuerte);border-color:var(--ok-fuerte);
  box-shadow:0 0 0 4px var(--ok-suave)}
.cvp-tarjeta--actual{border-color:var(--ok-fuerte)}
.cvp-tarjeta--edu .cvp-tarjeta-cab{align-items:center}
.cvp-tarjeta__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;
  color:var(--marca-700);background:var(--marca-050);margin-right:2px}
.cvp-tarjeta__ic svg{width:17px;height:17px;display:block}
.cvp-tarjeta--edu .cvp-tarjeta-cab > div:not(.cvp-tarjeta__ic){flex:1 1 auto;min-width:0}
.cvp-vinetas{font-size:13.5px;line-height:1.6}
.cvp-vinetas li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marca-500);top:8px;left:4px}
.cvp-chips{gap:8px}
.cvp-chip{border:1px solid var(--marca-100);background:var(--marca-050);color:var(--marca-900);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:500;transition:background .15s,border-color .15s}
.cvp-chip:hover{background:var(--superficie);border-color:var(--marca-500)}
.cvp-datos .cvp-dato:last-child:nth-child(odd){grid-column:1/-1}
.cvp-dato mark[data-mk]{line-height:1.6;padding:1px 6px 1px 2px}

/* --- la pestaña Candidatos (05-sep): barra de una línea, cinta para la IA,
   podio 3+2 sin huérfano, tope por columna y nombres completos ----------- */
.cand-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 8px 8px 14px;margin:0 0 18px;
  background:var(--superficie);border:1px solid var(--borde);border-radius:14px;
  box-shadow:0 12px 26px -18px rgba(54,54,54,.35);transition:border-color .15s,box-shadow .15s}
.cand-barra:focus-within{border-color:var(--marca-500);box-shadow:0 0 0 3px var(--marca-050)}
.cand-barra__busca{flex:1 1 300px;display:flex;align-items:center;gap:10px;min-width:0;color:var(--texto-suave);margin:0}
.cand-barra__ic svg{width:18px;height:18px;display:block}
.cand-barra__busca input{flex:1 1 auto;min-width:0;border:0;background:transparent;box-shadow:none;
  padding:10px 0;font-size:var(--t-md);color:var(--texto)}
.cand-barra__busca input:focus{outline:none;box-shadow:none;border:0}
.cand-barra__acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.cand-ia{margin-bottom:22px}
.emp-sug__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.emp-sug__rot{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--marca-800)}
.emp-sug__chips{display:flex;flex-wrap:wrap;gap:8px}
.emp-sug .emp-test-chip{font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--marca-050);
  border:1px solid var(--marca-100);color:var(--marca-900)}
.emp-sug__nota{margin:10px 0 0}
.emp-tests-sug .emp-perf-sugerir{margin:0}
.cand-ia .emp-perf{margin:14px 0 0}
.cand-ia .emp-perf>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  background:var(--fondo);border:1px solid var(--borde-hairline);font-weight:600;font-size:var(--t-sm);cursor:pointer}
.cand-ia .emp-perf>summary::-webkit-details-marker{display:none}
.cand-ia .emp-perf>summary::before{content:"";width:8px;height:8px;flex:none;margin:0 2px 2px 0;
  border-right:2px solid var(--marca-700);border-bottom:2px solid var(--marca-700);
  transform:rotate(-45deg);transition:transform .15s}
.cand-ia .emp-perf[open]>summary::before{transform:rotate(45deg)}
.cand-ia .emp-perf>form{padding:12px 6px 0}
/* el podio: 3 arriba y 2 abajo (o 2+2, o 3 en fila) — nunca uno solo colgando */
.top5{grid-template-columns:repeat(6,1fr)}
.top5>.cand-card{grid-column:span 2}
.top5>.cand-card:nth-child(n+4){grid-column:span 3}
.top5:has(>:nth-child(4):last-child)>.cand-card,.top5:has(>:nth-child(2):last-child)>.cand-card{grid-column:span 3}
.top5:has(>:nth-child(6))>.cand-card{grid-column:span 2}
@media (max-width:900px){.top5{display:flex;flex-direction:column}}
.top5>.cand-card:first-child{border-color:var(--marca-500)}
.cand-card--podio .cand-cab{align-items:center}
.cand-card--podio .avatar{width:48px;height:48px}
/* nombres completos: dos líneas antes de cortar */
.cand-nombre{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* tope por columna: seis a la vista, el resto tras «Ver los N» */
.tab-col:not(.tab-col--abierta) .cand-card--mas{display:none}
.tab-col-mas{display:block;width:calc(100% - 20px);margin:0 10px 10px;text-align:center}

/* --- las dos cabeceras de Empleos con el enfoque del kit (05-sep) -------- */
/* la oferta: tapa fina de la marca, logo montado, acciones a la derecha y
   las cifras del proceso como fila de datos antes de las pestañas */
.emp-of-hero .hero-tapa{display:block;height:44px}
.emp-of-hero .hero--compacta .hero-info{padding:10px var(--e5) 6px;align-items:flex-start}
.emp-of-hero .hero--compacta .hero-info>.avatar,
.emp-of-hero .hero--compacta .hero-info>.avatar-caja{width:76px;height:76px;margin-top:-34px}
.emp-of-hero .hero--compacta .avatar.ini{font-size:var(--t-xl)}
.emp-of-hero .hero-cuerpo{padding-top:4px}
.emp-of-hero .hero-acciones{padding:6px 0 0;flex-wrap:wrap;justify-content:flex-end}
.emp-of-hero .hero-sub{gap:6px 18px}
.emp-of-cifras{padding:8px var(--e5) 14px}
.emp-of-cifras .kit-cifras{margin:0;gap:10px}
.emp-of-cifras .kit-cifra{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px;
  box-shadow:none;border-radius:12px;background:var(--fondo);border-color:var(--borde-hairline)}
.emp-of-cifras .kit-cifra-ic{width:34px;height:34px;margin:0;box-shadow:none}
.emp-of-cifras .kit-cifra b{font-size:var(--t-lg);line-height:1}
.emp-of-cifras .kit-cifra>span{margin:0;line-height:1.25}
@media (max-width:760px){.emp-of-cifras .kit-cifras:has(>:nth-child(4)){grid-template-columns:repeat(2,1fr)}}
/* el popup del postulante: contacto a un clic y las etapas del proceso */
.ficha-dialogo .hero-badges{align-items:center;gap:6px}
.emp-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;
  font-size:var(--t-xs);font-weight:600;color:var(--marca-900);background:var(--marca-050);
  border:1px solid var(--marca-100);text-decoration:none;max-width:100%;min-width:0;line-height:1.3}
.emp-hero-pill svg{width:14px;height:14px;flex:none;color:var(--marca-700)}
.emp-hero-pill>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.emp-hero-pill:hover{background:var(--superficie);border-color:var(--marca-500)}
.emp-hero-pill--dato{background:var(--fondo);border-color:var(--borde-hairline);color:var(--texto)}
.emp-hero-pill--dato svg{color:var(--texto-suave)}
.emp-hero-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px var(--e5) 12px}
.emp-etapas{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:0}
.emp-etapa{display:flex;align-items:center}
.emp-etapa+.emp-etapa::before{content:"";width:26px;height:2px;background:var(--borde);margin:0 4px;flex:none}
.emp-etapa--hecha+.emp-etapa::before{background:var(--ok-fuerte)}
.emp-etapa>span,.emp-etapa button{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:999px;
  border:1px solid var(--borde);background:var(--superficie);font:inherit;font-size:var(--t-xs);font-weight:600;
  color:var(--texto-suave);line-height:1.2;white-space:nowrap}
.emp-etapa button{cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.emp-etapa button:hover{border-color:var(--marca-500);color:var(--marca-900);background:var(--marca-050)}
.emp-etapa i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:11px;
  font-weight:700;background:var(--fondo);color:var(--texto-suave);border:1px solid var(--borde);flex:none}
.emp-etapa i svg{width:12px;height:12px;display:block}
.emp-etapa--hecha button{border-color:var(--ok-suave);background:var(--ok-suave);color:var(--ok-fuerte)}
.emp-etapa--hecha i{background:var(--ok-fuerte);color:#fff;border-color:var(--ok-fuerte)}
.emp-etapa--actual>span{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--marca-800),var(--marca-500));box-shadow:0 8px 16px -10px rgba(92,24,95,.8)}
.emp-etapa--actual i{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
.emp-etapa--mal>span{border-color:var(--critico-fuerte);background:var(--critico-suave);color:var(--critico-fuerte)}
.emp-etapa--mal i{background:var(--critico-fuerte);color:#fff;border-color:var(--critico-fuerte)}
.emp-etapas__aparte{margin-left:auto;display:flex;gap:8px;align-items:center}

/* --- la cabecera «kit» (05-sep): la portada sostiene la identidad ---------
   Nada monta sobre el banner: foto, nombre, línea, badges, acciones y anillo
   van EN el degradado, en blanco; cifras/etapas y pestañas en blanco debajo. */
.hero--kit .hero-portada{position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--marca-800) 0%,#9B2E8C 38%,#3157A7 68%,var(--acero-500) 100%)}
.hero--kit .hero-portada>.hero-info{position:relative;z-index:1}
.hero--kit .hero-info{align-items:center;gap:var(--e4);padding:18px var(--e5) 18px}
.hero--kit.hero--compacta .hero-info{padding:14px var(--e5) 14px}
.hero--kit .hero-info>.avatar,.hero--kit .hero-info>.avatar-caja{margin-top:0}
.hero--kit .avatar{width:76px;height:76px;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 24px -10px rgba(23,16,46,.6)}
.hero--kit .avatar.ini{background:rgba(255,255,255,.16);color:#fff;font-size:var(--t-xl)}
.hero--kit .avatar.org{background:#fff}
.hero--kit h1{color:#fff;font-size:var(--t-2xl);text-shadow:0 1px 2px rgba(23,16,46,.25)}
.hero--kit .hero-sub{color:rgba(255,255,255,.88);margin-top:5px}
.hero--kit .hero-sub .ico-mini{opacity:.85}
.hero--kit .hero-sub a{color:rgba(255,255,255,.88)}
.hero--kit .hero-badges{margin-top:8px;gap:6px;align-items:center}
/* badges y píldoras en cristal: el punto conserva el tono (ok/alerta/crítico) */
.hero--kit .hero-badges .badge{background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.3);font-size:var(--t-xs)}
.hero--kit .hero-badges .badge.ok::before{background:#8FE3BF}
.hero--kit .hero-badges .badge.alerta::before{background:#FFD27A}
.hero--kit .hero-badges .badge.critico::before{background:#FF9A8B}
.hero--kit .hero-badges .badge.info::before{background:#A9C6F5}
.hero--kit .hero-badges .badge.neutro::before{background:rgba(255,255,255,.65)}
.hero--kit .emp-hero-pill{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.hero--kit .emp-hero-pill svg{color:#fff}
.hero--kit a.emp-hero-pill:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}
.hero--kit .emp-hero-pill--dato{background:rgba(255,255,255,.08)}
/* acciones y navegación en cristal */
.hero--kit .hero-acciones{padding:0;align-self:center}
.hero--kit .hero-acciones .btn,.hero--kit .ficha-nav .btn{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.4);box-shadow:none}
.hero--kit .hero-acciones .btn:hover,.hero--kit .ficha-nav .btn:hover{background:rgba(255,255,255,.24);
  border-color:#fff;color:#fff}
.hero--kit .ficha-nav__pos{color:rgba(255,255,255,.85)}
/* el anillo del puntaje, moderno: trazo fino y redondo, blanco sobre pista
   translúcida, la cifra grande y la leyenda como píldora */
.hero--kit .anillo{width:74px;height:74px}
.hero--kit .anillo svg{filter:drop-shadow(0 6px 12px rgba(23,16,46,.35))}
.hero--kit .anillo-fondo{stroke:rgba(255,255,255,.22);stroke-width:7}
.hero--kit .anillo-arco{stroke:#fff;stroke-width:7}
.hero--kit .anillo--ok .anillo-arco{stroke:#8FE3BF}
.hero--kit .anillo--info .anillo-arco{stroke:#A9C6F5}
.hero--kit .anillo--neutro .anillo-arco{stroke:rgba(255,255,255,.6)}
.hero--kit .anillo-num{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.02em}
.hero--kit .anillo-num small{opacity:.75;font-size:10px}
.hero--kit .emp-ajuste{gap:6px}
.hero--kit .emp-ajuste__cap{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* lo que ya no aplica de la versión anterior de la oferta */
.emp-of-hero .hero--kit .hero-info>.avatar,.emp-of-hero .hero--kit .hero-info>.avatar-caja{margin-top:0;width:76px;height:76px}
.emp-of-hero .hero--kit .hero-cuerpo{padding-top:0}
.emp-of-hero .hero--kit .hero-acciones{padding:0}
.emp-of-hero .hero--kit h1{font-size:var(--t-2xl)}
.ficha-dialogo .hero--kit .avatar{width:64px;height:64px}
.ficha-dialogo .hero--kit h1{font-size:var(--t-xl)}
.ficha-dialogo .hero--kit .anillo{width:64px;height:64px}
.ficha-dialogo .hero--kit .anillo-num{font-size:19px}
.emp-of-cifras{padding-top:14px}
.emp-hero-pie{padding-top:12px}
@media (max-width:760px){.hero--kit .hero-info{flex-wrap:wrap}.hero--kit .hero-acciones{width:100%;justify-content:flex-start}}

/* --- la cabecera kit a página completa (Personas, Clientes): un poco más de
   aire y foto más grande que en el popup --------------------------------- */
.hero--kit:not(.hero--compacta) .hero-info{padding:22px var(--e5) 22px;gap:var(--e5)}
.hero--kit:not(.hero--compacta) .avatar{width:96px;height:96px}
.hero--kit:not(.hero--compacta) .avatar.ini{font-size:var(--t-2xl)}
.hero--kit:not(.hero--compacta) h1{font-size:var(--t-3xl)}
.hero--kit .avatar-capa{border-radius:50%}
.hero--kit .hero-sub .mono{color:#fff}
.cli-hero .hero--kit .avatar{width:76px;height:76px}
/* la barra de Decisión sin los botones de estado: las acciones a la derecha */
.emp-decision__fila:has(> .emp-decision__grupo--sec:only-child){justify-content:flex-end}
.hero--kit .avatar.ini.org{background:#fff;color:var(--marca-800)}

/* --- el título de pantalla del kit (06-sep): la portada compacta que abre
   todas las pantallas — rótulo, título, una nota y las acciones en blanco --- */
.kit-portada--pantalla{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;margin:0 0 18px}
.kit-portada--pantalla .kit-portada-txt{position:relative;z-index:1;min-width:0}
.kit-portada--pantalla h1{margin:0;font-size:var(--t-2xl);color:#fff;line-height:1.15;letter-spacing:-.01em}
.kit-portada--pantalla .kit-ojo{color:rgba(255,255,255,.82);margin-bottom:4px}
.kit-portada--pantalla .kit-nota{margin:6px 0 0;color:rgba(255,255,255,.9);max-width:72ch;font-size:var(--t-base)}
.kit-portada--pantalla .kit-nota a,.kit-portada--pantalla .kit-nota b,.kit-portada--pantalla .kit-nota strong{color:#fff}
.kit-portada--pantalla .kit-nota a{text-decoration:underline;text-underline-offset:2px}
.kit-portada-acc{position:relative;z-index:1;flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end}
.kit-portada-acc .btn,.kit-portada-acc button:not(.fantasma):not(.sec){background:#fff;color:var(--marca-800);
  border-color:#fff;box-shadow:0 8px 18px -10px rgba(23,16,46,.5)}
.kit-portada-acc .btn.fantasma,.kit-portada-acc .btn.sec,.kit-portada-acc button.fantasma{background:rgba(255,255,255,.12);
  color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}
.kit-portada-acc .btn:hover,.kit-portada-acc button:hover{filter:brightness(.97)}
.kit-portada-acc .btn.fantasma:hover,.kit-portada-acc button.fantasma:hover{background:rgba(255,255,255,.24);filter:none}
@media (max-width:640px){.kit-portada--pantalla{flex-direction:column;align-items:flex-start}
  .kit-portada-acc{justify-content:flex-start}}
/* la píldora de estado ya no tiene ancho fijo: el texto largo pisaba la
   columna de al lado (Finanzas, 06-sep) */
.rd-pildora{width:auto;min-width:9.5em;padding:4px 12px}
.fin-costo{margin:-6px 0 14px}
.fin-enlaces{white-space:nowrap}
/* Cierre del mes: la tira de meses con el candado en el punto, los atrasados
   plegados y el tablero con la piel del kit */
.cierre-meses{margin:0 0 14px}
.fin-meses .cm-punto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
  background:var(--alerta-fuerte);vertical-align:1px}
.fin-meses .cm-punto--cerrado{background:var(--ok-fuerte)}
.fin-meses .btn.sec .cm-punto{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.cierre-atrasados{margin-top:8px}
.cierre-atrasados summary{cursor:pointer;font-weight:600}
.cierre-atrasados p{margin:6px 0 0;line-height:1.9}
.cierre-atrasados a{margin-right:10px;white-space:nowrap}
.tablero{padding:18px 20px}
.tab-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.tab-kpi{background:var(--fondo);border:1px solid var(--borde-hairline);border-radius:12px;padding:12px 14px;margin:0}
.tab-kpi dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);margin:0 0 4px}
.tab-kpi dd{margin:0;font-size:var(--t-xl);font-weight:800;color:var(--marca-800);font-variant-numeric:tabular-nums;line-height:1.1}
.tab-kpi dd i{font-size:var(--t-md);color:var(--texto-tenue);font-weight:600}
.tab-kpi small{margin-top:4px;color:var(--texto-suave)}
.ciclo .barra{height:10px;border-radius:99px;overflow:hidden;gap:2px}
.trabas h3{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca-800);margin:0 0 10px}
.trabas ul{gap:8px}
.trabas li{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(150px,.8fr) 1.4fr;gap:12px;align-items:center;
  padding:10px 14px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);
  border-left:4px solid var(--alerta-fuerte);box-shadow:none}
.trabas li b{color:var(--texto)}
.trabas li span{font-weight:600;color:var(--marca-900)}
.trabas li small{font-size:var(--t-sm)}
.trabas.listo{padding:12px 14px;border-radius:12px;background:var(--ok-suave)}
.trabas.listo h3{color:var(--ok-fuerte)}
@media (max-width:760px){.tab-kpis{grid-template-columns:repeat(2,1fr)}.trabas li{grid-template-columns:1fr;gap:4px}}

/* --- ronda 2 (06-sep): Finiquitos y la bandeja de Empleos ---------------- */
.fq-acciones{margin:-6px 0 14px}
.fq-cliente>summary{gap:10px}
.fq-cliente>summary .fq-chip{margin-left:4px}
.fq-urgente{color:var(--texto-suave);font-size:var(--t-xs);margin-left:6px;white-space:nowrap}
.rd-arte-nada.rd-arte-kit{display:grid;place-items:center;background:var(--marca-050);color:var(--marca-700);font-size:0}
.rd-arte-kit svg{width:28px;height:28px;display:block}
.rd-carta-arte img.rd-arte-logo{object-fit:contain;padding:10px;background:#fff}
.rd-carta--fin .rd-arte-logo,.rd-carta--fin .rd-arte-kit{filter:grayscale(1);opacity:.7}

/* --- ronda 3 (06-sep): Supervisores, Proyectos y Pre-altas -------------- */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sup-card{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:16px 18px;
  box-shadow:var(--sombra-1);display:flex;flex-direction:column;gap:10px}
.sup-card__cab{display:flex;align-items:center;gap:12px;min-width:0}
.sup-card__av{width:44px;height:44px;font-size:var(--t-md);flex:none}
.sup-card__txt{min-width:0}
.sup-card .sup-nombre{margin:0}
.sup-card .sup-alcance{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-card__n{display:flex;align-items:baseline;gap:8px}
.sup-card__n b{font-size:var(--t-2xl);font-weight:800;color:var(--marca-800);line-height:1}
.sup-card__n span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.sup-card .progreso{margin:0}
.sup-card__pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.sup-card__pct{font-size:var(--t-xs);font-weight:700;color:var(--texto-suave)}
.sup-card__pct.ok{color:var(--ok-fuerte)}
.sup-card__pct.alerta{color:var(--alerta-fuerte)}
.proy-aviso{color:var(--alerta-fuerte)}
.pa-lista{display:flex;flex-direction:column;gap:8px}
.pa-fila{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(200px,1fr) auto auto;gap:14px;align-items:center;
  padding:12px 14px;border:1px solid var(--borde-hairline);border-radius:12px;background:var(--fondo)}
.pa-quien{display:flex;flex-direction:column;gap:2px;min-width:0}
.pa-quien .desc{margin:0;font-size:var(--t-xs)}
.pa-avance{display:flex;flex-direction:column;gap:4px;min-width:0}
.pa-avance .progreso{margin:0}
.pa-sellos{display:flex;gap:6px}
.pa-sellos .badge{font-size:var(--t-2xs)}
.pa-acc{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:820px){.pa-fila{grid-template-columns:1fr}.pa-acc{justify-content:flex-start}}

/* --- ronda 4 (06-sep): Inicio, Importar, Panel TI, Banco de preguntas ---- */
.ini-lista{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.ini-fila{display:grid;grid-template-columns:minmax(200px,.9fr) 1.6fr auto;gap:14px;align-items:center;
  padding:12px 16px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);
  border-left:4px solid var(--alerta-fuerte);text-decoration:none;color:var(--texto);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ini-fila--critico{border-left-color:var(--critico-fuerte)}
.ini-fila:hover{border-color:var(--marca-500);border-left-color:var(--marca-500);
  box-shadow:0 10px 22px -14px rgba(92,24,95,.45);transform:translateY(-1px)}
.ini-fila__quien{display:flex;flex-direction:column;gap:2px;min-width:0}
.ini-fila__quien b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-fila__quien small{color:var(--texto-suave);font-size:var(--t-xs)}
.ini-fila__msj{color:var(--texto);font-size:var(--t-sm);line-height:1.45}
.ini-fila__ir .badge{font-size:var(--t-2xs)}
@media (max-width:760px){.ini-fila{grid-template-columns:1fr;gap:6px}}
.kit-cifras.kit-cifras--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){.kit-cifras.kit-cifras--6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.kit-cifras.kit-cifras--6{grid-template-columns:repeat(2,1fr)}}
.kit-cifra.ti-kpi{border:1px solid var(--borde)}
.kit-cifra.ti-kpi>span{font-size:11px}
.emp-bi-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--marca-050);
  color:var(--marca-700);margin-bottom:6px}
.emp-bi-ic svg{width:18px;height:18px;display:block}

/* --- ronda 5 (06-sep): Personas, Valores de ley, Portal, Agenda ---------- */
.per-barra{padding:10px 14px 12px}
.per-barra .frow{gap:8px 12px;align-items:flex-end;margin:0}
.per-barra .frow+.frow{margin-top:8px}
.per-barra .fld label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:3px}
.per-barra .fld--crece{flex:1 1 340px}
.per-barra .chk-linea{font-size:var(--t-sm);text-transform:none;letter-spacing:0}
.per-buscando{align-self:center;margin-left:6px}
.vl-indice{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 16px}
.vl-indice b{font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);margin-right:4px}
.vl-indice a{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:var(--t-xs);font-weight:600;
  color:var(--marca-900);background:var(--marca-050);border:1px solid var(--marca-100);text-decoration:none}
.vl-indice a:hover{background:var(--superficie);border-color:var(--marca-500)}
[id^='vl-']{scroll-margin-top:84px}
.pt-lista{display:flex;flex-direction:column;gap:6px}
.pt-fila{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:10px 14px;
  border-radius:12px;border:1px solid var(--borde-hairline);background:var(--fondo)}
.pt-fila--on{background:var(--superficie);border-color:var(--borde)}
.pt-sw{position:relative;width:38px;height:22px;border-radius:999px;background:var(--borde);transition:background .15s;flex:none}
.pt-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.pt-fila--on .pt-sw{background:var(--ok-fuerte)}
.pt-fila--on .pt-sw i{transform:translateX(16px)}
.pt-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:720px){.pt-fila{grid-template-columns:auto 1fr;gap:8px}.pt-acc{grid-column:1/-1;justify-content:flex-start}}
.ag-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ag-item{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--superficie);
  border:1px solid var(--borde);border-left:4px solid var(--ok-fuerte);font-size:var(--t-sm)}
.ag-item.ag-info{border-left-color:var(--info-fuerte)}
.ag-item.ag-critico{border-left-color:var(--critico-fuerte)}
.ag-item__cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ag-item__cab small{color:var(--texto-suave);font-size:var(--t-2xs)}
.ag-item__txt{color:var(--texto);line-height:1.45}

/* --- Personas (06-sep): buscador como barra, filtros en píldoras, la lista
   como filas del kit y el paginador común -------------------------------- */
.per-busca{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:8px 12px 12px;
  margin:0 0 16px;box-shadow:0 12px 26px -18px rgba(54,54,54,.35);transition:border-color .15s,box-shadow .15s}
.per-busca:focus-within{border-color:var(--marca-500);box-shadow:0 0 0 3px var(--marca-050)}
.per-busca__campo{display:flex;align-items:center;gap:10px;padding:2px 4px 8px;margin:0 0 10px;
  border-bottom:1px solid var(--borde-hairline);color:var(--texto-suave);cursor:text}
.per-busca__ic svg{width:18px;height:18px;display:block}
.per-busca .per-busca__campo input{flex:1 1 auto;min-width:0;border:0;background:transparent;box-shadow:none;
  padding:8px 0;font-size:var(--t-md);color:var(--texto)}
.per-busca .per-busca__campo input:focus{outline:none;box-shadow:none}
.per-busca__filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.per-filtro{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 12px;border-radius:999px;
  border:1px solid var(--borde);background:var(--fondo);color:var(--texto-suave);cursor:pointer;max-width:100%}
.per-filtro>span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.per-busca .per-filtro select{border:0;background:transparent;box-shadow:none;padding:0 6px 0 2px;height:32px;
  font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--texto);max-width:220px;cursor:pointer}
.per-busca .per-filtro select:focus{outline:none}
.per-filtro:has(select:focus){border-color:var(--marca-500);background:var(--superficie)}
.per-toggle{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--borde);background:var(--fondo);font-size:var(--t-sm);color:var(--texto-suave);cursor:pointer}
.per-toggle input{margin:0;accent-color:var(--marca-700)}
.per-toggle:has(input:checked){background:var(--marca-050);border-color:var(--marca-500);color:var(--marca-900);font-weight:600}
.per-busca__btn{margin-left:auto}
.per-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.per-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--marca-050);
  color:var(--marca-900);border:1px solid var(--marca-100);font-size:var(--t-xs);font-weight:600;text-decoration:none}
.per-chip b{color:var(--marca-700)}
.per-chip:hover{border-color:var(--marca-500)}
.per-lista-cab{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.per-lista-cab .rd-tabla-h{margin:0}
.per-lista-cab .rd-tabla-csv{margin-left:auto}
.per-cab,.per-fila{display:grid;gap:12px;align-items:center;
  grid-template-columns:40px minmax(200px,1.5fr) minmax(150px,1.1fr) minmax(170px,1.3fr) minmax(120px,.9fr) 118px 104px 88px}
.per-cab{padding:4px 14px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave)}
.per-cab .num{text-align:right}
.per-lista{display:flex;flex-direction:column;gap:6px}
.per-fila{padding:10px 14px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);
  text-decoration:none;color:var(--texto);transition:border-color .15s,box-shadow .15s,transform .15s}
.per-fila:hover{border-color:var(--marca-500);box-shadow:0 10px 22px -14px rgba(92,24,95,.45);transform:translateY(-1px)}
.per-fila--baja{background:var(--fondo);color:var(--texto-suave)}
.per-av{display:block;width:36px;height:36px}
.per-av>*{width:36px!important;height:36px!important;font-size:12px!important}
.per-quien,.per-donde{display:flex;flex-direction:column;gap:2px;min-width:0}
.per-quien b,.per-donde b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.per-quien small,.per-donde small{color:var(--texto-suave);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.per-ncon{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--marca-050);
  color:var(--marca-800);font-size:10px;font-weight:700;vertical-align:1px}
.per-cargo,.per-sup{font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.per-sueldo{font-family:var(--fuente-mono);font-variant-numeric:tabular-nums;text-align:right;font-size:var(--t-sm);white-space:nowrap}
.per-estado .badge{font-size:var(--t-2xs)}
.per-ir{justify-self:end;font-size:var(--t-xs);font-weight:700;color:var(--marca-800);white-space:nowrap}
.per-fila:hover .per-ir{text-decoration:underline}
.per-vacio{padding:18px 14px;text-align:center}
.rd-pag--pts{border-color:transparent;color:var(--texto-suave)}
@media (max-width:1100px){.per-cab{display:none}
  .per-fila{grid-template-columns:40px 1fr auto;gap:6px 12px}
  .per-cargo,.per-donde,.per-sup,.per-sueldo{grid-column:2/-1}.per-sueldo{text-align:left}}
.per-quien b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
.per-cargo{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}

/* --- Clientes y Proyectos (06-sep): la misma barra de búsqueda de Personas
   (clases per-*) y las tablas como filas del kit ------------------------- */
.per-busca--sin-campo{padding-top:12px}
.cli-cab,.cli-fila{display:grid;gap:12px;align-items:center;
  grid-template-columns:44px minmax(220px,1.6fr) 110px 110px 90px minmax(120px,.8fr) 96px}
.pro-cab,.pro-fila{display:grid;gap:12px;align-items:center;
  grid-template-columns:minmax(220px,1.5fr) minmax(140px,1fr) minmax(140px,1fr) minmax(130px,.9fr) 96px 90px 96px}
.cli-cab,.pro-cab{padding:4px 14px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave)}
.cli-lista,.pro-lista{display:flex;flex-direction:column;gap:6px}
.cli-fila,.pro-fila{padding:10px 14px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);
  text-decoration:none;color:var(--texto);transition:border-color .15s,box-shadow .15s,transform .15s}
.cli-fila:hover,.pro-fila:hover{border-color:var(--marca-500);box-shadow:0 10px 22px -14px rgba(92,24,95,.45);transform:translateY(-1px)}
.cli-fila--arch,.pro-fila--inactivo{background:var(--fondo);color:var(--texto-suave)}
.cli-fila__av{display:block;width:40px;height:40px}
.cli-fila__av .avatar-chip{width:40px;height:40px;font-size:13px}
.cli-fila__quien,.pro-fila__quien{display:flex;flex-direction:column;gap:2px;min-width:0}
.cli-fila__quien b,.pro-fila__quien b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-fila__quien small,.pro-fila__quien small{color:var(--texto-suave);font-size:var(--t-xs)}
.pro-fila__quien small.proy-aviso{color:var(--alerta-fuerte);font-weight:600}
.cli-fila__quien .badge,.pro-fila__quien .badge{align-self:flex-start;font-size:var(--t-2xs);margin:2px 0}
.cli-fila__n{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cli-fila__n b{font-variant-numeric:tabular-nums;font-size:var(--t-md);font-weight:700;color:var(--marca-800)}
.cli-fila__n small{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave)}
.cli-fila__reglas .badge{font-size:var(--t-2xs)}
.cli-fila__ir{justify-self:end;font-size:var(--t-xs);font-weight:700;color:var(--marca-800);white-space:nowrap}
.cli-fila:hover .cli-fila__ir,.pro-fila:hover .cli-fila__ir{text-decoration:underline}
.pro-fila__cli,.pro-fila__ubi,.pro-fila__sup{font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pro-fila__ubi .badge{font-size:var(--t-2xs);margin-left:4px}
@media (max-width:1000px){.cli-cab,.pro-cab{display:none}
  .cli-fila{grid-template-columns:44px 1fr auto;gap:6px 12px}.pro-fila{grid-template-columns:1fr auto;gap:6px 12px}
  .cli-fila__n,.cli-fila__reglas,.pro-fila__cli,.pro-fila__ubi,.pro-fila__sup{grid-column:1/-1}}

/* --- la píldora de filtro se abre desde cualquier punto (06-sep): el select
   ES la píldora y el rótulo flota encima sin capturar el clic ------------ */
.per-filtro{position:relative;display:inline-block;height:34px;padding:0;border:0;background:none;max-width:100%}
.per-filtro>span{position:absolute;left:12px;top:0;height:34px;display:flex;align-items:center;pointer-events:none;
  z-index:1;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.per-busca .per-filtro select{height:34px;max-width:280px;border:1px solid var(--borde);border-radius:999px;
  background:var(--fondo);padding:0 12px 0 var(--per-pl,84px);font:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--texto);cursor:pointer;box-shadow:none;transition:border-color .15s,background .15s}
.per-busca .per-filtro select:hover{border-color:var(--marca-500)}
.per-busca .per-filtro select:focus{outline:none;border-color:var(--marca-500);background:var(--superficie)}
.per-filtro--cliente{--per-pl:76px}
.per-filtro--proyecto{--per-pl:88px}
.per-filtro--supervisor{--per-pl:102px}
.per-filtro--estado{--per-pl:72px}
.per-filtro--contrato{--per-pl:90px}

/* --- la barra de búsqueda: lupa + interruptores en la primera fila, los
   filtros en una sola línea con ancho fijo por tipo (06-sep) ------------ */
.per-busca__fila{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;margin:0 0 10px;
  border-bottom:1px solid var(--borde-hairline)}
.per-busca__fila--sola{border-bottom:0;margin:0;padding-bottom:2px}
.per-busca__fila .per-busca__campo{flex:1 1 auto;border:0;margin:0;padding:0}
.per-busca__filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.per-busca__filtros::-webkit-scrollbar{display:none}
.per-busca .per-filtro select{width:var(--per-w,170px);max-width:none;text-overflow:ellipsis}
.per-filtro--cliente{--per-w:214px}
.per-filtro--proyecto{--per-w:224px}
.per-filtro--supervisor{--per-w:196px}
.per-filtro--estado{--per-w:150px}
.per-filtro--contrato{--per-w:166px}
@media (max-width:1180px){.per-busca__filtros{flex-wrap:wrap;overflow:visible}.per-busca__fila{flex-wrap:wrap}}

/* --- la ficha 360 como popup (06-sep) y su primera pasada del kit ------- */
.ficha-dialogo--persona{width:min(1240px,96vw)}
.ficha-dialogo .ficha-volver{display:none}
.ficha-dialogo .ficha-persona{padding-top:4px}
.ficha-dialogo .hero--kit{margin-bottom:var(--e4)}
.fp-datos{grid-template-columns:1fr;gap:8px}
.fp-datos .cvp-dato{padding:9px 12px}
.fp-faltan{margin:8px 0 0}
/* el popup de la persona: grande y de ALTURA FIJA — cambiar de pestaña no lo
   encoge hacia el centro; el cuerpo desplaza por dentro (Will, 07-sep) */
.ficha-dialogo--persona{width:min(1560px,98vw);height:min(94vh,1080px);max-height:94vh;display:none}
.ficha-dialogo--persona[open]{display:block}
.ficha-dialogo--persona .ficha-cuerpo{height:100%;max-height:none;overflow:auto;box-sizing:border-box}
.ficha-dialogo--persona .ficha-persona{min-height:100%}

/* --- la ficha 360 sector por sector (07-sep): secciones con tarjetas con
   icono, lo que falta en ámbar, filas del kit para documentos, cargas y
   planillas, los papeles del contrato como botones ---------------------- */
.ficha-persona .cvp-h{margin:18px 0 10px}
.ficha-persona .panel .cvp-h:first-child{margin-top:2px}
.fp-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.fp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-grid .cvp-dato{padding:9px 12px}
.fp-dato--falta{border-color:var(--alerta-suave);background:linear-gradient(90deg,var(--alerta-suave) 0,var(--fondo) 55%)}
.fp-dato--falta .cvp-dato__ic{background:var(--alerta-fuerte)}
.fp-vacio{color:var(--texto-tenue);font-weight:500;font-style:italic}
.fp-link{color:var(--marca-800);text-decoration:none;border-bottom:1px solid var(--marca-200,#E1C0DC)}
.fp-link:hover{border-bottom-color:var(--marca-800)}
.fp-monto{font-size:var(--t-lg);color:var(--marca-800);font-variant-numeric:tabular-nums}
.fp-papeles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 2px}
.fp-papeles__rot{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);margin-right:4px}
.fp-papeles a{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--borde);
  background:var(--superficie);font-size:var(--t-xs);font-weight:600;color:var(--marca-900);text-decoration:none}
.fp-papeles a:hover{border-color:var(--marca-500);background:var(--marca-050)}
.fp-papeles .hint{font-size:var(--t-xs)}
.fd-lista{display:flex;flex-direction:column;gap:6px}
.fd-fila{display:grid;grid-template-columns:40px minmax(200px,1.6fr) minmax(120px,.9fr) minmax(120px,.9fr) auto auto;gap:12px;
  align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--borde-hairline);background:var(--fondo)}
.fd-fila--pl{grid-template-columns:40px minmax(200px,1.4fr) minmax(140px,1fr) minmax(140px,1fr) auto}
.fd-fila--dep{grid-template-columns:40px minmax(200px,1.6fr) minmax(160px,1fr) minmax(120px,.8fr) auto}
.fd-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--marca-800),var(--marca-500))}
.fd-ic svg{width:16px;height:16px;display:block}
.fd-tipo{display:flex;flex-direction:column;gap:2px;min-width:0}
.fd-tipo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-tipo small{color:var(--texto-suave);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-tipo small .badge{font-size:var(--t-2xs)}
.fd-fecha{display:flex;flex-direction:column;gap:1px;min-width:0}
.fd-fecha small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.fd-fecha b{font-size:var(--t-sm);font-weight:600}
.fd-acc{justify-self:end}
.fd-mas{margin:12px 0 0}
.fd-mas>summary{list-style:none;display:inline-flex;cursor:pointer}
.fd-mas>summary::-webkit-details-marker{display:none}
.fd-mas>form{margin-top:10px}
.fp-foto{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fp-foto .avatar{width:84px;height:84px}
.fp-foto .desc{margin:0 0 8px}
@media (max-width:900px){.fp-grid--3{grid-template-columns:1fr 1fr}
  .fd-fila,.fd-fila--pl,.fd-fila--dep{grid-template-columns:40px 1fr auto;gap:6px 12px}
  .fd-fecha{grid-column:2/-1}}
/* el estado vacío con icono del kit: medallón de 64 px, nunca el SVG a todo
   el ancho (la ficha 360 lo destapó, 07-sep) */
.vacio div.ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  background:var(--marca-050);color:var(--marca-700);font-size:0}
.vacio div.ico svg{width:30px;height:30px;display:block}
.vacio div.ico{opacity:1}
/* la ficha 360: los DATOS mandan, el icono acompaña (Will, 07-sep) — icono
   chico y sin medallón junto al rótulo, valor grande y oscuro */
.ficha-persona .cvp-dato{gap:8px;align-items:flex-start;padding:11px 14px;background:var(--superficie);border:1px solid var(--borde)}
.ficha-persona .cvp-dato__ic{width:20px;height:20px;border-radius:6px;background:transparent;color:var(--marca-500);
  margin-top:1px;box-shadow:none;flex:none}
.ficha-persona .cvp-dato__ic svg{width:16px;height:16px}
.ficha-persona .cvp-dato>div{min-width:0;flex:1 1 auto}
.ficha-persona .cvp-dato span{font-size:10px;letter-spacing:.07em;color:var(--texto-suave);margin-bottom:3px}
.ficha-persona .cvp-dato b{font-size:15px;font-weight:650;color:var(--texto);line-height:1.35;word-break:break-word}
.ficha-persona .cvp-dato .mono{font-size:14px}
.ficha-persona .fp-dato--falta{background:var(--alerta-suave);border-color:transparent}
.ficha-persona .fp-dato--falta .cvp-dato__ic{background:transparent;color:var(--alerta-fuerte)}
.ficha-persona .fp-dato--falta b{color:var(--alerta-fuerte)}
.ficha-persona .fp-monto{font-size:var(--t-xl);font-weight:800}
.ficha-persona .cvp-h{font-size:11px}
.ficha-persona .cvp-h::before{width:14px;height:3px}
/* dentro del valor de una tarjeta, un span (monto, badge) NO es el rótulo */
.ficha-persona .cvp-dato b span{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0}
.ficha-persona .cvp-dato b .badge{display:inline-flex;font-size:var(--t-2xs);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;width:auto}
.ficha-persona .cvp-dato b .fp-monto{font-size:var(--t-xl);font-weight:800;color:var(--marca-800)}
/* Personal: rejilla pareja (3 columnas donde las tarjetas son 9, 3 o 2) y la
   completitud compacta arriba de «En la empresa» (Will, 07-sep) */
.fp-grid .cvp-dato:last-child:nth-child(odd){grid-column:auto}
.ficha-persona .panel>h2{font-size:var(--t-md)}
.fp-compl .panel{padding:12px 16px 10px}
.fp-compl .progreso{margin:2px 0 0}
.fp-compl .progreso .desc,.fp-compl .fp-faltan{font-size:var(--t-xs);margin:4px 0 0}
.fp-compl .progreso__pista{height:8px}
/* Personal: las dos columnas cierran al mismo pie (Will, 07-sep). «En la
   empresa» reparte sus tarjetas en dos columnas y su panel se estira hasta
   el pie de «Datos personales»; con el formulario de edición abierto no se
   estira (sería un panel vacío de dos metros) */
.ficha-persona .dos-col{align-items:stretch}
.ficha-persona .dos-col>div,.ficha-persona .dos-col>aside{display:flex;flex-direction:column;min-width:0}
.ficha-persona .dos-col>div>.panel:last-child,.ficha-persona .dos-col>aside>.panel:last-child{flex:1 1 auto}
.ficha-persona .dos-col>aside>.panel:last-child{display:flex;flex-direction:column}
.ficha-persona .fp-datos{flex:1 1 auto;align-content:space-between;gap:6px}
.ficha-persona .fp-datos .cvp-dato{padding:7px 12px}

/* --- el editor de datos personales como popup propio (07-sep) ---------- */
dialog.rd-dlg--persona{width:min(1100px,94vw)}
.rd-dlg__sub{margin:2px 0 0;font-size:var(--t-sm);color:var(--texto-suave)}
.rd-fsec__nota{font-size:var(--t-xs);font-weight:600;color:var(--alerta-fuerte);margin-left:10px;letter-spacing:.02em}
.rd-form .rd-tel{display:flex;gap:8px;align-items:stretch}
.rd-form .rd-tel .telsel{flex:none}
.rd-form .rd-tel .telbtn{min-height:42px;border-radius:8px;background:var(--fondo);border-color:var(--borde)}
.rd-form .rd-tel input{flex:1 1 auto;min-width:0}
.rd-form .fld select.campo-en-foco,.rd-form .fld input.campo-en-foco{border-color:var(--critico-fuerte);box-shadow:0 0 0 3px var(--critico-suave)}
/* dentro del popup de la ficha el diálogo del editor va encima, a todo el alto útil */
.ficha-dialogo dialog.rd-dlg{max-height:90vh}

/* --- «Lo que viene»: agenda del kit (07-sep) ---------------------------- */
.fp-viene{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fp-viene__it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:9px 14px 9px 9px;border:1px solid var(--borde);border-left:4px solid var(--info-fuerte);
  border-radius:10px;background:var(--superficie)}
.fp-viene__it--ok{border-left-color:var(--ok-fuerte)}
.fp-viene__it--alerta{border-left-color:var(--alerta-fuerte)}
.fp-viene__it--critico{border-left-color:var(--critico-fuerte)}
.fp-viene__fecha{display:grid;place-items:center;align-content:center;width:52px;height:46px;border-radius:8px;
  background:var(--marca-050);color:var(--marca-800);line-height:1;font-family:inherit;white-space:nowrap}
.fp-viene__fecha b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.fp-viene__fecha span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;color:var(--texto-suave)}
.fp-viene__cuerpo{display:grid;gap:2px;min-width:0}
.fp-viene__cuerpo b,.fp-viene__cuerpo a{font-size:14px;font-weight:650;color:var(--texto);text-decoration:none}
.fp-viene__cuerpo a:hover{color:var(--marca-800);text-decoration:underline}
.fp-viene__cuerpo>span{font-size:var(--t-sm);color:var(--texto-suave)}
.fp-viene__cuanto{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--fondo);color:var(--texto-suave);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.fp-viene__cuanto i{display:inline-flex}
.fp-viene__cuanto svg{width:14px;height:14px}
.fp-viene__it--alerta .fp-viene__cuanto{background:var(--alerta-suave);color:var(--alerta-fuerte)}
.fp-viene__it--critico .fp-viene__cuanto{background:var(--critico-suave);color:var(--critico-fuerte)}
.fp-viene__it--ok .fp-viene__cuanto{background:var(--ok-suave);color:var(--ok-fuerte)}
@media (max-width:640px){.fp-viene__it{grid-template-columns:auto minmax(0,1fr)}.fp-viene__cuanto{grid-column:2;justify-self:start}}
/* en la columna angosta el «cuánto falta» baja a la segunda línea del cuerpo */
.ficha-persona aside .fp-viene__it{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
.ficha-persona aside .fp-viene__cuanto{grid-column:2;justify-self:start;padding:3px 9px}
.ficha-persona aside .fp-viene__fecha{grid-row:span 2}
/* en el editor de la persona los números van a la izquierda como el resto de
   los fills: la mono ya los distingue, la alineación a la derecha los aislaba */
.rd-dlg--persona .fld input.mono{text-align:left}

/* --- el fill de cuenta bancaria (07-sep): grupos de 4, contador de dígitos
   a la derecha, y el estado de la verificación con palabras ---------------- */
.rd-cuenta{position:relative;display:block}
.rd-cuenta input{width:100%;box-sizing:border-box;font-family:var(--fuente-mono);font-size:16px;
  letter-spacing:.08em;font-variant-numeric:tabular-nums;padding-right:104px;text-align:left}
.rd-cuenta__n{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-suave);white-space:nowrap}
.rd-cuenta__n--ok{color:var(--ok-fuerte)}
.rd-cuenta__n--mal{color:var(--critico-fuerte)}
.rd-cuenta__n:empty{display:none}
.rd-form .fld .rd-cuenta input.match-ok{border-color:var(--ok-fuerte);box-shadow:0 0 0 3px var(--ok-suave)}
.rd-form .fld .rd-cuenta input.match-bad{border-color:var(--critico-fuerte);box-shadow:0 0 0 3px var(--critico-suave)}
.fgrid:not(.rd-form) .rd-cuenta{width:260px;max-width:100%}

/* --- el alta de trabajador (07-sep): popup desde Personas con la receta del
   editor; la página completa /alta (pre-altas, sin JS) es la misma hoja ---- */
.alta-hoja form.rd-form{max-width:1100px}
.alta-hoja .errbox,.alta-hoja .okbox{max-width:1100px}
#rd-dlg-alta:empty{display:none}
.rd-dlg .rd-pie a.btn{display:inline-flex;align-items:center}

/* --- actualización de datos por link único (07-sep): el selector de campos,
   las filas del pedido en la ficha y la bandeja de pre-altas ---------------- */
.pa-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pa-picker__sec{border:1px solid var(--borde);border-radius:10px;padding:6px 12px 10px;margin:0;min-width:0;background:var(--superficie)}
.pa-picker__sec legend{padding:0 4px;font-weight:700;font-size:var(--t-sm);color:var(--texto)}
.pa-picker__sec legend label{display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.pa-picker__n{font-size:var(--t-2xs);color:var(--texto-suave);margin-left:6px;font-variant-numeric:tabular-nums}
.pa-picker__campos{display:grid;gap:3px}
.pa-picker__campo{display:flex;gap:8px;align-items:center;font-size:var(--t-sm);cursor:pointer;padding:2px 0;color:var(--texto)}
.pa-picker__campo input,.pa-picker__todo{accent-color:var(--marca-800);width:15px;height:15px;margin:0}
.pa-picker__campo--falta span::after{content:"falta";margin-left:8px;padding:1px 6px;border-radius:999px;
  background:var(--alerta-suave);color:var(--alerta-fuerte);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pa-lista--ficha .pa-fila{padding:8px 10px}
.pa-fila--ficha{grid-template-columns:minmax(150px,1.2fr) minmax(140px,.8fr) auto auto}
.pa-fila--archivada{opacity:.7}
.pa-fila .pa-quien a{color:var(--texto);text-decoration:none}
.pa-fila .pa-quien a:hover{color:var(--marca-800);text-decoration:underline}
.pa-enlace-fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pa-enlace-fila .pa-enlace{flex:1 1 320px;max-width:none}
.pa-chips{display:flex;flex-wrap:wrap;gap:6px}
.pa-chip{font-size:var(--t-xs);padding:3px 9px;border-radius:999px;background:var(--marca-050);color:var(--marca-800);font-weight:600}
.fp-act__vacio{margin:0;max-width:none}
.fd-mas .pa-fila{margin-top:8px}
/* una sola cifra sobre la portada: a todo el ancho */
.kit-cifras:has(> :first-child:last-child){grid-template-columns:1fr}
.fp-act__chips{margin-top:8px}

/* --- el popup de lo pedido: ancho, compacto, pie fijo (07-sep) ------------ */
dialog.rd-dlg--campos{width:min(1500px,97vw);max-height:94vh}
.rd-dlg-cuerpo--campos{padding:12px 22px 14px}
.rd-dlg--campos .pa-picker{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
.rd-dlg--campos .pa-picker__sec{padding:4px 10px 8px}
.rd-dlg--campos .pa-picker__sec legend{font-size:var(--t-xs)}
.rd-dlg--campos .pa-picker__campos{gap:1px}
.rd-dlg--campos .pa-picker__campo{font-size:12px;padding:1px 0;gap:6px;line-height:1.3}
.rd-dlg--campos .pa-picker__campo input,.rd-dlg--campos .pa-picker__todo{width:13px;height:13px}
.rd-dlg--campos .pa-picker__campo--falta span::after{font-size:8.5px;padding:0 5px;margin-left:6px}
dialog.rd-dlg > footer.rd-dlg__pie{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:10px 22px 12px;border-top:1px solid var(--borde-hairline);background:var(--superficie)}
.rd-dlg__pie .rd-dlg__nota{flex:1 1 320px;min-width:0;min-height:38px;border:1px solid var(--borde);
  border-radius:8px;padding:7px 12px;font:inherit;font-size:var(--t-sm);background:var(--fondo);color:var(--texto)}
.rd-dlg__pie .rd-dlg__nota:focus{outline:none;border-color:var(--marca-500);box-shadow:0 0 0 3px var(--marca-050);background:var(--superficie)}
.pa-pedido{margin:0}
/* el aviso de cambios sin guardar */
dialog.pa-confirmar{width:min(440px,94vw)}
.pa-confirmar h3{margin:0 0 6px;font-size:var(--t-lg)}
.pa-confirmar .desc{margin:0}
.pa-confirmar .rd-pie{margin-top:16px;padding-top:0;border-top:0}
/* la ubicación con un botón, en la página pública */
.pa-gps{display:grid;gap:6px}
.pa-gps .kit-btn{justify-self:start}
.pa-gps [data-gps-estado]{margin:0}