@font-face{font-family:Teko;src:url(../assets/fonts/teko-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Teko;src:url(../assets/fonts/teko-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Rubik;src:url(../assets/fonts/rubik-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(../assets/fonts/rubik-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Rubik;src:url(../assets/fonts/rubik-800.woff2) format("woff2");font-weight:800;font-display:swap}
/* CVDL 2027 · Mapa del Congreso — móvil primero. Tipografía: Teko + Rubik (dueño 2026-09-08).
   ⚠ Paleta PROVISIONAL medida sobre la identidad 2027 en JPG (2026-09-05). Se reemplaza por
   MARCA-CVDL-2027.md cuando lleguen los vectores del cliente. */
:root{
  /* tokens del vector del cliente (MARCA-CVDL-2027.md) */
  --rojo:#C23137; --rojo-2:#962A2B; --rojo-vivo:#EF4E47;
  --azul:#307ABD; --azul-2:#393668; --cian:#5FA8E6;
  --tinta:#1B1B2F; --gris:#F3F4F7; --linea:#D8DCE6; --blanco:#fff;
  --sombra:0 6px 24px rgba(15,26,58,.18);
  --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:Rubik,"Helvetica Neue",Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#1f1d45;color:var(--tinta)}
body{display:flex;flex-direction:column;min-height:100dvh;overflow:hidden}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:.55em 1em;background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra);line-height:1}
button.primary{background:var(--rojo);color:#fff}
button.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
button.on{background:var(--azul);color:#fff}
button:focus-visible{outline:3px solid var(--cian);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  background:linear-gradient(90deg,var(--azul-2) 0%,var(--azul) 55%,var(--rojo) 100%);color:#fff}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-plate{background:#fff;border-radius:9px;padding:4px 7px;display:inline-flex;flex:none}
.brand-plate img{height:30px;width:auto;display:block}
.ttl{display:flex;flex-direction:column;min-width:0}
.ttl strong{font-family:Teko,sans-serif;font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase;line-height:1;white-space:nowrap}
.ttl small{font-size:11.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#stage{position:relative;flex:1;min-height:0}
#gl{position:absolute;inset:0}
#gl canvas{display:block;width:100%;height:100%;touch-action:none}
#fallback{position:absolute;inset:0;overflow:auto;background:var(--gris);padding:12px}
#fallback img{width:100%;height:auto;border-radius:var(--r);background:#fff}
.fb-list{columns:2;gap:16px;font-size:13px;padding-left:18px}
@media (max-width:600px){.fb-list{columns:1}}

#vistas{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
#vistas::-webkit-scrollbar{display:none}
#vistas button{flex:none;font-size:13px;padding:.5em .9em}

#tools{position:absolute;left:10px;right:10px;bottom:calc(12px + var(--safe-b));display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#tools button{font-size:13px}
#tools .primary{font-weight:700}
@media (min-width:900px){
  #tools{left:auto;right:16px;bottom:16px;flex-direction:column;align-items:stretch}
  #vistas{left:16px;right:auto;top:16px;flex-direction:column}
}

#leyenda{position:absolute;top:56px;right:10px;width:min(320px,calc(100% - 20px));background:#fff;border-radius:var(--r);box-shadow:var(--sombra);padding:14px 16px;font-size:13px;z-index:3}
#leyenda h2{margin:0 0 8px;font-family:Teko,sans-serif;font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.03em}
#leyenda ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#leyenda li{display:flex;align-items:center;gap:8px}
#leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}
#leyenda i.dash{border:2px dashed #b03a2e;background:none}
#leyenda .nota{margin:10px 0 0;color:#4a5470;font-size:12px}

.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);
  padding:12px 16px calc(16px + var(--safe-b));z-index:4;max-height:60%;overflow:auto;
  transform:translateY(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sheet[hidden]{display:none}
@media (min-width:900px){.sheet{left:auto;right:16px;bottom:16px;width:360px;border-radius:var(--r)}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sheet h2{margin:0;font-family:Teko,sans-serif;font-weight:600;font-size:24px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.sheet .x{background:var(--gris);box-shadow:none;width:34px;height:34px;padding:0;font-size:20px}
#f-cuerpo{margin:8px 0 12px;font-size:14px;line-height:1.45;color:#2a3352}
.f-acc{display:flex;gap:8px;flex-wrap:wrap}
.ruta-form{display:grid;gap:10px;margin-top:8px}
.ruta-form label{display:grid;gap:4px;font-size:12px;color:#4a5470;font-weight:600}
.ruta-form select{font:inherit;font-size:15px;padding:.55em .7em;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
.r-res{margin:10px 0 0;font-size:14px;color:#2a3352;min-height:1.4em}
.r-res b{color:var(--rojo)}

.pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px calc(8px + var(--safe-b));background:#1f1d45;color:#c9d1e6;font-size:12px}
.powered{display:inline-flex;align-items:center;gap:6px}
.powered img{filter:brightness(1.1)}

@media (prefers-reduced-motion:reduce){.sheet{transition:none}}