/* Hoja de estilos de la aplicacion.
 *
 * PRIMERA PARTE: copia del prototipo aprobado (`docs/assets/css/lcr.css`),
 * referencia visual de direccion. **No se borra ni se sustituye.** Lo unico
 * que cambia son cuatro nombres de clase que en la aplicacion ya
 * significaban otra cosa:
 *
 *   .marca  ->  .marca-lateral
 *   .entrada  ->  .campo-texto
 *   .selector  ->  .campo-select
 *   .paso  ->  .paso-proto
 *
 * Se renombran en esta copia para no tocar el prototipo ni las plantillas
 * que ya existen.
 *
 * SEGUNDA PARTE: los componentes que solo existen en la aplicacion. Van
 * despues a proposito: ante igual especificidad, gana el de la aplicacion.
 */

/* ============================================================================
   GRC ABOGADOS — Sistema de diseño
   Paleta derivada por muestreo del Paquete de Inicio Técnico v1.0.
   Contraste verificado contra WCAG 2.1 AA. Ver sistema.html.

   REGLA DE ORO DEL COLOR
   - Sobre lienzo claro: texto en teal-600/700 y oro-700. NUNCA oro-500 (2.62:1).
   - Sobre shell oscuro: texto en teal-400/300 y oro-400/200. NUNCA teal-500 (3.98:1).
   - teal-500 y oro-500 son colores de RELLENO y decoración, no de texto sobre blanco.
   Los tokens semánticos de abajo ya resuelven esto: usa los semánticos, no los crudos.
   ========================================================================== */

/* ---------------------------------------------------------------- primitivas */
:root{
  /* Navy — del #001028 dominante del documento fuente */
  --navy-950:#060f1c;  --navy-900:#0d1b2e;  --navy-850:#122238;

  /* --------------------------------------------------------------- marca --
   * Los cinco colores oficiales del Kit de Marca v1, aprobados por dirección.
   * Se usan **solo** en superficies de marca: el logotipo, el fondo de la
   * cabecera y las piezas de identidad.
   *
   * No sustituyen a la paleta de interfaz de arriba, y es deliberado. El oro
   * y el turquesa de marca miden 1,95:1 y 2,51:1 sobre lienzo claro; como
   * color de texto incumplirían el mínimo AA de 4,5:1. En un logotipo eso da
   * igual —WCAG 2.1 exime expresamente a los logotipos— pero en un enlace o
   * en una etiqueta de estado, no. Los tonos de interfaz están medidos uno a
   * uno en core/tests_estilos.py y se quedan como están.
   */
  --lcr-navy: #03142e;
  --lcr-gold: #e8b13b;
  --lcr-teal: #00b7ad;
  --lcr-blanco: #ffffff;
  --lcr-hueso: #f7f9fc;

  --navy-800:#182b45;  --navy-700:#223a5c;  --navy-600:#2f4d75;

  /* Teal — del #008880 del documento fuente */
  --teal-700:#00655f;  --teal-600:#007a73;  --teal-500:#008880;
  --teal-400:#12a89e;  --teal-300:#4cc4bb;  --teal-200:#a5e2dd;  --teal-50:#e6f5f4;

  /* Oro — del #c89838 del documento fuente */
  --oro-800:#6d5216;   --oro-700:#8a6a1f;   --oro-600:#a67f28;
  --oro-500:#c89838;   --oro-400:#d9b05c;   --oro-200:#f0dcaa;   --oro-50:#faf3e2;

  /* Bordes de las bandas de aviso. Estaban escritos a mano dentro de las
     reglas; aqui tienen nombre para que la comprobacion de contraste los
     alcance como al resto. */
  --borde-rojo:#eccbc7;  --borde-oro:#e8d7ab;
  --borde-teal:#bfe2df;  --borde-azul:#cfdde3;


  /* Neutros azulados */
  --gris-700:#3d4a5c;  --gris-600:#55647a;  --gris-550:#5f6d82;
  --gris-500:#708095;  --gris-400:#8f9db0;  --gris-300:#b9c4d1;
  --gris-200:#dbe2ea;  --gris-100:#eef2f7;  --gris-50:#f6f8fb;

  /* Superficies del documento fuente */
  --crema:#f8f0e0;     --azul-palido:#eef4f6;  --verde-palido:#e8f0f0;

  /* Rojo — derivado, no existe en el documento fuente */
  --rojo-700:#822620;  --rojo-600:#a3312b;  --rojo-500:#c0392f;  --rojo-50:#fbeeec;

  --blanco:#ffffff;

  /* ------------------------------------------------ rediseño 18/10/2026 --
   * GRC Empresarial: azul predominante con acentos vino (orden del Director
   * Jurídico del 18/10/2026, §2.2). Los valores no los fijó nadie: se
   * ajustaron a las referencias elegidas y se midieron (core/tests_estilos.py).
   *   - azul-700 y azul-800: texto y enlaces sobre claro (9,4:1 y 12,3:1).
   *   - vino-700: texto y botón principal (10:1 con blanco).
   *   - azul-300, vino-300: acentos de texto sobre la barra oscura.
   *   - azul-500, vino-500, amarillo-400: rellenos y líneas, no texto.
   */
  --azul-950:#0a1b3d;  --azul-900:#0f2552;  --azul-800:#163170;  --azul-700:#1d428f;
  --azul-600:#2557b3;  --azul-500:#2f6ad6;  --azul-400:#5d8fe6;  --azul-300:#9dbcf2;
  --azul-100:#dde8fb;  --azul-50:#eef4fd;
  --vino-800:#5c1427;  --vino-700:#7d1d38;  --vino-600:#952443;  --vino-500:#ad3254;
  --vino-400:#cf5c7c;  --vino-300:#e596ab;  --vino-100:#f7dfe6;  --vino-50:#fcf1f4;
  --amarillo-100:#fff3c4;  --amarillo-400:#f3c33a;  --amarillo-600:#c79312;

  /* ------------------------------------------------------------- semánticos */
  /* Shell oscuro */
  --c-shell:            var(--navy-900);
  --c-shell-alto:       var(--navy-850);
  --c-shell-hueco:      var(--navy-950);
  --c-shell-fg:         var(--blanco);
  --c-shell-fg-tenue:   var(--gris-300);
  --c-shell-fg-debil:   var(--gris-400);
  --c-shell-acento:     var(--teal-400);
  --c-shell-acento-2:   var(--oro-400);
  --c-shell-borde:      rgba(255,255,255,.10);
  --c-shell-hover:      rgba(255,255,255,.06);

  /* Lienzo claro */
  --c-lienzo:           var(--gris-50);
  --c-superficie:       var(--blanco);
  --c-superficie-2:     var(--azul-palido);
  --c-superficie-3:     var(--verde-palido);
  --c-texto:            var(--navy-900);
  --c-texto-medio:      var(--gris-600);
  /* gris-500 daba 3.79:1 sobre el lienzo: por debajo del mínimo AA.
     gris-550 da 4.94 sobre lienzo y 5.25 sobre tarjeta. */
  --c-texto-tenue:      var(--gris-550);
  --c-borde:            var(--gris-200);
  --c-borde-fuerte:     var(--gris-300);

  /* Acentos sobre claro — versiones aptas para texto */
  --c-acento:           var(--teal-600);
  --c-acento-fuerte:    var(--teal-700);
  --c-acento-relleno:   var(--teal-500);
  --c-acento-suave:     var(--teal-50);
  --c-atencion:         var(--oro-700);
  --c-atencion-relleno: var(--oro-500);
  --c-atencion-suave:   var(--oro-50);
  --c-peligro:          var(--rojo-600);
  --c-peligro-suave:    var(--rojo-50);

  /* --------------------------------------------------------------- gráficos
     Serie categórica validada con el verificador de dataviz: las seis
     comprobaciones en PASS sobre superficie clara (banda de luminosidad, piso
     de croma, separación CVD, piso de visión normal y contraste >= 3:1).
     Son colores de MARCA DE DATOS. El texto nunca los usa: el texto lleva
     siempre los tokens de tinta. Se asignan en orden fijo, jamás en ciclo. */
  --g-1:#0d9d93;   /* teal   — serie 1 */
  --g-2:#c2851a;   /* oro    — serie 2 */
  --g-3:#4a7fbd;   /* azul   — serie 3 */
  --g-rejilla:var(--gris-200);
  --g-eje:var(--gris-300);

  /* Secuencial de una sola tinta, para magnitud (carga de trabajo) */
  --gs-1:#d7ede9; --gs-2:#9ed3cc; --gs-3:#5bb7ad; --gs-4:#1f9a90; --gs-5:#00726c;

  /* Estado — reservados, nunca reutilizados como «serie 4». Siempre con etiqueta. */
  --ge-ok:#0d9d93; --ge-aviso:#c2851a; --ge-grave:#c0392f; --ge-neutro:#8f9db0;

  /* ------------------------------------------------------------- tipografía */
  --f-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --t-3xl:1.75rem; --t-2xl:1.375rem; --t-xl:1.125rem; --t-lg:1rem;
  --t-md:.875rem;  --t-sm:.8125rem;  --t-xs:.75rem;   --t-2xs:.6875rem;

  --lh-tight:1.25; --lh-normal:1.5; --lh-loose:1.65;
  --w-normal:400; --w-medio:500; --w-semi:600; --w-bold:700;
  --ls-eyebrow:.09em; --ls-caps:.06em;

  /* --------------------------------------------------------------- espacio */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:20px;
  --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px;

  /* --------------------------------------------------------- forma y capas */
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px; --r-full:999px;

  --s-1:0 1px 2px rgba(13,27,46,.06);
  --s-2:0 1px 3px rgba(13,27,46,.10), 0 1px 2px rgba(13,27,46,.06);
  --s-3:0 4px 12px rgba(13,27,46,.10), 0 2px 4px rgba(13,27,46,.06);
  --s-4:0 12px 32px rgba(13,27,46,.16), 0 4px 8px rgba(13,27,46,.08);

  --z-shell:10; --z-sticky:20; --z-drawer:40; --z-modal:50; --z-tooltip:60;

  /* ------------------------------------------------------------- movimiento */
  --m-rapido:120ms; --m-medio:200ms; --m-lento:320ms;
  --m-curva:cubic-bezier(.4,0,.2,1);

  /* ----------------------------------------------------------- dimensiones */
  --w-sidebar:248px; --w-sidebar-min:64px; --h-topbar:56px; --w-drawer:520px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ================================================================== base === */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--c-lienzo); color:var(--c-texto);
  font-family:var(--f-sans); font-size:var(--t-md); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; line-height:var(--lh-tight); font-weight:var(--w-semi); }
p{ margin:0 0 var(--e-3); }
a{ color:var(--c-acento); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--c-acento-relleno);
  outline-offset:2px; border-radius:var(--r-sm);
}
.shell :focus-visible{ outline-color:var(--teal-300); }

.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:var(--e-2); top:-100px; z-index:var(--z-tooltip);
  background:var(--c-acento-fuerte); color:var(--blanco); padding:var(--e-2) var(--e-4);
  border-radius:var(--r-md); transition:top var(--m-rapido) var(--m-curva);
}
.saltar:focus{ top:var(--e-2); }

/* ================================================== armazón de aplicación === */
.app{
  display:grid;
  grid-template-columns:var(--w-sidebar) 1fr;
  grid-template-rows:var(--h-topbar) 1fr;
  grid-template-areas:"shell topbar" "shell canvas";
  min-height:100vh;
}
.app[data-sidebar="min"]{ grid-template-columns:var(--w-sidebar-min) 1fr; }

/* ------------------------------------------------------------------ shell -- */
.shell{
  grid-area:shell; background:var(--c-shell); color:var(--c-shell-fg);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  z-index:var(--z-shell); overflow:hidden;
}
.shell::before{                     /* motivo de puntos y líneas del documento */
  content:""; position:absolute; inset:auto 0 0 0; height:180px; opacity:.5;
  background-image:
    radial-gradient(circle at 12% 82%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 38% 88%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 66% 80%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 88% 90%, var(--oro-500) 0 2px, transparent 2px),
    linear-gradient(115deg, transparent 49.6%, rgba(18,168,158,.28) 49.6% 50.1%, transparent 50.1%),
    linear-gradient(115deg, transparent 66.6%, rgba(18,168,158,.18) 66.6% 67.1%, transparent 67.1%);
  pointer-events:none;
}
.shell > *{ position:relative; z-index:1; }

.marca-lateral{
  display:flex; align-items:center; gap:var(--e-3);
  height:var(--h-topbar); padding:0 var(--e-4); flex-shrink:0;
  border-bottom:1px solid var(--c-shell-borde);
}
/* El logotipo, cuadrado. La nota anterior explicaba por qué aquí iba el
   símbolo y no la banda horizontal de LCR; con una baldosa esa disyuntiva
   desapareció. */
.marca-lateral__logo{ flex-shrink:0; height:40px; width:40px; border-radius:6px; }
.marca-lateral__texto{ display:flex; flex-direction:column; line-height:1; }
.marca-lateral__sigla{ font-size:var(--t-lg); font-weight:var(--w-bold); letter-spacing:.02em; }
.marca-lateral__palabra{
  font-size:var(--t-2xs); font-weight:var(--w-semi); color:var(--c-shell-acento);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; margin-top:3px;
}
.app[data-sidebar="min"] .marca-lateral__texto{ display:none; }

.nav{ flex:1; overflow-y:auto; padding:var(--e-4) var(--e-2); }
.nav__grupo{ margin-bottom:var(--e-5); }
.nav__titulo{
  font-size:var(--t-2xs); font-weight:var(--w-semi); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--c-shell-fg-debil);
  padding:0 var(--e-3); margin-bottom:var(--e-2);
}
.app[data-sidebar="min"] .nav__titulo{ opacity:0; height:8px; overflow:hidden; }

.nav__item{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-2) var(--e-3); margin-bottom:2px;
  border-radius:var(--r-md); color:var(--c-shell-fg-tenue);
  font-size:var(--t-md); font-weight:var(--w-medio);
  text-decoration:none; position:relative; transition:background var(--m-rapido) var(--m-curva);
}
.nav__item:hover{ background:var(--c-shell-hover); color:var(--c-shell-fg); text-decoration:none; }
.nav__item[aria-current="page"]{ background:rgba(18,168,158,.14); color:var(--blanco); }
.nav__item[aria-current="page"]::before{
  content:""; position:absolute; left:calc(var(--e-2) * -1);
  top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 2px 2px 0; background:var(--c-shell-acento);
}
.nav__item svg{ flex-shrink:0; width:18px; height:18px; }
.nav__texto{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app[data-sidebar="min"] .nav__texto{ display:none; }

.nav__cuenta{
  flex-shrink:0; min-width:20px; text-align:center;
  font-size:var(--t-2xs); font-weight:var(--w-bold);
  padding:1px var(--e-1); border-radius:var(--r-full);
  background:var(--oro-500); color:var(--navy-900);
}
.nav__cuenta--tenue{ background:rgba(255,255,255,.14); color:var(--c-shell-fg-tenue); }
.app[data-sidebar="min"] .nav__cuenta{ display:none; }

.shell__pie{
  flex-shrink:0; padding:var(--e-3) var(--e-4);
  border-top:1px solid var(--c-shell-borde);
  font-size:var(--t-2xs); color:var(--c-shell-fg-debil);
}
.app[data-sidebar="min"] .shell__pie{ display:none; }

/* ----------------------------------------------------------------- topbar -- */
.topbar{
  grid-area:topbar; background:var(--c-superficie);
  border-bottom:1px solid var(--c-borde);
  display:flex; align-items:center; gap:var(--e-4);
  padding:0 var(--e-6); position:sticky; top:0; z-index:var(--z-sticky);
}
.topbar__izq{ display:flex; align-items:center; gap:var(--e-3); min-width:0; }
.topbar__der{ margin-left:auto; display:flex; align-items:center; gap:var(--e-2); }

.icono-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid transparent; background:transparent;
  border-radius:var(--r-md); color:var(--c-texto-medio); cursor:pointer;
  transition:background var(--m-rapido) var(--m-curva);
}
.icono-btn:hover{ background:var(--gris-100); color:var(--c-texto); }

/* Selector de empresa — hace visible el aislamiento multiempresa */
.empresa-sel{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  background:var(--c-superficie-2); border:1px solid var(--c-borde);
  border-radius:var(--r-full); cursor:pointer; max-width:280px;
  transition:border-color var(--m-rapido) var(--m-curva);
}
.empresa-sel:hover{ border-color:var(--c-acento-relleno); }
.empresa-sel__sigla{
  flex-shrink:0; width:26px; height:26px; border-radius:var(--r-full);
  background:var(--navy-900); color:var(--blanco);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-2xs); font-weight:var(--w-bold);
}
.empresa-sel__nombre{
  font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--c-texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.avatar{
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--teal-600); color:var(--blanco);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-xs); font-weight:var(--w-bold); flex-shrink:0;
}
.avatar--oro{ background:var(--oro-700); }
.avatar--navy{ background:var(--navy-700); }

