/* ============================================================
   ESLABIA — hoja base compartida por landing, app y verificador.

   DIRECCIÓN VISUAL: notarial.
   ---------------------------------------------------------------
   La primera versión de este fichero era neo-brutalista: sombras
   sólidas de 5 px, bordes de 2 px, titulares en Archivo Black a caja
   alta y una paleta de rojo bombero con amarillo. Ese lenguaje viene
   de las plantillas de producto de 2022 y ante un colectivo jurídico
   no dice «moderno», dice «no es serio».

   El referente ahora es el otro: el BOE, el papel timbrado, el lomo de
   un Aranzadi, el sello seco de una notaría. Lo que eso significa en
   la práctica, y conviene no deshacer:

     · Filetes de 1 px, y filete doble para los encabezados. NINGUNA
       sombra sólida. El peso visual lo dan la tipografía y el aire.
     · Titulares en serif y en caja baja. La autoridad en lo jurídico
       no se transmite con tamaño; se transmite con precisión.
     · Versalitas espaciadas para los epígrafes, como los encabezados
       de sección de un boletín oficial.
     · UN solo acento: burdeos. El rojo de alarma queda RESERVADO para
       lo que de verdad es urgente —un plazo vencido—. Cuando el rojo
       era también el color de los botones, no quedaba registro para
       decir «esto se te ha pasado».
     · Columna de texto estrecha (~62-68 caracteres) y márgenes anchos.

   Sobre las tipografías: no se carga ninguna desde un CDN. Rompería la
   CSP de este repositorio (style-src 'self'), añadiría peticiones a un
   tercero y mandaría la IP de cada visitante a un servidor extranjero.
   Se usan pilas del sistema, con la serif haciendo casi todo el trabajo.
   ============================================================ */

:root {
  --tinta: #16202e;         /* casi negro, con un punto de azul */
  --tinta2: #26303f;
  --papel: #f7f4ed;         /* crema de papel de oficio */
  --papel2: #efeadf;        /* fondo de la aplicación */
  --carta: #fffdf8;         /* superficie de tarjeta y hoja */
  --burdeos: #7a2431;       /* el acento, y el único */
  --burdeos2: #5c1a24;
  --alarma: #a8322b;        /* RESERVADO: plazo vencido y errores duros */
  --verde: #2f5d4a;         /* conforme */
  --ocre: #8a6d3b;          /* advertencia */
  --azul: #2a4c78;          /* dato neutro */
  --filete: #d6cfc0;
  --filete2: #e6e0d2;
  --mut: #5c574c;

  --serif: Georgia, "Times New Roman", "Liberation Serif", "Nimbus Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --medida: 66ch;           /* longitud de línea cómoda para leer */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo `hidden` es una promesa que cualquier regla de CSS puede romper
   sin avisar: le basta con fijar `display`. Pasó con la pantalla de acceso de la
   aplicación, que lleva `display:grid` para centrarse; al entrar se le ponía
   `hidden` y seguía tapando la aplicación entera, invisible para cualquier
   prueba de lógica y evidente para cualquier usuario. Lo cazó la suite de
   navegador. Esta línea cierra el caso para todo el sitio. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-size: 17px;
}
::selection { background: #e8dcc4; color: var(--tinta); }
img, svg { display: block; max-width: 100%; }
a { color: var(--burdeos); text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--burdeos); outline-offset: 3px; }

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

.mono { font-family: var(--mono); }
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--papel); padding: 12px 20px; font-weight: 700;
}
.saltar:focus { left: 0; }

/* Las versalitas —texto pequeño en caja alta muy espaciado— son el recurso que
   más «boletín oficial» aporta y el más barato. No hay una clase genérica: cada
   sitio donde se usan trae la suya con su tamaño (.lbl, .qs, .fmeta, .vhead .qs),
   porque el espaciado que funciona en una etiqueta de dato no funciona en un
   epígrafe. Hubo una `.vers` común y acabó sin usarse; retirada el 02/08/2026. */

