/*
 * Rúbrica — sistema visual (rediseño 2026-09, handoff en
 * docs/diseno/design_handoff_rubrica/). Fundamentos: tipografía, color,
 * retícula, iconografía y componentes base. Deliberadamente aparte de
 * base.css mientras dure la migración pantalla a pantalla — cada fase
 * del rediseño carga este fichero solo en las plantillas que ya migró,
 * sin afectar a las que siguen con el sistema anterior.
 *
 * Prefijo `ds-` (design system) en todas las clases nuevas para no
 * colisionar con las clases existentes de base.css durante la
 * convivencia de ambos sistemas.
 */

/* ---------------------------------------------------------------------
 * Tipografía — autoalojada, mismo criterio que htmx.min.js (ADR 0004):
 * nada se sirve desde una red de distribución externa. Solo el
 * subconjunto "latin" (U+0000-00FF): cubre el español (á é í ó ú ñ ü ¿ ¡)
 * sin arrastrar cirílico/griego/vietnamita.
 * ------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-400-latin.27ab01c4cb50.woff2") format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/source-sans-3-500-latin.b3b7577030b9.woff2") format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-600-latin.9a35cba76eda.woff2") format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400-latin.95bbd98f2b3c.woff2") format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-600-latin.beb0c8d8bee8.woff2") format('woff2');
}

/* ---------------------------------------------------------------------
 * Iconografía — RETIRADA MATERIAL SYMBOLS (zona 3 de la migración,
 * issue #186)
 *
 * Eran 297 KB de fuente autoalojada para TRECE nombres realmente usados,
 * y ese era el argumento entero: no que estuviera mal —estaba bien hecha,
 * subconjuntada y sin red externa—, sino que costaba trescientos kilobytes
 * mantener un segundo vocabulario de iconos al lado del que ya usa la
 * ficha. Los trazados de Lucide que la sustituyen pesan unos doscientos
 * bytes cada uno.
 *
 * Con ella se van `.ds-icon` y sus nueve clases de tamaño, que además
 * eran una escala de nueve escalones sin significado: el contrato tiene
 * tres, y cada uno dice QUÉ ES el icono (`--ds-icono-accion`, `-aviso`,
 * `-dato`).
 *
 * El fichero `static/fonts/material-symbols-outlined.woff2` se borra en
 * este mismo commit: dejarlo sería seguir sirviendo 297 KB que ya no pide
 * nadie.
 *
 * Ver `templates/expedientes/_lucide.html`, que lleva escrito de dónde
 * sale cada icono y cómo traer uno nuevo.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Tokens — color, tipografía, retícula
 * ------------------------------------------------------------------- */