/* ----------------------------------------------------------------- canvas -- */
.canvas{ grid-area:canvas; padding:var(--e-6); min-width:0; }
.canvas--ancho{ padding:var(--e-6) var(--e-8); }

.pagina-cab{ margin-bottom:var(--e-6); }
.pagina-cab__fila{ display:flex; align-items:flex-start; gap:var(--e-4); flex-wrap:wrap; }
.eyebrow{
  font-size:var(--t-2xs); font-weight:var(--w-semi); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--c-atencion); margin-bottom:var(--e-2);
}
.pagina-titulo{ font-size:var(--t-2xl); font-weight:var(--w-bold); letter-spacing:-.01em; }
.pagina-sub{ color:var(--c-texto-medio); font-size:var(--t-md); margin-top:var(--e-1); }
.pagina-cab__acciones{ margin-left:auto; display:flex; gap:var(--e-2); flex-shrink:0; }

.migas{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--c-texto-tenue); margin-bottom:var(--e-3);
}
.migas a{ color:var(--c-texto-medio); }
.migas__sep{ color:var(--c-borde-fuerte); }

/* ================================================================ rejilla === */
.rej{ display:grid; gap:var(--e-4); }
.rej--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rej--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rej--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rej--pral{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
/* Fila de indicadores asimétrica: uno domina, tres acompañan */
.rej--indicadores{ grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); align-items:stretch; }
.rej--lateral{ grid-template-columns:300px minmax(0,1fr); align-items:start; }
.pila{ display:flex; flex-direction:column; gap:var(--e-4); }
.fila{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }

/* ================================================================ tarjeta === */
.card{
  background:var(--c-superficie); border:1px solid var(--c-borde);
  border-radius:var(--r-lg); box-shadow:var(--s-1); overflow:hidden;
}
.card--plana{ box-shadow:none; }
.card--acento{ border-top:3px solid var(--c-acento-relleno); }
.card--atencion{ border-top:3px solid var(--c-atencion-relleno); }
.card__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-4) var(--e-5); border-bottom:1px solid var(--c-borde);
}
.card__titulo{ font-size:var(--t-lg); font-weight:var(--w-semi); }
.card__sub{ font-size:var(--t-sm); color:var(--c-texto-tenue); margin-top:2px; }
.card__acciones{ margin-left:auto; display:flex; gap:var(--e-2); }
.card__cuerpo{ padding:var(--e-5); }
.card__cuerpo--ajustado{ padding:0; }
.card__pie{
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--c-borde);
  background:var(--gris-50); font-size:var(--t-sm); color:var(--c-texto-tenue);
}

/* Cabecera oscura, eco de la portada del documento */
.card__cab--oscura{
  background:var(--navy-900); color:var(--blanco); border-bottom:0; position:relative; overflow:hidden;
}
.card__cab--oscura .card__titulo{ color:var(--blanco); }
.card__cab--oscura .card__sub{ color:var(--gris-300); }
.card__cab--oscura::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:180px; opacity:.55;
  background-image:
    radial-gradient(circle at 20% 30%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 62%, var(--oro-500) 0 2px, transparent 2px),
    linear-gradient(115deg, transparent 49.6%, rgba(18,168,158,.30) 49.6% 50.1%, transparent 50.1%);
  pointer-events:none;
}

/* ============================================================== indicador === */
.kpi{
  background:var(--c-superficie); border:1px solid var(--c-borde);
  border-radius:var(--r-lg); padding:var(--e-4) var(--e-5);
  display:flex; flex-direction:column; gap:var(--e-2); position:relative; overflow:hidden;
}
.kpi__et{
  font-size:var(--t-2xs); font-weight:var(--w-semi); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--c-texto-tenue);
  /* Dos líneas reservadas: si un rótulo salta de línea, su cifra no puede
     hundirse respecto a las vecinas — son elementos que el ojo compara. */
  min-height:2.6em;
}
.kpi--destacado .kpi__et{ min-height:0; }
.kpi__fila{ display:flex; align-items:baseline; gap:var(--e-2); }
.kpi__valor{
  font-size:var(--t-3xl); font-weight:var(--w-bold);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kpi__unidad{ font-size:var(--t-md); color:var(--c-texto-tenue); font-weight:var(--w-medio); }
.kpi__nota{ font-size:var(--t-xs); color:var(--c-texto-medio); }
.kpi--acento .kpi__valor{ color:var(--c-acento-fuerte); }
.kpi--atencion .kpi__valor{ color:var(--c-atencion); }
.kpi--peligro .kpi__valor{ color:var(--c-peligro); }
.kpi__chispa{ margin-top:auto; height:32px; }

/* ---------- Indicador destacado --------------------------------------------
   Ancla visual de la pantalla. Fondo oscuro con el motivo del documento, para
   que una sola cifra domine sin recurrir a color estridente. */
.kpi--destacado{
  background:var(--navy-900); border-color:var(--navy-900); color:var(--blanco);
  padding:var(--e-5); gap:var(--e-3);
}
.kpi--destacado::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:170px; opacity:.5;
  background-image:
    radial-gradient(circle at 24% 22%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 58%, var(--oro-500) 0 2px, transparent 2px),
    radial-gradient(circle at 40% 84%, var(--oro-500) 0 2px, transparent 2px),
    linear-gradient(115deg, transparent 49.6%, rgba(18,168,158,.32) 49.6% 50.1%, transparent 50.1%),
    linear-gradient(115deg, transparent 71.6%, rgba(18,168,158,.20) 71.6% 72.1%, transparent 72.1%);
  pointer-events:none;
}
.kpi--destacado > *{ position:relative; z-index:1; }
.kpi--destacado .kpi__et{ color:var(--oro-400); }
.kpi--destacado .kpi__valor{ color:var(--blanco); font-size:2.5rem; }
.kpi--destacado .kpi__unidad,
.kpi--destacado .kpi__nota{ color:var(--gris-300); }

/* Desglose: convierte una cifra suelta en algo accionable */
.desglose{ display:flex; flex-direction:column; gap:var(--e-2); margin-top:var(--e-1); }
.desglose__it{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--e-3);
  padding:var(--e-2) 0; border-top:1px solid rgba(255,255,255,.10);
  color:inherit; text-decoration:none; font-size:var(--t-sm);
}
.desglose__it:hover{ text-decoration:none; }
.desglose__it:hover .desglose__que{ text-decoration:underline; }
.desglose__n{
  min-width:22px; height:22px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-xs); font-weight:var(--w-bold);
  background:rgba(255,255,255,.12); color:var(--blanco); font-variant-numeric:tabular-nums;
}
.desglose__n--urgente{ background:var(--oro-500); color:var(--navy-900); }
.desglose__que{ color:var(--gris-200); }
.desglose__cuando{ font-size:var(--t-xs); color:var(--gris-400); white-space:nowrap; }

/* Sobre lienzo claro */
.desglose--claro .desglose__it{ border-top-color:var(--c-borde); }
.desglose--claro .desglose__n{ background:var(--gris-100); color:var(--c-texto); }
.desglose--claro .desglose__que{ color:var(--c-texto-medio); }
.desglose--claro .desglose__cuando{ color:var(--c-texto-tenue); }

/* ---------- Medidor de composición -----------------------------------------
   Sustituye a la línea de tendencia: dice de qué se compone la cifra, que es
   accionable, en vez de cómo evolucionó, que no lo es. Separador de 2 px del
   color de superficie entre segmentos, según la guía de visualización. */
.medidor{
  display:flex; height:8px; border-radius:var(--r-full); overflow:hidden;
  background:var(--gris-100); margin-top:auto;
}
/* La leyenda ocupa una, dos o tres líneas según el caso. Reservando su alto
   las barras quedan alineadas entre tarjetas, que es lo que permite
   compararlas de un vistazo. */
.kpi__nota{ min-height:2.8em; }
.medidor-pie{ min-height:2.4em; align-content:flex-start; }
.medidor__seg{ height:100%; box-shadow:2px 0 0 0 var(--c-superficie); }
.medidor__seg:last-child{ box-shadow:none; }
.kpi--destacado .medidor{ background:rgba(255,255,255,.14); }
.kpi--destacado .medidor__seg{ box-shadow:2px 0 0 0 var(--navy-900); }
.kpi--destacado .medidor__seg:last-child{ box-shadow:none; }

.medidor-pie{
  display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-3);
  margin-top:var(--e-2); font-size:var(--t-2xs); color:var(--c-texto-tenue);
}
.kpi--destacado .medidor-pie{ color:var(--gris-300); }
.medidor-pie__it{ display:inline-flex; align-items:center; gap:5px; }
.medidor-pie__marca{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }

/* ================================================================== chips === */
.chip{
  display:inline-flex; align-items:center; gap:var(--e-1);
  padding:3px var(--e-2); border-radius:var(--r-full);
  font-size:var(--t-2xs); font-weight:var(--w-semi);
  letter-spacing:.02em; white-space:nowrap; line-height:1.4;
}
.chip__punto{ width:6px; height:6px; border-radius:var(--r-full); background:currentColor; flex-shrink:0; }

/* Contrastes verificados: ver sistema.html */
.chip--curso    { background:var(--teal-50);  color:var(--teal-700); }
.chip--atencion { background:var(--oro-50);   color:var(--oro-800); }
.chip--bloqueo  { background:var(--rojo-50);  color:var(--rojo-600); }
.chip--neutro   { background:var(--gris-100); color:var(--gris-700); }
.chip--tenue    { background:var(--gris-100); color:var(--gris-600); }
.chip--info     { background:var(--azul-palido); color:var(--navy-700); }

.chip--solido-ok  { background:var(--teal-600); color:var(--blanco); }
.chip--solido-at  { background:var(--oro-500);  color:var(--navy-900); }
.chip--solido-mal { background:var(--rojo-600); color:var(--blanco); }
.chip--solido-nav { background:var(--navy-800); color:var(--blanco); }

.chip--lg{ font-size:var(--t-xs); padding:var(--e-1) var(--e-3); }

/* Insignia de facultad especial */
.facultad{
  display:inline-flex; align-items:center; gap:var(--e-1);
  padding:2px var(--e-2); border-radius:var(--r-sm);
  border:1px dashed var(--oro-600); background:var(--oro-50); color:var(--oro-800);
  font-size:var(--t-2xs); font-weight:var(--w-semi);
}

/* ================================================================ botones === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  padding:var(--e-2) var(--e-4); border-radius:var(--r-md);
  border:1px solid transparent; background:transparent;
  font-size:var(--t-md); font-weight:var(--w-semi); cursor:pointer;
  white-space:nowrap; transition:background var(--m-rapido) var(--m-curva),
                                 border-color var(--m-rapido) var(--m-curva);
}
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn--pral{ background:var(--teal-600); color:var(--blanco); }
.btn--pral:hover{ background:var(--teal-700); }
.btn--sec{ background:var(--c-superficie); border-color:var(--c-borde-fuerte); color:var(--c-texto); }
.btn--sec:hover{ background:var(--gris-100); }
.btn--fantasma{ color:var(--c-texto-medio); }
.btn--fantasma:hover{ background:var(--gris-100); color:var(--c-texto); }
.btn--peligro{ background:var(--rojo-600); color:var(--blanco); }
.btn--peligro:hover{ background:var(--rojo-700); }
.btn--sm{ padding:var(--e-1) var(--e-3); font-size:var(--t-sm); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* =============================================================== controles == */
.campo{ display:flex; flex-direction:column; gap:var(--e-1); }
.campo__et{ font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--c-texto-medio); }
.campo-texto,.campo-select{
  padding:var(--e-2) var(--e-3); border:1px solid var(--c-borde-fuerte);
  border-radius:var(--r-md); background:var(--c-superficie);
  font-family:inherit; font-size:var(--t-md); color:var(--c-texto); width:100%;
}
.campo-texto::placeholder{ color:var(--c-texto-tenue); }
.buscador{ position:relative; flex:1; max-width:380px; }
.buscador .campo-texto{ padding-left:var(--e-8); }
.buscador svg{
  position:absolute; left:var(--e-3); top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--c-texto-tenue); pointer-events:none;
}

.filtros{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--c-borde); background:var(--gris-50);
}
.filtro{
  display:inline-flex; align-items:center; gap:var(--e-1); min-height:32px;
  padding:var(--e-1) var(--e-3); border:1px solid var(--c-borde-fuerte);
  border-radius:var(--r-full); background:var(--c-superficie);
  font-size:var(--t-sm); font-weight:var(--w-medio); color:var(--c-texto-medio); cursor:pointer;
  transition:all var(--m-rapido) var(--m-curva);
}
.filtro:hover{ border-color:var(--c-acento-relleno); color:var(--c-texto); }
.filtro[aria-pressed="true"]{
  background:var(--navy-900); border-color:var(--navy-900); color:var(--blanco);
}

/* ================================================================= tablas === */
.tabla-env{ overflow-x:auto; }
/* Región desplazable alcanzable por teclado: el JS le pone tabindex y rótulo */
.tabla-env:focus-visible{ outline:2px solid var(--c-acento-relleno); outline-offset:-2px; }
.tabla{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tabla th{
  text-align:left; padding:var(--e-3) var(--e-4);
  background:var(--navy-900); color:var(--blanco);
  font-size:var(--t-2xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-caps); text-transform:uppercase; white-space:nowrap;
  position:sticky; top:0;
}
.tabla th:first-child{ padding-left:var(--e-5); }
.tabla th:last-child{ padding-right:var(--e-5); }
.tabla td{
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--c-borde); vertical-align:middle;
}
.tabla td:first-child{ padding-left:var(--e-5); }
.tabla td:last-child{ padding-right:var(--e-5); }
.tabla tbody tr{ transition:background var(--m-rapido) var(--m-curva); }
.tabla tbody tr:hover{ background:var(--gris-50); }
.tabla tbody tr[data-sel="1"]{ background:var(--teal-50); }
.tabla--clic tbody tr{ cursor:pointer; }
.tabla__num{ text-align:right; font-variant-numeric:tabular-nums; }
.tabla__id{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--c-texto-tenue); white-space:nowrap; }
.tabla__pral{ font-weight:var(--w-semi); color:var(--c-texto); }
/* El JS convierte el título de la fila en un enlace real, para que la fila
   clicable también sea alcanzable con teclado. Debe verse igual que antes. */
.tabla__pral > a{ color:inherit; text-decoration:none; }
.tabla__pral > a:hover{ text-decoration:underline; text-decoration-color:var(--c-acento-relleno); }
.tabla__meta{ font-size:var(--t-xs); color:var(--c-texto-tenue); margin-top:2px; }
.tabla--compacta td{ padding:var(--e-2) var(--e-4); }

.persona{ display:flex; align-items:center; gap:var(--e-2); min-width:0; }
.persona .avatar{ width:26px; height:26px; font-size:var(--t-2xs); }

/* ==================================================== stepper — 9 pasos ==== */
/* Los nueve pasos deben verse SIEMPRE completos: si el riel se corta en el
   paso bloqueado, el flujo se lee como si terminara ahí, que es justo el
   mensaje contrario. Por eso encogen en vez de desbordar. */
.stepper{ display:flex; align-items:stretch; padding:var(--e-2) 0; gap:2px; }
.paso-proto{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--e-2);
  padding:var(--e-3) 2px; text-align:center;
  border:0; background:transparent; cursor:pointer; border-radius:var(--r-md);
  transition:background var(--m-rapido) var(--m-curva);
}
/* Palabras como «Información» no tienen dónde partir: se deja que el
   guionado las corte por sílaba en vez de romperlas a mitad de letra. */
.paso-proto__et{ hyphens:auto; }
.paso-proto:hover{ background:var(--gris-50); }
.paso-proto__linea{
  position:absolute; top:calc(var(--e-3) + 14px); left:-50%; width:100%; height:2px;
  background:var(--c-borde-fuerte); z-index:0;
}
.paso-proto:first-child .paso-proto__linea{ display:none; }
.paso-proto__disco{
  position:relative; z-index:1;
  width:28px; height:28px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-xs); font-weight:var(--w-bold);
  background:var(--c-superficie); border:2px solid var(--c-borde-fuerte); color:var(--c-texto-tenue);
}
.paso-proto__et{ font-size:var(--t-2xs); font-weight:var(--w-semi); color:var(--c-texto-tenue); line-height:1.3; }
/* Con poco ancho por paso, encoge la etiqueta antes que romper la palabra */
@media (max-width:1100px){
  .paso-proto__et{ font-size:10px; letter-spacing:-.01em; }
}
@media (max-width:820px){
  .paso-proto__et{ font-size:9px; }
  .paso-proto__disco{ width:24px; height:24px; }
  .paso-proto__linea{ top:calc(var(--e-3) + 12px); }
}

