/* ==========================================================================
   IA-SST — sistema de diseño
   --------------------------------------------------------------------------
   Marca FASEM, muestreada del logo real (logo-fasem-v2.png):
     amarillo #FFDD21 · carbón #373435 · blanco

   Decisión de color, y es una decisión de producto, no estética:
   en seguridad y salud en el trabajo el amarillo YA significa algo —
   "atención". Así que aquí el amarillo de marca y el estado "esto te toca"
   son el mismo color a propósito. El trabajo de la aplicación es decir qué
   necesita atención; que el color de la marca sea justo ese hace que la
   identidad sea funcional en vez de decorativa.

   Consecuencia: la escala semántica NO usa amarillo para "advertencia",
   porque ya está tomado. Verde al día · amarillo te toca · rojo vencido.

   Sin framework CSS y sin paso de compilación: el servidor es alojamiento
   compartido y un despliegue no puede depender de que alguien corra Vite.
   ========================================================================== */

:root {
  /* --- Marca 2026-08-26: la del logo nuevo -----------------------------
     Azul marino profundo + amarillo vivo con cuerpo de ámbar. El carbón
     tibio de antes se reemplaza por el azul del símbolo: los neutros dejan
     de ser beige y pasan a fríos, que es lo que hace ver «pastel» o
     «profesional» una misma pantalla. El nombre --fasem-carbon se conserva
     para no tocar cuarenta vistas: ahora ES el azul de marca. */
  --fasem-amarillo: #FFD60A;
  --amarillo-vivo:  #FFC300;
  --fasem-carbon:   #14213D;
  --carbon:         var(--fasem-carbon);
  --azul-profundo:  #0D1730;

  /* Amarillo oscurecido para texto y bordes: el vivo sobre blanco no tiene
     contraste legible. Este mantiene el tono y llega a AA. */
  --amarillo-tinta: #8A6400;
  --amarillo-suave: #FFF3C2;
  --amarillo-borde: #EDB800;

  /* --- Neutros, sesgados hacia el azul de marca (no gris puro) -------- */
  --fondo:        #EEF1F7;
  --superficie:   #FFFFFF;
  --superficie-2: #F2F4F9;
  --tinta:        #0F1830;
  --tinta-2:      #2E3A57;
  --tinta-suave:  #52607F;
  --tinta-tenue:  #8792AC;
  --linea:        #D4DAE8;
  --linea-suave:  #E6EAF2;

  /* --- Semántica: saturada, que se vea desde lejos -------------------- */
  --al-dia:        #0B7A4B;
  --al-dia-fondo:  #DCF2E6;
  --te-toca:       var(--amarillo-tinta);
  --te-toca-fondo: var(--amarillo-suave);
  --vencido:       #C22214;
  --vencido-fondo: #FBE4E0;
  /* Ni al día ni vencido: el aviso de que falta poco. Tercer color del
     semáforo de estándares. */
  --por-vencer:       #C77B10;
  --por-vencer-fondo: #FDF1DC;
  --no-aplica:     #52607F;
  --no-aplica-fondo: var(--superficie-2);
  --cal-tarea:      #C77B10;
  --cal-programado: #3B5BA5;

  /* --- Tipografía ----------------------------------------------------- */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Ritmo ---------------------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --radio: 10px;
  --radio-s: 6px;

  --sombra: 0 1px 2px rgba(15, 24, 48, .07), 0 4px 14px rgba(15, 24, 48, .06);
  --sombra-alta: 0 2px 4px rgba(15, 24, 48, .09), 0 14px 30px rgba(15, 24, 48, .13);

  /* Zona segura en teléfonos con muesca — la app se usa parada en una obra. */
  --safe-inf: env(safe-area-inset-bottom, 0px);
  --safe-sup: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        #0B1120;
    --superficie:   #121B31;
    --superficie-2: #1A2540;
    --tinta:        #EEF1F8;
    --tinta-2:      #C4CCDE;
    --tinta-suave:  #93A0BC;
    --tinta-tenue:  #66738F;
    --linea:        #2A3654;
    --linea-suave:  #1F2A46;

    --amarillo-tinta: #FFD60A;
    --amarillo-suave: #2E2A12;
    --amarillo-borde: #8A7414;

    --al-dia:        #55C795;
    --al-dia-fondo:  #12291E;
    --vencido:       #F09186;
    --vencido-fondo: #331613;
    --por-vencer:       #E9A83F;
    --por-vencer-fondo: #33260F;
    --cal-tarea:      #E9A83F;
    --cal-programado: #7E9BE0;
    --no-aplica-fondo: var(--superficie-2);

    --sombra: 0 1px 2px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
    --sombra-alta: 0 2px 4px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.45);
  }
}

:root[data-tema="oscuro"] {
  --fondo:        #0B1120;
  --superficie:   #121B31;
  --superficie-2: #1A2540;
  --tinta:        #EEF1F8;
  --tinta-2:      #C4CCDE;
  --tinta-suave:  #93A0BC;
  --tinta-tenue:  #66738F;
  --linea:        #2A3654;
  --linea-suave:  #1F2A46;
  --amarillo-tinta: #FFD60A;
  --amarillo-suave: #2E2A12;
  --amarillo-borde: #8A7414;
  --al-dia:        #55C795;
  --al-dia-fondo:  #12291E;
  --vencido:       #F09186;
  --vencido-fondo: #331613;
  --por-vencer:       #E9A83F;
  --por-vencer-fondo: #33260F;
  --cal-tarea:      #E9A83F;
  --cal-programado: #7E9BE0;
  --no-aplica-fondo: var(--superficie-2);
  --sombra: 0 1px 2px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.45);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 16px;          /* nunca menos: iOS hace zoom al enfocar inputs < 16px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

h1, h2, h3 { color: var(--tinta); margin: 0; text-wrap: balance; line-height: 1.2; }
p { margin: 0; }
/* `height: auto` junto al `max-width` no es adorno: sin él, cualquier alto
   heredado —de una celda de tabla, de un flex con `align-items: stretch`—
   estira la imagen y deforma un logo. Los logos y las fotos de esta
   plataforma son de otras personas: deformarlos no es un error de estilo. */
img, svg { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--fasem-amarillo);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

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

/* ==========================================================================
   Estructura — móvil primero, un solo pulgar
   ========================================================================== */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Sin tope: la aplicación ocupa la pantalla que tenga. Antes se quedaba en
     una columna de 780 con dos franjas vacías a los lados, y el tablero de
     una empresa —tres columnas y una curva— cabía en menos de la mitad del
     monitor con el que se trabaja. Lo que sí se acota es el ancho de lectura,
     y eso se hace adentro. */
  background: var(--fondo);
}

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e3);
  padding: calc(var(--e3) + var(--safe-sup)) var(--e4) var(--e3);
  background: var(--fasem-carbon);
  color: #FFF;
}
.barra__marca { display: flex; align-items: baseline; gap: var(--e2); font-weight: 800; letter-spacing: -.02em; }
.barra__marca b { color: var(--fasem-amarillo); }

/* El contenido se centra y respira. El tope alto es para que en un monitor
   ancho una frase no cruce la pantalla entera —a partir de cierto ancho leer
   cuesta más, no menos—, pero deja sitio de sobra a las tres columnas del
   tablero, que es lo que antes no cabía. */
.lienzo {
  flex: 1; width: 100%; max-width: 1440px; margin-inline: auto;
  padding: var(--e5) var(--e4) calc(var(--e8) + var(--safe-inf));
  display: flex; flex-direction: column; gap: var(--e5);
}

@media (min-width: 720px) {
  .lienzo { padding-inline: var(--e6); }
}

/* La barra sí va de borde a borde: es el marco de la aplicación. Lo que se
   alinea con el contenido es lo que lleva dentro. */
.barra__dentro {
  width: 100%; max-width: 1440px; margin-inline: auto;
  display: flex; align-items: center; gap: inherit;
}

/* ==========================================================================
   El relato — toda pantalla abre con una frase, nunca con un número
   ========================================================================== */

.relato { display: flex; flex-direction: column; gap: var(--e3); }

.relato__antetitulo {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-tenue);
}

.relato__frase {
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--tinta);
}
.relato__frase em { font-style: normal; color: var(--amarillo-tinta); }

.relato__apoyo { color: var(--tinta-suave); font-size: 1rem; max-width: 60ch; }

/* El número existe, y se puede abrir. Nunca es lo primero. */
.cifra {
  display: flex; align-items: baseline; gap: var(--e2);
  font-variant-numeric: tabular-nums;
}
.cifra__valor { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); }
.cifra__de { font-size: 1rem; color: var(--tinta-tenue); }

/* ==========================================================================
   Bloques
   ========================================================================== */

.bloque {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.bloque__cabeza {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e3);
  border-bottom: 1px solid var(--linea-suave);
}
.bloque__titulo { font-size: .96rem; font-weight: 700; color: var(--tinta); }
.bloque__nota { margin-left: auto; font-size: .78rem; color: var(--tinta-tenue); }

/* ==========================================================================
   Campo derivado — cada dato dice de dónde salió
   ========================================================================== */

.campos { display: flex; flex-direction: column; }