:root {
  /* Marca */
  --ds-azul: #2651A8;
  --ds-azul-oscuro: #0F336D;
  --ds-dorado: #C9B979;

  /* Superficies */
  --ds-fondo-app: #F2F3F7;
  --ds-fondo-cabecera-tabla: #F7F8FB;
  --ds-superficie: #FFFFFF;
  --ds-borde: #E5E7EB;
  --ds-borde-fila: #EFF1F5;
  --ds-borde-control: #C3C9D6;

  /* Texto */
  --ds-texto: #1B2333;
  --ds-texto-secundario: #5A6478;
  --ds-texto-atenuado: #8A93A6;
  --ds-texto-inactivo: #A8B0BF;

  /* Selección de fila */
  --ds-seleccion-fondo: #F0F3F9;
  --ds-seleccion-marca: inset 2px 0 0 var(--ds-azul);

  /* Estado (semántico, apagado — nunca los de la web pública) */
  --ds-correcto: #2D6A4F;
  /* El fondo del correcto faltaba, y el error y el aviso sí lo tenían: no
   * era una decisión, era un hueco. Salió al migrar la zona de documentos
   * (issue #186), donde el acuse de una subida correcta lo necesitaba.
   * Mismo criterio que sus dos hermanos — el tono de la familia, lavado
   * hasta que aguante texto encima. */
  --ds-correcto-fondo: #F1F7F3;
  --ds-error: #A4243B;
  --ds-error-borde: #D8BCC2;
  --ds-error-fondo: #FBF6F7;
  --ds-aviso: #B4651A;
  --ds-aviso-borde: #E4CFAE;
  --ds-aviso-fondo: #FCF8F3;

  /* -------------------------------------------------------------------
   * COLORES DE FASE — traídos de `base.css` al migrar el tablero
   * (issue #186). MISMOS VALORES, otro sitio.
   *
   * El contrato tenía paleta semántica —correcto, error, aviso— y no
   * tenía escala por FASE, y son cosas distintas: la semántica dice si
   * algo va bien o mal; esta dice EN QUÉ PUNTO DEL CIRCUITO está, que es
   * lo que hace legible la barra del tablero de un vistazo. Colapsarlas
   * en la semántica habría borrado la información que esa barra existe
   * para dar.
   *
   * La progresión es azul→teal→verde según avanza el circuito, y termina
   * en el verde que ya era el de correcto. Están en prueba desde
   * 2026-08-24, a petición expresa y con aviso de posible marcha atrás:
   * revertir a los cuatro grupos anteriores es cambiar solo
   * `Fase.grupo_color` en `enums.py`, y estos tokens pueden quedarse sin
   * usar sin prisa por borrarlos.
   *
   * Los tenues son fondo de ETIQUETA. Los de FILA van aparte y mucho más
   * lavados: una etiqueta ocupa cien píxeles y aguanta saturación; una
   * fila cruza la pantalla entera y con el mismo tono grita.
   * ------------------------------------------------------------------- */
  --ds-fase-pendiente-gestion: #64748b;
  --ds-fase-pendiente-gestion-tenue: #eef1f4;
  --ds-fase-pendiente-confirmacion: #6366f1;
  --ds-fase-pendiente-confirmacion-tenue: #ecebfd;
  --ds-fase-pendiente-inscripcion: #0e7490;
  --ds-fase-pendiente-inscripcion-tenue: #e3eef1;
  --ds-fase-pendiente-copia: #0d9488;
  --ds-fase-pendiente-copia-tenue: #e1f2ef;
  --ds-fase-pendiente-entrega-gestoria: #15803d;
  --ds-fase-pendiente-entrega-gestoria-tenue: #e3f0e7;

  /* Incidencia tiene color propio y no reutiliza el aviso: `--ds-aviso` es
   * un dorado apagado que no se lee como naranja, y una incidencia abierta
   * es lo que más pide atención de la tabla. Pareja comprobada a contraste
   * AA (4.56:1) para texto de 0.8rem en negrita. */
  --ds-fase-incidencia: #c2410c;
  --ds-fase-incidencia-tenue: #fdeee2;

  --ds-fila-anulado: #fdf4f2;
  --ds-fila-incidencia: #fef7f1;

  /* Sobre azul oscuro (barra superior, login) */
  --ds-sobre-oscuro-texto: #FFFFFF;
  --ds-sobre-oscuro-secundario: #A9BADA;
  --ds-sobre-oscuro-terciario: #91A6CC;
  --ds-sobre-oscuro-terciario-2: #7E93BC;
  --ds-sobre-oscuro-superficie: rgba(255, 255, 255, .10);
  --ds-sobre-oscuro-borde: rgba(255, 255, 255, .16);

  /* Tipografía */
  --ds-fuente-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --ds-fuente-serif: 'Source Serif 4', Georgia, serif;

  /* Escala tipográfica — el público lee un Excel desde hace años y le
   * cuesta la letra pequeña: la legibilidad manda sobre la densidad
   * literal del mockup de referencia. Base 13px→15px, rótulos 11px→13px,
   * el resto de la escala sube en proporción manteniendo la jerarquía
   * relativa. Toda fase futura del rediseño debe heredar estas variables
   * en vez de escribir font-size a mano. */
  --ds-texto-micro: 12px;          /* antes 10px — ej. rol de usuario en la barra superior */
  --ds-texto-rotulo: 13px;         /* antes 11px — rótulos, cabeceras de tabla, epígrafes */
  --ds-tamano-secundario: 14px;    /* antes 12px — texto secundario, ayuda, metadatos.
     Nombre distinto de --ds-texto-secundario (línea ~116, color #5A6478,
     fase 1): declarar el tamaño con el mismo nombre que el color en el
     mismo :root los pisaba entre sí — la propiedad CSS custom queda con
     el último valor, así que todo `color: var(--ds-texto-secundario)`
     recibía "14px" (no es un color válido) y caía al color heredado en
     vez del gris secundario previsto. Bug real, ya en `main` desde la
     fase de escala tipográfica — no solo de esta rama. */
  --ds-texto-base: 15px;           /* antes 13px — texto base de la aplicación */
  --ds-texto-destacado: 17px;      /* antes 15px — títulos de sección, estados vacíos */
  --ds-texto-grande: 21px;         /* antes 19px — logotipo de barra, cifras de carga, frase de login */
  --ds-texto-cifra: 23px;          /* antes 21px — cifra de recuento del tablero */
  --ds-texto-titulo: 24px;         /* antes 22px — título de pantalla, título de login */
  --ds-texto-error-subtitulo: 20px; /* antes 18px — título de la tarjeta de error 500 */
  --ds-texto-hero: 40px;           /* antes 38px — logotipo grande del panel de login */
  --ds-texto-codigo-error: 42px;   /* antes 40px — código de la página de error 500 */

  /* Retícula de 4px */
  --ds-e1: 4px;
  --ds-e2: 8px;
  --ds-e3: 12px;
  --ds-e4: 16px;
  --ds-e5: 24px;
  --ds-e6: 32px;

  --ds-fila-alto: 34px;        /* modo compacto, por defecto */
  --ds-fila-alto-comoda: 40px; /* modo cómodo, ajuste de preferencia */
  --ds-radio: 2px;             /* radio de esquina único; círculo solo en avatar */
  --ds-foco: 0 0 0 2px rgba(38, 81, 168, .16);

  /* -------------------------------------------------------------------
   * RECONCILIACIÓN CON EL BOCETO (issue #186, decidida el 2026-09-09).
   *
   * Los valores del boceto están medidos del DOM en
   * `docs/diseno/extraccion-bolt/`. Lo que sigue es lo que se adoptó de
   * él y lo que no, con el porqué — porque la mitad de las decisiones son
   * al revés de lo que propuse, y conviene que se sepa por qué cambié.
   *
   * LO PRIMERO: el boceto YA usaba esta paleta. Sus ocho colores de marca
   * son exactamente `--ds-azul`, `--ds-azul-oscuro`, `--ds-dorado`,
   * `--ds-error`, `--ds-aviso`, `--ds-correcto`, `--ds-borde` y
   * `--ds-fondo-app`, con otro nombre. No había nada que reconciliar ahí.
   *
   * GANA LO NUESTRO, y en cuatro casos por la misma razón: lo que el
   * boceto traía era el valor POR DEFECTO de su herramienta, no una
   * decisión.
   *   - GRISES. Los suyos son los de Tailwind, neutros. Los nuestros
   *     tiran a azul (#5A6478, #8A93A6) y vienen de la web de la
   *     notaría: son marca, no relleno.
   *   - TIPOGRAFÍA. Inter, sin una sola `@font-face` propia, y sin serif
   *     en ninguna parte. La serif es marca igual que los grises.
   *   - ESCALA. El boceto pinta el texto corriente a 12px; aquí son 15,
   *     y ya se subieron una vez a propósito (ver el comentario de la
   *     escala, arriba). Quien usa esto lleva años con una hoja de
   *     cálculo y no todo el mundo ve de cerca.
   *   - RETÍCULA Y RADIO. Y ESTO ES AL REVÉS DE LO QUE PROPUSE. Pedí
   *     importar su retícula fina (2/4/6/8/10/12) y sus radios de 8px,
   *     porque medidos sueltos parecen mejores. No lo son:
   *     DENSIDAD Y TAMAÑO DE LETRA SON UNA SOLA DECISIÓN, NO DOS. Sus
   *     10px de relleno funcionan bajo texto de 12px; bajo texto de 15
   *     aprietan. Y su radio de 8px es el `rounded-lg` por defecto de
   *     Tailwind, que da aire de aplicación web moderna — justo lo que
   *     el radio de 2px, la serif y el dorado están evitando a
   *     propósito. Se quedan `--ds-e1..e6` (retícula de 4) y
   *     `--ds-radio: 2px`.
   *
   * GANA EL BOCETO en lo único que aquí faltaba entero: LOS ESTADOS DE
   * INTERACCIÓN. No tenía este sistema ni una regla de hover, y el suyo
   * es pequeño y coherente — 13 clases y 28 reglas. Lo que se adopta son
   * sus REGLAS, con nuestros valores.
   *
   * EN LO QUE COINCIDEN LOS DOS: ni una sombra. La separación la hace el
   * borde de 1px. Se deja dicho para que no vuelva a aparecer una.
   * ------------------------------------------------------------------- */

  /* La transición de todo lo pulsable. Solo color: mover cosas al pasar
   * por encima hace que una tabla de treinta filas parezca inestable. */
  --ds-transicion: 150ms;

  /* El fondo de una fila al pasar por encima. Del boceto —la idea de
   * señalar la fila entera y no el control— con nuestro azul al 3 % en
   * vez de su gris: sobre el fondo azulado de la aplicación, un gris
   * neutro se lee como suciedad. */
  --ds-fila-hover: rgba(38, 81, 168, .03);

  /* Tamaños de icono, Y CADA UNO SIGNIFICA UNA COSA. Es la mejor idea de
   * ordenación del boceto (16/14/12), subida un escalón porque nuestro
   * texto es tres escalones más grande que el suyo: un icono de 12 junto
   * a texto de 15 se lee como un defecto de carga.
   *   ACCIÓN  — lo que se pulsa
   *   AVISO   — lo que informa de un estado
   *   DATO    — lo que acompaña a un valor (entidad, finca, gestoría) */
  --ds-icono-accion: 18px;
  --ds-icono-aviso: 16px;
  --ds-icono-dato: 14px;
}

