@import url("../vendor/fuentes/fuentes.css");

/* ============================================================
   memoria.laartistica.es
   Recopilación de fotos y documentos · SM "La Artística" de Buñol
   ============================================================ */

:root {
  /* Papel y tinta — tono de programa de mano impreso, no crema publicitario */
  --papel:        #FBFAF7;
  --papel-hondo:  #F2EFE8;
  --superficie:   #FFFFFF;
  --linea:        #DED8CC;
  --linea-suave:  #EAE5DA;
  --tinta:        #1B1A18;
  --tinta-media:  #55504A;
  --tinta-tenue:  #6B6459;   /* ≥4,5:1 sobre el papel — el público es mayor */

  /* Color por campaña — codifica a cuál de las dos aporta cada persona */
  --manton:       #8E1538;
  --manton-claro: #F6E7EB;
  --teatro:       #234B6E;
  --teatro-claro: #E4EBF2;

  /* Un color por sección (JSP, 01-11: «muy parco en colores»): ocre para «No lo sé»
     y las otras vías, verde azulado para las fotos, morado para quién lo aporta */
  --duda:         #B4541A;
  --duda-claro:   #F8E6DA;
  --fotos:        #1F6B66;
  --fotos-claro:  #DCEEEC;
  --quien:        #5A4A9C;
  --quien-claro:  #E7E3F5;

  /* Acento activo: cambia con la campaña elegida */
  --banda:        #6B655C;   /* color fijo de la cinta de la cabecera */
  --acento:       #6B655C;
  --acento-tenue: #EFECE5;
  --acento-texto: #FFFFFF;

  /* Señales reservadas */
  --exito:        #256B4E;
  --exito-tenue:  #E3F0E9;
  --aviso:        #8A5200;
  --aviso-tenue:  #FBF0DC;
  --error:        #B3261E;
  --error-tenue:  #FBE9E7;

  --r-boton:  3px;
  --r-campo:  3px;
  --r-tarjeta: 8px;

  --sombra: 0 1px 2px rgba(27, 26, 24, .05), 0 8px 24px -12px rgba(27, 26, 24, .18);
  --ancho: 44rem;
}

/* Oscuro: grises neutros de editor (fondo #1E1E1E, paneles #252526, bordes #3E3E42),
   sin el tono marrón que tenía antes. Los dos bloques de abajo deben ir IGUALES:
   uno para la preferencia del sistema y otro para el botón de la cabecera. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:        #1E1E1E;
    --papel-hondo:  #252526;
    --superficie:   #2A2A2B;
    --linea:        #3E3E42;
    --linea-suave:  #333337;
    --tinta:        #E8E8E8;
    --tinta-media:  #BABABA;
    --tinta-tenue:  #949494;
    /* Rellenos «elegido» con un 34 % del color sobre la superficie: los tenues de
       antes (#33232A, #212A34, #303033) no se distinguían de la tarjeta (30-10-2026) */
    --manton:       #E27A95;
    --manton-claro: #68454F;
    --teatro:       #83AED6;
    --teatro-claro: #485765;
    --duda:         #F0A070;
    --duda-claro:   #6E4A3A;
    --fotos:        #63C2B8;
    --fotos-claro:  #3D5E5B;
    --quien:        #AFA3E4;
    --quien-claro:  #57536A;
    --banda:        #9D9D9D;
    --acento:       #A8A8A8;
    --acento-tenue: #555556;
    --acento-texto: #1E1E1E;
    --exito:        #6FC59B;
    --exito-tenue:  #1C2A23;
    --aviso:        #E0B15E;
    --aviso-tenue:  #2B2419;
    --error:        #F87171;
    --error-tenue:  #2E1C1C;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papel:        #1E1E1E;
  --papel-hondo:  #252526;
  --superficie:   #2A2A2B;
  --linea:        #3E3E42;
  --linea-suave:  #333337;
  --tinta:        #E8E8E8;
  --tinta-media:  #BABABA;
  --tinta-tenue:  #949494;
  --manton:       #E27A95;
  --manton-claro: #68454F;
  --teatro:       #83AED6;
  --teatro-claro: #485765;
  --duda:         #F0A070;
  --duda-claro:   #6E4A3A;
  --fotos:        #63C2B8;
  --fotos-claro:  #3D5E5B;
  --quien:        #AFA3E4;
  --quien-claro:  #57536A;
  --banda:        #9D9D9D;
  --acento:       #A8A8A8;
  --acento-tenue: #555556;
  --acento-texto: #1E1E1E;
  --exito:        #6FC59B;
  --exito-tenue:  #1C2A23;
  --aviso:        #E0B15E;
  --aviso-tenue:  #2B2419;
  --error:        #F87171;
  --error-tenue:  #2E1C1C;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Campaña elegida → el acento de toda la página */
