/*
 * Sistema visual de la app de Onboarding Sicolsa.
 *
 * CSS propio, sin framework ni paso de compilación (CLAUDE.md §1): el LXC no
 * lleva Node y el despliegue se limita a `collectstatic`.
 *
 * Tres restricciones mandan sobre el diseño:
 *
 * 1. Buena parte de los usuarios son operarios de planta que entrarán desde
 *    una tablet compartida, a veces con guantes. Objetivos táctiles grandes,
 *    contraste alto, texto que no baja de 16px.
 * 2. Se usa en turno, con prisa. La jerarquía tiene que resolverse de un
 *    vistazo: qué falta, qué sigue, qué ya está hecho.
 * 3. Es de SICOLSA y tiene que parecerlo. Los colores salen del propio logo,
 *    no de una paleta genérica.
 */

:root {
  /* --- Marca -------------------------------------------------------------
     Sacados del SVG del logo, no elegidos a ojo: naranja #ff5200, negro
     #050606, gris #bec0be.

     ⚠️ El naranja de marca **no admite texto blanco encima**: da 3,25:1, por
     debajo del 4,5:1 que pide la AA. Con negro da 6,17:1 y pasa. Por eso los
     botones de marca llevan tinta negra — que además es lo que hace el propio
     logo, con el símbolo naranja y la palabra en negro.

     Para naranja **sobre** blanco (texto, iconos) hay que bajar a
     `--naranja-700`, que da 5,26:1. */
  --naranja:     #ff5200;
  --naranja-600: #e04800;
  --naranja-700: #c43c00;
  --naranja-050: #fff4ee;
  --naranja-100: #ffe3d5;

  --amarillo:     #ffb800;
  --amarillo-050: #fff8e6;

  --negro:  #050606;
  --tinta:  #17181a;

  /* Grises **cálidos**, derivados del #bec0be del logo. Los grises azulados
     de serie chocan con el naranja y hacen que todo parezca de plantilla. */
  --gris-900: #17181a;
  --gris-700: #3d403f;
  --gris-500: #6e7271;
  --gris-400: #9aa09e;
  --gris-300: #cdd1cf;
  --gris-200: #e3e6e4;
  --gris-100: #f2f4f3;
  --gris-050: #f8f9f8;
  --blanco:   #ffffff;

  /* --- Estados -----------------------------------------------------------
     Deliberadamente **fuera** de la gama de la marca. El naranja significa
     «esto es de SICOLSA» y «esto se puede pulsar»; si además significara
     «pendiente», dejaría de significar nada. El amarillo se reserva para
     llamar la atención y se usa poco, que es lo que le da fuerza. */
  --verde-700: #14713c;
  --verde-100: #dcf5e5;
  --azul-800:  #16456b;   /* «en curso» */
  --azul-700:  #1d5c8f;
  --azul-100:  #dbeafe;
  --azul-050:  #f2f7fb;
  --rojo-700:  #b3261e;
  --rojo-100:  #fce8e6;
  --ambar-600: #8a5a00;
  --ambar-100: #fff3d6;

  /* --- Forma -------------------------------------------------------------
     Radios pequeños. El logo es geométrico y de curvas cerradas; los 12px
     redondos de antes daban ese aire de tarjeta de plantilla que se ve en
     todas partes. */
  --radio: 6px;
  --radio-chico: 4px;

  /* Casi no hay sombras: la separación la hacen las líneas de un pixel. Una
     sombra solo se justifica en algo que de verdad flota. */
  --linea: 1px solid var(--gris-200);
  --sombra: 0 1px 2px rgba(5, 6, 6, .04);
  --sombra-alta: 0 12px 32px rgba(5, 6, 6, .18);

  /* --- Movimiento --------------------------------------------------------
     Curvas propias: las de serie de CSS son flojas y dejan las transiciones
     sin intención. `--salida` para lo que entra o responde a una pulsación,
     que es casi todo aquí. */
  --salida: cubic-bezier(.23, 1, .32, 1);
  --suave: cubic-bezier(.77, 0, .175, 1);

  --ancho: 900px;
  --lateral-ancho: 244px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--gris-900);
  background: var(--gris-050);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--naranja-700); }

/* ---------------------------------------------------------------- Estructura */

/* La barra lateral no se superpone al contenido: la disposición reserva su
   ancho con grid. Superponerla obligaría a compensar con padding y cualquier
   descuadre taparía el principio de cada página.

   `dvh` después de `vh`: en el navegador de una tablet, 100vh es la pantalla
   SIN su barra de direcciones, y el pie de la barra —«Salir»— quedaba debajo
   de ella. El navegador que no entiende `dvh` se queda con la primera. */
.disposicion {
  display: grid;
  grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.principal { min-width: 0; }

.lateral {
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem .85rem;
  /* Negro del logo, no un azul cualquiera. Con el naranja al lado es la
     combinación que la empresa ya usa en todo lo suyo. */
  background: var(--negro);
  color: var(--blanco);
  overflow-y: auto;
}

.lateral__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

/* El logo y la palabra ONBOARDING no cabían en una línea: 116 px de logo más
   la palabra en versalitas con `letter-spacing` se pasaban del ancho útil de la
   barra, y como `.lateral` desborda en horizontal la palabra salía cortada por
   el borde. Se apilan: el logo manda y ONBOARDING queda debajo como rótulo. Así
   deja de depender de que la suma de los dos quepa, que era lo frágil. */
.lateral__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  color: var(--blanco);
  text-decoration: none;
  padding: .4rem .6rem .85rem;
  border-radius: var(--radio-chico);
}
/* El logo en blanco sobre el negro: se invierte con un filtro en vez de
   guardar una segunda copia del archivo, que acabaría desincronizada. */
.lateral__logo {
  display: block;
  width: 116px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.lateral__marca span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
  white-space: nowrap;
}

/* La equis del cajón. Solo existe por debajo de 900px (ver abajo). */
.lateral__cerrar { display: none; }

/* Lo único que se desplaza es la navegación: el logo arriba y la persona abajo
   se quedan siempre a la vista. El relleno negativo deja sitio a los anillos de
   foco, que el desbordamiento recortaría. */
.lateral__nav {
  position: relative;  /* el `offsetTop` de sus opciones se mide desde aquí */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: -3px;
  padding: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lateral__grupo { display: flex; flex-direction: column; gap: .15rem; }

/* El rótulo de cada grupo, en minúscula normal y gris claro (20-oct-2026).
   Antes iba en versalitas de 0.68rem y gris 500, que sobre el negro daba
   4,0:1 —por debajo de la AA para texto pequeño— y se leía como ruido. La
   jerarquía ya la hacen el tamaño y el peso: en la barra, la única palabra en
   versalitas es ONBOARDING, bajo el logo. */
.lateral__titulo {
  margin: 0 0 .25rem;
  padding: 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-400);
}

/* Ajustes va al fondo de la barra, encima de la persona: es lo que menos se
   usa y donde se busca lo que se usa poco. */
.lateral__grupo--fondo { margin-top: auto; }

/* La vista de ajustes: «Volver» discreto arriba y el nombre de la sección en
   blanco y más grande, que es lo que dice que la barra cambió de sitio. */
.lateral__volver {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 40px;
  padding: .4rem .6rem;
  border-radius: var(--radio-chico);
  color: var(--gris-400);
  text-decoration: none;
  font-size: .86rem;
  transition: background-color 160ms ease, color 160ms ease;
}
.lateral__volver:hover { background: rgba(255,255,255,.06); color: var(--blanco); }
.lateral__titulo--vista {
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--blanco);
}

/* 44px de alto mínimo: es el tamaño por debajo del cual un dedo falla, y esta
   app se usa en tablet durante la inducción. */
.lateral__enlace,
.lateral__salir {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem .6rem;
  border-radius: var(--radio-chico);
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .92rem;
  transition: background-color 160ms ease, color 160ms ease;
}

/* El paso por encima es más tenue que el activo: si fuera más claro, la fila
   bajo el ratón parecería la seleccionada. */
.lateral__enlace:hover,
.lateral__salir:hover {
  background: rgba(255,255,255,.06);
  color: var(--blanco);
}

/* El activo se marca con fondo Y con una barra naranja a la izquierda: solo
   con color no lo distingue quien no separa bien los tonos, y la barra repite
   el gesto del logo. Es el único naranja fijo de la barra (20-oct-2026). */
.lateral__enlace--activo,
.lateral__enlace--activo:hover {
  background: rgba(255,255,255,.12);
  color: var(--blanco);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--naranja);
}

.lateral__enlace:focus-visible,
.lateral__salir:focus-visible,
.lateral__volver:focus-visible,
.lateral__cerrar:focus-visible,
.lateral__salir-icono:focus-visible,
.lateral__marca:focus-visible,
.barra-estrecha__boton:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.lateral__icono {
  width: 20px;
  height: 20px;
  flex: none;
}

.lateral__pie {
  position: relative;  /* el menú de «Lo mío» flota desde aquí */
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: .6rem;
}

/* La persona: sus iniciales, el nombre completo y el rol, con «Salir» al lado,
   siempre a un toque. */
