/* ============================================================
   Retornex · web pública · «La hoja de trabajo»
   ------------------------------------------------------------
   El mundo es la hoja de conciliación del cliente, de noche: fondo
   #071724 con rejilla, cabeceras de fila y columna, tinta clara,
   bolígrafo rojo SOLO para diferencias, el verde del logo como
   cursor de selección y relleno de lo que cuadra, y los rellenos de
   formato condicional para los estados. Las pantallas de la
   aplicación y el albarán en copia amarilla son objetos y conservan
   sus colores de día; las decisiones van con sello de goma.

   Clases en <html> (las pone el script del <head>):
   - .js   hay JavaScript: los pasos se ven de uno en uno.
   - .mov  además se permite movimiento: el bolígrafo se dibuja,
           la hoja se cuadra delante y los sellos caen.
   Si el script principal no llega, las dos se quitan a los 2,5 s
   y la página queda entera y quieta.
   ============================================================ */

/* ---------- Tipografía (autoalojada) ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  /* La hoja de noche: toda la web */
  --papel: #071724;            /* el fondo de la página */
  --panel: #0a1d2c;            /* el fondo de cada hoja */
  --rejilla: #1b3d58;          /* las líneas de la hoja */
  --rejilla-suave: #12304a;    /* la rejilla del fondo */
  --cabecera: #0b2131;         /* cabeceras de fila y columna */
  --copia: #fbf1bd;            /* copia amarilla del albarán */
  --copia-linea: #e3d58f;
  --copia-tinta: #6b5710;      /* rótulos impresos en la copia */
  --copia-texto: #4d4210;

  /* Tinta clara sobre la noche */
  --tinta: #eef4f8;
  --tinta-2: #a9bccb;
  --tinta-3: #8197a9;

  /* El verde del logo: cursor de selección y lo que cuadra */
  --verde: #45bd72;
  --verde-boton: #1f7a42;
  --verde-boton-hover: #17633a;
  --verde-texto: #62cf8c;
  --verde-relleno: rgba(69, 189, 114, 0.17);

  /* Bolígrafo rojo: solo diferencias */
  --boli: #ff6b5e;
  --boli-relleno: rgba(255, 107, 94, 0.15);

  /* Formato condicional del resto de estados (los de la aplicación) */
  --ambar-texto: #f3c86a;
  --ambar-relleno: rgba(245, 182, 56, 0.17);
  --morado-texto: #cdb5f8;
  --morado-relleno: rgba(170, 132, 240, 0.2);
  --gris-texto: #bccad4;
  --gris-relleno: rgba(160, 182, 198, 0.15);

  /* La hoja de noche (portada) */
  --noche: #071724;
  --noche-panel: #0a1d2c;
  --noche-cabecera: #0b2131;
  --noche-linea: #12304a;
  --noche-linea-fuerte: #1b3d58;
  --noche-tinta: #eef4f8;
  --noche-tinta-2: #a9bccb;
  --noche-tinta-3: #8197a9;
  --noche-verde: #45bd72;
  --noche-boli: #ff6b5e;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* La celda es el módulo de toda la página */
  --celda: 2.25rem;
  --tira: 1.6rem;              /* alto de la cabecera de columnas */
  --filas: 2.4rem;             /* ancho de la cabecera de filas */
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --shell: 1240px;
  --pestanas: 2.75rem;
  --fila: 1.75rem;             /* las filas de la hoja grande */
  --inset: 0.6rem;             /* margen del texto dentro de su celda */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Islas claras: lo que en la página es un objeto (una pantalla de la aplicación,
   una copia de papel) conserva sus colores de día */
.app,
.albaran {
  --papel: #ffffff;
  --panel: #ffffff;
  --fondo: #ffffff;
  --rejilla: #d9dde1;
  --rejilla-suave: #e6e9ed;
  --cabecera: #eef1f3;
  --tinta: #0d2d45;
  --tinta-2: #44596b;
  --tinta-3: #586b7b;
  --verde: #31a059;
  --verde-texto: #1d6f3d;
  --verde-relleno: #dcf2e3;
  --boli: #c8291f;
  --boli-relleno: #fde4e1;
  --ambar-texto: #835000;
  --ambar-relleno: #fff0bf;
  --morado-texto: #5f3a96;
  --morado-relleno: #ece4f7;
  --gris-texto: #4f5c68;
  --gris-relleno: #e8ecef;
  color: var(--tinta);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scroll-padding-bottom: calc(var(--pestanas) + 1rem);
  color-scheme: dark;
  accent-color: var(--verde);
  caret-color: var(--verde);
  scrollbar-color: var(--rejilla) var(--papel);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.con-pestanas { padding-bottom: var(--pestanas); }

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--verde-relleno); color: var(--tinta); }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* El foco es la celda seleccionada de una hoja de cálculo: borde verde de 2 px */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 1px;
}

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

