/* TallerClaro · sistema de diseño
   ---------------------------------------------------------------------------
   1. Tokens          2. Base            3. Tipografía       4. Layout
   5. Componentes     6. Carcasa         7. Páginas          8. Utilidades
   9. Impresión

   La portada y las páginas legales tienen su hoja aparte (css/portada.css),
   que solo cargan esas páginas y que usa los tokens de esta.

   Móvil primero, modo claro y oscuro por tokens, contraste AA en los dos.
   La CSP solo admite estilos servidos desde este origen: ningún style= ni
   <style> en el HTML. Guía de uso y reglas en docs/DISENO.md. */

/* ===========================================================================
   1. Tokens
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* Tipografía: Archivo para titulares, rótulos y cifras; Source Sans 3 para leer. */
  --fuente-titulos: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-2xs: 0.6875rem;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.625rem;
  --t-2xl: 2rem;
  --t-3xl: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  --t-display: clamp(2.5rem, 1.3rem + 4.8vw, 4.5rem);

  /* Espacio (base 4 px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pastilla: 999px;

  --toque: 48px;
  --toque-grande: 60px;
  --ancho-app: 1240px;
  --ancho-portada: 1200px;
  --ancho-texto: 68ch;
  --alto-barra: 66px;
  --alto-cabecera: 61px;
  --lateral: 16px;

  --rapida: 120ms;
  --media: 200ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Superficies: hormigón claro de nave, chapa blanca */
  --fondo: #eef1f3;
  --fondo-2: #e5e9ec;
  --superficie: #ffffff;
  --superficie-2: #f5f7f8;
  --superficie-3: #e9edf0;
  --texto: #10151a;
  --texto-suave: #47525d;
  --texto-tenue: #5c6874;
  --borde: #d5dbe0;
  --borde-suave: #e4e8eb;
  --borde-campo: #85909b;

  /* Acento: verde señal */
  --acento: #0b7550;
  --acento-hover: #075e40;
  --acento-activo: #054a32;
  --acento-texto: #ffffff;
  --acento-suave: #e1f2e9;
  --acento-borde: #9fd3b8;
  --acento-tinta: #0a6a49;
  --anillo: rgb(11 117 80 / 0.3);
  --foco: #0b7550;

  /* Grafito: cabecera, portada y toasts */
  --grafito: #151a20;
  --grafito-2: #1d242b;
  --grafito-3: #2a323a;
  --grafito-texto: #eef2f4;
  --grafito-suave: #a9b3bc;
  --acento-sobre-grafito: #43d08f;
  --acento-sobre-grafito-hover: #6be0a9;
  --tinta-sobre-acento-vivo: #04140c;

  /* Semánticos */
  --ok: #0b7550;
  --ok-fondo: #e1f2e9;
  --ok-borde: #9fd3b8;
  --peligro: #b42318;
  --peligro-hover: #912018;
  --peligro-texto: #ffffff;
  --peligro-fondo: #fdedeb;
  --peligro-borde: #efb1aa;
  --peligro-tinta: #9a1c13;
  --atencion: #8a4a00;
  --atencion-fondo: #fff3de;
  --atencion-borde: #eec987;
  --info: #24507a;
  --info-fondo: #e7f0f8;
  --info-borde: #a9c6e0;

  /* Tonos de insignia (texto, fondo, luz) */
  --acero-texto: #24507a;
  --acero-fondo: #e6eff7;
  --acero-punto: #3a78b0;
  --petroleo-texto: #0c5c63;
  --petroleo-fondo: #dff1f2;
  --petroleo-punto: #139aa5;
  --ambar-texto: #7a4100;
  --ambar-fondo: #fff0d4;
  --ambar-punto: #e08a00;
  --verde-texto: #0a6545;
  --verde-fondo: #dff2e8;
  --verde-punto: #16a36b;
  --gris-texto: #47515c;
  --gris-fondo: #eaeef1;
  --gris-punto: #8a95a0;
  --oxido-texto: #8f2f10;
  --oxido-fondo: #fcebe3;
  --oxido-punto: #d2551f;
  --rojo-texto: #9a1c13;
  --rojo-fondo: #fce9e7;
  --rojo-punto: #d23b2e;

  /* Franja de pruebas: amarillo de señalización */
  --pruebas-fondo: #ffd43b;
  --pruebas-texto: #1f1a00;
  --pruebas-borde: #c9a200;
  --pruebas-raya: #1a1d21;

  /* Placa de matrícula */
  --placa-fondo: #ffffff;
  --placa-texto: #0d1114;
  --placa-borde: #1b2229;
  --placa-ue: #003399;

  --sombra-1: 0 1px 0 rgb(16 21 26 / 0.03), 0 1px 2px rgb(16 21 26 / 0.06);
  --sombra-2: 0 1px 2px rgb(16 21 26 / 0.05), 0 8px 20px -8px rgb(16 21 26 / 0.14);
  --sombra-3: 0 2px 4px rgb(16 21 26 / 0.06), 0 24px 48px -18px rgb(16 21 26 / 0.3);
  --sombra-barra: 0 -10px 24px -14px rgb(16 21 26 / 0.22);

  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347525d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Iconos para máscaras CSS (se pintan con currentColor) */
  --i-microfono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M19 11a7 7 0 0 1-14 0M12 18v3M8.5 21h7'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.2 9.5'/%3E%3C/svg%3E");
  --i-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  --i-atencion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
  --i-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-volver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

@media (min-width: 720px) {
  :root {
    --lateral: 24px;
  }
}