/* ---------------------------------------------------------------------
 * Escala tipográfica
 * ------------------------------------------------------------------- */
.ds-tipo-titulo-pantalla {
  font-family: var(--ds-fuente-serif);
  font-size: var(--ds-texto-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-texto);
}
.ds-tipo-logotipo {
  font-family: var(--ds-fuente-serif);
  font-size: var(--ds-texto-grande);
  font-weight: 600;
}
.ds-tipo-titulo-seccion {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-destacado);
  font-weight: 600;
  color: var(--ds-texto);
}
.ds-tipo-cabecera {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-tamano-secundario);
  font-weight: 600;
  color: var(--ds-texto);
}
.ds-tipo-base {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  font-weight: 400;
  color: var(--ds-texto);
}
.ds-tipo-secundario {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-tamano-secundario);
  font-weight: 400;
  color: var(--ds-texto-secundario);
}
.ds-tipo-rotulo {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-texto-secundario);
}
.ds-tipo-micro {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-rotulo);
  font-weight: 400;
  color: var(--ds-texto-atenuado);
}
.ds-tipo-cifra-recuento {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-cifra);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds-tipo-cifra-carga {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-grande);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds-tabular {
  font-variant-numeric: tabular-nums;
}
.ds-prosa {
  text-wrap: pretty;
  max-width: 62ch;
}

