:root { --fondo:#1E2022; --superficie:#272A2D; --borde:#3A3E42; --texto:#F2F3F4; --suave:#A9AEB3; --ambar:#D9DA00; --peligro:#E63946; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header, main, footer { width:100%; max-width:760px; margin:0 auto; padding:0 20px; }
header { padding-top:24px; padding-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
header img { height:30px; width:auto; display:block; }
nav a { color:var(--suave); text-decoration:none; margin-left:16px; font-size:14px; }
nav a:hover { color:var(--ambar); }
main { padding-top:16px; padding-bottom:48px; }
h1 { font-size:28px; line-height:1.25; margin:24px 0 4px; }
h2 { font-size:19px; margin:32px 0 8px; color:var(--ambar); }
p, li { color:var(--texto); }
li { margin:4px 0; }
a { color:var(--ambar); }
.fecha { color:var(--suave); font-size:14px; margin:0 0 16px; }
.caja { background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:16px 18px; margin:16px 0; }
.caja.alerta { border-color:var(--peligro); }
.pendiente { background:#4a4200; color:#fff3a0; padding:0 4px; border-radius:4px; }
table { width:100%; border-collapse:collapse; font-size:14px; margin:12px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); vertical-align:top; }
th { color:var(--suave); font-weight:600; }
footer { padding-top:16px; padding-bottom:40px; color:var(--suave); font-size:13px; border-top:1px solid var(--borde); }
.boton { display:inline-block; background:var(--ambar); color:#000; font-weight:800; padding:12px 20px; border-radius:10px; text-decoration:none; margin:8px 8px 8px 0; }
.boton.sec { background:var(--superficie); color:var(--texto); border:1px solid var(--borde); }

/* Portada */
.heroe { padding:32px 0 8px; }
.heroe h1 { font-size:clamp(30px,7vw,44px); line-height:1.1; margin:8px 0 12px; }
.heroe h1 em { font-style:normal; color:var(--ambar); }
.heroe p { color:var(--suave); font-size:18px; max-width:34em; margin:0 0 8px; }
.descarga { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 4px; }
.descarga .boton { margin:0; }
.boton.apagado { background:var(--superficie); color:var(--suave); border:1px dashed var(--borde); cursor:default; }
.nota-descarga { color:var(--suave); font-size:14px; margin:6px 0 0; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0; }
.rejilla .caja { margin:0; }
.rejilla h3 { margin:0 0 6px; font-size:16px; color:var(--ambar); }
.rejilla p { margin:0; color:var(--suave); font-size:15px; }