/*
 * Componentes del sistema «Impulso».
 *
 * Solo usa las variables de tokens.css (cargar siempre antes). Reglas que
 * cumple y que comprueban las pruebas de tests/ui:
 *   - Sin colores sueltos: todo sale de los tokens.
 *   - El lima (--color-lima) solo se usa de fondo y siempre con color tinta.
 *   - Objetivos táctiles de 44 px como mínimo (56 px en la firma móvil).
 *   - Foco visible en todo lo interactivo; nunca se elimina el contorno.
 *   - Sin anchos fijos grandes: el diseño aguanta zoom al 200 % sin
 *     desplazamiento horizontal de la página (las tablas se desplazan dentro
 *     de su caja).
 *
 * Índice: 1 base · 2 utilidades · 3 iconos · 4 botones · 5 tarjetas ·
 * 6 chips y semáforos · 7 progreso · 8 campos · 9 tablas · 10 diálogos ·
 * 11 avisos · 12 pestañas, migas y paginación · 13 estados · 14 cifras ·
 * 15 estructura (menú lateral) · 16 acceso y errores · 17 accesibilidad ·
 * 18 secciones plegables.
 */

/* ================================================================== */
/* 1. Base                                                             */
/* ================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--esp-5);
}

body {
  margin: 0;
  background: var(--color-lavanda);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  font-weight: 400;
  line-height: var(--interlineado);
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--esp-3);
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: var(--interlineado-titulo);
}

h1 {
  font-size: var(--titulo-1);
}

h2 {
  font-size: var(--titulo-2);
  font-weight: 600;
}

h3 {
  font-size: var(--titulo-3);
  font-weight: 600;
}

h4 {
  font-size: var(--titulo-4);
  font-weight: 600;
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--esp-4);
}

a {
  color: var(--color-violeta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-profundo);
}

img,
svg,
video {
  max-width: 100%;
}

hr {
  height: 1px;
  margin: var(--esp-5) 0;
  border: 0;
  background: var(--color-borde);
}

small {
  font-size: var(--texto-xs);
}

strong,
b {
  font-weight: 700;
}

/* Foco visible para todo lo interactivo. Nunca se elimina el contorno. */
:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: var(--foco-separacion);
}

[hidden] {
  display: none !important;
}

/* ================================================================== */
/* 2. Utilidades                                                       */
/* ================================================================== */

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

.saltar-contenido {
  position: absolute;
  top: -6rem;
  left: var(--esp-4);
  z-index: 100;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-pildora);
  background: var(--color-violeta);
  color: var(--color-blanco);
  font-weight: 700;
  text-decoration: none;
}

.saltar-contenido:focus {
  top: var(--esp-4);
  color: var(--color-blanco);
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--hueco, var(--esp-4));
}

.pila > * {
  margin-top: 0;
  margin-bottom: 0;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hueco, var(--esp-3));
}

.fila--separada {
  justify-content: space-between;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--hueco, var(--esp-4));
}