.campo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e1) var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea-suave);
  align-items: start;
}
.campo:last-child { border-bottom: none; }
.campo--atencion { background: var(--te-toca-fondo); }

.campo__nombre { font-size: .76rem; color: var(--tinta-suave); grid-column: 1; }
.campo__valor  { font-size: 1.02rem; font-weight: 650; color: var(--tinta); grid-column: 1; word-break: break-word; }
.campo__valor--vacio { color: var(--tinta-tenue); font-weight: 400; font-style: italic; }
.campo__origen { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.campo__porque {
  grid-column: 1 / -1; font-size: .82rem; color: var(--tinta-suave);
  margin-top: var(--e1);
}

/* Una fila que se toca. La flecha va en pseudo-elemento para que el área
   táctil sea la fila entera y no un icono de 16 píxeles: quien usa esto lo
   hace de pie, en una bodega, con una mano. */
.campo--enlace {
  text-decoration: none; color: inherit; cursor: pointer;
  min-height: 56px; align-content: center;
  position: relative; padding-right: calc(var(--e4) + 18px);
}
.campo--enlace::after {
  content: '›'; position: absolute; right: var(--e4); top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--tinta-tenue);
}
.campo--enlace:hover { background: var(--te-toca-fondo); }
.campo--enlace:focus-visible {
  outline: 3px solid var(--fasem-amarillo); outline-offset: -3px;
}

.sello {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.sello--derivado   { background: var(--al-dia-fondo);   color: var(--al-dia); }
.sello--confirmado { background: var(--al-dia-fondo);   color: var(--al-dia); }
.sello--dudoso     { background: var(--te-toca-fondo);  color: var(--te-toca); border: 1px solid var(--amarillo-borde); }
.sello--faltante   { background: var(--vencido-fondo);  color: var(--vencido); }
.sello--neutro     { background: var(--superficie-2);   color: var(--tinta-suave); }

/* ==========================================================================
   Estándares
   ========================================================================== */

.estandar {
  display: grid; grid-template-columns: 6px 1fr auto; gap: 0 var(--e3);
  border-bottom: 1px solid var(--linea-suave);
  align-items: stretch;
}
.estandar:last-child { border-bottom: none; }

.estandar__franja { background: var(--no-aplica); }
.estandar--al-dia  .estandar__franja { background: var(--al-dia); }
.estandar--te-toca .estandar__franja { background: var(--fasem-amarillo); }
.estandar--vencido .estandar__franja { background: var(--vencido); }

.estandar__cuerpo { padding: var(--e3) 0; align-self: center; }
.estandar__nombre { display: block; font-size: .95rem; font-weight: 650; color: var(--tinta); }
.estandar__estado { display: block; font-size: .82rem; color: var(--tinta-suave); margin-top: 2px; }
.estandar__peso {
  font-family: var(--mono); font-size: .8rem; color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
  align-self: center; padding-right: var(--e4);
}

/* ==========================================================================
   Acciones
   ========================================================================== */

.acciones { display: flex; flex-direction: column; gap: var(--e3); }
@media (min-width: 560px) { .acciones { flex-direction: row; } .acciones > * { flex: 1; } }

/* Las acciones que escriben en la base son formularios, no enlaces. El
   formulario no debe verse: el que se alinea con los demás botones es el
   botón que lleva dentro. Con `display: contents` el botón pasa a ser hijo
   de la fila, pero `.acciones > *` ya no lo alcanza — hay que repartirle el
   ancho aparte o queda a media asta junto a los demás. */
.acciones > form { display: contents; }
@media (min-width: 560px) { .acciones > form > .boton { flex: 1; } }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 52px;              /* pulgar con guante, no cursor */
  padding: var(--e3) var(--e5);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  border-radius: var(--radio); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.boton:active { transform: translateY(1px); }

.boton--principal {
  background: var(--fasem-amarillo);
  color: var(--fasem-carbon);     /* el único par de marca que da contraste real */
  box-shadow: var(--sombra);
}
.boton--principal:hover { box-shadow: var(--sombra-alta); }

.boton--secundario {
  background: var(--superficie); color: var(--tinta); border-color: var(--linea);
}
.boton--secundario:hover { border-color: var(--tinta-tenue); }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.desplaza-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Carga de documentos
   --------------------------------------------------------------------------
   El objetivo de esta pantalla es que no haya nada que escribir. Dos zonas
   grandes, del tamaño de un pulgar con guante, que en el celular abren la
   cámara: el RUT casi siempre está impreso sobre el escritorio de alguien.
   ========================================================================== */

.carga {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e4);
  min-height: 84px;
  background: var(--superficie);
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.carga:hover { border-color: var(--amarillo-borde); }
.carga:focus-within { outline: 3px solid var(--fasem-amarillo); outline-offset: 2px; }

.carga--lista {
  border-style: solid;
  border-color: var(--al-dia);
  background: var(--al-dia-fondo);
}

.carga__icono {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radio-s);
  background: var(--superficie-2); color: var(--tinta-suave);
}
.carga--lista .carga__icono { background: var(--superficie); color: var(--al-dia); }

.carga__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carga__cuerpo b { font-size: 1.02rem; color: var(--tinta); font-weight: 650; }
.carga__pista {
  font-size: .84rem; color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carga--lista .carga__pista { color: var(--al-dia); }

/* El input real se oculta sin sacarlo del alcance del teclado. */
.carga input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.boton[disabled] { opacity: .6; cursor: progress; }

/* ==========================================================================
   Estándar desplegable
   --------------------------------------------------------------------------
   El estándar se lee como una frase; el detalle —con qué se sustenta y qué lo
   mantiene vivo— se abre sólo si la persona lo pide. Va con <details> para que
   funcione sin JavaScript y sea navegable con teclado.
   ========================================================================== */

.estandar-detalle { border-bottom: 1px solid var(--linea-suave); }
.estandar-detalle:last-child { border-bottom: none; }
.estandar-detalle > summary { list-style: none; cursor: pointer; }
.estandar-detalle > summary::-webkit-details-marker { display: none; }
.estandar-detalle > summary { border-bottom: none; }
.estandar-detalle > summary:hover { background: var(--superficie-2); }
.estandar-detalle[open] > summary { background: var(--superficie-2); }

.estandar__ampliado {
  padding: var(--e3) var(--e4) var(--e4) calc(6px + var(--e3));
  background: var(--superficie-2);
  display: flex; flex-direction: column; gap: var(--e2);
  font-size: .9rem; color: var(--tinta-suave);
}
.estandar__ampliado b { color: var(--tinta); font-weight: 650; }
.estandar__norma {
  font-family: var(--mono); font-size: .74rem; color: var(--tinta-tenue);
  margin-top: var(--e1);
}

/* ==========================================================================
   Reporte de peligro — colaborador, celular, guantes puestos
   ========================================================================== */

.opciones { display: flex; flex-direction: column; }

.opcion {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  min-height: 54px;                /* el dedo, no el cursor */
  border-bottom: 1px solid var(--linea-suave);
  cursor: pointer;
}
.opcion:last-child { border-bottom: none; }
.opcion:hover { background: var(--superficie-2); }
.opcion--suelta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); border-bottom: 1px solid var(--linea);
}

.opcion input { width: 22px; height: 22px; accent-color: var(--fasem-carbon); flex: 0 0 auto; }
.opcion__texto { font-size: .98rem; color: var(--tinta); }
.opcion:has(input:checked) { background: var(--te-toca-fondo); }
.opcion:has(input:checked) .opcion__texto { font-weight: 650; }

.texto {
  width: 100%; font-family: inherit; font-size: 16px;  /* 16px: menos y iOS hace zoom */
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-s);
  padding: var(--e3); resize: vertical;
}
.texto:focus { outline: 3px solid var(--fasem-amarillo); outline-offset: 1px; border-color: transparent; }

/* Dentro de un campo, lo que se escribe ocupa la fila entera. Sin esto cae en
   la segunda columna —la del sello de origen— y queda un cuadro estrecho
   pegado al borde derecho, que en un celular es casi inutilizable. */
.campo > .texto { grid-column: 1 / -1; margin-top: var(--e1); }

.barra__salir { display: flex; margin-left: var(--e3); }
.barra__salir .mini {
  background: transparent; color: var(--fasem-amarillo);
  border-color: rgba(255, 221, 33, .35);
}

.mini {
  margin-left: auto; font-family: inherit; font-size: .8rem; font-weight: 700;
  padding: 6px 12px; min-height: 34px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--tinta); cursor: pointer;
}
.mini.dictando { background: var(--fasem-amarillo); border-color: var(--amarillo-borde); color: var(--fasem-carbon); }

.nota-privacidad {
  font-size: .84rem; color: var(--tinta-suave); text-align: center;
  padding: 0 var(--e3);
}

/* Acciones dentro de un grupo desplegado: caben tres y no dominan la pantalla. */
.acciones--compactas { margin-top: var(--e2); }
.acciones--compactas .boton { min-height: 44px; font-size: .9rem; padding: var(--e2) var(--e3); }
@media (min-width: 560px) { .acciones--compactas { flex-direction: row; } }