.paso-proto[data-estado="hecho"] .paso-proto__disco{ background:var(--teal-600); border-color:var(--teal-600); color:var(--blanco); }
.paso-proto[data-estado="hecho"] .paso-proto__et{ color:var(--c-texto-medio); }
.paso-proto[data-estado="hecho"] + .paso-proto .paso-proto__linea{ background:var(--teal-500); }
.paso-proto[data-estado="actual"] .paso-proto__disco{
  background:var(--oro-500); border-color:var(--oro-500); color:var(--navy-900);
  box-shadow:0 0 0 4px var(--oro-50);
}
.paso-proto[data-estado="actual"] .paso-proto__et{ color:var(--oro-800); font-weight:var(--w-bold); }
.paso-proto[data-estado="bloqueado"] .paso-proto__disco{ background:var(--rojo-600); border-color:var(--rojo-600); color:var(--blanco); }
.paso-proto[data-estado="bloqueado"] .paso-proto__et{ color:var(--rojo-600); font-weight:var(--w-bold); }
.paso-proto[data-estado="omitido"] .paso-proto__disco{ border-style:dashed; opacity:.55; }
.paso-proto[data-estado="omitido"] .paso-proto__et{ opacity:.55; }

/* ======================================= responsable y próxima acción ====== */
.responsable{
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
  padding:var(--e-4) var(--e-5); background:var(--c-superficie-2);
  border:1px solid var(--c-borde); border-radius:var(--r-lg);
}
.responsable__bloque{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.responsable__et{
  font-size:var(--t-2xs); font-weight:var(--w-semi); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--c-texto-tenue);
}
.responsable__val{ font-size:var(--t-md); font-weight:var(--w-semi); }
.responsable__sep{ width:1px; align-self:stretch; background:var(--c-borde-fuerte); }

/* ============================================================ banda aviso == */
.banda{
  display:flex; align-items:flex-start; gap:var(--e-3);
  padding:var(--e-4) var(--e-5); border-radius:var(--r-lg);
  border:1px solid var(--c-borde); background:var(--c-superficie);
}
.banda__icono{ flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.banda__cuerpo{ flex:1; min-width:0; }
.banda__titulo{ font-weight:var(--w-semi); margin-bottom:var(--e-1); }
.banda__texto{ font-size:var(--t-sm); color:var(--c-texto-medio); }
.banda--bloqueo{ background:var(--rojo-50); border-color:var(--borde-rojo); border-left:3px solid var(--rojo-600); }
.banda--bloqueo .banda__titulo,.banda--bloqueo .banda__icono{ color:var(--rojo-600); }
.banda--atencion{ background:var(--oro-50); border-color:var(--borde-oro); border-left:3px solid var(--oro-500); }
.banda--atencion .banda__titulo,.banda--atencion .banda__icono{ color:var(--oro-800); }
.banda--ok{ background:var(--teal-50); border-color:var(--borde-teal); border-left:3px solid var(--teal-500); }
.banda--ok .banda__titulo,.banda--ok .banda__icono{ color:var(--teal-700); }
.banda--info{ background:var(--azul-palido); border-color:var(--borde-azul); border-left:3px solid var(--navy-700); }
.banda--info .banda__titulo,.banda--info .banda__icono{ color:var(--navy-700); }

/* ============================================================== cronología = */
.crono{ list-style:none; margin:0; padding:0; position:relative; }
.crono::before{
  content:""; position:absolute; left:15px; top:var(--e-2); bottom:var(--e-2);
  width:2px; background:var(--c-borde);
}
.crono__it{ position:relative; padding:0 0 var(--e-5) var(--e-10); }
.crono__it:last-child{ padding-bottom:0; }
.crono__disco{
  position:absolute; left:0; top:0; z-index:1;
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--c-superficie); border:2px solid var(--c-borde-fuerte);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-texto-tenue);
}
.crono__disco svg{ width:15px; height:15px; }
.crono__it[data-tipo="ok"]      .crono__disco{ border-color:var(--teal-500);  color:var(--teal-700); background:var(--teal-50); }
.crono__it[data-tipo="atencion"] .crono__disco{ border-color:var(--oro-500);  color:var(--oro-800); background:var(--oro-50); }
.crono__it[data-tipo="bloqueo"]  .crono__disco{ border-color:var(--rojo-600); color:var(--rojo-600); background:var(--rojo-50); }
.crono__cab{ display:flex; align-items:baseline; gap:var(--e-2); flex-wrap:wrap; margin-bottom:2px; }
.crono__titulo{ font-weight:var(--w-semi); font-size:var(--t-md); }
.crono__hora{ font-size:var(--t-xs); color:var(--c-texto-tenue); font-variant-numeric:tabular-nums; }
.crono__texto{ font-size:var(--t-sm); color:var(--c-texto-medio); }
.crono__meta{
  display:flex; gap:var(--e-3); flex-wrap:wrap; margin-top:var(--e-2);
  font-size:var(--t-xs); color:var(--c-texto-tenue);
}
.crono__meta b{ color:var(--c-texto-medio); font-weight:var(--w-semi); }

/* =============================================================== pestañas == */
.tabs{ display:flex; gap:var(--e-1); border-bottom:1px solid var(--c-borde); padding:0 var(--e-5); overflow-x:auto; }
.tab{
  padding:var(--e-3) var(--e-3); border:0; background:transparent; cursor:pointer;
  font-size:var(--t-md); font-weight:var(--w-medio); color:var(--c-texto-tenue);
  border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px;
  transition:color var(--m-rapido) var(--m-curva);
}
.tab:hover{ color:var(--c-texto); }
.tab[aria-selected="true"]{ color:var(--c-acento-fuerte); border-bottom-color:var(--c-acento-relleno); font-weight:var(--w-semi); }
.tab__cuenta{
  margin-left:var(--e-1); padding:1px 5px; border-radius:var(--r-full);
  background:var(--gris-100); color:var(--c-texto-tenue); font-size:var(--t-2xs); font-weight:var(--w-bold);
}
.tab[aria-selected="true"] .tab__cuenta{ background:var(--teal-50); color:var(--teal-700); }
.panel[hidden]{ display:none; }

/* ================================================================= drawer == */
.velo{
  position:fixed; inset:0; background:rgba(6,15,28,.45);
  opacity:0; pointer-events:none; transition:opacity var(--m-medio) var(--m-curva);
  z-index:var(--z-drawer);
}
.velo[data-abierto="1"]{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(var(--w-drawer),100vw);
  background:var(--c-superficie); box-shadow:var(--s-4);
  transform:translateX(100%);
  /* visibility saca del orden de tabulación lo que está fuera de pantalla:
     sin esto, los controles del drawer cerrado siguen siendo enfocables */
  visibility:hidden;
  transition:transform var(--m-lento) var(--m-curva),
             visibility 0s linear var(--m-lento);
  z-index:calc(var(--z-drawer) + 1); display:flex; flex-direction:column;
}
.drawer[data-abierto="1"]{
  transform:translateX(0); visibility:visible;
  transition:transform var(--m-lento) var(--m-curva), visibility 0s;
}
.drawer__cab{
  padding:var(--e-4) var(--e-5); border-bottom:1px solid var(--c-borde);
  display:flex; align-items:flex-start; gap:var(--e-3); flex-shrink:0;
}
.drawer__cuerpo{ flex:1; overflow-y:auto; padding:var(--e-5); }
.drawer__pie{
  padding:var(--e-4) var(--e-5); border-top:1px solid var(--c-borde);
  background:var(--gris-50); display:flex; gap:var(--e-2); flex-shrink:0;
}

/* ================================================= lista de definiciones === */
.defs{ display:grid; grid-template-columns:auto 1fr; gap:var(--e-3) var(--e-5); margin:0; font-size:var(--t-sm); }
.defs dt{ color:var(--c-texto-tenue); font-weight:var(--w-medio); white-space:nowrap; }
.defs dd{ margin:0; font-weight:var(--w-medio); }

/* ====================================== eje doble de versión documental ==== */
.versiones{ display:flex; flex-direction:column; gap:var(--e-2); }
.version{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); border:1px solid var(--c-borde);
  border-radius:var(--r-md); background:var(--c-superficie);
}
.version[data-vigencia="sustituido"],.version[data-vigencia="anulado"]{ background:var(--gris-50); opacity:.75; }
.version[data-vigencia="anulado"] .version__num{ text-decoration:line-through; }
.version[data-vigencia="vigente"]{ border-left:3px solid var(--teal-500); }
.version__num{
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:var(--w-bold);
  padding:2px var(--e-2); background:var(--gris-100); border-radius:var(--r-sm);
}
.version__meta{ font-size:var(--t-xs); color:var(--c-texto-tenue); }

/* ====================================== desglose de rubros de liquidación == */
.rubro{ border-bottom:1px solid var(--c-borde); }
.rubro__cab{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:var(--e-3);
  width:100%; padding:var(--e-3) var(--e-5); border:0; background:transparent;
  cursor:pointer; text-align:left; font-size:var(--t-md);
}
.rubro__cab:hover{ background:var(--gris-50); }
.rubro__flecha{ transition:transform var(--m-rapido) var(--m-curva); color:var(--c-texto-tenue); }
.rubro[data-abierto="1"] .rubro__flecha{ transform:rotate(90deg); }
.rubro__monto{ font-variant-numeric:tabular-nums; font-weight:var(--w-semi); }
.rubro__detalle{ padding:0 var(--e-5) var(--e-4) calc(var(--e-5) + 32px); background:var(--gris-50); }
.rubro[data-abierto="0"] .rubro__detalle{ display:none; }
.formula{
  font-family:var(--f-mono); font-size:var(--t-xs); padding:var(--e-3);
  background:var(--navy-900); color:var(--teal-300); border-radius:var(--r-md);
  overflow-x:auto; margin-bottom:var(--e-3);
}
.rubro--ajuste{ background:var(--oro-50); }
.rubro--ajuste .rubro__monto{ color:var(--oro-800); }

.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-4);
  padding:var(--e-4) var(--e-5); background:var(--navy-900); color:var(--blanco);
}
.total__et{ font-size:var(--t-2xs); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gris-300); }
.total__val{ font-size:var(--t-2xl); font-weight:var(--w-bold); font-variant-numeric:tabular-nums; }

/* ========================================== matriz de roles y facultades === */
.matriz{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.matriz th,.matriz td{ border:1px solid var(--c-borde); padding:var(--e-2) var(--e-3); text-align:center; }
.matriz thead th{
  background:var(--navy-900); color:var(--blanco); font-size:var(--t-2xs);
  font-weight:var(--w-semi); vertical-align:bottom; line-height:1.3;
}
.matriz tbody th{
  text-align:left; background:var(--gris-50); font-weight:var(--w-semi);
  color:var(--c-texto); white-space:nowrap; position:sticky; left:0;
}
.matriz td[data-v="si"]{ background:var(--teal-50); color:var(--teal-700); font-weight:var(--w-bold); }
.matriz td[data-v="facultad"]{ background:var(--oro-50); color:var(--oro-800); font-weight:var(--w-bold); }
/* En una matriz de facultades la negación es el dato decisivo: debe leerse.
   gris-400 daba 2.59:1. */
.matriz td[data-v="no"]{ color:var(--c-texto-tenue); }

/* =============================================================== gráficos == */
/* Marcas finas, extremos redondeados 4px, líneas 2px, separador de 2px del
   color de superficie entre rellenos contiguos. Rejilla y ejes recesivos. */
.chispa{ display:block; width:100%; height:32px; overflow:visible; }
.chispa__linea{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chispa__area{ opacity:.12; }
.chispa__fin{ r:3.5; stroke:var(--c-superficie); stroke-width:2; }

.barras{ display:flex; flex-direction:column; gap:var(--e-3); }
.barra{ display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:var(--e-3); }
.barra__et{ font-size:var(--t-sm); font-weight:var(--w-medio); overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap; }
.barra__pista{ height:18px; background:var(--gris-100); border-radius:var(--r-sm); overflow:hidden; display:flex; }
.barra__seg{ height:100%; box-shadow:2px 0 0 0 var(--c-superficie); }  /* separador de 2px */
.barra__seg:last-child{ box-shadow:none; }
.barra__seg:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
.barra__seg:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
.barra__val{ font-size:var(--t-sm); font-variant-numeric:tabular-nums;
             color:var(--c-texto-medio); min-width:34px; text-align:right; }

/* Leyenda — siempre presente con dos o más series; identidad nunca solo por color */
.leyenda{ display:flex; gap:var(--e-4); flex-wrap:wrap; font-size:var(--t-xs); color:var(--c-texto-medio); }
.leyenda__it{ display:inline-flex; align-items:center; gap:var(--e-2); }
.leyenda__marca{ width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ============================ modo cliente y capacidades proyectadas ======
   El prototipo se enseña a un cliente. Los enlaces técnicos y la
   documentación de ingeniería siguen accesibles por URL, pero no aparecen en
   la navegación patronal. */
.solo-equipo{ display:none !important; }
body[data-modo="equipo"] .solo-equipo{ display:revert !important; }
body[data-modo="equipo"] .nav__item.solo-equipo,
body[data-modo="equipo"] a.solo-equipo{ display:flex !important; }

/* Distingue lo construido de lo previsto. Honestidad comercial: la capacidad
   se enseña, pero no se presenta como compromiso cerrado. */
.capacidad-proyectada{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px var(--e-2); border-radius:var(--r-sm);
  border:1px dashed var(--navy-600); background:var(--azul-palido);
  color:var(--navy-700); font-size:var(--t-2xs); font-weight:var(--w-semi);
  letter-spacing:.02em; white-space:nowrap;
}
.capacidad-proyectada::before{
  content:""; width:6px; height:6px; border-radius:var(--r-full);
  border:1.5px solid currentColor; flex-shrink:0;
}
.card--proyectada{ border-style:dashed; border-color:var(--navy-600); background:var(--gris-50); }
.card--proyectada .card__cab{ border-bottom-style:dashed; }

/* ---------- Ayuda ampliada -------------------------------------------------
   El portal del patrono debe ser breve. Lo que explica el porqué de una regla
   se repliega aquí en vez de ocupar la vista principal. */
details.ayuda-ampliada{
  border:1px solid var(--c-borde); border-radius:var(--r-md);
  background:var(--gris-50); margin:var(--e-3) 0;
}
details.ayuda-ampliada > summary{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-2) var(--e-4); cursor:pointer; list-style:none;
  font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--c-acento-fuerte);
}
details.ayuda-ampliada > summary::-webkit-details-marker{ display:none; }
details.ayuda-ampliada > summary::before{
  content:""; width:0; height:0; flex-shrink:0;
  border-left:5px solid currentColor; border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform var(--m-rapido) var(--m-curva);
}
details.ayuda-ampliada[open] > summary::before{ transform:rotate(90deg); }
details.ayuda-ampliada > summary:hover{ background:var(--gris-100); border-radius:var(--r-md); }
.ayuda-ampliada__cuerpo{
  padding:0 var(--e-4) var(--e-4) calc(var(--e-4) + 13px);
  font-size:var(--t-sm); color:var(--c-texto-medio);
}
.ayuda-ampliada__cuerpo > :last-child{ margin-bottom:0; }

/* ---------- Etapas del patrono --------------------------------------------
   Cinco etapas visibles agrupan los nueve pasos internos. El detalle completo
   vive tras «Ver trazabilidad completa». */
.etapas{
  display:flex; align-items:stretch; gap:var(--e-1);
  margin:0; padding:0; list-style:none;   /* suele usarse sobre <ol> */
}
.etapa{
  flex:1 1 0; min-width:0; position:relative; text-align:center;
  padding:var(--e-3) var(--e-2) var(--e-3);
  border-top:3px solid var(--c-borde-fuerte);
  display:flex; flex-direction:column; gap:2px;
}
.etapa__n{
  font-size:var(--t-2xs); font-weight:var(--w-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--c-texto-tenue);
}
.etapa__et{ font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--c-texto-tenue); line-height:1.3; }
.etapa[data-estado="hecha"]{ border-top-color:var(--teal-500); }
.etapa[data-estado="hecha"] .etapa__n,
.etapa[data-estado="hecha"] .etapa__et{ color:var(--c-texto-medio); }
.etapa[data-estado="actual"]{ border-top-color:var(--oro-500); background:var(--oro-50); border-radius:0 0 var(--r-md) var(--r-md); }
.etapa[data-estado="actual"] .etapa__n{ color:var(--oro-800); }
.etapa[data-estado="actual"] .etapa__et{ color:var(--oro-800); font-weight:var(--w-bold); }
.etapa[data-estado="pendiente"] .etapa__et{ color:var(--c-texto-tenue); }
.etapa__nota{ font-size:var(--t-2xs); color:var(--c-texto-tenue); margin-top:2px; }

@media (max-width:680px){
  .etapas{ flex-wrap:wrap; }
  .etapa{ flex:1 1 45%; }
}