:root[data-campana="manton"] {
  --acento: var(--manton);
  --acento-tenue: var(--manton-claro);
  --acento-texto: #FFFFFF;
}
:root[data-campana="teatro"] {
  --acento: var(--teatro);
  --acento-tenue: var(--teatro-claro);
  --acento-texto: #FFFFFF;
}
:root[data-campana="duda"] {
  --acento: var(--duda);
  --acento-tenue: var(--duda-claro);
  --acento-texto: #FFFFFF;
}
:root[data-theme="dark"][data-campana="manton"],
:root[data-theme="dark"][data-campana="teatro"],
:root[data-theme="dark"][data-campana="duda"] { --acento-texto: #1E1E1E; }

/* Cada paso con su color: número, lo elegido, zona de archivos, campos y casilla
   toman el acento de su sección en vez del de la campaña */
#paso-archivos { --acento: var(--fotos); --acento-tenue: var(--fotos-claro); }
#paso-persona  { --acento: var(--quien); --acento-tenue: var(--quien-claro); }
#vias          { --acento: var(--duda);  --acento-tenue: var(--duda-claro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-campana="manton"],
  :root:not([data-theme="light"])[data-campana="teatro"] { --acento-texto: #1E1E1E; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;         /* 18px — público mayoritariamente mayor */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }

a { color: var(--acento); text-underline-offset: .18em; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-suave);
}
.cabecera__fila {
  max-width: var(--ancho); margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca { display: flex; align-items: center; min-width: 0; }
.marca__logo {
  /* Escudo y nombre en un solo dibujo: la altura manda y el ancho sigue */
  /* Ancho EXPLÍCITO (628/192 del viewBox): con width:auto algunos navegadores de
     móvil (Safari viejo, WebView) lo calculan como 0 y el logo desaparece (30-10-2026) */
  display: block; height: 3.75rem; width: 12.266rem; flex: none;   /* 60 × 196 px en móvil */
  color: var(--tinta);                            /* el nombre toma la tinta del tema */
}
@media (min-width: 34rem) {
  .marca__logo { height: 5rem; width: 16.354rem; } /* 80 × 262 px en pantalla grande */
}
.marca__lugar {
  font-size: .8125rem; color: var(--tinta-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  background: transparent; border: 1px solid var(--linea);
  border-radius: var(--r-boton); color: var(--tinta-media);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.tema:hover { color: var(--tinta); border-color: var(--tinta-tenue); }
.tema .icono--luna { display: none; }
:root[data-theme="dark"] .tema .icono--luna { display: block; }
:root[data-theme="dark"] .tema .icono--sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .icono--luna { display: block; }
  :root:not([data-theme="light"]) .tema .icono--sol { display: none; }
}

/* ---------- Banda de la cabecera ---------- */

.banda {
  display: block; width: 100%; height: 16px;   /* tamaño fijo: no se estira */
  color: var(--banda);             /* neutro fijo: no cambia con la celebración */
}
.banda rect, .banda path, .banda circle, .banda ellipse { transition: fill .5s ease, stroke .5s ease; }

/* ---------- Portada ---------- */

.portada { padding-block: 3rem 2.25rem; }
.portada__cuerpo { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 44rem) {
  .portada__cuerpo--con-foto { grid-template-columns: 1fr 18rem; gap: 2.25rem; }
}
@media (min-width: 44rem) {
  /* Con la foto al lado, la columna es más estrecha: titular un punto menor (3 líneas, no 4) */
  .portada__cuerpo--con-foto .portada__titulo { font-size: clamp(1.85rem, 5.2vw, 2.45rem); }
}
.portada__foto { margin: 0; }
.portada__foto figcaption {
  margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: var(--tinta-tenue);
}
.portada__foto figcaption:empty { display: none; }

/* Comparador blanco y negro / color */
.comparador {
  --pos: 50%;
  position: relative; overflow: hidden; user-select: none;
  border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel-hondo); box-shadow: var(--sombra);
}
.comparador__img { display: block; width: 100%; height: auto; }
.comparador__img--color {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));   /* se recorta por la izquierda: color a la derecha, b/n a la izquierda */
}
.comparador__linea {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.comparador__asa {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #1B1A18; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.comparador__asa svg { margin: 0 -2px; }
.comparador__control {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;   /* arrastre horizontal; el vertical sigue siendo scroll */
  -webkit-appearance: none; appearance: none;
}
.comparador:has(.comparador__control:focus-visible) {
  outline: 3px solid var(--acento); outline-offset: 2px;
}
/* Sin versión en blanco y negro: foto sola, sin controles */
.comparador--simple .comparador__img--color,
.comparador--simple .comparador__linea,
.comparador--simple .comparador__control { display: none; }
.portada__titulo {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-size: clamp(1.8rem, 7.2vw, 2.75rem);   /* JSP, 30-10: dos puntos más pequeño que el original */
  letter-spacing: -.03em;
}
.portada__entrada {
  margin: 1.15rem 0 0; max-width: 34rem;
  font-size: 1.0625rem; color: var(--tinta-media);  /* 17 px, antes 19 (JSP, 30-10) */
}

.motivos { display: grid; gap: .6rem; margin-top: 1.75rem; }
.motivo {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .8rem .95rem; border-left: 3px solid var(--linea);
  background: var(--papel-hondo); border-radius: 0 var(--r-tarjeta) var(--r-tarjeta) 0;
}
.motivo--manton {
  border-left-color: var(--manton);
  background: color-mix(in srgb, var(--manton-claro) 55%, var(--papel-hondo));
}
.motivo--teatro {
  border-left-color: var(--teatro);
  background: color-mix(in srgb, var(--teatro-claro) 55%, var(--papel-hondo));
}
.motivo__anio {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-size: 1.0625rem; line-height: 1.35;
}
.motivo--manton .motivo__anio { color: var(--manton); }
.motivo--teatro .motivo__anio { color: var(--teatro); }
.motivo__texto { font-size: .9375rem; color: var(--tinta-media); line-height: 1.5; }

/* ---------- Pasos ---------- */

.paso { padding-block: 2rem; border-top: 1px solid var(--linea-suave); }
.paso__cabeza { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.15rem; }
.paso__numero {
  /* Toma el color de la campaña elegida; gris neutro mientras no haya ninguna */
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1.5px solid var(--acento); border-radius: 50%; color: var(--acento);
  background: var(--acento-tenue);
  font-family: "Archivo Black", Archivo, sans-serif; font-size: .875rem;
  transition: border-color .25s, color .25s, background .25s;
}
.paso__titulo { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
.paso__ayuda { margin: -.55rem 0 1.15rem; color: var(--tinta-media); font-size: .9375rem; }
/* Paso hecho: el número se rellena con el color de su sección (no verde, que se
   confundía con el paso 2; JSP 01-11) */
.paso[data-estado="hecho"] .paso__numero {
  background: var(--acento); border-color: var(--acento); color: var(--acento-texto);
}

/* ---------- Elección de campaña ---------- */

.campanas { display: grid; gap: .75rem; }
.campana {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  gap: .9rem; align-items: center; width: 100%; text-align: left;
  padding: 1rem 1.05rem; cursor: pointer;
  background: var(--superficie); color: inherit; font: inherit;
  border: 1.5px solid var(--linea); border-radius: var(--r-tarjeta);
  transition: border-color .15s, background .15s, transform .08s;
}
.campana:hover { border-color: var(--tinta-tenue); }
.campana:active { transform: translateY(1px); }
.campana__icono {
  width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center;
  border-radius: var(--r-boton); background: var(--papel-hondo); color: var(--tinta-media);
  transition: background .15s, color .15s;
}
.campana__nombre { font-weight: 600; font-size: 1.0625rem; }
.campana__detalle { font-size: .875rem; color: var(--tinta-tenue); }
.campana__marca { color: var(--linea); display: grid; place-items: center; transition: color .15s; }

/* Sin elegir: cada tarjeta ya insinúa su color (borde, icono y marca, en tenue) */
.campana--manton { border-color: color-mix(in srgb, var(--manton) 38%, var(--linea)); }
.campana--manton .campana__icono { background: var(--manton-claro); color: var(--manton); }
.campana--manton .campana__marca { color: color-mix(in srgb, var(--manton) 45%, var(--linea)); }
.campana--manton:hover { border-color: var(--manton); }
.campana--teatro { border-color: color-mix(in srgb, var(--teatro) 38%, var(--linea)); }
.campana--teatro .campana__icono { background: var(--teatro-claro); color: var(--teatro); }
.campana--teatro .campana__marca { color: color-mix(in srgb, var(--teatro) 45%, var(--linea)); }
.campana--teatro:hover { border-color: var(--teatro); }
.campana--duda { border-color: color-mix(in srgb, var(--duda) 38%, var(--linea)); }
.campana--duda .campana__icono { background: var(--duda-claro); color: var(--duda); }
.campana--duda .campana__marca { color: color-mix(in srgb, var(--duda) 45%, var(--linea)); }
.campana--duda:hover { border-color: var(--duda); }

/* Elegida: color pleno */
.campana[aria-pressed="true"] { border-width: 2px; padding: calc(1rem - .5px) calc(1.05rem - .5px); }
.campana--manton[aria-pressed="true"] { border-color: var(--manton); background: var(--manton-claro); }
.campana--manton[aria-pressed="true"] .campana__icono { background: var(--manton); color: #fff; }
.campana--manton[aria-pressed="true"] .campana__marca { color: var(--manton); }
.campana--teatro[aria-pressed="true"] { border-color: var(--teatro); background: var(--teatro-claro); }
.campana--teatro[aria-pressed="true"] .campana__icono { background: var(--teatro); color: #fff; }
.campana--teatro[aria-pressed="true"] .campana__marca { color: var(--teatro); }
.campana--duda[aria-pressed="true"] { border-color: var(--duda); background: var(--duda-claro); }
.campana--duda[aria-pressed="true"] .campana__icono { background: var(--duda); color: #fff; }
.campana--duda[aria-pressed="true"] .campana__marca { color: var(--duda); }

/* ---------- Modo de envío (pocas / muchas fotos) ---------- */

.modos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .75rem; }
.modo {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center;
  padding: .75rem .9rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--tinta-media);
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--r-tarjeta);
  transition: border-color .15s, background .15s, color .15s;
}
.modo:hover { border-color: var(--tinta-tenue); }
.modo strong { display: block; font-size: .9375rem; color: var(--tinta); }
.modo__pista { font-size: .8125rem; color: var(--tinta-tenue); }
.modo[aria-pressed="true"] {
  border-color: var(--acento); border-width: 2px; padding: calc(.75rem - .5px) calc(.9rem - .5px);
  background: var(--acento-tenue); color: var(--acento);
}
.modo[aria-pressed="true"] strong { color: var(--tinta); }
.modo[aria-pressed="true"] .modo__pista { color: var(--tinta-media); }
@media (max-width: 30rem) {
  .modos { grid-template-columns: 1fr; }
}

/* Al cambiar de modo la zona de abajo parpadea un instante con el acento */
.soltar { scroll-margin-top: 7rem; }              /* que la cabecera fija no la tape al traerla a la vista */
.soltar--destello { animation: destello 1.1s ease-out; }
@keyframes destello {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); border-color: var(--acento); }
  60%  { box-shadow: 0 0 0 10px transparent; border-color: var(--acento); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .soltar--destello { animation: none; } }

/* ---------- Zona de archivos ---------- */

.soltar {
  /* El borde y el icono se tiñen con la campaña elegida; neutros si no hay ninguna */
  border: 2px dashed color-mix(in srgb, var(--acento) 45%, var(--linea));
  border-radius: var(--r-tarjeta);
  background: var(--papel-hondo); padding: 2rem 1.25rem; text-align: center;
  transition: border-color .25s, background .15s;
}
.soltar--activa { border-color: var(--acento); background: var(--acento-tenue); }
.soltar__icono { color: var(--acento); margin-bottom: .5rem; transition: color .25s; }
.soltar--activa .soltar__icono { color: var(--acento); }
.soltar__titulo { font-weight: 600; font-size: 1.0625rem; }
.soltar__nota { color: var(--tinta-tenue); font-size: .875rem; margin-top: .3rem; }
.soltar__botones {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.15rem;
}

/* ---------- Puerta al modo lote ---------- */


/* ---------- Resumen del lote ---------- */

.lote {
  margin-top: 1.15rem; padding: 1.15rem;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta); box-shadow: var(--sombra);
}
.lote__cifras { display: flex; align-items: baseline; gap: .6rem; }
.lote__numero:empty { display: none; }
.lote__numero {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-size: 2.25rem; line-height: 1; color: var(--acento); letter-spacing: -.03em;
}
.lote__detalle { color: var(--tinta-media); font-size: .9375rem; }
.lote__lista {
  list-style: none; margin: 1rem 0 0; padding: 0;
  font-size: .875rem; color: var(--tinta-media);
  max-height: 12rem; overflow-y: auto;
}
.lote__lista li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--linea-suave);
}
.lote__lista li span { color: var(--tinta-tenue); flex: none; }
.lote__lista li:last-child { border-bottom: 0; }
.lote__resto { color: var(--tinta-tenue); font-style: italic; }

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

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.15rem;
  font: inherit; font-weight: 600; font-size: 1rem;
  border-radius: var(--r-boton); border: 1.5px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
}
.boton--principal { background: var(--acento); color: var(--acento-texto); }
/* «Enviar material» siempre en el burdeos del Mantón, elijas lo que elijas
   (JSP, 01-11: «tenía un rojizo burdeos elegante») */
