/* =========================================================================
   Ayuntamiento de Robleda-Cervantes — Portal de producción fotovoltaica
   Hoja única. Sin dependencias ni compilación.

   MOBILE FIRST: los estilos base son los del móvil. Las media queries solo
   añaden, nunca deshacen. Puntos de ruptura: 600px (tablet) y 940px (escritorio).

   Paleta: piedra caliza y pino de Sanabria + ámbar solar.
   Tipografía: Fraunces (titulares) + Atkinson Hyperlegible (texto).
   Atkinson Hyperlegible la diseñó el Braille Institute para baja visión:
   elección deliberada por el perfil de población y por la obligación de
   accesibilidad del RD 1112/2018 (WCAG 2.1 AA).
   ========================================================================= */

/* ---------- 1. Variables ---------- */
:root{
  --papel:#faf7f1; --papel-2:#f3eee3; --papel-3:#e9e1d0; --piedra:#dbd2be;
  --pino:#14332d; --pino-2:#265045; --pino-3:#3f6a5e;

  /* --pino es el FONDO institucional (cabecera, pie, cintas).
     --titular es el color de TEXTO destacado. Empezaron siendo la misma
     variable y en modo oscuro, al oscurecer --pino para los fondos, todo
     lo que lo usaba como texto se volvía ilegible. Separarlas evita que
     el fallo vuelva cada vez que se añade un elemento nuevo. */
  --titular:#14332d;
  --ambar:#c9722a; --ambar-2:#eda038; --ambar-3:#f7d070;
  --vivo:#2f7d5b; --alerta:#a8541f;
  --tinta:#171610; --tinta-2:#474136; --tinta-3:#6f6858;

  --sombra:0 1px 2px rgba(20,51,45,.05), 0 10px 28px -14px rgba(20,51,45,.22);
  --sombra-2:0 2px 4px rgba(20,51,45,.07), 0 20px 44px -22px rgba(20,51,45,.3);

  --ancho:1120px;
  --x:1.15rem;                    /* margen lateral en móvil */
  --r:5px; --r-g:12px;

  --display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --texto:'Atkinson Hyperlegible','Segoe UI',Verdana,sans-serif;
}

/* ---------- 2. Reinicio ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--texto);
  font-size:1rem; line-height:1.62;
  color:var(--tinta); background-color:var(--papel);
  background-image:
    radial-gradient(680px 380px at 84% -8%, rgba(237,160,56,.10), transparent 62%),
    radial-gradient(520px 320px at 0% 4%,   rgba(20,51,45,.05),   transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment:scroll,scroll,fixed;   /* fixed en móvil cuesta caro: solo el grano */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,picture{display:block;max-width:100%}
a{color:var(--pino-2);text-underline-offset:.18em}
a:hover{color:var(--ambar)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:3px}

.envoltorio{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--x)}