/* ================================================================= varios == */
.vacio{ padding:var(--e-12) var(--e-5); text-align:center; color:var(--c-texto-tenue); }
.vacio__icono{ width:40px; height:40px; margin:0 auto var(--e-3); color:var(--c-borde-fuerte); }
.sep{ height:1px; background:var(--c-borde); border:0; margin:var(--e-5) 0; }
.mono{ font-family:var(--f-mono); font-size:.92em; }
.num{ font-variant-numeric:tabular-nums; }
.tenue{ color:var(--c-texto-tenue); }
.medio{ color:var(--c-texto-medio); }
.peq{ font-size:var(--t-sm); }
.xpeq{ font-size:var(--t-xs); }
.negr{ font-weight:var(--w-semi); }
.der{ text-align:right; }
.nowrap{ white-space:nowrap; }

.nota-demo{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-2) var(--e-4); background:var(--navy-950); color:var(--gris-300);
  font-size:var(--t-xs); border-radius:var(--r-md);
}
.nota-demo strong{ color:var(--oro-400); }

/* ============================================================== adaptable == */
@media (max-width:1180px){
  .rej--pral,.rej--lateral{ grid-template-columns:minmax(0,1fr); }
  .rej--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rej--indicadores{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rej--indicadores > .kpi--destacado{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .app{ grid-template-columns:var(--w-sidebar-min); }
  .app .marca-lateral__texto,.app .nav__texto,.app .nav__titulo,.app .shell__pie{ display:none; }
  .rej--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .app{ grid-template-columns:0; }
  .shell{ position:fixed; width:var(--w-sidebar); transform:translateX(-100%);
          transition:transform var(--m-medio) var(--m-curva); }
  .app[data-movil="1"] .shell{ transform:translateX(0); box-shadow:var(--s-4); }
  .app[data-movil="1"] .marca-lateral__texto,.app[data-movil="1"] .nav__texto,
  .app[data-movil="1"] .nav__titulo{ display:block; }
  .canvas{ padding:var(--e-4); }
  .rej--2,.rej--3,.rej--4{ grid-template-columns:minmax(0,1fr); }
  .topbar{ padding:0 var(--e-4); }
}

@media print{
  /* Lo que no se imprime: navegación, acciones y todo lo que solo sirve
     para operar la pantalla. En papel no hay dónde pulsar. */
  .shell,.topbar,.pagina-cab__acciones,.filtros,.nav,.migas,
  .boton,form,details,.no-imprimir{ display:none !important; }
  .app{ grid-template-columns:1fr; grid-template-areas:"canvas"; }
  .canvas{ padding:0; }
  .tarjeta,.card{ break-inside:avoid; box-shadow:none; border:none;
                  padding:0; margin:0 0 16pt; }
  body{ background:var(--blanco); color:var(--navy-900);
        font-size:10pt; }

  /* El membrete solo existe en papel: en pantalla la marca ya está en la
     barra lateral, y repetirla sería ruido. */
  .membrete{ display:block !important;
             border-bottom:1pt solid var(--navy-900);
             padding-bottom:6pt; margin-bottom:12pt; }
  .membrete__pie{ font-size:8pt; color:var(--gris-700); }

  /* Una tabla partida por la mitad entre dos hojas es ilegible: se repite
     su cabecera y no se parten las filas. */
  thead{ display:table-header-group; }
  tr,li{ break-inside:avoid; }
  .tabla th,.tabla td{ border:0.5pt solid var(--gris-500);
                       padding:3pt 5pt; }
  .tabla{ width:100%; border-collapse:collapse; font-size:9pt; }

  /* Los chips pierden su color al imprimir; su palabra basta, que para
     eso se puso. */
  .chip{ border:0.5pt solid var(--gris-700); background:none !important;
         color:var(--navy-900) !important; padding:1pt 3pt; }
  .chip__punto{ display:none; }

  a{ text-decoration:none; color:var(--navy-900); }
  h1{ font-size:15pt; } h2{ font-size:12pt; } h3{ font-size:10pt; }
  @page{ margin:1.6cm; }
}

/* El membrete vive oculto en pantalla y aparece solo en papel. */
.membrete{ display:none; }


/* ==================================================================
   Componentes propios de la aplicacion
   ================================================================== */


* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--navy-900);
  background: var(--gris-50);
}

a { color: var(--teal-700); }

/* --------------------------------------------------------------- estructura */
.cabecera {
  /* Azul marino institucional del Kit de Marca. Es una superficie de marca,
   * y el blanco encima da 17,6:1, así que el contraste mejora respecto al
   * navy-900 anterior en lugar de empeorar. */
  background: var(--lcr-navy);
  color: var(--blanco);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Se queda en 56 px. El símbolo cabe con holgura y el cromo no se come una
   * fila de cada listado. */
  min-height: 56px;
}
.cabecera__marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: 16px;
}
.cabecera__marca img {
  display: block;
  /* Que nunca se deforme: la altura manda y el ancho lo deduce el navegador. */
  height: 40px;
  width: auto;
}

@media (max-width: 860px) {
  .cabecera { padding: 0 16px; }
}
.cabecera nav { display: flex; gap: 18px; flex: 1 1 auto; }
.cabecera nav a {
  color: var(--gris-200);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.cabecera nav a:hover { color: var(--blanco); }
.cabecera nav a[aria-current="page"] {
  color: var(--blanco);
  border-bottom-color: var(--teal-400);
}
.cabecera__sesion { color: var(--gris-200); font-size: 13px; }
.cabecera__sesion a { color: var(--teal-400); }
.cabecera__empresa {
  color: var(--gris-200);
  font-size: 13px;
  border-left: 1px solid var(--gris-700);
  padding-left: 16px;
}
.selector select {
  width: auto;
  min-width: 190px;
  padding: 5px 9px;
  font-size: 13px;
  background: var(--navy-900);
  color: var(--blanco);
  border-color: var(--gris-700);
}

/* Etiqueta visible solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
/* `margin: 0 auto` sobre una celda de la rejilla de `.app` la encoge al ancho
 * de su contenido: una pantalla con poco texto salía en una columna estrecha y
 * centrada —«Solicitudes del personal», 19/09/2026—. El ancho explícito la
 * devuelve a «todo lo que quepa, hasta 1120 px». */
main.canvas { width: 100%; }

h1 { font-size: 22px; margin: 0 0 4px; }
.subtitulo { color: var(--gris-550); margin: 0 0 24px; }

/* ------------------------------------------------------------------ tarjetas */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.tarjeta + .tarjeta { margin-top: 16px; }
/* Listas de tarjetas —solicitudes, incidentes, avisos publicados—. La tarjeta
 * ya separa cada elemento: la viñeta y la sangría del <ul> sobraban. */
.lista-tarjetas { list-style: none; margin: 0; padding: 0; }
/* La imagen de un aviso publicado, en el histórico de la empresa. Pequeña:
 * sirve para reconocer el cartel, no para leerlo. */
.aviso-miniatura {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
}

/* -------------------------------------------------------------------- tablas */
.tabla-env { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--gris-100);
  vertical-align: top;
}
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris-550);
  border-bottom: 1px solid var(--gris-200);
  white-space: nowrap;
}
tbody tr:hover { background: var(--gris-50); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- etiquetas */
.marca {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.marca--permitido { background: var(--teal-50); color: var(--teal-700); }
.marca--denegado { background: var(--rojo-50); color: var(--rojo-700); }

/* ---------------------------------------------------------------- formulario */
.campo { margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=date], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  font: inherit;
  background: var(--blanco);
}
textarea { resize: vertical; font-family: inherit; }
.campo .tenue { display: block; margin-top: 4px; }

/* Lista de personas con casilla —«¿a quién se le avisa?» al abrir un asunto.
   Sin esto, la regla `label { display:block; font-weight:600 }` de arriba
   pinta cada nombre como si fuera el rótulo de un campo, en negrita y con el
   cuadrito encima. Con altura máxima porque una empresa de sesenta personas
   empujaría el botón de guardar fuera de la pantalla. */
.campo-personas {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--gris-200); border-radius: var(--radio);
  padding: 10px 12px; background: var(--blanco);
}
.campo-personas label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; margin: 0;
}
.campo-personas input[type=checkbox] { width: auto; margin: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.boton:focus-visible, a:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}

.boton {
  display: inline-block;
  background: var(--teal-700);
  color: var(--blanco);
  border: 0;
  border-radius: var(--radio);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { background: var(--teal-600); }
.boton--tenue {
  background: transparent;
  color: var(--teal-700);
  border: 1px solid var(--gris-200);
}

/* ------------------------------------------------------------------- avisos */
.aviso {
  border-left: 3px solid var(--oro-400);
  background: var(--oro-50);
  color: var(--gris-700);
  padding: 12px 14px;
  border-radius: 0 var(--radio) var(--radio) 0;
  margin-bottom: 16px;
  font-size: 14px;
}
.aviso--error {
  border-left-color: var(--rojo-700);
  background: var(--rojo-50);
  color: var(--rojo-700);
}

/* ------------------------------------------------------------------ entrada */
.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Blanco hueso de la marca. El logotipo para fondo claro trae ese mismo
   * color detrás, así que si el lienzo fuera otro se vería el recuadro. */
  background: var(--lcr-hueso);
}
.entrada__caja { width: 100%; max-width: 380px; }
.entrada__marca {
  margin: 0 0 22px;
  text-align: center;
}
.entrada__marca img {
  display: block;
  margin: 0 auto;
  /* Cuadrado desde el cambio de marca del 19/09/2026. La regla anterior
   * —de 220 a 300 px de ancho— venía de la guía del logotipo horizontal de
   * LCR; aplicada a una baldosa daba un cuadro de 300 px que se comía la
   * tarjeta de ingreso entera. */
  width: 132px;
  height: 132px;
}
/* La puerta de la persona trabajadora, bajo la del sistema. Discreta: quien
 * llega aquí casi siempre es de la empresa; la app es para su personal. */
.entrada__app {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
}
/* El enlace no se parte: «Mi / trabajo» en dos renglones parece otra cosa. */
.entrada__app a { white-space: nowrap; }

.vacio { color: var(--gris-550); padding: 28px; text-align: center; }
.tenue { color: var(--gris-550); font-size: 13px; }
.vencida { color: var(--rojo-700); font-size: 13px; font-weight: 600; }
.migas { font-size: 13px; color: var(--gris-550); margin: 0 0 10px; }
.titulo-bloque { font-size: 15px; margin: 0 0 14px; }

/* ------------------------------------------------------------------- cifras */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cifra {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
}
.cifra--atencion { border-left-color: var(--oro-400); }
.cifra--peligro { border-left-color: var(--rojo-700); }
.cifra__valor {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}
.cifra__nombre {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris-550);
  margin-top: 4px;
}

.marca--reservado { background: var(--oro-50); color: var(--oro-700); }

/* --------------------------------------------------------------- expediente */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.dos-columnas > div > .tarjeta:first-child { margin-top: 0; }

.ficha { margin: 0; display: grid; grid-template-columns: 40% 60%; gap: 8px 12px; }
.ficha dt { font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
            color: var(--gris-550); }
.ficha dd { margin: 0; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid var(--gris-100);
  position: relative;
  counter-increment: paso;
}
.paso::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gris-100);
  color: var(--gris-550);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}
.paso--hecho::before { background: var(--teal-50); color: var(--teal-700); }
.paso--actual { font-weight: 600; }
.paso--actual::before { background: var(--teal-700); color: var(--blanco); }
.paso--no-aplica { color: var(--gris-550); }
.paso--no-aplica::before { opacity: .5; }
.paso__estado { font-size: 12px; color: var(--gris-550); white-space: nowrap; }
.paso--actual .paso__estado { color: var(--teal-700); }

.separador {
  border: 0;
  border-top: 1px solid var(--gris-100);
  margin: 18px 0;
}