.ds {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  color: var(--ds-texto);
}
.ds a { color: var(--ds-azul); }
.ds a:hover { color: var(--ds-azul-oscuro); }

/* ---------------------------------------------------------------------
 * Botones — cinco variantes, 34px de alto (36px en formularios
 * destacados/login, 40px en el botón de entrar del login). Un solo
 * botón relleno (primario) por pantalla.
 * ------------------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  border-radius: var(--ds-radio);
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.ds-btn--con-icono { padding-left: 12px; }
.ds-btn--texto { padding: 0 10px; }
.ds-btn--destacado { height: 36px; }
.ds-btn--grande { height: 40px; }

.ds-btn--primario {
  background: var(--ds-azul);
  border-color: var(--ds-azul);
  color: #FFFFFF;
  font-weight: 600;
}
.ds-btn--primario:hover {
  background: var(--ds-azul-oscuro);
  border-color: var(--ds-azul-oscuro);
}

.ds-btn--secundario {
  background: #FFFFFF;
  border-color: var(--ds-borde-control);
  color: var(--ds-texto);
  font-weight: 500;
}
.ds-btn--secundario:hover {
  border-color: var(--ds-azul);
  color: var(--ds-azul);
}

.ds-btn--terciario {
  background: none;
  border-color: transparent;
  color: var(--ds-azul);
  font-weight: 500;
  padding: 0 10px;
}
.ds-btn--terciario:hover {
  background: #EDF0F6;
}

.ds-btn--destructivo {
  background: #FFFFFF;
  border-color: var(--ds-error-borde);
  color: var(--ds-error);
  font-weight: 500;
}
.ds-btn--destructivo:hover {
  background: var(--ds-error-fondo);
}

.ds-btn--deshabilitado,
.ds-btn:disabled {
  background: var(--ds-fondo-app);
  border-color: var(--ds-borde);
  color: var(--ds-texto-inactivo);
  font-weight: 600;
  cursor: not-allowed;
}

.ds-btn:focus-visible {
  outline: none;
  border-color: var(--ds-azul);
  box-shadow: var(--ds-foco);
}

/* ---------------------------------------------------------------------
 * Campo de formulario
 * ------------------------------------------------------------------- */
.ds-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-campo__epigrafe {
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-texto-secundario);
}
.ds-campo__epigrafe .ds-campo__opcional {
  text-transform: none;
  color: var(--ds-texto-atenuado);
  font-weight: 400;
  letter-spacing: normal;
}
.ds-campo input[type='text'],
.ds-campo input[type='number'],
.ds-campo input[type='password'],
.ds-campo select,
.ds-campo textarea {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--ds-borde-control);
  border-radius: var(--ds-radio);
  background: #FFFFFF;
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  color: var(--ds-texto);
}
.ds-campo select { padding: 0 6px; }
.ds-campo textarea {
  height: auto;
  padding: 7px 9px;
  resize: vertical;
}
.ds-campo input:focus,
.ds-campo select:focus,
.ds-campo textarea:focus {
  outline: none;
  border-color: var(--ds-azul);
  box-shadow: var(--ds-foco);
}
.ds-campo__ayuda {
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-texto-secundario);
}
.ds-campo--destacado input,
.ds-campo--destacado select {
  height: 36px;
}

.ds-campo--error input,
.ds-campo--error select,
.ds-campo--error textarea {
  border-color: #C69AA3;
}
.ds-campo--error input:focus,
.ds-campo--error select:focus,
.ds-campo--error textarea:focus {
  border-color: var(--ds-error);
  box-shadow: 0 0 0 2px rgba(164, 36, 59, .14);
}
.ds-campo__error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-error);
  margin-top: 5px;
}

/* ---------------------------------------------------------------------
 * Aviso
 * ------------------------------------------------------------------- */
.ds-aviso {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--ds-borde);
  border-top-width: 2px;
  border-radius: var(--ds-radio);
}
.ds-aviso__icono { flex: none; }
.ds-aviso__titulo {
  font-size: var(--ds-texto-base);
  font-weight: 600;
  margin: 0 0 2px;
}
.ds-aviso__cuerpo {
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-texto-secundario);
  margin: 0;
}
.ds-aviso--error {
  border-top-color: var(--ds-error);
  background: var(--ds-error-fondo);
}
.ds-aviso--error .ds-aviso__titulo { color: #7E1B2D; }
.ds-aviso--error .ds-aviso__icono { color: var(--ds-error); }
.ds-aviso--aviso {
  border-top-color: var(--ds-aviso);
  background: var(--ds-aviso-fondo);
}
.ds-aviso--aviso .ds-aviso__titulo { color: #8A4E13; }
.ds-aviso--aviso .ds-aviso__icono { color: var(--ds-aviso); }

/* ---------------------------------------------------------------------
 * Tarjeta
 * ------------------------------------------------------------------- */
.ds-tarjeta {
  background: #FFFFFF;
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio);
}
.ds-tarjeta__cabecera {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ds-fondo-cabecera-tabla);
  border-bottom: 1px solid var(--ds-borde);
}
.ds-tarjeta__cabecera-titulo {
  font-size: var(--ds-tamano-secundario);
  font-weight: 600;
}
.ds-tarjeta__cuerpo {
  padding: 12px;
}
.ds-tarjeta__lista { list-style: none; margin: 0; padding: 0; }
.ds-tarjeta__lista li {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--ds-borde-fila);
}
.ds-tarjeta__lista li:last-child { border-bottom: none; }
.ds-tarjeta__pie {
  padding: 8px 12px;
  border-top: 1px solid var(--ds-borde-fila);
}
.ds-tarjeta__pie a {
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-azul);
}