.rejilla--ancha {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Una tarjeta de la rejilla que ocupa todo el ancho (una tabla ancha no cabe en media caja). */
.rejilla__completa {
  grid-column: 1 / -1;
}

/* Tarjetas de alto propio: sin cajas vacías al lado de una más alta. */
.rejilla--ficha {
  align-items: start;
}

.texto-secundario {
  color: var(--color-secundario);
}

.texto-pequeno {
  font-size: var(--texto-s);
}

.numerico {
  font-family: var(--fuente-titulos);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.titulo-pagina {
  margin-bottom: var(--esp-2);
}

.encabezado-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
}

.encabezado-pagina > * {
  min-width: 0;
}

.lectura {
  max-width: var(--ancho-lectura);
}

/* ================================================================== */
/* 3. Iconos (SVG en línea, trazo heredado del color del texto)        */
/* ================================================================== */

.icono {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--grande {
  width: 2.5rem;
  height: 2.5rem;
}

/* ================================================================== */
/* 4. Botones (píldora)                                                */
/* ================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: var(--objetivo-min);
  min-height: var(--objetivo-min);
  padding: var(--esp-2) 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radio-pildora);
  background: transparent;
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton--principal {
  background: var(--color-accion);
  color: var(--color-blanco);
}

.boton--principal:hover {
  background: var(--color-accion-hover);
  color: var(--color-blanco);
}

.boton--secundario {
  border-color: var(--color-violeta);
  background: var(--color-blanco);
  color: var(--color-violeta);
}

.boton--secundario:hover {
  background: var(--color-suave);
  color: var(--color-profundo);
}

.boton--peligro {
  background: var(--color-peligro);
  color: var(--color-blanco);
}

.boton--peligro:hover {
  background: var(--color-peligro-hover);
  color: var(--color-blanco);
}

.boton--texto {
  background: transparent;
  color: var(--color-violeta);
}

.boton--texto:hover {
  background: var(--color-suave);
  color: var(--color-profundo);
}

/* Variante de la firma en el móvil: una mano, 56 px, ancho completo. */
.boton--firma {
  width: 100%;
  min-height: var(--objetivo-firma);
  font-size: var(--texto-l);
}

.boton--icono {
  padding: var(--esp-2);
}

.boton--bloque {
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  border-color: var(--color-borde);
  background: var(--color-suave);
  color: var(--color-secundario);
  cursor: not-allowed;
}

/* Sin pointer-events: none: el clic lo descarta ui.js (también Enter y Espacio) y el foco se queda en el botón. */
.boton[aria-busy="true"] {
  cursor: progress;
}

.boton[aria-busy="true"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: giro 0.8s linear infinite;
}

/* ================================================================== */
/* 5. Tarjetas                                                         */
/* ================================================================== */

.tarjeta {
  min-width: 0;
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-blanco);
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta--suave {
  border-color: transparent;
  background: var(--color-suave);
  box-shadow: none;
}

.tarjeta__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.tarjeta__titulo {
  margin: 0;
  font-size: var(--titulo-3);
}

.tarjeta > :last-child {
  margin-bottom: 0;
}

/* ================================================================== */
/* 6. Chips y semáforos (siempre icono + texto, nunca solo color)      */
/* ================================================================== */

.chip,
.semaforo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 100%;
  padding: 0.125rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chip);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.5;
}

.chip .icono,
.semaforo .icono {
  width: 1rem;
  height: 1rem;
}

/*
 * Una etiqueta corta («Vigente», «Validada») no se parte en dos líneas dentro de una tabla. Un
 * semáforo con fecha («Aceptada el 15/10/2026») sí puede partirse: si no, ensancharía la tabla
 * más que la tarjeta que la contiene.
 */
.tabla .chip {
  white-space: nowrap;
}

.tabla .semaforo {
  white-space: normal;
}

.chip--suave {
  background: var(--color-suave);
  color: var(--color-profundo);
}

.chip--neutro {
  border-color: var(--color-borde);
  background: var(--color-blanco);
  color: var(--color-secundario);
}

.chip--violeta {
  background: var(--color-violeta);
  color: var(--color-blanco);
}

/* El lima se reserva a logros y SOLO lleva texto tinta. */
.chip--logro {
  background: var(--color-lima);
  color: var(--color-tinta);
}

.semaforo--en-plazo {
  border-color: var(--semaforo-en-plazo-texto);
  background: var(--semaforo-en-plazo-fondo);
  color: var(--semaforo-en-plazo-texto);
}

.semaforo--justo {
  border-color: var(--semaforo-justo-texto);
  background: var(--semaforo-justo-fondo);
  color: var(--semaforo-justo-texto);
}

.semaforo--riesgo {
  border-color: var(--semaforo-riesgo-texto);
  background: var(--semaforo-riesgo-fondo);
  color: var(--semaforo-riesgo-texto);
}

.semaforo--info {
  border-color: var(--semaforo-info-texto);
  background: var(--semaforo-info-fondo);
  color: var(--semaforo-info-texto);
}

.semaforo--neutro {
  border-color: var(--semaforo-neutro-texto);
  background: var(--semaforo-neutro-fondo);
  color: var(--semaforo-neutro-texto);
}