.linea { list-style: none; margin: 0; padding: 0; }
.linea > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-100);
  font-size: 14px;
}
.linea > li:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}
.solo-lectura { font-size: 13px; color: var(--gris-550); margin-top: 12px; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.filtros .campo { margin-bottom: 0; min-width: 170px; }

@media (max-width: 640px) {
  .cabecera { flex-wrap: wrap; padding: 8px 16px; }
  main { padding: 20px 16px 48px; }
}

/* Barras del resumen ejecutivo. Sin JavaScript ni biblioteca: alturas en
   porcentaje sobre un contenedor de alto fijo. */
.barras{
  display:flex; align-items:flex-end; gap:var(--e-2);
  height:160px; padding:var(--e-3) 0; overflow-x:auto;
}
.barras__col{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  min-width:44px; height:100%; gap:2px;
}
.barras__barra{
  width:100%; background:var(--teal-700); border-radius:2px 2px 0 0;
  min-height:2px;
}
.barras__cifra{ font-size:11px; color:var(--gris-700); }
.barras__pie{ font-size:10px; color:var(--gris-500); white-space:nowrap; }


/* ==================================================================
   Pulido visual de la aplicación — agosto 2026
   Todo lo de abajo es aditivo: no toca la copia del prototipo ni
   renombra nada. Solo tokens ya validados; aquí no se inventa color.
   ================================================================== */

/* Dos variables que los componentes de la aplicación referencian desde
   siempre y que nadie había definido: cada `var(--radio)` resolvía a
   nada y las tarjetas quedaban cuadradas y sin sombra. */
:root{
  --radio:10px;                       /* mismo radio que .card y .kpi */
  --sombra:0 1px 2px rgba(13,27,46,.05), 0 1px 3px rgba(13,27,46,.08);
  --sombra-alzada:0 10px 28px rgba(13,27,46,.12), 0 2px 6px rgba(13,27,46,.06);
}

/* ------------------------------------------------- la marca que alterna --
   Dirección: el logotipo alterna entre las dos marcas hermanas —hoy «GRC
   Abogados» y «GRC Corporativo»—. Las palabras no están aquí ni en la
   plantilla: salen de `settings` (MARCA-001), así que un cambio de nombre
   no vuelve a pasar por esta hoja.
   Dos palabras apiladas en la misma celda de una rejilla; un fundido
   cruzado de ~medio segundo cada siete, sin desplazamiento. El bloque
   visible va con aria-hidden en la plantilla: el nombre accesible del
   enlace es el alt de la imagen y no cambia nunca. */
.marca-lateral__alterna{ display:grid; }
.marca-lateral__alterna > span{ grid-area:1 / 1; }
.marca-lateral__alterna-a{ animation:marca-palabra 14s var(--m-curva) infinite; }
.marca-lateral__alterna-b{
  color:var(--c-shell-acento-2);      /* el oro distingue al proyecto hermano */
  opacity:0;                          /* sin animación queda sola la primera */
  animation:marca-palabra-alterna 14s var(--m-curva) infinite;
}
@keyframes marca-palabra{
  0%,46%{ opacity:1; }
  50%,96%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes marca-palabra-alterna{
  0%,46%{ opacity:0; }
  50%,96%{ opacity:1; }
  100%{ opacity:0; }
}
/* Quien pidió no ver movimiento se queda con la primera palabra fija. La regla
   global de arriba solo acorta duraciones; con un ciclo infinito eso
   sería un parpadeo, así que aquí la animación se apaga del todo. */
@media (prefers-reduced-motion: reduce){
  .marca-lateral__alterna-a,
  .marca-lateral__alterna-b{ animation:none; }
  .marca-lateral__alterna-a{ opacity:1; }
  .marca-lateral__alterna-b{ opacity:0; }
}

/* ------------------------------------------- clases usadas y sin regla --
   Las plantillas las llevan desde hace tiempo; la hoja no las tenía. */
.chip--ok{ background:var(--teal-50); color:var(--teal-700); }
.banda--peligro{
  background:var(--rojo-50); border-color:var(--borde-rojo);
  border-left:3px solid var(--rojo-600);
}
.banda--peligro .banda__titulo,
.banda--peligro .banda__icono{ color:var(--rojo-600); }

/* --------------------------------------------------------- formularios --
   El selector original no cubría number/email/search/tel: el campo
   «Monto» de la liquidación se veía con el estilo crudo del navegador. */
input[type=number], input[type=email], input[type=search],
input[type=tel], input[type=url], input[type=time] {
  width:100%;
  padding:9px 11px;
  border:1px solid var(--gris-200);
  border-radius:var(--r-md);
  font:inherit;
  background:var(--blanco);
}
input[type=text], input[type=password], input[type=date], select, textarea{
  border-radius:var(--r-md);
  transition:border-color var(--m-rapido) var(--m-curva);
}
input[type=text]:hover, input[type=password]:hover, input[type=date]:hover,
input[type=number]:hover, input[type=search]:hover, select:hover,
textarea:hover{ border-color:var(--gris-300); }

/* ------------------------------------------------------------- botones --
   El botón tenue heredaba el hover del sólido: fondo teal-600 con texto
   teal-700, ilegible. Ahora cada variante tiene su propio hover. */
.boton{
  border-radius:var(--r-md);
  box-shadow:var(--s-1);
  transition:background var(--m-rapido) var(--m-curva),
             border-color var(--m-rapido) var(--m-curva),
             box-shadow var(--m-rapido) var(--m-curva);
}
.boton:hover{ box-shadow:var(--s-2); }
.boton--tenue{ box-shadow:none; }
.boton--tenue:hover{
  background:var(--teal-50); color:var(--teal-700);
  border-color:var(--teal-300); box-shadow:none;
}
/* Un botón suelto dentro de una fila o una tarjeta —«Generar constancia»—,
   sin el margen de un formulario completo. */
.form-en-linea{ display:inline-block; margin:0 0 var(--e-2); }

/* Los adjuntos de un reporte, en la bandeja de incidentes. */
.adjuntos-de-incidente{ margin:var(--e-2) 0; }

/* A dónde lleva un resultado del buscador: la fila o la tarjeta del ancla
   se resalta, para que no haya que buscarla otra vez en una lista larga. */
.tarjeta:target, tr:target > td{
  background:var(--teal-50);
  border-left-color:var(--teal-600);
  scroll-margin-top:80px;
}
.buscar-indice a{ white-space:nowrap; }

/* Un bloque que se abre dentro de una tarjeta —«Corregir la salida»—: lo
   que no es el camino normal no ocupa sitio hasta que hace falta. */
details.desplegable{ margin-top:var(--e-3); }
details.desplegable > summary{
  cursor:pointer; font-weight:600; color:var(--teal-700);
  padding:6px 0; min-height:36px; display:flex; align-items:center;
}
details.desplegable > summary:focus-visible{
  outline:2px solid var(--teal-600); outline-offset:2px;
}

/* --------------------------------------------- las cifras que se pulsan --
   Una tarjeta de cifra que lleva a la lista que la produjo (21/09/2026).
   Es un enlace de verdad —no un `div` con guion—, así que se abre en otra
   pestaña, se copia y funciona con el teclado. */
a.kpi--enlace{ text-decoration:none; color:inherit; display:block; }
a.kpi--enlace:hover{
  border-color:var(--teal-600);
  box-shadow:var(--s-2);
  transform:translateY(-1px);
}
a.kpi--enlace:focus-visible{ outline:2px solid var(--teal-600); outline-offset:2px; }

/* ------------------------------------------------------- los faltantes --
   Cada «falta algo» con el sitio donde se arregla. Se pinta igual en la
   ficha, en la lista, en la planilla y en el asunto: un aviso que cambia de
   forma según la pantalla se lee como si fuera otra cosa. */
.faltantes{ list-style:none; margin:0; padding:0; }
.faltante{ padding:3px 0; font-size:13.5px; line-height:1.5; }
.faltante + .faltante{ border-top:1px solid var(--c-borde); }
.faltante a{ font-weight:600; }
.tarjeta--atencion{
  border-left:4px solid var(--oro-500);
  background:var(--oro-50);
}

/* ----------------------------------------------- menú «⋮» de cada fila --
   Un `<details>` y nada más: abre con el teclado y con el dedo, y el
   sistema sigue sin guiones fuera de la app instalable. La caja se coloca
   sobre la tabla con `position:absolute`, y la fila que lo abre se pinta
   encima para que no la tape la fila siguiente. */
.celda-menu{ width:1%; white-space:nowrap; }
.menu-fila{ position:relative; display:inline-block; }
.menu-fila > summary{
  list-style:none; cursor:pointer; user-select:none;
  min-width:36px; min-height:36px; line-height:34px;
  padding:0 8px; border-radius:var(--r-md); text-align:center;
  color:var(--c-texto-tenue); font-size:18px;
}
.menu-fila > summary::-webkit-details-marker{ display:none; }
.menu-fila > summary:hover{ background:var(--c-lienzo); color:var(--c-texto); }
.menu-fila > summary:focus-visible{ outline:2px solid var(--teal-600); outline-offset:2px; }
.menu-fila[open] > summary{ background:var(--c-lienzo); color:var(--c-texto); }
.menu-fila[open]{ z-index:20; }
.menu-fila__caja{
  position:absolute; right:0; top:calc(100% + 4px); z-index:30;
  min-width:230px; padding:6px;
  background:var(--c-superficie); border:1px solid var(--c-borde);
  border-radius:var(--r-md); box-shadow:var(--s-2);
  display:flex; flex-direction:column;
}
.menu-fila__caja a{
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--c-texto); text-decoration:none; font-size:14px;
}
.menu-fila__caja a:hover{ background:var(--teal-50); color:var(--teal-700); }
@media (max-width:720px){
  .menu-fila__caja{ position:static; min-width:0; box-shadow:none; }
}

/* ------------------------------------------------------------ tarjetas -- */
.entrada .tarjeta{
  padding:28px;
  border-top:3px solid var(--teal-500);
  box-shadow:var(--sombra-alzada);
}

/* Los indicadores ya coloreaban la cifra; el filo izquierdo refuerza el
   estado sin depender solo del color: la etiqueta y la nota lo nombran. */
.kpi--acento{ border-left:3px solid var(--teal-500); }
.kpi--atencion{ border-left:3px solid var(--oro-500); }
.kpi--peligro{ border-left:3px solid var(--rojo-500); }

/* -------------------------------------------------------------- tablas -- */
thead th{ background:var(--gris-50); }
tbody tr{ transition:background var(--m-rapido) var(--m-curva); }
.tarjeta tbody tr:last-child td{ border-bottom:0; }

/* ------------------------------------------------------ estados vacíos --
   Un hueco en blanco parece un error; un recuadro punteado dice «aquí no
   hay nada, y es a propósito». */
.vacio{
  padding:26px 20px;
  background:var(--gris-50);
  border:1px dashed var(--gris-300);
  border-radius:var(--radio);
}

/* ------------------------------------------------- barras del resumen --
   El prototipo define .barras en columna (barras horizontales) y la
   aplicación la redefinió en fila sin resetear flex-direction: heredaba
   `column` y el gráfico se apilaba en vertical contra el borde derecho.
   La fila explícita lo endereza. */
.barras{ flex-direction:row; }
.barras__barra{
  background:linear-gradient(to top, var(--teal-700), var(--teal-500));
  border-radius:3px 3px 0 0;
}
.barras__cifra{ font-variant-numeric:tabular-nums; }
.barras__pie{
  width:100%; text-align:center;
  border-top:2px solid var(--gris-200);   /* línea de base bajo cada mes */
  padding-top:3px; margin-top:2px;
}

/* --------------------------------------------------- barra superior ----
   El selector de empresa heredaba el fondo navy pensado para la cabecera
   oscura del prototipo; sobre la barra blanca era un bloque negro. */
.topbar .selector select{
  background:var(--c-superficie);
  color:var(--c-texto);
  border:1px solid var(--gris-300);
  border-radius:var(--r-full);
  padding:6px 12px;
  font-weight:600;
  cursor:pointer;
  transition:border-color var(--m-rapido) var(--m-curva);
}
.topbar .selector select:hover{ border-color:var(--teal-500); }

/* ------------------------------------------------------------ detalles -- */
h1{ letter-spacing:-.01em; }
.bloque-facultad + .bloque-facultad{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--gris-100);
}

/* ------------------------------------------------------------ impresión --
   El bloque @media print del prototipo quedó ANTES de los componentes de
   la aplicación, y varios selectores de igual especificidad (body, h1, a,
   .tarjeta, th) lo pisaban en papel. Este bloque, al final del archivo,
   reafirma en papel lo que aquel ya decía; no introduce nada nuevo. */
@media print{
  body{ background:var(--blanco); color:var(--navy-900); font-size:10pt; }
  a{ color:var(--navy-900); text-decoration:none; }
  h1{ font-size:15pt; } h2{ font-size:12pt; } h3{ font-size:10pt; }
  main{ max-width:none; margin:0; padding:0; }
  .tarjeta{ box-shadow:none; border:0; border-radius:0; padding:0; margin:0 0 16pt; }
  .tarjeta + .tarjeta{ margin-top:0; }
  th, td{ padding:3pt 5pt; font-size:9pt; }
  thead th{ background:none; }
  .vacio{ background:none; border:0; padding:8pt 0; }
  .kpi--acento,.kpi--atencion,.kpi--peligro{ border-left:0; }
  /* Los fondos no siempre se imprimen: el borde garantiza que cada barra
     exista también en papel. */
  .barras__barra{ border:0.5pt solid var(--gris-500); border-bottom:0; }
}

/* ------------------------------------------------- el calendario (SIS-2026)
   La pantalla que contesta «¿quién falta el jueves?». Es una tabla de datos
   de verdad —columnas que son días de la semana— y se pinta como tal: con
   altura mínima por casilla para que un día con tres ausencias y otro vacío
   no den filas de altos distintos, y con las marcas recortadas a una línea
   para que un nombre largo no estire la columna entera. */
.calendario { margin: 18px 0; }
.calendario__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.calendario__titulo { margin: 0; font-size: 18px; text-transform: capitalize; }
.calendario__subtitulo { margin: 18px 0 8px; font-size: 15px; }
.calendario__nav { display: flex; gap: 6px; margin: 0; }
.calendario__mes {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: var(--blanco);
}
.calendario__mes th {
  padding: 6px 8px; text-align: left; font-size: 12px;
  color: var(--gris-550); border-bottom: 1px solid var(--gris-200);
  text-transform: uppercase; letter-spacing: .04em;
}
.calendario__dia {
  vertical-align: top; height: 76px; padding: 6px;
  border: 1px solid var(--gris-200);
}
/* Los días de los meses vecinos existen para que la rejilla no baile, y no
   dicen nada: se apagan en vez de esconderse, que dejaría huecos. */
.calendario__dia--fuera { background: var(--gris-50); }
.calendario__dia--hoy { box-shadow: inset 0 0 0 2px var(--teal-600); }
.calendario__numero {
  display: block; font-size: 12px; font-weight: 600; color: var(--gris-700);
  margin-bottom: 4px;
}
.calendario__marca {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; line-height: 1.5; padding: 1px 5px; margin-bottom: 2px;
  border-radius: var(--radio); background: var(--teal-50); color: var(--teal-700);
}
/* Lo pendiente se ve distinto de lo aprobado: el calendario sirve para no
   aprobar el cuarto permiso de la misma semana sin verlo. */
.calendario__marca--pendiente { background: var(--oro-50); color: var(--oro-800); }
.calendario__mas { font-size: 11px; color: var(--gris-550); }
.calendario__detalle { margin: 0; padding-left: 18px; }
.calendario__detalle > li { margin-bottom: 8px; }
.calendario__detalle > li > strong { text-transform: capitalize; }
.calendario__detalle ul { margin: 2px 0 0; padding-left: 16px; list-style: none; }

/* En un teléfono la rejilla no cabe con texto dentro: las casillas se
   encogen y las marcas se vuelven una barra de color. El detalle en lista,
   que está debajo, es ahí la forma de leerlo — y por eso existe. */
@media (max-width: 720px) {
  .calendario__dia { height: 54px; padding: 3px; }
  .calendario__marca { text-indent: -999px; height: 6px; padding: 0; }
  .calendario__mas { font-size: 10px; }
}

/* ---------- El calendario en colores, y su cuadro de texto (22/09/2026) ----
   Dirección: «hay que diferenciar en colores entre lo que son vacaciones y lo
   que son permisos con goce y permisos sin goce […] al poner el mouse sobre el
   permiso del día debe de dar un cuadro de texto donde especifique el detalle».

   Los cuatro colores no son decorativos: dicen **quién cobra el día**.
   Vacaciones y permiso con goce se pagan —van en la familia del acento—; el
   permiso sin goce no —va en gris marcado, no en rojo: no es una alarma, es
   un hecho—; y el que todavía no lo dice va en ámbar, que en este sistema es
   siempre «falta algo». La franja de la izquierda es lo que permite
   distinguirlos también cuando el fondo se imprime en blanco y negro. */
/* La franja va como `box-shadow` interior y no como `border-left`: con el
   radio de la esquina, un borde izquierdo se curva y deja una media luna que
   se lee como un paréntesis. Esto queda recto. */
.calendario__marca{
  position:relative; padding-left:8px;
  border-left:3px solid transparent;
  border-radius:0 var(--radio) var(--radio) 0;
}
.calendario__marca--vacaciones{
  background:var(--teal-50); color:var(--teal-700);
  box-shadow:inset 3px 0 0 var(--teal-600);
}
/* El permiso con goce comparte familia de fondo con las vacaciones —el azul
   pálido y el teal claro son vecinos— y lo que los separa es la FRANJA: navy
   contra teal, recta y de tres píxeles. Se intentó primero con un tinte navy
   propio y se descartó: la paleta está cerrada y medida (`tests_estilos`), y
   un color nuevo para una etiqueta no justifica abrirla. */
.calendario__marca--con-goce{
  background:var(--azul-palido); color:var(--navy-700);
  border-left-color:var(--navy-600);
}
.calendario__marca--sin-goce{
  background:var(--gris-100); color:var(--gris-700);
  border-left-color:var(--gris-550);
}
.calendario__marca--sin-declarar{
  background:var(--oro-50); color:var(--oro-800);
  border-left-color:var(--oro-500);
}
/* Lo pendiente de resolver es OTRO eje: puede caer sobre cualquiera de los
   cuatro colores. Por eso no cambia el fondo —eso borraría el primer dato—
   sino que añade el contorno de aviso. Se ven las dos cosas a la vez. */
.calendario__marca--pendiente{
  outline:1px dashed var(--oro-500); outline-offset:-1px;
}
.calendario__marca:hover,
.calendario__marca:focus{ outline:none; filter:brightness(.97); cursor:default; }

/* El globo. Aparece al pasar el ratón o al enfocar con el teclado, y se va
   solo al salir: nada que cerrar, nada que recordar. Sin JavaScript. */
.calendario__globo{
  position:absolute; left:0; top:calc(100% + 4px); z-index:40;
  display:none; width:max-content; max-width:280px;
  background:var(--navy-900); color:var(--blanco);
  padding:8px 10px; border-radius:var(--r-md); box-shadow:var(--s-3);
  font-size:12px; line-height:1.5; white-space:normal; text-align:left;
}
.calendario__marca:hover .calendario__globo,
.calendario__marca:focus .calendario__globo{ display:block; }
.calendario__globo strong{ display:block; font-size:13px; margin-bottom:2px; }
.calendario__globo-que{
  display:block; color:var(--oro-400); font-weight:600; margin-bottom:3px;
}
.calendario__globo-dato{ display:block; color:var(--gris-300); }

/* Las dos últimas columnas abrirían el globo fuera de la pantalla: se anclan
   a la derecha. Es `:nth-child` sobre las celdas, no una clase, porque el
   sitio de una columna es del calendario y no de la entrada que cae en ella. */
.calendario__mes td:nth-child(6) .calendario__globo,
.calendario__mes td:nth-child(7) .calendario__globo{ left:auto; right:0; }

.calendario__leyenda{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:12px; color:var(--c-texto-medio);
}
.calendario__leyenda li{ display:flex; align-items:center; gap:6px; }
.calendario__color{
  width:16px; height:14px; display:inline-block; flex:none;
  border-left:3px solid transparent; border-radius:0 3px 3px 0;
}
.calendario__color--vacaciones{ background:var(--teal-50); border-left-color:var(--teal-600); }
.calendario__color--con-goce{ background:var(--azul-palido); border-left-color:var(--navy-600); }
.calendario__color--sin-goce{ background:var(--gris-100); border-left-color:var(--gris-550); }
.calendario__color--sin-declarar{ background:var(--oro-50); border-left-color:var(--oro-500); }
.calendario__color--pendiente{ background:var(--blanco); outline:1px dashed var(--oro-500); outline-offset:-1px; }

/* ---------- Las cuatro tarjetas de Inicio (22/09/2026) ---------------------
   Dirección: «se ven iguales […] deben ser más llamativos, igual de elegantes
   y profesionales». Eran cuatro cajas idénticas y, desde que son enlaces, ni
   siquiera parecían pulsables.

   Lo que las diferencia ahora NO es color por color: es **una franja superior
   del color de lo que cuentan** más un rótulo que dice a dónde llevan. El
   fondo se queda blanco a propósito — cuatro tarjetas de cuatro colores
   compiten entre sí y ninguna gana, que es el defecto contrario. */
.kpi--enlace{
  padding-top:calc(var(--e-4) + 3px);
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.kpi--enlace::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--gris-300);
}
.kpi--enlace.kpi--peligro::before{ background:var(--c-peligro); }
.kpi--enlace.kpi--atencion::before{ background:var(--c-atencion); }
.kpi--enlace.kpi--acento::before{ background:var(--c-acento-fuerte); }

/* La flecha: lo que dice «esto se abre». Aparece siempre, se desplaza al
   pasar por encima. Un enlace que sólo se anuncia al pasar el ratón no se
   anuncia en un teléfono. */