/* ---------- botones ----------
   Filete de 1 px y relleno generoso. Sin sombra, sin desplazamiento al pasar
   el ratón: un botón que se mueve es un botón de landing de producto. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .82rem 1.5rem; border: 1px solid var(--tinta); cursor: pointer;
  text-decoration: none; background: transparent; color: var(--tinta);
  transition: background .18s, color .18s, border-color .18s;
}
.btn-red { background: var(--burdeos); color: #fff; border-color: var(--burdeos); }
.btn-red:hover { background: var(--burdeos2); border-color: var(--burdeos2); }
.btn-ghost:hover { background: var(--tinta); color: var(--papel); }
.btn-paper { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.btn-paper:hover { background: transparent; color: var(--papel); border-color: var(--papel); }
.btn-s { padding: .5rem 1rem; font-size: .72rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- barra superior y navegación ---------- */
.topbar {
  background: var(--tinta); color: rgba(247, 244, 237, .82);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .18em;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 26px; text-transform: uppercase;
}
.nav {
  position: sticky; top: 0; z-index: 60; background: var(--papel);
  border-bottom: 1px solid var(--tinta); display: flex; align-items: center;
  gap: 26px; padding: 0 26px; min-height: 66px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.logo .sq {
  width: 32px; height: 32px; border: 1px solid var(--tinta); color: var(--tinta);
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px;
  font-weight: 700; background: transparent;
}
.logo b {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--tinta);
  position: relative; padding: 8px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 0;
  background: var(--burdeos); transition: width .22s;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; }
.nav-abrir { display: none; background: none; border: 1px solid var(--tinta); padding: 9px 12px; cursor: pointer; margin-left: auto; }
.nav-abrir svg { width: 18px; height: 12px; stroke: var(--tinta); stroke-width: 1.4; }