.saltar {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 60;
  background: var(--tinta); color: var(--papel); padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 0.75rem; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv05' 1; }

/* ---------- Escala tipográfica ---------- */

.titular {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-wrap: balance;
}
.titular--1 { font-size: clamp(2.35rem, 6.6vw, 4.1rem); }
.titular--2 { font-size: clamp(1.95rem, 3.6vw, 3.2rem); }
.titular--3 { font-family: var(--display); font-weight: 750; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.2; }

.entrada {
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.58;
  color: var(--tinta-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.sintetico {
  font-size: 0.82rem;
  color: var(--tinta-3);
  line-height: 1.5;
}

/* ---------- Botones: celdas que se pulsan ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 650 1rem/1 var(--texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.boton svg { width: 16px; height: 16px; flex: none; transition: transform 300ms var(--ease); }
.boton:hover svg { transform: translateX(3px); }
.boton--verde { background: var(--verde-boton); color: #fff; }
.boton--verde:hover { background: var(--verde-boton-hover); }
/* El tirador de la celda seleccionada, abajo a la derecha */
.boton--verde::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--verde-boton);
  border: 1.5px solid var(--papel);
}
.boton--celda { background: var(--papel); color: var(--tinta); border-color: var(--rejilla); }
.boton--celda:hover { border-color: var(--verde-boton); color: var(--verde-texto); }
.boton--peque { min-height: 2.4rem; padding: 0 0.9rem; font-size: 0.92rem; }
.boton--peque::after { width: 6px; height: 6px; right: -3px; bottom: -3px; }
.boton[disabled], .boton[aria-busy='true'] { opacity: 0.7; cursor: progress; }

/* ---------- Barra de arriba ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--rejilla);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.barra__fila { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; }
.barra__marca img { width: 128px; height: auto; }


.barra__archivo {
  font-size: 0.85rem;
  color: var(--tinta-3);
  border-left: 1px solid var(--rejilla);
  padding-left: 1.25rem;
}
.barra__cta { margin-left: auto; }
.barra__nav { margin-left: auto; display: flex; gap: 0.25rem 1.5rem; }
.barra__nav a { font-size: 0.92rem; font-weight: 600; color: var(--tinta-2); text-decoration: none; padding-block: 0.5rem; }
.barra__nav a:hover { color: var(--verde-texto); text-decoration: underline; }
.barra__nav a { white-space: nowrap; }
@media (max-width: 520px) { .barra__nav a:not(:last-child) { display: none; } }
@media (max-width: 720px) { .barra__archivo { display: none; } }

/* ---------- Pestañas de hoja: la navegación ---------- */

.pestanas {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  height: var(--pestanas);
  background: var(--cabecera);
  border-top: 1px solid var(--rejilla);
}
.pestanas__fila {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas__fila::-webkit-scrollbar { display: none; }
.pestanas a {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  border-right: 1px solid var(--rejilla);
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.pestanas a:first-child { border-left: 1px solid var(--rejilla); margin-left: calc(max(var(--gutter), (100% - var(--shell)) / 2 + var(--gutter)) - 1px); }
.pestanas a:hover { background: var(--papel); color: var(--tinta); }
.pestanas a[aria-current] {
  background: var(--papel);
  color: var(--verde-texto);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--verde);
}
.pestanas__estado {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  font-size: 0.82rem;
  color: var(--tinta-3);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .pestanas__estado { display: none; }
  .pestanas a { padding: 0 0.9rem; }
}

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

.seccion { padding-block: calc(var(--fila) * 4); position: relative; }
@media (max-width: 640px) { .seccion { padding-block: calc(var(--fila) * 3); } }
.seccion--raya { border-top: 1px solid var(--rejilla); }
.seccion--mesa { background: var(--cabecera); }
.seccion--franja { padding-top: 0; }

.seccion__cabeza { margin-bottom: calc(var(--fila) * 2); }
.franja .seccion__cabeza { margin-bottom: 0; }
.seccion__cabeza > * { max-width: min(100%, 52rem); }
.seccion__cabeza .entrada { margin-top: var(--fila); }

/* ---------- La hoja grande: todo lo que va después de la portada ----------
   La misma rejilla que la portada, con las columnas desde el borde del
   contenido y la cabecera de columnas inmovilizada bajo la barra. Las
   cabeceras de sección se escriben en franjas de rejilla; los bloques de
   texto la tapan como el texto que desborda una celda, en filas y columnas
   enteras (el script los encaja). */

.pagina {
  --cols: 4;
  --x0: max(var(--gutter), (100cqw - var(--shell)) / 2 + var(--gutter));
  --col: calc((min(100cqw, var(--shell)) - 2 * var(--gutter)) / var(--cols));
  --fondo: var(--papel);
  --linea: var(--rejilla-suave);
  position: relative;
  container-type: inline-size;
  background: var(--fondo);
}
@media (min-width: 1000px) { .pagina { --cols: 10; } }
.pagina > section { position: relative; }

.franja,
.seccion--rejilla {
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: var(--col) var(--fila);
  background-position: var(--x0) 0;
}
.franja { padding-block: calc(var(--fila) * 3) calc(var(--fila) * 2); margin-bottom: calc(var(--fila) * 2); border-bottom: 1px solid var(--linea); }
.franja .titular--2 { line-height: calc(var(--fila) * 2); }
.franja .entrada { line-height: var(--fila); }
.seccion--rejilla .titular--2 { line-height: calc(var(--fila) * 2); }
@media (max-width: 640px) {
  .franja .titular--2, .seccion--rejilla .titular--2 { line-height: calc(var(--fila) * 1.5); }
}

/* El texto tapa la rejilla que pisa (el script lo encaja en filas y columnas) */
.tapa { background: var(--fondo); width: fit-content; max-width: 100%; padding-inline: var(--inset); }
.entrada.tapa { max-width: min(100%, calc(62ch + 2 * var(--inset))); }
.tapa--ancha { width: auto; padding-inline: 0; }


/* Cabecera de columnas inmovilizada bajo la barra */
.columnas-fijas { display: none; }
@media (min-width: 1000px) {
  html { scroll-padding-top: calc(4rem + var(--tira) + 1rem); }
  .columnas-fijas {
    position: sticky;
    top: 4rem;
    z-index: 35;
    display: grid;
    grid-template-columns: var(--x0) repeat(16, var(--col));
    grid-auto-rows: var(--tira);
    height: var(--tira);
    margin-bottom: calc(var(--tira) * -1);
    overflow: hidden;
    background: var(--cabecera);
    border-bottom: 1px solid var(--rejilla);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tinta-3);
    user-select: none;
  }
  .columnas-fijas span { display: grid; place-items: center; border-left: 1px solid var(--rejilla); transition: background-color 120ms, color 120ms; }
  .columnas-fijas span:first-child { border-left: 0; }
}
@media (min-width: 1272px) {
  .columnas-fijas { grid-template-columns: var(--filas) calc(var(--x0) - var(--filas)) repeat(16, var(--col)); }
}
.columnas-fijas span.activa, .lienzo__columnas span.activa { background: color-mix(in srgb, var(--verde) 22%, transparent); color: var(--verde-texto); }
.lienzo__columnas span.activa { color: #bfeccf; }

/* La celda bajo el ratón, como en la hoja de verdad (solo con ratón) */
.pagina__rejilla { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celda-raton {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid var(--verde);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease);
}
.celda-raton.visible { opacity: 0.6; }
.lienzo .celda-raton { border-color: var(--noche-verde); }
.lienzo .celda-raton.visible { opacity: 0.75; }

/* ---------- Portada: la hoja a oscuras ----------
   La portada es la hoja de noche: «lo que no se cierra, no se ve».
   La rejilla está alineada con el texto: la primera línea vertical pasa
   por el borde izquierdo del contenido (--x0) y las columnas reparten
   el ancho del contenido. Las filas son las de una hoja de verdad. */

.portada {
  --fila: 1.75rem;
  --cols: 4;
  --inset: 0.6rem;
  --x0: max(var(--gutter), (100cqw - var(--shell)) / 2 + var(--gutter));
  --col: calc((min(100cqw, var(--shell)) - 2 * var(--gutter)) / var(--cols));
  position: relative;
  container-type: inline-size;
  min-height: calc(100svh - 4rem);
  background: var(--noche);
  color: var(--noche-tinta);
}
@media (min-width: 1000px) { .portada { --cols: 10; } }

.lienzo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-image:
    linear-gradient(var(--noche-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--noche-linea) 1px, transparent 1px);
  background-size: var(--col) var(--fila);
  background-position: var(--x0) var(--tira);
}
/* Cabecera de columnas: esquina, y A, B, C… desde el borde del contenido */
.lienzo__columnas {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--tira);
  display: grid;
  grid-template-columns: var(--x0) repeat(16, var(--col));
  grid-template-rows: var(--tira);
  grid-auto-rows: var(--tira);
  overflow: hidden;
  background: var(--noche-cabecera);
  border-bottom: 1px solid var(--noche-linea-fuerte);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--noche-tinta-3);
}
.lienzo__columnas span { display: grid; place-items: center; border-left: 1px solid var(--noche-linea-fuerte); }
.lienzo__columnas span:first-child { border-left: 0; position: relative; }
/* El triángulo de «seleccionar todo» de la esquina */
.lienzo__columnas span:first-child::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  background: var(--noche-linea-fuerte);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Cabecera de filas: solo cuando cabe a la izquierda del contenido */
.lienzo__filas { display: none; }
@media (min-width: 1272px) {
  .lienzo__columnas { grid-template-columns: var(--filas) calc(var(--x0) - var(--filas)) repeat(16, var(--col)); }
  .lienzo__filas {
    display: block;
    position: absolute;
    left: 0;
    top: var(--tira);
    bottom: 0;
    width: var(--filas);
    background-color: var(--noche-cabecera);
    background-image: linear-gradient(var(--noche-linea-fuerte) 1px, transparent 1px);
    background-size: 100% var(--fila);
    border-right: 1px solid var(--noche-linea-fuerte);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--noche-tinta-3);
    text-align: center;
    white-space: pre;
    line-height: var(--fila);
  }
  .lienzo__filas::before {
    content: '1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40';
  }
}