.lateral__fila-cuenta {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.lateral__cuenta {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 52px;
  padding: .45rem .5rem;
  border-radius: var(--radio-chico);
  color: var(--blanco);
}
.lateral__cuenta--boton {
  flex: 1;
  min-width: 0;
  width: auto;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.lateral__cuenta--boton:hover,
.lateral__cuenta--boton[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.lateral__cuenta--boton:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
/* Estando en una pantalla de «Lo mío», el nombre se marca como cualquier
   opción activa: es la puerta por la que se llegó. */
.lateral__cuenta--dentro,
.lateral__cuenta--dentro:hover {
  background: rgba(255,255,255,.12);
  box-shadow: inset 3px 0 0 var(--naranja);
}

/* Neutras, no naranja: el naranja de la barra es para «estás aquí» y para lo
   que está roto. Un bloque naranja de 32px al pie era lo que más gritaba de
   toda la columna. */
.lateral__iniciales {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-chico);
  background: rgba(255,255,255,.12);
  color: var(--blanco);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.lateral__quien {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.lateral__persona,
.lateral__rol {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lateral__persona {
  font-size: .86rem;
  font-weight: 600;
}
.lateral__rol {
  font-size: .76rem;
  color: rgba(255,255,255,.6);
}

.lateral__salir-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.lateral__salir-icono:hover { background: rgba(255,255,255,.06); color: var(--blanco); }

/* «Lo mío» flota encima del nombre en vez de crecer dentro del pie: creciendo,
   encogía la navegación hasta dejar fuera Inducción, Tecnología y Ajustes en
   un portátil de 768px. Un escalón de tono lo separa del negro; la sombra es
   de lo que de verdad flota. */
.lateral__personal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + .35rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .4rem .4rem;
  border-radius: var(--radio);
  background: #1a1b1b;
  /* Sobre el negro una sombra no se ve: el borde es lo que lo despega de las
     filas que tapa. */
  border: 1px solid rgba(255,255,255,.12);
}
.lateral__personal .lateral__rol { font-weight: 500; }
.lateral__pie form { margin: 0; }
.lateral__salir {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.lateral__velo,
.barra-estrecha { display: none; }

/* «Saltar al contenido»: fuera de la vista hasta que el tabulador llega a él. */
.saltar {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: var(--radio-chico);
  background: var(--naranja);
  color: var(--negro);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; outline: 2px solid var(--negro); outline-offset: 2px; }
#contenido:focus { outline: none; }

.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
}

.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  color: var(--gris-500);
  font-size: .8rem;
}

/* En tablet vertical y móvil la barra se esconde y se abre como cajón: fija
   robaría demasiado ancho al contenido, que es lo que la gente viene a leer. */
@media (max-width: 900px) {
  .disposicion { grid-template-columns: minmax(0, 1fr); }

  /* Cerrado, además de fuera de la pantalla, oculto: si no, sus enlaces
     seguían en el orden del tabulador, y su sombra manchaba el borde izquierdo
     de cada página. `visibility` espera a que termine el deslizamiento. */
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, var(--lateral-ancho));
    z-index: 40;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms var(--salida), visibility 0s linear 200ms;
  }
  .lateral--abierta {
    transform: translateX(0);
    visibility: visible;
    transition: transform 200ms var(--salida), visibility 0s;
    box-shadow: var(--sombra-alta);
  }

  .lateral__cerrar {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-chico);
    background: rgba(255,255,255,.08);
    color: var(--blanco);
    cursor: pointer;
  }

  .lateral__velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(5, 6, 6, .5);
  }

  .barra-estrecha {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .9rem;
    background: var(--negro);
    color: var(--blanco);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .barra-estrecha__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radio-chico);
    background: rgba(255,255,255,.10);
    color: var(--blanco);
    cursor: pointer;
  }
  .barra-estrecha__marca {
    display: flex;
    align-items: center;
    color: var(--blanco);
    text-decoration: none;
  }
  .barra-estrecha__logo {
    width: 92px;
    height: auto;
    filter: brightness(0) invert(1);
  }
}

/* Con el dedo, el texto de la barra a 16px: es lo que pide la cabecera de este
   archivo para quien entra desde la tablet de la planta. */
@media (pointer: coarse) {
  .lateral__enlace, .lateral__salir { font-size: 1rem; }
}

/* Quien pide menos movimiento no debería ver el cajón deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .lateral, .lateral--abierta { transition: none; }
  .lateral__enlace, .lateral__salir, .lateral__volver,
  .lateral__salir-icono, .lateral__cuenta--boton { transition: none; }
}

/* -------------------------------------------------------------------- Tarjeta */

/* Sin sombra: la separan la línea y el fondo. Un montón de tarjetas flotando
   con sombra es lo que hace que una app parezca una plantilla. */
.tarjeta {
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 1.35rem;
  margin-bottom: .85rem;
}
/* La barra de la izquierda dice **en qué estado** está, con los colores de
   estado y no con el naranja de la marca: si el naranja significara además
   «en curso», dejaría de significar «esto es una acción». */
.tarjeta--acento { border-left: 3px solid var(--azul-700); }
.tarjeta--hecha  { border-left: 3px solid var(--verde-700); }
.tarjeta--bloqueada {
  border-left: 3px solid var(--gris-300);
  background: var(--gris-050);
}

.tarjeta__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
}
/* Títulos apretados y con la letra un punto más junta. Es un detalle que no
   se nota de uno en uno pero cambia el conjunto. */
.tarjeta__titulo {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.3;
  letter-spacing: -.011em;
}
.tarjeta__descripcion { color: var(--gris-700); margin: .25rem 0 1rem; }
.tarjeta__meta {
  color: var(--gris-500); font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem;
}

/* -------------------------------------------------------------------- Insignia */

/* Rectangulares y no en píldora. Una píldora se lee como una etiqueta de red
   social; esto es un expediente con estados, y un recuadro pequeño en
   versalitas se parece más a un sello que a un «tag». */
.insignia {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .5rem;
  border-radius: var(--radio-chico);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.insignia--pendiente { background: var(--gris-100); color: var(--gris-700); }
.insignia--curso     { background: var(--azul-100);  color: var(--azul-800); }
.insignia--hecha     { background: var(--verde-100); color: var(--verde-700); }
.insignia--aviso     { background: var(--ambar-100); color: var(--ambar-600); }
.insignia--error     { background: var(--rojo-100);  color: var(--rojo-700); }
/* Solo para lo que es de marca, nunca para un estado. */
.insignia--marca     { background: var(--naranja-100); color: var(--naranja-700); }

/* --------------------------------------------------------------------- Botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* Alto generoso: se pulsa desde una tablet, a veces con guantes. */
  min-height: 48px;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  /* Se nombran las propiedades una a una: `all` transiciona cosas que no se
     quieren y cuesta rendimiento. */
  transition: background-color 160ms var(--salida),
              border-color 160ms var(--salida),
              transform 120ms var(--salida);
}
/* Encogerlo al pulsar da la sensación de que la interfaz **escuchó**. Es más
   convincente que bajarlo un pixel, y en tablet se nota. */
.boton:active { transform: scale(.97); }

/* Naranja de marca con tinta **negra**: sobre este naranja el blanco da 3,25:1
   y no pasa la AA; el negro da 6,17:1. Y es lo que hace el propio logo. */
.boton--principal {
  background: var(--naranja);
  color: var(--negro);
  font-weight: 700;
}
.boton--principal:hover { background: var(--naranja-600); }

.boton--secundario {
  background: var(--blanco); color: var(--gris-900); border-color: var(--gris-300);
}
.boton--secundario:hover { border-color: var(--gris-500); background: var(--gris-050); }

/* Para lo que no debe competir con la acción principal. */
.boton--negro { background: var(--negro); color: var(--blanco); }
.boton--negro:hover { background: #23262a; }
.boton--enlace {
  background: none; color: var(--blanco); border: 1px solid rgba(255,255,255,.35);
  min-height: 38px; padding: .35rem .8rem; font-size: .85rem; font-weight: 500;
}
.boton--enlace:hover { border-color: var(--blanco); }
.boton--ancho { width: 100%; }
.boton:focus-visible {
  outline: 2px solid var(--naranja-700);
  outline-offset: 2px;
}
/* El acceso de los administrativos. Se respetan los colores de la marca de
   Microsoft: son los que la gente reconoce de un vistazo, y las guías de uso de
   Microsoft piden fondo blanco o negro con el logo sin alterar. */
.boton--microsoft {
  background: var(--blanco); color: #1b1b1b; border-color: var(--gris-300);
}
.boton--microsoft:hover { border-color: var(--gris-500); background: var(--gris-100); }
.boton[disabled], .boton--inactivo {
  background: var(--gris-200); color: var(--gris-500);
  cursor: not-allowed; border-color: transparent;
}

.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------------------------------------ Progreso */

.progreso { margin-bottom: 1.5rem; }
.progreso__texto {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem;
}
.progreso__numero {
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.progreso__barra {
  height: 10px; background: var(--gris-200);
  border-radius: 999px; overflow: hidden;
}
.progreso__relleno {
  height: 100%; background: var(--naranja);
  border-radius: 999px; transition: width .4s ease;
}
.progreso__relleno--completo { background: var(--verde-700); }

/* ----------------------------------------------------------------- Formulario */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .35rem; }
.campo__etiqueta { font-weight: 600; font-size: .92rem; }
.campo__ayuda { color: var(--gris-500); font-size: .84rem; }

/* Los <textarea> se igualan a los <input>: si no, heredan la tipografía del
   navegador y el formulario parece de otra aplicación a mitad de página. */
.campo textarea,
.campo input[type="text"],
.campo input[type="password"],
.campo input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: .7rem .9rem;
  font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-900);
}
.campo textarea { min-height: 72px; resize: vertical; }
.campo textarea:focus,
.campo input:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
.campo input::placeholder { color: var(--gris-500); }