@media (min-width: 1100px) {
  :root {
    --lateral: 32px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b0f12;
    --fondo-2: #0f1418;
    --superficie: #141a1f;
    --superficie-2: #192026;
    --superficie-3: #222a32;
    --texto: #e9edf0;
    --texto-suave: #b0bac3;
    --texto-tenue: #8e99a4;
    --borde: #29323b;
    --borde-suave: #20282f;
    --borde-campo: #5e6a76;

    --acento: #43d08f;
    --acento-hover: #6be0a9;
    --acento-activo: #8ae8bc;
    --acento-texto: #04140c;
    --acento-suave: #0f2a1e;
    --acento-borde: #1f5a40;
    --acento-tinta: #6be0a9;
    --anillo: rgb(67 208 143 / 0.35);
    --foco: #6be0a9;

    --grafito: #10151a;
    --grafito-2: #161d23;
    --grafito-3: #232b33;

    --ok: #6be0a9;
    --ok-fondo: #0f2a1e;
    --ok-borde: #1f5a40;
    --peligro: #f0877d;
    --peligro-hover: #f6a69e;
    --peligro-texto: #1c0604;
    --peligro-fondo: #331412;
    --peligro-borde: #6b2a24;
    --peligro-tinta: #f6a29a;
    --atencion: #f6c173;
    --atencion-fondo: #2e210b;
    --atencion-borde: #6a4c16;
    --info: #9cc3e8;
    --info-fondo: #13233a;
    --info-borde: #2c4a6b;

    --acero-texto: #9cc3e8;
    --acero-fondo: #14263a;
    --acero-punto: #5e9dd6;
    --petroleo-texto: #8ed6dc;
    --petroleo-fondo: #0d2b2e;
    --petroleo-punto: #2bb5bf;
    --ambar-texto: #f6c173;
    --ambar-fondo: #33240b;
    --ambar-punto: #f0a020;
    --verde-texto: #7fe0b2;
    --verde-fondo: #0e2a1e;
    --verde-punto: #36c585;
    --gris-texto: #b7c0c8;
    --gris-fondo: #232a31;
    --gris-punto: #7f8a95;
    --oxido-texto: #f4a583;
    --oxido-fondo: #35190e;
    --oxido-punto: #e7703c;
    --rojo-texto: #f6a29a;
    --rojo-fondo: #3a1513;
    --rojo-punto: #ef5a4c;

    --pruebas-fondo: #f2c830;
    --pruebas-borde: #8a7000;

    --placa-fondo: #f3f5f7;
    --placa-borde: #0d1114;

    --sombra-1: 0 1px 0 rgb(0 0 0 / 0.3);
    --sombra-2: 0 10px 24px -10px rgb(0 0 0 / 0.65);
    --sombra-3: 0 28px 60px -20px rgb(0 0 0 / 0.85);
    --sombra-barra: 0 -10px 24px -14px rgb(0 0 0 / 0.7);

    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0bac3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ===========================================================================
   2. Base
   =========================================================================== */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

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

svg {
  flex-shrink: 0;
}

::selection {
  background: var(--acento-suave);
  color: var(--texto);
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ===========================================================================
   3. Tipografía
   =========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 var(--e-3);
  color: var(--texto);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-xl);
  font-weight: 750;
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--t-lg);
}

h3 {
  font-size: var(--t-md);
  font-weight: 650;
}

@media (min-width: 720px) {
  h1 {
    font-size: var(--t-2xl);
  }
}

p {
  margin: 0 0 var(--e-3);
  text-wrap: pretty;
}

a {
  color: var(--acento-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong,
b {
  font-weight: 650;
}

ul,
ol {
  padding-left: 1.25rem;
}

/* Rótulo corto sobre un título: como la chapa de una señal. */
.antetitulo {
  display: block;
  margin: 0 0 var(--e-1);
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.cifra,
.importe {
  font-variant-numeric: tabular-nums;
}

.cifra {
  font-family: var(--fuente-titulos);
}

/* Un importe nunca se parte: el símbolo del euro va con su cifra. */
.importe {
  text-align: right;
  white-space: nowrap;
}

.ayuda {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  margin: var(--e-1) 0 var(--e-2);
}

.vacio {
  color: var(--texto-tenue);
  font-size: var(--t-sm);
  padding: var(--e-3) 0;
  margin: 0;
}

/* ===========================================================================
   4. Layout
   =========================================================================== */

main {
  display: block;
  width: 100%;
  max-width: var(--ancho-app);
  margin: 0 auto;
  padding: var(--e-4) max(var(--lateral), env(safe-area-inset-right)) var(--e-7) max(var(--lateral), env(safe-area-inset-left));
}

@media (min-width: 720px) {
  main {
    padding-top: var(--e-5);
    padding-bottom: var(--e-8);
  }
}

@media (min-width: 1100px) {
  main {
    padding-top: var(--e-6);
  }
}

/* Con la barra de navegación inferior (móvil y tableta) el contenido no queda debajo. */
@media (max-width: 959px) {
  body.con-barra main {
    padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--e-6));
  }
}

.envoltura {
  width: 100%;
  max-width: var(--ancho-portada);
  margin: 0 auto;
  padding: 0 max(var(--lateral), env(safe-area-inset-right)) 0 max(var(--lateral), env(safe-area-inset-left));
}

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

.fila > input,
.fila > select,
.fila > .entrada-placa {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}

.fila-separada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
}

.fila-separada > h2,
.fila-separada > h3 {
  margin-bottom: 0;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

@media (max-width: 519px) {
  .acciones > .boton.grande {
    flex: 1 1 100%;
  }
}

.dos-columnas {
  display: grid;
  gap: 0 var(--e-5);
}

@media (min-width: 900px) {
  .dos-columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .columnas-app {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 0 var(--e-5);
    align-items: start;
  }
}

/* Cabecera de página: título, subtítulo y acciones. */
.pagina-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3) var(--e-4);
  margin: var(--e-2) 0 var(--e-5);
}

.pagina-cabecera h1 {
  margin: 0;
}

.pagina-titulos {
  min-width: 0;
  flex: 1 1 18rem;
}

.pagina-subtitulo {
  color: var(--texto-suave);
  margin: var(--e-2) 0 0;
  max-width: 62ch;
}

.pagina-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

@media (max-width: 519px) {
  .pagina-acciones {
    width: 100%;
  }

  .pagina-acciones > .boton {
    flex: 1 1 auto;
  }
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 40px;
  margin: 0 0 var(--e-1) -4px;
  padding: 0 var(--e-2) 0 0;
  color: var(--texto-suave);
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.volver::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-volver) center / contain no-repeat;
  mask: var(--i-volver) center / contain no-repeat;
}

.volver:hover {
  color: var(--texto);
}

/* ===========================================================================
   5. Componentes
   =========================================================================== */

/* ---------- Iconos (SVG de trazo creados por js/iconos.js o escritos en el HTML) ---------- */

.icono {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: 0 18px;
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-2);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  user-select: none;
  transition:
    background-color var(--rapida) var(--curva),
    border-color var(--rapida) var(--curva),
    color var(--rapida) var(--curva),
    transform var(--rapida) var(--curva);
}

.boton:hover {
  background: var(--superficie-3);
  border-color: var(--texto-tenue);
  text-decoration: none;
}

.boton:active {
  transform: translateY(1px);
}

.boton .icono {
  width: 1.25rem;
  height: 1.25rem;
}

.boton.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), var(--sombra-1);
}

.boton.primario:hover {
  background: var(--acento-hover);
  border-color: var(--acento-hover);
}

.boton.primario:active {
  background: var(--acento-activo);
}

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

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

.boton.grande {
  min-height: var(--toque-grande);
  padding: 0 var(--e-5);
  font-size: 1.0625rem;
  border-radius: 12px;
}

.boton.enlace {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--acento-tinta);
  text-decoration: underline;
  padding: 0 var(--e-2);
}

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

.boton.sutil:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

/* Acción destructiva secundaria: roja pero discreta (la confirmación sí es roja). */
.boton.peligro-sutil {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--peligro-tinta);
}

.boton.peligro-sutil:hover {
  background: var(--peligro-fondo);
  border-color: var(--peligro-borde);
}

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.boton[aria-busy="true"] {
  opacity: 0.85;
  cursor: progress;
}

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