/* ================================================================== */
/* 7. Barras de progreso (14 px)                                       */
/* ================================================================== */

.progreso {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.progreso__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
}

.progreso__etiqueta {
  font-weight: 600;
}

.progreso__cifra {
  color: var(--color-secundario);
  font-size: var(--texto-s);
  white-space: nowrap;
}

.progreso__barra {
  display: block;
  width: 100%;
  height: var(--barra-alto);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--color-suave);
  color: var(--color-violeta);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.progreso__barra::-webkit-progress-bar {
  background: var(--color-suave);
}

.progreso__barra::-webkit-progress-value {
  border-radius: var(--radio-pildora);
  background: var(--color-violeta);
}

.progreso__barra::-moz-progress-bar {
  border-radius: var(--radio-pildora);
  background: var(--color-violeta);
}

/* Variante dirigida por JS (data-valor / data-maximo): el ancho se fija por CSSOM. */
.barra {
  height: var(--barra-alto);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--color-suave);
  overflow: hidden;
}

.barra__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radio-pildora);
  background: var(--color-violeta);
}

/* ================================================================== */
/* 8. Campos de formulario                                             */
/* ================================================================== */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  justify-content: flex-end;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.campo__etiqueta {
  color: var(--color-tinta);
  font-weight: 600;
}

.campo__requisito {
  margin-left: var(--esp-2);
  color: var(--color-secundario);
  font-size: var(--texto-s);
  font-weight: 500;
}

.campo__ayuda {
  margin: 0;
  color: var(--color-secundario);
  font-size: var(--texto-s);
}

.campo__control {
  display: block;
  width: 100%;
  min-height: var(--objetivo-min);
  padding: 0.6rem 0.875rem;
  border: var(--borde-campo-grosor) solid var(--color-borde-campo);
  border-radius: var(--radio-campo);
  background: var(--color-blanco);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  line-height: 1.4;
}

/* Sobre una superficie suave el borde de campo (#8E86B5) queda a 2,82:1: sube a texto secundario. */
.tarjeta--suave .campo__control,
.tarjeta--suave .progreso__barra,
.tarjeta--suave .barra {
  border-color: var(--color-secundario);
}

.campo__control::placeholder {
  color: var(--color-secundario);
  opacity: 1;
}

.campo__control:focus-visible {
  border-color: var(--color-violeta);
}

textarea.campo__control {
  min-height: 7rem;
  resize: vertical;
}

.campo__control:disabled {
  background: var(--color-suave);
  color: var(--color-secundario);
  cursor: not-allowed;
}

.campo--error .campo__control {
  border-color: var(--semaforo-riesgo-texto);
}

.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  color: var(--semaforo-riesgo-texto);
  font-size: var(--texto-s);
  font-weight: 600;
}

.campo__error .icono {
  margin-top: 0.15rem;
}

.campo__marca {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-height: var(--objetivo-min);
  padding: var(--esp-2) 0;
  cursor: pointer;
}

.campo__marca input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--color-violeta);
}

/* Variante de la firma en el móvil: campos y casillas de 56 px, como boton--firma. */
.campo--firma .campo__control,
.campo--firma .campo__marca {
  min-height: var(--objetivo-firma);
}

.campo--firma .campo__control {
  font-size: var(--texto-l);
}

.campo--firma .campo__marca input {
  width: 2rem;
  height: 2rem;
}

/* Grupo de campos en línea que se apilan cuando no caben. */
.campos-linea {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--esp-4);
}

/* ================================================================== */
/* 9. Tablas (con contenedor de desplazamiento propio)                 */
/* ================================================================== */

.tabla-contenedor {
  position: relative; /* el texto oculto (absoluto) de una celda se desplaza con la tabla, no con la página */
  max-width: 100%;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-blanco);
  /*
   * Sombras de desplazamiento sin JavaScript: dos «tapas» blancas que se mueven con el contenido
   * (local) y dos sombras fijas (scroll). Solo se ve la sombra del borde por el que aún queda
   * tabla por ver; así se nota que hay más columnas sin tener que adivinarlo.
   */
  background-image:
    linear-gradient(to right, var(--color-blanco), var(--color-blanco)),
    linear-gradient(to left, var(--color-blanco), var(--color-blanco)),
    linear-gradient(to right, var(--desplazamiento-sombra), transparent),
    linear-gradient(to left, var(--desplazamiento-sombra), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 1rem 100%, 1rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-attachment: local, local, scroll, scroll;
  overflow-x: auto;
}