/* Campo de PIN: dígitos grandes y separados, se teclea de un vistazo. */
.campo--pin input {
  letter-spacing: .5em;
  font-size: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- Mensajes */

.aviso {
  border-radius: var(--radio-chico);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-size: .95rem;
}
.aviso--error   { background: var(--rojo-100);  border-color: #fecaca; color: var(--rojo-700); }
.aviso--exito   { background: var(--verde-100); border-color: #bbf7d0; color: var(--verde-700); }
.aviso--info    { background: var(--azul-100);  border-color: #c7dcef; color: var(--azul-800); }
.aviso--atencion{ background: var(--ambar-100); border-color: #fde68a; color: var(--ambar-600); }

/* --------------------------------------------------------------- Acceso (login) */

/* Negro liso con una franja naranja arriba. Se descartó el degradado que
   había: un degradado de dos azules es exactamente el fondo que tiene
   cualquier plantilla, y aquí la marca ya trae con qué. */
.acceso {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--negro);
}
.acceso::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--naranja);
}
.acceso__caja {
  width: 100%; max-width: 420px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 2.25rem 2rem;
}
/* El cuadro del paz y salvo (§53): como el del instructivo del formato. Se
   llama `cuadro-paz` y no `matriz` porque `.matriz` ya es la de los avisos
   (§49), y compartir el nombre le pasaba reglas de una a la otra.
   Las tres casillas van en columnas fijas y estrechas, bajo un rótulo común
   «Le aplica a», para que se lea de un vistazo qué le toca a quién. */
.cuadro-paz { table-layout: fixed; min-width: 820px; }
.cuadro-paz__col-quien { width: 32%; }
.cuadro-paz__col-casilla { width: 104px; }
.tabla.cuadro-paz th { white-space: normal; line-height: 1.35; }
.tabla.cuadro-paz td { vertical-align: top; padding-top: .95rem; padding-bottom: .95rem; }
.tabla.cuadro-paz tbody tr:hover { background: transparent; }
.tabla.cuadro-paz .cuadro-paz__casilla { text-align: center; vertical-align: middle; }
.tabla.cuadro-paz th.cuadro-paz__grupo {
  text-align: center; color: var(--gris-900);
  border-bottom: 1px solid var(--gris-300);
  padding-bottom: .45rem;
}
.tabla.cuadro-paz thead tr:last-child th { padding-top: .45rem; }
.cuadro-paz__casilla .confirmacion__casilla {
  justify-content: center; margin: 0; padding: .2rem 0;
}
.cuadro-paz select { width: 100%; }
/* El correo del fondo, igual que los desplegables de al lado: si no, sale con
   la letra y el borde del navegador y parece un campo de otra pantalla. */
.cuadro-paz input[type="email"] {
  width: 100%; min-height: 42px; padding: .5rem .6rem;
  font: inherit; font-size: .95rem;
  border: 1.5px solid var(--gris-300); border-radius: var(--radio-chico);
  background: var(--blanco); color: var(--gris-900);
}
.cuadro-paz input[type="email"]::placeholder { color: var(--gris-400); }
.cuadro-paz input[type="email"]:focus {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
.cuadro-paz__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .3rem;
}
.cuadro-paz__area { font-weight: 700; letter-spacing: -.005em; color: var(--gris-900); }
.tabla.cuadro-paz a.cuadro-paz__editar { font-size: .8rem; font-weight: 600; flex: 0 0 auto; }
.cuadro-paz__aspectos { color: var(--gris-500); font-size: .85rem; line-height: 1.45; }
.cuadro-paz__inactiva td { opacity: .5; }
.cuadro-paz__fijo { color: var(--gris-500); font-size: .88rem; line-height: 1.45; margin: 0; }
.cuadro-paz__etiqueta {
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-700);
}
.cuadro-paz__ayuda { color: var(--gris-500); font-size: .8rem; line-height: 1.4; margin-top: .35rem; }
.cuadro-paz__error { color: var(--rojo-700); font-size: .8rem; margin-top: .35rem; }

/* La página de los fondos de empleados (§53): la misma caja del acceso, más
   ancha, porque lleva una fila por persona con su respuesta. */
.acceso__caja--ancha { max-width: 760px; }
.fondo__persona {
  padding: 1.1rem 0;
  border-top: var(--linea);
}
.fondo__persona:first-of-type { border-top: 0; }
.fondo__opciones {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin: .6rem 0;
}
.acceso__marca {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--linea);
}
.acceso__logo { width: 148px; height: auto; display: block; }
.acceso__marca span {
  display: block;
  margin-top: .6rem;
  color: var(--gris-500);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Estado vacío */

/* Un estado vacío no necesita un dibujo: necesita decir en una línea qué pasa
   y en otra qué hacer. El emoji que había antes —🔒, 📋, 🚧— además incumple la
   regla de no usar emoji como icono, porque cada sistema lo dibuja distinto y
   ninguno encaja con la marca. */
.vacio {
  text-align: center;
  padding: 2.75rem 1.5rem;
  color: var(--gris-700);
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
}
.vacio h2, .vacio h3 {
  margin: 0 0 .4rem;
  font-size: 1.1rem;
  letter-spacing: -.012em;
}
.vacio p { margin: 0 auto; max-width: 46ch; }
.vacio .acciones { justify-content: center; margin-top: 1.35rem; }

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 560px) {
  .contenido { padding: 1.25rem 1rem 3rem; }
  .encabezado__interior { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .tarjeta__cabecera { flex-direction: column; gap: .5rem; }
  .acciones .boton { width: 100%; }
  h1 { font-size: 1.35rem; }
}

/* Indicador de carga de HTMX: se muestra solo mientras hay petición en vuelo. */
.htmx-indicator { opacity: 0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.boton { pointer-events: none; opacity: .75; }

/* Alpine: evita el parpadeo de los elementos con x-show antes de que cargue. */
[x-cloak] { display: none !important; }

/* --------------------------------------------------------- Confirmar lectura */
/*
 * Bloque separado del resto de acciones: confirmar la lectura no es "otro
 * botón", es una declaración que queda registrada con fecha y versión. La
 * separación visual ayuda a que se lea antes de pulsarla.
 */
.confirmacion {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--gris-300);
}
.confirmacion__casilla {
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  margin-bottom: .9rem;
  font-weight: 500;
  /* Toda la fila es pulsable, no solo la casilla: importa en tablet. */
  padding: .35rem 0;
  user-select: none;
}
.confirmacion__casilla input[type="checkbox"] {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--naranja);
}

/* ----------------------------------------------------------------- Menú */

/* ---------------------------------------------------------- Cifras del panel */

/* Las cifras van en una **rejilla continua**, separadas por líneas de un pixel
   en vez de por huecos entre tarjetas. Cuatro cajas flotando con sombra es
   exactamente el panel que trae cualquier plantilla; una rejilla con reglas se
   parece más a un tablero de fábrica, que es lo que esto es. */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--gris-200);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.cifra {
  flex: 1 1 158px;
  background: var(--blanco);
  padding: 1.1rem 1.15rem 1.2rem;
}
.cifra__numero {
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
/* El rótulo debajo, más pequeño y en gris: la cifra es el dato y la etiqueta
   solo dice de qué. Al revés compiten. Iba en versalitas de 10,9 px hasta el
   20-oct-2026 (§58); en minúscula se lee sin dejar de ser secundario. */
.cifra__etiqueta {
  margin-top: .45rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
}
/* Solo se pinta lo que exige que alguien haga algo, y además se marca con una
   barra arriba: el color solo no lo distingue quien no separa bien los tonos. */
.cifra--atencion { box-shadow: inset 0 3px 0 var(--amarillo); }
.cifra--atencion .cifra__numero { color: var(--ambar-600); }
.cifra--problema { box-shadow: inset 0 3px 0 var(--rojo-700); }
.cifra--problema .cifra__numero { color: var(--rojo-700); }

/* -------------------------------------------------------------------- Tablas */

.tabla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  background: var(--blanco);
}
.tabla th, .tabla td {
  text-align: left;
  padding: .8rem .95rem;
  vertical-align: middle;
}
/* La cabecera se separa con una regla **negra**, no con un fondo gris: marca
   dónde empiezan los datos sin meter otro bloque de color. */
.tabla th {
  border-bottom: 2px solid var(--negro);
  white-space: nowrap;
  padding-top: .6rem;
  padding-bottom: .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-700);
}
.tabla tbody td { border-bottom: var(--linea); }
/* Un rótulo de fila (`<th scope="row">`) va dentro del cuerpo: se separa como
   sus celdas, no con la regla negra de la cabecera, que en cada fila partía la
   tabla de la confirmación de «Corregir» en franjas. */
.tabla tbody th {
  border-bottom: var(--linea);
  padding-top: .8rem; padding-bottom: .8rem;
}
.tabla tbody tr:last-child th { border-bottom: 0; }
/* La última fila sin línea: una regla suelta al final de una caja que ya tiene
   borde se ve doble. */
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color 120ms var(--salida); }
.tabla tbody tr:hover { background: var(--naranja-050); }
/* Las cifras alineadas por la coma decimal se comparan de un vistazo. */
.tabla td { font-variant-numeric: tabular-nums; }
.tabla a { font-weight: 600; text-decoration: none; }
.tabla a:hover { text-decoration: underline; }
.tabla__vacia {
  text-align: center; color: var(--gris-500); padding: 2.5rem 1rem;
  font-variant-numeric: normal;
}

/* Barra de avance compacta, para meter dentro de una fila de tabla. */
.avance-mini {
  display: flex; align-items: center; gap: .5rem; min-width: 130px;
}
.avance-mini__barra {
  flex: 1; height: 7px; background: var(--gris-200);
  border-radius: 999px; overflow: hidden;
}
.avance-mini__relleno { height: 100%; background: var(--naranja); border-radius: 999px; }
.avance-mini__relleno--completo { background: var(--verde-700); }
.avance-mini__texto {
  font-size: .82rem; color: var(--gris-500);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------------------ Secciones */

.seccion { margin-bottom: 2.25rem; }
.seccion__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .55rem;
  margin-bottom: 1rem;
  border-bottom: var(--linea);
}
.seccion__titulo {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gris-900);
}
.seccion__nota { color: var(--gris-500); font-size: .85rem; }