.boton-mas::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-mas) center / contain no-repeat;
  mask: var(--i-mas) center / contain no-repeat;
}

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

/* ---------- Formularios ---------- */

fieldset {
  border: 0;
  margin: 0 0 var(--e-3);
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

label,
.etiqueta {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--texto);
  margin: 0 0 6px;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--toque);
  padding: 10px 14px;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-2);
  box-shadow: inset 0 1px 2px rgb(16 21 26 / 0.05);
  transition: border-color var(--rapida) var(--curva), box-shadow var(--rapida) var(--curva);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--texto-tenue);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--anillo);
}

input::placeholder,
textarea::placeholder {
  color: var(--texto-tenue);
  opacity: 1;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--texto-suave);
  background-color: var(--superficie-2);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--acento);
  box-shadow: none;
  cursor: pointer;
}

input[type="file"] {
  padding: 8px;
  font-size: var(--t-sm);
  background: var(--superficie-2);
  border-style: dashed;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  cursor: pointer;
}

.campo {
  margin-bottom: 14px;
  min-width: 0;
}

.campo-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--toque);
  margin: 0;
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
}

.campos {
  display: grid;
  gap: 0 var(--e-4);
}

@media (min-width: 640px) {
  .campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campos .ancho-completo {
    grid-column: 1 / -1;
  }
}

/* Opciones excluyentes como losetas grandes (radios). */
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--e-2);
}

.opciones > legend {
  margin-bottom: var(--e-2);
}

.opciones .campo-check {
  padding: 0 var(--e-4);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-2);
  background: var(--superficie);
  transition: border-color var(--rapida) var(--curva), background-color var(--rapida) var(--curva);
}

.opciones .campo-check:hover {
  border-color: var(--texto-tenue);
}

.opciones .campo-check:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* Campo de matrícula con la banda azul de la placa. */
.entrada-placa {
  position: relative;
  display: flex;
}

.entrada-placa::before {
  content: "E";
  position: absolute;
  z-index: 1;
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  border-radius: 9px 0 0 9px;
  background: var(--placa-ue);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 700;
  pointer-events: none;
}

.entrada-placa > input {
  padding-left: 44px;
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--placa-fondo);
  color: var(--placa-texto);
  border: 2px solid var(--placa-borde);
}

.entrada-placa > input::placeholder {
  color: #7d8893;
  letter-spacing: 0.08em;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  position: relative;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-1);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

@media (min-width: 720px) {
  .tarjeta {
    padding: var(--e-5);
    margin-bottom: var(--e-5);
  }
}

.tarjeta > h2,
.tarjeta > .fila-separada > h2,
.tarjeta-titulo {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.tarjeta > h2:first-child,
.tarjeta > .fila-separada:first-child {
  margin-bottom: var(--e-4);
}

.tarjeta h3 {
  font-size: var(--t-base);
  margin-top: var(--e-5);
  margin-bottom: var(--e-2);
}

.tarjeta > h3:first-child {
  margin-top: 0;
}

.tarjeta-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  margin: calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde-suave);
}

@media (min-width: 720px) {
  .tarjeta-cabecera {
    margin: calc(var(--e-5) * -1) calc(var(--e-5) * -1) var(--e-5);
    padding: var(--e-4) var(--e-5);
  }
}

.tarjeta-cabecera h2,
.tarjeta-cabecera h3 {
  margin: 0;
  font-size: var(--t-md);
}

.titulo-con-icono {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

.titulo-icono {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--superficie-3);
  color: var(--texto-suave);
}

.titulo-icono .icono {
  width: 20px;
  height: 20px;
}

/* Tarjeta donde se pide una firma o se cierra un paso: filo verde arriba. */
.tarjeta-destacada {
  border-color: var(--acento-borde);
}

.tarjeta-destacada::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--acento);
}

.tarjeta-destacada .titulo-icono {
  background: var(--acento-suave);
  color: var(--acento-tinta);
}

.tarjeta-plana {
  box-shadow: none;
  background: var(--superficie-2);
}

/* Bloque de sección dentro de una tarjeta. */
.bloque {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde-suave);
}

.bloque > h3:first-child {
  margin-top: 0;
}

/* ---------- Avisos y mensajes ---------- */

.mensajes {
  margin-bottom: var(--e-3);
}

.mensajes:empty {
  display: none;
}

/* Si solo hay un aviso flotante, la zona no ocupa sitio en la página. */
.mensajes:has(> .aviso-ok:only-child) {
  margin: 0;
}

.aviso {
  position: relative;
  display: block;
  margin: 0 0 var(--e-3);
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie-2);
  color: var(--texto);
  line-height: 1.45;
}

.aviso::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 20px;
  height: 20px;
  background: var(--aviso-color, var(--texto-suave));
  -webkit-mask: var(--aviso-icono, var(--i-info)) center / contain no-repeat;
  mask: var(--aviso-icono, var(--i-info)) center / contain no-repeat;
}

.aviso p {
  margin: 0 0 var(--e-2);
}

.aviso p:last-child {
  margin-bottom: 0;
}

.aviso .boton {
  margin-top: var(--e-2);
}

.aviso-error {
  --aviso-color: var(--peligro-tinta);
  --aviso-icono: var(--i-error);
  background: var(--peligro-fondo);
  border-color: var(--peligro-borde);
}

.aviso-ok {
  --aviso-color: var(--ok);
  --aviso-icono: var(--i-ok);
  background: var(--ok-fondo);
  border-color: var(--ok-borde);
}

.aviso-info {
  --aviso-color: var(--info);
  --aviso-icono: var(--i-info);
  background: var(--info-fondo);
  border-color: var(--info-borde);
}

.aviso-atencion {
  --aviso-color: var(--atencion);
  --aviso-icono: var(--i-atencion);
  background: var(--atencion-fondo);
  border-color: var(--atencion-borde);
}

/* Lo que salió bien se enseña como un aviso flotante (toast) que se va solo. */
#mensajes > .aviso-ok {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0;
  padding: 14px 16px 14px 48px;
  background: var(--grafito);
  border-color: var(--grafito-3);
  color: var(--grafito-texto);
  font-weight: 600;
  box-shadow: var(--sombra-3);
  animation: toast-entra var(--media) var(--curva);
  --aviso-color: var(--acento-sobre-grafito);
}

#mensajes > .aviso-ok::before {
  top: 15px;
}

@media (max-width: 959px) {
  body.con-barra #mensajes > .aviso-ok {
    bottom: calc(var(--alto-barra) + 12px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 720px) {
  #mensajes > .aviso-ok {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: min(420px, calc(100vw - 48px));
  }
}

@media (prefers-color-scheme: dark) {
  #mensajes > .aviso-ok {
    background: var(--superficie-3);
    border-color: var(--acento-borde);
  }
}

@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- Diálogo de confirmación ---------- */