.saltar{position:absolute;left:-999px;top:0;z-index:99;background:var(--pino);color:#fff;padding:.7rem 1.1rem;font-weight:700}
.saltar:focus{left:.5rem;top:.5rem}

/* ---------- 3. Cabecera ---------- */
.cabecera{position:relative;background:var(--pino);color:#f2efe6;overflow:hidden}
.cabecera__relieve{position:absolute;inset:0;color:#fff;opacity:.10;pointer-events:none}
.cabecera__relieve svg{width:100%;height:100%}

.cabecera__interior{
  position:relative;display:flex;align-items:center;
  gap:.95rem;padding-block:1.15rem;
}
.cabecera__escudo{width:44px;height:auto;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.cabecera__supra{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.3;
}
.cabecera__titulo{
  font-family:var(--display);font-variation-settings:'opsz' 96,'SOFT' 20;
  font-weight:600;font-size:1.5rem;line-height:1.04;letter-spacing:-.022em;color:#fdfcf8;
}
.cabecera__sub{font-size:.78rem;color:rgba(255,255,255,.68);margin-top:.2em}

.navegacion{position:relative;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.1)}
.navegacion__interior{
  display:flex;gap:1.15rem;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.navegacion__interior::-webkit-scrollbar{display:none}
.navegacion__enlace{
  flex:none;padding:.8rem .1rem;font-size:.84rem;font-weight:700;
  color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .16s,border-color .16s;
}
.navegacion__enlace--activo{color:#fff;border-bottom-color:var(--ambar-3)}

/* ---------- 4. Secciones ---------- */
.seccion{padding-block:2.1rem}
.seccion--alterna{background:var(--papel-2);border-block:1px solid var(--piedra)}

.rotulo{display:flex;align-items:center;gap:.7rem;margin-bottom:1.05rem}
.rotulo__linea{width:26px;height:2px;background:var(--ambar);flex:none}
.rotulo__texto{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ambar)}

.titulo{
  font-family:var(--display);font-variation-settings:'opsz' 60,'SOFT' 12;
  font-weight:600;font-size:1.42rem;line-height:1.16;letter-spacing:-.017em;
  color:var(--titular);
}
.parrafo{max-width:68ch;margin-top:.85rem;color:var(--tinta-2);font-size:.95rem}
.parrafo--menor{font-size:.87rem;color:var(--tinta-3);margin-top:.9rem}
.nota{
  margin-top:1.1rem;font-size:.85rem;color:var(--tinta-3);max-width:66ch;
  padding-left:.8rem;border-left:2px solid var(--piedra);
}

/* ---------- 5. Panel de tiempo real ---------- */
.panel{
  background:#fffdf8;border:1px solid var(--piedra);border-radius:var(--r-g);
  box-shadow:var(--sombra-2);padding:1.2rem 1rem 1.35rem;position:relative;overflow:hidden;
}
.panel::before{
  content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--ambar),var(--ambar-2) 45%,var(--ambar-3));
}

.medidor{display:flex;flex-direction:column;align-items:center}
.medidor__svg{width:100%;max-width:290px;height:auto;overflow:visible}
.medidor__pista{fill:none;stroke:var(--papel-3);stroke-width:14;stroke-linecap:round}
.medidor__arco{
  fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:1 1000;
  transition:stroke-dasharray 1.1s cubic-bezier(.22,.68,.36,1);
}
.medidor__sol{
  fill:#fff8e6;stroke:var(--ambar);stroke-width:3;
  transition:cx 1.1s cubic-bezier(.22,.68,.36,1),cy 1.1s cubic-bezier(.22,.68,.36,1);
  filter:drop-shadow(0 0 8px rgba(237,160,56,.9));
}
.medidor__marca{font-family:var(--texto);font-size:12px;fill:var(--tinta-3);font-weight:700}

.medidor__valor{
  font-family:var(--display);font-variation-settings:'opsz' 144,'SOFT' 0;
  font-weight:600;font-size:3.4rem;line-height:.9;letter-spacing:-.035em;
  color:var(--titular);font-variant-numeric:tabular-nums;margin-top:-.45rem;
}
.medidor__unidad{
  font-family:var(--texto);font-size:.27em;font-weight:700;
  color:var(--ambar);margin-left:.3em;vertical-align:.7em;
}
.medidor__pie{margin-top:.55rem;font-size:.8rem;color:var(--tinta-3);text-align:center}

.panel__lateral{display:flex;flex-direction:column;gap:.85rem;margin-top:1.35rem}
.estado{
  display:inline-flex;align-items:center;gap:.55rem;align-self:center;
  padding:.38rem .85rem .38rem .68rem;border-radius:999px;
  background:rgba(47,125,91,.1);border:1px solid rgba(47,125,91,.28);
  font-size:.79rem;font-weight:700;color:#1f5c42;
}
.estado__punto{
  width:8px;height:8px;border-radius:50%;background:var(--vivo);flex:none;
  animation:latido 2.4s ease-out infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(47,125,91,.5)}
  70%{box-shadow:0 0 0 9px rgba(47,125,91,0)}
  100%{box-shadow:0 0 0 0 rgba(47,125,91,0)}
}
.estado--reposo{background:rgba(111,104,88,.1);border-color:rgba(111,104,88,.28);color:var(--tinta-2)}
.estado--reposo .estado__punto{background:var(--tinta-3);animation:none}
.estado--fallo{background:rgba(168,84,31,.1);border-color:rgba(168,84,31,.3);color:var(--alerta)}
.estado--fallo .estado__punto{background:var(--alerta);animation:none}

.marca-tiempo{font-size:.8rem;color:var(--tinta-3);text-align:center;margin-top:-.5rem}

.cifras{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--piedra);border:1px solid var(--piedra);border-radius:var(--r);
}
.cifra{background:#fffdf8;padding:.8rem .85rem}
.cifra__etiqueta{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.cifra__valor{
  font-family:var(--display);font-variation-settings:'opsz' 48,'SOFT' 0;
  font-weight:600;font-size:1.3rem;color:var(--titular);margin-top:.12em;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.cifra__unidad{font-family:var(--texto);font-size:.55em;font-weight:400;color:var(--tinta-3);letter-spacing:0}

/* ---------- 6. Tarjetas de instalación ---------- */
.tarjetas{display:grid;gap:.85rem;margin-top:1.4rem}
.tarjeta{
  background:#fffdf8;border:1px solid var(--piedra);border-radius:var(--r-g);
  padding:1rem 1.05rem;box-shadow:var(--sombra);
}
.tarjeta__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.tarjeta__nombre{
  font-family:var(--display);font-variation-settings:'opsz' 40,'SOFT' 10;
  font-weight:600;font-size:1.08rem;color:var(--titular);line-height:1.2;
}
.tarjeta__desc{font-size:.79rem;color:var(--tinta-3);margin-top:.15em}
.tarjeta__insignia{
  flex:none;font-size:.7rem;font-weight:700;padding:.22rem .5rem;border-radius:999px;
  background:var(--papel-2);border:1px solid var(--piedra);color:var(--tinta-2);white-space:nowrap;
}
.tarjeta__insignia--viva{background:rgba(47,125,91,.11);border-color:rgba(47,125,91,.3);color:#1f5c42}

.barra-uso{height:7px;border-radius:99px;background:var(--papel-3);margin:.85rem 0 .3rem;overflow:hidden}
.barra-uso__relleno{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ambar),var(--ambar-2));
  width:0;transition:width 1s cubic-bezier(.22,.68,.36,1);
}
.barra-uso__pie{font-size:.72rem;color:var(--tinta-3);display:flex;justify-content:space-between}

.tarjeta__datos{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.9rem}
.tarjeta__dato{text-align:left}
.tarjeta__cifra{
  font-family:var(--display);font-variation-settings:'opsz' 36,'SOFT' 0;
  font-weight:600;font-size:1.05rem;color:var(--titular);
  font-variant-numeric:tabular-nums;display:block;line-height:1.15;
}
.tarjeta__et{font-size:.68rem;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em}

/* ---------- 7. Histórico ---------- */
.controles{display:flex;flex-direction:column;gap:.8rem;margin:1.1rem 0}
.conmutador{
  display:inline-flex;border:1px solid var(--piedra);border-radius:999px;
  background:#fffdf8;padding:3px;align-self:flex-start;
}
.conmutador__boton{
  font-family:inherit;font-size:.8rem;font-weight:700;padding:.42rem .95rem;
  border:0;border-radius:999px;background:transparent;color:var(--tinta-3);cursor:pointer;
  transition:background .16s,color .16s;min-height:36px;
}
.conmutador__boton--activo{background:var(--pino);color:#fff}

.selector{display:flex;flex-direction:column;gap:.25rem}
.selector__etiqueta{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.selector__campo{
  font-family:inherit;font-size:.88rem;padding:.55rem .7rem;min-height:42px;
  border:1px solid var(--piedra);border-radius:var(--r);background:#fffdf8;color:var(--tinta);
  width:100%;max-width:340px;
}

.grafico{
  background:#fffdf8;border:1px solid var(--piedra);border-radius:var(--r-g);
  padding:.9rem .7rem;box-shadow:var(--sombra);
}
.grafico__lienzo{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.grafico__pie{margin-top:.7rem;font-size:.78rem;color:var(--tinta-3);padding-inline:.2rem}

.barra{fill:var(--ambar-2);transition:fill .14s}
.barra--maxima{fill:var(--pino-2)}
.eje-linea{stroke:var(--papel-3);stroke-width:1}
.eje-texto{font-family:var(--texto);font-size:10px;fill:var(--tinta-3)}

.resumen{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--piedra);
  border:1px solid var(--piedra);border-radius:var(--r);margin-top:1.2rem;
}
.resumen__dato{background:var(--papel);padding:.85rem 1rem}
.resumen__cifra{
  display:block;font-family:var(--display);font-variation-settings:'opsz' 48,'SOFT' 0;
  font-weight:600;font-size:1.5rem;color:var(--ambar);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.resumen__etiqueta{font-size:.75rem;color:var(--tinta-3);display:block;margin-top:.1em}

.equivalencia{
  margin-top:1.15rem;padding:.9rem 1rem;background:rgba(47,125,91,.07);
  border-left:3px solid var(--vivo);border-radius:0 var(--r) var(--r) 0;
  font-size:.9rem;color:var(--tinta-2);max-width:70ch;
}
.equivalencia strong{color:var(--titular)}

/* Descarga del CSV: es una utilidad secundaria, no una llamada a la
   acción. Va bajo el gráfico, alineada a la derecha y discreta, para no
   competir con las cifras. El área táctil sigue siendo de 44 px. */
.descarga{display:flex;justify-content:flex-end;margin-top:.5rem}
.boton-descarga{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:var(--tinta-3);text-decoration:none;
  padding:.55rem .2rem;min-height:44px;
  border-bottom:1px solid transparent;
  transition:color .16s,border-color .16s;
}
.boton-descarga::before{content:'↓';font-size:.95em}
.boton-descarga:hover{color:var(--ambar);border-bottom-color:var(--ambar)}

/* ---------- 8. Financiación ---------- */
.financiacion{display:grid;gap:1.4rem}
.emblemas{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  background:#fffdf8;border:1px solid var(--piedra);border-radius:var(--r-g);
  padding:1.1rem;box-shadow:var(--sombra);
}
.emblema:first-child{grid-column:1 / -1}
.emblema svg{width:100%;max-width:124px;height:auto;border-radius:2px}
.emblema__pie{display:block;font-size:.7rem;line-height:1.42;color:var(--tinta-3);margin-top:.45rem}
.emblema__hueco{
  display:grid;place-items:center;text-align:center;max-width:124px;aspect-ratio:3/2;
  border:1.5px dashed var(--piedra);border-radius:2px;font-size:.68rem;font-weight:700;
  color:var(--tinta-3);background:var(--papel-2);padding:.3rem;
}

/* ---------- 9. Contacto ---------- */
.contacto{display:grid;gap:.7rem;margin-top:1.3rem}
.contacto__via{
  display:block;background:#fffdf8;border:1px solid var(--piedra);border-radius:var(--r-g);
  padding:.9rem 1rem;text-decoration:none;box-shadow:var(--sombra);
  transition:border-color .16s,transform .16s;
}
.contacto__via:hover{border-color:var(--ambar);transform:translateY(-1px)}
.contacto__via--pasiva{pointer-events:none}
.contacto__etiqueta{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3);
}
.contacto__valor{
  display:block;font-weight:700;color:var(--titular);margin-top:.15em;
  font-size:.95rem;word-break:break-word;
}

/* ---------- 10. Pie ---------- */
.pie{background:var(--pino);color:rgba(255,255,255,.8)}
.pie__interior{display:grid;gap:1.6rem;padding-block:1.9rem}
.pie__bandera{width:96px;height:auto;border-radius:3px;margin-bottom:.7rem;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pie__titulo{
  font-family:var(--display);font-variation-settings:'opsz' 32,'SOFT' 10;
  font-weight:600;font-size:1rem;color:#fdfcf8;margin-bottom:.5rem;
}
.pie__linea{font-size:.86rem;line-height:1.7}
.pie__linea--tenue{color:rgba(255,255,255,.58);font-size:.79rem;max-width:40ch;margin-top:.3rem}
.pie a{color:rgba(255,255,255,.86)}
.pie a:hover{color:var(--ambar-3)}
.pie__base{border-top:1px solid rgba(255,255,255,.12);padding-block:.95rem;font-size:.78rem;color:rgba(255,255,255,.55)}


/* ---------- 6b. Instalación sin monitorizar ---------- */
.tarjeta--pendiente{border-style:dashed;background:var(--papel-2)}
.tarjeta--pendiente .tarjeta__cifra{color:var(--tinta-3)}
.tarjeta__aviso{
  margin-top:.85rem;padding:.6rem .75rem;font-size:.78rem;line-height:1.45;
  background:rgba(201,114,42,.09);border-left:3px solid var(--ambar);
  border-radius:0 var(--r) var(--r) 0;color:var(--tinta-2);
}
.tarjeta__foto{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);
  margin-bottom:.85rem;background:var(--papel-3);
}

/* ---------- 7b. El proyecto ---------- */
.subtitulo{
  font-family:var(--display);font-variation-settings:'opsz' 36,'SOFT' 10;
  font-weight:600;font-size:1.1rem;color:var(--titular);margin-top:1.8rem;margin-bottom:.3rem;
}
.datos-proyecto{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1.5rem;
  background:var(--piedra);border:1px solid var(--piedra);border-radius:var(--r);
}
.dato-proyecto{background:#fffdf8;padding:1rem .9rem;text-align:center}
.dato-proyecto__cifra{
  display:block;font-family:var(--display);font-variation-settings:'opsz' 60,'SOFT' 0;
  font-weight:600;font-size:1.7rem;color:var(--ambar);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.dato-proyecto__et{
  display:block;font-size:.72rem;color:var(--tinta-3);margin-top:.25em;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}

.ficha{margin-top:1rem;border-top:1px solid var(--piedra)}
.ficha__fila{
  display:grid;grid-template-columns:1fr;gap:.1rem;
  padding:.8rem 0;border-bottom:1px solid var(--piedra);
}
.ficha__fila dt{font-weight:700;color:var(--tinta-2);font-size:.85rem}
.ficha__fila dd{color:var(--tinta);font-size:.95rem}

/* ---------- 8b. Galería ---------- */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.4rem}
.galeria__item{
  position:relative;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r);overflow:hidden;line-height:0;
}
.galeria__item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--papel-3);transition:transform .35s ease;
}
.galeria__item:hover img{transform:scale(1.05)}
.galeria__pie{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .6rem .45rem;
  font-family:var(--texto);font-size:.72rem;line-height:1.3;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(12,28,24,.85));
}

/* Visor a pantalla completa */
.visor{
  border:0;padding:0;max-width:100vw;max-height:100vh;width:100%;height:100%;
  background:rgba(10,20,17,.94);color:#fff;
}
.visor::backdrop{background:rgba(10,20,17,.85)}
.visor__img{
  max-width:94vw;max-height:78vh;margin:auto;object-fit:contain;
  border-radius:var(--r);display:block;
}
.visor__pie{text-align:center;padding:.9rem 1rem;font-size:.88rem;color:rgba(255,255,255,.85)}
.visor__cerrar{
  position:absolute;top:.6rem;right:.8rem;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.4);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
}
.visor[open]{display:flex;flex-direction:column;justify-content:center}

