/*
 * 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;
  -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. */
.disposicion {
  display: grid;
  grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
  min-height: 100vh;
}

.principal { min-width: 0; }

.lateral {
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  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__marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--blanco);
  text-decoration: none;
  padding: .4rem .6rem .75rem;
  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 {
  width: 116px;
  height: auto;
  filter: brightness(0) invert(1);
}
.lateral__marca span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--naranja);
}

.lateral__nav { flex: 1; display: flex; flex-direction: column; gap: 1.35rem; }
.lateral__grupo { display: flex; flex-direction: column; gap: .2rem; }

/* Rótulos pequeños, en versalitas y con mucho espaciado entre letras. Es lo
   que separa una jerarquía tipográfica de verdad de «todo a 16px». */
.lateral__titulo {
  margin: 0 0 .35rem;
  padding: 0 .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-500);
}

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

.lateral__enlace:hover,
.lateral__salir:hover {
  background: rgba(255,255,255,.10);
  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. */
.lateral__enlace--activo {
  background: rgba(255,255,255,.09);
  color: var(--blanco);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--naranja);
}

.lateral__enlace:focus-visible,
.lateral__salir: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 {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: .85rem;
}
.lateral__persona {
  margin: 0;
  padding: 0 .6rem;
  font-size: .9rem;
  font-weight: 600;
}
.lateral__rol {
  margin: 0 0 .35rem;
  padding: 0 .6rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
}
.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; }

.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); }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, var(--lateral-ancho));
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--sombra-alta);
  }
  .lateral--abierta { transform: translateX(0); }

  .lateral__velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(15, 42, 67, .45);
  }

  .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);
  }
}

/* Quien pide menos movimiento no debería ver el cajón deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
  .lateral__enlace, .lateral__salir { 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;
}
.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: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--gris-200);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.cifra {
  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, pequeño y en versalitas: la cifra es el dato y la etiqueta
   solo dice de qué. Al revés compiten. */
.cifra__etiqueta {
  margin-top: .45rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-500);
}
/* 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 {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris-500); font-weight: 700;
  border-bottom: 2px solid var(--negro);
  white-space: nowrap;
  padding-top: .6rem; padding-bottom: .6rem;
}
.tabla tbody td { border-bottom: var(--linea); }
/* 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: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-500);
}
.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); }

/* --------------------------------------------------------- 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);
}
.portada__eyebrow {
  margin: 0 0 .3rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja-700);
}
.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; }

/* 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: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-500);
}
.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; }
  .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: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-500);
}
.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;
}
.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: .62rem;
  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é».

   Lo que cambia visualmente:
   · cada grupo lleva una nota corta que dice para qué es
   · las colas de trabajo llevan el número de pendientes, y solo si hay
   · Ajustes se pliega */

.lateral__nota {
  margin: -.2rem 0 .45rem;
  padding: 0 .6rem;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--gris-500);
  opacity: .8;
}

/* La cabecera de un grupo plegable es un botón, no un párrafo: se pulsa. */
.lateral__plegable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 0 .6rem;
  margin-bottom: .35rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: var(--radio-chico);
}

.lateral__plegable .lateral__titulo { margin: 0; padding: 0; }

.lateral__plegable:hover { background: rgba(255, 255, 255, .06); }

.lateral__plegable:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.lateral__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gris-500);
  transition: transform .18s var(--salida);
}

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

/* El número de pendientes. Va al final del enlace y solo aparece cuando hay
   algo: un cero permanente enseña a ignorar los números. */
.lateral__contador {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--negro);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* En la opción activa el fondo ya es claro, así que el contador se invierte
   para no perder contraste. */
.lateral__enlace--activo .lateral__contador {
  background: var(--negro);
  color: #fff;
}