/* --------------------------------------------------------------- Filtros */

.filtros {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1rem;
}
.filtros input[type="search"] {
  flex: 1 1 240px; min-height: 44px;
  padding: .5rem .8rem; font: inherit;
  border: 1.5px solid var(--gris-300); border-radius: var(--radio-chico);
}
.filtros input[type="search"]:focus {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
.filtros__pestana {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: .45rem .85rem; border-radius: var(--radio-chico);
  text-decoration: none; font-size: .85rem; font-weight: 600;
  color: var(--gris-700); background: var(--blanco);
  border: var(--linea);
  transition: border-color 140ms var(--salida), background-color 140ms var(--salida);
}
.filtros__pestana:hover { border-color: var(--gris-500); }
.filtros__pestana--activa {
  background: var(--negro); color: var(--blanco); border-color: var(--negro);
}
.filtros__pestana--activa:hover { border-color: var(--negro); }
/* Cuántos hay en cada pestaña. A diferencia de los contadores del menú —que se
   esconden en cero para no enseñar a ignorarlos—, aquí el cero SÍ se pinta: es
   dato descriptivo, no un aviso, y saber que «Cerrados» está vacío ahorra el
   clic. Por eso va en gris y con `tabular-nums`, nunca en color de alarma. */
.filtros__cuenta {
  margin-left: .5rem;
  font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gris-500);
}
.filtros__pestana--activa .filtros__cuenta { color: rgba(255, 255, 255, .65); }

/* --------------------------------------------------------- Definiciones/ficha */

.definiciones {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .45rem 1.25rem; font-size: .93rem;
}
.definiciones dt { color: var(--gris-500); }
.definiciones dd { margin: 0; font-weight: 500; }

.paginacion {
  display: flex; gap: .5rem; align-items: center; justify-content: center;
  margin-top: 1.25rem; font-size: .9rem; color: var(--gris-700);
}

@media (max-width: 700px) {
  .encabezado__interior { flex-direction: column; align-items: stretch; }
  .menu { justify-content: flex-start; }
  .definiciones { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .definiciones dd { margin-bottom: .6rem; }
}

/* ------------------------------------------------------------ Evaluación */
/*
 * Opciones de respuesta con área de pulsación grande: se contesta en tablet,
 * y una diana pequeña provoca respuestas equivocadas por accidente — en un
 * examen con dos intentos, eso importa.
 */
.opciones { display: grid; gap: .6rem; }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  cursor: pointer;
  background: var(--blanco);
  transition: border-color .12s ease, background .12s ease;
}
.opcion:hover { border-color: var(--naranja); background: var(--naranja-050); }
.opcion input[type="radio"] {
  width: 22px; height: 22px; margin-top: .1rem;
  flex: 0 0 auto; cursor: pointer;
  accent-color: var(--naranja);
}
/* La opción marcada se resalta entera, no solo el círculo. */
.opcion:has(input:checked) {
  border-color: var(--naranja);
  background: var(--naranja-050);
  box-shadow: 0 0 0 1px var(--naranja);
}

/* --------------------------------------------------------- Configuración */

.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Los <select> nativos heredan una tipografía diminuta; se igualan al resto
   de campos para que la tabla de cargos no parezca de otra aplicación. */
.campo select,
.tabla select,
select {
  font: inherit;
  font-size: .95rem;
  padding: .5rem .6rem;
  min-height: 42px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-900);
  max-width: 100%;
}
.campo select { min-height: 52px; font-size: 1.05rem; }
select:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}

.campo textarea {
  width: 100%;
  font: inherit;
  padding: .7rem .9rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-900);
  resize: vertical;
}
.campo textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
.campo input[type="number"] {
  width: 100%; max-width: 160px;
  min-height: 52px; padding: .7rem .9rem;
  font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
}

/* La casilla no lleva etiqueta encima: el texto va al lado del control. */
.campo--casilla { gap: .2rem; }

/* Cada opción de respuesta en edición, agrupada visualmente. */
.opcion-editable {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico);
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  background: var(--gris-100);
}
.opcion-editable__pie {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
}
.opcion-editable input[type="number"] { max-width: 90px; }

/* --- Lienzo de firma -----------------------------------------------------
   El recuadro donde se traza la firma dentro de la app. El canvas tiene
   resolución fija (900x260) y se escala aquí: así el PNG que se manda a Odoo
   pesa siempre lo mismo, se vea en una tablet o en un portátil. */

.firma__lienzo {
  position: relative;
  border: 2px dashed var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  overflow: hidden;
}

.firma__lienzo canvas {
  display: block;
  width: 100%;
  height: auto;
  /* Sin esto, arrastrar el dedo para firmar desplaza la página en la tablet. */
  touch-action: none;
  cursor: crosshair;
}

.firma__pista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--gris-500);
  font-size: .95rem;
}

.firma__pista[hidden] {
  display: none;
}

/* La firma guardada, tal como se previsualiza antes de usarla. */
.firma__guardada {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  padding: .75rem;
  text-align: center;
}

.firma__guardada img {
  max-width: 100%;
  height: auto;
  max-height: 140px;
}

/* ------------------------------------------------ Separador de la pantalla de
   acceso. Una raya con la frase encima, para que se lea que son dos caminos
   distintos y no dos pasos del mismo. */
.acceso__separador {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0;
  color: var(--gris-500); font-size: .85rem;
}
.acceso__separador::before,
.acceso__separador::after {
  content: ""; flex: 1; height: 1px; background: var(--gris-300);
}

/* ═══════════════════════════════════════════════════════ Recorrido (pasos)
   La inducción es **una secuencia**: cinco temas, el acta y la evaluación. Con
   siete tarjetas sueltas del mismo tamaño eso no se ve, y la pantalla se lee
   como una lista de cosas inconexas — que es justo lo que la hacía parecer
   genérica.

   Aquí se dibuja como un recorrido con un riel a la izquierda. Y lo más
   importante: **lo terminado se pliega a una línea y lo pendiente se despliega**.
   Si todo pesa lo mismo, no se distingue de un vistazo qué falta, que es lo
   único que la persona viene a mirar. */

.pasos {
  position: relative;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 1rem;
  padding-bottom: .35rem;
}

/* El riel: une un nodo con el siguiente. En el último no se dibuja, o el
   recorrido parecería continuar hacia algo que no existe. */
.paso::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: -.35rem;
  width: 2px;
  background: var(--gris-200);
}
.paso:last-child::before { display: none; }

.paso__nodo {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--gris-300);
  color: var(--gris-500);
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.paso__nodo svg { width: 16px; height: 16px; }

.paso__cuerpo {
  min-width: 0;
  padding-bottom: 1.15rem;
}

.paso__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  min-height: 34px;
}

.paso__titulo {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.011em;
}

.paso__descripcion { color: var(--gris-700); margin: .4rem 0 .9rem; }

/* La ficha técnica: versión, responsable, fecha. En una sola línea, pequeña y
   en gris, para que se pueda consultar sin competir con el título. */
.paso__meta {
  display: flex; flex-wrap: wrap;
  gap: .15rem .9rem;
  margin-top: .5rem;
  color: var(--gris-500);
  font-size: .8rem;
}
.paso__meta > * { white-space: nowrap; }

/* --- Terminado: plegado a una línea ------------------------------------- */
.paso--hecho .paso__nodo {
  background: var(--verde-700);
  border-color: var(--verde-700);
  color: var(--blanco);
}
.paso--hecho .paso__titulo { font-weight: 500; color: var(--gris-700); }
.paso--hecho .paso__cuerpo { padding-bottom: .85rem; }

/* --- Activo: es lo único que debe pesar --------------------------------- */
.paso--activo .paso__nodo {
  border-color: var(--naranja);
  color: var(--naranja-700);
  box-shadow: 0 0 0 4px var(--naranja-050);
}
.paso--activo .paso__cuerpo {
  background: var(--blanco);
  border: var(--linea);
  border-left: 3px solid var(--naranja);
  border-radius: var(--radio);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.15rem;
}
.paso--activo .paso__cabecera { min-height: 0; }
.paso--activo .paso__titulo { font-size: 1.12rem; font-weight: 700; }

/* --- Bloqueado: presente pero apagado ----------------------------------- */
.paso--bloqueado .paso__titulo { color: var(--gris-500); font-weight: 500; }
.paso--bloqueado .paso__nodo { border-style: dashed; }

/* Enlace discreto para volver a abrir algo ya terminado. No es un botón: si lo
   fuera, competiría con la acción que de verdad toca. */
.paso__enlace {
  font-size: .82rem;
  color: var(--gris-500);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-300);
}
.paso__enlace:hover { color: var(--naranja-700); border-color: var(--naranja); }

/* ────────────────────────────────────────────────────────────── Portada
   La cabecera de una pantalla. Antes era un <h1> y un párrafo, que es lo que
   pone cualquiera. */