.dialogo {
  width: min(calc(100vw - 32px), 460px);
  max-width: none;
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-4);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}

.dialogo::backdrop {
  background: rgb(8 11 14 / 0.58);
}

.dialogo[open] {
  animation: dialogo-entra var(--media) var(--curva);
}

.dialogo-icono {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-tinta);
}

.dialogo-icono .icono {
  width: 24px;
  height: 24px;
}

.dialogo-icono-peligro {
  background: var(--peligro-fondo);
  color: var(--peligro-tinta);
}

.dialogo-texto {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

.dialogo .acciones {
  justify-content: flex-end;
  margin-top: var(--e-5);
}

@media (max-width: 519px) {
  .dialogo {
    width: 100%;
    margin: auto 0 0;
    border-radius: var(--r-4) var(--r-4) 0 0;
    border-bottom: 0;
    padding-bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  }

  .dialogo .acciones {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .dialogo .acciones > .boton.grande {
    flex: 0 0 auto;
    min-height: 54px;
  }
}

@keyframes dialogo-entra {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- Listas ---------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista > li {
  border-top: 1px solid var(--borde-suave);
  padding: 10px 0;
}

.lista > li:first-child {
  border-top: 0;
}

.lista > li.lista-vacia,
.lista > li.lista-cargando {
  border-top: 0;
  padding: 0;
}

.lista-enlace {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: var(--toque);
  margin: -4px -10px;
  padding: 6px 40px 6px 10px;
  border-radius: var(--r-2);
  color: var(--texto);
  text-decoration: none;
  transition: background-color var(--rapida) var(--curva);
}

.lista-enlace::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--texto-tenue);
  -webkit-mask: var(--i-flecha) center / contain no-repeat;
  mask: var(--i-flecha) center / contain no-repeat;
  transition: transform var(--rapida) var(--curva);
}

.lista-enlace:hover {
  background: var(--superficie-2);
  text-decoration: none;
}

.lista-enlace:hover::after {
  transform: translateX(2px);
  background: var(--texto);
}

.lista-enlace:hover .lista-titulo {
  text-decoration: none;
}

.lista-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.lista-detalle {
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

.lista-enlace .ancho-completo {
  flex-basis: 100%;
}

/* Botón que se ve como una fila de la lista. */
.boton-lista {
  width: calc(100% + 20px);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Fila con dos o tres piezas alineadas: principal, secundaria y extremo derecho. */
.fila-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--e-3);
  align-items: center;
  width: 100%;
}

.fila-lista-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--e-2);
  min-width: 0;
}

.fila-lista-extremo {
  justify-self: end;
  text-align: right;
}

.fila-lista-pie {
  grid-column: 1 / -1;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

/* Bajo un avatar, el pie empieza donde empieza el texto. */
.fila-lista-pie-sangrado {
  padding-left: 52px;
}

.fila-lista-cifras {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.lista-importe {
  font-family: var(--fuente-titulos);
  font-weight: 650;
}

/* Avatar con la inicial (clientes, usuarios, cuenta). */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--superficie-3);
  color: var(--texto-suave);
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 750;
  text-transform: uppercase;
}

.con-avatar {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

.con-avatar > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Datos resumidos (dl) ---------- */

.datos {
  display: grid;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-2);
}

@media (min-width: 640px) {
  .datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.datos dl {
  margin: 0;
  min-width: 0;
}

.datos dt {
  font-family: var(--fuente-titulos);
  font-size: var(--t-2xs);
  font-weight: 650;
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 2px;
}

.datos dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.datos dd .placa {
  margin-right: var(--e-2);
}

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

.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: top;
}

thead th {
  font-family: var(--fuente-titulos);
  font-size: var(--t-2xs);
  font-weight: 650;
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  background: var(--superficie-2);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

th.importe,
td.importe {
  text-align: right;
}

/* Tabla que en móvil pasa a tarjetas: cada celda lleva data-etiqueta. */
@media (max-width: 639px) {
  .tabla-contenedor {
    overflow: visible;
    border: 0;
    background: none;
  }

  .tabla-tarjetas thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabla-tarjetas,
  .tabla-tarjetas tbody,
  .tabla-tarjetas tr,
  .tabla-tarjetas td {
    display: block;
    width: 100%;
  }

  .tabla-tarjetas tr {
    margin-bottom: var(--e-2);
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--r-2);
    background: var(--superficie);
  }

  .tabla-tarjetas td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e-3);
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .tabla-tarjetas td::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: var(--t-xs);
    font-weight: 600;
    text-align: left;
  }

  .tabla-tarjetas td:first-child {
    display: block;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde-suave);
    font-weight: 650;
    text-align: left;
  }

  .tabla-tarjetas td:first-child::before {
    display: none;
  }

  .tabla-tarjetas td:empty {
    display: none;
  }
}

/* ---------- Insignias de estado, confianza y tono ---------- */

.etiqueta-estado,
.confianza,
.insignia {
  --i-texto: var(--gris-texto);
  --i-fondo: var(--gris-fondo);
  --i-punto: var(--gris-punto);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 10px 2px 9px;
  border-radius: var(--r-pastilla);
  background: var(--i-fondo);
  color: var(--i-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.etiqueta-estado::before,
.confianza::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--i-punto);
  box-shadow: 0 0 0 3px var(--i-fondo), 0 0 6px var(--i-punto);
}

.insignia {
  padding-left: 10px;
}

.tono-acero,
.estado-presupuesto {
  --i-texto: var(--acero-texto);
  --i-fondo: var(--acero-fondo);
  --i-punto: var(--acero-punto);
}

.tono-petroleo,
.estado-aceptado {
  --i-texto: var(--petroleo-texto);
  --i-fondo: var(--petroleo-fondo);
  --i-punto: var(--petroleo-punto);
}

.tono-ambar,
.estado-en_curso,
.confianza-media {
  --i-texto: var(--ambar-texto);
  --i-fondo: var(--ambar-fondo);
  --i-punto: var(--ambar-punto);
}

.tono-verde,
.estado-terminado,
.confianza-alta {
  --i-texto: var(--verde-texto);
  --i-fondo: var(--verde-fondo);
  --i-punto: var(--verde-punto);
}

.tono-gris,
.estado-entregado {
  --i-texto: var(--gris-texto);
  --i-fondo: var(--gris-fondo);
  --i-punto: var(--gris-punto);
}

.tono-oxido,
.estado-renunciado {
  --i-texto: var(--oxido-texto);
  --i-fondo: var(--oxido-fondo);
  --i-punto: var(--oxido-punto);
}

.tono-rojo,
.estado-anulado,
.confianza-baja {
  --i-texto: var(--rojo-texto);
  --i-fondo: var(--rojo-fondo);
  --i-punto: var(--rojo-punto);
}

/* ---------- Placa de matrícula ---------- */