/* ---------------------------------------------------------------------
 * Tabla — table-layout: fixed, ancho declarado en cada th.
 * ------------------------------------------------------------------- */
.ds-tabla {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #FFFFFF;
}
.ds-tabla th {
  height: 32px;
  padding: 0 10px;
  text-align: left;
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-texto-secundario);
  border-bottom: 1px solid var(--ds-borde);
  white-space: nowrap;
}
.ds-tabla th.ds-tabla__col--derecha { text-align: right; }
.ds-tabla td {
  height: var(--ds-fila-alto);
  padding: 0 10px;
  font-size: var(--ds-texto-base);
  color: var(--ds-texto);
  border-bottom: 1px solid var(--ds-borde-fila);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-tabla td.ds-tabla__col--derecha {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ds-tabla tbody tr:hover td { background: var(--ds-fondo-cabecera-tabla); }
.ds-tabla tbody tr.ds-tabla__fila--seleccionada td {
  background: var(--ds-seleccion-fondo);
  box-shadow: var(--ds-seleccion-marca);
}
.ds-tabla tbody tr.ds-tabla__fila--seleccionada td.ds-tabla__col--titular { font-weight: 600; }
.ds-tabla tbody tr.ds-tabla__fila--atenuada td { color: var(--ds-texto-atenuado); }
.ds-tabla__ausente { color: var(--ds-texto-inactivo); }
.ds-tabla__dias--alerta { color: var(--ds-error); font-weight: 600; }
.ds-tabla__enlace {
  color: var(--ds-azul);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ds-tabla__acciones {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}
.ds-tabla__accion { color: var(--ds-texto-atenuado); }
.ds-tabla__accion--inactiva { color: #D3D8E2; }

.ds-tabla-pie {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-texto-secundario);
}
.ds-paginacion { display: flex; align-items: center; gap: 4px; }
.ds-paginacion__pagina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--ds-borde-control);
  border-radius: var(--ds-radio);
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-texto);
}
.ds-paginacion__pagina--actual {
  background: var(--ds-azul);
  border-color: var(--ds-azul);
  color: #FFFFFF;
}
.ds-paginacion__elipsis { color: var(--ds-texto-inactivo); padding: 0 2px; }

/* ---------------------------------------------------------------------
 * Los nueve estados del expediente — la pieza central.
 *
 * Siete fases en secuencia: cifra de orden (1-7) + rampa de azul
 * creciente. La cifra hace el trabajo de la progresión; el color la
 * refuerza sin que se dependa de él (funciona en monocromo y con
 * daltonismo). La séptima (Finalizada) cierra en verde por ser el fin
 * del circuito, pero conserva el número para no romper la serie.
 *
 * Dos salidas (Anulado, Incidencia): otra FORMA, no otro tono — sin
 * cifra, sin relleno, contorno + icono + versalitas. Se leen como algo
 * caído del circuito antes de leer la palabra.
 * ------------------------------------------------------------------- */
.ds-fase {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border-radius: var(--ds-radio);
  padding: 0 8px 0 0;
  gap: 6px;
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-tamano-secundario);
  white-space: nowrap;
}
.ds-fase--grande { height: 24px; } /* cabecera de ficha, forma larga */
.ds-fase__cifra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
  border-radius: 2px 0 0 2px;
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.ds-fase--grande .ds-fase__cifra { height: 24px; }