/* La rejilla del contenido: en móvil todo en columna; en ancho, texto a la izquierda y el cruce a la derecha */
.portada__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'titulo' 'vivo' 'entrada' 'acciones' 'hechos';
  align-items: start;
  padding-top: calc(var(--tira) + var(--fila));
  padding-bottom: calc(var(--fila) * 2);
}
.portada__titulo { grid-area: titulo; font-size: clamp(2.3rem, 10.4vw, 3.4rem); line-height: calc(var(--fila) * 2); }
.portada__entrada { grid-area: entrada; margin-top: var(--fila); font-size: 1.05rem; line-height: var(--fila); color: var(--noche-tinta-2); }
.portada__acciones { grid-area: acciones; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fila); margin-top: var(--fila); }
.portada__acciones .boton { min-height: calc(var(--fila) * 2); }
.portada .hechos { grid-area: hechos; }
.vivo { grid-area: vivo; margin-top: var(--fila); }

/* En móvil el titular va a dos filas por línea, igual que en ancho:
   así la celda activa encaja en la rejilla en cualquier tamaño */
@media (max-width: 420px) { .portada__titulo { font-size: 2.15rem; line-height: calc(var(--fila) * 1.5); } }

@media (min-width: 560px) {
  .portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
}
@media (min-width: 1000px) {
  .portada__rejilla {
    grid-template-columns: calc(var(--col) * 6) calc(var(--col) * 4);
    grid-template-areas: 'titulo vivo' 'entrada vivo' 'acciones vivo' 'hechos vivo' '. vivo';
    grid-template-rows: auto auto auto auto 1fr;
  }
  .portada__titulo { font-size: 3.05rem; }
  .vivo { margin-top: 0; }
}
@media (min-width: 1280px) { .portada__titulo { font-size: 3.3rem; } }

/* El texto tapa la rejilla que pisa, como el texto que desborda una celda;
   el script ensancha cada bloque hasta la siguiente línea de columna */
.portada__titulo > span,
.portada__entrada,
.portada .hechos {
  display: block;
  width: fit-content;
  max-width: 100%;
  background: var(--noche);
  padding-inline: var(--inset);
}
.portada__titulo > span:not(.verde) { color: var(--noche-tinta); }
.portada__titulo .verde { color: var(--noche-verde); }
.portada .hechos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--fila);
  font-size: 0.88rem;
  line-height: var(--fila);
  color: var(--noche-tinta-2);
}
.portada .hechos li { padding-right: 1.4rem; }
.portada .hechos li::before { background: var(--noche-verde); }
.hechos { display: flex; flex-wrap: wrap; gap: 0.4rem 0; }
.hechos li { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.5rem; }
.hechos li::before { content: ''; width: 0.5rem; height: 0.5rem; background: var(--tinta-3); border-radius: 1px; }

/* Botones de la portada, sobre la hoja de noche */
.portada .boton--celda { background: transparent; color: var(--noche-tinta); border-color: var(--noche-linea-fuerte); }
.portada .boton--celda:hover { border-color: var(--noche-verde); color: #fff; }
.portada .boton--verde::after { border-color: var(--noche); }

/* La celda activa: «Más control sobre tus retornables.» */
.celda-activa { position: relative; outline: 2px solid var(--verde); outline-offset: -1px; }
.celda-activa::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--verde);
  border: 1.5px solid var(--papel);
}
.portada .celda-activa { outline-color: var(--noche-verde); transition: outline-color 200ms var(--ease); }
.portada .celda-activa::after { background: var(--noche-verde); border-color: var(--noche); transition: opacity 200ms var(--ease); }
/* Con movimiento, la celda activa se enciende al acabar el cruce */
html.mov .portada:not(.lista) .celda-activa { outline-color: transparent; }
html.mov .portada:not(.lista) .celda-activa::after { opacity: 0; }

/* ---------- El cruce a lo grande: la hoja en vivo de la portada ---------- */

.vivo { position: relative; }
.vivo__hoja {
  position: relative;
  background: var(--noche-panel);
  border: 1px solid var(--noche-linea-fuerte);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}
