/* Monitor Revidere · sistema visual "tinta y verde": papel cálido, tinta casi negra, verde Revidere atenuado como acento y lavanda para comparar. Raleway 700 para titulares, DM Sans para texto.
   El acento pasó de lima eléctrica (#c8ff3e) al verde oficial de marca #30b71a (27-sep-2026, a pedido de Aldo: "que sea el verde Revidere, atenuado/disminuido") -- ya es un verde bastante más sobrio que el lima, y el texto negro (--brand-on) se sigue leyendo bien encima (contraste ~7.9:1). */
:root{
  --page:#f6f6f2; --surface:#ffffff; --surface2:#efefe9; --ink:#0f1115; --ink2:#4a4d55; --muted:#62666f;
  --grid:#e3e3dc; --axis:#c4c5bd; --line:rgba(15,17,21,.1);
  --brand:#30b71a; --brand-ink:#245600; --brand-soft:#e3f6da; --brand-on:#0f1115; --accent2:#8b8cff; --accent2-ink:#5658d6;
  --hdr:#0f1115; --dark:#0f1115; --dark2:#1a1d23;
  --blue:#5658d6; --bar:#c4c5bd; --ok:#2ea043; --warn:#e3a008; --warn-ink:#9a6400; --bad:#d9412c; --coral:#ff6b57;
  --s0:#f2ffd6; --s1:#cdf57a; --s2:#95d62b; --s3:#55a30a; --s4:#245600;
  --s0i:#0f1115; --s1i:#0f1115; --s2i:#0f1115; --s3i:#0f1115; --s4i:#ffffff;
  --shadow:0 1px 2px rgba(15,17,21,.04),0 12px 32px -22px rgba(15,17,21,.3);
  --f-display:"Raleway","Segoe UI",system-ui,sans-serif; --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-variant-numeric:lining-nums;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent2-ink);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- encabezado (una sola línea) ---------- */
.top{background:var(--hdr);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:9px;max-width:1400px}
.logoplate{display:flex;align-items:center;flex:none;text-decoration:none;padding:2px 0}
.logoplate img{height:50px;width:auto;display:block}
/* Logo de la cámara aliada (Alianzas): al otro extremo del de Revidere, con una separación de la cuenta;
   se muestra solo cuando el sitio se ve desde el subdominio de esa alianza (ver app.js, fijarAlianza).
   Va sobre una placa blanca fija —igual que el logo de Revidere en los portales— porque el logo de cada
   cámara lo sube tal cual el admin y casi ninguno trae versión "negativa" para fondo oscuro. */