.portada {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--negro);
}
/* Las migas sobre el título (§58). Sustituyen al rótulo en versalitas
   naranja, que en 57 pantallas casi siempre repetía lo que ya dice la barra, y
   al «← Volver a…» suelto. En minúscula y gris: dicen dónde estás y dejan
   volver sin competir con el título; el naranja de la página queda para la
   acción. */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .45rem;
  margin: 0 0 .45rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--gris-500);
}
.migas a {
  color: var(--gris-700);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radio-chico);
}
.migas a:hover { color: var(--naranja-700); text-decoration: underline; text-underline-offset: 3px; }
.migas a:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.migas__sep { color: var(--gris-400); }
.portada__titulo {
  margin: 0;
  font-size: 1.85rem; line-height: 1.15;
  letter-spacing: -.022em;
}
.portada__nota { margin: .55rem 0 0; color: var(--gris-700); max-width: 52ch; }
/* Más de un botón en la cabecera, alineados y sin que el formulario de uno
   meta su margen. */
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.portada__acciones form { margin: 0; }

/* El avance como **segmentos** y no como barra continua: son pasos contables,
   y una barra continua se lee como «cargando». */
.avance { text-align: right; flex: none; }
.avance__cifra {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.avance__cifra span { color: var(--gris-400); font-weight: 600; }
.avance__rotulo {
  margin: .25rem 0 .5rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
}
.avance__segmentos { display: flex; gap: 3px; justify-content: flex-end; }
.avance__segmento {
  width: 22px; height: 5px;
  border-radius: 2px;
  background: var(--gris-200);
}
.avance__segmento--lleno { background: var(--naranja); }
.avance--completo .avance__segmento--lleno { background: var(--verde-700); }

@media (max-width: 560px) {
  .portada { align-items: flex-start; }
  .portada__titulo { font-size: 1.45rem; }
  .avance { text-align: left; }
  .avance__segmentos { justify-content: flex-start; }
  .paso { grid-template-columns: 28px minmax(0, 1fr); gap: 0 .75rem; }
  .paso::before { left: 13px; top: 30px; }
  .paso__nodo { width: 28px; height: 28px; font-size: .75rem; }
}

/* ═══════════════════════════════════════════════════════════ Marcador
   La pantalla de resultado es el momento con más carga del recorrido: o se
   aprobó o hay que repetir. Antes era una tarjeta centrada con un emoji, que es
   lo que resta seriedad a algo que queda registrado en un expediente.

   Aquí la cifra manda —enorme, con la fuente tabular— y el resto se ordena a su
   alrededor. Sin emoji: los iconos van en SVG. */
.marcador {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.75rem;
  align-items: center;
  padding: 1.75rem;
  background: var(--blanco);
  border: var(--linea);
  border-left: 4px solid var(--gris-300);
  border-radius: var(--radio);
  margin-bottom: 1.5rem;
}
.marcador--aprobado { border-left-color: var(--verde-700); }
.marcador--repetir  { border-left-color: var(--ambar-600); }

.marcador__cifra {
  font-size: 3.4rem; font-weight: 700; line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.marcador__cifra span {
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-400);
}
.marcador--aprobado .marcador__cifra { color: var(--verde-700); }

.marcador__veredicto {
  margin: 0 0 .3rem;
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.015em;
}
.marcador__detalle { margin: 0; color: var(--gris-700); }
.marcador__pie { grid-column: 1 / -1; margin-top: 1.4rem; }

@media (max-width: 560px) {
  .marcador { grid-template-columns: 1fr; gap: .9rem; }
  .marcador__cifra { font-size: 2.8rem; }
}

/* Las preguntas falladas, numeradas y separadas por líneas. Antes iban en un
   <ol> dentro de una tarjeta con el padding por defecto del navegador. */
.lista-fallos {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: fallo;
  border: var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
}
.lista-fallos li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding: .85rem 1rem;
  border-bottom: var(--linea);
}
.lista-fallos li:last-child { border-bottom: 0; }
.lista-fallos li::before {
  counter-increment: fallo;
  content: counter(fallo);
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gris-400);
}

/* ═══════════════════════════════════════════ Formularios repetidos (filas)
   Un formset dibujado en crudo es una pila de campos sin principio ni fin.
   Cada fila va en su propia caja con una línea, para que se vea dónde acaba
   una y empieza la siguiente. */
.fila {
  display: grid;
  gap: .9rem;
  padding: 1.1rem 1.15rem;
  margin-bottom: .85rem;
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
}
.fila__borrar { color: var(--rojo-700); font-size: .88rem; }

/* Los <select> y los <input type="number"> heredaban la tipografía del
   navegador y rompían el formulario a mitad de página, igual que pasaba con
   los <textarea>. */
.campo select,
.campo input[type="number"],
.campo input[type="email"],
.campo input[type="date"] {
  width: 100%;
  min-height: 52px;
  padding: .7rem .9rem;
  font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-900);
}
.campo select:focus,
.campo input[type="number"]:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}

/* ══════════════════════════════════════════════════ Tareas de Tecnología */
.tareas { list-style: none; margin: 1rem 0 0; padding: 0; }
.tarea {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .85rem 0;
  border-top: var(--linea);
}
.tarea__nombre { margin: 0; font-weight: 600; }
.tarea__acciones {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start;
  margin: 0;
}

/* ═══════════════════════════════════════════════════ Fichas (lista de trabajo)
   Una rejilla compacta de cosas por hacer. Nace de un caso concreto: los 25
   cargos administrativos sin plantilla salían como veinticinco viñetas dentro
   de un aviso amarillo más alto que la página, que empujaba el contenido real
   fuera de pantalla y —lo peor— no dejaba hacer nada desde ahí.

   Aquí cada ficha es un enlace que abre el formulario con el cargo ya escrito.
   Lo mismo deja de ser una alarma y pasa a ser una lista de trabajo. */
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--gris-200);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.ficha-forma { margin: 0; display: contents; }
.ficha {
  display: flex; align-items: center;
  width: 100%;
  min-height: 48px;
  padding: .65rem .9rem;
  background: var(--blanco);
  color: var(--gris-900);
  text-decoration: none;
  text-align: left;
  font: inherit; font-size: .88rem;
  border: 0;
  cursor: pointer;
  transition: background-color 130ms var(--salida), color 130ms var(--salida);
}
.ficha:hover { background: var(--naranja-050); color: var(--naranja-700); }
.ficha:focus-visible {
  outline: 2px solid var(--naranja-700);
  outline-offset: -2px;
}
/* Una flecha discreta que solo aparece al pasar por encima: dice que se puede
   pulsar sin llenar la rejilla de iconos. */
.ficha::after {
  content: "→";
  margin-left: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 130ms var(--salida), transform 130ms var(--salida);
}
.ficha:hover::after { opacity: 1; transform: translateX(0); }

/* Duplicar una plantilla, plegado dentro de la fila de la tabla. */
.duplicar { display: inline-block; margin-left: .75rem; }
.duplicar summary {
  cursor: pointer; font-size: .85rem; color: var(--gris-500);
}
.duplicar summary:hover { color: var(--naranja-700); }
.duplicar form {
  display: flex; gap: .4rem; margin-top: .5rem; align-items: center;
}
.duplicar input[type="text"] {
  min-height: 40px; padding: .4rem .6rem;
  font: inherit; font-size: .88rem;
  border: 1.5px solid var(--gris-300); border-radius: var(--radio-chico);
}
.duplicar input[type="text"]:focus {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
.duplicar .boton { min-height: 40px; padding: .4rem .8rem; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  .ficha, .ficha::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════ Editor de plantilla
   Una fila del formato = una línea de la tabla, como en el papel. La versión
   anterior dibujaba el formset en crudo: 18 filas × 5 campos apilados, noventa
   campos de scroll sin saber nunca en qué fila se estaba.

   Los controles van compactos a propósito: aquí la unidad de lectura es la
   fila, no el campo. */
.editor td { vertical-align: top; padding: .55rem .6rem; }

.editor input[type="text"],
.editor input[type="number"],
.editor select,
.editor textarea {
  width: 100%;
  min-height: 38px;
  padding: .35rem .5rem;
  font: inherit; font-size: .85rem;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-900);
}
.editor textarea { min-height: 66px; resize: vertical; line-height: 1.4; }
.editor input:focus, .editor select:focus, .editor textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-100);
}
/* Una fila sin responsable se señala en el propio control: es lo que impide
   firmar esa parte, y con 46 filas así hay que verlo sin leer. */
.editor select:not(:focus):invalid,
.editor select[data-vacio="si"] { border-color: var(--gris-300); }

.editor__orden { white-space: nowrap; }
.editor__orden input { width: 100%; text-align: center; }
.editor__mover { display: flex; gap: 2px; margin-bottom: .3rem; }
.editor__flecha {
  flex: 1;
  min-height: 26px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-500);
  cursor: pointer;
  font-size: .8rem; line-height: 1;
  transition: border-color 120ms var(--salida), color 120ms var(--salida);
}
.editor__flecha:hover { border-color: var(--naranja); color: var(--naranja-700); }
.editor__flecha:active { transform: scale(.94); }

.editor__ti { text-align: center; }
.editor__ti input[type="checkbox"] {
  width: 22px; height: 22px;
  accent-color: var(--naranja);
  cursor: pointer;
  min-height: 0;
}

.editor__quitar { text-align: center; }
.editor__borrar {
  width: 30px; height: 30px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--gris-500);
  cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  transition: border-color 120ms var(--salida), color 120ms var(--salida),
              background-color 120ms var(--salida);
}
.editor__borrar:hover {
  border-color: var(--rojo-700); color: var(--rojo-700); background: var(--rojo-100);
}
.editor__borrar:active { transform: scale(.94); }

/* Por debajo de 900px la tabla se sale; se deja desplazar en horizontal dentro
   de su caja, que es mejor que apilar los campos y volver al problema de
   antes. */
@media (max-width: 900px) {
  .editor { min-width: 760px; }
}