.vivo__fila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--fila);
  border-bottom: 1px solid var(--noche-linea);
  font-size: 0.82rem;
  color: var(--noche-tinta-2);
}
.vivo__fila > span {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.55rem;
  border-right: 1px solid var(--noche-linea);
  white-space: nowrap;
}
.vivo__fila > span:last-child { border-right: 0; }
.vivo__fila > span.n { justify-content: flex-end; }
.vivo__fila > span:first-child { color: var(--noche-tinta); font-weight: 550; }
.vivo__cabeza { background: var(--noche-cabecera); border-bottom-color: var(--noche-linea-fuerte); }
.vivo__titulo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; height: var(--fila); padding: 0 0.55rem; border-bottom: 1px solid var(--noche-linea-fuerte); font-size: 0.74rem; color: var(--noche-tinta-2); white-space: nowrap; overflow: hidden; }
.vivo__titulo b { color: var(--noche-tinta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.vivo__titulo span { color: var(--noche-tinta); font-weight: 650; }
.vivo__cabeza > span { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--noche-tinta-3) !important; }

i.estado, i.sello { font-style: normal; }
.vivo .estado { height: 1.3rem; padding: 0 0.45rem; font-size: 0.72rem; }
.vivo .estado--cuadra { background: rgba(69, 189, 114, 0.2); color: #85dda4; }
.vivo .estado--revision { background: rgba(245, 182, 56, 0.18); color: #f3c86a; }
.vivo .estado--ambigua { background: rgba(170, 132, 240, 0.2); color: #cdb5f8; }
.vivo .estado--sinenlace { background: rgba(160, 182, 198, 0.16); color: #bccad4; }
.vivo__apartadas > [data-va='revision'] { background: rgba(245, 182, 56, 0.07); }
.vivo__apartadas > [data-va='ambigua'] { background: rgba(170, 132, 240, 0.08); }
.vivo__apartadas > [data-va='sinenlace'] { background: rgba(160, 182, 198, 0.06); }

/* La fila de lo que cuadra: los 94 en una línea, con su sello */
.vivo__listos {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.55rem;
  background: rgba(69, 189, 114, 0.13);
  box-shadow: inset 0 1px 0 rgba(69, 189, 114, 0.45), inset 0 -1px 0 rgba(69, 189, 114, 0.45);
  color: #bfeccf;
}
.vivo__listos b { color: #fff; margin-right: 0.3rem; }
.vivo__listos > span { padding: 0; border: 0; color: #fff; font-weight: 550; }
.vivo__listos .sello { margin-left: auto; padding: 0.1rem 0.4rem; font-size: 0.64rem; color: #85dda4; outline-offset: 1px; }
.vivo__ventana > .vivo__fila.cuadra { background: rgba(69, 189, 114, 0.09); }
.vivo__ventana > .vivo__fila.cuadra > span:first-child { color: var(--noche-tinta-2); font-weight: 450; }
@media (max-width: 999px) { .vivo__ventana > .vivo__fila:nth-child(n + 5):not(.vivo__flujo):not(.vivo__cursor) { display: none; } }

/* La ventana por la que pasan los movimientos y el cursor verde */
.vivo__ventana { position: relative; overflow: hidden; }
.vivo__ventana > .vivo__fila:last-of-type { border-bottom: 0; }
.vivo__flujo { display: none; }
.vivo__cursor { display: none; }
html.mov .vivo__flujo {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--noche-panel);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  transition: opacity 300ms var(--ease);
}
.vivo__tira { will-change: transform; }
.vivo__tira .vivo__fila > span:last-child .estado { opacity: 0; }
.vivo__tira .vivo__fila.cruzada { background: rgba(69, 189, 114, 0.2); }
.vivo__tira .vivo__fila.cruzada > span:last-child .estado { opacity: 1; }
.vivo__tira .vivo__fila.apartada { visibility: hidden; }
.vivo__dato { position: relative; font-weight: inherit; }
.vivo__boli { position: absolute; left: -0.55rem; top: -0.4rem; width: calc(100% + 1.1rem); height: calc(100% + 0.8rem); max-width: none; overflow: visible; pointer-events: none; }
.vivo__boli path { fill: none; stroke: var(--noche-boli); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html.mov .vivo__boli path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 450ms cubic-bezier(0.45, 0, 0.25, 1); }
html.mov .vivo.marcando .vivo__boli path { stroke-dashoffset: 0; }
.vivo__tira .marcada > span.n:nth-child(3) { color: var(--noche-boli); font-weight: 650; }
html.mov .vivo__cursor {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fila);
  border: 2px solid var(--noche-verde);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.vivo__cursor::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--noche-verde); border: 1.5px solid var(--noche-panel); }
.vivo.cruzando .vivo__cursor { opacity: 1; }
.vivo.hecho .vivo__flujo { opacity: 0; }
html.mov .vivo:not(.hecho) .vivo__ventana > .cuadra { visibility: hidden; }
html.mov .vivo.hecho .vivo__ventana > .cuadra { animation: entra-fila 380ms var(--ease) both; }
html.mov .vivo.hecho .vivo__ventana > .cuadra:nth-child(n + 3) { animation-delay: 60ms; }
html.mov .vivo.hecho .vivo__ventana > .cuadra:nth-child(n + 5) { animation-delay: 120ms; }
html.mov .vivo.hecho .vivo__ventana > .cuadra:nth-child(n + 7) { animation-delay: 180ms; }
@keyframes entra-fila { from { opacity: 0; } }

/* Lo que se aparta llega desde el cursor; lo que cuadra cae al final */
html.mov .vivo:not(.hecho) .vivo__apartadas > li:not(.llega) { opacity: 0; }
html.mov .vivo__apartadas > li.llega { animation: sube 300ms var(--ease) both; }
@keyframes sube { from { transform: translateY(calc(var(--desde, 1) * var(--fila))); opacity: 0.3; } }
html.mov .vivo:not(.hecho) .vivo__listos { opacity: 0; }
html.mov .vivo.hecho .vivo__listos { animation: enciende 500ms var(--ease) both; }
@keyframes enciende { from { opacity: 0; background-color: rgba(69, 189, 114, 0.45); } }
html.mov .vivo:not(.sellado) .vivo__listos .sello { opacity: 0; transform: rotate(-5deg) scale(1.8); }
html.mov .vivo__listos .sello { transition: opacity 140ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Barra de estado de la hoja en vivo */
.vivo__estado {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  align-items: center;
  min-height: var(--fila);
  padding: 0.2rem 0.6rem;
  background: var(--noche-cabecera);
  border: 1px solid var(--noche-linea-fuerte);
  border-top: 0;
  font-size: 0.74rem;
  color: var(--noche-tinta-3);
}
.vivo__estado b { color: var(--noche-tinta); font-weight: 650; }
.vivo__aviso { display: block; height: var(--fila); line-height: var(--fila); padding-inline: var(--inset); width: fit-content; background: var(--noche); font-size: 0.74rem; color: var(--noche-tinta-3); }

/* ---------- La hoja de cálculo ---------- */

.hoja {
  position: relative;
  border: 1px solid var(--rejilla);
  background: var(--panel);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
.hoja__barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rejilla);
  font-size: 0.85rem;
  color: var(--tinta-2);
}
.hoja__barra b { color: var(--tinta); font-weight: 600; }
.hoja__desliza { overflow-x: auto; overscroll-behavior-x: contain; }
.hoja__lienzo { position: relative; width: max-content; min-width: 100%; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}
.tabla th, .tabla td {
  border-right: 1px solid var(--rejilla);
  border-bottom: 1px solid var(--rejilla);
  padding: 0 0.8rem;
  height: var(--celda);
  text-align: left;
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
}
.tabla thead th {
  background: var(--cabecera);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.tabla thead tr.letras th { height: 1.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-align: center; color: var(--tinta-3); }
.tabla thead tr.letras + tr th { background: var(--papel); color: var(--tinta); }
.tabla .fila-n {
  width: var(--filas);
  padding: 0;
  text-align: center;
  background: var(--cabecera);
  color: var(--tinta-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
.tabla .n { text-align: right; }
.tabla td:last-child, .tabla th:last-child { border-right: 0; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td { transition: background-color 350ms var(--ease); }

/* Estados: formato condicional, los mismos de la aplicación */
.estado {
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding: 0 0.55rem;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}
.estado--cuadra { background: var(--verde-relleno); color: var(--verde-texto); }
.estado--revision { background: var(--ambar-relleno); color: var(--ambar-texto); }
.estado--ambigua { background: var(--morado-relleno); color: var(--morado-texto); }
.estado--sinenlace { background: var(--gris-relleno); color: var(--gris-texto); }

/* En móvil la hoja enseña las columnas que explican el problema
   y deja quietas las dos primeras, como un panel inmovilizado */
@media (max-width: 640px) {
  .tabla .solo-ancho { display: none; }
  .tabla th, .tabla td { padding: 0 0.55rem; }
  .congelada .fila-n { position: sticky; left: 0; z-index: 2; width: 2rem; }
  .congelada .fija { position: sticky; left: 2rem; z-index: 2; background: var(--papel); box-shadow: 1px 0 0 var(--rejilla); }
  .congelada thead .fija { background: var(--cabecera); }
  .congelada thead tr.letras + tr .fija { background: var(--papel); }
}

/* ---------- Bolígrafo rojo: rodeos, subrayados y llamadas ---------- */

.marca { position: relative; display: inline-block; color: var(--boli); font-weight: 650; }
.marca svg {
  position: absolute;
  left: -0.55rem;
  top: -0.45rem;
  width: calc(100% + 1.1rem);
  height: calc(100% + 0.9rem);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.marca path { fill: none; stroke: var(--boli); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.llamada {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.55rem;
  border: 1.6px solid var(--boli);
  border-radius: 50%;
  color: var(--boli);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* Con movimiento, el bolígrafo se dibuja cuando el cursor de quien revisa llega a la celda */
html.mov .marca path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms cubic-bezier(0.45, 0, 0.25, 1); }
html.mov .dibujada .marca path { stroke-dashoffset: 0; }
html.mov .hoja-problema .llamada { transition: opacity 250ms var(--ease), transform 320ms var(--ease); }
html.mov .hoja-problema td:not(.dibujada) .llamada { opacity: 0; transform: scale(0.5); }
@keyframes llamada { from { opacity: 0; transform: scale(0.5); } }

/* El triángulo rojo de «comentario» en la esquina de cada celda marcada */
.con-nota::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--boli) transparent transparent;
  transition: opacity 250ms var(--ease);
}
html.mov .hoja-problema td.con-nota:not(.dibujada)::after { opacity: 0; }

/* El cursor de quien revisa a mano: gris, despacio, fila a fila */
.cursor--mano { border-color: var(--tinta-3); transition: transform 300ms var(--ease), opacity 200ms var(--ease); }
.cursor--mano::after { background: var(--tinta-3); }

/* ---------- El problema ---------- */

.desliza-pista { display: none; }
@media (max-width: 640px) {
  .desliza-pista { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--tinta-3); }
}

/* Notas del margen: lo que dice cada marca */
.notas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rejilla);
}
.nota {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: start;
  padding: 1.1rem 1.25rem 1.25rem 0;
  border-bottom: 1px solid var(--rejilla);
}
.nota:not(:nth-child(3n + 1)) { padding-left: 1.25rem; border-left: 1px solid var(--rejilla); }
.nota .llamada { margin: 0.15rem 0 0; }
.nota { background: var(--fondo); }
html.mov .nota.encendida .llamada { animation: pulso 700ms var(--ease); }
@keyframes pulso { 30% { transform: scale(1.35); background: var(--boli-relleno); } }
.nota p { color: var(--tinta-2); font-size: 0.97rem; line-height: 1.55; }
.nota b { color: var(--tinta); font-weight: 650; }
@media (max-width: 980px) {
  .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nota:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .nota:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rejilla); }
}
@media (max-width: 640px) {
  .notas { grid-template-columns: minmax(0, 1fr); }
  .nota:nth-child(even) { padding-left: 0; border-left: 0; }
}
.problema__pie { margin-top: 1rem; }

/* ---------- El cuadre: la firma de la página ---------- */

.cuadre { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--fila) * 2); align-items: start; }
@media (min-width: 1020px) { .cuadre { grid-template-columns: calc(var(--col) * 4) calc(var(--col) * 6); gap: 0; } }
.cuadre .entrada { margin-top: var(--fila); }

.cuadre__pasos { display: grid; margin-top: var(--fila); border-top: 1px solid var(--rejilla); }
.cuadre__pasos li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rejilla);
  color: var(--tinta);
  transition: color 300ms var(--ease);
}
.cuadre__pasos li svg { width: 18px; height: 18px; margin-top: 0.2rem; color: var(--verde-texto); transition: color 300ms var(--ease); }
html.mov .cuadre__pasos li:not(.hecho) { color: var(--tinta-3); }
html.mov .cuadre__pasos li:not(.hecho) svg { color: var(--rejilla); }
.afirmacion { margin-top: var(--fila); font-family: var(--display); font-weight: 750; font-size: 1.22rem; line-height: var(--fila); letter-spacing: -0.015em; }