.alianza-logo{height:30px;width:auto;display:block;flex:none;margin-left:12px;padding:4px 10px;background:#fff;border-radius:8px}
@media (max-width:640px){.alianza-logo{height:22px;padding:3px 7px}}
/* Admin › Alianzas: muestrita de color y miniatura del logo en la tabla */
.swatch{display:inline-block;width:15px;height:15px;border-radius:4px;background:var(--sw,#ccc);border:1px solid var(--line);vertical-align:middle}
.alianza-thumb{height:20px;width:auto;display:inline-block;vertical-align:middle;margin-right:6px;background:var(--dark);border-radius:3px;padding:2px}
.tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;white-space:nowrap}
.tab{background:none;border:0;color:#c9d2dc;padding:8px 9px;border-radius:999px;font-weight:500;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;flex:none}
/* "Más ▾": cuando no caben todas las pestañas, las que sobran se agrupan aquí en vez de desbordarse sin avisar.
   Se recalcula en cada pintarNav() y en cada resize (ver app.js), así que crece solo según cuántas pestañas quepan
   en el ancho disponible: no hay que tocar este CSS al agregar rutas nuevas. */
.tabs-mas-wrap{position:relative;display:inline-flex;flex:none}
.tab-mas .car{font-size:10px;margin-left:1px}
.tabs-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;max-width:260px;max-height:min(60vh,420px);overflow-y:auto;background:var(--dark2);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px;box-shadow:0 16px 40px -14px rgba(0,0,0,.55);display:none;z-index:40}
.tabs-menu.abierto{display:grid;gap:1px}
.tabs-menu-item{display:block;padding:9px 12px;border-radius:9px;color:#e7e9ee;text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap}
.tabs-menu-item:hover{background:rgba(255,255,255,.09);color:#fff}
.tabs-menu-item[aria-current="page"]{background:var(--brand);color:var(--brand-on);font-weight:700}
@media (max-width:1400px){.tab{padding:8px 7px;font-size:13px}.top .wrap{gap:10px}.lens{max-width:112px;padding:7px 9px}.acct .pill.sm{padding:8px 11px}}
.tab:hover{background:rgba(255,255,255,.09);color:#fff}
.tab[aria-current="page"]{background:#fff;color:#000;font-weight:700}
.acct{display:flex;align-items:center;gap:8px;flex:none}
.pill{background:var(--brand);color:var(--brand-on);border:0;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.pill{transition:transform 160ms var(--ease-out),filter 160ms ease}
@media (hover:hover) and (pointer:fine){.pill:hover{filter:brightness(1.07)}}
.pill:active{transform:scale(.97)}
.tbtn,.sug,.capa,.tab,.iconbtn,.rk-row{transition:transform 160ms var(--ease-out),border-color 160ms ease,background-color 160ms ease,color 160ms ease}
.tbtn:active,.sug:active,.capa:active,.iconbtn:active{transform:scale(.97)}
.pill.ghost{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.28)}
.pill.ghost:hover{border-color:#fff}
.pill.line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pill.line:hover{border-color:var(--muted)}
.pill.sm{padding:6px 13px;font-size:13px}
.pill.danger{background:var(--bad);color:#fff}
.pill[disabled]{opacity:.45;cursor:not-allowed}
.lens{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:7px 10px;font-size:13px;max-width:120px}
.lens option{color:#000}
.iconbtn{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;font-size:15px}
.iconbtn:hover{border-color:#fff}
@media (max-width:1180px){.lens{display:none}}
@media (max-width:900px){
  .top .wrap{flex-wrap:wrap;gap:8px 10px}
  .tabs{order:3;flex-basis:100%}
  .lens{display:none}
  .logoplate img{height:40px}
}

/* ---------- estructura ---------- */
main{padding-block:26px 70px;min-height:70vh}
.eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pagehead{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:flex-end}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.pagehead p.sub{max-width:62ch;color:var(--ink2);margin-top:10px;font-size:16px}
.sec{margin-top:38px}
.sec>h2,.sech h2{font-size:1.75rem;font-weight:700;letter-spacing:-.03em}
.sech{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between}
.lede{color:var(--ink2);margin-top:6px;max-width:72ch}
.grid{display:grid;gap:14px;margin-top:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);min-width:0}
.card h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.card .cap{color:var(--ink2);font-size:13.5px;margin-top:3px}
.cardhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.tag{font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:var(--surface)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.note{margin-top:10px;font-size:12.5px;color:var(--muted)}
.empty{border:1px dashed var(--axis);border-radius:12px;padding:18px;color:var(--ink2);font-size:14px}

/* chips de estatus */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink2);padding:2px 9px 2px 6px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);white-space:nowrap}
.chip i{font-style:normal;font-weight:700;font-size:11px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;line-height:1}
.chip.ok i{background:var(--ok)} .chip.rep i{background:var(--warn);color:#000} .chip.na i{background:var(--muted)}

/* botones de herramienta / filtros */
.tools{display:flex;gap:6px;flex-wrap:wrap}
.tbtn{background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;color:var(--ink2)}
.tbtn:hover{border-color:var(--muted);color:var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2)}
.field input,.field select,.field textarea,.sel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;color:var(--ink)}
.sel{width:auto;padding:8px 12px;font-size:13.5px}
.field .hint{font-size:12px;color:var(--muted)}
.frow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:12px}
.filterbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-top:18px}
.filterbar .field{min-width:170px}

/* ---------- portada (tinta y lima: secciones alternadas papel / tinta) ---------- */
body.portada main{padding-block:0 0;max-width:none;padding-inline:0}
.hero{position:relative;overflow:hidden;overflow:clip;padding:76px 0 60px;background:var(--page)} /* clip, no hidden: hidden se puede desplazar por scrollIntoView y esconde el título bajo la barra */
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:90%;background:radial-gradient(closest-side,rgba(48,183,26,.35),transparent 70%);pointer-events:none}
.herogrid{max-width:1180px;margin:0 auto;padding-inline:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;position:relative}
.herotext .eyebrow{color:var(--brand-ink)}
.hero h1{font-size:clamp(2.8rem,6.6vw,5rem);font-weight:700;letter-spacing:-.05em;line-height:.96;margin-top:14px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--brand) 58%);padding-inline:.06em;margin-inline:-.06em}
.hero .sub{font-size:18px;color:var(--ink2);margin-top:20px;max-width:48ch}
.loginbox{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 24px;max-width:480px;box-shadow:var(--shadow)}
.loginbox h2{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.loginbox p{color:var(--ink2);font-size:14px;margin-top:5px}
.loginbox .row{display:flex;gap:8px;margin-top:14px}
.loginbox .row input{flex:1;min-width:0;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:12px 18px;transition:border-color 160ms ease}
.loginbox .row input:focus{border-color:var(--brand);outline:none}
.codein{letter-spacing:.5em;font-size:1.5rem;font-weight:700;text-align:center;font-family:var(--f-display);font-variant-numeric:tabular-nums}
.msgline{font-size:13px;margin-top:10px;color:var(--ink2);min-height:1.2em}
.msgline.err{color:var(--bad)}
.pill.big{padding:14px 26px;font-size:15.5px}
.heromap{min-width:0}
.capas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.capa{background:var(--surface);border:1px solid var(--line);color:var(--ink2);border-radius:999px;padding:7px 14px;font-size:13.5px}
.capa.on{background:var(--ink);border-color:var(--ink);color:var(--page);font-weight:700}
@media (hover:hover) and (pointer:fine){.capa:hover{border-color:var(--ink)}}
.livemap .maphead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2);margin-bottom:10px}
.livemap .maphead b{color:var(--ink);font-family:var(--f-display);font-size:15px}
.livemap .tile rect{stroke:var(--page);transition:fill .5s var(--ease-in-out)}
.scalerow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.scalerow .note{margin-top:10px}
.ticker{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker .in{max-width:1180px;margin:0 auto;padding:22px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tk{background:var(--page);border:1px solid var(--line);border-radius:20px;padding:18px 20px}
.tk .l{font-size:12.5px;color:var(--ink2)}
.tk .v{font-family:var(--f-display);font-weight:700;font-size:2.6rem;letter-spacing:-.04em;line-height:1.05;margin-top:6px;color:var(--ink)}
.tk .p{font-size:12px;color:var(--muted);margin-top:6px}
.chapters{display:flex;flex-direction:column}
.chapter{padding:110px 0}
.chapter.dark{background:var(--dark);color:#f6f6f2}
.chapter.dark .eyebrow{color:var(--accent2)}
.chapter.dark .ch-n{color:var(--brand)}
.chapter.dark h2{color:#fff}
.chapter.dark p{color:rgba(246,246,242,.75)}
.chapter.dark .tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#f6f6f2}
.chapter.dark .sug{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#f6f6f2}
.chapter.dark .gapdemo{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.chapter.dark .gb .gl,.chapter.dark .gapdemo .l{color:rgba(246,246,242,.7)} .chapter.dark .gb .gl b,.chapter.dark .gb .gv{color:#fff}
.chapter.dark .gb .gt{background:rgba(255,255,255,.1)}
.chapter.dark .gb.b .gt i{background:#f6f6f2}
.chapter.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#f6f6f2}
.chapter .in{max-width:1180px;margin:0 auto;padding-inline:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.chapter.alt .ch-text{order:2}
.ch-n{font-family:var(--f-display);font-weight:700;font-size:clamp(4rem,10vw,7.5rem);line-height:.9;letter-spacing:-.06em;color:var(--ink);margin-bottom:14px}
.ch-n::after{content:"";display:block;width:.9em;height:.12em;background:var(--brand);border-radius:99px;margin-top:.1em}
.chapter.dark .ch-n::after{background:var(--brand)}
.chapter .eyebrow{color:var(--brand-ink)}
.chapter h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin-top:10px}
.chapter p{color:var(--ink2);font-size:17px;margin-top:14px;max-width:50ch}
.ch-vis{min-width:0}
.ch-vis .tags{margin-top:0}
.ch-vis .sug{font-size:14.5px;padding:11px 18px}
@media (prefers-reduced-motion:no-preference){.chapter .ch-text,.chapter .ch-vis{transition:transform .6s var(--ease-out)}.chapter:not(.in-view) .ch-text{transform:translateY(16px)}.chapter:not(.in-view) .ch-vis{transform:translateY(26px)}}
.gapdemo{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.gapdemo .l{font-size:12.5px;color:var(--muted)}
.gb{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;font-size:14.5px}
.gb .gl{color:var(--ink2)} .gb .gl b{color:var(--ink);font-weight:700}
.gb .gt{height:16px;background:var(--surface2);border-radius:8px;overflow:hidden}
.gb .gt i{display:block;height:100%;border-radius:8px;background:var(--bar);transition:width .8s var(--ease-out)}
.gb.a .gt i{background:var(--brand)} .gb.b .gt i{background:var(--ink)} .gb.c .gt i{background:var(--coral)}
.gb .gv{font-weight:700;font-family:var(--f-display);font-size:1.1rem}
.howsec{background:var(--brand);color:#0f1115;padding:110px 20px;text-align:center}
.howsec h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.04em}
.howsec p{color:rgba(15,17,21,.75);max-width:60ch;margin:14px auto 26px;font-size:17px}
.howsec .pill{background:#0f1115;color:#fff}
body.portada footer{background:var(--hdr);color:rgba(246,246,242,.7);border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){.herogrid{grid-template-columns:minmax(0,1fr);gap:28px}.hero{padding:40px 0 44px}.chapter{padding:64px 0}.chapter .in{grid-template-columns:minmax(0,1fr);gap:22px}.chapter.alt .ch-text{order:0}.heromap{max-width:520px}.howsec{padding:70px 20px}}

/* ---------- KPI y frases ---------- */
.kpi{display:flex;flex-direction:column;gap:5px;padding:16px 18px}
.kpi .lb{font-size:12.5px;color:var(--ink2);display:flex;justify-content:space-between;gap:8px;align-items:center}
.kpi .val{font-family:var(--f-display);font-variant-numeric:lining-nums;font-weight:700;font-size:2.5rem;letter-spacing:-.03em;line-height:1.08;overflow-wrap:anywhere}
.kpi .val small{font-size:.85rem;font-weight:700;color:var(--ink2);margin-left:4px;letter-spacing:0}
.kpi .dl{font-size:13px;color:var(--ink2)}
.kpi .rk{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi .src{font-size:12px;color:var(--muted)}
.kpi .src a{color:var(--muted)}
.kpi.na .val{color:var(--muted);font-size:1.3rem}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.badge.fuerte{color:var(--brand-ink);border-color:var(--brand-ink)}
.badge.atencion{color:var(--bad);border-color:var(--bad)}
.badge.ods{background:var(--ods-bg,#666);color:#fff;border-color:transparent}
.odsrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
details.rkfull{margin-top:12px}
details.rkfull>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--brand-ink);list-style:none}
details.rkfull>summary::-webkit-details-marker{display:none}
details.rkfull>summary::before{content:'▸ ';display:inline-block}
details.rkfull[open]>summary::before{content:'▾ '}
details.rkfull .tbl{margin-top:10px}
.rkmap{margin-top:14px}
.frases{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.frase{display:grid;grid-template-columns:28px 1fr;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.frase .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.frase.fuerte .ic{background:var(--brand);color:var(--brand-on);border-color:var(--brand)}
.frase.atencion .ic{background:var(--bad);color:#fff;border-color:var(--bad)}
.frase .tx{font-size:15.5px;line-height:1.45;font-weight:500}
.why{font-size:13.5px;color:var(--ink2);margin-top:6px}
.frase .why{font-size:13.5px;color:var(--ink2);margin-top:5px}
.frase .fs{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}
.frase .fs a{color:var(--muted)}
.frase.dest{border-color:var(--ink)}
.split{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:16px}
.split h3{font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.callout{margin-top:18px;background:var(--dark);color:#fff;border-radius:16px;padding:20px 22px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.callout b{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;line-height:1.2;max-width:34ch}
.callout span{opacity:.82;font-size:14px}

/* ---------- mapa de mosaicos ---------- */
.mapwrap{position:relative}
.tilemap{width:100%;height:auto;display:block;overflow:visible}
.tile{cursor:pointer}
.tile rect{stroke:var(--page);stroke-width:3}
.tile.t0 rect{fill:var(--s0)} .tile.t1 rect{fill:var(--s1)} .tile.t2 rect{fill:var(--s2)} .tile.t3 rect{fill:var(--s3)} .tile.t4 rect{fill:var(--s4)}
.tile.tn rect{fill:url(#hatch)}
.tile text{pointer-events:none;font-family:var(--f-body)}
.tile .ab{font-weight:700;font-size:13px}
.tile .vl{font-size:10.5px;font-variant-numeric:tabular-nums}
.tile.t0 text{fill:var(--s0i)} .tile.t1 text{fill:var(--s1i)} .tile.t2 text{fill:var(--s2i)} .tile.t3 text{fill:var(--s3i)} .tile.t4 text{fill:var(--s4i)} .tile.tn text{fill:var(--muted)}
.tile:hover rect,.tile:focus-visible rect{stroke:var(--ink);stroke-width:3}
.tile.sel rect{stroke:var(--ink);stroke-width:4}
.tile.mine .ab::after{content:" ●"}
.tile:focus{outline:none}
.tile.off{opacity:.28}
.hatchl{stroke:var(--axis);stroke-width:1.2}
.scale{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);margin-top:10px;flex-wrap:wrap}
.scale i{display:inline-block;width:26px;height:12px;border-radius:3px}
.scale i.t0{background:var(--s0)} .scale i.t1{background:var(--s1)} .scale i.t2{background:var(--s2)} .scale i.t3{background:var(--s3)} .scale i.t4{background:var(--s4)}
.scale i.tn{background:repeating-linear-gradient(45deg,var(--axis) 0 2px,transparent 2px 5px);border:1px solid var(--axis)}
.maplayout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:16px}
.maplayout .col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:960px){.maplayout{grid-template-columns:1fr}}
.rank{display:flex;flex-direction:column;margin-top:8px}
.rk-row{display:grid;grid-template-columns:26px minmax(90px,1fr) auto;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--grid);font-size:13.5px;background:none;border-inline:0;border-top:0;width:100%;text-align:left}
.rk-row:hover{background:var(--surface2)}
.rk-row .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.rk-row .v{font-weight:700;font-variant-numeric:tabular-nums}
.rk-row.mine .nm{font-weight:800}
.rk-row.mine .nm::after{content:" ●";color:var(--brand-ink)}

/* ---------- gráficas ---------- */
.chart{position:relative;margin-top:12px;touch-action:pan-y}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.ax{fill:var(--muted);font-size:11.5px;font-family:var(--f-body)}
.axl{stroke:var(--grid);stroke-width:1}
.axb{stroke:var(--axis);stroke-width:1}
.dot{fill:var(--bar);stroke:var(--surface);stroke-width:2}
.dot.mine{fill:var(--brand);stroke:var(--ink);stroke-width:1.5}
.dot.hot{fill:var(--ink)}
.natmark{fill:none;stroke:var(--ink);stroke-width:2}
.lnp{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lnpt{fill:var(--blue);stroke:var(--surface);stroke-width:2}
.lbl{fill:var(--ink);font-size:12px;font-weight:700;font-family:var(--f-body)}
.tt{position:fixed;z-index:70;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.18);border-radius:10px;padding:9px 11px;font-size:12.5px;min-width:140px;max-width:260px}
.tt .th{font-weight:700;margin-bottom:3px}
.tt .ts{color:var(--muted);font-size:11.5px;margin-top:2px}
.strips{display:flex;flex-direction:column;margin-top:12px}
.strip{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--grid)}
.strip:last-child{border-bottom:0}
.strip .nm{font-size:13.5px}
.strip .nm small{display:block;color:var(--muted);font-size:11.5px}
.strip .vv{font-weight:700;font-variant-numeric:tabular-nums;font-size:13.5px;text-align:right;white-space:nowrap}
.strip .vv small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.strip svg{width:100%;height:30px;overflow:visible}
@media (max-width:640px){.strip{grid-template-columns:1fr auto}.strip svg{grid-column:1/-1;order:3}}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{display:inline-block;width:11px;height:11px;border-radius:50%}
.key i.a{background:var(--brand)} .key i.b{background:var(--bar)} .key i.c{border:2px solid var(--ink);background:none}
.bars{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.brow{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:12px;align-items:center;font-size:13.5px}
.brow .bl{color:var(--ink2);overflow-wrap:anywhere}
.brow .bl.hl{color:var(--ink);font-weight:700}
.btrack{display:flex;align-items:center;gap:8px;min-width:0}
.bar{height:18px;border-radius:0 4px 4px 0;background:var(--bar);flex:none;min-width:2px}
.bar.hl{background:var(--brand)}
.bv{font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}

/* tablas */
.tbl{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:12px;white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.mine td{background:var(--surface2);font-weight:700}
.grp{margin-top:26px}
.grp h3{font-size:1.05rem;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;gap:10px}

/* calendario */
.ev{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--grid)}
.ev:last-child{border-bottom:0}
.ev .d{font-family:var(--f-display);font-weight:700;font-size:1.8rem;line-height:1;letter-spacing:-.02em}
.ev .d small{display:block;font-family:var(--f-body);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.ev .t b{display:block}
.ev .t span{color:var(--ink2);font-size:13px}
@media (max-width:560px){.ev{grid-template-columns:64px 1fr}.ev .chip{grid-column:2;justify-self:start}}

/* ---------- Revi ---------- */
.revibtn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:12px 20px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--surface);border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.22);padding-top:env(safe-area-inset-top,0px)}
.drawer header{background:var(--hdr);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.drawer header b{font-family:var(--f-display);font-size:1.1rem}
.drawer header small{display:block;font-size:12px;opacity:.75}
.chat{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{padding:11px 14px;border-radius:14px;max-width:92%;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{background:var(--ink);color:var(--surface);align-self:flex-end;border-bottom-right-radius:4px}
.msg.a{background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg .fx{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px;white-space:normal}
.msg .fx a{color:var(--muted)}
.msg.warn{border-color:var(--warn)}
.sugs{display:flex;flex-wrap:wrap;gap:8px}
.sug{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;text-align:left}
@media (hover:hover) and (pointer:fine){.sug:hover{border-color:var(--ink)}}
.askbar{display:flex;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.askbar textarea{flex:1;min-height:44px;max-height:120px;resize:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.typing{color:var(--muted);font-size:13px}

/* ---------- ventanas ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px;z-index:80;overflow-y:auto}
.dlg{background:var(--surface);border-radius:18px;padding:24px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4);margin-block:auto}
.dlg h2{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
.dlg p{color:var(--ink2);margin-top:6px;font-size:14px}
.dlg .btns{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;flex-wrap:wrap}
.steps{display:flex;gap:6px;margin-bottom:14px}
.steps i{height:4px;flex:1;border-radius:2px;background:var(--grid)} .steps i.on{background:var(--brand)}
.aviso{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink2);margin-top:12px}
.aviso h4{font-size:13px;color:var(--ink);margin-top:10px}
.aviso h4:first-child{margin-top:0}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px}
.chk input{margin-top:3px;accent-color:var(--brand);width:17px;height:17px;flex:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:999px;font-size:13.5px;z-index:95;max-width:90vw;text-align:center}

/* fuentes */
.src-card{display:flex;flex-direction:column;gap:8px}
.src-card h3{font-size:.98rem}
.src-card .meta{display:flex;flex-wrap:wrap;gap:6px}
.lvl{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.lvl.oficial{color:var(--brand-ink);border-color:var(--brand-ink)}
.conn{font-size:12.5px;color:var(--ink2)}
.flag{font-size:12.5px;color:var(--ink2);padding-left:14px;position:relative}
.flag::before{content:"•";position:absolute;left:2px;color:var(--warn-ink)}
.rem li{margin-top:6px;color:var(--ink2);font-size:14px}
.gov-hero{background:var(--dark);color:#fff;border-radius:18px;padding:24px 26px;margin-top:18px}
.gov-hero h2{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.gov-hero p{opacity:.85;margin-top:8px;max-width:70ch;font-size:15px}
.gap{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.gapbar{grid-column:1/-1}
.gapbar svg{width:100%;height:26px;overflow:visible}
.compare-cell{font-variant-numeric:tabular-nums}
footer{border-top:1px solid var(--line);padding-block:28px 50px;color:var(--ink2);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between}
footer p{max-width:72ch}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .frase,.card,.tk{animation:up .3s var(--ease-out) both}
  .frase:nth-child(2),.card:nth-child(2){animation-delay:40ms}.frase:nth-child(3),.card:nth-child(3){animation-delay:80ms}.frase:nth-child(4),.card:nth-child(4){animation-delay:120ms}.frase:nth-child(n+5),.card:nth-child(n+5){animation-delay:160ms}
  @keyframes up{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:700px){.tile .ab{font-size:9.5px}.tile .vl{font-size:8px}}

/* ---------- perfil largo de estado ---------- */
.phero{background:var(--dark);color:#f6f6f2;border-radius:28px;padding:34px 36px 30px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 40px;align-items:center}
.phero .eyebrow{color:var(--accent2)}
.phero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:700;letter-spacing:-.05em;line-height:.95;margin-top:10px;color:#fff}
.phero .sub{color:rgba(246,246,242,.75);font-size:16px;margin-top:14px;max-width:52ch}
.phero .tags{margin-top:18px}
.ph-map{justify-self:end;width:100%;max-width:320px}
.ph-map .tile rect{fill:rgba(255,255,255,.1);stroke:var(--dark)}
.ph-map .tile text{fill:rgba(246,246,242,.55)}
.ph-map .tile .ab{font-size:9px}
.ph-map .tile.sel rect{fill:var(--brand);stroke:var(--brand)}
@media (hover:hover) and (pointer:fine){.ph-map .tile:hover rect{fill:rgba(255,255,255,.28);stroke:#fff}}
.ph-map .tile.sel text{fill:var(--brand-on);font-weight:700}
.ph-nav{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.ph-nav .tbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#f6f6f2}
.ph-nums{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:6px}
.hn .hl{font-size:12.5px;color:rgba(246,246,242,.65)}
.hn .hv{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.3rem);white-space:nowrap;letter-spacing:-.04em;line-height:1.05;color:var(--brand);margin-top:4px;font-variant-numeric:tabular-nums}
.hn .hs{font-size:13px;color:#f6f6f2;margin-top:4px}
.hn .hf{font-size:11.5px;color:rgba(246,246,242,.5);margin-top:3px}
.ptools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin-top:16px}
.ptools .field{min-width:200px}
.perfil{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;margin-top:22px}
.pnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 100px);overflow:auto}
.pn-head{font-size:12.5px;color:var(--muted);padding:0 12px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pn-head b{color:var(--ink)}
.pn{background:none;border:0;text-align:left;padding:8px 12px;border-radius:10px;font-size:14px;color:var(--ink2);border-left:3px solid transparent;border-radius:0 10px 10px 0}
@media (hover:hover) and (pointer:fine){.pn:hover{background:var(--surface2);color:var(--ink)}}
.pn.on{border-left-color:var(--brand);color:var(--ink);font-weight:700;background:var(--brand-soft)}
.pbody{min-width:0;display:flex;flex-direction:column;gap:44px}
.psec{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 84px)}
.psec>h2,.psec .sech h2{font-size:1.75rem;font-weight:700;letter-spacing:-.03em}
.psec .sech{margin-bottom:6px}
.psec .split,.psec .grid{margin-top:14px}
.psec .card .strips{margin-top:8px}
@media (max-width:960px){
  .phero{grid-template-columns:1fr;padding:26px 22px 22px}
  .ph-map{justify-self:start;max-width:340px}
  .perfil{grid-template-columns:1fr;gap:16px}
  .pnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);flex-direction:row;overflow-x:auto;gap:6px;background:var(--page);padding:8px 0;z-index:5;max-height:none;scrollbar-width:none}
  .pnav::-webkit-scrollbar{display:none}
  .pn-head{display:none}
  .pn{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;background:var(--surface)}
  .pn.on{border-color:var(--ink);background:var(--ink);color:var(--page)}
}

/* ---------- comercio exterior: treemap y arcos ---------- */
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;margin-top:14px}
.cs{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.cs .l{font-size:12.5px;color:var(--ink2)}
.cs .v{font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.cs .p{font-size:12.5px;color:var(--muted);margin-top:3px}
.psec .card+.card{margin-top:14px}
.treemap{width:100%;height:auto;display:block}
.tm rect{stroke:var(--surface);stroke-width:1;transition:opacity 160ms ease}
.tm:hover rect,.tm:focus-visible rect{opacity:.85}
.tm:focus{outline:none}
.tml{font-family:var(--f-body);font-size:12.5px;font-weight:700;fill:#0f1115;pointer-events:none}
.tmv{font-family:var(--f-body);font-size:11.5px;fill:rgba(15,17,21,.75);pointer-events:none}
.tml.inv{fill:#fff} .tmv.inv{fill:rgba(255,255,255,.85)}
.tmkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.tmkey span{display:inline-flex;align-items:center;gap:6px}
.tmkey i{display:inline-block;width:12px;height:12px;border-radius:3px}
.arcmap{width:100%;height:auto;display:block;background:var(--surface2);border-radius:14px}
.grat{stroke:var(--grid);stroke-width:1} .grat.eq{stroke:var(--axis)}
.arc{fill:none;stroke:var(--accent2-ink);stroke-linecap:round;transition:opacity 160ms ease}
.arc.hot{opacity:1;stroke:var(--ink)}
.dest{fill:var(--accent2);stroke:var(--surface);stroke-width:1.5;cursor:pointer}
.dest:focus{outline:none} .dest:hover,.dest:focus-visible{fill:var(--ink)}
.orig{fill:var(--brand);stroke:var(--ink);stroke-width:2}
.dlbl{font-family:var(--f-body);font-size:11.5px;fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:var(--surface2);stroke-width:3px;stroke-linejoin:round}
.dlbl.org{font-weight:700}
@media (max-width:640px){.tml{font-size:11px}.dlbl{font-size:10px}}

/* ---------- control de tiempo ---------- */
.tcontrol{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tcontrol input[type=range]{flex:1;min-width:160px;accent-color:var(--ink)}
.tc-txt{font-size:13px;color:var(--ink2)} .tc-lbl{color:var(--ink);font-family:var(--f-display);font-size:15px}
.tcard{margin-top:16px}

/* ---------- mapa radial de temas ---------- */
.radialwrap svg{width:100%;height:auto;display:block}
.ring{fill:none;stroke:var(--grid);stroke-width:1;stroke-dasharray:3 5}
.lnk{fill:none;stroke:var(--axis);stroke-width:1.4} .lnk.h{stroke:var(--grid);stroke-width:1}
.nd{cursor:pointer} .nd:focus{outline:none}
.nd.centro circle{fill:var(--ink)} .nd.centro .cl{fill:#fff;font-family:var(--f-display);font-weight:700;font-size:14px} .nd.centro .cs2{fill:rgba(255,255,255,.7);font-size:11px;font-family:var(--f-body)}
.nd.ind circle{fill:var(--surface);stroke:var(--ink);stroke-width:1.6;transition:transform 160ms var(--ease-out);transform-box:fill-box;transform-origin:center}
.nd.ind .nl{font-family:var(--f-body);font-size:9.5px;font-weight:700;fill:var(--ink);pointer-events:none}
.nd.ind .ns{font-family:var(--f-body);font-size:11px;fill:var(--ink2);pointer-events:none}
.nd.hoja circle{fill:var(--accent2);stroke:var(--surface);stroke-width:2;transition:transform 160ms var(--ease-out);transform-box:fill-box;transform-origin:center}
.nd.hoja .hl{font-family:var(--f-body);font-size:10px;font-weight:700;fill:#fff;pointer-events:none}
.nd.hoja .hv{font-family:var(--f-body);font-size:11px;fill:var(--ink2);pointer-events:none;paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.nd.hoja.mine circle{fill:var(--brand);stroke:var(--ink)} .nd.hoja.mine .hl{fill:var(--ink)}
@media (hover:hover) and (pointer:fine){.nd.ind:hover circle,.nd.hoja:hover circle{transform:scale(1.08)}}
.nd.centro{cursor:default}
.nd:focus-visible circle{stroke:var(--accent2-ink);stroke-width:3}
.key i.k1{border:2px solid var(--ink);background:var(--surface)} .key i.k2{background:var(--accent2)}
@media (max-width:640px){.nd.ind .nl{font-size:9px}.nd.hoja .hv{font-size:9.5px}}

/* guiones semanales (admin) */
.gcols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));margin-top:14px}
.gcard .cardhead{align-items:flex-start;gap:12px;flex-wrap:wrap}
.gpart{margin-top:14px}.gph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:13.5px}
.gtxt{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.55;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;max-height:420px;overflow:auto}
.pill.xs{padding:4px 10px;font-size:12px}
.warnbox{margin-top:12px;background:#fff6dc;color:var(--warn-ink);border:1px solid #f1dc9a;border-radius:10px;padding:9px 12px;font-size:13px}
.okbox{margin-top:12px;background:#eefbd9;color:#245600;border:1px solid #cdf57a;border-radius:10px;padding:9px 12px;font-size:13px}
.gcif{margin-top:12px;font-size:13px;color:var(--ink2)}.gcif summary{cursor:pointer}.gcif ul{margin:8px 0 0 18px}

/* México en el mundo */
.ln{fill:none;stroke:var(--c,var(--blue));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.ln.mx{stroke-width:3.5}.ln.dash{stroke-dasharray:5 5}.lnd{fill:var(--c,var(--blue));stroke:var(--surface);stroke-width:2}
.proj{fill:var(--surface2);opacity:.7}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12.5px;color:var(--ink2)}.legend .lg{display:inline-flex;align-items:center;gap:6px}.legend i,.tt .tr i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c,var(--blue))}
.tt .tr{display:flex;align-items:center;gap:6px;margin-top:3px}
.sug.on{background:var(--brand);border-color:var(--brand);color:#000;font-weight:600}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}.tbl tr.hl td{background:var(--brand-soft);font-weight:700}

/* ficha imprimible */
.ficha{max-width:900px;margin:0 auto}.facciones{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.fhead{display:flex;align-items:center;gap:18px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:16px}.flogo{height:52px;background:#fff;border-radius:10px;padding:6px 10px}
.fhead h1{font-size:2rem;line-height:1;margin-top:4px}.fsub{color:var(--muted);font-size:13px;margin-top:6px}
.ftit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-bottom:6px}.ftit h2,.fgrupo h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin:14px 0 6px}
.ftit ul{margin:0 0 0 18px;font-size:13.5px;line-height:1.45}.ftit li{margin-bottom:4px}
.fgrupo table{width:100%;border-collapse:collapse;font-size:13px}.fgrupo th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}.fgrupo td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.fgrupo td.num,.fgrupo th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.fgrupo td.src{color:var(--muted);font-size:12px}.frep{color:var(--warn-ink);font-size:11.5px}
.ffoot{margin-top:18px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}.ffoot p{margin:0 0 6px}

/* plantilla estilo CNL en el generador de Gobierno: aspiración + objetivos + diagnóstico + metas */
.fgrupo h3.fsub-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink);font-weight:700;margin:16px 0 8px}
.cnl{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-bottom:6px}
.cnl .eyebrow{display:block;margin-bottom:6px}
.cnl-asp p{font-size:15.5px;line-height:1.42;font-family:var(--f-display);color:var(--ink);margin:0}
.cnl-obj ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.cnl-obj li{margin-bottom:4px}
.metarow{margin-top:14px}
.metarow .metatitulo{font-size:13px;font-weight:700;margin-bottom:2px}
.metabloque svg{max-width:100%;height:auto;display:block;margin-top:2px}
.metaleyenda{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11px;color:var(--muted);margin-top:2px}
.metaleyenda i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:middle;position:relative;top:-1px}
.metaleyenda i.dot.hot{border-radius:50%;background:var(--ink)}
.metaleyenda i.natmark{background:none;border:2px solid var(--ink);transform:rotate(45deg);width:6px;height:6px}
.metaleyenda .note{color:var(--muted);margin-top:0}
@media (max-width:640px){.cnl{grid-template-columns:1fr}}
@media print{.metarow{break-inside:avoid}}
@media print{
  header.top,.revibtn,.drawer,.toast,footer,.noprint,.tt{display:none !important}
  body,main{background:#fff !important;padding:0 !important;margin:0 !important;max-width:none !important}
  .ficha{max-width:none}.fgrupo{break-inside:avoid}.fgrupo table{font-size:11.5px}.fgrupo td,.fgrupo th{padding:3px 6px}
  .fhead h1{font-size:24pt}@page{margin:14mm 12mm}
}

.switch{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;cursor:pointer}.switch input{width:44px;height:24px;appearance:none;background:var(--bar);border-radius:999px;position:relative;transition:background .2s;cursor:pointer}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.switch input:checked{background:var(--brand)}.switch input:checked::after{transform:translateX(20px)}.switch input:disabled{opacity:.5}
h3.mt{margin-top:18px}
.mt{margin-top:18px}

/* índice de bienestar */
.radarwrap{max-width:380px;margin:0 auto}.radar{display:block;width:100%;height:auto;overflow:visible}.rg{fill:none;stroke:var(--grid)}.rl{fill:var(--ink2);font-size:11.5px;font-family:var(--f-body)}
.rmed{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4}.rest{fill:rgba(48,183,26,.35);stroke:#245600;stroke-width:2}.rpt{fill:#245600;stroke:var(--surface);stroke-width:2;cursor:pointer}
.metod{margin:0 0 12px 20px;font-size:14px;line-height:1.5}.metod li{margin-bottom:6px}
.tbl td.up{color:#245600;font-weight:700}.tbl td.down{color:var(--warn-ink);font-weight:700}
.cs.mine{border:2px solid var(--brand)}

/* indicadores donde más es peor (desempleo, pobreza, delito): escala ámbar, para que el oscuro no se lea como "bien" */
.mapwrap.alerta,.scale.alerta{--s0:#fff4dc; --s1:#ffd68a; --s2:#f2a63b; --s3:#a8520a; --s4:#6b2e00; --s0i:#0f1115; --s1i:#0f1115; --s2i:#0f1115; --s3i:#ffffff; --s4i:#ffffff}
.scale .note{margin-top:0}

/* tres renglones por dato: qué pasó → por qué te importa → qué considerar */
.frase .lb3{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.frase .tx .lb3{color:var(--brand-ink)}.frase .why.cons{border-left:3px solid var(--brand);padding-left:10px;margin-top:8px}.frase .why{margin-top:8px}

/* portada: "¿Solo tienes 3 minutos?" */
.tres{background:var(--page);padding:40px 0 10px}.tres .in{max-width:1180px;margin:0 auto;padding-inline:20px}
.tres h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:6px}.tres .sub{color:var(--ink2);margin-top:10px;max-width:60ch}
.tres-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;border-bottom:1px solid var(--line);padding-bottom:10px}.tres-tabs .pn{border:0;border-bottom:3px solid transparent;border-radius:10px 10px 0 0;background:none;white-space:normal;color:var(--ink2)}.tres-tabs .pn.on{border-bottom-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.tres-body{margin-top:14px;max-width:820px}.tres .frases{margin-top:10px}.susc .rem{margin:10px 0 16px 18px;line-height:1.5}
.masdetalle{max-width:1180px;margin:18px auto 0;padding-inline:20px}.masdetalle summary{list-style:none;cursor:pointer;display:flex;justify-content:center;padding:6px 0 18px}.masdetalle summary::-webkit-details-marker{display:none}
.masdetalle[open] summary .pill{opacity:.6}
@media (max-width:700px){.tres .frase{padding:12px 12px}.tres .frase .tx,.tres .frase .why{font-size:13.5px}.tres{padding-top:28px}}

/* pestaña 3 minutos */
.tbloque{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;margin-top:26px}.tnum{font-family:var(--f-display);font-size:3rem;font-weight:700;line-height:1;color:var(--ink);background:linear-gradient(transparent 55%,var(--brand) 55%);height:max-content;padding:0 6px}
.tcuerpo h2{font-size:1.45rem;font-weight:700;letter-spacing:-.02em}.tcuerpo .cap{margin-top:4px}
@media (max-width:700px){.tbloque{grid-template-columns:44px minmax(0,1fr);gap:10px}.tnum{font-size:2.2rem}}