.placa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding-right: 8px;
  overflow: hidden;
  border: 1.5px solid var(--placa-borde);
  border-radius: 5px;
  background: var(--placa-fondo);
  color: var(--placa-texto);
  font-family: var(--fuente-titulos);
  font-size: 0.875rem;
  font-weight: 700;
  font-stretch: 92%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.placa::before {
  content: "E";
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 14px;
  padding-bottom: 3px;
  background: var(--placa-ue);
  color: #ffffff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0;
}

.placa-grande {
  height: 34px;
  font-size: 1.125rem;
  padding-right: 10px;
}

.placa-grande::before {
  width: 18px;
  font-size: 0.6875rem;
}

/* ---------- Pestañas ---------- */

.pestanas {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 2px;
  margin: 0 calc(var(--lateral) * -1) var(--e-4);
  padding: 0 var(--lateral);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}

.pestanas::-webkit-scrollbar {
  display: none;
}

@media (min-width: 960px) {
  .pestanas {
    top: var(--alto-cabecera);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}

.pestanas [role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 56px;
  padding: 0 14px;
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--texto-suave);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--rapida) var(--curva);
}

.pestanas [role="tab"] .icono {
  width: 20px;
  height: 20px;
}

.pestanas [role="tab"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.pestanas [role="tab"]:hover {
  color: var(--texto);
}

.pestanas [role="tab"][aria-selected="true"] {
  color: var(--texto);
}

.pestanas [role="tab"][aria-selected="true"]::after {
  background: var(--acento);
}

.pestanas [role="tab"]:focus-visible {
  outline-offset: -3px;
  border-radius: 8px;
}

[role="tabpanel"]:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-3);
}

/* ---------- Contadores del panel ---------- */

.contadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

@media (min-width: 900px) {
  .contadores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-4);
  }
}

.contador {
  --i-texto: var(--gris-texto);
  --i-fondo: var(--gris-fondo);
  --i-punto: var(--gris-punto);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 132px;
  padding: var(--e-4);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-1);
  color: var(--texto);
  text-decoration: none;
  transition: border-color var(--rapida) var(--curva), box-shadow var(--rapida) var(--curva), transform var(--rapida) var(--curva);
}

.contador::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: var(--i-punto);
}

a.contador:hover {
  border-color: var(--borde-campo);
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}

.contador-icono {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--e-2);
  border-radius: 10px;
  background: var(--i-fondo);
  color: var(--i-texto);
}

.contador-icono .icono {
  width: 20px;
  height: 20px;
}

.contador-numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2.25rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.contador-texto {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
}

.contador-cero .contador-numero {
  color: var(--texto-tenue);
}

@media (min-width: 900px) {
  .contador {
    min-height: 150px;
    padding: var(--e-5);
  }

  .contador-numero {
    font-size: 2.75rem;
  }
}

/* ---------- Esqueletos de carga ---------- */

.esqueleto {
  display: grid;
  gap: 10px;
  padding: 4px 0;
}

.esqueleto-fila,
.esqueleto-bloque {
  display: block;
  height: 44px;
  border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--superficie-2) 0%, var(--superficie-3) 45%, var(--superficie-2) 90%);
  background-size: 220% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}

.esqueleto-fila:nth-child(3n) {
  width: 82%;
}

.contador.esqueleto-contador {
  justify-content: flex-end;
  gap: 10px;
}

.esqueleto-contador .esqueleto-bloque:first-child {
  width: 36px;
  height: 36px;
  margin-bottom: auto;
}

.esqueleto-contador .esqueleto-bloque:nth-child(2) {
  width: 56px;
  height: 34px;
}

.esqueleto-contador .esqueleto-bloque:nth-child(3) {
  width: 70%;
  height: 14px;
}

@keyframes brillo {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -120% 0;
  }
}

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

.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-5) var(--e-3);
  text-align: center;
}

.estado-vacio .ilustracion {
  width: 104px;
  height: 78px;
  margin-bottom: var(--e-2);
}

.estado-vacio-titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-base);
  font-weight: 650;
}