/* Las filas se rellenan con el color de su estado. Sin movimiento, ya
   están rellenas; con movimiento, cuando el cursor pasa por ellas. */
.hoja-cuadre tr[data-va='cuadra'] td:not(.fila-n) { background-color: var(--verde-relleno); }
.hoja-cuadre tr[data-va='revision'] td:not(.fila-n) { background-color: var(--ambar-relleno); }
.hoja-cuadre tr[data-va='ambigua'] td:not(.fila-n) { background-color: var(--morado-relleno); }
.hoja-cuadre tr[data-va='sinenlace'] td:not(.fila-n) { background-color: var(--gris-relleno); }
html.mov .hoja-cuadre tr[data-va]:not(.cruzada) td:not(.fila-n) { background-color: var(--papel); }
html.mov .hoja-cuadre tr[data-va] .estado { transition: opacity 250ms var(--ease), transform 350ms var(--ease); }
html.mov .hoja-cuadre tr[data-va]:not(.cruzada) .estado { opacity: 0; transform: translateX(-6px); }
html.mov .hoja-cuadre .congelada .fija { transition: background-color 350ms var(--ease); }

/* El cursor de selección verde que recorre las filas */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: var(--celda);
  border: 2px solid var(--verde);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: transform 220ms var(--ease), opacity 200ms var(--ease);
}
.cursor::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--verde);
  border: 1.5px solid var(--papel);
}
.cursor.visible { opacity: 1; }

/* Los dos montones */
.montones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rejilla); }
.monton { position: relative; padding: 1.1rem 1.1rem 1.4rem; }
.monton + .monton { border-left: 1px solid var(--rejilla); }
.monton p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--tinta-2); line-height: 1.5; }
.monton ul { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.monton li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.monton li .alb { font-weight: 650; min-width: 3.2rem; }
html.mov .monton li { transition: opacity 300ms var(--ease), transform 400ms var(--ease); }
html.mov .monton li:not(.visto) { opacity: 0; transform: translateY(-6px); }
@media (max-width: 640px) {
  .montones { grid-template-columns: minmax(0, 1fr); }
  .monton + .monton { border-left: 0; border-top: 1px solid var(--rejilla); }
}

/* Las «hormigas» de lo que se va a confirmar de golpe, justo antes del sello */
.monton.hormigas::before {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--verde-texto) 50%, transparent 0) repeat-x 0 0 / 10px 2px,
    linear-gradient(90deg, var(--verde-texto) 50%, transparent 0) repeat-x 0 100% / 10px 2px,
    linear-gradient(0deg, var(--verde-texto) 50%, transparent 0) repeat-y 0 0 / 2px 10px,
    linear-gradient(0deg, var(--verde-texto) 50%, transparent 0) repeat-y 100% 0 / 2px 10px;
  animation: hormigas 500ms linear infinite;
}
@keyframes hormigas { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }

/* Sello de goma */
.sello {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 2.5px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 850;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
  transform: rotate(-5deg);
}
.albaran .sello { mix-blend-mode: multiply; }
.sello--verde { color: var(--verde-texto); }
.sello--ambar { color: var(--ambar-texto); }
.monton .sello { position: absolute; right: 1.1rem; bottom: 1.2rem; opacity: 0.9; }
html.mov .monton .sello { transition: opacity 140ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
html.mov .hoja-cuadre:not(.cuadrada) .monton .sello { opacity: 0; transform: rotate(-5deg) scale(1.7); }
html.mov .hoja-cuadre .monton + .monton .sello { transition-delay: 140ms; }

/* Barra de estado de la hoja */
.hoja__estado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--rejilla);
  background: var(--cabecera);
  font-size: 0.82rem;
  color: var(--tinta-2);
}
.hoja__estado b { color: var(--tinta); font-weight: 650; }

.figura__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 0.9rem; }

/* ---------- Cómo funciona: los cinco pasos, que avanzan al bajar ---------- */