#btn-enviar { --acento: var(--manton); --acento-texto: #FFFFFF; }
:root[data-theme="dark"] #btn-enviar { --acento-texto: #1E1E1E; }
.boton--principal:hover { background: color-mix(in srgb, var(--acento) 86%, var(--tinta)); }
.boton--secundario {
  background: var(--superficie); color: var(--tinta); border-color: var(--linea);
}
.boton--secundario:hover { border-color: var(--tinta-tenue); }
/* Dentro de un paso con color, el botón secundario lo lleva en borde y texto */
.paso .boton--secundario { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 55%, var(--linea)); }
.paso .boton--secundario:hover { border-color: var(--acento); background: var(--acento-tenue); }
.boton--fantasma {
  background: transparent; color: var(--tinta-media); border-color: transparent;
  min-height: 2.5rem; padding: .4rem .6rem; font-size: .9375rem;
}
.boton--fantasma:hover { color: var(--tinta); background: var(--papel-hondo); }
.boton--ancho { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton--peligro { color: var(--error); }
.boton--peligro:hover { background: var(--error-tenue); color: var(--error); }

/* ---------- Fichas de archivo ---------- */

.piezas { display: grid; gap: .85rem; margin-top: 1.15rem; }
.pieza {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta); padding: .9rem; box-shadow: var(--sombra);
}
.pieza__cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: start; }
.pieza__vista {
  width: 4.25rem; height: 4.25rem; flex: none; border-radius: var(--r-boton);
  background: var(--papel-hondo); display: grid; place-items: center; overflow: hidden;
  color: var(--tinta-tenue); border: 1px solid var(--linea-suave);
}
.pieza__vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza__nombre {
  font-weight: 600; font-size: .9375rem; word-break: break-word; line-height: 1.35;
}
.pieza__meta { font-size: .8125rem; color: var(--tinta-tenue); margin-top: .15rem; }
.pieza__campos { margin-top: .85rem; display: grid; gap: .7rem; }