/* ═══════════════════════════════════════════════════════════ Explicación
   Un bloque que dice cómo funciona algo, antes de enseñarlo. Nace de un caso
   concreto: la pantalla de plantillas mostraba «cargos personalizados» sin
   haber explicado nunca que existe una base y que personalizar es apartarse de
   ella, así que un estado perfectamente normal se leía como un problema.

   Va en gris y sin color de alarma **a propósito**: no es un aviso, es una
   explicación. Si se pintara de ámbar volvería a parecer que algo va mal. */
.explicacion {
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.75rem;
  background: var(--gris-050);
  border: var(--linea);
  border-left: 3px solid var(--gris-400);
  border-radius: var(--radio);
}
.explicacion__titulo {
  margin: 0 0 .7rem;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gris-900);
}
.explicacion__pasos {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: paso;
  display: grid; gap: .6rem;
}
.explicacion__pasos li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .7rem;
  align-items: baseline;
  color: var(--gris-700);
  font-size: .92rem;
}
/* Todo hijo real va a la segunda columna; el número lo pone `::before`, que se
   coloca solo en la primera. Sin esto, un segundo elemento en el `li` cae en la
   columna de 22 px y se lee una palabra por renglón. */
.explicacion__pasos li > * { grid-column: 2; }
.explicacion__pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--negro); color: var(--blanco);
  font-size: .68rem; font-weight: 700;
}

/* ------------------------------------------------- Polivalencia: operaciones

   La cola de Polivalencia enseñaba «6 operaciones» y nada más, así que para
   saber en qué nivel iba cada una había que salir a la otra aplicación. Lo
   dijo Jacobo el 27-ago-2026 y tenía razón: el dato ya estaba guardado y no
   se estaba mostrando.

   Se pinta la escala de los cuatro niveles y no un número, porque de un
   vistazo se compara mejor. El nivel 3 lleva marca propia: es el que acredita
   la competencia mínima y cierra el proceso de onboarding. */

.persona {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  margin-bottom: .75rem;
  overflow: hidden;
}

.persona__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  padding: .7rem .9rem;
  background: var(--gris-050);
  border-bottom: 1px solid var(--gris-200);
}

.persona__nombre { font-weight: 600; }

.persona__meta {
  font-size: .82rem;
  color: var(--gris-500);
}

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

.operacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, auto) minmax(6rem, auto);
  align-items: center;
  gap: .5rem .9rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--gris-100);
  font-size: .88rem;
}
.operacion:last-child { border-bottom: 0; }

.operacion__nombre {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.operacion__critica {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .3rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ambar-600);
  background: var(--ambar-100);
  border-radius: var(--radio-chico);
}

.operacion__escala { display: flex; gap: 3px; }

/* Cuatro casillas numeradas. Vacía = nivel sin cerrar. */
.nivel {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--gris-400);
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico);
}

.nivel--hecho {
  color: #fff;
  background: var(--verde-700);
  border-color: var(--verde-700);
}

/* El que está cursando ahora: hueco, con borde vivo. Se distingue de lo
   cerrado sin competir con ello. */
.nivel--actual {
  color: var(--azul-800);
  background: var(--azul-100);
  border-color: var(--azul-700);
}

/* El 3 acredita la competencia. Lleva una marca inferior para que se lea como
   el hito que es, esté cerrado o no. */
.nivel--clave { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }

.operacion__nota { color: var(--gris-500); font-size: .82rem; }

.operacion__fecha {
  color: var(--gris-500);
  font-size: .8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Solo se marca lo que lleva parado más de tres meses: si se señalara todo,
   dejaría de señalar nada. */
.operacion__parada {
  display: inline-block;
  padding: .05rem .3rem;
  font-size: .7rem;
  color: var(--ambar-600);
  background: var(--ambar-100);
  border-radius: var(--radio-chico);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .operacion {
    grid-template-columns: 1fr auto;
    row-gap: .25rem;
  }
  .operacion__nombre { grid-column: 1 / -1; }
  .operacion__fecha { text-align: left; }
}

/* Icono dentro de un botón. Alineado a la línea base del texto y con el mismo
   color, para que se lea como parte de la etiqueta y no como un adorno. */
.boton__icono {
  flex: none;
  margin-right: .4rem;
  vertical-align: -3px;
}

/* --------------------------------------------- Barra lateral: rediseño 27-ago

   La barra se saturó al ir sumando roles: quince opciones en cinco grupos, con
   «Pendientes» repetido dos veces y Configuración ocupando un tercio del alto.
   Lo dijo Jacobo: «es muy confuso realmente en qué módulo se hace qué».

   El 20-oct-2026 se rehízo otra vez (§57): las notas de grupo, el botón
   plegable de Ajustes y el árbol de sus pantallas se retiraron. */

/* Con ratón, filas más bajas: los 44px son para el dedo en la tablet, y en un
   portátil hacían que la barra no cupiera sin desplazarse. */
@media (pointer: fine) {
  .lateral__enlace,
  .lateral__salir { min-height: 38px; padding: .4rem .6rem; }
  .lateral__volver { min-height: 34px; }
  .lateral__salir-icono { width: 38px; height: 38px; }
}

/* La flecha del nombre, al pie: apunta hacia arriba, adonde se abre «Lo mío»,
   y se da la vuelta al abrirlo. */
.lateral__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gris-400);
  transition: transform .18s var(--salida);
}

.lateral__chevron--abierto { transform: rotate(180deg); }

/* El número de una cola. Va al final del enlace y solo aparece cuando hay
   algo: un cero permanente enseña a ignorar los números.

   Neutro por defecto (20-oct-2026): había cinco pastillas naranja en la
   columna y la barra de «estás aquí» quedaba en tercer lugar. El naranja, con
   tinta negra, queda para lo urgente —alguien bloqueado, un conflicto, un aviso
   que no salió—. Rectangular como las insignias (§25), no en píldora.

   Ya no se invierte en la opción activa: aquel negro era de cuando el activo
   tenía fondo claro, y sobre el 12 % de blanco de hoy no se veía. */
.lateral__contador {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .35rem;
  border-radius: var(--radio-chico);
  background: rgba(255,255,255,.14);
  color: var(--blanco);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lateral__contador--urgente {
  background: var(--naranja);
  color: var(--negro);
}

/* ---------------------------------------------------------------------------
   Rejilla de campos — alta y edición de empleados (§46, §48) y perfiles de
   cargo (§50)

   Treinta campos en una sola columna serían un formulario infinito hacia
   abajo — exactamente la queja que se llevó el editor de plantillas de §27.
   Van en dos columnas dentro de cada sección, y los que llevan texto largo
   ocupan las dos.

   Se llamaba `.alta__rejilla`. Se renombró al necesitarla en una tercera
   pantalla: un nombre que dice de qué pantalla es invita a copiar la regla en
   vez de reutilizarla, y dos copias de la misma regla es como se llega a que
   un día digan cosas distintas (§39, §44). */

.alta__seccion { margin-bottom: 1.25rem; }

/* El reingreso (20-oct-2026). Su paso anterior va en la tarjeta gris de lo
   que ya no se mueve —la misma de un proceso retirado—, y el resto de la ficha
   plegado debajo del contrato nuevo: casi nunca cambia al volver, y treinta
   campos abiertos esconderían los diez que importan. */
.reingreso__antes { margin-bottom: 1.5rem; }
.reingreso__antes .seccion__titulo { margin: 0 0 .8rem; }
.reingreso__resto { padding: 0; margin-bottom: 1.25rem; }
.reingreso__resto > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  min-height: 44px;
  padding: .9rem 1.35rem;
  cursor: pointer;
  list-style: none;
}
.reingreso__resto > summary::-webkit-details-marker { display: none; }
/* Con `display: flex` el navegador quita el triángulo de serie, y sin él no
   se ve que la fila se abre. Este gira al abrir. */
.reingreso__resto > summary::before {
  content: "";
  align-self: center;
  width: .45rem; height: .45rem;
  margin-right: .2rem;
  border-right: 2px solid var(--gris-700);
  border-bottom: 2px solid var(--gris-700);
  transform: rotate(-45deg);
  transition: transform 160ms var(--salida);
}
.reingreso__resto[open] > summary::before { transform: rotate(45deg); }
.reingreso__resto > summary:hover .reingreso__resto-titulo { color: var(--naranja-700); }
@media (prefers-reduced-motion: reduce) {
  .reingreso__resto > summary::before { transition: none; }
}
.reingreso__resto > summary:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
.reingreso__resto-titulo { font-weight: 650; color: var(--gris-900); }
.reingreso__grupo {
  padding: 1.1rem 1.35rem 1.35rem;
  border-top: var(--linea);
}
.reingreso__grupo .seccion__titulo { margin: 0 0 1rem; }
/* En el alta, cuando la cédula es de alguien que se fue: el aviso lleva su
   propio botón, porque es la salida y no una nota al margen. */
.reingreso__aviso {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem 1.25rem;
}
.reingreso__aviso > div { flex: 1 1 22rem; }

.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

/* Cuáles ocupan las dos columnas lo decide el formulario, no el CSS: está
   en `AltaEmpleadoForm.CAMPOS_ANCHOS`, donde se puede probar. */
.rejilla-campos .campo--ancho { grid-column: 1 / -1; }

/* Sin esto los controles se estiran para rellenar la fila: `.campo` es un
   grid, y cuando el campo de al lado lleva texto de ayuda y este no, el que
   no lo lleva reparte el hueco sobrante entre sus filas. Medido: el
   desplegable de «Empresa» salía a 86px contra los 52 de sus hermanos.
   Se ve como si estuviera mal alineado y no se entiende por qué. */
.rejilla-campos .campo { align-content: start; }

/* El asterisco de obligatorio. Naranja de marca sobre blanco, que es el que
   pasa AA (§25); el `--naranja-500` no llega. */