.pasos { display: grid; gap: calc(var(--fila) * 2); }
.paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fila); }
.paso__texto { position: relative; align-self: start; padding: 1rem 1.1rem 1.15rem; background: var(--fondo); border: 1px solid var(--rejilla); transition: opacity 300ms var(--ease), outline-color 200ms var(--ease); outline: 2px solid transparent; outline-offset: -1px; }
.paso__n { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.paso__t { margin-top: 0.3rem; font-family: var(--display); font-weight: 750; font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.2; }
.paso__d { margin-top: 0.55rem; font-size: 0.98rem; line-height: 1.55; color: var(--tinta-2); max-width: 40ch; }
.panel { transition: opacity 300ms var(--ease); }

/* El paso elegido es la celda seleccionada: contorno verde con su tirador */
.paso.activo .paso__texto { outline-color: var(--verde); }
.paso.activo .paso__texto::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--verde); border: 1.5px solid var(--papel); }
.paso.activo .paso__n { color: var(--verde-texto); }


@media (min-width: 980px) {
  .pasos { gap: 0; }
  .paso {
    grid-template-columns: calc(var(--col) * 3) var(--col) calc(var(--col) * 6);
    gap: 0;
    min-height: 80vh;
    align-items: start;
  }
  .paso__texto { grid-column: 1; position: sticky; top: max(7rem, calc(50vh - 13rem)); }
  .panel { grid-column: 3; position: sticky; top: max(7rem, calc(50vh - 13rem)); }
  .paso:last-child { min-height: 0; padding-bottom: var(--fila); }
}

/* Lo que pasa en cada pantalla cuando se llega a su paso (solo con movimiento) */
html.mov .paso:not(.visto) .ficheros li,
html.mov .paso:not(.visto) .panel tbody tr,
html.mov .paso:not(.visto) .kv > div,
html.mov .paso:not(.visto) .apunte,
html.mov .paso:not(.visto) .registro li { opacity: 0; }
html.mov .paso.visto .ficheros li { animation: cae 520ms var(--ease) both; animation-delay: calc(var(--k, 0) * 300ms + 150ms); }
html.mov .paso.visto .panel tbody tr { animation: entra 380ms var(--ease) both; animation-delay: calc(var(--k, 0) * 140ms + 120ms); }
html.mov .paso.visto .panel tbody .estado,
html.mov .paso.visto .panel tbody .marca-ok { animation: chip 320ms var(--ease) both; animation-delay: calc(var(--k, 0) * 140ms + 380ms); }
html.mov .paso.visto .kv > div { animation: entra 320ms var(--ease) both; animation-delay: calc(var(--k, 0) * 90ms + 100ms); }
html.mov .paso.visto .apunte { animation: entra 420ms var(--ease) both; animation-delay: calc(var(--k, 0) * 350ms + 600ms); }
html.mov .paso.visto .registro li { animation: entra 400ms var(--ease) both; animation-delay: calc(var(--k, 0) * 240ms + 150ms); }
html.mov .paso.visto .kv dd.mal { animation: aviso 900ms var(--ease) 600ms both; }
:is(.ficheros, .panel tbody, .kv, .registro) > :nth-child(2) { --k: 1; }
:is(.ficheros, .panel tbody, .kv, .registro) > :nth-child(3) { --k: 2; }
:is(.ficheros, .panel tbody, .kv, .registro) > :nth-child(4) { --k: 3; }
:is(.ficheros, .panel tbody, .kv, .registro) > :nth-child(5) { --k: 4; }
.apunte + .apunte { --k: 1; }
@keyframes cae { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes chip { from { opacity: 0; transform: scale(0.6); } }
@keyframes aviso { 30% { background: var(--boli-relleno); } }

/* La ventana de la aplicación */
.app { border: 1px solid var(--rejilla); background: var(--papel); box-shadow: 0 24px 48px -30px rgba(13, 45, 69, 0.4); }
.app__cromo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  background: var(--tinta);
  color: #d9e5ee;
  font-size: 0.85rem;
}
.app__cromo img { height: 18px; width: auto; }
.app__cromo span { margin-left: auto; }
.app__filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rejilla); }
.filtro { padding: 0.25rem 0.6rem; border: 1px solid var(--rejilla); border-radius: 2px; font-size: 0.8rem; color: var(--tinta-2); }
.filtro--activo { border-color: var(--verde); color: var(--verde-texto); background: var(--verde-relleno); font-weight: 600; }
.app__cuerpo { padding: 1rem 0.9rem; }
.app__cuerpo--plano { padding: 0; }
.app__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--rejilla);
  font-size: 0.82rem;
  color: var(--tinta-2);
}
.falso-boton { padding: 0.4rem 0.75rem; background: var(--verde-boton); color: #fff; border-radius: 2px; font-weight: 650; font-size: 0.82rem; }
.falso-boton--quieto { background: var(--papel); color: var(--tinta); border: 1px solid var(--rejilla); }
.soltar { display: grid; gap: 0.3rem; padding: 1.5rem; border: 1.5px dashed var(--rejilla); text-align: center; font-size: 0.88rem; color: var(--tinta-2); }
.soltar strong { color: var(--tinta); }
.ficheros { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.ficheros li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.5rem 0.65rem; border: 1px solid var(--rejilla); font-size: 0.85rem; overflow-wrap: anywhere; }
.caso__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.caso__ref { font-weight: 650; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin-top: 0.9rem; border-top: 1px solid var(--rejilla); border-left: 1px solid var(--rejilla); }
.kv div { padding: 0.5rem 0.65rem; border-right: 1px solid var(--rejilla); border-bottom: 1px solid var(--rejilla); }
.kv dt { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-3); }
.kv dd { font-weight: 650; }
.kv dd.mal { color: var(--boli); }
.apunte { margin-top: 0.8rem; font-size: 0.88rem; color: var(--tinta-2); }
.apunte b { color: var(--tinta); }
.registro { display: grid; }
.registro li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rejilla); font-size: 0.88rem; }
.registro li:last-child { border-bottom: 0; }
.registro time { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.marca-ok { width: 16px; height: 16px; color: var(--verde-texto); }

/* ---------- El albarán: papel de copia amarilla ---------- */

.albaran {
  position: relative;
  background: var(--copia);
  border: 1px solid var(--copia-linea);
  padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 1px 0 var(--copia-linea), 0 28px 50px -34px rgba(83, 64, 0, 0.45);
  color: var(--tinta);
}
/* Troquel del talonario, arriba */
.albaran::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 7px;
  background: radial-gradient(circle at 7px 0, var(--fondo-troquel, var(--papel)) 4px, transparent 4.5px) repeat-x;
  background-size: 14px 7px;
}
.albaran__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; padding-bottom: 0.9rem; border-bottom: 1.5px solid var(--tinta); }
.albaran__tipo { font-family: var(--display); font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; }
.albaran__para { font-size: 0.85rem; font-weight: 600; color: var(--copia-tinta); }
.albaran__numero { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--boli); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.albaran__datos { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--copia-linea); }
@media (max-width: 640px) { .albaran__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.albaran__datos div { padding: 0.7rem 0.75rem 0.7rem 0; }
.albaran__datos dt { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--copia-tinta); }
.albaran__datos dd { font-weight: 650; font-variant-numeric: tabular-nums; }