.kpi__ir{
  margin-top:auto; padding-top:var(--e-2);
  font-size:var(--t-xs); font-weight:var(--w-semi);
  color:var(--c-acento-fuerte); display:flex; align-items:center; gap:4px;
}
.kpi__ir::after{ content:"→"; transition:transform .14s; }
a.kpi--enlace:hover .kpi__ir::after{ transform:translateX(3px); }
a.kpi--enlace:hover{ border-color:var(--teal-600); box-shadow:var(--s-2); transform:translateY(-2px); }
a.kpi--enlace:active{ transform:translateY(0); box-shadow:var(--s-1); }

/* Una cifra en cero no compite con una que pide atención: se apaga. Cuatro
   ceros gritando en rojo enseñan a no mirar el rojo. */
.kpi--enlace.kpi--vacio .kpi__valor{ color:var(--c-texto-tenue); }
.kpi--enlace.kpi--vacio::before{ background:var(--gris-200); }

@media (max-width:720px){
  .calendario__globo{ max-width:200px; }
}

/* ---------------------------------------------------------------------
   El comprobante de pago (23/09/2026), con la forma del modelo que usa el
   cliente: centro y período arriba, persona y patrono, devengado y
   deducciones lado a lado, y la firma. Pensado para imprimirse.
   --------------------------------------------------------------------- */
.comprobante__cab{ border-bottom:1px solid var(--c-borde); padding-bottom:var(--e-3); margin-bottom:var(--e-4); }
.comprobante__centro{ font-size:var(--t-lg); font-weight:var(--w-semi); margin:0; }
.comprobante__fila{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--e-2); }
.comprobante__titulo{ font-size:var(--t-md); margin:0; }
.comprobante__periodo{ margin:0; color:var(--c-texto-medio); }
.comprobante__partes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-5); margin-bottom:var(--e-4); }
.comprobante__datos{ display:grid; grid-template-columns:auto 1fr; gap:var(--e-1) var(--e-3); margin:0; }
.comprobante__datos dt{ color:var(--c-texto-tenue); font-size:var(--t-xs); align-self:center; }
.comprobante__datos dd{ margin:0; }
.comprobante__caption{ text-align:left; font-weight:var(--w-semi); padding-bottom:var(--e-1); }
.comprobante__tabla td.num, .comprobante__tabla th + td{ text-align:right; }
.comprobante__neto th, .comprobante__neto td{ font-size:var(--t-md); font-weight:var(--w-semi); border-top:2px solid var(--c-texto); }
.comprobante__firma{ display:flex; justify-content:space-between; gap:var(--e-5); margin-top:var(--e-5); }
.comprobante__raya{ display:inline-block; min-width:220px; border-bottom:1px solid var(--c-texto); height:1em; }
.comprobante__raya--corta{ min-width:120px; }
@media (max-width:720px){
  .comprobante__partes{ grid-template-columns:1fr; }
  .comprobante__firma{ flex-direction:column; }
}
@media print{
  .comprobante{ border:0; box-shadow:none; padding:0; }
  .comprobante__partes{ grid-template-columns:1fr 1fr; }
}

/* Cuatro clases que las pantallas de nómina usaban sin estilo (23/09/2026):
   se veían, pero sin forma. Lo encontró la prueba de fidelidad visual. */
.aviso--ok{ border-left-color:var(--teal-600); background:var(--c-acento-suave); color:var(--c-texto); }
.herramientas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.lista-simple{ margin:0 0 var(--e-3); padding-left:var(--e-5); }
.lista-simple li + li{ margin-top:var(--e-2); }
.fila-detalle td{ font-size:var(--t-xs); background:var(--c-lienzo); border-top:0; }


/* La búsqueda de Documentos (23/09/2026): una caja ancha, el tipo al lado y
   el botón. Se apila en el teléfono. */
.buscador-grande{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; margin-bottom:var(--e-3); }
.buscador-grande input[type=search]{ flex:1 1 320px; min-width:0; font-size:var(--t-md); padding:var(--e-2) var(--e-3); }
.buscador-grande select{ flex:0 1 220px; }


/* Cumplimiento (23/09/2026): sobrio aunque esté en cero. */
.cumplimiento-vacio{ border-left:3px solid var(--teal-600); }
.cumplimiento-pie{ margin-top:var(--e-5); }


/* El resumen como panel de informes (23/09/2026). Barras horizontales en
   HTML y CSS, sin JavaScript: se imprimen igual que se ven. */
.resumen-graficos{ margin-bottom:var(--e-4); }
.barras-h{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e-2); }
.barras-h__fila{ display:grid; grid-template-columns:minmax(120px, 42%) 1fr 3ch; align-items:center; gap:var(--e-2); }
.barras-h__et{ font-size:var(--t-sm); color:var(--c-texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barras-h__pista{ height:12px; background:var(--gris-100); border-radius:6px; overflow:hidden; }
.barras-h__barra{ display:block; height:100%; background:var(--g-1); border-radius:6px; }
.barras-h--oro .barras-h__barra{ background:var(--g-2); }
.barras-h__cifra{ font-variant-numeric:tabular-nums; font-weight:var(--w-semi); text-align:right; }
.barras__barra{ background:linear-gradient(180deg, var(--g-1), var(--gs-5)); border-radius:4px 4px 0 0; }
@media print{
  .barras-h__pista{ border:1px solid var(--gris-300); }
}


/* El aviso de la CCSS y el INS en Inicio (23/09/2026). */
a.panel-ccss{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-3); align-items:baseline; text-decoration:none; color:var(--c-texto); border-left:3px solid var(--c-atencion-relleno); margin:var(--e-4) 0; }
a.panel-ccss--ok{ border-left-color:var(--teal-600); }
a.panel-ccss:hover{ box-shadow:var(--s-2); }
a.panel-ccss .kpi__ir{ margin-left:auto; }


/* Acabado del 23/09/2026, visto en las capturas. */
.resumen-nota{ margin:var(--e-3) 0 var(--e-4); }
.comprobante__partes > .comprobante__tabla{ align-self:start; }
.cumplimiento-vacio{ margin-top:var(--e-4); }


/* El paso a paso de la planilla (23/09/2026): los pasos son enlaces. */
a.paso-enlace{ text-decoration:none; color:inherit; }


/* ---------------------------------------------------------------------------
 * Preparar el pago (encargo del 08/10/2026): cifras de entrada, tabla rápida
 * con vista previa al lado, pendientes agrupados y la casilla de revisión.
 * Sin guiones: la vista previa es una columna que aparece con `?ver=`.
 * ------------------------------------------------------------------------- */
.preparar__cifras{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--e-3); margin-bottom:var(--e-3); }
.preparar__cifras .kpi{ padding:var(--e-3); border:1px solid var(--gris-200); border-radius:var(--radio); }
.preparar__cifras .kpi__valor{ font-size:1.5rem; margin:0; }
.preparar__cifras .kpi__et,.preparar__cifras .kpi__nota{ margin:0; }
.preparar__accion{ margin:var(--e-2) 0 var(--e-3); }
.preparar__cuerpo{ display:grid; grid-template-columns:1fr; gap:var(--e-4); align-items:start; }
.preparar__cuerpo--con-previa{ grid-template-columns:minmax(0, 1.2fr) minmax(320px, 1fr); }
.preparar__previa{ position:sticky; top:var(--e-3); }
.preparar__previa .comprobante{ font-size:13px; }
@media (max-width:1100px){
  .preparar__cuerpo--con-previa{ grid-template-columns:1fr; }
  .preparar__previa{ position:static; }
}
.tabla-rapida__elegida td{ background:var(--azul-palido); }
.casilla{ display:inline-flex; align-items:center; gap:var(--e-2); margin:var(--e-2) 0; cursor:pointer; }
.casilla input{ width:1.1rem; height:1.1rem; }
.comprobante--borrador{ position:relative; overflow:hidden; }
.marca-agua{ position:absolute; inset:40% 0 auto 0; margin:0; text-align:center; font-size:4rem; font-weight:700; letter-spacing:.3em; color:var(--gris-200); transform:rotate(-20deg); pointer-events:none; user-select:none; }
.tarjeta--atencion{ border-left:4px solid var(--oro-500); }

/* Ajustes tras el recorrido del 08/10: la vista previa no estrecha la tabla
 * y dentro de ella el comprobante va a una columna. */
.preparar__cuerpo--con-previa{ grid-template-columns:minmax(0, 1fr) minmax(360px, 440px); }
.preparar__previa .comprobante__partes{ grid-template-columns:1fr; gap:var(--e-3); }
.preparar__previa .comprobante__firma{ display:none; }
.tabla-rapida td:first-child a{ white-space:nowrap; }
.aviso details > summary, details.aviso > summary{ cursor:pointer; }

/* Revisión manual del 13/10/2026 (C03): el «Ver cálculo» corto de la
 * planilla. Una tabla estrecha —concepto y cifra— con los totales marcados. */
.calculo-breve{ width:auto; min-width:min(100%, 22rem); max-width:34rem; margin:var(--e-2) 0; }
.calculo-breve th{ font-weight:400; text-align:left; }
.calculo-breve__total th,.calculo-breve__total td{ border-top:1px solid var(--gris-300); font-weight:600; }

/* Revisión manual del 13/10/2026 (C05): el calendario se distingue de un
 * vistazo. Cada marca lleva su LETRA en un círculo lleno —V, C, S, ?— además
 * del color de fondo, así que se lee también en blanco y negro; los cuatro
 * fondos son de cuatro familias distintas (teal, azul, rojo, oro). Lo
 * pendiente va HUECO —fondo blanco, borde punteado— y lo aprobado, lleno.
 * El nombre corto puede ocupar dos líneas: sin puntos suspensivos. Cada
 * marca es un enlace a su solicitud. */
.calendario__marca{
  display:flex; align-items:flex-start; gap:4px;
  white-space:normal; overflow:visible; text-overflow:clip;
  text-decoration:none; font-size:11.5px; line-height:1.35;
  padding:2px 5px 2px 3px; margin-bottom:3px;
  border:1px solid transparent; border-radius:var(--radio); box-shadow:none;
}
.calendario__marca:hover,
.calendario__marca:focus{ filter:none; cursor:pointer; text-decoration:underline; outline:2px solid var(--teal-600); outline-offset:1px; }
.calendario__marca--vacaciones{ background:var(--teal-50); color:var(--teal-700); border-color:var(--borde-teal); box-shadow:none; }
.calendario__marca--con-goce{ background:var(--azul-palido); color:var(--navy-700); border-color:var(--borde-azul); }
.calendario__marca--sin-goce{ background:var(--rojo-50); color:var(--rojo-700); border-color:var(--borde-rojo); }
.calendario__marca--sin-declarar{ background:var(--oro-50); color:var(--oro-800); border-color:var(--borde-oro); }
.calendario__marca--pendiente{ background:var(--blanco); border-style:dashed; border-color:currentColor; outline:none; }
.calendario__letra{
  flex:none; display:inline-grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  font-size:10px; font-weight:700; line-height:1; color:var(--blanco);
}
.calendario__letra--vacaciones{ background:var(--teal-600); }
.calendario__letra--con-goce{ background:var(--navy-700); }
.calendario__letra--sin-goce{ background:var(--rojo-600); }
.calendario__letra--sin-declarar{ background:var(--oro-700); }
.calendario__iniciales{ display:none; }
.calendario__leyenda{ margin:0 0 10px; }
.calendario__muestra-pendiente{
  display:inline-block; padding:0 6px; font-size:11px; color:var(--gris-700);
  background:var(--blanco); border:1px dashed var(--gris-550); border-radius:var(--radio);
}
.calendario__fila--pendiente td{ background:var(--oro-50); }
.calendario__lista td{ vertical-align:top; }
@media (max-width:720px){
  .calendario__marca{ text-indent:0; height:auto; padding:1px 2px; gap:2px; font-size:10px; }
  .calendario__nombre{ display:none; }
  .calendario__iniciales{ display:inline; font-weight:600; }
  .calendario__letra{ width:14px; height:14px; font-size:9px; }
  .calendario__marca .calendario__globo{ display:none; }
  /* La lista por solicitud, en tarjetas: sin desplazamiento lateral. */
  .calendario__lista thead{ display:none; }
  .calendario__lista tr{ display:block; padding:var(--e-2) 0; border-bottom:1px solid var(--gris-200); }
  .calendario__lista td{ display:block; border:0; padding:2px 0; }
}

/* Revisión manual del 13/10/2026 (C01): «Lo que le toca», lo primero de
 * Inicio. Una fila por tarea, con un punto del color de su urgencia, el texto
 * en grande y el botón que lleva a resolverla. */
.tareas{ border-left:4px solid var(--teal-600); margin-bottom:var(--e-5); }
.tareas__lista{ list-style:none; margin:0; padding:0; }
.tareas__fila{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) 0; border-bottom:1px solid var(--gris-200);
}
.tareas__fila:last-child{ border-bottom:0; }
.tareas__texto{ font-size:15px; font-weight:600; color:var(--gris-700); }
.tareas__texto::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:10px; vertical-align:middle; background:var(--teal-600);
}
.tareas__fila--atencion .tareas__texto::before{ background:var(--oro-500); }
.tareas__fila--peligro .tareas__texto::before{ background:var(--rojo-600); }
.tareas__mas{ margin:var(--e-2) 0 0; }
@media (max-width:720px){
  .tareas__fila{ flex-wrap:wrap; }
  .tareas__fila .btn{ width:100%; text-align:center; }
}

/* Revisión manual del 13/10/2026 (C11): el expediente por secciones. Un
 * índice que se queda arriba al bajar, y cada sección con sus tarjetas lado
 * a lado en pantallas anchas; en el teléfono, una debajo de otra. */
.ficha-indice{
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 var(--e-4); padding:var(--e-2) 0; background:var(--c-lienzo);
  border-bottom:1px solid var(--gris-200);
}
.ficha-indice a{
  padding:4px 12px; border:1px solid var(--gris-300); border-radius:999px;
  font-size:13px; text-decoration:none; color:var(--navy-700); background:var(--blanco);
}
.ficha-indice a:hover,.ficha-indice a:focus{ border-color:var(--teal-600); color:var(--teal-700); }
.ficha-seccion{ margin:0 0 var(--e-6); scroll-margin-top:56px; }
.ficha-seccion__titulo{ font-size:19px; margin:0 0 var(--e-3); padding-bottom:6px; border-bottom:2px solid var(--teal-600); }
.ficha-seccion__rejilla{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:var(--e-4); align-items:start; }
.ficha-seccion__rejilla > .tarjeta,
.ficha-seccion__rejilla > details.tarjeta{ margin:0; }
details.tarjeta > summary{ cursor:pointer; font-weight:600; }
@media print{ .ficha-seccion__rejilla{ display:block; } }

/* Revisión manual del 13/10/2026 (C03): en el «Ver cálculo» corto el
 * concepto va en una celda de cabecera de fila; sin esto heredaba el fondo
 * oscuro de las cabeceras de tabla y se leía como un encabezado. */
.calculo-breve th{
  background:none; color:var(--gris-700); text-transform:none;
  letter-spacing:0; font-size:inherit; padding-left:0;
}
.calculo-breve td{ text-align:right; }
.calculo-breve__total th{ color:var(--navy-900); }

/* Revisión manual del 13/10/2026 (C05, C04): en un teléfono la barra de
 * arriba no cabía —empresa, buscador, nombre y enlaces en una sola fila— y
 * empujaba TODA la página hacia un lado. Ahora se parte en dos filas. */
@media (max-width:680px){
  .app{ grid-template-rows:auto 1fr; }
  .topbar{ flex-wrap:wrap; height:auto; min-height:var(--h-topbar);
           padding:var(--e-2) var(--e-4); gap:var(--e-2); }
  .topbar__izq{ flex:1 1 100%; min-width:0; }
  .topbar__izq form,.topbar__izq input{ min-width:0; max-width:100%; }
  .topbar__der{ flex:1 1 100%; justify-content:flex-end; flex-wrap:wrap; }
}

/* Revisión manual del 13/10/2026 (C08): la duración real de una solicitud,
 * en su tarjeta, antes de decidir. */
.solicitud__duracion{ margin:var(--e-2) 0; }


/* ============================================================================
   TERCERA PARTE — Rediseño GRC Empresarial (18/10/2026)

   Orden del Director Jurídico del 18/10/2026 (revisión visual consolidada):
   azul predominante, barra lateral azul oscuro, fondos claros y acentos vino;
   la marca es GRC Empresarial, sin el logotipo del bufete.

   Va al final a propósito: ante igual especificidad gana lo último, así que
   las dos primeras partes quedan intactas y este bloque las reorienta. Los
   colores salen de las primitivas `--azul-*`, `--vino-*` y `--amarillo-*` del
   primer bloque (medidas en core/tests_estilos.py); aquí no hay ningún color
   literal. Las pantallas que necesitan algo propio lo tienen en su hoja
   `grc-*.css`, con los mismos tokens.

   Sin JavaScript, como el resto del sistema fuera de la app instalable
   (core/tests_menu_de_trabajador.py): pestañas con botones de radio,
   desplegables con <details> y el brillo de la barra con :hover.
   ========================================================================== */