.campo__obligatorio {
  color: var(--naranja-700);
  font-weight: 700;
}

/* El resumen de la confirmación. Es para leer, no para editar: etiqueta a la
   izquierda en gris, valor a la derecha, y una línea por fila para que
   se pueda recorrer con el dedo sin perder el renglón. */
.resumen { margin: 0; }

.resumen__fila {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gris-200);
}
.resumen__fila:last-child { border-bottom: none; }

.resumen__etiqueta {
  margin: 0;
  align-self: center;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
}

.resumen__valor {
  margin: 0;
  font-weight: 600;
  color: var(--negro);
}

@media (max-width: 700px) {
  .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  .resumen__fila { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* ---------------------------------------------------------------------------
   Configuración de avisos por correo (21-sep-2026)

   Sigue el lenguaje del resto de la app (§25): líneas de un pixel en vez de
   sombras, rótulos en minúscula (§58), geometría cerrada. El naranja es marca,
   acción y foco; los estados tienen su propia gama.
   --------------------------------------------------------------------------- */

/* El estado del canal: una banda, no una tarjeta. Es información de cabecera,
   no algo con lo que se interactúe. */
.canal {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  border: var(--linea);
  background: var(--blanco);
  margin-bottom: 1.75rem;
}
.canal__marca { width: 4px; flex: 0 0 4px; }
.canal--vivo .canal__marca { background: var(--verde-700); }
.canal--roto .canal__marca { background: var(--rojo-700); }
.canal__cuerpo { flex: 1 1 auto; padding: 1rem 0; min-width: 0; }
.canal__titulo {
  margin: 0 0 .2rem;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.011em;
  color: var(--gris-900);
}
.canal__detalle { margin: 0; font-size: .875rem; color: var(--gris-700); }
.canal__cifras { display: flex; align-items: center; padding-right: 1.1rem; }
.canal__cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .85rem 1.15rem;
  border-left: var(--linea);
  text-decoration: none;
  color: inherit;
}
.canal__numero {
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gris-900);
}
.canal__rotulo {
  margin-top: .3rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
}
.canal__cifra--apagada .canal__numero { color: var(--gris-400); }
.canal__cifra--problema .canal__numero { color: var(--rojo-700); }
.canal__cifra--problema:hover { background: var(--rojo-100); }

/* El selector de tipo de empleado. Dos opciones grandes y pulsables: es lo que
   hace entendible la regla de que a un operativo se le escribe a producción. */
.selector-tipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.5rem;
}
.selector-tipo__opcion {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-height: 56px;
  padding: .8rem 1rem;
  text-align: left;
  background: var(--blanco);
  border: var(--linea);
  border-left: 3px solid var(--gris-300);
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: border-color .18s var(--salida), background .18s var(--salida);
}
.selector-tipo__opcion:hover { border-color: var(--gris-400); }
.selector-tipo__opcion--activa {
  border-left-color: var(--naranja);
  background: var(--naranja-050);
  border-color: var(--naranja-100);
}
.selector-tipo__opcion:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
.selector-tipo__titulo {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.011em;
  color: var(--gris-900);
}
.selector-tipo__nota { font-size: .8rem; color: var(--gris-500); }

/* Cada momento del proceso. Se atenúa —no se esconde— cuando no le aplica al
   tipo elegido: esconderlo haría pensar que el aviso no existe. */
.momento { margin-bottom: 1.5rem; }
.momento--no-aplica { opacity: .42; }
.momento__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--negro);
}
.momento__titulo {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gris-900);
}
.momento__nota { margin: .3rem 0 0; font-size: .8rem; color: var(--gris-500); }
.momento__insignia {
  flex: 0 0 auto;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris-500);
  background: var(--gris-100);
  padding: .2rem .45rem;
}

/* La matriz. */
.matriz { width: 100%; border-collapse: collapse; background: var(--blanco); }
.matriz th, .matriz td { padding: .7rem .5rem; text-align: left; }
.matriz thead th {
  border-bottom: var(--linea);
  vertical-align: bottom;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-700);
}
.matriz__papel { text-align: center; width: 78px; }
.matriz__aviso { width: auto; min-width: 240px; font-weight: 400; }
.matriz__interruptor { width: 92px; text-align: center; }
.matriz tbody tr { border-bottom: var(--linea); }
.matriz tbody tr:last-child { border-bottom: 0; }
.matriz__fila--apagada .matriz__nombre { color: var(--gris-400); }
.matriz__fila--apagada .punto { background: var(--gris-300); }
.matriz__nombre {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--gris-900);
}
.matriz__detalle {
  display: block;
  margin-top: .25rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--gris-500);
  font-weight: 400;
  max-width: 62ch;
}
.matriz__detalle--apagado { color: var(--ambar-600); }
.matriz__celda { text-align: center; vertical-align: middle; }

/* El punto no lleva texto, así que lo acompaña un rótulo para lectores de
   pantalla: el color solo no puede transmitir significado. */
.punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--naranja);
}

/* Interruptor dibujado a mano en vez de una casilla: tiene que leerse de un
   vistazo en una rejilla de catorce filas. */
.interruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--salida);
}
.interruptor--si { background: var(--verde-700); justify-content: flex-end; }
.interruptor--no { background: var(--gris-300); justify-content: flex-start; }
.interruptor__bola {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 2px rgba(5, 6, 6, .25);
}
.interruptor:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.interruptor__motivo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 190px;
  text-align: left;
}
.interruptor__acciones { display: flex; gap: .35rem; }
.boton--pequeno { min-height: 32px; padding: .25rem .6rem; font-size: .8rem; }

/* Los papeles, en rejilla continua separada por líneas de un pixel — el mismo
   gesto que las cifras del panel (§25), no cuatro cajas con sombra. */
.papeles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: var(--linea);
  background: var(--gris-200);
  gap: 1px;
  margin-top: 1rem;
}
.papel { background: var(--blanco); padding: .95rem 1.05rem; }
.papel--aviso { border-top: 3px solid var(--ambar-600); }
.papel__titulo {
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gris-900);
}
.papel__detalle {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gris-700);
  word-break: break-word;
}
.papel__alerta {
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ambar-600);
  font-weight: 600;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* La matriz desborda la página en pantallas estrechas si su envoltura no está
   acotada: `overflow-x` no sirve de nada en un contenedor que crece con su
   contenido. Con esto la tabla hace scroll DENTRO de su caja y la página no se
   mueve en horizontal, que es la regla (§25 y la guía de UX). El `min-width`
   evita que las seis columnas se aplasten hasta ser ilegibles. */
.momento .tabla-envoltura {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.momento .matriz { min-width: 560px; }

@media (max-width: 720px) {
  .canal { flex-wrap: wrap; }
  .canal__cifras { width: 100%; border-top: var(--linea); padding: 0; }
  .canal__cifra { flex: 1 1 0; border-left: 0; border-right: var(--linea); }
  .matriz__aviso { min-width: 160px; }
  .matriz__papel { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .selector-tipo__opcion, .interruptor { transition: none; }
}

/* ---------------------------------------------------------------------------
   Perfil del cargo (CIO, SGC-DH-F-002) — 22-sep-2026

   Las funciones son una lista larga —de 6 a 39 renglones segun el cargo— y es
   lo que la persona viene a leer. Numerada y con reglas de un pixel, no con
   vinetas: se lee como un documento, que es lo que es, y se puede senalar «la
   funcion 12» en una conversacion.
   --------------------------------------------------------------------------- */
.funciones {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: funcion;
}
.funciones__item {
  position: relative;
  padding: .75rem 0 .75rem 2.2rem;
  border-top: var(--linea);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--gris-900);
}
.funciones__item::before {
  counter-increment: funcion;
  content: counter(funcion);
  position: absolute;
  left: 0;
  top: .8rem;
  width: 1.6rem;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gris-400);
}
.funciones__item:first-child { border-top: 0; }

/* El bloque agrupador, cuando el formato lo trae. Solo 1 de los 23 CIO los
   usa, asi que casi nunca aparece. */
.funciones__bloque {
  margin: 1.1rem 0 0;
  padding: .55rem 0 .3rem;
  border-top: 2px solid var(--negro);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gris-900);
}
.funciones__bloque:first-child { margin-top: 0; border-top: 0; }

/* ------------------------------------------- Asignar un perfil a personas */

/* La lista de nombres a los que aplica un perfil. Sin punto de vineta: son
   nombres, no argumentos, y la vineta anade ruido a algo que ya se lee en
   columna. Cada uno con su regla de un pixel, como las tablas. */
.lista-nombres {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}
.lista-nombres li {
  padding: .5rem 0;
  border-top: 1px solid var(--gris-200);
  font-size: .92rem;
}
.lista-nombres li:first-child { border-top: 0; }

/* Las casillas para asignar el perfil van en dos o tres columnas: son ciento
   veinte personas, y en una sola columna la lista obliga a rodar la pantalla
   hasta perder de vista el boton de guardar. */
.casillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 1.4rem;
  margin: .6rem 0 1rem;
  max-height: 22rem;
  overflow-y: auto;
  padding-right: .4rem;
}
.casillas .confirmacion__casilla { margin-bottom: .2rem; align-items: flex-start; }
.casillas .confirmacion__casilla > span { display: block; line-height: 1.3; }
.casillas .campo__ayuda { display: block; margin-top: .1rem; }

/* Los procesos del mapa que cubre un CIO (§51). Un <details> por caja de
   color del mapa, en dos columnas: 41 casillas seguidas no se leen, y
   agrupadas como en el mapa se encuentra cada una donde se espera. El grupo
   con algo marcado lleva la cuenta en naranja, para ver sin abrirlo qué
   cubre el CIO. */