/*
 * border-collapse: separate: en una tabla de bordes colapsados, Chromium no pinta los bordes de
 * una celda con position: sticky al desplazarla.
 */
.tabla {
  width: 100%;
  min-width: 36rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--texto-s);
}

/*
 * Una tabla de tres columnas o menos cabe en media tarjeta (la DACI del expediente, por
 * ejemplo): sin ancho mínimo se ajusta a su caja y no obliga a desplazarla. Las de más columnas
 * conservan el mínimo y se desplazan dentro de su caja.
 */
.tabla:not(:has(thead tr > :nth-child(4))) {
  min-width: 0;
}

/* Con siete columnas o más se aprieta el relleno lateral: la tabla cabe en una ventana de escritorio. */
.tabla:has(thead tr > :nth-child(7)) :is(th, td) {
  padding-inline: calc(var(--esp-3) - 0.125rem);
}

.tabla th,
.tabla td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  background: var(--color-lavanda);
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  white-space: nowrap;
}

.tabla tbody tr:last-child > * {
  border-bottom: 0;
}

.tabla tbody th {
  font-weight: 600;
}

/*
 * Primera columna fija: al desplazar una tabla ancha dentro de su caja, la persona o la sesión
 * a la que pertenece cada fila sigue a la vista. El fondo es opaco (--fila-fondo permite a una
 * fila destacada pintar el suyo); el límite solo se dibuja cuando la tabla se está desplazando
 * (ui.js pone data-desplazada en la caja).
 */
.tabla tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--fila-fondo, var(--color-blanco));
}

.tabla thead tr > :first-child {
  background: var(--color-lavanda);
}

.tabla-contenedor[data-desplazada="true"] .tabla tr > :first-child {
  box-shadow: 0.375rem 0 0.5rem -0.375rem var(--desplazamiento-sombra);
}

/*
 * ui.js pone data-fija="false" cuando la primera columna y la más ancha de las demás no caben a la
 * vez en la caja (p. ej. «Nombre» y «Acciones» de Documentos en un móvil): entonces la primera se
 * desplaza con el resto y ninguna columna queda tapada.
 */
.tabla-contenedor[data-fija="false"] .tabla tr > :first-child {
  position: static;
  box-shadow: none;
}

/* Un enlace dentro de una celda es un objetivo táctil de 44 px, no una línea de texto. */
.tabla td a:not(.boton),
.tabla th a:not(.boton) {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-min);
}

/* Un código (S-000004, INC-2026-0001...) no se parte por el guion. */
.codigo {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Un enlace suelto (fuera de un párrafo) mide 44 px, como un botón. */
.enlace-bloque {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-min);
}

.tabla__numero {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ================================================================== */
/* 10. Diálogos (<dialog>)                                             */
/* ================================================================== */

.dialogo {
  width: min(calc(100% - 2rem), var(--ancho-acceso));
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: var(--color-blanco);
  box-shadow: var(--sombra-dialogo);
  color: var(--color-tinta);
  overflow: hidden;
}

.dialogo[open] {
  display: flex;
  flex-direction: column;
}

.dialogo::backdrop {
  background: var(--velo);
}

.dialogo__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-5) var(--esp-3);
}

.dialogo__titulo {
  margin: 0;
  font-size: var(--titulo-3);
}

.dialogo__cuerpo {
  padding: var(--esp-2) var(--esp-5) var(--esp-5);
  overflow-y: auto;
}

.dialogo__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* ================================================================== */
/* 11. Avisos y alertas                                                */
/* ================================================================== */