:root{
  /* Barra lateral */
  --c-shell:            var(--azul-950);
  --c-shell-alto:       var(--azul-900);
  --c-shell-hueco:      var(--navy-950);
  --c-shell-acento:     var(--azul-300);
  --c-shell-acento-2:   var(--vino-300);
  --c-shell-linea:      var(--vino-400);

  /* Lienzo claro */
  --c-texto:            var(--azul-950);
  --c-acento:           var(--azul-700);
  --c-acento-fuerte:    var(--azul-800);
  --c-acento-relleno:   var(--azul-600);
  --c-acento-suave:     var(--azul-50);
  --c-superficie-2:     var(--azul-50);

  /* Vino: líneas, estados seleccionados y la acción principal */
  --c-vino:             var(--vino-700);
  --c-vino-fuerte:      var(--vino-800);
  --c-vino-relleno:     var(--vino-600);
  --c-vino-linea:       var(--vino-500);
  --c-vino-suave:       var(--vino-50);
  --c-vino-borde:       var(--vino-100);

  /* Avisos: amarillo vivo con acento vino */
  --c-atencion-relleno: var(--amarillo-400);
  --c-atencion-suave:   var(--amarillo-100);

  /* Fondos difuminados de tarjetas y franjas */
  --g-suave-azul: linear-gradient(135deg, var(--azul-50) 0%, var(--blanco) 62%);
  --g-suave-vino: linear-gradient(135deg, var(--vino-50) 0%, var(--blanco) 62%);

  --s-tarjeta: 0 1px 2px rgba(10,27,61,.05), 0 6px 18px rgba(10,27,61,.06);
}

/* ------------------------------------------------------------------ base -- */
body{ color:var(--c-texto); }
a{ color:var(--c-acento); }
a:hover{ color:var(--c-vino); }
:focus-visible{ outline-color:var(--c-vino-relleno); }
.shell :focus-visible{ outline-color:var(--vino-300); }
.pagina-titulo{ font-size:var(--t-3xl); color:var(--azul-950); letter-spacing:-.015em; }
.eyebrow{ color:var(--c-vino); }
.migas a:hover{ color:var(--c-vino); }

/* ------------------------------------------------------- barra lateral -- */
.shell{
  background:
    linear-gradient(180deg, var(--azul-950) 0%, var(--azul-900) 55%, var(--azul-950) 100%);
}
/* El motivo de líneas y puntos, abajo como siempre y ahora también arriba
   (§2.3). Puntos vino y líneas azules, a media luz. */
.shell::before,
.shell::after{
  content:""; position:absolute; left:0; right:0; height:170px; opacity:.55;
  pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 12% 82%, var(--vino-400) 0 1.6px, transparent 1.8px),
    radial-gradient(circle at 38% 88%, var(--azul-400) 0 1.6px, transparent 1.8px),
    radial-gradient(circle at 66% 78%, var(--vino-400) 0 1.6px, transparent 1.8px),
    radial-gradient(circle at 90% 90%, var(--azul-400) 0 1.6px, transparent 1.8px),
    linear-gradient(115deg, transparent 49.6%, rgba(93,143,230,.26) 49.6% 50.1%, transparent 50.1%),
    linear-gradient(115deg, transparent 66.6%, rgba(93,143,230,.16) 66.6% 67.1%, transparent 67.1%);
}
.shell::before{ inset:auto 0 0 0; }
.shell::after{ inset:0 0 auto 0; transform:scaleY(-1); opacity:.4; }

/* La marca: nombre de la plataforma, sin logotipo (§2.1). */
.marca-lateral{
  height:auto; min-height:var(--h-topbar); padding:var(--e-4) var(--e-5);
  gap:0; text-decoration:none; color:var(--blanco);
}
.marca-lateral:hover{ text-decoration:none; color:var(--blanco); }
.marca-lateral__texto{ display:flex; flex-direction:column; gap:4px; line-height:1; }
.marca-lateral__sigla{
  font-size:1.5rem; font-weight:800; letter-spacing:.06em; color:var(--blanco);
}
.marca-lateral__palabra{
  display:block; margin:0; font-size:var(--t-2xs); font-weight:var(--w-semi);
  letter-spacing:.32em; text-transform:uppercase; color:var(--azul-300);
}
.marca-lateral__palabra::after{
  content:""; display:block; width:28px; height:2px; margin-top:7px;
  border-radius:2px; background:var(--c-shell-linea);
}

.nav__titulo{ color:var(--azul-300); opacity:.85; }
.nav__item{
  color:var(--gris-200); overflow:visible;
  transition:background var(--m-rapido) var(--m-curva),
             box-shadow var(--m-rapido) var(--m-curva),
             color var(--m-rapido) var(--m-curva);
}
/* Línea fina vino al pasar el cursor, y la misma con el teclado (§2.3). */
.nav__item:hover,
.nav__item:focus-visible{
  background:rgba(157,188,242,.08); color:var(--blanco);
  box-shadow:inset 2px 0 0 var(--c-shell-linea);
}
.nav__item:focus-visible{ outline:2px solid var(--vino-300); outline-offset:1px; }
.nav__item[aria-current="page"]{
  background:linear-gradient(90deg, rgba(173,50,84,.42) 0%, rgba(173,50,84,.16) 100%);
  color:var(--blanco); font-weight:var(--w-semi);
  box-shadow:inset 3px 0 0 var(--vino-400);
}
.nav__item[aria-current="page"]::before{ display:none; }
.nav__item svg{ width:19px; height:19px; }
/* El brillo de circuito: al pasar el cursor por una entrada se enciende una
   pista fina hasta el borde con su nodo. Discreto, sin parpadeo ni animación
   constante, y con movimiento reducido no existe: la navegación es la misma. */
.nav__item::after{
  content:""; position:absolute; right:calc(var(--e-2) * -1); top:50%;
  width:46px; height:1px; transform:translateY(-50%); opacity:0;
  background:linear-gradient(90deg, transparent, var(--azul-400));
  box-shadow:0 0 6px rgba(93,143,230,.7);
  transition:opacity var(--m-medio) var(--m-curva), width var(--m-lento) var(--m-curva);
  pointer-events:none;
}
.nav__item:hover::after{ opacity:.9; width:64px; }
.nav__item:hover svg{ filter:drop-shadow(0 0 4px rgba(157,188,242,.55)); }
@media (prefers-reduced-motion: reduce){
  .nav__item::after{ display:none; }
  .nav__item:hover svg{ filter:none; }
}
.nav__cuenta{ background:var(--vino-500); color:var(--blanco); }
.shell__pie{ color:var(--gris-300); }

/* Menú en el teléfono: una casilla y su etiqueta, sin guion. */
.menu-movil__casilla{ position:absolute; opacity:0; pointer-events:none; }
.menu-movil__boton{ display:none; }
@media (max-width:680px){
  .menu-movil__boton{
    display:inline-flex; align-items:center; gap:var(--e-2); cursor:pointer;
    padding:6px 10px; border:1px solid var(--c-borde-fuerte); border-radius:var(--r-md);
    font-weight:var(--w-semi); color:var(--azul-800); background:var(--blanco);
  }
  .menu-movil__boton svg{ width:18px; height:18px; }
  .menu-movil__casilla:focus-visible + .app .menu-movil__boton{ outline:2px solid var(--c-vino-relleno); }
  .menu-movil__casilla:checked + .app .shell{ transform:translateX(0); box-shadow:var(--s-4); z-index:var(--z-drawer); }
  .menu-movil__casilla:checked + .app .marca-lateral__texto,
  .menu-movil__casilla:checked + .app .nav__texto,
  .menu-movil__casilla:checked + .app .nav__titulo,
  .menu-movil__casilla:checked + .app .shell__pie{ display:block; }
}
.shell__cerrar{
  display:none; position:absolute; top:var(--e-3); right:var(--e-3); z-index:2;
  color:var(--blanco); cursor:pointer; padding:4px 8px; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.25); font-size:var(--t-sm);
}

/* ------------------------------------------------------- barra superior -- */
.topbar{ border-bottom-color:var(--gris-200); }
.empresa-sel__sigla{ background:var(--vino-700); }
.empresa-sel:hover{ border-color:var(--vino-500); }
.topbar .selector select:hover{ border-color:var(--vino-500); }
.topbar__der a{ color:var(--azul-800); }
.topbar__der a:hover{ color:var(--c-vino); }

/* ----------------------------------------------------------- tarjetas -- */
.card{ border-color:var(--gris-200); box-shadow:var(--s-tarjeta); }
.card--acento{ border-top:3px solid var(--c-vino-linea); }
.card--atencion{ border-top:3px solid var(--amarillo-400); }
.card--vino{ border-top:3px solid var(--c-vino-linea); }
.card--azul{ border-top:3px solid var(--azul-600); }
.card--difuminada{ background:var(--g-suave-azul); }
.card__titulo{ color:var(--azul-950); }
/* Título con su marca: el cuadradito vino de la referencia (§3). */
.card__titulo--marca::before{
  content:""; display:inline-block; width:10px; height:10px; margin-right:10px;
  border-radius:2px; background:var(--c-vino-relleno); vertical-align:baseline;
}
.card__cab--oscura{ background:var(--azul-900); }

/* -------------------------------------------------------------- botones -- */
.btn{ border-radius:var(--r-md); transition:background var(--m-rapido) var(--m-curva),
      border-color var(--m-rapido) var(--m-curva), box-shadow var(--m-rapido) var(--m-curva),
      color var(--m-rapido) var(--m-curva); }
.btn--pral{ background:var(--vino-700); color:var(--blanco); box-shadow:0 1px 2px rgba(92,20,39,.25); }
.btn--pral:hover{ background:var(--vino-800); color:var(--blanco); text-decoration:none; }
.btn--sec{ color:var(--azul-800); border-color:var(--gris-300); }
.btn--sec:hover{ background:var(--azul-50); border-color:var(--azul-300); color:var(--azul-900); text-decoration:none; }
.btn--azul{ background:var(--azul-700); color:var(--blanco); }
.btn--azul:hover{ background:var(--azul-800); color:var(--blanco); text-decoration:none; }
/* Realce con línea vino al pasar el cursor y con el teclado (§3.2, §3.7). */
.btn--realce{
  background:var(--blanco); color:var(--azul-800); border-color:var(--azul-300);
  font-weight:var(--w-semi); box-shadow:inset 0 -2px 0 var(--azul-100);
}
.btn--realce:hover,
.btn--realce:focus-visible{
  border-color:var(--vino-500); color:var(--vino-700); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--vino-500);
}
.btn:focus-visible{ outline:2px solid var(--c-vino-relleno); outline-offset:2px; }
/* Deshabilitado con su motivo al lado: el motivo va en texto, no en el color. */
.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.motivo-deshabilitado{ display:block; margin-top:4px; font-size:var(--t-xs); color:var(--c-texto-tenue); }

/* ---------------------------------------------------------------- chips -- */
.chip--curso    { background:var(--azul-50);  color:var(--azul-800); box-shadow:inset 0 0 0 1px var(--azul-100); }
.chip--atencion { background:var(--amarillo-100); color:var(--oro-800); box-shadow:inset 0 0 0 1px var(--amarillo-400); }
.chip--bloqueo  { background:var(--rojo-50);  color:var(--rojo-700); box-shadow:inset 0 0 0 1px var(--borde-rojo); }
.chip--ok       { background:var(--teal-50);  color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--borde-teal); }
.chip--info     { background:var(--azul-50);  color:var(--azul-800); }
.chip--vino     { background:var(--vino-50);  color:var(--vino-700); box-shadow:inset 0 0 0 1px var(--vino-100); }
.chip--solido-nav{ background:var(--azul-800); }

/* --------------------------------------------------------------- bandas -- */
/* Amarillo más vivo y legible, con su acento vino (§6.2). */
.banda--atencion{
  background:var(--amarillo-100); border-color:var(--amarillo-400);
  border-left:4px solid var(--vino-600);
}
.banda--atencion .banda__titulo{ color:var(--azul-950); }
.banda--atencion .banda__icono{ color:var(--amarillo-600); }
.banda--info{ background:var(--azul-50); border-color:var(--azul-100); border-left:3px solid var(--azul-600); }
.banda--info .banda__titulo,.banda--info .banda__icono{ color:var(--azul-800); }
.aviso{ border-left-color:var(--vino-500); }

/* --------------------------------------------------------------- tablas -- */
.tabla-env--marco{
  border:1px solid var(--gris-200); border-top:3px solid var(--c-vino-linea);
  border-radius:var(--r-lg); background:var(--blanco); box-shadow:var(--s-tarjeta);
}
.tabla tbody tr:hover{ background:var(--azul-50); }

/* --------------------------------------------------------------- pestañas */
.tab[aria-selected="true"]{ color:var(--vino-700); border-bottom-color:var(--vino-600); }
.tab[aria-selected="true"] .tab__cuenta{ background:var(--vino-50); color:var(--vino-700); }

/* ======================================================= pestañas reales ===
   Botones de radio y sus etiquetas: al elegir una, cambia el panel visible y
   no hay ningún salto a un ancla (§1.2, §6.2). Lo escrito en un panel oculto
   sigue en la página —ocultar no borra—, así que cambiar de pestaña no pierde
   nada sin guardar. Con el teclado: tabulador hasta la pestaña elegida y
   flechas para cambiar, que es como se maneja cualquier grupo de radios.

     <div class="pestanas">
       <input class="pestanas__radio" type="radio" name="p" id="p-1" checked>
       <input class="pestanas__radio" type="radio" name="p" id="p-2">
       <div class="pestanas__lista">
         <label class="pestanas__tab" for="p-1">Uno</label>
         <label class="pestanas__tab" for="p-2">Dos</label>
       </div>
       <div class="pestanas__paneles">
         <section class="pestanas__panel">…</section>
         <section class="pestanas__panel">…</section>
       </div>
     </div>

   Hasta ocho pestañas. La que abre la página la decide el servidor
   (`?pestana=`), de modo que un enlace puede llevar a una en concreto. */
