/* ─────────────────────────────────────────────────────────────────────────
   IDENTIDAD DEL OBSERVATORIO — extraída de Mapa_Censo_2024_Bolivia.html
   (repo Atlas-Fiscal-Municipal). NO editar a mano: se regenera con
   `python scripts/extraer_estilo.py`. Si hay que cambiar la identidad, se
   cambia en el Atlas y se vuelve a extraer, para que los tres mapas del
   ecosistema no se separen.

   Se omitieron las reglas del renderizador de canvas del Atlas
   (#map-wrap canvas, #pick, #fade, #map-wrap), porque acá el mapa es MapLibre.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* ANCHO DE LOS PANELES: fuente unica de verdad. Lo usan .panel, .zc (anclado al borde del panel
     derecho) y .termo (que descuenta los dos paneles). Fluido: se encoge con la pantalla en vez de
     obligar a esconder la ficha en pantallas medianas -- proyectores y pantallas compartidas
     (1024x768, 1280x720) caen justo ahi. */
  --panel-w:clamp(15.5rem,23vw,20.5rem);
  --f:"Inter",system-ui,sans-serif;--fd:"Newsreader",Georgia,serif;
  --red:#c71e1d;--red-dk:#9b2226;--orange:#df5d25;--amber:#ee9b00;
  --mint:#94d2bd;--teal:#0a9396;--teal-dk:#005f73;--ink:#001219;--topbar:#013a46;
  --fondo:#f2efe8;--glass:#fffefbdb;--gris-card:#f1ede3;--linea:#ddd6c9;--linea-2:#eae4d7;
  --tx:#16232c;--suave:#5f6f79;--faint:#93a3ac;--sel:#005f73;--warm:#ee9b00;--peek:138px;
  --sh:0 1px 0 #12203508,0 10px 30px #12203512;
  --card-solid:#fff;--card-hov:#f7f9fa;--kpi-on:#f6fbfc;--foot-bg:#ffffff88;
  --topline:#012932;--sheet-fade:#fffefbf2;
}
/* ── MODO OSCURO ── mismos tokens, valores nocturnos (el canvas se repinta desde JS) */
body.dark{
  color-scheme:dark;
  --orange:#f0834a;--teal-dk:#5cc3c9;--sel:#43b3bd;--topbar:#04202a;--topline:#0a2f3a;
  --fondo:#0b1318;--glass:#131f26e6;--gris-card:#16242c;--linea:#2b3d47;--linea-2:#22323b;
  --tx:#e9eff2;--suave:#a1b3bd;--faint:#6f8794;
  --card-solid:#1b2a33;--card-hov:#20313b;--kpi-on:#17323a;--foot-bg:#0f1a2040;
  --sheet-fade:#131f26f2;
  --sh:0 1px 0 #0000004d,0 12px 34px #00000073;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--fondo);color:var(--tx);font-family:var(--f);font-size:13px;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  transition:background-color .3s ease,color .3s ease}
#mapbox{position:fixed;inset:0}

/* transiciones sutiles: entrada escalonada de tarjetas y KPIs */
@keyframes cardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes kpiIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes softIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#catch{position:absolute;inset:0;z-index:5;cursor:grab}#catch:active{cursor:grabbing}

/* TOP BAR */
#top{position:fixed;top:0;left:0;right:0;height:54px;z-index:14;display:flex;align-items:center;gap:12px;
  padding:0 15px;background:var(--topbar);border-bottom:1px solid var(--topline);color:#fff;
  transition:background-color .3s ease,border-color .3s ease}