/* ---------- 8c. Emblemas oficiales ---------- */
.emblemas{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;
  background:#fff;border:1px solid var(--piedra);border-radius:var(--r-g);
  padding:1.2rem;box-shadow:var(--sombra);margin-top:1.4rem;
}
.emblemas img{height:38px;width:auto;object-fit:contain}
.emblemas img[alt*="DUS"]{height:34px}

/* ---------- 8d. Tabla del cartel ---------- */
.tabla-envoltorio{margin-top:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-cartel{width:100%;border-collapse:collapse;font-size:.84rem;min-width:0}
.tabla-cartel th{
  background:var(--pino);color:#fff;text-align:left;padding:.6rem .7rem;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
}
.tabla-cartel td{padding:.65rem .7rem;border-bottom:1px solid var(--piedra);background:#fffdf8;vertical-align:top}
.tabla-cartel__importe{font-weight:700;color:var(--titular);white-space:nowrap;font-variant-numeric:tabular-nums}

/* En móvil la tabla se apila: 6 columnas no caben sin volverse ilegibles */
@media (max-width:719px){
  .tabla-cartel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-cartel td{display:block;border:0;padding:.5rem .8rem}
  .tabla-cartel tbody tr{
    display:block;border:1px solid var(--piedra);border-radius:var(--r);
    overflow:hidden;background:#fffdf8;
  }
  .tabla-cartel td::before{
    content:attr(data-et);display:block;font-size:.64rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.07em;color:var(--ambar);margin-bottom:.1rem;
  }
  .tabla-cartel td + td{border-top:1px solid var(--papel-3)}
}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================================
   TABLET  ≥600px
   ========================================================================= */
@media (min-width:600px){
  :root{--x:1.7rem}
  body{font-size:1.03rem}

  .cabecera__interior{gap:1.25rem;padding-block:1.6rem}
  .cabecera__escudo{width:58px}
  .cabecera__titulo{font-size:2.2rem}
  .cabecera__sub{font-size:.88rem}
  .cabecera__supra{font-size:.72rem}

  .seccion{padding-block:3rem}
  .titulo{font-size:1.85rem}
  .medidor__valor{font-size:4.2rem}

  .controles{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .selector{max-width:290px;width:100%}

  .tarjetas{grid-template-columns:1fr 1fr}
  .resumen{grid-template-columns:repeat(3,1fr)}
  .datos-proyecto{grid-template-columns:repeat(4,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .ficha__fila{grid-template-columns:minmax(190px,.44fr) 1fr;gap:.5rem 1.4rem}
  .emblemas img{height:44px}
  .emblemas{grid-template-columns:repeat(3,1fr)}
  .emblema:first-child{grid-column:auto}
  .contacto{grid-template-columns:repeat(3,1fr)}
  .pie__interior{grid-template-columns:repeat(3,1fr);gap:2rem}
  .grafico{padding:1.3rem}
}

/* =========================================================================
   ESCRITORIO  ≥940px
   ========================================================================= */
@media (min-width:940px){
  :root{--x:2.4rem}

  .cabecera__interior{gap:1.7rem;padding-block:2.3rem}
  .cabecera__escudo{width:74px}
  .cabecera__titulo{font-size:3.1rem}
  .navegacion__interior{gap:2rem}
  .navegacion__enlace{font-size:.9rem;padding-block:.9rem}

  .seccion{padding-block:4.2rem}
  .titulo{font-size:2.2rem;max-width:24ch}

  .panel{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:2.6rem;align-items:center;padding:2.4rem;
  }
  .panel__lateral{margin-top:0;gap:1.1rem}
  .estado{align-self:flex-start}
  .marca-tiempo{text-align:left}
  .medidor__svg{max-width:340px}
  .medidor__valor{font-size:4.9rem}
  .cifra__valor{font-size:1.6rem}
  .cifra{padding:.95rem 1.05rem}

  .tarjetas{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .galeria{grid-template-columns:repeat(4,1fr)}
  .emblemas img{height:50px}
  .financiacion{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:3rem;align-items:start}
  .emblemas{grid-template-columns:1fr 1fr}
  .emblema:first-child{grid-column:1 / -1}
}

/* ---------- 11. Modo oscuro ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --papel:#13140e; --papel-2:#191b13; --papel-3:#26281f; --piedra:#3a3d31;
    --tinta:#f2efe4; --tinta-2:#cdc7b6; --tinta-3:#98917f;
    --pino:#0d211c; --pino-2:#3f8a76;
    /* Texto destacado: claro. Basta con esta línea porque ningún
       elemento usa ya --pino como color de letra. */
    --titular:#eee7d6;
  }
  body{background-color:#13140e}
  .panel,.grafico,.cifra,.conmutador,.tarjeta,.contacto__via,.selector__campo,
  .dato-proyecto,.tabla-cartel td{background:#1b1d15}
  .emblemas{background:#f3eee3}
  .tarjeta--pendiente{background:#191b13}
  .resumen__dato{background:#181a12}
  .medidor__pista{stroke:#2b2e24}
  .emblema__hueco{background:#212318}
  .cabecera,.pie{background:#0d211c}
}

/* ---------- 12. Impresión (el inspector del IDAE imprime) ---------- */
@media print{
  body{background:#fff;color:#000}
  .navegacion,.saltar,.conmutador,.descarga,.selector{display:none}
  .panel,.grafico,.tarjeta{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .cabecera{background:#fff;color:#000}
  .cabecera__relieve{display:none}
  .cabecera__titulo,.titulo{color:#000}
  .tarjetas{grid-template-columns:repeat(3,1fr)}
  a[href^="mailto"]::after,a[href^="tel"]::after{content:""}
}