/* ---------- Formulario ---------- */

.campo { display: grid; gap: .35rem; }
.campo__etiqueta { font-size: .9375rem; font-weight: 600; }
.campo__pista { font-size: .8125rem; color: var(--tinta-tenue); font-weight: 400; }

.entrada, .area, .lista {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .7rem .8rem; min-height: 3rem;
  color: var(--tinta); background: var(--superficie);
  border: 1.5px solid var(--linea); border-radius: var(--r-campo);
  transition: border-color .15s;
}
.entrada:hover, .area:hover, .lista:hover { border-color: var(--tinta-tenue); }
.entrada:focus, .area:focus, .lista:focus { border-color: var(--acento); }
.area { min-height: 5rem; resize: vertical; line-height: 1.5; }
.entrada::placeholder, .area::placeholder { color: var(--tinta-tenue); }

/* Desplegables: fondo sólido también en oscuro */
.lista {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23837C72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  padding-right: 2.4rem;
}
.lista option { background-color: var(--superficie); color: var(--tinta); }

.casilla {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  padding: 1rem; cursor: pointer;
  background: var(--papel-hondo); border: 1.5px solid var(--linea);
  border-radius: var(--r-tarjeta);
}
.casilla:hover { border-color: var(--tinta-tenue); }
/* Casilla propia: la nativa salía como un cuadrado oscuro macizo en modo claro (30-10-2026) */
.casilla input {
  appearance: none; -webkit-appearance: none;
  width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; cursor: pointer; flex: none;
  background: var(--papel); border: 1.5px solid var(--tinta-tenue); border-radius: var(--r-boton);
  display: grid; place-content: center;
  transition: background .15s, border-color .15s;
}
.casilla input:checked { background: var(--acento); border-color: var(--acento); }
.casilla input:checked::after {
  content: ""; width: 1rem; height: 1rem; background: var(--acento-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.casilla__texto { font-size: .9375rem; line-height: 1.5; }

/* Paso 3 con su color (JSP, 01-11): bordes de los campos y fondo de la casilla
   del permiso en morado, no solo el número */
.paso .entrada, .paso .area, .paso .lista {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--linea));
}
.paso .campo__etiqueta { color: var(--acento); }
#paso-persona .casilla {
  background: color-mix(in srgb, var(--acento-tenue) 45%, var(--superficie));
  border-color: color-mix(in srgb, var(--acento) 55%, var(--linea));
}
#paso-persona .casilla:hover { border-color: var(--acento); }
#paso-persona .casilla input { border-color: var(--acento); }
.casilla__texto strong { font-weight: 600; }
.casilla--error { border-color: var(--error); background: var(--error-tenue); }