/* El porqué de cada pregunta, replegado: quien confía no lo abre. */
.porque-detalle { border-top: 1px solid var(--linea-suave); }
.porque-detalle > summary {
  padding: var(--e3) var(--e4); cursor: pointer;
  font-size: .84rem; color: var(--tinta-suave); list-style: none;
}
.porque-detalle > summary::-webkit-details-marker { display: none; }
.porque-detalle > summary:hover { color: var(--tinta); }
.porque-detalle > p {
  padding: 0 var(--e4) var(--e4); margin: 0;
  font-size: .88rem; color: var(--tinta-suave); background: var(--superficie-2);
  padding-top: var(--e3);
}

/* --- Tablas de datos dentro de un documento -------------------------------
   La matriz de peligros se lee en pantalla antes de firmarla, y se lee como
   tabla: por columnas, comparando filas. Va dentro de un `.desplaza-x`, así
   que a lo ancho se arrastra en vez de partirse — una celda de matriz partida
   en tres renglones deja de poder compararse con la de al lado. */
.tabla-datos { border-collapse: collapse; font-size: .74rem; line-height: 1.35; }
.tabla-datos th,
.tabla-datos td {
  border: 1px solid var(--linea);
  padding: .3rem .4rem;
  text-align: left;
  vertical-align: top;
  min-width: 6.5rem;
  max-width: 16rem;
  white-space: pre-line;
}
.tabla-datos th {
  background: var(--superficie-2);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
  position: sticky;
  top: 0;
}

/* --- Aviso de licencia sin verificar ---------------------------------------
   Va en todas las pantallas del asesor a propósito: el muro aparece al final
   del recorrido, en el botón de firmar, cuando ya se invirtió una mañana en
   dar de alta la empresa y hacer la matriz. */
.aviso-licencia {
  display: block;
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  border: 1px solid var(--te-toca);
  border-radius: var(--radio, 8px);
  background: var(--te-toca-fondo);
  color: var(--tinta);
  font-size: .82rem;
  text-decoration: none;
}
.aviso-licencia:hover { border-color: var(--tinta); }

/* --- La marca ------------------------------------------------------------ */
/* El logo entero lleva al inicio, y se comporta como una imagen: hereda el
   color de la barra y no se pinta de morado al visitarlo. Con el estilo de
   enlace puesto, las letras salían moradas sobre el carbón. */
.marca-lockup {
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none;
}
.marca-lockup:visited,
.marca-lockup:hover,
.marca-lockup:focus { color: inherit; text-decoration: none; }
.marca-lockup:hover { opacity: .82; }
.marca-simbolo { width: 30px; height: 30px; display: block; }

.pie-marcas {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  padding: 1.5rem 1rem 2rem; opacity: .85;
}
.pie-marcas__de {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--suave, #6E6865);
}
.pie-marcas__logo { height: 16px; width: auto; display: block; }
/* El de PAW viene azul marino sobre transparente: sobre fondo oscuro iría
   invisible. El pie vive sobre el lienzo claro, así que respira bien. */
.pie-marcas__logo--paw { height: 18px; }

/* --- El logo de la empresa cliente: el más grande de la pantalla ---------- */
.logo-empresa {
  display: block; max-height: 64px; max-width: 240px;
  /* Los dos en `auto` y sólo topes: es lo que conserva la proporción sea
     cual sea el logo. El de Critertec es 3,4 veces más ancho que alto y el
     de Yo Parrillo es casi cuadrado; con un alto fijo, uno de los dos
     saldría aplastado. */
  width: auto; height: auto; object-fit: contain;
  margin: 0 0 1rem;
}

/* ==========================================================================
   Capa 2026-08 — la plataforma respira: ancho de escritorio, navegación,
   tarjetas con presencia y un menú de empresa que se puede mirar.
   ========================================================================== */

.barra {
  padding-block: calc(var(--e4) + var(--safe-sup)) var(--e4);
  gap: var(--e4);
  box-shadow: 0 2px 14px rgba(23, 21, 20, .18);
}
.barra a.mini {
  color: var(--fasem-amarillo); font-weight: 700;
  padding: 6px 14px; border: 1.5px solid rgba(255, 221, 33, .45); border-radius: 99px;
}
.barra a.mini:hover { background: rgba(255, 221, 33, .14); }
.barra__salir .mini {
  color: rgba(255,255,255,.75); padding: 6px 12px;
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 99px; background: none;
}

.relato__frase { font-size: clamp(1.5rem, 4.2vw, 2.3rem); line-height: 1.16; }
.relato__apoyo { font-size: 1.05rem; }

.bloque {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(23,21,20,.05), 0 10px 28px -18px rgba(23,21,20,.22);
}
.bloque__cabeza { background: var(--superficie-2); padding-block: var(--e3); }
.bloque__titulo { font-size: 1.02rem; }

.campo { padding-block: var(--e4); }
.campo--enlace { transition: background .12s ease, transform .12s ease; }
.campo--enlace:hover { transform: translateX(2px); }

.boton {
  border-radius: 12px; font-weight: 750; padding: 13px 22px;
  transition: transform .1s ease, box-shadow .12s ease;
}
.boton--principal { box-shadow: 0 6px 18px -8px rgba(232, 196, 0, .8); }
.boton--principal:hover { transform: translateY(-1px); }