.ds-fase--1 { background: #EDF0F6; color: #46536B; font-weight: 500; }
.ds-fase--1 .ds-fase__cifra { background: #D9DFEA; }
.ds-fase--2 { background: #E3E9F5; color: #35476E; font-weight: 500; }
.ds-fase--2 .ds-fase__cifra { background: #CBD7EC; }
.ds-fase--3 { background: #D8E2F3; color: #2B3E68; font-weight: 500; }
.ds-fase--3 .ds-fase__cifra { background: #BACDEA; }
.ds-fase--4 { background: #C9D8F0; color: #24365F; font-weight: 500; }
.ds-fase--4 .ds-fase__cifra { background: #A9C0E4; }
.ds-fase--5 { background: #B7CBEB; color: #1D2E56; font-weight: 500; }
.ds-fase--5 .ds-fase__cifra { background: #96B2DE; }
.ds-fase--6 { background: #A3BCE4; color: #16264B; font-weight: 500; }
.ds-fase--6 .ds-fase__cifra { background: #7FA2D6; }
.ds-fase--7 { background: #DBE9E1; color: #1F5540; font-weight: 600; }
.ds-fase--7 .ds-fase__cifra { background: #BCD7C8; }

/* Preferencia «cifra de fase»: oculta, deja solo la rampa de color
 * (ver Ajustes previstos del handoff) — no persistida todavía, ver
 * anotaciones de la PR. */
.ds-fase--sin-cifra .ds-fase__cifra { display: none; }

.ds-salida {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  gap: 5px;
  border-radius: var(--ds-radio);
  border: 1px solid;
  background: #FFFFFF;
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ds-salida--anulado { border-color: #D8BCC2; color: var(--ds-error); }
.ds-salida--incidencia { border-color: #E4CFAE; color: var(--ds-aviso); }

/* Recuentos del tablero: filete superior de 3px con el color del
 * cuadro de cifra de su fase. */
.ds-recuento { border-top: 3px solid; }
.ds-recuento--1 { border-top-color: #D9DFEA; }
.ds-recuento--2 { border-top-color: #CBD7EC; }
.ds-recuento--3 { border-top-color: #BACDEA; }
.ds-recuento--4 { border-top-color: #A9C0E4; }
.ds-recuento--5 { border-top-color: #96B2DE; }
.ds-recuento--6 { border-top-color: #7FA2D6; }
.ds-recuento--7 { border-top-color: #BCD7C8; }
.ds-recuento--anulado { border-top-color: var(--ds-error); }
.ds-recuento--incidencia { border-top-color: var(--ds-aviso); }

/* Tira de progreso de la ficha (solo lectura). */
.ds-progreso { display: flex; align-items: center; }
.ds-progreso__paso {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radio);
  flex: none;
}
.ds-progreso__paso--actual { background: var(--ds-azul); box-shadow: 0 2px 0 0 var(--ds-azul); }
.ds-progreso__paso--cumplida { background: #D9DFEA; }
.ds-progreso__paso--futura { background: var(--ds-fondo-app); border: 1px solid var(--ds-borde); }
.ds-progreso__conector { flex: 1; height: 1px; background: #E5E7EB; }
.ds-progreso__conector--cumplido { background: #C3CFE4; }

/* Estado de PREPARACIÓN del previo (pantalla «Ver previos») — sistema
 * distinto y deliberadamente separado del de fase: nunca reutiliza
 * `.ds-fase`. Icono + texto, sin fondo ni contorno. */
.ds-preparacion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ds-tamano-secundario);
}
.ds-preparacion--pendiente { color: var(--ds-texto-secundario); font-weight: 400; }
.ds-preparacion--completado { color: var(--ds-correcto); font-weight: 600; }
.ds-preparacion--bloqueado { color: var(--ds-aviso); font-weight: 600; }
.ds-preparacion__detalle { color: var(--ds-texto-atenuado); font-weight: 400; }

/* ---------------------------------------------------------------------
 * Barra superior — rediseño 2026-09, fase 2/5. Sustituye la cabecera
 * anterior (`.cabecera`, base.css) en TODAS las pantallas autenticadas:
 * es la única pieza de esta fase que toca algo compartido por pantallas
 * que aún no han migrado su contenido — a propósito, es lo que pide
 * "navegación y estructura" como fase propia.
 * ------------------------------------------------------------------- */
.ds-topbar {
  height: 48px;
  background: var(--ds-azul-oscuro);
  border-bottom: 2px solid var(--ds-dorado);
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  gap: 4px;
}
.ds-topbar__marca {
  display: flex;
  align-items: center;
  font-family: var(--ds-fuente-serif);
  font-size: var(--ds-texto-grande);
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  padding-right: 16px;
}
.ds-topbar__nav { display: flex; align-items: stretch; }
.ds-topbar__item {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 13px;
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  color: #C3D0E6;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  box-shadow: inset 0 -3px 0 transparent;
}
.ds-topbar__item:hover { background: rgba(255, 255, 255, .07); }
.ds-topbar__item--activo {
  color: #FFFFFF;
  font-weight: 600;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -3px 0 var(--ds-dorado);
}
.ds-topbar__desplegable { position: relative; }
.ds-topbar__desplegable > summary { list-style: none; }
.ds-topbar__desplegable > summary::-webkit-details-marker { display: none; }
.ds-topbar__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 212px;
  background: #FFFFFF;
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio);
  box-shadow: 0 4px 14px rgba(15, 51, 109, .12);
  padding: 4px 0;
  z-index: 20;
}
.ds-topbar__panel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  font-family: var(--ds-fuente-sans);
  font-size: var(--ds-texto-base);
  color: var(--ds-texto);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.ds-topbar__panel-item:hover { background: var(--ds-fondo-cabecera-tabla); }
.ds-topbar__panel-item--activo {
  background: var(--ds-seleccion-fondo);
  color: var(--ds-azul-oscuro);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ds-dorado);
}

.ds-topbar__derecha { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ds-topbar__departamento {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: var(--ds-tamano-secundario);
  color: #DCE4F2;
}
.ds-topbar__divisor { width: 1px; height: 24px; background: rgba(255, 255, 255, .16); }
.ds-topbar__usuario-menu { position: relative; display: flex; align-items: center; }
.ds-topbar__usuario-menu > summary { list-style: none; }
.ds-topbar__usuario-menu > summary::-webkit-details-marker { display: none; }
.ds-topbar__usuario-boton {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  cursor: pointer;
}
.ds-topbar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-azul);
  color: #FFFFFF;
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ds-topbar__usuario-datos { display: flex; flex-direction: column; line-height: 1.3; }
.ds-topbar__usuario-nombre { font-size: var(--ds-tamano-secundario); color: #FFFFFF; }
.ds-topbar__usuario-rol { font-size: var(--ds-texto-micro); color: var(--ds-sobre-oscuro-terciario); }
.ds-topbar__usuario-menu .ds-topbar__panel { right: 0; left: auto; }

/* ---------------------------------------------------------------------
 * Login — simplificado 2026-09-01: tarjeta única centrada sobre el
 * fondo gris de la app, sin panel lateral. Es la única pantalla visible
 * sin haber entrado — cuanta menos información dé, mejor: sin nombre de
 * departamento, sin frase sobre a qué se dedica el sistema.
 * ------------------------------------------------------------------- */
.ds-login {
  min-height: 100vh;
  background: var(--ds-fondo-app);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-login__tarjeta {
  width: 360px;
  background: #FFFFFF;
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio);
  padding: 40px 36px 32px;
  box-sizing: border-box;
  text-align: center;
}
.ds-login__isotipo {
  width: 52px;
  height: 52px;
  margin: 0 0 14px;
}
.ds-login__logotipo {
  font-family: var(--ds-fuente-serif);
  font-size: var(--ds-texto-titulo);
  font-weight: 600;
  color: var(--ds-azul-oscuro);
  margin: 0;
}
.ds-login__subtitulo {
  font-size: var(--ds-texto-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-texto-atenuado);
  margin: 6px 0 0;
}
.ds-login__formulario { margin-top: 26px; text-align: left; }
.ds-login__campos { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ds-login__campos input {
  height: 36px;
}
/* Los epígrafes «USUARIO»/«CONTRASEÑA» en mayúsculas quedan duros para
 * esta pantalla — es la primera impresión del sistema, no un formulario
 * de trabajo. Minúscula normal, sin versalitas, solo en el login. */
.ds-login__epigrafe {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ds-texto);
}
.ds-login__entrar {
  width: 100%;
  height: 40px;
  justify-content: center;
}
.ds-login__pie {
  margin: 24px 0 0;
  font-size: var(--ds-texto-micro);
  color: var(--ds-texto-inactivo);
}

/* ---------------------------------------------------------------------
 * Página de error (500) y estados vacíos.
 * ------------------------------------------------------------------- */
.ds-error-pagina {
  min-height: 100vh;
  background: var(--ds-fondo-app);
  display: flex;
  flex-direction: column;
}
.ds-error-pagina__barra {
  height: 48px;
  background: var(--ds-azul-oscuro);
  border-bottom: 2px solid var(--ds-dorado);
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.ds-error-pagina__cuerpo { flex: 1; display: flex; align-items: center; justify-content: center; }
.ds-error-tarjeta {
  width: 520px;
  background: #FFFFFF;
  border: 1px solid var(--ds-borde);
  border-top: 3px solid var(--ds-error);
  border-radius: var(--ds-radio);
  padding: 30px 34px;
  box-sizing: border-box;
}
.ds-error-tarjeta__codigo {
  font-family: var(--ds-fuente-serif);
  font-size: var(--ds-texto-codigo-error);
  font-weight: 600;
  color: var(--ds-azul-oscuro);
  margin: 0;
}
.ds-error-tarjeta__regla {
  width: 32px;
  height: 2px;
  background: var(--ds-dorado);
  border: none;
  margin: 10px 0 14px;
}
.ds-error-tarjeta__titulo { font-size: var(--ds-texto-error-subtitulo); font-weight: 600; margin: 0 0 8px; }
.ds-error-tarjeta__cuerpo { font-size: var(--ds-texto-base); color: var(--ds-texto-secundario); margin: 0 0 20px; }
.ds-error-tarjeta__pie { display: flex; align-items: center; gap: 16px; }
.ds-error-tarjeta__codigo-incidencia {
  margin-left: auto;
  font-size: var(--ds-tamano-secundario);
  font-variant-numeric: tabular-nums;
  color: var(--ds-texto-atenuado);
}

.ds-vacio {
  padding: 44px 24px 46px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ds-vacio__titulo { font-size: var(--ds-texto-destacado); font-weight: 600; margin: 0; }
.ds-vacio__cuerpo { font-size: var(--ds-texto-base); color: var(--ds-texto-secundario); max-width: 48ch; margin: 0; }
.ds-vacio__acciones { display: flex; gap: 10px; margin-top: 6px; }
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--ds-borde-control);
  border-radius: var(--ds-radio);
  font-size: var(--ds-tamano-secundario);
  color: var(--ds-texto);
  background: #FFFFFF;
}

/* ---------------------------------------------------------------------
 * Iconos de Lucide (issue #186)
 *
 * `currentColor` y nada más: el icono toma el color de su contexto, que
 * es lo que permite que el mismo trazado sirva de aviso en ámbar y de
 * acción en azul sin una clase por combinación.
 * ------------------------------------------------------------------- */
.ds-lucide {
  display: inline-block;
  flex: none;
  vertical-align: -0.15em;
  color: currentColor;
}

.ds-lucide--accion { width: var(--ds-icono-accion); height: var(--ds-icono-accion); }
.ds-lucide--aviso  { width: var(--ds-icono-aviso);  height: var(--ds-icono-aviso); }
.ds-lucide--dato   { width: var(--ds-icono-dato);   height: var(--ds-icono-dato); }

/* ---------------------------------------------------------------------
 * Estados de interacción — lo que se adoptó del boceto (issue #186)
 *
 * Era lo único que faltaba entero en este sistema: no había ni una regla
 * de hover. Se adoptan sus REGLAS con nuestros valores.
 * ------------------------------------------------------------------- */

/* 1. TODO LO PULSABLE TRANSICIONA, y solo el color. */
.ds-pulsable {
  transition: color var(--ds-transicion), background-color var(--ds-transicion),
              border-color var(--ds-transicion);
}

/* 2. LA FILA ENTERA SE SEÑALA, no el control que hay dentro. Quien va a
 *    pulsar el lápiz de la fila ocho necesita saber que está en la ocho. */
.ds-fila-señalable:hover {
  background: var(--ds-fila-hover);
}

/* 3. LAS ACCIONES DE FILA NO SE VEN HASTA QUE HACEN FALTA. Veinte filas
 *    con tres iconos cada una son sesenta controles pidiendo atención
 *    sobre una lista que se ha abierto para LEER. Aparecen al señalar su
 *    fila y se quedan mientras el foco esté dentro — si no, quien navega
 *    con el teclado tabula hacia controles invisibles. */
.ds-fila-señalable .ds-accion-al-pasar {
  opacity: 0;
  transition: opacity var(--ds-transicion), color var(--ds-transicion);
}
.ds-fila-señalable:hover .ds-accion-al-pasar,
.ds-fila-señalable:focus-within .ds-accion-al-pasar {
  opacity: 1;
}

/* 4. CADA CONTROL, AL COLOR DE LO QUE HACE. Es la mejor idea del boceto:
 *    en reposo los tres enlaces del pie son el mismo gris, y al señalar
 *    uno se tiñe de su consecuencia — el color avisa ANTES de pulsar, no
 *    después. Marcar incidencia en ámbar, anular en rojo, retroceder en
 *    azul. */
.ds-consecuencia { color: var(--ds-texto-atenuado); }
.ds-consecuencia--aviso:hover,
.ds-consecuencia--aviso:focus-visible { color: var(--ds-aviso); }
.ds-consecuencia--error:hover,
.ds-consecuencia--error:focus-visible { color: var(--ds-error); }
.ds-consecuencia--neutra:hover,
.ds-consecuencia--neutra:focus-visible { color: var(--ds-azul); }

/* 5. EL FOCO ES SIEMPRE EL MISMO Y SIEMPRE SE VE. `--ds-foco` ya existía
 *    y son 2px: el anillo de 1px del boceto se pierde sobre el borde de
 *    1px que ya tienen las cajas. Se separa de `:hover` a propósito —
 *    `:focus-visible` y no `:focus`, para que pulsar con el ratón no
 *    deje un anillo detrás. */
.ds-pulsable:focus-visible,
.ds-consecuencia:focus-visible {
  outline: none;
  box-shadow: var(--ds-foco);
  border-radius: var(--ds-radio);
}

/* ---------------------------------------------------------------------------
 * La banda de entorno (no producción).
 *
 * **OCUPA SITIO, NO SE SUPERPONE.** Un aviso flotante se scrollea y
 * desaparece; este empuja la página hacia abajo y sigue ahí al volver arriba.
 * `sticky` lo mantiene visible al bajar, que es donde están los formularios
 * de subir documentos — que es lo que este aviso viene a evitar.
 *
 * Ámbar y no rojo: el rojo de esta aplicación significa error o acción
 * destructiva, y esto no es ninguna de las dos. Es una advertencia
 * permanente, y gastar el rojo aquí le quitaría fuerza donde sí hace falta.
 * ------------------------------------------------------------------------ */
.ds-entorno {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
  padding: 0.6rem 1rem;
  background: #8a5200;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-align: center;
  /* La franja inferior lo separa de la barra de navegación, que también es
   * oscura: sin ella las dos se leen como una sola pieza. */
  border-bottom: 3px solid #f0a500;
}

@media (prefers-contrast: more) {
  .ds-entorno {
    background: #000;
    border-bottom-color: #fff;
  }
}