/* ---------- secciones ---------- */
.sec { padding: 92px 6vw; }
.sec-in { max-width: 1120px; margin: 0 auto; }
.dark { background: var(--tinta); color: var(--papel); }
.dark a { color: #e3c9a8; }

/* Epígrafe de sección: filete a la izquierda, versalita, filete que se aleja.
   Es la firma visual del boletín oficial. */
.lbl {
  font-family: var(--sans); font-size: 11px; color: var(--burdeos);
  letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.lbl::before { content: "§"; font-family: var(--serif); font-size: 15px; letter-spacing: 0; }
.lbl::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.dark .lbl { color: #d4a373; }
.dark .lbl::after { background: rgba(247, 244, 237, .25); }

h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; }
h1 { line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.15; margin-bottom: 18px; }
h3 { font-size: 1.1rem; }
.sub { max-width: var(--medida); font-size: 1.02rem; color: #3d4757; }
.dark .sub { color: rgba(247, 244, 237, .8); }

/* ---------- avisos ----------
   Filete a la izquierda de 2 px y fondo apenas teñido. Nada de bloques de
   color saturado: en un documento, una nota al margen no grita. */
.aviso {
  border-left: 2px solid var(--ocre); background: #f6f1e2; color: #4a3f26;
  padding: 15px 20px; font-size: .95rem; margin: 18px 0;
}
.aviso.grave { border-left-color: var(--alarma); background: #f7ecea; color: #6d2620; }
.aviso.bien { border-left-color: var(--verde); background: #eaf1ec; color: #26463a; }
.aviso b { display: block; margin-bottom: 5px; font-family: var(--sans);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.dark .aviso { background: rgba(247, 244, 237, .05); color: rgba(247, 244, 237, .88); }
.dark .aviso b { color: #d4a373; }

/* ---------- distintivos ----------
   Sin relleno de color: filete fino y versalita. Un expediente se anota, no se
   colorea. */
.chip {
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  padding: 3px 9px; border: 1px solid; text-transform: uppercase; white-space: nowrap;
  display: inline-block; background: transparent;
}
.c-red { color: var(--burdeos); border-color: var(--burdeos); }
.c-green { color: var(--verde); border-color: var(--verde); }
.c-blue { color: var(--azul); border-color: var(--azul); }
.c-yel { color: var(--ocre); border-color: var(--ocre); }
.c-mut { color: var(--mut); border-color: var(--filete); }

/* ---------- formularios ---------- */
label {
  display: block; font-family: var(--sans); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--mut); margin-bottom: 7px; font-weight: 600;
}
input, select, textarea {
  width: 100%; border: 1px solid var(--filete); border-bottom-color: var(--tinta);
  background: #fff; padding: 11px 13px; font-size: .95rem; color: var(--tinta);
  font-family: var(--serif);
}
input:focus, select:focus, textarea:focus { border-color: var(--burdeos); }
textarea { resize: vertical; min-height: 92px; line-height: 1.65; }
.hint { font-family: var(--sans); font-size: 11px; color: var(--mut); margin-top: 5px; line-height: 1.5; }
/* El resultado de una importación: se lee al lado del campo y no en un aviso
   flotante, porque hay que compararlo con lo que acaba de aparecer en el cuadro
   de texto de al lado, y para eso tiene que seguir en pantalla. */
.hint.ok { color: var(--verde); }
.hint.mal { color: var(--alarma); }

/* El botón nativo de «Seleccionar archivo» es un control gris del sistema y en
   medio de una página de filetes canta como una bocina. Se le da forma con el
   pseudoelemento estándar.
   🔴 Sin tocar el tamaño de letra del `input`: por debajo de 16 px Safari en
   iPhone amplía la página al enfocarlo, y además el botón nativo se comía tanto
   ancho que el nombre del fichero salía como «Nin...nado». El pseudoelemento sí
   puede ir más pequeño —no recibe el foco— y así queda sitio para el nombre. */
/* El texto nativo de al lado va oculto —que no borrado: sigue en el árbol de
   accesibilidad para quien use lector de pantalla—. Tras cada importación el
   campo se limpia, así que ese texto siempre dice «Ningún archivo seleccionado»,
   y leerlo justo encima de un «Añadidos 2 festivos» contradice al mensaje que sí
   importa. Además se truncaba a «N...o» en un móvil. Lo que informa de verdad es
   la línea de resultado, que se escribe debajo. */
input[type="file"] { width: 100%; color: transparent; }
input[type="file"]::file-selector-button {
  font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; padding: .5rem .9rem; margin-right: 12px;
  border: 1px solid var(--tinta); background: transparent; color: var(--tinta);
  cursor: pointer; transition: background .18s, color .18s;
}
input[type="file"]::file-selector-button:hover { background: var(--tinta); color: var(--papel); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }

/* ---------- pie ---------- */
footer { background: var(--tinta); color: rgba(247, 244, 237, .85); padding: 60px 6vw 30px; }
.fgrid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.fgrid h5 {
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; color: #d4a373;
  text-transform: uppercase; margin-bottom: 16px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid rgba(247, 244, 237, .18);
}
.fgrid a { display: block; color: rgba(247, 244, 237, .8); text-decoration: none;
  font-size: .95rem; padding: 5px 0; transition: color .15s; }
.fgrid a:hover { color: #e3c9a8; }
.fmeta { font-family: var(--sans); font-size: 12px; color: rgba(247, 244, 237, .6); line-height: 1.9; }
.fbot {
  max-width: 1120px; margin: 40px auto 0; border-top: 1px solid rgba(247, 244, 237, .18);
  padding-top: 20px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em;
  color: rgba(247, 244, 237, .55); display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; text-transform: uppercase;
}

/* ---------- reveals ----------
   Visibles por defecto; es el JavaScript el que los esconde al arrancar
   añadiendo .rv-armado en <html>. Al revés basta con que el script no cargue
   para servir la web en blanco sin dar ningún error. */
.rv-armado .rv {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.rv-armado .rv.on { opacity: 1; transform: none; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  /* 16 px CLAVADOS en los campos, no 15,2 (.95rem). Safari en iPhone amplía la
     página al enfocar cualquier campo que mida menos de 16 px, y al ampliarla
     descoloca lo que hay alrededor: el perito escribe la frase de paso a ciegas
     y el diálogo de alta de expediente se sale de la pantalla. No es una
     preferencia tipográfica, es el umbral que aplica el navegador. */
  input, select, textarea { font-size: 16px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--papel);
    border-bottom: 1px solid var(--tinta); flex-direction: column; gap: 0;
    align-items: stretch; padding: 6px 26px 18px;
  }
  .nav-links.abierto { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--filete2); }
  .nav-abrir { display: block; }
  .nav .btn-red { display: none; }
  .nav-links .btn-red { display: inline-flex; margin-top: 14px; justify-content: center; }
  .fgrid { grid-template-columns: 1fr; gap: 30px; }
  .topbar span:last-child { display: none; }
  .sec { padding: 62px 6vw; }
}

/* ============================================================
   REVISIÓN ANTI-IMPUGNACIÓN
   El burdeos sigue siendo el único acento; el rojo de alarma se
   reserva para lo que de verdad está mal (hallazgo grave, punto
   incumplido), nunca para decorar.
   ============================================================ */

.medidor { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.aro {
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  display: grid; place-content: center; text-align: center;
  border: 6px solid var(--filete); background: var(--carta);
}
.aro span { font: 700 30px/1 var(--serif); display: block; }
.aro small { font: 500 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.aro.ok { border-color: var(--verde); }
.aro.medio { border-color: var(--ocre); }
.aro.mal { border-color: var(--alarma); }
.ver-ok { color: var(--verde); }
.ver-medio { color: var(--ocre); }
.ver-mal { color: var(--alarma); }

/* Declaraciones legales */
.dec { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--filete2); cursor: pointer; }
.dec:last-of-type { border-bottom: 0; }
.dec input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--burdeos); }
.dec b { display: block; font: 600 15px/1.4 var(--sans); }
.dec em { display: block; font: 600 10.5px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--burdeos); font-style: normal; margin-top: 2px; }
.dec .formula { display: block; font: italic 13px/1.6 var(--serif); color: var(--mut); margin-top: 7px; }

/* Glosario */
.fila-glo { display: grid; grid-template-columns: 220px 1fr 40px; gap: 9px; margin-bottom: 9px; }
@media (max-width: 640px) { .fila-glo { grid-template-columns: 1fr; } }

/* Diagnósticos del analizador */
.diag { border: 1px solid var(--filete); border-left: 3px solid var(--filete); border-radius: 3px; padding: 14px 16px; margin-bottom: 12px; background: var(--carta); }
.diag.ok { border-left-color: var(--verde); }
.diag.mal { border-left-color: var(--alarma); }
.diag > b { font: 600 14.5px/1.4 var(--sans); display: block; margin-bottom: 4px; }
.hall { border-top: 1px solid var(--filete2); padding: 11px 0 4px; }
.hall .donde { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.hall .ctx { font: italic 13px/1.65 var(--serif); color: var(--tinta2); margin: 6px 0; }
.hall .ctx mark { background: #f6e6b8; font-style: normal; font-weight: 600; padding: 0 3px; }
.hall .sug { font: 13px/1.55 var(--sans); color: var(--verde); }
.hall.media .sug { color: var(--ocre); }
.marcas { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.marcas span { font: 600 11.5px/1 var(--sans); background: var(--papel2); border: 1px solid var(--filete); border-radius: 2px; padding: 4px 8px; color: var(--tinta2); }
.ind { font: 13.5px/1.6 var(--sans); padding: 4px 0; }
.ind.si { color: var(--verde); }
.ind.no { color: var(--alarma); }
.ind .qs { display: block; padding-left: 17px; }

/* Los veinte puntos */
.punto { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--filete2); }
.punto:last-child { border-bottom: 0; }
.punto input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--verde); }
.punto input:disabled { cursor: not-allowed; }
.punto b { display: block; font: 500 14.5px/1.45 var(--sans); }
.punto em { display: block; font: 600 10.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--burdeos); font-style: normal; margin-top: 3px; }
.punto .riesgo { display: block; font: 13px/1.55 var(--sans); color: var(--alarma); margin-top: 5px; }
.punto .comofix { display: block; font: 13px/1.55 var(--sans); color: var(--tinta2); margin-top: 4px; }
.punto .comofix.ok { color: var(--verde); }
.tg { font: 700 10px/1 var(--sans); letter-spacing: .08em; padding: 3px 6px; border-radius: 2px; margin-left: 7px; vertical-align: 1px; }
.tg.auto { background: #e4ede8; color: var(--verde); }
.tg.semi { background: #f2ead9; color: var(--ocre); }

/* Anclaje probatorio */
.ancla { margin-top: 8px; }
.ancla-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip-ev {
  font: 600 11.5px/1 var(--mono); background: var(--carta); border: 1px solid var(--filete);
  border-radius: 2px; padding: 6px 9px; cursor: pointer; color: var(--tinta2);
}
.chip-ev:hover { border-color: var(--burdeos); color: var(--burdeos); }
.refev { font: 600 .85em var(--mono); color: var(--burdeos); white-space: nowrap; }
.refev.rota { color: var(--alarma); text-decoration: underline wavy; }
.hoja .art { font: 600 .8em var(--sans); color: var(--mut); }

/* Cuerpo de la confirmación destructiva */
.peligro-cuerpo p { font: 14px/1.65 var(--sans); margin-bottom: 10px; }

@media print {
  .refev.rota { text-decoration: none; }
}