.procesos-mapa {
  border: 0;
  border-top: var(--linea);
  padding: 1.1rem 0 0;
  margin: 1.1rem 0 1.2rem;
  min-width: 0;
}
.procesos-mapa legend { padding: 0; margin: 0 0 .2rem; float: left; width: 100%; }
.procesos-mapa legend + * { clear: left; }
/* Columnas y no rejilla: con una rejilla, abrir un grupo estira toda su fila y
   deja huecos al lado; en columnas cada grupo empuja solo a los de debajo. */
.procesos-mapa__grupos {
  columns: 3 240px;
  column-gap: .5rem;
  margin-top: .7rem;
}
.procesos-mapa__grupo {
  break-inside: avoid;
  margin-bottom: .5rem;
  border: var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
}
.procesos-mapa__grupo[open] { border-color: var(--gris-300); }
.procesos-mapa__grupo summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
  padding: .35rem .75rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
}
.procesos-mapa__grupo summary:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
.procesos-mapa__cuenta {
  min-width: 1.5rem;
  padding: 0 .4rem;
  border-radius: var(--radio-chico);
  background: var(--naranja);
  color: var(--negro);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.procesos-mapa__grupo .confirmacion__casilla {
  margin: 0;
  padding: .35rem .75rem;
  border-top: 1px solid var(--gris-100);
  align-items: flex-start;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.3;
}
.procesos-mapa__grupo .confirmacion__casilla input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* La cifra de personas del catálogo de CIO, pulsable: despliega quiénes son
   (23-sep-2026). Parece una cifra y no un botón, porque en la tabla sigue siendo
   un dato; lo que la delata es el color y la flecha. La lista cae bajo el
   nombre del cargo, en la misma celda, con una regla naranja que la ata a su
   fila: filas ocultas aparte romperían la línea de la última fila. */
.cifra-personas {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 36px;
  margin: -.3rem -.5rem;
  padding: .3rem .5rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--naranja-700);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 120ms var(--salida), border-color 120ms var(--salida);
}
.cifra-personas:hover { background: var(--naranja-100); }
.cifra-personas:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.cifra-personas[aria-expanded="true"] { border-color: var(--naranja); background: var(--blanco); }
.cifra-personas__flecha {
  width: 14px;
  height: 14px;
  transition: transform 160ms var(--salida);
}
.cifra-personas[aria-expanded="true"] .cifra-personas__flecha { transform: rotate(180deg); }

.lista-personas {
  list-style: none;
  margin: .55rem 0 .15rem;
  padding: .1rem 0 .1rem .75rem;
  border-left: 2px solid var(--naranja);
}
.lista-personas li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .05rem .6rem;
  padding: .25rem 0;
}
.lista-personas__dato {
  color: var(--gris-500);
  font-size: .84rem;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .cifra-personas, .cifra-personas__flecha { transition: none; }
}

/* «Mi equipo»: la fila de la persona de la que habla el correo queda marcada
   al llegar desde él (`ir_al_proceso` manda a `#persona-N`). Con fondo Y barra,
   no solo color, como el activo del menú (§12). */
.tabla--equipo tbody tr:target td { background: var(--naranja-050); }
.tabla--equipo tbody tr:target td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }
.tabla--equipo tbody tr { scroll-margin-top: 5rem; }

/* ═══════════════════════════════════════════ Ajustes → Permisos (29-sep-2026)
   Un rol por fila, partida en dos: a la izquierda qué es y qué abre —con las
   pantallas tal como se llaman en el menú—, a la derecha quién lo tiene. Es lo
   que se mira junto: «¿quién puede corregir fichas?» se contesta en una fila. */
.permisos__buscar { display: flex; flex-direction: column; gap: .4rem; width: min(100%, 360px); min-width: 0; }
.permisos__fila select { width: 100%; }
.permisos__rotulo {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-700);
}
.permisos__fila { display: flex; gap: .5rem; align-items: stretch; }
.permisos__fila select { flex: 1; min-width: 0; }
.permisos__fila .boton { min-height: 42px; padding-top: .35rem; padding-bottom: .35rem; }

.roles { border: var(--linea); border-radius: var(--radio); background: var(--blanco); }
.rol {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem 2rem; padding: 1.35rem 1.5rem;
}
.rol + .rol { border-top: var(--linea); }
.rol__titulo { margin: 0 0 .3rem; font-size: 1.05rem; letter-spacing: -.012em; }
.rol__descripcion { margin: 0 0 .95rem; color: var(--gris-700); font-size: .9rem; line-height: 1.5; max-width: 60ch; }
.rol__abre {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem .9rem; margin: 0; align-items: baseline;
}
.rol__abre dt {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
}
.rol__abre dd { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.rol__pantalla {
  padding: .15rem .5rem; border: 1px solid var(--gris-300);
  border-radius: var(--radio-chico); background: var(--gris-050);
  font-size: .8rem; color: var(--gris-900); white-space: nowrap;
}
.rol__nada { margin: 0; color: var(--gris-500); font-size: .88rem; line-height: 1.5; }
.rol--sin-pantallas .rol__titulo { color: var(--gris-500); }
.rol__quien { border-left: var(--linea); padding-left: 2rem; }
.rol__personas { list-style: none; margin: .45rem 0 .9rem; padding: 0; }
.rol__personas li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .45rem 0; border-bottom: 1px dashed var(--gris-200);
}
.rol__personas a { font-weight: 600; color: var(--gris-900); text-decoration: none; }
.rol__personas a:hover { color: var(--naranja-700); text-decoration: underline; }
.rol__cargo { display: block; font-size: .78rem; color: var(--gris-500); }
.rol__personas form { margin: 0; }
.rol__quitar {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .82rem;
  color: var(--rojo-700); min-height: 36px; padding: .3rem .4rem; border-radius: var(--radio-chico);
}
.rol__quitar:hover { background: var(--rojo-100); }
.rol__quitar:focus-visible { outline: 2px solid var(--naranja-700); outline-offset: 2px; }
.rol__nadie { margin: .45rem 0 .9rem; color: var(--gris-500); font-size: .88rem; }

@media (max-width: 760px) {
  /* minmax(0, …) y no 1fr: un <select> mide lo que su opción más larga
     —«CARLOS OCTAVIO GIRALDO AGUIRRE · COORDINADOR DE PRODUCCIÓN»— y con
     1fr la columna no baja de eso y la página se ensancha en el teléfono. */
  .rol { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1rem; }
  .rol__quien { border-left: 0; padding-left: 0; border-top: 1px dashed var(--gris-300); padding-top: 1rem; }
}

/* La ficha de permisos de una persona: sus roles a la izquierda y, a la
   derecha, su menú tal como lo ve —negro, como la barra de verdad—.
   ⚠️ No se llama `.interruptor`: ese es el interruptor de encendido de los
   avisos (§49), de tamaño fijo, y con ese nombre las filas se montaban una
   encima de otra. Antes de inventar una clase, buscarla en este archivo. */
.permisos-persona {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px;
  gap: 2rem; align-items: start;
}
@media (max-width: 960px) { .permisos-persona { grid-template-columns: minmax(0, 1fr); } }
.roles-lista {
  list-style: none; margin: 0; padding: 0;
  border: var(--linea); border-radius: var(--radio); background: var(--blanco);
}
.rol-fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .95rem 1.15rem;
}
.rol-fila + .rol-fila { border-top: var(--linea); }
.rol-fila--activo { box-shadow: inset 3px 0 0 var(--naranja); }
.rol-fila__titulo { margin: 0; font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rol-fila__nota { margin: .2rem 0 0; font-size: .85rem; color: var(--gris-500); line-height: 1.45; }
.rol-fila form { margin: 0; flex: none; }
.rol-fila__enlace { flex: none; font-size: .85rem; font-weight: 600; }
.vista-menu {
  background: var(--negro); color: var(--blanco); border-radius: var(--radio);
  padding: 1.1rem .75rem; display: flex; flex-direction: column; gap: 1.2rem;
}
.vista-menu .lateral__enlace { cursor: default; }
.vista-menu .lateral__enlace:hover { background: none; color: rgba(255,255,255,.82); }
.vista-menu__nota { margin: .5rem 0 0; font-size: .78rem; color: var(--gris-500); line-height: 1.45; }
.vista-menu__hijas { margin: 0 0 0 2.4rem; font-size: .76rem; line-height: 1.5; color: var(--gris-400); }

/* --- Registrar una sesión en la cola del responsable (§56) -----------------
   Cuando entra Talento Humano a cubrir, el botón lleva al lado a quién la dio:
   el rótulo arriba, como el resto de rótulos de la app, y el
   desplegable y el botón alineados por abajo. */
.registrar-sesion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
}
.registrar-sesion__quien {
  display: grid;
  gap: .2rem;
  min-width: 0;
}
.registrar-sesion__quien > span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-700);
}
.registrar-sesion__quien select {
  min-height: 40px;
  font-size: .88rem;
  padding: .35rem .5rem;
  max-width: 16rem;
}

/* Las personas autorizadas de un tema, en su pantalla de edición. Es un
   <fieldset> para que el lector de pantalla agrupe las dos cosas; se le quita
   el marco del navegador y se separa del resto con una regla, como las
   secciones. */
.suplentes {
  border: 0;
  margin: 0;
  padding: 1rem 0 0;
  min-width: 0;
  border-top: 1px solid var(--gris-200);
}
.suplentes > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 .35rem;
}
.suplentes > legend + * { clear: left; }
.suplentes-actuales {
  display: grid;
  gap: .35rem;
  margin: 0 0 .5rem;
}