/*
 * La región de avisos va en el flujo, al principio del contenido: no es sticky ni fija. Una
 * región que flota (y que los errores mantienen llena) tapa el control enfocado al desplazarse
 * y en el móvil cubre la pantalla (WCAG 2.2 · 2.4.11 Foco no oculto). ui.js acerca a la vista
 * los avisos nuevos con scrollIntoView.
 */
.avisos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

/* Vacía sigue en el árbol de accesibilidad (región aria-live) pero no ocupa sitio ni deja hueco. */
.avisos:empty {
  position: absolute;
}

.aviso {
  --aviso-color: var(--semaforo-info-texto);
  --aviso-fondo: var(--semaforo-info-fondo);

  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--aviso-color);
  border-left-width: 6px;
  border-radius: var(--radio-campo);
  background: var(--aviso-fondo);
  color: var(--color-tinta);
}

.aviso > .icono {
  margin-top: 0.15rem;
  color: var(--aviso-color);
}

.aviso--info {
  --aviso-color: var(--semaforo-info-texto);
  --aviso-fondo: var(--semaforo-info-fondo);
}

.aviso--exito {
  --aviso-color: var(--semaforo-en-plazo-texto);
  --aviso-fondo: var(--semaforo-en-plazo-fondo);
}

.aviso--alerta {
  --aviso-color: var(--semaforo-justo-texto);
  --aviso-fondo: var(--semaforo-justo-fondo);
}

.aviso--error {
  --aviso-color: var(--semaforo-riesgo-texto);
  --aviso-fondo: var(--semaforo-riesgo-fondo);
}

.aviso__cuerpo {
  flex: 1;
  min-width: 0;
}

.aviso__titulo {
  margin: 0;
  color: var(--aviso-color);
  font-weight: 700;
}

.aviso__texto > :last-child {
  margin-bottom: 0;
}

.aviso__cerrar {
  margin: calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) 0;
}

/* ================================================================== */
/* 12. Pestañas, migas y paginación                                    */
/* ================================================================== */

.pestanas {
  border-bottom: 1px solid var(--color-borde);
  overflow-x: auto;
}

.pestanas__lista {
  display: flex;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pestanas__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-min);
  padding: var(--esp-2) var(--esp-4);
  border-bottom: 3px solid transparent;
  color: var(--color-secundario);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pestanas__enlace:hover {
  color: var(--color-profundo);
}

/*
 * .pestanas se desplaza en horizontal (overflow-x) y, con ello, recorta en vertical: un aro de
 * foco exterior desaparecería por arriba, por abajo y por la izquierda. El aro va por dentro
 * del enlace, separado del subrayado de «página actual».
 */
.pestanas__enlace:focus-visible {
  outline-offset: calc(var(--esp-2) * -1);
}

.pestanas__enlace[aria-current="page"] {
  border-bottom-color: var(--color-violeta);
  color: var(--color-profundo);
  font-weight: 700;
}

.migas {
  margin: 0;
  padding: 0;
  color: var(--color-secundario);
  font-size: var(--texto-s);
  list-style: none;
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.migas li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.migas [aria-current="page"] {
  color: var(--color-tinta);
  font-weight: 600;
}

/* Objetivo táctil de 44 px también en los enlaces de las migas y del pie. */
.migas a,
.app__pie a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-min);
  min-height: var(--objetivo-min);
}

.paginacion {
  margin: var(--esp-5) 0;
}

.paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paginacion__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-width: var(--objetivo-min);
  min-height: var(--objetivo-min);
  padding: 0 var(--esp-3);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  color: var(--color-violeta);
  font-weight: 600;
  text-decoration: none;
}

.paginacion__enlace:hover {
  background: var(--color-suave);
  color: var(--color-profundo);
}

.paginacion__enlace[aria-current="page"] {
  border-color: var(--color-violeta);
  background: var(--color-violeta);
  color: var(--color-blanco);
}

.paginacion__enlace[aria-disabled="true"] {
  background: var(--color-suave);
  color: var(--color-secundario);
  cursor: not-allowed;
}

.paginacion__elipsis {
  padding: 0 var(--esp-1);
  color: var(--color-secundario);
}