.rejilla-2 { display: grid; gap: .9rem; }
@media (min-width: 34rem) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Avisos ---------- */

.nota {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .85rem 1rem; border-radius: var(--r-tarjeta); font-size: .9375rem;
  line-height: 1.5;
}
/* Relleno a la mitad del tenue: son cuadros de texto, no elementos elegidos (JSP, 01-11) */
.nota--info   { background: color-mix(in srgb, var(--acento-tenue) 45%, var(--superficie)); color: var(--tinta); }
.nota--aviso  { background: var(--aviso-tenue);  color: var(--aviso); }
.nota--error  { background: var(--error-tenue);  color: var(--error); }
.nota--exito  { background: var(--exito-tenue);  color: var(--exito); }
.nota svg { flex: none; margin-top: .1rem; }

/* ---------- Envío ---------- */

.envio { padding-block: 2rem 1rem; border-top: 1px solid var(--linea-suave); }
.turnstile:not(:empty) { margin-bottom: 1.15rem; display: flex; justify-content: center; }
/* El botón de envío lleva el progreso dentro */
.boton--progreso { position: relative; overflow: hidden; }
.boton__relleno {
  position: absolute; inset: 0; width: 0%;
  background: color-mix(in srgb, var(--acento-texto) 22%, transparent);
  transition: width .35s ease; pointer-events: none;
}
.boton__cara { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.boton--progreso[disabled] { opacity: 1; cursor: progress; }
.gira { display: inline-flex; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gira { animation: none; } }

/* ---------- Pantalla de gracias ---------- */

.gracias { padding-block: 3.5rem; text-align: center; }
.gracias__sello {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--exito-tenue); color: var(--exito);
}
.gracias__titulo {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-size: clamp(1.75rem, 6vw, 2.35rem); letter-spacing: -.025em;
}
.gracias__texto { margin: 1rem auto 0; max-width: 30rem; color: var(--tinta-media); }
.gracias__ref {
  display: inline-block; margin-top: 1.5rem; padding: .7rem 1.15rem;
  background: var(--papel-hondo); border: 1px solid var(--linea);
  border-radius: var(--r-boton);
  font-family: "Archivo Black", Archivo, sans-serif; letter-spacing: .06em;
}

