/* Montserrat es la tipografía corporativa de INES. El fichero está alojado en
   este mismo repositorio, no en Google Fonts. Dos motivos:

   1. No depender de nadie. Si Google Fonts no responde —cobertura mala, un
      cortafuegos corporativo, un cambio suyo— la página seguiría funcionando
      pero dejaría de parecerse a los documentos de INES.
   2. Privacidad. Cargarla de Google implicaría que la IP de cada persona que
      escanea un plano llegue a Google. En una página pública que usa gente de
      obra eso es innecesario, y hay resoluciones europeas que lo consideran
      incompatible con el RGPD sin consentimiento previo.

   Es una fuente variable: un solo fichero de 38 KB cubre los pesos 400 a 700.
   Licencia SIL Open Font License 1.1, que permite redistribuirla; el texto
   completo está en LICENCIA-MONTSERRAT.txt, como exige la propia licencia. */
@font-face{
  font-family:"Montserrat";
  src:url("montserrat.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;   /* el texto sale al instante con la del sistema y cambia
                          a Montserrat en cuanto llega: nunca hay hueco en blanco */
  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+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════
   PALETA CORPORATIVA INES
   Tomada de Q:\32_PLANTILLAS_DOCUMENTOS_INES-2024\2. PROYECTOS\ESPAÑOL\
   memoria A3_esp.docx (esquema de color del tema).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --navy:   #101325;   /* dk1     · color del logotipo */
  --azul:   #2392D1;   /* accent1 · azul INES, el punto de la «i» */
  --slate:  #374852;   /* accent3 */
  --gris:   #F2F2F2;   /* lt2 */
  --tenue:  #8E9098;
  --linea:  #E2E4E8;
  --texto:  #101325;
  --fondo:  #FFFFFF;

  /* Veredicto. El rojo es el corporativo (accent6). El verde no existe en la
     paleta de INES y no debe existir: es una señal de seguridad, no de marca. */
  --ok: #0F7A3D;  --ok-fondo: #EAF5EE;
  --no: #D1242A;  --no-fondo: #FCECEC;
  --nd: #7F7F7F;  --nd-fondo: #F2F2F2;

  --tipo: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Arial, sans-serif;

  color-scheme: light;   /* se fija claro: se lee mucho mejor al sol */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:400 16px/1.6 var(--tipo);
  display:flex; flex-direction:column; min-height:100vh;
}

/* ── Cabecera: blanca y sobria, como la web de INES ─────────────────── */
header{
  background:#fff; border-top:3px solid var(--azul);
  border-bottom:1px solid var(--linea);
  padding:16px 20px; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
/* Logotipo oficial, extraído de la plantilla corporativa
   (memoria A3_esp.docx → word/media/image4.svg). Vectorial: nítido a cualquier
   tamaño y pesa 2 KB. La versión en blanco para fondos oscuros está en
   logo-ines-blanco.svg, por si algún día hace falta. */
.logo{display:block; height:30px; width:auto}
header .rotulo{
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tenue); border-left:1px solid var(--linea); padding-left:14px;
}

main{flex:1}

footer{
  border-top:1px solid var(--linea); background:var(--gris);
  padding:20px; font-size:13px; color:var(--slate);
}
footer b{color:var(--navy); font-weight:600}
footer .legal{margin:10px 0 0; font-size:12px; color:var(--tenue)}

/* ── Veredicto: lo único que importa en el primer segundo ───────────── */
.veredicto{padding:40px 20px 34px; text-align:center; border-bottom:3px solid}
.veredicto .icono{
  width:82px; height:82px; border-radius:50%; margin:0 auto 16px;
  display:grid; place-items:center; color:#fff;
  font-size:42px; line-height:1; font-weight:400;
}
.veredicto .titulo{
  font-size:clamp(32px,10.5vw,52px); font-weight:700; margin:0;
  letter-spacing:.02em; line-height:1.05; text-transform:uppercase;
}
.veredicto .lema{
  margin:10px 0 0; font-size:clamp(14px,4.2vw,18px); font-weight:500;
  max-width:26em; margin-inline:auto;
}

.v-ok{background:var(--ok-fondo); border-color:var(--ok)}
.v-ok .titulo,.v-ok .lema{color:var(--ok)}   .v-ok .icono{background:var(--ok)}
.v-no{background:var(--no-fondo); border-color:var(--no)}
.v-no .titulo,.v-no .lema{color:var(--no)}   .v-no .icono{background:var(--no)}
.v-nd{background:var(--nd-fondo); border-color:var(--nd)}
.v-nd .titulo,.v-nd .lema{color:var(--nd)}   .v-nd .icono{background:var(--nd)}

/* ── Identidad del documento ────────────────────────────────────────── */
.doc{padding:28px 20px 8px; max-width:680px; margin:0 auto}
.doc .obra{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--azul); margin:0 0 10px;
}
.doc .denom{
  font-size:clamp(19px,5.2vw,25px); font-weight:600; margin:0 0 4px;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.25;
  color:var(--navy);
}
.doc .tit{
  font-size:clamp(15px,4.2vw,18px); font-weight:400; color:var(--slate);
  margin:0 0 22px;
}