/* ================================================================== */
/* 13. Estados de carga, vacío y error                                 */
/* ================================================================== */

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-4);
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-blanco);
  text-align: center;
}

.estado__titulo {
  margin: 0;
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: 600;
}

.estado__texto {
  max-width: var(--ancho-lectura);
  margin: 0;
  color: var(--color-secundario);
}

.estado--vacio > .icono {
  color: var(--color-violeta);
}

.estado--error {
  border-color: var(--semaforo-riesgo-texto);
  background: var(--semaforo-riesgo-fondo);
}

.estado--error > .icono {
  color: var(--semaforo-riesgo-texto);
}

.estado--error .estado__titulo,
.estado--error .estado__texto {
  color: var(--color-tinta);
}

.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 4px solid var(--color-suave);
  border-top-color: var(--color-violeta);
  border-radius: 50%;
  animation: giro 0.9s linear infinite;
}

@keyframes giro {
  to {
    transform: rotate(360deg);
  }
}

/* ================================================================== */
/* 14. Cifras                                                          */
/* ================================================================== */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--esp-3);
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-campo);
  background: var(--color-suave);
}

.cifra__valor {
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-size: var(--cifra-grande);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  line-height: 1.1;
}

.cifra__unidad {
  margin-left: var(--esp-1);
  font-size: var(--texto-s);
  font-weight: 600;
}

.cifra__etiqueta {
  color: var(--color-secundario);
  font-size: var(--texto-s);
  font-weight: 600;
}

/* ================================================================== */
/* 15. Estructura: menú lateral y cuerpo                               */
/* ================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
  min-height: 100vh;
}

.app__lateral {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  height: 100vh;
  padding: var(--esp-4);
  border-right: 1px solid var(--color-borde);
  background: var(--color-blanco);
  overflow-y: auto;
}

.app__principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.app__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-blanco);
}

.app__contenido {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--esp-5);
  width: 100%;
  max-width: var(--ancho-contenido);
  padding: var(--esp-5);
}

.app__contenido > * {
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.app__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--color-borde);
  color: var(--color-secundario);
  font-size: var(--texto-s);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--objetivo-min);
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.marca img {
  width: 2.25rem;
  height: 2.25rem;
}

.menu__alternar {
  display: none;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__separador {
  height: 1px;
  margin: var(--esp-3) var(--esp-3);
  background: var(--color-borde);
}

.menu__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--objetivo-min);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pildora);
  color: var(--color-profundo);
  font-weight: 600;
  text-decoration: none;
}

.menu__enlace:hover {
  background: var(--color-suave);
  color: var(--color-profundo);
}

.menu__enlace[aria-current="page"] {
  background: var(--color-violeta);
  color: var(--color-blanco);
  font-weight: 700;
}

.menu__pie {
  margin-top: auto;
  padding: var(--esp-3) var(--esp-3) 0;
  border-top: 1px solid var(--color-borde);
  color: var(--color-secundario);
  font-size: var(--texto-s);
}

.menu__organizacion {
  margin: 0;
  color: var(--color-profundo);
  font-weight: 700;
}

.persona {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
}

.persona__nombre {
  min-width: 0;
  font-weight: 600;
}

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-suave);
  color: var(--color-profundo);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: 700;
}

/* En pantallas estrechas (o con zoom alto) el menú se apila sobre el contenido. */
@media (max-width: 52em) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app__lateral {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-borde);
    overflow-y: visible;
  }

  .app__principal {
    min-height: 0;
  }

  .app__contenido {
    padding: var(--esp-4);
  }

  .menu[data-plegable="true"] .menu__alternar {
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
  }

  .menu[data-plegable="true"]:not([data-abierto="true"]) .menu__lista {
    display: none;
  }

  .menu[data-plegable="true"][data-abierto="true"] .menu__lista {
    margin-top: var(--esp-3);
  }

  .dialogo__pie > .boton {
    flex: 1 1 100%;
  }
}

/* ================================================================== */
/* 16. Marco de acceso (sin menú) y páginas de error                   */
/* ================================================================== */

.acceso {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.acceso__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-blanco);
}