/* ---------- Otras vías ---------- */

.vias { padding-block: 2.25rem; border-top: 1px solid var(--linea-suave); }
.vias__lista { display: grid; gap: .6rem; margin-top: 1.15rem; }
.via {
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .85rem 1rem; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta); transition: border-color .15s;
}
/* Solo las vías que hacen algo (con enlace) reaccionan al ratón; la entrega
   en mano es información, no un botón. */
.via[href]:hover { border-color: var(--tinta-tenue); }
.via[href]:hover .via__flecha { color: var(--tinta); }
.via:not([href]) { cursor: default; }
.via__icono {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: var(--r-boton); background: var(--acento-tenue); color: var(--acento);
}
.via__nombre { font-weight: 600; font-size: .9375rem; }
.via__detalle { font-size: .8125rem; color: var(--tinta-tenue); }
.via__flecha { color: var(--tinta-media); transition: color .15s; }

/* ---------- Pie ---------- */

.pie {
  padding-block: 2.25rem 3rem; border-top: 1px solid var(--linea-suave);
  color: var(--tinta-tenue); font-size: .875rem;
}
.pie p { margin: 0 0 .6rem; max-width: 36rem; }

/* Separaciones puntuales, para no dejar estilos sueltos en el HTML */
.separado-arriba       { margin-top: 1rem; }
.separado-arriba-poco  { margin-top: .6rem; }
.separado-arriba-medio { margin-top: 1.15rem; }
.separado-arriba-grande{ margin-top: 2rem; }
.separado-abajo-medio  { margin-bottom: 1.15rem; }

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}