/* El menú de la empresa: tarjetas que se miran, no una pila de botones. */
.menu-empresa {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.menu-empresa a {
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 16px; padding: var(--e4);
  text-decoration: none; color: var(--tinta);
  box-shadow: 0 1px 2px rgba(23,21,20,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-empresa a:hover {
  transform: translateY(-2px); border-color: var(--amarillo-borde);
  box-shadow: 0 12px 26px -14px rgba(23,21,20,.3);
}
.menu-empresa a.menu-empresa--principal {
  background: var(--fasem-carbon); color: #fff; border-color: var(--fasem-carbon);
}
.menu-empresa a.menu-empresa--principal .menu-empresa__nota { color: rgba(255,255,255,.62); }
.menu-empresa a.menu-empresa--principal svg { stroke: var(--fasem-amarillo); }
.menu-empresa svg {
  width: 24px; height: 24px; stroke: var(--amarillo-tinta); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.menu-empresa__titulo { font-weight: 750; font-size: .98rem; letter-spacing: -.01em; }
.menu-empresa__nota { font-size: .78rem; color: var(--tinta-suave); line-height: 1.4; }

/* La cartera como escritorio: tarjetas de empresa con anillo y estado. */
.tarjetas-cartera {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tarjeta-cartera {
  display: flex; gap: var(--e4); align-items: center;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 18px; padding: var(--e4);
  text-decoration: none; color: var(--tinta);
  box-shadow: 0 1px 2px rgba(23,21,20,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tarjeta-cartera:hover {
  transform: translateY(-2px); border-color: var(--amarillo-borde);
  box-shadow: 0 14px 30px -16px rgba(23,21,20,.32);
}
/* La primera tarjeta: el hueco de la siguiente empresa. Discreta a
   propósito —borde punteado, sin fondo— para que no compita con los clientes
   que sí existen, pero del mismo tamaño para que se lea como uno más. */
/* El amarillo del logo, no el tenue: la tarjeta de nueva empresa es la
   única que lleva la marca puesta. Sobre él la tinta va oscura, que es como
   se usa el amarillo de FASEM en todas partes. */
.tarjeta-cartera--nueva {
  background: var(--fasem-amarillo); border-color: var(--amarillo-borde);
  color: var(--carbon);
}
.tarjeta-cartera--nueva:hover { background: var(--amarillo-vivo); }
.tarjeta-cartera--nueva .tarjeta-cartera__nombre {
  font-size: 1rem; font-weight: 800; color: var(--carbon); white-space: normal;
}
.tarjeta-cartera--nueva .tarjeta-cartera__meta {
  font-size: .74rem; color: var(--carbon); opacity: .7; white-space: normal;
}

/* --- La cinta de la esquina -------------------------------------------- */
/* Diagonal sobre la esquina superior izquierda, como el sello de una caja.
   La tarjeta recorta lo que sobra. */
.tarjeta-cartera { overflow: hidden; }
.cinta {
  position: absolute; top: 13px; left: -34px; width: 132px;
  transform: rotate(-45deg); transform-origin: center;
  text-align: center; padding: 3px 0;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; z-index: 1;
  box-shadow: 0 1px 3px rgba(15,24,48,.18);
}
.cinta--gratis { background: var(--al-dia); color: #FFFFFF; }
.cinta--casa { background: var(--fasem-amarillo); color: var(--carbon); }

/* El logo del cliente: un hueco del mismo tamaño para todas. De fondo no —
   los logos vienen de todos los anchos y con fondos distintos, y detrás del
   texto unos se leen y otros no. */
.tarjeta-cartera { position: relative; }
.tarjeta-cartera__logo {
  height: 40px; flex: none; display: flex;
  align-items: center; justify-content: flex-start; margin-bottom: 2px;
}
.tarjeta-cartera__logo img {
  max-width: 100%; max-height: 100%; object-fit: contain; opacity: .9;
}
/* Con logo, el nombre pasa a ser el pie de la marca. */
/* Con logo, el nombre es el pie de la marca: pequeño y en versalita. El
   asesor ya reconoció a su cliente por el logo — esto sólo confirma. */
.tarjeta-cartera__nombre--bajo-logo {
  font-size: .64rem; font-weight: 700; color: var(--tinta-tenue);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.35;
}

/* Casi todos los logos vienen con fondo blanco o transparente y tinta oscura:
   sobre la tarjeta oscura desaparecen. Una placa clara detrás los devuelve,
   y es lo mismo que hace el papel. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tarjeta-cartera__logo img {
    background: #FFFFFF; border-radius: 4px; padding: 2px;
  }
}
:root[data-tema="oscuro"] .tarjeta-cartera__logo img {
  background: #FFFFFF; border-radius: 4px; padding: 2px;
}

.tarjeta-cartera__anillo { width: 64px; flex: none; }
.tarjeta-cartera__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* El nombre en UNA línea y pequeño: es el pie del logo, no el titular. Si
   no cabe, se corta — «KION PROCESOS Y TECNOLOGÍA S.A.S.» partido en dos
   renglones desalinea toda la rejilla, y el título del enlace lo dice
   entero al pasar por encima. */
.tarjeta-cartera__nombre {
  font-size: .72rem; font-weight: 650; color: var(--tinta-suave);
  letter-spacing: 0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tarjeta-cartera__meta { font-size: .66rem; color: var(--tinta-tenue); }
.tarjeta-cartera__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}
.chip--rojo     { background: var(--vencido); color: var(--superficie); }
.chip--amarillo { background: var(--fasem-amarillo); color: var(--carbon); }
.chip--neutro   { background: var(--superficie-2); color: var(--tinta-suave); }

/* ==========================================================================
   Capa 2026-08-26 — la identidad del logo nuevo
   --------------------------------------------------------------------------
   Azul marino profundo y amarillo con cuerpo. La regla: el azul da la
   seriedad, el amarillo señala la acción y la atención — nunca decoración.
   ========================================================================== */

.barra {
  background: linear-gradient(160deg, #16234A 0%, var(--fasem-carbon) 55%, var(--azul-profundo) 100%);
  box-shadow: 0 2px 16px rgba(13, 23, 48, .35);
  border-bottom: 1px solid rgba(255, 214, 10, .16);
}
.barra .marca-simbolo { color: var(--fasem-amarillo); }
.barra__marca { letter-spacing: .01em; }
.barra a.mini {
  color: var(--fasem-amarillo);
  border-color: rgba(255, 214, 10, .4);
}
.barra a.mini:hover { background: rgba(255, 214, 10, .14); }

/* El titular abre con más peso: es la voz del producto. */
.relato__frase { font-weight: 800; letter-spacing: -.025em; }
.relato__antetitulo { color: var(--amarillo-tinta); font-weight: 700; }

/* Botón principal: el amarillo del logo, con cuerpo y con sombra de color. */
.boton--principal {
  background: linear-gradient(135deg, var(--amarillo-vivo), var(--fasem-amarillo) 70%);
  color: var(--fasem-carbon);
  border: none;
  box-shadow: 0 8px 20px -10px rgba(237, 184, 0, .9), 0 1px 2px rgba(15, 24, 48, .12);
}
.boton--principal:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(237, 184, 0, .95), 0 2px 4px rgba(15, 24, 48, .14);
}
.boton--secundario {
  color: var(--fasem-carbon); border: 1.5px solid #B9C2D6; font-weight: 700;
}
.boton--secundario:hover {
  border-color: var(--fasem-carbon);
  background: var(--superficie-2);
}

/* Tarjetas: borde más nítido, sombra azul, y el hover señala con la marca. */
.bloque { border-color: var(--linea); box-shadow: 0 1px 2px rgba(15,24,48,.05), 0 12px 30px -20px rgba(15,24,48,.28); }
.menu-empresa a:hover,
.tarjeta-cartera:hover { border-color: var(--amarillo-borde); box-shadow: 0 14px 30px -14px rgba(15, 24, 48, .35); }
.menu-empresa a.menu-empresa--principal {
  background: linear-gradient(160deg, #1B2B52, var(--fasem-carbon) 70%);
  border-color: var(--fasem-carbon);
}
.menu-empresa svg { stroke: var(--fasem-carbon); }
.menu-empresa a.menu-empresa--principal svg { stroke: var(--fasem-amarillo); }

.chip--rojo     { background: var(--vencido); color: #FFF; }
.chip--amarillo { background: var(--fasem-amarillo); color: var(--fasem-carbon); }

/* Lo interactivo se ve interactivo: enfoque y selección en ámbar firme. */
.texto:focus,
:focus-visible { outline-color: var(--amarillo-borde); }
.opcion input { accent-color: var(--fasem-carbon); }
.opcion:has(input:checked) { box-shadow: inset 3px 0 0 var(--amarillo-borde); }

/* En modo oscuro los azules de la barra ya son el fondo: se sube el borde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .barra { border-bottom-color: rgba(255, 214, 10, .28); }
}

/* ==========================================================================
   La portada del acceso — vende y deja entrar
   ========================================================================== */

.portada {
  position: relative; overflow: hidden; border-radius: 22px;
  background: var(--fasem-carbon); color: #FFF;
  box-shadow: 0 20px 48px -18px rgba(13, 23, 48, .55);
}
.portada__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 80% 18%;
}
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(97deg,
    rgba(13, 23, 48, .97) 0%, rgba(13, 23, 48, .93) 42%,
    rgba(16, 27, 54, .62) 66%, rgba(16, 27, 54, .22) 100%);
}
.portada__contenido {
  position: relative; max-width: 580px;
  padding: clamp(26px, 5vw, 54px);
  display: flex; flex-direction: column; gap: var(--e4);
}
.portada .relato__antetitulo { color: var(--fasem-amarillo); }
.portada h1 {
  color: #FFF; font-size: clamp(1.65rem, 4.6vw, 2.55rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
}
.portada__apoyo { color: rgba(255, 255, 255, .84); font-size: 1.02rem; max-width: 48ch; }

.portada__senales { display: flex; flex-wrap: wrap; gap: 8px; }
.senal {
  padding: 5px 13px; border-radius: 99px; font-size: .78rem; font-weight: 700;
  background: rgba(255, 214, 10, .13); border: 1px solid rgba(255, 214, 10, .38);
  color: #FFE566; white-space: nowrap;
}
.senal--llena { background: var(--fasem-amarillo); border-color: var(--fasem-amarillo); color: var(--fasem-carbon); }

.portada__aviso {
  background: rgba(255, 214, 10, .16); border: 1px solid rgba(255, 214, 10, .4);
  color: #FFE566; border-radius: 12px; padding: var(--e3); font-size: .9rem;
}

.portada__forma {
  background: #FFF; border-radius: 16px; padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e3);
  box-shadow: 0 16px 38px -14px rgba(0, 0, 0, .5);
  max-width: 430px;
}
.portada__etiqueta { font-size: .8rem; font-weight: 700; color: #52607F; }
.portada__forma .texto { color: #0F1830; background: #FFF; border-color: #D4DAE8; }
.portada__error { color: #C22214; font-size: .84rem; }
.portada__nota { font-size: .78rem; color: #8792AC; }

.portada__inscribirse { font-size: .9rem; color: rgba(255, 255, 255, .78); }
.portada__inscribirse a { color: var(--fasem-amarillo); font-weight: 700; }

/* Tres pasos, tres tarjetas parejas. */
.pasos {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.paso {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px;
  padding: var(--e4); display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--sombra);
}
.paso__numero {
  width: 30px; height: 30px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fasem-amarillo); color: var(--fasem-carbon);
  font-weight: 800; font-size: .92rem; margin-bottom: 4px;
}
.paso b { color: var(--tinta); font-size: .98rem; }
.paso p { font-size: .84rem; color: var(--tinta-suave); }

/* Las tarifas: tres tarjetas, la del medio con la cinta. */
.tarifas {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}
.tarifa {
  position: relative;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px;
  padding: var(--e5) var(--e4) var(--e4);
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--sombra);
}
.tarifa--media {
  border-color: var(--amarillo-borde);
  box-shadow: 0 16px 34px -16px rgba(237, 184, 0, .55);
}
.tarifa__cinta {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--fasem-amarillo); color: var(--fasem-carbon);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 99px; white-space: nowrap;
}
.tarifa__set { font-weight: 800; font-size: 1.06rem; color: var(--tinta); }
.tarifa__quien { font-size: .8rem; color: var(--tinta-suave); min-height: 2.6em; }
.tarifa__precio {
  font-size: 1.95rem; font-weight: 800; letter-spacing: -.03em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tarifa__precio small { font-size: .78rem; font-weight: 650; color: var(--tinta-suave); letter-spacing: 0; }
.tarifa__detal { font-size: .76rem; color: var(--tinta-tenue); border-top: 1px solid var(--linea-suave); padding-top: 8px; margin-top: 6px; }

/* En pantallas angostas la foto queda detrás del texto: el velo se cierra. */
@media (max-width: 640px) {
  .portada__velo {
    background: linear-gradient(180deg, rgba(13,23,48,.96) 0%, rgba(13,23,48,.9) 70%, rgba(13,23,48,.75) 100%);
  }
}

/* La marca dentro de la portada, grande: reemplaza a la barra en el acceso. */
.portada__marca { display: block; color: #FFF; margin-bottom: var(--e2); }
.portada__marca .marca-simbolo { width: 64px; height: 64px; color: var(--fasem-amarillo); }
.portada__marca .marca-lockup { gap: .8rem; align-items: center; }
.portada__marca .barra__marca { font-size: 2rem; letter-spacing: -.02em; }
.portada__marca .barra__marca b { color: var(--fasem-amarillo); }

/* Todo lo que cuelga bajo las señales comparte la misma columna que la
   tarjeta: aviso, formulario e invitación alineados a un solo ancho. */
.portada__aviso,
.portada__inscribirse { max-width: 430px; }
.portada__aviso { font-weight: 600; }
.portada__inscribirse { font-size: .88rem; }
.portada__forma a { color: var(--amarillo-tinta); font-weight: 700; }

/* Las tres señales, parejas: misma columna de 430px que la tarjeta, una
   debajo de la otra y todas del mismo ancho. */
.portada__senales { flex-direction: column; gap: 8px; max-width: 430px; }
.senal { width: 100%; text-align: center; padding-block: 8px; }

/* El «o» que separa el código de la llave, dentro de la tarjeta blanca. */
.portada__o { display: flex; flex-direction: column; gap: var(--e3); }
.portada__o-linea { display: flex; align-items: center; gap: 10px; color: #8792AC; font-size: .78rem; }
.portada__o-linea i { flex: 1; height: 1px; background: #E6EAF2; }

/* El formulario de agregar peligro, replegado: la matriz manda en la página. */
.agregar-peligro > summary { list-style: none; cursor: pointer; }
.agregar-peligro > summary::-webkit-details-marker { display: none; }
.agregar-peligro__llamado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  background: var(--superficie); border: 1.5px dashed var(--linea);
  border-radius: 16px; padding: var(--e4);
  font-weight: 750; color: var(--tinta);
}
.agregar-peligro__llamado::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border-radius: 99px;
  background: var(--fasem-amarillo); color: var(--fasem-carbon);
  font-size: 1.2rem; font-weight: 800;
}
.agregar-peligro__llamado > span:first-of-type { flex: 1; }
.agregar-peligro__nota { font-size: .76rem; font-weight: 600; color: var(--tinta-tenue); }
.agregar-peligro__llamado:hover { border-color: var(--amarillo-borde); }
.agregar-peligro[open] > summary { margin-bottom: var(--e3); }
.agregar-peligro[open] .agregar-peligro__llamado::before { content: '–'; }
.agregar-peligro > form { display: flex; flex-direction: column; gap: var(--e5); }

/* Los grupos del menú de la empresa: el mapa se lee por fases, no como una
   pila de dieciséis tarjetas iguales. */
.menu-empresa__grupo {
  grid-column: 1 / -1;
  margin-top: var(--e2);
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-tenue);
}

/* El recorrido: el guion de venta contra los datos reales. */
.recorrido__barra {
  margin-top: var(--e4); height: 10px; border-radius: 99px;
  background: var(--superficie-2); overflow: hidden; max-width: 520px;
}
.recorrido__barra > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--amarillo-vivo), var(--fasem-amarillo));
  transition: width .3s ease;
}
.recorrido__paso {
  display: flex; align-items: flex-start; gap: var(--e3);
}
.recorrido__numero {
  flex: none; width: 30px; height: 30px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
  background: var(--superficie-2); color: var(--tinta-suave);
  border: 1.5px solid var(--linea);
}
.recorrido__paso--hecho .recorrido__numero {
  background: var(--fasem-amarillo); border-color: var(--fasem-amarillo);
  color: var(--fasem-carbon);
}
.recorrido__paso--andando .recorrido__numero { border-color: var(--amarillo-borde); }
.recorrido__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.recorrido__chip {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.recorrido__chip--hecho { background: rgba(42,140,77,.14); color: var(--al-dia, #2a8c4d); }
.recorrido__chip--andando { background: rgba(255,195,0,.18); color: var(--amarillo-tinta); }
.recorrido__chip--falta { background: var(--superficie-2); color: var(--tinta-tenue); }
.recorrido__ir {
  flex: none; align-self: center;
  font-size: .82rem; font-weight: 750; text-decoration: none;
  color: var(--fasem-carbon); border: 1.5px solid var(--linea);
  border-radius: 99px; padding: 5px 14px;
  transition: border-color .12s ease, background .12s ease;
}
.recorrido__ir:hover { border-color: var(--amarillo-borde); background: var(--superficie-2); }

/* ==========================================================================
   El héroe azul: la portada del dueño y de la cartera del asesor.
   --------------------------------------------------------------------------
   El héroe va en el azul de marca con colores propios (no tokens): es la
   misma pieza en tema claro y oscuro, como la tarjeta principal del menú.
   Regla de lectura en 10 segundos: cómo está (anillo), cómo estaba (delta y
   curva), qué viene (la frase de proyección). Todo lo demás es sustento.
   ========================================================================== */

/* La ficha de la empresa: la primera fila, fuera del azul. El logo manda —lo
   que la empresa ve es SU sistema— y al lado quién es y desde cuándo. */
.ficha-empresa {
  display: flex; align-items: center; gap: var(--e4);
  flex-wrap: wrap; margin-bottom: var(--e4);
}
.ficha-empresa__logo {
  /* Los dos en `auto` y sólo topes: es lo que conserva la proporción sea cual
     sea el logo. El de Critertec es 3,4 veces más ancho que alto y el de Yo
     Parrillo es casi cuadrado; con un alto fijo, uno saldría aplastado. */
  display: block; max-height: 72px; max-width: 260px;
  width: auto; height: auto; object-fit: contain; flex: none;
}
.ficha-empresa__quien { min-width: 0; }
.ficha-empresa__nombre {
  margin: 0; font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;
}
.ficha-empresa__desde {
  margin: var(--e1) 0 0; font-size: .8rem; color: var(--tinta-suave, #6B7488);
}

/* El héroe y su costado. La columna ancha es el azul —diagnóstico—; la
   angosta, fuera del azul, es lo accionable: qué toca hacer y el semáforo de
   los estándares. Se separan porque compiten: dentro del mismo cajón, la
   tarjeta le robaba el ancho al mensaje y el semáforo no cabía en ninguna
   parte. 260px es lo que necesita el nombre de un estándar en una línea. */
.tablero-heroe {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--e5);
  align-items: start;
}
.tablero-heroe__lado { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
@media (max-width: 900px) { .tablero-heroe { grid-template-columns: 1fr; } }

/* El héroe: dos filas dentro del azul. Arriba el puntaje y el mensaje; abajo
   la curva, que necesita todo el ancho. */
.heroe {
  background: linear-gradient(160deg, #1B2B52, #14213D 70%);
  border-radius: 18px;
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  box-shadow: var(--sombra-alta);
}
.heroe__fila {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e2) var(--e5);
  align-items: center;
}
/* Con una tercera pieza puesta —el asesor con su licencia— el mensaje cede el
   ancho que ella ocupa. La tarjeta de lo que toca ya no está aquí: se mudó al
   costado, fuera del azul. */
.heroe__fila:has(.asesor-heroe) { grid-template-columns: auto 1fr auto; }
.heroe__anillo { width: 8.75rem; align-self: center; }
.heroe__anillo svg { display: block; width: 100%; height: auto; }
.heroe__antetitulo {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: #FFD60A; font-weight: 700;
}
.heroe__titular {
  margin: var(--e1) 0 0; color: #FFFFFF;
  font-size: clamp(1.25rem, 3.6vw, 1.7rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; text-wrap: balance;
}
.heroe__chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.heroe__apoyo {
  margin: var(--e3) 0 0; color: rgba(238, 241, 248, .72);
  font-size: .95rem; line-height: 1.55; max-width: 52ch;
}
.heroe__curva { margin-top: 0; }
.heroe__curva svg { display: block; width: 100%; height: auto; }
.heroe__curva-nota {
  margin: var(--e1) 0 0; font-size: .72rem; color: rgba(238, 241, 248, .5);
  text-align: right;
}
@media (max-width: 620px) {
  .heroe { padding: var(--e5) var(--e4); }
  .heroe__fila { grid-template-columns: 1fr; text-align: center; }
  .heroe__fila:has(.asesor-heroe) { grid-template-columns: 1fr; }
  .heroe__anillo { margin: 0 auto; }
  .heroe__chips { justify-content: center; }
  .heroe__apoyo { margin-inline: auto; }
  .ficha-empresa { justify-content: center; text-align: center; }
}

/* Los chips del héroe llevan color propio: viven sobre el azul fijo. */
.heroe-chip {
  display: inline-block; padding: 3px 12px; border-radius: 99px;
  font-size: .78rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .12); color: rgba(238, 241, 248, .85);
}
.heroe-chip--sube { background: #FFD60A; color: #14213D; }
.heroe-chip--baja { background: #C22214; color: #FFFFFF; }
.heroe-chip--rojo { background: rgba(240, 145, 134, .18); color: #F5A9A0; }

/* Las cifras de gestión: números primero, nombre debajo, flecha al lado. */
.dueno-cifras {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e3);
}
.dueno-cifra {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--superficie); padding: var(--e3) var(--e3) var(--e2);
  text-align: center;
}
.dueno-cifra__valor {
  font-weight: 800; font-size: 1.3rem; color: var(--tinta);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.dueno-cifra__delta { font-size: .72rem; font-weight: 800; margin-left: 2px; }
.dueno-cifra__delta--sube { color: var(--al-dia); }
.dueno-cifra__delta--baja { color: var(--vencido); }
.dueno-cifra__nombre { font-size: .74rem; color: var(--tinta-suave); line-height: 1.3; margin-top: 2px; }

/* La proyección: fechas como escalones, el puntaje que cae en rojo. */
.dueno-caida { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: baseline; }
.dueno-caida__fecha {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--vencido); white-space: nowrap;
}

/* Los estándares punto por punto. */
.dueno-puntos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dueno-punto {
  width: 22px; height: 22px; border-radius: 50%; display: inline-block;
  background: transparent; border: 2.5px solid var(--linea);
}
.dueno-punto--en-pie { background: var(--fasem-amarillo); border-color: var(--amarillo-borde); }
.dueno-punto--caduco { background: var(--vencido); border-color: var(--vencido); }

/* El resumen de hallazgos: tres números en línea, no tres párrafos. */
.dueno-cierre { display: flex; gap: var(--e4); flex-wrap: wrap; }
.dueno-cierre__parte { text-align: center; flex: 1 1 90px; }
.dueno-cierre__numero {
  font-weight: 800; font-size: 1.45rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dueno-cierre__nombre { font-size: .74rem; color: var(--tinta-suave); line-height: 1.25; }

/* Las dimensiones de CIMA: nombre, barra y lectura en una línea. */
.dueno-barras { display: flex; flex-direction: column; gap: var(--e3); }
.dueno-barra {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 2px var(--e3);
  align-items: center;
}
.dueno-barra__nombre { font-size: .82rem; font-weight: 700; color: var(--tinta); }
.dueno-barra__pista {
  display: block; height: 10px; border-radius: 99px; background: var(--superficie-2);
  overflow: hidden;
}
.dueno-barra__relleno {
  display: block; height: 100%; border-radius: 99px;
  background: var(--fasem-amarillo);
}
.dueno-barra--floja .dueno-barra__relleno { background: var(--vencido); }
.dueno-barra__lectura {
  grid-column: 2; font-size: .74rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.dueno-barra--floja .dueno-barra__lectura { color: var(--vencido); font-weight: 700; }
.dueno-barra--sin-dato .dueno-barra__lectura { grid-column: 2; font-style: italic; color: var(--tinta-tenue); }
@media (max-width: 480px) {
  .dueno-barra { grid-template-columns: 1fr; }
  .dueno-barra__lectura, .dueno-barra--sin-dato .dueno-barra__lectura { grid-column: 1; }
}

/* El nivel GTC 45 de un peligro: I y II son los que exigen intervención. */
.dueno-nivel {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.dueno-nivel--i  { background: var(--vencido); color: #FFFFFF; }
.dueno-nivel--ii { background: var(--vencido-fondo); color: var(--vencido); }

/* El arranque de la cartera: el producto en tres pasos, un solo gesto. */
.heroe--arranque { display: block; }
.heroe__acciones { margin-top: var(--e2); }
.pasos-arranque {
  list-style: none; margin: var(--e3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e3);
}
.paso-arranque { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; }
.paso-arranque__numero {
  width: 28px; height: 28px; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  background: #FFD60A; color: #14213D; font-weight: 800; font-size: .9rem;
}
.paso-arranque__texto { color: rgba(238, 241, 248, .78); font-size: .93rem; line-height: 1.55; }
.paso-arranque__texto b { color: #FFFFFF; display: block; }
/* Los pasos se leen alineados aunque el héroe móvil centre el resto. */
.pasos-arranque { text-align: left; }

/* La cinta del entorno de pruebas: fija arriba, imposible de confundir con
   una notificación del producto. Sólo aparece fuera de producción — en el
   sistema real no hay cinta ninguna. */
.cinta-entorno {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  padding: 6px 12px;
  background: repeating-linear-gradient(135deg, #14213D, #14213D 12px, #1B2B52 12px, #1B2B52 24px);
  color: #FFD60A;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-align: center;
  padding-top: calc(6px + var(--safe-sup));
}
.cinta-entorno a { color: #FFFFFF; text-decoration: underline; font-weight: 700; }

/* Las chispas: un número grande con su curva detrás, para leer de un vistazo.
   Van juntas en una fila y arriba del todo — si hay que bajar a buscarlas,
   dejan de servir para lo que existen. */
.chispas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3); margin: var(--e4) 0;
}
.chispa {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--e3) var(--e4) var(--e2);
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--sombra);
}
.chispa--alerta { border-color: var(--vencido); }
.chispa__valor {
  font-size: 1.8rem; font-weight: 800; color: var(--tinta);
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.chispa--alerta .chispa__valor { color: var(--vencido); }
/* Sin dato: la caja se queda, en línea punteada y con la raya en gris. El
   borde punteado es lo que la separa de un cero —un cero es una medición y
   esto es la falta de una— sin necesidad de leer la nota. */
.chispa--sin-dato { border-style: dashed; box-shadow: none; }
.chispa--sin-dato .chispa__valor { color: var(--tinta-tenue); font-weight: 700; }
.chispa__etiqueta { font-size: .78rem; color: var(--tinta-suave); line-height: 1.25; }
.chispa__curva { width: 100%; height: 30px; margin-top: var(--e2); display: block; }
.chispa__nota { font-size: .72rem; color: var(--tinta-tenue); margin-top: 2px; }

/* El ciclo PHVA: cuatro barras que dicen dónde está flojo el sistema. Es como
   la Resolución 0312 organiza la calificación, así que es el idioma en que un
   inspector va a leerlo. */
.ciclo { display: flex; flex-direction: column; gap: var(--e3); }
.ciclo__fase { display: grid; grid-template-columns: 6.5em 1fr auto; gap: var(--e2) var(--e3); align-items: center; }
.ciclo__nombre { font-size: .82rem; font-weight: 800; color: var(--tinta); letter-spacing: .02em; }
.ciclo__pista { height: 14px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.ciclo__relleno { display: block; height: 100%; border-radius: 99px; background: var(--fasem-amarillo); }
.ciclo__fase--flojo .ciclo__relleno { background: var(--vencido); }
.ciclo__fase--regalada .ciclo__relleno { background: var(--linea); }
.ciclo__cifra { font-size: .8rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ciclo__nota { grid-column: 2 / -1; font-size: .72rem; color: var(--tinta-tenue); margin: 0; }

/* La línea de tiempo de vencimientos: noventa días en una barra, con lo que
   cae en cada punto. Una lista de fechas se lee; una línea se entiende. */
.linea-tiempo { position: relative; margin: var(--e4) 0 var(--e5); padding-top: var(--e5); }
.linea-tiempo__riel { height: 4px; border-radius: 2px; background: var(--linea); position: relative; }
.linea-tiempo__hoy { position: absolute; top: -22px; font-size: .68rem; font-weight: 800; color: var(--tinta-suave); }
.linea-tiempo__marca { position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 99px;
                       background: var(--vencido); border: 3px solid var(--superficie); transform: translateX(-7px); }
.linea-tiempo__pie { display: flex; justify-content: space-between; font-size: .7rem;
                     color: var(--tinta-tenue); margin-top: var(--e2); }

/* La cobertura de la gente: una fila por persona con lo que tiene y lo que no. */
.cobertura { display: flex; flex-direction: column; gap: 1px; }
.cobertura__persona { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3);
                      align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave); }
.cobertura__persona:last-child { border-bottom: none; }
.cobertura__nombre { font-size: .88rem; font-weight: 650; color: var(--tinta); }
.cobertura__sub { font-size: .72rem; color: var(--tinta-tenue); }
.cobertura__marcas { display: flex; gap: 6px; }
.marca-si, .marca-no {
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.marca-si { background: var(--al-dia-fondo); color: var(--al-dia); }
.marca-no { background: var(--vencido-fondo); color: var(--vencido); }

/* --- El calendario de lo que viene ------------------------------------- */
/* Cuadrícula y no lista: la lista dice qué hacer hoy, la cuadrícula dice
   cuándo se junta todo. Los meses caben lado a lado en pantalla ancha y se
   apilan en el celular sin que nada se salga. */
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 18px; }
.cal__mes { min-width: 0; }
.cal__titulo { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 13px; font-weight: 700; text-transform: capitalize;
  color: var(--tinta); margin-bottom: 8px; }
.cal__cuenta { font-size: 11px; font-weight: 600; color: var(--tinta-suave);
  background: var(--superficie-2); border-radius: 10px; padding: 1px 7px;
  font-variant-numeric: tabular-nums; }
.cal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dia-nombre { font-size: 10px; font-weight: 700; color: var(--tinta-suave);
  text-align: center; padding-bottom: 3px; }
.cal__celda { position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; border-radius: 5px;
  font-size: 11px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.cal__celda--vacia { visibility: hidden; }
.cal__celda--con { background: var(--superficie-2); color: var(--tinta); font-weight: 700; cursor: help; }
/* Desde que la cuadrícula cubre el año entero, la mitad de atrás es pasado y
   hay que poder leerlo de un vistazo: lo que quedó debiendo en rojo, el día
   enteramente cumplido en verde. Sin esto, un enero desatendido y un enero
   impecable se veían exactamente igual. */
.cal__celda--deuda { background: var(--vencido-fondo); color: var(--vencido); }
.cal__celda--hecha { background: var(--al-dia-fondo); color: var(--al-dia); }
.cal__celda--hoy { outline: 2px solid var(--tinta); outline-offset: -2px; font-weight: 800; }
.cal__numero { line-height: 1; }
.cal__puntos { display: flex; gap: 2px; }
.cal__punto { width: 5px; height: 5px; border-radius: 50%; display: inline-block;
  background: var(--tinta-suave); flex: none; }
.cal__punto--vence { background: var(--vencido); }
.cal__punto--tarea { background: var(--cal-tarea); }
.cal__punto--capacitacion { background: var(--al-dia); }
.cal__punto--programado { background: var(--cal-programado); }
.cal__leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
  font-size: 11px; color: var(--tinta-suave); }
.cal__leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-fila, .cal-atrasado { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; }
.cal-fila__fecha, .cal-atrasado__fecha { flex: none; width: 88px; font-size: 12px;
  font-weight: 700; color: var(--tinta-suave); text-transform: capitalize;
  font-variant-numeric: tabular-nums; }
.cal-atrasado__fecha { color: var(--vencido); }
.cal-fila__quien { color: var(--tinta-suave); font-weight: 400; }

/* --- Los meses que faltan, como fichas ---------------------------------- */
/* Veintiún meses en lista ocupan una pantalla; en fichas se ven de un golpe
   y se entiende el tamaño del hueco, que es lo que se quiere entender. */
.meses-faltan { display: flex; flex-wrap: wrap; gap: 6px; }
.mes-falta { font-size: 12px; font-weight: 600; text-transform: capitalize;
  color: var(--vencido); background: var(--vencido-fondo);
  border-radius: var(--radio-s); padding: 3px 9px;
  font-variant-numeric: tabular-nums; }

/* --- Lo pendiente ------------------------------------------------------- */
/* La marca de la izquierda dice si mueve el puntaje o sólo ordena. Es lo
   único que hay que ver para decidir por dónde empezar. */
.pendiente { display: flex; gap: 10px; align-items: flex-start; }
.pendiente__marca { flex: none; width: 8px; height: 8px; margin-top: 7px;
  border-radius: 50%; background: var(--linea); }
.pendiente__marca--urgente { background: var(--vencido); }
.pendiente__cuando { margin-left: 8px; font-size: 12px; font-weight: 600;
  color: var(--tinta-suave); text-transform: capitalize;
  font-variant-numeric: tabular-nums; }

/* --- El papel, abrible ------------------------------------------------- */
/* El nombre del archivo es el enlace al archivo. Ponerle fecha a un papel
   que no se puede abrir es adivinar. */
.papel { display: inline-flex; align-items: center; gap: 7px;
  font-size: .95rem; font-weight: 600; color: var(--tinta);
  text-decoration: none; border-bottom: 1px solid var(--linea);
  padding-bottom: 1px; }
.papel:hover { color: var(--amarillo-tinta); border-bottom-color: currentColor; }
.papel svg { width: 15px; height: 15px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; opacity: .65; }

/* --- Fechar, o subir el que sí está firmado ---------------------------- */
.fechar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fechar__otro { font-size: 12px; font-weight: 600; color: var(--tinta-suave); }
.fechar__otro:hover { color: var(--amarillo-tinta); }

/* --- El asesor en el héroe, con su licencia colgada de la cara --------- */
/* Un sello que dice «verificada» sin decir de quién no verifica a nadie. Es
   la misma razón por la que el distintivo de una red social va sobre el
   perfil y no suelto en una barra. */
/* El héroe abre una tercera columna cuando lleva al asesor. Sin esto el
   retrato se metía en la fila del texto y empujaba la frase. */
/* Lo reparte `.heroe__fila`, que es el grid de verdad desde que el héroe
   tiene filas. */
@media (max-width: 760px) {
  .heroe__fila:has(.asesor-heroe) { grid-template-columns: 1fr; }
  .asesor-heroe { align-self: center; }
}

.asesor-heroe {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; align-self: flex-start; flex: none;
  padding: 4px; border-radius: 14px;
}
.asesor-heroe__retrato {
  position: relative; width: 112px; height: 112px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; overflow: visible;
  flex: none;
}
/* Absoluta y a los cuatro bordes: con `width:100%` el retrato dejaba un aro
   de fondo alrededor de la foto, porque el borde le come dos píxeles por
   lado y la imagen se quedaba corta. */
.asesor-heroe__retrato img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.asesor-heroe__iniciales {
  font-size: 2.4rem; font-weight: 800; color: #FFFFFF; letter-spacing: -.02em;
}
/* La insignia se monta sobre el borde, abajo a la derecha, como en LinkedIn. */
.asesor-heroe__insignia {
  position: absolute; right: 0; bottom: 2px;
  width: 32px; height: 32px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #14213D;
}
.asesor-heroe__insignia svg { width: 100%; height: 100%; display: block; }
.asesor-heroe__insignia--ok svg { fill: #0FA968; }
.asesor-heroe__insignia--espera svg { fill: #E0A526; }
.asesor-heroe__insignia--mal svg { fill: #E2523F; }

.asesor-heroe__nombre {
  font-size: .82rem; font-weight: 700; color: #FFFFFF; text-align: center;
  max-width: 150px; line-height: 1.25;
}
.asesor-heroe__sello {
  font-size: .68rem; font-weight: 750; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 99px;
}
.asesor-heroe__sello--ok { background: rgba(15,169,104,.18); color: #55D79E; }
.asesor-heroe__sello--espera { background: rgba(224,165,38,.18); color: #F0C462; }
.asesor-heroe__sello--mal { background: rgba(226,82,63,.18); color: #F09186; }
.asesor-heroe:hover .asesor-heroe__retrato { border-color: rgba(255,255,255,.7); }

/* El cronograma del plan: doce columnas de mes y una fila por actividad. La
   rejilla se desplaza sola cuando no cabe — en un teléfono no caben doce
   meses y partir la tabla la vuelve ilegible. */
.cronograma { overflow-x: auto; }
.cronograma__tabla { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .8rem; }
.cronograma__tabla th, .cronograma__tabla td {
  padding: 7px 6px; border-bottom: 1px solid var(--linea); vertical-align: middle;
}
.cronograma__tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--suave, #6E6865); font-weight: 700; text-align: center;
}
.cronograma__que { text-align: left; min-width: 15rem; }
.cronograma__quien { text-align: left; min-width: 8rem; color: var(--suave, #6E6865); font-size: .76rem; }
.cronograma__mes { width: 2.1rem; text-align: center; }
.cronograma__mes--hoy { background: rgba(255, 221, 33, .12); }
.cronograma__estandar {
  display: inline-block; font-family: var(--mono); font-size: .66rem;
  color: var(--suave, #6E6865); margin-right: 6px;
}
/* Lo que el año trae de atrás: en el cronograma pero fuera del avance. */
.cronograma__heredada {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  background: var(--vencido-fondo); color: var(--vencido);
}
.cronograma__marca {
  display: inline-block; width: 13px; height: 13px; border-radius: 4px;
}
.cronograma__marca--cumplida { background: var(--al-dia); }
.cronograma__marca--pendiente { background: var(--fasem-amarillo); }
.cronograma__marca--vencida { background: var(--vencido); }

/* La proyección: la misma gráfica del héroe, pero hacia adelante y punteada.
   Punteada porque no ha pasado, y en rojo porque es lo que va a pasar. */
.proyeccion svg { display: block; width: 100%; height: auto; }
.proyeccion__nota {
  margin: var(--e2) 0 0; font-size: .82rem; color: var(--suave, #6E6865);
}

/* --- El campo de la foto, con su círculo al lado ------------------------- */
/* El mismo diámetro y el mismo recorte que el retrato del héroe: lo que el
   asesor ve aquí es exactamente lo que va a quedar allá. */
.foto-campo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.foto-campo__retrato {
  position: relative; width: 112px; height: 112px; border-radius: 50%;
  background: var(--suave, #EEF1F6); border: 2px solid var(--borde, #D8DEE8);
  overflow: hidden; flex: none;
}
.foto-campo__retrato img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.foto-campo__control { flex: 1 1 240px; min-width: 0; }
.foto-campo__control .campo__porque { margin-top: 8px; }

/* --- El icono de la agenda en la barra ---------------------------------- */
.barra__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; margin-right: 10px;
  color: inherit; text-decoration: none;
}
/* Los atajos se van a la derecha. Antes los empujaba el nombre de la pantalla,
   que ocupaba el hueco del medio; sin él, el empujón lo da el primer icono. */
.barra__icono--primero { margin-left: auto; }
.barra__icono svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.barra__icono:hover { background: rgba(255,255,255,.12); }

/* --- Conmutador de vistas ----------------------------------------------- */
/* Dos vistas de los mismos datos, no dos pantallas: por eso comparten marco
   y sólo se marca cuál está puesta. */
.conmutador {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--e4);
  background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 11px;
}
.conmutador__opcion {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 8px; text-decoration: none;
  font-size: .8rem; font-weight: 650; color: var(--tinta-suave);
}
.conmutador__opcion svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.conmutador__opcion--puesta {
  background: var(--superficie); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(15,24,48,.08);
}

/* --- La agenda: cuadrícula y lista, una al lado de la otra -------------- */
/* Son la misma pregunta partida en dos mitades —«cuándo se me junta todo» y
   «qué hago ahora»—, así que se miran juntas. */
.agenda { display: grid; grid-template-columns: 1fr 340px; gap: var(--e3); align-items: start; }
/* Tres meses por fila, fijos. Con `auto-fit` la cuadrícula se acomodaba al
   ancho y unas veces caían dos y otras tres, así que el semestre no se leía
   igual dos días seguidos. */
.agenda__rejilla .cal { grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
@media (max-width: 1180px) { .agenda__rejilla .cal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .agenda__rejilla .cal { grid-template-columns: 1fr; } }
.agenda__lista { display: flex; flex-direction: column; max-height: 78vh; }
.agenda__desplazable { overflow-y: auto; overscroll-behavior: contain; }

.agenda__fila {
  display: flex; gap: var(--e3); align-items: center; text-decoration: none;
  color: var(--tinta); padding: 9px var(--e4);
  border-top: 1px solid var(--linea-suave);
}
.agenda__fila:first-child { border-top: 0; }
.agenda__fila:hover { background: var(--superficie-2); }
.agenda__fila--vencida { background: var(--vencido-fondo); }

.agenda__fecha {
  flex: none; width: 42px; text-align: center; line-height: 1.05;
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.agenda__fecha b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--tinta); }
.agenda__fecha span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.agenda__fecha--vencida b, .agenda__fecha--vencida span { color: var(--vencido); }
.agenda__fecha--hoy b { color: var(--amarillo-tinta); }

.agenda__que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda__titulo {
  font-size: .84rem; font-weight: 650; line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.agenda__empresa {
  font-size: .72rem; color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Los filtros -------------------------------------------------------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin-bottom: var(--e4);
}
.filtros__campo { max-width: 17rem; }
.filtros__tipos { display: flex; gap: 2px; padding: 3px;
  background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 11px; }
.filtros__tipo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px; text-decoration: none;
  font-size: .78rem; font-weight: 650; color: var(--tinta-suave);
}
.filtros__tipo--puesto {
  background: var(--superficie); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(15,24,48,.08);
}
.filtros__limpiar { font-size: .76rem; font-weight: 650; color: var(--tinta-suave); }
.filtros__limpiar:hover { color: var(--vencido); }

@media (max-width: 900px) {
  .agenda { grid-template-columns: 1fr; }
  .agenda__lista { max-height: none; }
}

/* --- El día puesto y lo que el agente propone --------------------------- */
.agenda__derecha { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.cal__celda--puesta {
  outline: 2px solid var(--amarillo-borde); outline-offset: -2px;
  background: var(--amarillo-suave);
}
.bloque--agente { border-color: var(--amarillo-borde); }
.agente__acciones { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.agente__acciones form { display: flex; align-items: center; gap: 6px; margin: 0; }
.agente__fecha { max-width: 9.5rem; padding: 5px 8px; font-size: .78rem; }
.boton--chico { padding: 6px 12px; font-size: .76rem; }
.agente__no {
  background: none; border: 0; cursor: pointer;
  font-size: .78rem; font-weight: 650; color: var(--tinta-suave);
  padding: 6px 8px; font-family: inherit;
}
.agente__no:hover { color: var(--vencido); }

/* Las propuestas del agente, a dos columnas y a lo ancho: van debajo del
   calendario porque no son la agenda todavía — son lo que podría entrar. */
.agente__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e5); }
.agente__una { min-width: 0; }
@media (max-width: 820px) { .agente__rejilla { grid-template-columns: 1fr; } }

/* La misma pieza dentro del tablero de una empresa: la cuadrícula ya vive en
   un bloque, así que la lista va en tarjetas y no en bloques anidados. */
.filtros--dentro { margin-bottom: 0; }
.tarjeta-dia {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--superficie); overflow: hidden;
}
.tarjeta-dia--lista { display: flex; flex-direction: column; max-height: 340px; }
.tarjeta-dia__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px var(--e4); border-bottom: 1px solid var(--linea-suave);
  font-size: .76rem; font-weight: 700; text-transform: capitalize;
  color: var(--tinta-suave); background: var(--superficie-2);
}
.tarjeta-dia__cabeza a { font-weight: 650; text-transform: none; }

/* --- El cajón de empresas ---------------------------------------------- */
/* A partir de la tercera fila se desplaza. Una cartera de veinte empresas
   empujaba fuera de la pantalla todo lo que dice qué hacer hoy. */
.cajon-empresas {
  max-height: 27rem; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px; margin: 0 -2px var(--e4);
}

/* --- Los cuatro cajones ------------------------------------------------- */
/* Dos por dos y del mismo tamaño: son cuatro frentes distintos y ninguno
   manda sobre los otros. Apilados como estaban, el cuarto quedaba fuera de
   la pantalla y se leía como un apéndice. */
.frentes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4); align-items: start;
}
.frentes > .bloque { margin: 0; }
@media (max-width: 900px) { .frentes { grid-template-columns: 1fr; } }


/* --- El asesor arriba a la derecha de una pantalla sin héroe ------------ */
/* La agenda no tiene el recuadro azul, pero el asesor tiene que estar en el
   mismo sitio: si el sello salta de lugar entre pantallas, deja de leerse
   de un vistazo y hay que buscarlo. */
.encabezado-con-asesor {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
}
.encabezado-con-asesor > .relato { flex: 1 1 26rem; margin-bottom: 0; }
.encabezado-con-asesor .asesor-heroe__retrato {
  background: var(--superficie-2); border-color: var(--linea);
}
.encabezado-con-asesor .asesor-heroe__iniciales { color: var(--tinta-suave); }
.encabezado-con-asesor .asesor-heroe__nombre { color: var(--tinta); }
.encabezado-con-asesor .asesor-heroe__insignia { border-color: var(--fondo); }

/* --- La tarjeta de lo que toca, al costado del héroe ------------------- */
/* Antes vivía sobre el azul y se dibujaba con blancos translúcidos. Ahora
   está fuera, sobre papel: mismo esqueleto —rótulo, cifra, barra, pie—, otra
   piel, y con los tokens del tema para que sirva en claro y en oscuro. */
.heroe-tarjeta {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e4); border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--linea);
  text-decoration: none; color: inherit;
}
.heroe-tarjeta:hover { border-color: var(--fasem-amarillo); }
.heroe-tarjeta__rotulo {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave, #6B7488);
}
.heroe-tarjeta__cifra {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.heroe-tarjeta__cifra i {
  font-style: normal; font-size: .8rem; font-weight: 700;
  color: var(--tinta-suave, #6B7488); margin-left: 4px;
}
.heroe-tarjeta__pista {
  display: block; height: 5px; border-radius: 99px;
  background: var(--superficie-2, #E9ECF2); overflow: hidden;
}
.heroe-tarjeta__pista span { display: block; height: 100%; border-radius: 99px; background: var(--fasem-amarillo); }
.heroe-tarjeta__pie { font-size: .7rem; color: var(--tinta-suave, #6B7488); line-height: 1.45; }

/* --- El semáforo de los estándares ------------------------------------- */
/* Un punto por estándar. Siete filas SIEMPRE: con eso solo, los tres
   conjuntos de la Res. 0312 se acomodan sin una regla para cada uno —7 en una
   columna, 21 en tres, 60 en nueve— y las tres se leen igual. */
.semaforo {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 14px; padding: var(--e4);
}
.semaforo__titulo {
  display: block; margin-bottom: var(--e3);
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave, #6B7488);
}
.semaforo__rejilla {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, auto); gap: 7px 10px;
}
/* Con 60 el nombre no cabe y sobra: queda el punto, y el nombre en el tooltip. */
.semaforo--apretado .semaforo__rejilla { gap: 6px 7px; justify-content: space-between; }

.semaforo__punto { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.semaforo__luz {
  width: 12px; height: 12px; border-radius: 99px; flex: none;
  /* Alineada con la primera línea del texto, no con el bloque: cuando el
     nombre se va a dos renglones, el punto se quedaba flotando en el medio. */
  margin-top: 2px;
}
.semaforo__luz--rojo { background: var(--vencido); }
.semaforo__luz--amarillo { background: var(--por-vencer); }
.semaforo__luz--verde { background: var(--al-dia); }
.semaforo__cod {
  font-size: .7rem; line-height: 1.3;
  color: var(--tinta-suave, #6B7488); min-width: 0;
}
/* El numeral en mono y el nombre en la letra del texto: son dos cosas
   distintas —una referencia y una frase— y en la misma tipografía se leían
   como un solo bloque ilegible. `inherit` a secas no servía: heredaba el mono
   del contenedor. */
.semaforo__numeral {
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  color: var(--tinta); margin-right: 3px;
}
.semaforo__nombre { font-family: var(--sans); }
.semaforo__pie {
  margin: var(--e3) 0 0; font-size: .68rem; line-height: 1.5;
  color: var(--tinta-suave, #6B7488);
}