.rastro { margin-top: 0.4rem; display: grid; }
.rastro li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 0.8rem 0; border-bottom: 1px dashed var(--copia-linea); }
.rastro li:last-child { border-bottom: 0; }
.rastro time { font-size: 0.85rem; font-weight: 600; color: var(--copia-tinta); font-variant-numeric: tabular-nums; padding-top: 0.1rem; }
.rastro h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-family: var(--display); font-weight: 750; font-size: 1.02rem; letter-spacing: -0.01em; }
.rastro p { font-size: 0.93rem; color: var(--copia-texto); }
.albaran__sello { display: block; width: fit-content; margin: 1rem 0 0 auto; font-size: 1.05rem; transition: opacity 140ms ease-out, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
html.mov .albaran:not(.cerrado) .albaran__sello { opacity: 0; transform: rotate(-5deg) scale(1.7); }
html.mov .rastro li { transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
html.mov .rastro li:not(.escrito) { opacity: 0; transform: translateY(12px); }
/* La línea del tiempo avanza con el scroll */
@media (min-width: 641px) {
  .rastro { position: relative; }
  .rastro::before, .rastro::after { content: ''; position: absolute; left: 8.45rem; top: 0.9rem; bottom: 0.9rem; width: 2px; background: var(--copia-linea); }
  .rastro::after { background: var(--tinta); transform-origin: top; transform: scaleY(var(--avance, 1)); }
  .rastro li { position: relative; }
  .rastro li::before { content: ''; position: absolute; left: calc(8.45rem - 4px); top: 1.15rem; width: 10px; height: 10px; border-radius: 50%; background: var(--copia); border: 2px solid var(--tinta); z-index: 1; }
  .rastro li { grid-template-columns: 8rem minmax(0, 1fr); column-gap: 2rem; }
}
@media (max-width: 640px) {
  .rastro li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .albaran__sello { margin-left: 0; }
}
.seccion--mesa .albaran { --fondo-troquel: var(--noche-cabecera); }
.traza { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.traza__texto { position: sticky; top: 6rem; }
.traza__texto .entrada { margin-top: 1.1rem; }
.traza__texto .sintetico { margin-top: 1.25rem; }
@media (max-width: 980px) { .traza { grid-template-columns: minmax(0, 1fr); } .traza__texto { position: static; } }

/* ---------- Lo que cambia: cada afirmación y dónde se ve ---------- */

.tabla--cambios th, .tabla--cambios td { white-space: normal; height: auto; padding: 0.95rem 1rem; vertical-align: top; }
.tabla--cambios thead th { padding-block: 0.6rem; }
.tabla--cambios td:first-child { font-family: var(--display); font-weight: 750; font-size: 1.05rem; width: 10rem; }
.tabla--cambios td:nth-child(2) { color: var(--tinta-2); }
.tabla--cambios em { font-style: normal; font-weight: 650; color: var(--tinta); }
.tabla--cambios td:last-child { width: 13rem; }
.tabla--cambios a { color: var(--verde-texto); font-weight: 600; font-size: 0.92rem; }
@media (max-width: 640px) {
  .tabla--cambios, .tabla--cambios tbody, .tabla--cambios tr, .tabla--cambios td { display: block; width: auto !important; }
  .tabla--cambios thead { display: none; }
  .tabla--cambios tr { border-bottom: 1px solid var(--rejilla); padding: 0.7rem 0; }
  .tabla--cambios tr:last-child { border-bottom: 0; }
  .tabla--cambios td { border: 0; padding: 0.15rem 1rem; }
}

/* ---------- Para quién: un formulario con casillas ---------- */

.encaje { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.cuadre .entrada, .franja .entrada { line-height: var(--fila); }
@media (max-width: 860px) { .encaje { grid-template-columns: minmax(0, 1fr); } }
.encaje h3 { padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--tinta); }
.encaje ul { display: grid; }
.encaje li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rejilla); color: var(--tinta-2); }
.encaje li b { color: var(--tinta); font-weight: 650; }
.casilla { width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; }
.casilla rect { fill: var(--papel); stroke: var(--tinta-3); stroke-width: 1.3; }
.casilla path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.casilla--si rect { fill: var(--verde-relleno); stroke: var(--verde-texto); }
.casilla--si path { stroke: var(--verde-texto); }
.casilla--no path { stroke: var(--tinta-3); }
.encaje > div { background: var(--fondo); }
.casilla path { stroke-dasharray: 20; stroke-dashoffset: 0; }
html.mov .encaje .casilla path { transition: stroke-dashoffset 380ms var(--ease) calc(var(--k, 0) * 150ms + 150ms); }
html.mov .encaje .casilla rect { transition: fill 300ms var(--ease) calc(var(--k, 0) * 150ms + 150ms), stroke 300ms var(--ease) calc(var(--k, 0) * 150ms + 150ms); }
html.mov .encaje:not(.visto) .casilla path { stroke-dashoffset: 20; }
html.mov .encaje:not(.visto) .casilla--si rect { fill: var(--papel); stroke: var(--tinta-3); }
.encaje li:nth-child(2) { --k: 1; }
.encaje li:nth-child(3) { --k: 2; }
.encaje li:nth-child(4) { --k: 3; }
.encaje li:nth-child(5) { --k: 4; }
.encaje > div + div li { --k: 5; }
.encaje > div + div li:nth-child(2) { --k: 6; }
.encaje > div + div li:nth-child(3) { --k: 7; }

/* ---------- Principios: las reglas que dan los colores de estado ---------- */

#principios { padding-block: calc(var(--fila) * 3); }
.tabla--reglas th, .tabla--reglas td { white-space: normal; height: auto; padding: 1rem 1.1rem; vertical-align: top; }
.tabla--reglas thead th { padding-block: 0.6rem; }
.tabla--reglas tbody th { width: 34%; font-family: var(--display); font-weight: 750; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.015em; text-transform: none; color: var(--tinta); background: var(--papel); }
.tabla--reglas td:nth-child(2) { width: 26%; }
.tabla--reglas td:last-child { color: var(--tinta-2); font-size: 0.97rem; line-height: 1.55; }
.formatos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.adjunto { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.55rem; padding: 0 0.5rem; border: 1px solid var(--rejilla); border-radius: 2px; font-size: 0.8rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.adjunto svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
html.mov .reglas .formatos > * { transition: opacity 260ms var(--ease), transform 360ms var(--ease); transition-delay: calc(var(--i, 0) * 380ms + var(--j, 0) * 90ms + 150ms); }
html.mov .reglas:not(.visto) .formatos > * { opacity: 0; transform: scale(0.65); }
.formatos > :nth-child(2) { --j: 1; }
.formatos > :nth-child(3) { --j: 2; }
.formatos > :nth-child(4) { --j: 3; }
@media (max-width: 760px) {
  .tabla--reglas, .tabla--reglas tbody, .tabla--reglas tr, .tabla--reglas th, .tabla--reglas td { display: block; width: auto !important; }
  .tabla--reglas thead { display: none; }
  .tabla--reglas tr { border-bottom: 1px solid var(--rejilla); padding: 0.6rem 0 0.9rem; }
  .tabla--reglas tr:last-child { border-bottom: 0; }
  .tabla--reglas th, .tabla--reglas td { border: 0; padding: 0.3rem 1rem; }
}

/* ---------- Cierre: una hoja vacía para sus movimientos ---------- */

.cierre { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--fila) * 2); align-items: end; }
@media (min-width: 940px) { .cierre { grid-template-columns: calc(var(--col) * 6) calc(var(--col) * 4); gap: 0; } }
.cierre .entrada { margin-top: var(--fila); line-height: var(--fila); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--fila); }
.cierre__acciones .boton { min-height: calc(var(--fila) * 2); }
@media (max-width: 559px) { .cierre__acciones { display: grid; grid-template-columns: minmax(0, 1fr); } }
.quien { margin-top: var(--fila); padding-top: 0.6rem; border-top: 1px solid var(--rejilla); font-size: 0.95rem; color: var(--tinta-2); }
.quien b { color: var(--tinta); }
.lado { border-left: 1px solid var(--rejilla); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
.lado dl { display: grid; gap: 1.1rem; }
.lado dt { font-family: var(--display); font-weight: 750; font-size: 0.98rem; }
.lado dd { font-size: 0.92rem; color: var(--tinta-2); line-height: 1.5; margin-top: 0.15rem; }
@media (max-width: 940px) { .lado { border-left: 0; border-top: 1px solid var(--rejilla); padding-left: 0; padding-top: 1.5rem; } }

.vacia { margin-top: calc(var(--fila) * 2); }
.vacia .tabla { table-layout: fixed; }
.vacia .tabla .seleccion { box-shadow: inset 0 0 0 2px var(--verde); }
.vacia .tabla .seleccion::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--verde);
  border: 1.5px solid var(--papel);
  z-index: 1;
}
.vacia .tabla .seleccion span { display: inline-block; width: 1px; height: 1.1em; vertical-align: -0.2em; background: transparent; }
html.mov .vacia.en-vista .tabla .seleccion span { animation: parpadeo 1s steps(1) 3; }
@keyframes parpadeo { 0%, 49% { background: var(--tinta); } 50%, 100% { background: transparent; } }