.datos{width:100%; border-collapse:collapse; font-size:15px}
.datos th,.datos td{
  text-align:left; padding:12px 2px; border-bottom:1px solid var(--linea);
  vertical-align:top;
}
.datos th{color:var(--tenue); font-weight:400; width:47%}
.datos th small{font-size:12px}
.datos td{font-weight:600; font-variant-numeric:tabular-nums; color:var(--navy)}
.datos td.suave{font-weight:400; color:var(--slate)}
.codigo{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em; font-size:14px;
}

/* ── Aviso de revisión vigente cuando el papel está superado ────────── */
.aviso{
  margin:22px auto; padding:18px 20px; max-width:680px;
  background:var(--no-fondo); border:1px solid var(--no); border-left-width:5px;
}
.aviso h2{
  margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--no);
}
.aviso p{margin:5px 0}
.aviso .grande{font-size:30px; font-weight:700; color:var(--no); line-height:1}
.aviso .accion{margin-top:12px; color:var(--navy)}

.nota{
  margin:22px auto; padding:16px 18px; max-width:680px; font-size:14px;
  background:var(--gris); border-left:5px solid var(--azul); color:var(--slate);
}
.nota b{color:var(--navy); font-weight:600}
.nota.alerta{background:#FFF7E6; border-left-color:#FFC000; color:#5C4300}
.nota.alerta b{color:#5C4300}

/* ── Listado (cuando se entra sin escanear un QR) ───────────────────── */
.listado{padding:34px 20px; max-width:960px; margin:0 auto}
.listado h1{
  font-size:clamp(22px,5vw,28px); font-weight:600; margin:0 0 8px;
  color:var(--navy); letter-spacing:-.01em;
}
.listado .intro{color:var(--slate); margin:0 0 34px; font-size:15px; max-width:56em}
.obra-bloque{margin-bottom:44px}
.obra-bloque h2{
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  margin:0; color:var(--azul); padding-bottom:10px;
  border-bottom:1px solid var(--linea);
}
.obra-bloque .desc{font-size:13px; color:var(--tenue); margin:12px 0 18px; max-width:60em}
.tabla-wrap{overflow-x:auto}
table.planos{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
table.planos th,table.planos td{
  padding:13px 10px 13px 0; text-align:left; border-bottom:1px solid var(--linea);
}
table.planos thead th{
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--tenue); border-bottom:1px solid var(--slate); padding-bottom:9px;
}
table.planos td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
table.planos td.denom{font-weight:600; color:var(--navy); text-transform:uppercase;
  font-size:13px; letter-spacing:.02em}
table.planos td.tit{color:var(--slate)}
.pill{
  display:inline-block; padding:4px 11px; font-size:12px; font-weight:600;
  color:#fff; background:var(--ok); white-space:nowrap; letter-spacing:.04em;
}
.centrado{padding:64px 24px; text-align:center; color:var(--tenue)}