.acceso__organizacion {
  color: var(--color-secundario);
  font-size: var(--texto-s);
  font-weight: 600;
}

.acceso__contenido {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--esp-4);
  width: 100%;
  max-width: var(--ancho-acceso);
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4);
}

.acceso__contenido > * {
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.acceso__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-top: 1px solid var(--color-borde);
  color: var(--color-secundario);
  font-size: var(--texto-s);
  text-align: center;
}

.pagina-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}

.pagina-error__codigo {
  margin: 0;
  color: var(--color-secundario);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: 600;
}

/* ================================================================== */
/* 17. Accesibilidad                                                   */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contraste forzado: los límites de los componentes no pueden depender del fondo. */
@media (forced-colors: active) {
  .boton,
  .chip,
  .semaforo,
  .aviso,
  .tarjeta,
  .campo__control,
  .menu__enlace[aria-current="page"] {
    border: 2px solid CanvasText;
  }
}

/* ================================================================== */
/* 18. Secciones plegables                                             */
/* ================================================================== */

/* Una tarjeta cuyo encabezado es un botón: el botón ocupa toda la cabecera (objetivo de 44 px). */
.seccion {
  padding: 0;
}

.seccion__titulo {
  margin: 0;
}

.seccion__alternar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  width: 100%;
  min-height: var(--objetivo-min);
  padding: var(--esp-4) var(--esp-5);
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: transparent;
  color: var(--color-profundo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.seccion__alternar:hover {
  background: var(--color-suave);
}

.seccion__alternar .icono {
  transition: transform 0.15s ease-out;
}

.seccion__alternar[aria-expanded="true"] .icono {
  transform: rotate(90deg);
}

.seccion__cuerpo {
  padding: 0 var(--esp-5) var(--esp-5);
}

.seccion__cuerpo > :last-child {
  margin-bottom: 0;
}

/* Cerrada, la cabecera redondea las cuatro esquinas; abierta, solo las de arriba. */
.seccion__alternar[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Logotipo de 4d3 con su enlace (pies de la aplicación y de las pantallas de acceso). */
.plataforma {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
  gap: var(--esp-2);
}

.app__pie .plataforma {
  margin-inline-start: auto;
}

.logotipo-4d3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-min);
  min-height: var(--objetivo-min);
}

.logotipo-4d3 img {
  display: block;
  width: auto;
  height: 1.75rem;
}

/* ================================================================== */
/* 19. Contador de alertas de la cabecera                              */
/* ================================================================== */

/* Contador y persona, juntos a la derecha de la cabecera (se apilan si no caben). */
.app__utiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2) var(--esp-4);
  min-width: 0;
}

/*
 * Enlace a la bandeja con las alertas abiertas y asignadas a la persona. Lleva icono, cifra y texto
 * («3 alertas pendientes»): el estado no depende del color. Con alertas, la cifra va en una insignia
 * rellena; con 0, el enlace pierde el énfasis (sin borde ni insignia rellena) pero sigue diciendo
 * «Sin alertas pendientes». En pantallas estrechas el texto queda solo para lectores de pantalla.
 */
.contador-alertas {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: var(--objetivo-min);
  min-height: var(--objetivo-min);
  padding: 0 var(--esp-3);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  color: var(--color-profundo);
  font-size: var(--texto-s);
  font-weight: 700;
  text-decoration: none;
}

.contador-alertas:hover {
  background: var(--color-suave);
}

.contador-alertas .icono {
  width: 1.25rem;
  height: 1.25rem;
}

.contador-alertas__cifra {
  min-width: 1.5rem;
  padding: 0 var(--esp-2);
  border-radius: var(--radio-pildora);
  background: var(--color-profundo);
  color: var(--color-blanco);
  text-align: center;
}

.contador-alertas--vacio {
  border-color: var(--color-borde);
  color: var(--color-secundario);
  font-weight: 500;
}

.contador-alertas--vacio .contador-alertas__cifra {
  background: var(--color-suave);
  color: var(--color-profundo);
}

@media (max-width: 40em) {
  .contador-alertas__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}