/* ---------- Pie: la barra de estado ---------- */

.pie { border-top: 1px solid var(--rejilla); background: var(--cabecera); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.75rem; }
.pie img { width: 104px; height: auto; }
.pie p { font-size: 0.85rem; color: var(--tinta-2); }
.pie__enlaces { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.88rem; }
.pie__enlaces a { color: var(--tinta-2); text-decoration: none; padding-block: 0.2rem; }
.pie__enlaces a:hover { color: var(--verde-texto); text-decoration: underline; }
@media (max-width: 640px) { .pie__enlaces { margin-left: 0; width: 100%; } }

/* ---------- Formulario de demo: la hoja de solicitud ---------- */

.solicitud { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .solicitud { grid-template-columns: minmax(0, 1fr); } }
.solicitud .albaran { --fondo-troquel: var(--noche-cabecera); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.1rem; border-top: 1px solid var(--copia-linea); border-left: 1px solid var(--copia-linea); }
.campo { display: grid; align-content: start; gap: 0.3rem; padding: 0.7rem 0.85rem 0.75rem; border-right: 1px solid var(--copia-linea); border-bottom: 1px solid var(--copia-linea); transition: background-color 200ms var(--ease); }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--copia-tinta); }
.campo label span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 2.5rem;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--copia-tinta) 45%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0.3rem 0;
  font-size: 1rem;
  font-weight: 550;
  color: var(--tinta);
}
.campo select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--copia-tinta) 50%), linear-gradient(135deg, var(--copia-tinta) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--verde-boton); }
.campo:focus-within { background: color-mix(in srgb, var(--papel) 60%, transparent); box-shadow: inset 0 0 0 2px var(--verde); }
.campo ::placeholder { color: #75652a; opacity: 1; }
.campo.con-error { background: var(--boli-relleno); }
.campo.con-error input { border-bottom-color: var(--boli); }
.campo__error { font-size: 0.84rem; font-weight: 600; color: var(--boli); }
.campo__error:empty { display: none; }
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .campos { grid-template-columns: minmax(0, 1fr); } }

.formulario__datos { margin-top: 1.25rem; font-size: 0.86rem; line-height: 1.55; color: var(--copia-texto); }
.formulario__datos b { color: var(--tinta); }
.formulario__datos a { color: var(--tinta); }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.4rem; }
.formulario__pie p { font-size: 0.86rem; color: var(--copia-texto); max-width: 30rem; }
.formulario__pie a { color: var(--tinta); }

.enviado { display: none; margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1.5px solid var(--verde-texto); background: var(--verde-relleno); }
.enviado.visible { display: block; }
.enviado b { display: block; font-family: var(--display); font-weight: 750; margin-bottom: 0.3rem; }
.enviado p { color: var(--tinta-2); font-size: 0.95rem; }
.enviado a { color: var(--tinta); }
.enviado.con-error { border-color: var(--boli); background: var(--boli-relleno); }
.enviado .boton { margin-top: 0.8rem; }

.aparte h2 { margin-bottom: 1rem; }
.aparte dl { display: grid; gap: 1.1rem; }
.aparte dt { display: flex; align-items: flex-start; gap: 0.5rem; font-family: var(--display); font-weight: 750; font-size: 0.98rem; }
.aparte dt svg { width: 16px; height: 16px; margin-top: 0.2rem; color: var(--verde-texto); flex: none; }
.aparte dd { margin: 0.2rem 0 0 1.5rem; font-size: 0.92rem; color: var(--tinta-2); }
.aparte .sintetico { margin-top: 1.1rem; }
.aparte + .aparte { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rejilla); }

/* ---------- Legales y 404 ---------- */

.legal > * { max-width: 46rem; }
.legal .entrada { margin-top: 1rem; margin-bottom: 2.5rem; }
.legal h2 { margin: 2.25rem 0 0.6rem; }
.legal p { color: var(--tinta-2); max-width: 68ch; text-wrap: pretty; }
.legal a { color: var(--verde-texto); }
.legal h3 { margin: 1.6rem 0 0.5rem; font-family: var(--display); font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; }
.legal h2 + h3 { margin-top: 0.4rem; }
.legal ul { color: var(--tinta-2); max-width: 68ch; padding-left: 1.2rem; list-style: disc; }
.legal li { margin-block: 0.45rem; text-wrap: pretty; }
.legal li::marker { color: var(--tinta-3); }
.legal p + p, .legal ul + p, .legal dl + p, .legal p + ul { margin-top: 0.75rem; }
.legal h3 + .legal__datos { margin-top: 0.25rem; }
.legal__datos { display: grid; border-top: 1px solid var(--rejilla); }
.legal__datos > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--rejilla); font-size: 0.95rem; }
.legal__datos dt { font-weight: 650; }
.legal__datos dd { color: var(--tinta-2); overflow-wrap: anywhere; }
.legal__fecha { margin-top: 3rem; font-size: 0.82rem; color: var(--tinta-3) !important; }
@media (max-width: 620px) { .legal__datos > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

.no-existe { min-height: 60vh; display: grid; align-content: center; }
.no-existe .hoja { max-width: 30rem; margin-bottom: 2.25rem; }
.no-existe .tabla { table-layout: fixed; }
.no-existe .formula { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--rejilla); font-size: 0.85rem; color: var(--tinta-2); }
.no-existe .formula b { min-width: 2.5rem; padding-right: 0.75rem; border-right: 1px solid var(--rejilla); font-weight: 600; color: var(--tinta); }
.no-existe .error-ref { color: var(--boli); font-weight: 700; box-shadow: inset 0 0 0 2px var(--verde); }
.no-existe .acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Huecos que hay que rellenar antes de publicar: se ven a propósito */
.hueco { background: var(--ambar-relleno); color: var(--ambar-texto); outline: 1px dashed var(--ambar-texto); outline-offset: 1px; padding: 0 0.3em; font-weight: 650; }

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