.estado-vacio-texto {
  margin: 0;
  max-width: 40ch;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

.estado-vacio .boton {
  margin-top: var(--e-3);
}

.estado-vacio-compacto {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  text-align: left;
}

.estado-vacio-compacto .ilustracion {
  width: 64px;
  height: 48px;
  margin: 0;
}

/* Ilustraciones: formas con clases, el color sale de los tokens. */
.ilu-fondo {
  fill: var(--superficie-2);
}

.ilu-papel {
  fill: var(--superficie);
  stroke: var(--borde-campo);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ilu-linea {
  fill: none;
  stroke: var(--borde-campo);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ilu-tinta {
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ilu-acento {
  fill: none;
  stroke: var(--acento);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ilu-acento-relleno {
  fill: var(--acento-suave);
  stroke: var(--acento);
  stroke-width: 2;
}

.ilu-solido {
  fill: var(--acento);
}

.ilu-suave {
  fill: var(--superficie-3);
}

.ilu-sobre-acento {
  fill: none;
  stroke: var(--acento-texto);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Pantallas de estado (entrar, sin acceso, entrando) ---------- */

.pantalla-estado {
  max-width: 520px;
  margin: var(--e-6) auto;
  padding: var(--e-6) var(--e-5);
  text-align: center;
}

.pantalla-estado h1 {
  font-size: var(--t-xl);
}

.pantalla-estado p {
  color: var(--texto-suave);
}

.pantalla-estado .acciones {
  justify-content: center;
}

.pantalla-estado-icono {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--e-4);
  border-radius: 18px;
  background: var(--acento-suave);
  color: var(--acento-tinta);
}

.pantalla-estado-icono .icono {
  width: 30px;
  height: 30px;
}

.girando {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--e-4);
  border: 4px solid var(--superficie-3);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

/* ===========================================================================
   6. Carcasa: cabecera, navegación, cuenta y franja de pruebas
   =========================================================================== */

.saltar {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: var(--sombra-3);
}

.saltar:focus {
  top: 12px;
}

.cabecera {
  position: relative;
  z-index: 40;
  background: var(--grafito);
  color: var(--grafito-texto);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

@media (min-width: 960px) {
  .cabecera {
    position: sticky;
    top: 0;
  }
}

.cabecera-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: calc(var(--ancho-app) + 160px);
  min-height: 60px;
  margin: 0 auto;
  padding: 6px max(var(--lateral), env(safe-area-inset-right)) 6px max(var(--lateral), env(safe-area-inset-left));
}

.cabecera-identidad {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
  flex: 0 1 auto;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  color: inherit;
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.marca img,
.marca svg {
  width: 32px;
  height: 32px;
}

.marca:hover {
  text-decoration: none;
}

.marca-claro {
  color: var(--acento-sobre-grafito);
}

.cabecera-taller {
  min-width: 0;
  max-width: 34vw;
  padding-left: var(--e-3);
  border-left: 1px solid rgb(255 255 255 / 0.16);
  overflow: hidden;
  color: var(--grafito-suave);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabecera-taller:empty {
  display: none;
}

/* En escritorio el nombre del taller solo sale cuando cabe junto a la navegación. */
@media (min-width: 960px) and (max-width: 1099px) {
  .cabecera-taller {
    display: none;
  }
}

@media (min-width: 1100px) {
  .cabecera-taller {
    max-width: 9rem;
  }
}

@media (min-width: 1320px) {
  .cabecera-taller {
    max-width: 12rem;
  }
}

/* Navegación principal: barra inferior en móvil, pestañas en la cabecera en escritorio. */
.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-lista a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

.menu-icono {
  display: inline-grid;
  place-items: center;
}

.menu-icono .icono {
  width: 22px;
  height: 22px;
}

@media (max-width: 959px) {
  .menu {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    box-shadow: var(--sombra-barra);
  }

  .menu-lista {
    justify-content: space-around;
    max-width: 600px;
    margin: 0 auto;
  }

  .menu-lista li {
    flex: 1 1 0;
    min-width: 0;
  }

  .menu-lista a {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 2px 1px;
    border-radius: 12px;
    color: var(--texto-tenue);
    font-size: var(--t-2xs);
    font-stretch: 80%;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-align: center;
  }

  .menu-texto {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-icono {
    width: 52px;
    height: 28px;
    border-radius: var(--r-pastilla);
    transition: background-color var(--rapida) var(--curva);
  }

  .menu-lista a[aria-current="page"] {
    color: var(--texto);
  }

  .menu-lista a[aria-current="page"] .menu-icono {
    background: var(--acento-suave);
    color: var(--acento-tinta);
  }

  .menu-lista a.menu-destacado .menu-icono {
    background: var(--acento);
    color: var(--acento-texto);
  }
}

@media (min-width: 960px) {
  .menu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-lista {
    gap: 2px;
  }

  .menu-lista a {
    position: relative;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--grafito-suave);
    font-size: var(--t-sm);
    white-space: nowrap;
    transition: color var(--rapida) var(--curva), background-color var(--rapida) var(--curva);
  }

  .menu-icono .icono {
    width: 19px;
    height: 19px;
  }

  .menu-lista a:hover {
    color: #ffffff;
    background: rgb(255 255 255 / 0.06);
  }

  .menu-lista a[aria-current="page"] {
    color: #ffffff;
    background: rgb(255 255 255 / 0.09);
  }

  .menu-lista a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -9px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--acento-sobre-grafito);
  }

  .menu-lista a.menu-destacado {
    color: var(--tinta-sobre-acento-vivo);
    background: var(--acento-sobre-grafito);
  }

  .menu-lista a.menu-destacado:hover,
  .menu-lista a.menu-destacado[aria-current="page"] {
    color: var(--tinta-sobre-acento-vivo);
    background: var(--acento-sobre-grafito-hover);
  }

  .menu-lista a.menu-destacado[aria-current="page"]::after {
    display: none;
  }
}

/* Iconos en la navegación de escritorio solo cuando caben todos. */
@media (min-width: 960px) and (max-width: 1319px) {
  .menu-lista a:not(.menu-destacado) .menu-icono {
    display: none;
  }
}

.cabecera :focus-visible {
  outline-color: var(--acento-sobre-grafito);
}

@media (max-width: 959px) {
  .menu :focus-visible {
    outline-color: var(--foco);
  }
}

/* Enlaces de la portada en la cabecera (sin sesión). */
.cabecera-secciones {
  display: none;
}

@media (min-width: 960px) {
  .cabecera-secciones {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
  }

  .cabecera-secciones ul {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cabecera-secciones a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--grafito-suave);
    font-family: var(--fuente-titulos);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
  }

  .cabecera-secciones a:hover {
    color: #ffffff;
    background: rgb(255 255 255 / 0.06);
  }
}

.cabecera-entrar {
  margin-left: auto;
  min-height: 44px;
  background: transparent;
  border-color: rgb(255 255 255 / 0.28);
  color: #ffffff;
  box-shadow: none;
}

.cabecera-entrar:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.5);
}

/* Menú de la cuenta */
.cuenta {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

@media (min-width: 960px) {
  .cuenta {
    margin-left: var(--e-2);
  }
}

.cuenta-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  padding: 4px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pastilla);
  cursor: pointer;
  text-align: left;
}

.cuenta-boton:hover,
.cuenta-boton[aria-expanded="true"] {
  background: rgb(255 255 255 / 0.08);
}

.cuenta-boton .avatar {
  width: 36px;
  height: 36px;
  background: var(--acento-sobre-grafito);
  color: var(--tinta-sobre-acento-vivo);
}

.cuenta-resumen {
  display: none;
}

@media (min-width: 1440px) {
  .cuenta-boton {
    padding-right: 14px;
  }

  .cuenta-resumen {
    display: flex;
    flex-direction: column;
    max-width: 11rem;
    line-height: 1.25;
  }

  .cuenta-correo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-xs);
    font-weight: 600;
  }

  .cuenta-rol-corto {
    color: var(--grafito-suave);
    font-size: var(--t-2xs);
    font-family: var(--fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}

.cuenta-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  width: min(300px, calc(100vw - 32px));
  padding: var(--e-4);
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-3);
  animation: dialogo-entra var(--media) var(--curva);
}

.cuenta-panel :focus-visible {
  outline-color: var(--foco);
}

.cabecera-usuario {
  display: block;
  margin: 0 0 var(--e-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cuenta-rol {
  margin: 0 0 var(--e-3);
}

.boton.salir {
  width: 100%;
}

/* Franja de «versión en pruebas»: cinta de señalización bajo la cabecera. */
.aviso-pruebas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  padding: 8px max(var(--lateral), env(safe-area-inset-right)) 8px calc(max(var(--lateral), env(safe-area-inset-left)) + 34px);
  background: var(--pruebas-fondo);
  color: var(--pruebas-texto);
  border-bottom: 1px solid var(--pruebas-borde);
  font-size: var(--t-sm);
  line-height: 1.35;
}

.aviso-pruebas::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: repeating-linear-gradient(-45deg, var(--pruebas-raya) 0 7px, var(--pruebas-fondo) 7px 14px);
}

.aviso-pruebas-marca {
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 800;
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .aviso-pruebas {
    justify-content: center;
  }
}

/* ===========================================================================
   7. Páginas de la aplicación
   =========================================================================== */

/* Página de la OR y listas de órdenes: controles grandes para manos con guantes. */
.pagina-or .boton {
  min-height: 56px;
  font-size: 1rem;
  padding: 0 20px;
}

.pagina-or .boton.grande {
  min-height: var(--toque-grande);
  font-size: 1.0625rem;
}

.pagina-or input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pagina-or select {
  min-height: 56px;
}