/* botón de tema */
.tbtog{width:27px;height:27px;flex:none;display:grid;place-items:center;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);transition:background .18s,border-color .18s}
.tbtog:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.tbtog svg{width:14px;height:14px;display:block}
.tbtog .ic-sun{display:none}
body.dark .tbtog .ic-moon{display:none}body.dark .tbtog .ic-sun{display:block}
.logo{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
.logo svg{width:32px;height:32px}
.t-tit{display:flex;flex-direction:column;line-height:1.05}
.t-h{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
.t-h b{color:var(--warm);font-weight:700}
.t-name{font-size:.58rem;color:rgba(255,255,255,.6);font-weight:500;margin-top:2px;letter-spacing:.02em}
.top-sp{flex:1}
/* desplegable dept (estilo del de categorías) */
.tbdd{position:relative;font-size:.66rem;color:rgba(255,255,255,.7);font-weight:500}
.tbdd .lab{margin-right:6px}
.tbbtn{background:none;border:0;border-bottom:1.5px dotted rgba(255,255,255,.4);color:#fff;font-family:var(--f);
  font-size:.72rem;font-weight:600;cursor:pointer;padding:0 2px 3px;display:inline-flex;align-items:center;gap:5px}
.tbbtn .ar{color:rgba(255,255,255,.6);font-size:.7rem;transition:transform .2s}
.tbdd.open .ar{transform:rotate(180deg)}
.tbdrop{display:none;position:absolute;right:0;top:100%;margin-top:6px;z-index:30;background:var(--card-solid);color:var(--tx);
  border:1px solid var(--linea);box-shadow:var(--sh);min-width:11rem;max-height:17rem;overflow:auto;scrollbar-width:none}
.tbdd.open .tbdrop{display:block}
.tbop{padding:6px 12px;font-size:.72rem;font-weight:500;cursor:pointer;border-top:1px solid var(--linea-2);white-space:nowrap}
.tbop:first-child{border-top:0}.tbop:hover{background:var(--gris-card)}.tbop.on{color:var(--sel);font-weight:700}
.t-s{font-size:.62rem;color:rgba(255,255,255,.6);font-weight:500;margin-left:12px}.t-s b{color:var(--mint);font-weight:700}

/* PANELES */
.panel{position:fixed;top:62px;bottom:12px;width:var(--panel-w);z-index:8;background:var(--glass);
  border:1px solid var(--linea);box-shadow:var(--sh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;overflow:hidden;transition:background-color .3s ease,border-color .3s ease}
#panel-ind{left:12px}#panel-det{right:12px;display:none}.grip-bar,.pk{display:none}
.p-body{flex:1;overflow:auto;scrollbar-width:none;padding:13px 14px}.p-body::-webkit-scrollbar{display:none}
.p-foot{padding:10px 14px;border-top:1px solid var(--linea-2);font-size:.56rem;color:var(--suave);font-weight:500;line-height:1.8;background:var(--foot-bg)}
.p-foot a{color:var(--teal-dk);text-decoration:none;font-weight:700}.p-foot a:hover{text-decoration:underline}.p-foot .sep{color:var(--faint);margin:0 5px}
.cat-bar{padding:11px 14px;border-bottom:1px solid var(--linea-2);position:relative}
.p-kick{font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kick-n{font-size:.94em;letter-spacing:0;text-transform:none;font-weight:600;color:var(--faint);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.p-kick>span:first-child{flex:none}
.cat-btn{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;background:none;
  border:0;border-bottom:2px dotted var(--linea);padding:0 0 6px;font-family:var(--f)}
.cat-btn .cn{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.cat-btn .ar{color:var(--suave);transition:transform .2s}
.cat-bar.open .cat-btn .ar{transform:rotate(180deg)}
.cat-drop{display:none;position:absolute;left:14px;right:14px;top:100%;z-index:20;background:var(--card-solid);
  border:1px solid var(--linea);box-shadow:var(--sh);max-height:min(28rem,66vh);overflow:auto;scrollbar-width:none}
.cat-bar.open .cat-drop{animation:softIn .16s ease both}
.cat-bar.open .cat-drop{display:block}
.cat-op{padding:7px 12px;font-size:.72rem;font-weight:500;cursor:pointer;border-top:1px solid var(--linea-2);display:flex;justify-content:space-between;align-items:center;gap:10px}
.co-n{color:var(--faint);font-weight:600;font-size:.9em;flex:none}
.cat-op:first-child{border-top:0}.cat-op:hover{background:var(--gris-card)}
.cat-op.on{color:var(--sel);font-weight:700}.cat-op.off{color:var(--faint);cursor:not-allowed}
.p-sub{font-size:.66rem;color:var(--suave);font-weight:500;margin:2px 0 0}

.lista{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.ind{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:.7rem;text-align:left;
  cursor:pointer;width:100%;padding:.72rem;border:1px solid var(--linea-2);background:var(--gris-card);color:inherit;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
  animation:cardIn .36s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
.ind:hover{background:var(--card-hov)}
.ind.on{background:var(--card-solid);border-color:var(--sel);box-shadow:inset 3px 0 0 var(--sel)}
.i-nm{font-size:.83rem;font-weight:600;line-height:1.22;letter-spacing:-.005em}
.i-df{font-size:.69rem;color:var(--suave);line-height:1.32;margin-top:.3rem;font-weight:500}
.mini{width:110px;height:80px;flex:none;pointer-events:none;opacity:.6;filter:saturate(.32);transition:opacity .28s ease,filter .28s ease}
.ind:hover .mini{opacity:.9;filter:saturate(.7)}
.ind.on .mini{opacity:1;filter:saturate(.88)}
/* en oscuro la desaturación tira a pardo: se apagan con brillo en vez de con saturación */
body.dark .mini{opacity:.42;filter:saturate(.55) brightness(.9)}
body.dark .ind:hover .mini{opacity:.8;filter:saturate(.85) brightness(.98)}
body.dark .ind.on .mini{opacity:1;filter:none}

.det-head{padding:14px;border-bottom:1px solid var(--linea-2)}
.d-mun{font-family:var(--fd);font-size:1.28rem;font-weight:600;letter-spacing:-.01em;line-height:1.02}
.d-sub{font-size:.61rem;color:var(--suave);font-weight:500;margin-top:5px}
.back{color:var(--teal-dk);cursor:pointer;font-weight:700;text-decoration:none}.back:hover{text-decoration:underline}
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea-2);border:1px solid var(--linea-2)}
.kpi{background:var(--card-solid);padding:.5rem .6rem;cursor:pointer;border-top:2px solid var(--teal);
  transition:background-color .22s ease,border-color .22s ease;
  animation:kpiIn .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
.kpi:hover{background:var(--card-hov)}.kpi.on{border-top-color:var(--sel);background:var(--kpi-on)}
.k-l{font-size:.57rem;color:var(--suave);line-height:1.15;height:2.3em;overflow:hidden;font-weight:600}
.k-v{font-size:.96rem;font-weight:700;letter-spacing:-.02em;margin-top:.15rem}
.k-c{margin-top:.3rem;padding-top:.26rem;border-top:1px solid var(--linea-2);display:flex;flex-direction:column;gap:.06rem}
.k-c span{font-size:.55rem;color:var(--suave);display:flex;justify-content:space-between;font-weight:500}
.k-c .up{color:var(--teal-dk);font-weight:700}.k-c .dn{color:var(--orange);font-weight:700}

.zc{position:fixed;z-index:9;right:calc(var(--panel-w) + 26px);bottom:24px;display:flex;flex-direction:column;
  border:1px solid var(--linea);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--sh)}
.zc button{width:30px;height:30px;border:0;background:none;font-size:1rem;cursor:pointer;color:var(--tx);border-bottom:1px solid var(--linea-2);font-family:var(--f)}
.zc button:last-child{border-bottom:0;font-size:.7rem}.zc button:hover{background:var(--gris-card)}

.termo{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:8;
  width:min(34rem,calc(100vw - (2 * var(--panel-w)) - 6rem));background:var(--glass);border:1px solid var(--linea);box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.5rem .85rem}
.tm-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.tm-t{font-size:.68rem;font-weight:700}.tm-t small{color:var(--faint);font-weight:500;margin-left:.25rem}
.tm-st{font-size:.55rem;color:var(--suave);font-weight:500}.tm-st b{color:var(--tx);font-weight:700}
.tm-row{display:flex;align-items:center;gap:9px}
.tm-side{font-size:.58rem;color:var(--tx);font-weight:700;white-space:nowrap;flex:none}
.tm-side .cap{color:var(--faint);font-weight:500}
.tm-bar{flex:1;height:8px;position:relative;border-radius: 0}
.tm-mk{position:absolute;top:-2px;width:1px;height:12px;background:var(--suave)}
.termo.swap .tm-t,.termo.swap .tm-st,.termo.swap .tm-side{animation:softIn .34s ease both}

/* créditos */
.cred{position:fixed;left:16px;bottom:16px;z-index:7;font-size:.58rem;color:var(--suave);font-weight:500;
  background:var(--glass);border:1px solid var(--linea);padding:5px 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cred a{color:var(--teal-dk);text-decoration:none;font-weight:700}.cred a:hover{text-decoration:underline}
.cred .sep{color:var(--faint);margin:0 5px}

#pop{position:fixed;pointer-events:none;z-index:20;opacity:0;transition:opacity .1s;background:var(--glass);
  border:1px solid var(--linea);box-shadow:0 10px 30px #12203522;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.55rem .7rem;min-width:11rem}
#pop .pn{font-size:.8rem;font-weight:700;letter-spacing:-.01em}#pop .pd{font-size:.55rem;color:var(--suave);font-weight:500;margin-top:1px}
#pop .pv{display:flex;align-items:baseline;gap:.35rem;margin-top:.38rem}#pop .pv b{font-size:1.02rem;font-weight:700;color:var(--teal-dk)}#pop .pv small{font-size:.54rem;color:var(--faint)}
#pop .pr{font-size:.55rem;color:var(--suave);margin-top:.3rem;padding-top:.3rem;border-top:1px solid var(--linea-2);display:flex;justify-content:space-between}#pop .pr b{color:var(--tx);font-weight:700}
/* Antes habia aqui un @media(max-width:1280px) and (min-width:821px) que hacia
   #panel-det{display:none!important}: entre 821 y 1280px la ficha desaparecia y NO habia como verla
   (el bottom-sheet movil recien entra en 820). Peor, ese !important le ganaba al style.display="flex"
   inline que pone el render, asi que el panel quedaba muerto.
   Ya no hace falta: --panel-w encoge los paneles de forma continua. */
@media(max-width:820px){
  #top{height:48px;padding:0 11px;gap:8px}
  .logo{width:26px;height:26px}.logo svg{width:26px;height:26px}
  .t-tit{flex:1;min-width:0}.t-h{font-size:.72rem;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .t-name{display:none}.top-sp{display:none}.t-s{display:none}
  .tbdd{flex:none}.tbdd .lab{display:none}.tbbtn{font-size:.7rem;padding-bottom:2px}
  .tbdrop{min-width:min(13rem,calc(100vw - 22px));max-height:60vh}
  /* franja superior: categoría + tira de tarjetas (mini-mapa + nombre + definición) */
  #panel-ind{top:48px;left:0;right:0;bottom:auto;width:auto;height:150px;border:0;border-bottom:1px solid var(--linea);flex-direction:column;overflow:visible}
  .cat-bar{padding:7px 12px}.cat-btn .cn{font-size:.95rem}
  .cat-drop{max-height:64vh;box-shadow:0 14px 30px rgba(16,26,20,.22)}.cat-op{padding:11px 13px;font-size:.82rem}
  .p-body{padding:8px 0 8px 12px;overflow:hidden;flex:1}.p-sub{display:none}
  .lista{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:9px;margin-top:0;height:100%;scroll-snap-type:x proximity;padding-right:12px}
  .ind{display:grid;grid-template-columns:minmax(0,1fr) 82px;align-items:center;gap:.5rem;min-width:196px;max-width:196px;padding:.55rem;scroll-snap-align:start;height:calc(100% - 3px);overflow:hidden}
  .mini{width:82px;height:auto;aspect-ratio:110/80;opacity:.95}
  .i-nm{font-size:.73rem;line-height:1.16;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .i-df{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.6rem;line-height:1.32;margin-top:.2rem;font-weight:500}
  /* mapa: SIEMPRE completo; la ficha flota por encima (no se re-renderiza) */
  #mapbox{inset:auto;top:202px;left:0;right:0;bottom:0}
  /* La leyenda flota ENCIMA del asa de la hoja (`--asa`, publicada por hojaMedir):
     con bottom:8px quedaba debajo del asa y no se veia nunca (2026-09-16). */
  .termo{left:8px;right:8px;transform:none;width:auto;bottom:calc(var(--asa,96px) + 8px);padding:.45rem .7rem;transition:opacity .2s}
  body.sheet-open .termo{opacity:0;pointer-events:none}
  .tm-t{font-size:.66rem}.tm-t small{font-size:.52rem}.tm-st{display:none}.tm-side{font-size:.58rem}
  .zc{right:8px;top:210px;bottom:auto;transition:none;background:var(--card-solid);z-index:12}
  body.sheet-open .zc{top:210px;bottom:auto}
  /* ── ficha municipal = bottom-sheet deslizable (peek / full) ── */
  /* altura = 74vh (JS la fija en px exactos) para que el detent "full" quepa ENTERO en pantalla:
     antes medía 88vh y bajaba 26vh -> la cola de la lista quedaba fuera de la pantalla y se cortaba */
  #panel-det{display:flex!important;top:auto;bottom:0;left:0!important;right:0!important;width:auto!important;height:74vh;
    border:0;border-radius:16px 16px 0 0;box-shadow:0 -12px 34px rgba(16,26,20,.20);
    transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1),background-color .3s ease;z-index:60}
  #panel-det.dragging{transition:none}
  /* degradado al pie = pista de que aún hay contenido; se apaga al llegar al final */
  #panel-det::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;pointer-events:none;z-index:2;
    background:linear-gradient(to top,var(--sheet-fade),transparent);opacity:1;transition:opacity .22s ease}
  #panel-det.at-end::after{opacity:0}
  /* ★ EL ASA, COMPACTA (2026-09-17). Media 150 px: asa + nombre grande + departamento +
     fila con municipio en mayusculas, indicador y valor. Con la franja de arriba (202) y la
     leyenda, al mapa le quedaban ~400 px de 844. Ahora: asa, nombre en un renglon y la fila
     indicador + valor (el municipio ya esta en el titulo; el departamento va en la ficha).
     ~78 px. La leyenda sigue al asa sola porque `--asa` se mide, no se supone. */
  .sheet-top{flex:none;padding:6px 14px 8px;touch-action:none;cursor:grab}
  .grip-bar{display:block;width:40px;height:4px;border-radius: 0;background:var(--linea);margin:0 auto 6px}
  .det-head{padding:0;border:0}.d-mun{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.d-sub{display:none}
  .pk{display:flex;align-items:center;gap:.6rem;margin-top:5px;padding-top:5px;border-top:1px solid var(--linea-2)}
  .pk .pk-chip{width:12px;height:12px;border-radius: 0;flex:none;box-shadow:0 0 0 1px rgba(128,140,148,.35)}
  .pk .pk-lab{font-size:0;line-height:0;color:var(--faint);flex:1;min-width:0}
  .pk .pk-lab b{display:block;color:var(--tx);font-size:.72rem;line-height:1.2;font-weight:600;text-transform:none;letter-spacing:0;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pk .pk-val{font-size:1rem;font-weight:700;color:var(--tx);white-space:nowrap}
  /* el buscador de municipios vive en el asa: en «peek» se esconde (son 44 px de mapa) y
     vuelve al desplegar la hoja; hojaIr() mide el asa DESPUES de aplicar el estado */
  body:not(.sheet-open) #panel-det .busca-mun{display:none}
  /* el asa lleva touch-action:none para el arrastre; el buscador recupera el toque normal */
  .sheet-top .busca-mun{touch-action:auto;cursor:auto}
  .pk .pk-val small{font-size:.58rem;font-weight:600;color:var(--suave);margin-left:.15rem}
  .pk .pk-rk{font-size:.54rem;color:var(--suave);text-align:right;line-height:1.3;flex:none}.pk .pk-rk b{color:var(--tx);font-weight:700}
  #panel-det .p-body{flex:1;padding:4px 12px calc(30px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .k-v{font-size:.9rem}.k-l{font-size:.55rem}.k-c span{font-size:.53rem}
  .p-foot{display:none}
}