.pestanas{ position:relative; }
.pestanas__radio{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pestanas__lista{
  display:flex; gap:var(--e-1); flex-wrap:nowrap; overflow-x:auto;
  border-bottom:1px solid var(--gris-200); margin-bottom:var(--e-5);
  scrollbar-width:thin;
}
.pestanas__tab{
  position:relative; padding:var(--e-3) var(--e-4); cursor:pointer; white-space:nowrap;
  font-size:var(--t-lg); font-weight:var(--w-medio); color:var(--gris-600);
  border-bottom:3px solid transparent; margin-bottom:-1px; user-select:none;
  transition:color var(--m-rapido) var(--m-curva), border-color var(--m-rapido) var(--m-curva);
}
.pestanas__tab:hover{ color:var(--azul-900); border-bottom-color:var(--vino-100); }
.pestanas__panel{ display:none; }
.pestanas__radio:nth-of-type(1):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(1),
.pestanas__radio:nth-of-type(2):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(2),
.pestanas__radio:nth-of-type(3):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(3),
.pestanas__radio:nth-of-type(4):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(4),
.pestanas__radio:nth-of-type(5):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(5),
.pestanas__radio:nth-of-type(6):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(6),
.pestanas__radio:nth-of-type(7):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(7),
.pestanas__radio:nth-of-type(8):checked ~ .pestanas__paneles > .pestanas__panel:nth-of-type(8){ display:block; }
.pestanas__radio:nth-of-type(1):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(1),
.pestanas__radio:nth-of-type(2):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(2),
.pestanas__radio:nth-of-type(3):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(3),
.pestanas__radio:nth-of-type(4):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(4),
.pestanas__radio:nth-of-type(5):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(5),
.pestanas__radio:nth-of-type(6):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(6),
.pestanas__radio:nth-of-type(7):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(7),
.pestanas__radio:nth-of-type(8):checked ~ .pestanas__lista > .pestanas__tab:nth-of-type(8){
  color:var(--vino-700); font-weight:var(--w-semi); border-bottom-color:var(--vino-600);
}
.pestanas__radio:nth-of-type(1):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(1),
.pestanas__radio:nth-of-type(2):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(2),
.pestanas__radio:nth-of-type(3):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(3),
.pestanas__radio:nth-of-type(4):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(4),
.pestanas__radio:nth-of-type(5):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(5),
.pestanas__radio:nth-of-type(6):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(6),
.pestanas__radio:nth-of-type(7):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(7),
.pestanas__radio:nth-of-type(8):focus-visible ~ .pestanas__lista > .pestanas__tab:nth-of-type(8){
  outline:2px solid var(--c-vino-relleno); outline-offset:-2px; border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.pestanas__cuenta{
  margin-left:6px; padding:1px 7px; border-radius:var(--r-full); font-size:var(--t-2xs);
  font-weight:var(--w-bold); background:var(--gris-100); color:var(--gris-700);
}
@media print{
  .pestanas__lista{ display:none; }
  .pestanas__panel{ display:block !important; }
}

/* ============================================================ desplegable ==
   `details.desplegable` ya existía (segunda parte): el plegable pequeño
   dentro de una tarjeta —«Corregir la salida»—. Aquí sólo gana la flecha y
   el foco vino. La sección plegable en caja propia es la variante
   `desplegable--caja`:

     <details class="desplegable desplegable--caja">
       <summary>Título <span class="desplegable__resumen">estado</span></summary>
       <div class="desplegable__cuerpo">…</div>
     </details>

   Abre y cierra con el teclado y con el dedo; el resumen dice qué hay dentro
   y su estado aunque esté cerrado. */
.desplegable > summary{ list-style:none; gap:var(--e-3); }
.desplegable > summary::-webkit-details-marker{ display:none; }
.desplegable > summary::after{
  content:""; margin-left:auto; flex-shrink:0; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--m-rapido) var(--m-curva);
}
.desplegable[open] > summary::after{ transform:rotate(225deg) translateY(-2px); }
details.desplegable > summary{ color:var(--azul-800); }
details.desplegable > summary:hover{ color:var(--vino-700); }
details.desplegable > summary:focus-visible{ outline:2px solid var(--c-vino-relleno); outline-offset:2px; }

.desplegable--caja{
  background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--r-lg);
  box-shadow:var(--s-1);
}
.desplegable--caja + .desplegable--caja{ margin-top:var(--e-3); }
details.desplegable--caja > summary{
  display:flex; align-items:center; cursor:pointer; min-height:48px;
  padding:var(--e-3) var(--e-5); font-weight:var(--w-semi); color:var(--azul-950);
  border-radius:var(--r-lg);
}
details.desplegable--caja > summary::after{ color:var(--azul-700); }
details.desplegable--caja > summary:hover{ color:var(--azul-950); box-shadow:inset 3px 0 0 var(--vino-500); }
details.desplegable--caja[open] > summary{ border-bottom:1px solid var(--gris-200); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.desplegable__resumen{ font-weight:var(--w-normal); color:var(--c-texto-medio); font-size:var(--t-sm); }
.desplegable__cuerpo{ padding:var(--e-4) var(--e-5); }
@media print{ .desplegable > :not(summary){ display:block !important; } }

/* ------------------------------------------- componentes de la segunda parte --
   Los de la aplicación que seguían en teal y oro: el botón `.boton`, los
   avisos, las cifras, el paso a paso, el menú «⋮» y la ficha. Mismo
   significado, paleta nueva. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.boton:focus-visible, a:focus-visible{ outline-color:var(--c-vino-relleno); }
.boton{ background:var(--vino-700); color:var(--blanco); }
.boton:hover{ background:var(--vino-800); color:var(--blanco); }
.boton--tenue{ background:var(--blanco); color:var(--azul-800); border:1px solid var(--gris-300); }
.boton--tenue:hover{ background:var(--azul-50); color:var(--azul-900); border-color:var(--azul-300); }
.aviso{ border-left:4px solid var(--vino-500); background:var(--amarillo-100); color:var(--gris-700); }
.aviso--error{ border-left-color:var(--rojo-700); background:var(--rojo-50); color:var(--rojo-700); }
.aviso--ok{ border-left-color:var(--teal-600); background:var(--teal-50); color:var(--azul-950); }
.cifra{ border-left-color:var(--azul-600); }
.cifra--atencion{ border-left-color:var(--amarillo-400); }
.paso--hecho::before{ background:var(--teal-50); color:var(--teal-700); }
.paso--actual::before{ background:var(--vino-700); color:var(--blanco); }
.paso--actual .paso__estado{ color:var(--vino-700); }
.kpi--acento{ border-left-color:var(--azul-600); }
.kpi--atencion{ border-left-color:var(--amarillo-400); }
a.kpi--enlace:hover{ border-color:var(--vino-500); }
a.kpi--enlace:focus-visible,
.menu-fila > summary:focus-visible{ outline-color:var(--c-vino-relleno); }
.menu-fila__caja a:hover{ background:var(--azul-50); color:var(--azul-900); box-shadow:inset 2px 0 0 var(--vino-500); }
.tarjeta:target, tr:target > td{ background:var(--azul-50); border-left-color:var(--vino-500); }
.tarjeta--atencion{ border-left-color:var(--vino-500); background:var(--amarillo-100); }
.tareas{ border-left-color:var(--vino-500); }
.tareas__texto::before{ background:var(--azul-500); }
.tareas__fila--atencion .tareas__texto::before{ background:var(--amarillo-600); }
.ficha-indice a:hover,.ficha-indice a:focus{ border-color:var(--vino-500); color:var(--vino-700); }
.ficha-seccion__titulo{ border-bottom-color:var(--vino-500); }
.calendario__dia--hoy{ box-shadow:inset 0 0 0 2px var(--vino-600); }
.cabecera__sesion a{ color:var(--azul-300); }

/* ================================================================ franja ===
   Una fila compacta de cifras con su enlace (Inicio, opción A): cada cifra con
   su palabra —el color nunca va solo— y separadores finos. No es un gráfico
   de porciones: los estados se pueden superponer y aquí no se suman. */
.franja{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:0;
  background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--r-lg);
  box-shadow:var(--s-tarjeta); padding:var(--e-3) var(--e-4);
}
.franja__titulo{
  display:flex; align-items:center; padding:0 var(--e-4) 0 var(--e-2);
  font-size:var(--t-xs); font-weight:var(--w-semi); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--gris-600);
}
.franja__it{
  display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) var(--e-5);
  border-left:1px solid var(--gris-200); text-decoration:none; color:var(--azul-950);
  border-radius:var(--r-md); transition:background var(--m-rapido) var(--m-curva), box-shadow var(--m-rapido) var(--m-curva);
}
a.franja__it:hover,a.franja__it:focus-visible{ background:var(--azul-50); text-decoration:none; box-shadow:inset 0 -2px 0 var(--vino-500); }
.franja__cifra{ font-size:2rem; font-weight:var(--w-bold); line-height:1; font-variant-numeric:tabular-nums; }
.franja__et{ font-weight:var(--w-semi); font-size:var(--t-md); }
.franja__et::after{ content:" →"; }
.franja__it--curso .franja__cifra,.franja__it--curso .franja__et{ color:var(--teal-700); }
.franja__it--atraso .franja__cifra,.franja__it--atraso .franja__et{ color:var(--vino-700); }
.franja__it--detenido .franja__cifra,.franja__it--detenido .franja__et{ color:var(--gris-700); }
.franja__it--azul .franja__cifra,.franja__it--azul .franja__et{ color:var(--azul-800); }
.franja__historial{ margin-left:auto; font-size:var(--t-sm); color:var(--gris-700); }
.franja__historial b{ color:var(--azul-950); }
@media (max-width:900px){
  .franja__it{ border-left:0; padding:var(--e-2) var(--e-3); }
  .franja__historial{ margin-left:0; width:100%; }
}

/* =========================================================== indicadores ===
   Cifras compactas e integradas en una sola caja (listado de trabajadores,
   Cumplimiento, Resumen). Cada una con su rótulo; las que piden atención lo
   dicen también con palabra. */
.indicadores{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0;
  background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--r-lg);
  box-shadow:var(--s-tarjeta); overflow:hidden;
}
.indicadores__it{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:var(--e-4) var(--e-3); text-align:center; border-left:1px solid var(--gris-200);
  color:var(--azul-950); text-decoration:none; position:relative;
}
.indicadores__it:first-child{ border-left:0; }
a.indicadores__it:hover,a.indicadores__it:focus-visible{ background:var(--azul-50); text-decoration:none; }
a.indicadores__it:hover::after,a.indicadores__it:focus-visible::after{
  content:""; position:absolute; left:20%; right:20%; bottom:0; height:2px; background:var(--vino-500);
}
.indicadores__cifra{ font-size:1.75rem; font-weight:var(--w-bold); line-height:1.05; font-variant-numeric:tabular-nums; }
.indicadores__et{ font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--gris-700); }
.indicadores__nota{ font-size:var(--t-xs); color:var(--c-texto-tenue); }
.indicadores__it--vino .indicadores__cifra{ color:var(--vino-700); }
.indicadores__it--azul .indicadores__cifra{ color:var(--azul-700); }
.indicadores__it--ok .indicadores__cifra{ color:var(--teal-700); }
.indicadores__it--atencion .indicadores__cifra{ color:var(--oro-800); }
.indicadores__it--atencion{ background:var(--amarillo-100); }
@media (max-width:680px){
  .indicadores{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .indicadores__it{ border-left:0; border-top:1px solid var(--gris-200); }
}

/* ========================================================== lista acción ===
   Renglones compactos de «qué hacer»: un punto de color con su palabra, el
   texto, cuándo vence y el botón que lo resuelve (Inicio, Pendientes). */
.acciones-lista{ list-style:none; margin:0; padding:0; }
.acciones-lista__it{
  display:flex; align-items:center; gap:var(--e-4); padding:var(--e-3) var(--e-5);
  border-bottom:1px solid var(--gris-100); transition:background var(--m-rapido) var(--m-curva);
}
.acciones-lista__it:last-child{ border-bottom:0; }
.acciones-lista__it:hover{ background:var(--g-suave-vino); }
.acciones-lista__punto{
  flex-shrink:0; width:11px; height:11px; border-radius:var(--r-full);
  background:var(--azul-500); box-shadow:0 0 0 4px var(--azul-100);
}
.acciones-lista__it--atencion .acciones-lista__punto{ background:var(--amarillo-600); box-shadow:0 0 0 4px var(--amarillo-100); }
.acciones-lista__it--peligro .acciones-lista__punto{ background:var(--vino-600); box-shadow:0 0 0 4px var(--vino-100); }
.acciones-lista__it--ok .acciones-lista__punto{ background:var(--teal-500); box-shadow:0 0 0 4px var(--teal-50); }
.acciones-lista__texto{ flex:1; min-width:0; font-size:var(--t-lg); color:var(--azul-950); }
.acciones-lista__meta{ display:block; font-size:var(--t-sm); color:var(--c-texto-tenue); margin-top:2px; }
.acciones-lista__vence{ flex-shrink:0; font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--gris-700); }
.acciones-lista__vence--tarde{ color:var(--vino-700); }
@media (max-width:720px){
  .acciones-lista__it{ flex-wrap:wrap; }
  .acciones-lista__it .btn{ width:100%; }
}

/* =================================================== cabecera expediente ===
   Trabajadores y Empresa comparten composición (§6.2, §18): identificación a
   la izquierda, datos principales en una línea y la foto o el logo a la
   derecha. */
.expediente-cab{
  display:flex; align-items:flex-start; gap:var(--e-6);
  background:var(--g-suave-azul); border:1px solid var(--gris-200);
  border-top:3px solid var(--c-vino-linea); border-radius:var(--r-lg);
  box-shadow:var(--s-tarjeta); padding:var(--e-5) var(--e-6); margin-bottom:var(--e-5);
}
.expediente-cab__cuerpo{ flex:1; min-width:0; }
.expediente-cab__nombre{ font-size:1.75rem; font-weight:var(--w-bold); color:var(--azul-950); letter-spacing:-.01em; }
.expediente-cab__linea{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-4); margin-top:var(--e-2); font-size:var(--t-lg); color:var(--gris-700); }
.expediente-cab__datos{ display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5); margin-top:var(--e-3); font-size:var(--t-md); color:var(--gris-700); }
.expediente-cab__datos b{ color:var(--azul-950); font-weight:var(--w-semi); }
.expediente-cab__acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }
.expediente-cab__lado{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:var(--e-2); }
@media (max-width:680px){
  .expediente-cab{ flex-direction:column-reverse; padding:var(--e-4); }
  .expediente-cab__lado{ align-self:flex-start; }
}

/* Foto tipo pasaporte: 35 × 45, la proporción del documento. */
.foto-pasaporte{
  width:120px; aspect-ratio:7 / 9; object-fit:cover; border-radius:var(--r-md);
  border:3px solid var(--blanco); box-shadow:0 0 0 1px var(--gris-300), var(--s-2);
  background:var(--gris-100);
}
.foto-pasaporte--vacia{
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--gris-600); font-size:var(--t-xs); padding:var(--e-2);
  background:repeating-linear-gradient(135deg, var(--gris-50) 0 8px, var(--gris-100) 8px 16px);
}

/* Datos en dos columnas, compactos, dentro de las tarjetas del expediente. */
.datos-lista{ display:grid; grid-template-columns:minmax(120px, 42%) 1fr; gap:var(--e-2) var(--e-4); margin:0; }
.datos-lista dt{ color:var(--gris-600); font-size:var(--t-sm); }
.datos-lista dd{ margin:0; color:var(--azul-950); font-weight:var(--w-medio); }
@media (max-width:480px){ .datos-lista{ grid-template-columns:1fr; } .datos-lista dd{ margin-bottom:var(--e-2); } }

/* Rejilla compacta para tarjetas del mismo nivel. */
.rejilla-tarjetas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--e-4); align-items:start; }

/* Desplazamiento propio y razonable para secciones extensas (§6.2). */
.caja-desplazable{ max-height:min(70vh, 640px); overflow:auto; scrollbar-width:thin; }

/* Volver a un listado conservando período y filtros. */
.volver{
  display:inline-flex; align-items:center; gap:6px; font-weight:var(--w-semi);
  color:var(--azul-800); text-decoration:none; padding:4px 0;
}
.volver::before{ content:"←"; }
.volver:hover{ color:var(--vino-700); text-decoration:none; box-shadow:inset 0 -2px 0 var(--vino-500); }

/* Estados de carga, vacío y error, breves. */
.estado-vacio{
  text-align:center; padding:var(--e-8) var(--e-5); color:var(--gris-600);
  border:1px dashed var(--gris-300); border-radius:var(--r-lg); background:var(--gris-50);
}
.estado-vacio__titulo{ font-weight:var(--w-semi); color:var(--azul-950); margin-bottom:var(--e-1); }
.campo-error{ display:block; margin-top:4px; font-size:var(--t-sm); color:var(--rojo-700); font-weight:var(--w-medio); }

/* Recorrido en pasos (Firmas, Nómina): una línea con sus etapas. */
.recorrido{ display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0 0 var(--e-4); padding:0; counter-reset:paso; }
.recorrido__paso{
  display:flex; align-items:center; gap:var(--e-2); padding:var(--e-2) var(--e-4) var(--e-2) 0;
  font-size:var(--t-sm); color:var(--gris-600); counter-increment:paso;
}
.recorrido__paso::before{
  content:counter(paso); display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--r-full); font-weight:var(--w-bold); font-size:var(--t-xs);
  background:var(--gris-100); color:var(--gris-700); box-shadow:inset 0 0 0 1px var(--gris-300);
}
.recorrido__paso:not(:last-child)::after{ content:""; width:28px; height:2px; margin-left:var(--e-3); background:var(--gris-300); }
.recorrido__paso--hecho::before{ content:"✓"; background:var(--teal-50); color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--borde-teal); }
.recorrido__paso--actual{ color:var(--azul-950); font-weight:var(--w-semi); }
.recorrido__paso--actual::before{ background:var(--vino-700); color:var(--blanco); box-shadow:none; }

/* -------------------------------------------- ingreso y páginas de error --
   La marca tipográfica en lugar del logotipo del bufete (§2.1), sobre un
   lienzo azul muy claro; la tarjeta con su línea vino. */
.entrada{ background:linear-gradient(160deg, var(--azul-50) 0%, var(--lcr-hueso) 55%, var(--vino-50) 100%); }
.entrada__marca--texto{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 24px; }
.entrada__sigla{ font-size:2.6rem; font-weight:800; letter-spacing:.08em; line-height:1; color:var(--azul-950); }
.entrada__palabra{ font-size:var(--t-xs); font-weight:var(--w-semi); letter-spacing:.36em; text-transform:uppercase; color:var(--azul-700); }
.entrada__palabra::after{ content:""; display:block; width:36px; height:3px; margin:10px auto 0; border-radius:2px; background:var(--c-vino-linea); }
.entrada .tarjeta{ border-top:3px solid var(--c-vino-linea); }

/* ------------------------------------------------ cabecera de tabla clara --
   La cabecera navy del prototipo pesaba más que los datos; como en la
   referencia del listado (captura 29), clara y con su línea. */
.tabla th{
  background:var(--gris-100); color:var(--gris-700);
  border-bottom:2px solid var(--gris-200);
}

/* «Cerrar» del menú del teléfono: va después de su regla base, que lo
   esconde en escritorio; antes, la regla base ganaba por orden. */
@media (max-width:680px){ .shell__cerrar{ display:inline-flex; } }