.pagina-or input[type="checkbox"],
.pagina-or input[type="radio"] {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

/* ---------- Panel ---------- */

.panel-rejilla {
  display: grid;
  gap: 0 var(--e-5);
}

@media (min-width: 900px) {
  .panel-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 1180px) {
  .panel-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.panel-rejilla .tarjeta {
  display: flex;
  flex-direction: column;
}

/* ---------- Lista de órdenes ---------- */

.lista-cabecera {
  display: none;
}

.fila-orden {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "numero numero total"
    "estado placa placa"
    "cliente cliente cliente"
    "motivo motivo motivo";
  gap: 6px var(--e-3);
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.fila-orden .lista-titulo {
  grid-area: numero;
}

.fila-orden .etiqueta-estado {
  grid-area: estado;
  justify-self: start;
}

.fila-orden-placa {
  grid-area: placa;
}

.fila-orden-cliente {
  grid-area: cliente;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.fila-orden-cliente small {
  display: none;
}

.fila-orden-fecha {
  display: none;
}

.fila-orden-total {
  grid-area: total;
  font-family: var(--fuente-titulos);
  font-weight: 650;
  text-align: right;
}

.fila-orden-motivo {
  grid-area: motivo;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1100px) {
  .lista-cabecera {
    display: grid;
    grid-template-columns: 9rem 8.5rem 7.5rem minmax(0, 1fr) 6.5rem 7.5rem;
    gap: var(--e-3);
    padding: 0 30px var(--e-2) 0;
    border-bottom: 1px solid var(--borde);
    font-family: var(--fuente-titulos);
    font-size: var(--t-2xs);
    font-weight: 650;
    font-stretch: 87.5%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
  }

  .lista-cabecera span:last-child {
    text-align: right;
  }

  .fila-orden {
    grid-template-columns: 9rem 8.5rem 7.5rem minmax(0, 1fr) 6.5rem 7.5rem;
    grid-template-areas:
      "numero estado placa cliente fecha total"
      "numero estado placa motivo motivo motivo";
    row-gap: 0;
  }

  .fila-orden-fecha {
    display: block;
    grid-area: fecha;
  }

  .fila-orden-motivo {
    font-size: var(--t-sm);
  }
}

/* ---------- Nueva OR: pasos ---------- */

.paso-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.paso-numero {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--grafito);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 750;
}

@media (prefers-color-scheme: dark) {
  .paso-numero {
    background: var(--superficie-3);
  }
}

.ficha-vehiculo,
.ficha-cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-3) 0;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--ok-borde);
  border-radius: var(--r-2);
  background: var(--ok-fondo);
}

.ficha-cliente {
  justify-content: space-between;
  border-color: var(--borde);
  background: var(--superficie-2);
}

.ficha-vehiculo-texto {
  font-weight: 600;
}

.ficha-vehiculo-texto small {
  display: block;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: 400;
}

.barra-crear {
  margin-top: var(--e-2);
}

/* Formularios por pasos: una columna centrada, más fácil de seguir. */
.contenido-estrecho {
  max-width: 54rem;
  margin: 0 auto;
}

/* ---------- Ficha de la OR ---------- */

.ficha-or-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde-suave);
}

.ficha-or-cabeza h1 {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ficha-or .etiqueta-estado {
  min-height: 32px;
  padding: 4px 14px 4px 12px;
  font-size: var(--t-sm);
}

.ficha-or .acciones:empty {
  display: none;
}

/* Presupuesto: líneas editables */
.lineas {
  margin-top: var(--e-2);
}

.linea {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie-2);
}

.linea > :first-child,
.linea > :nth-child(2) {
  grid-column: 1 / -1;
}

.linea .campo {
  margin-bottom: 0;
}

.linea-importe {
  align-self: center;
  white-space: nowrap;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}

.linea-importe::before {
  content: "Importe";
  display: block;
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

.linea > .boton:last-child {
  justify-self: end;
}

.linea.linea-simple {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.linea.linea-simple > :first-child {
  flex: 1 1 100%;
}

.linea.linea-simple > .campo:not(:first-child) {
  flex: 1 1 7rem;
}

.linea.linea-simple > .campo-check {
  flex: 1 1 auto;
}

.linea.linea-simple > .etiqueta-estado {
  align-self: center;
}

.linea.linea-simple > .boton:last-child {
  margin-left: auto;
}

@media (min-width: 760px) {
  .linea {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--borde-suave);
    border-radius: 0;
    background: none;
  }

  .linea:first-child {
    border-top: 0;
  }

  .linea > :first-child,
  .linea > :nth-child(2) {
    grid-column: auto;
  }

  .linea-importe {
    align-self: end;
    padding-bottom: 14px;
    text-align: right;
  }

  .linea-importe::before {
    display: none;
  }

  .linea.linea-simple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .linea.linea-simple > .campo:not(:first-child) {
    width: 8rem;
  }

  .linea.linea-simple > .campo-check,
  .linea.linea-simple > .etiqueta-estado {
    align-self: end;
    margin-bottom: 4px;
  }
}

.totales {
  margin: var(--e-4) 0 0 auto;
  max-width: 380px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie-2);
}

.totales div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 4px 0;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.totales div span:last-child {
  color: var(--texto);
  font-weight: 600;
  white-space: nowrap;
}

.totales .total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px solid var(--texto);
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.totales .total span:last-child {
  font-weight: 750;
}

.validez {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--e-4) 0 var(--e-2);
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pastilla);
  background: var(--info-fondo);
  color: var(--info);
  font-weight: 650;
}

.validez::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-calendario) center / contain no-repeat;
  mask: var(--i-calendario) center / contain no-repeat;
}

.texto-legal {
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--borde-campo);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  white-space: pre-line;
}

/* Documentos para imprimir */
.rejilla-documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--e-2);
}

.documento-imprimir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--e-3);
  align-items: center;
  min-height: 64px;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  transition: border-color var(--rapida) var(--curva), background-color var(--rapida) var(--curva);
}

.documento-imprimir:hover {
  border-color: var(--acento);
  background: var(--acento-suave);
  text-decoration: none;
}

.documento-imprimir .icono {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  color: var(--texto-suave);
}

.documento-imprimir-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 650;
}

.documento-imprimir-detalle {
  color: var(--texto-tenue);
  font-size: var(--t-xs);
}

/* ---------- Firma ---------- */

.firma {
  margin: var(--e-3) 0;
}

.firma-etiqueta {
  margin-bottom: 6px;
  font-weight: 600;
}

/* El lienzo es blanco también en modo oscuro, como el papel, con su línea de firma. */
.firma-lienzo {
  display: block;
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  background-image: linear-gradient(#9aa5af, #9aa5af);
  background-size: calc(100% - 48px) 1px;
  background-position: 24px calc(100% - 44px);
  background-repeat: no-repeat;
  border: 2px dashed #8a96a1;
  border-radius: var(--r-2);
  touch-action: none;
  cursor: crosshair;
}

@media (min-width: 760px) {
  .firma-lienzo {
    height: 240px;
  }
}

.firma-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2);
  margin-top: 6px;
}

.firma-pie .ayuda {
  margin: 0;
}

.zona-firma {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px dashed var(--borde);
}

.zona-firma:empty {
  display: none;
}

/* ---------- Dictado ---------- */

.dictado .dictar {
  width: 100%;
  margin-bottom: var(--e-3);
  min-height: 68px;
  font-size: var(--t-md);
}

.dictado .dictar::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--i-microfono) center / contain no-repeat;
  mask: var(--i-microfono) center / contain no-repeat;
}

.dictado .dictar.escuchando {
  background: var(--peligro);
  border-color: var(--peligro);
  color: var(--peligro-texto);
}

.dictado .dictar.escuchando::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 0 0 0 currentColor;
  animation: latido 1.2s ease-in-out infinite;
}

@keyframes latido {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.dictado-texto {
  min-height: 180px;
}

.dictado-provisional {
  min-height: 1.5em;
  margin: var(--e-2) 0 0;
  color: var(--texto-suave);
  font-style: italic;
}

.dictado-provisional:empty {
  min-height: 0;
}

.dictado-estado {
  margin: var(--e-1) 0 0;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

.dictado-estado:empty {
  display: none;
}

/* ---------- Avisos al cliente ---------- */

.rejilla-avisos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--e-2);
}

.rejilla-avisos .boton {
  justify-content: flex-start;
  text-align: left;
}

.aviso-preparado {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde-suave);
}

.aviso-preparado:empty {
  display: none;
}

.aviso-destinatario {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  padding: 6px 12px;
  border-radius: var(--r-pastilla);
  background: var(--superficie-2);
  font-size: var(--t-sm);
}

/* ---------- Documentos de proveedor ---------- */

.subida {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 2px dashed var(--borde-campo);
  border-radius: var(--r-3);
  background: var(--superficie-2);
}

.subida .acciones {
  margin-top: 0;
}

.vista-previa:empty {
  display: none;
}

.vista-previa canvas {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--borde);
  border-radius: var(--r-1);
  background: #ffffff;
  box-shadow: var(--sombra-2);
}

.vista-previa p {
  margin: 0;
  font-weight: 600;
}

.suma-cuadre {
  margin-top: var(--e-2);
  padding: 8px 12px;
  border-radius: var(--r-1);
  background: var(--superficie-2);
}

/* ---------- Taller ---------- */

.indice-taller {
  display: flex;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.indice-taller a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pastilla);
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.indice-taller a:hover {
  color: var(--texto);
  border-color: var(--borde-campo);
}

/* ---------- Hoja imprimible (A4): sobria, sin decoración ---------- */

.barra-imprimir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  max-width: 210mm;
  margin: 0 auto var(--e-2);
}

.barra-imprimir + .ayuda {
  max-width: 210mm;
  margin: 0 auto var(--e-4);
}

.hoja {
  max-width: 210mm;
  margin: 0 auto var(--e-5);
  padding: 18px;
  background: #ffffff;
  color: #111111;
  border: 1px solid #cfd5da;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(16 21 26 / 0.08);
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .hoja {
    padding: 16mm 15mm;
  }
}

.hoja h1,
.hoja h2 {
  color: #111111;
  letter-spacing: 0;
}

.hoja h1 {
  font-size: 1.375rem;
  margin: 0 0 4px;
}

.hoja h2 {
  margin: 14px 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hoja p {
  margin: 0 0 8px;
}

.hoja a {
  color: #111111;
}

.hoja table {
  margin: 8px 0;
}

.hoja th,
.hoja td {
  padding: 6px 8px;
  border-bottom: 1px solid #b8bec8;
  color: #111111;
}

.hoja thead th {
  background: none;
  color: #333333;
  border-bottom: 1.5px solid #111111;
}

.hoja .texto-legal {
  padding: 0 0 0 10px;
  border-left: 2px solid #b8bec8;
  border-radius: 0;
  background: none;
  color: #333333;
  font-size: 0.8125rem;
}

.hoja .ayuda,
.hoja .vacio {
  color: #444444;
}

.hoja .validez {
  display: block;
  margin: 10px 0;
  padding: 0;
  background: none;
  color: #111111;
  border-radius: 0;
}

.hoja .validez::before {
  display: none;
}

.hoja .totales {
  max-width: 320px;
  padding: 0;
  border: 0;
  background: none;
}

.hoja .totales div,
.hoja .totales div span:last-child {
  color: #111111;
}

.hoja .totales .total {
  border-top-color: #111111;
  font-size: 1.125rem;
}

.hoja-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #111111;
}

.hoja-cabecera > div:last-child {
  text-align: right;
}

.hoja-datos {
  display: grid;
  gap: 8px 24px;
}

@media (min-width: 640px) {
  .hoja-datos {
    grid-template-columns: 1fr 1fr;
  }
}

.hoja-datos dl {
  margin: 0;
}

.hoja-datos dt {
  color: #333333;
  font-size: 0.75rem;
  font-weight: 700;
}

.hoja-datos dd {
  margin: 0 0 6px;
}

.hoja-firmas {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 640px) {
  .hoja-firmas {
    grid-template-columns: 1fr 1fr;
  }
}

.hoja-firma {
  min-height: 110px;
  padding-top: 6px;
  border-top: 1px solid #111111;
  break-inside: avoid;
}

.hoja-firma img {
  display: block;
  max-width: 100%;
  max-height: 90px;
}

.hoja-pie {
  margin-top: 18px;
  color: #333333;
  font-size: 0.75rem;
}

/* ===========================================================================
   8. Utilidades
   =========================================================================== */

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

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

.sin-margen {
  margin: 0;
}

@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;
  }

  .dictado .dictar.escuchando::before {
    animation: none;
  }

  .esqueleto-fila,
  .esqueleto-bloque {
    animation: none;
  }
}

@media (forced-colors: active) {
  .etiqueta-estado,
  .confianza,
  .insignia,
  .placa,
  .aviso {
    border: 1px solid CanvasText;
  }

  .menu-lista a[aria-current="page"] {
    outline: 2px solid Highlight;
  }
}

/* ===========================================================================
   9. Impresión
   =========================================================================== */

@page {
  size: A4;
  margin: 15mm;
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #ffffff;
    color: #111111;
  }

  .cabecera,
  .saltar,
  .mensajes,
  .no-imprimir,
  .pie {
    display: none !important;
  }

  .aviso-pruebas {
    padding: 4px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #111111;
    color: #111111;
  }

  .aviso-pruebas::before {
    display: none;
  }

  main,
  body.con-barra main {
    max-width: none;
    padding: 0;
  }

  .hoja {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 10.5pt;
  }

  .hoja table {
    page-break-inside: auto;
  }

  .hoja tr {
    break-inside: avoid;
  }

  .hoja h2 {
    break-after: avoid;
  }

  a {
    text-decoration: none;
  }
}