/* ---------- Tipografía self-host (sin CDN en runtime, sin build) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("Inter-Regular.woff2") format("woff2");}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("Inter-Medium.woff2") format("woff2");}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("Inter-SemiBold.woff2") format("woff2");}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("Inter-Bold.woff2") format("woff2");}

/* ---------- Paleta institucional INE: blanco, negro, azul y dorado ----------
   Azul #015092 y dorado #FBCE01 son los colores del logotipo del Instituto
   Nacional de Estadística, tomados del archivo original. El dorado NUNCA lleva
   texto encima ni pinta datos (sobre blanco no alcanza el contraste de lectura):
   es acento de estructura. El azul es el color de los datos y de la acción. */
:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F5F9; --inset:#F6F9FC;
  --ink:#0B0F14; --ink-2:#48525E; --ink-3:#78828F;
  --line:#E3E9F0; --line-strong:#CCD6E2;
  --azul:#015092; --azul-700:#013A69; --azul-600:#0A66B0;
  --azul-50:#E8F0F8;
  --dorado:#FBCE01; --dorado-700:#8A6A00; --dorado-tint:#FFF8DC;
  --warn:#8A6A00; --warn-bg:#FFFAE8; --warn-line:#F0DFA4;
  --map-ramp:#F9E7A0,#E8C65C,#AEAE73,#6E9A93,#3C7796,#145684,#013A69; --map-null:#DDE3EA;
  --shadow:0 1px 2px rgba(1,58,105,.06), 0 6px 20px -8px rgba(1,58,105,.16);
  --focus:#0A66B0;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0B0F14; --surface:#121821; --surface-2:#1A2331; --inset:#0F151D;
    --ink:#ECF1F7; --ink-2:#A7B3C2; --ink-3:#7A8695;
    --line:#233040; --line-strong:#32425A;
    --azul:#4DA3E8; --azul-700:#0A66B0; --azul-600:#2E8BD8;
    --azul-50:#12243A;
    --dorado:#FFD84D; --dorado-700:#E0B400; --dorado-tint:#2A2208;
    --warn:#FFD84D; --warn-bg:#241E08; --warn-line:#4A3E10;
    --map-ramp:#013A69,#145684,#3C7796,#6E9A93,#AEAE73,#E8C65C,#F9E7A0; --map-null:#2A3340;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -12px rgba(0,0,0,.6);
    --focus:#4DA3E8;
  }
}
:root[data-theme="light"]{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F5F9; --inset:#F6F9FC;
  --ink:#0B0F14; --ink-2:#48525E; --ink-3:#78828F;
  --line:#E3E9F0; --line-strong:#CCD6E2;
  --azul:#015092; --azul-700:#013A69; --azul-600:#0A66B0; --azul-50:#E8F0F8;
  --dorado:#FBCE01; --dorado-700:#8A6A00; --dorado-tint:#FFF8DC;
  --warn:#8A6A00; --warn-bg:#FFFAE8; --warn-line:#F0DFA4;
  --map-ramp:#F9E7A0,#E8C65C,#AEAE73,#6E9A93,#3C7796,#145684,#013A69; --map-null:#DDE3EA;
  --shadow:0 1px 2px rgba(1,58,105,.06), 0 6px 20px -8px rgba(1,58,105,.16);
  --focus:#0A66B0;
}
:root[data-theme="dark"]{
  --ground:#0B0F14; --surface:#121821; --surface-2:#1A2331; --inset:#0F151D;
  --ink:#ECF1F7; --ink-2:#A7B3C2; --ink-3:#7A8695;
  --line:#233040; --line-strong:#32425A;
  --azul:#4DA3E8; --azul-700:#0A66B0; --azul-600:#2E8BD8; --azul-50:#12243A;
  --dorado:#FFD84D; --dorado-700:#E0B400; --dorado-tint:#2A2208;
  --warn:#FFD84D; --warn-bg:#241E08; --warn-line:#4A3E10;
  --map-ramp:#013A69,#145684,#3C7796,#6E9A93,#AEAE73,#E8C65C,#F9E7A0; --map-null:#2A3340;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -12px rgba(0,0,0,.6);
  --focus:#4DA3E8;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss01";
}
.wrap{max-width:780px; margin:0 auto; padding:0 20px;}

a{color:var(--azul-600); text-decoration:none;}
a:hover{color:var(--dorado);}
:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px; border-radius:4px;}

/* ---------- Header ---------- */
/* Filete dorado superior: el acento institucional, sin texto encima. */
header{
  border-bottom:1px solid var(--line); background:var(--surface);
  border-top:3px solid var(--dorado);
}
.hd{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;}
.brand{display:flex; align-items:center; gap:14px; min-width:0;}
/* Logotipo del INE, arriba a la izquierda. En modo oscuro va sobre una placa
   blanca: el logo es un activo institucional y no se recolorea. */
.logo-ine{height:42px; width:auto; display:block; flex-shrink:0;}
.brand .sep{width:1px; height:32px; background:var(--line-strong); flex-shrink:0;}
/* Logotipo del producto: reemplaza al nombre en texto, así que es el que lleva
   el nombre accesible (alt). Va en dos versiones —el azul institucional no
   contrasta sobre fondo oscuro— y el CSS elige según el tema. */
/* max-width + object-fit: si el ancho no alcanza, el logotipo se encoge
   proporcionado en vez de aplastarse (es un flex item y puede ceder ancho). */
.logo-censo{
  height:46px; width:auto; display:block; min-width:0;
  max-width:100%; object-fit:contain; object-position:left center;
}
.logo-censo.oscuro{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-ine{
    background:#fff; padding:5px 8px; border-radius:8px; height:48px;
  }
  :root:not([data-theme="light"]) .logo-censo.claro{display:none;}
  :root:not([data-theme="light"]) .logo-censo.oscuro{display:block;}
}
:root[data-theme="dark"] .logo-ine{
  background:#fff; padding:5px 8px; border-radius:8px; height:48px;
}
:root[data-theme="dark"] .logo-censo.claro{display:none;}
:root[data-theme="dark"] .logo-censo.oscuro{display:block;}
/* En pantallas angostas los dos logotipos se achican en bloque y la navegación
   queda en iconos (su nombre accesible va en aria-label). El del producto manda:
   se achica lo justo para que el nombre siga legible. */
@media (max-width:800px){
  .hd{padding:14px 0;}
  .logo-ine{height:34px;}
  .logo-censo{height:40px;}
  .hd nav a,.hd nav button{font-size:.92rem; padding:8px 10px;}
}
@media (max-width:640px){
  .brand{gap:10px;}
  .brand .sep{display:none;}
  .logo-ine{height:30px;}
  .logo-censo{height:36px;}
  .hd nav .nlbl{display:none;}
  .hd nav a,.hd nav button{padding:8px 9px;}
}
@media (max-width:400px){
  .logo-ine{height:22px;}
  .logo-censo{height:30px;}
}
/* Navegación en tinta plena (no gris): son las dos únicas acciones del
   encabezado y tienen que leerse, no insinuarse. */
.hd nav{display:flex; gap:8px; flex-shrink:0;}
.hd nav a,.hd nav button{
  font:inherit; font-size:.98rem; font-weight:500; color:var(--ink);
  background:none; border:0;
  padding:9px 12px; border-radius:8px; cursor:pointer; display:inline-flex;
  align-items:center; gap:7px;
}
.hd nav a:hover,.hd nav button:hover{background:var(--surface-2); color:var(--azul-600);}
.hd nav svg{width:19px; height:19px;}

/* ---------- Portada: banda azul institucional + panel de consulta ----------
   La banda da el registro institucional; el panel blanco monta sobre su borde
   inferior, que es el gesto que ordena la página: lo primero que hacés es preguntar. */
.hero{
  background:var(--azul-700); color:#fff; padding:44px 0 96px; margin-bottom:-70px;
  position:relative;
}
.hero::after{  /* filete dorado inferior de la banda */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--dorado);
}
.hero .wrap{max-width:820px;}
.hero .kicker{
  color:var(--dorado); font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; margin:0 0 10px;
}
.hero h1{
  font-size:clamp(1.7rem,4.6vw,2.35rem); line-height:1.1; letter-spacing:-.03em;
  margin:0 0 10px; text-wrap:balance; color:#fff;
}
.hero p.lead{color:rgba(255,255,255,.82); margin:0; max-width:54ch; font-size:1.02rem;}

.panel{
  position:relative; z-index:2; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 12px 36px -14px rgba(1,58,105,.35); padding:18px;
  max-width:820px; margin:0 auto;
}
.panel .sublbl{
  display:block; color:var(--ink); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.11em; text-align:center;
  margin-bottom:10px;
}
form{
  display:flex; gap:10px; background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:12px; padding:6px 6px 6px 8px; transition:border-color .15s, box-shadow .15s;
}
form:focus-within{border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-50);}
form .qi{display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding-left:6px;}
form .qi svg{width:19px; height:19px; color:var(--ink-3); flex-shrink:0;}
input#q{
  flex:1; min-width:0; border:0; background:none; color:var(--ink);
  font:inherit; font-size:1.05rem; padding:12px 0;
}
input#q::placeholder{color:var(--ink-3);}
input#q:focus{outline:none;}
button.ask{
  font:inherit; font-weight:600; font-size:.98rem; color:#fff; background:var(--azul);
  border:0; border-radius:9px; padding:12px 24px; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
button.ask:hover{background:var(--azul-700);}
button.ask:disabled{opacity:.6; cursor:default;}

/* Ejemplos: grilla de tarjetas, no píldoras sueltas */
.ejemplos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px auto 0; max-width:820px;}
.ejemplos .lbl{
  grid-column:1/-1; color:var(--ink); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.11em; text-align:center; margin-bottom:-2px;
}
/* Pregunta centrada en la tarjeta: la flecha sale del flujo (position:absolute)
   y el padding lateral es simétrico, si no el texto queda corrido a la izquierda. */
.chip{
  font:inherit; font-size:.95rem; font-weight:700; text-align:center; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:10px;
  padding:13px 34px; cursor:pointer; transition:border-color .13s, background .13s, transform .13s;
  display:flex; align-items:center; justify-content:center; gap:10px; line-height:1.35;
  position:relative;
}
.chip::after{
  content:"→"; position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:.95rem; transition:color .13s, transform .13s;
}
.chip:hover{border-color:var(--azul-50); border-left-color:var(--azul); background:var(--azul-50); transform:translateY(-1px);}
.chip:hover::after{color:var(--azul); transform:translateY(-50%) translateX(2px);}
@media (max-width:640px){ .ejemplos{grid-template-columns:1fr;} }

/* ---------- Historial de tarjetas ---------- */
#historial{display:flex; flex-direction:column; gap:20px; padding:14px 0 8px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; animation:rise .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.card > .body{padding:18px 20px 4px;}
.q-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;}
.q-head .qmark{
  flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--azul-50);
  color:var(--azul-600); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem; margin-top:1px;
}
.q-head .qtext{font-weight:600; font-size:1.04rem; line-height:1.35; letter-spacing:-.01em;}
.q-head .qtime{margin-left:auto; color:var(--ink-3); font-size:.74rem; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:4px;}

/* Cifra destacada: cuando la respuesta es UN número, se muestra como número.
   Es la lectura que busca quien consulta un censo; el texto queda de apoyo. */
.figura{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  border-left:3px solid var(--dorado); padding:2px 0 2px 16px; margin:4px 0 16px;
}
.figura .val{
  font-size:clamp(1.9rem,5.5vw,2.6rem); font-weight:700; line-height:1;
  letter-spacing:-.03em; color:var(--azul); font-variant-numeric:tabular-nums;
}
.figura .uni{color:var(--ink-2); font-size:.95rem;}
.figura .apx{
  color:var(--ink-3); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; margin-left:auto;
}

/* respuesta markdown */
/* El cuerpo de la respuesta va en tinta plena y negrita: es el dato, no una
   glosa. Vale para el texto, la tabla, las pastillas de metadatos y las acciones. */
.answer{color:var(--ink); font-size:.97rem; font-weight:700;}
.answer > :first-child{margin-top:0;} .answer > :last-child{margin-bottom:0;}
.answer p{margin:.55em 0;}
.answer strong{font-weight:700;}
.answer h1,.answer h2,.answer h3{font-size:1.02rem; margin:1em 0 .4em;}
.tablewrap{overflow-x:auto; margin:12px 0; border:1px solid var(--line); border-radius:10px;}
.answer table{border-collapse:collapse; width:100%; font-size:.9rem;}
.answer th,.answer td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--line);}
.answer thead th{
  background:var(--inset); color:var(--ink); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.answer th,.answer td{color:var(--ink); font-weight:700;}
.answer tbody tr:last-child td{border-bottom:0;}
.answer tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--inset) 45%, transparent);}
.answer td{font-variant-numeric:tabular-nums;}
.answer table td:not(:first-child),.answer table th:not(:first-child){text-align:right;}

/* tarjeta de aviso (error / NO_RESPONDIBLE) */
.card.warn{border-color:var(--warn-line); background:var(--warn-bg);}
.card.warn .q-head .qmark{background:color-mix(in srgb,var(--warn) 15%,transparent); color:var(--warn);}
.card.warn .answer{color:var(--ink);}
.warn-note{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:.92rem;}
.warn-note svg{width:18px; height:18px; color:var(--warn); flex-shrink:0; margin-top:2px;}

/* mapa */
.map{height:clamp(340px,52vh,480px); margin-top:16px; background:var(--inset); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.leaflet-container{font-family:inherit; background:var(--inset);}
.legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; padding:11px 20px;
  font-size:.79rem; color:var(--ink-2); background:var(--inset); border-bottom:1px solid var(--line);
}
.legend .scale{display:flex; align-items:center; gap:7px;}
.legend .bar{height:11px; width:130px; border-radius:3px; background:linear-gradient(to right,var(--map-ramp)); border:1px solid rgba(0,0,0,.08);}
.legend .swatch{display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--map-null); border:1px solid var(--line-strong); vertical-align:-2px;}
.legend .supr{display:inline-flex; align-items:center; gap:6px; cursor:help; border-bottom:1px dotted var(--ink-3);}
.legend b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}

/* metadatos + acciones */
.meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:14px 20px;
  border-top:1px solid var(--line);
}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:.79rem; color:var(--ink);
  font-weight:700;
  background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:4px 11px;
  font-variant-numeric:tabular-nums;
}
.pill.supr{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); cursor:help;}
.pill .k{width:6px; height:6px; border-radius:50%; background:var(--azul);}
.meta .spacer{flex:1;}
.act{
  font:inherit; font-size:.81rem; font-weight:700; color:var(--ink); background:none;
  border:1px solid var(--line);
  border-radius:8px; padding:6px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:all .13s;
}
.act:hover{border-color:var(--azul); color:var(--azul-600);}
.act.ok{border-color:var(--azul); color:var(--azul-600); background:var(--azul-50);}
.act svg{width:14px; height:14px;}

/* SQL desplegable */
details.sql{border-top:1px solid var(--line);}
details.sql summary{
  list-style:none; cursor:pointer; padding:12px 20px; display:flex; align-items:center; gap:9px;
  font-size:.83rem; color:var(--ink-2); font-weight:500; user-select:none;
}
details.sql summary::-webkit-details-marker{display:none;}
details.sql summary .chev{transition:transform .18s; color:var(--ink-3);}
details.sql[open] summary .chev{transform:rotate(90deg);}
details.sql summary:hover{color:var(--ink);}
.sql-body{padding:0 20px 18px;}
.sql-bar{display:flex; justify-content:flex-end; margin-bottom:8px;}
.sql-body pre{
  margin:0; background:var(--inset); border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:.82rem;
  line-height:1.5; color:var(--ink); white-space:pre; tab-size:2;
}

/* spinner / loading */
.loader{display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:.95rem; padding:2px 0 8px;}
.spin{width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line-strong); border-top-color:var(--azul); animation:sp .7s linear infinite; flex-shrink:0;}
@keyframes sp{to{transform:rotate(360deg);}}
.loader .msg{transition:opacity .3s;}

/* footer institucional: tres columnas + línea legal */
footer{
  border-top:3px solid var(--dorado); background:var(--surface-2); margin-top:44px;
  padding:30px 0 34px; color:var(--ink-2); font-size:.85rem; line-height:1.65;
}
footer .fcols{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
footer h3{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3);
  margin:0 0 8px; font-weight:600;
}
footer p{margin:0;}
footer b{color:var(--ink); font-weight:600;}
footer .legal{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--line-strong);
  color:var(--ink-3); font-size:.79rem; display:flex; flex-wrap:wrap; gap:6px 14px;
}
footer .sep{color:var(--line-strong);}
@media (max-width:640px){ footer .fcols{grid-template-columns:1fr; gap:18px;} }

/* modal cómo funciona */
dialog{
  border:1px solid var(--line); border-radius:16px; padding:0; max-width:520px; width:calc(100% - 32px);
  background:var(--surface); color:var(--ink); box-shadow:0 24px 60px -16px rgba(0,0,0,.4);
}
dialog::backdrop{background:rgba(12,20,19,.55); backdrop-filter:blur(2px);}
.modal-in{padding:26px 26px 24px;}
.modal-in h2{margin:0 0 4px; font-size:1.15rem; letter-spacing:-.02em;}
.modal-in .msub{color:var(--ink-3); font-size:.85rem; margin:0 0 18px;}
ol.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
ol.steps li{counter-increment:s; display:flex; gap:13px; align-items:flex-start;}
ol.steps li::before{
  content:counter(s); flex-shrink:0; width:25px; height:25px; border-radius:8px;
  background:var(--azul-50); color:var(--azul-600); font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
ol.steps b{font-weight:600;} ol.steps .d{color:var(--ink-2); font-size:.9rem;}
.modal-x{position:absolute; top:14px; right:14px; background:var(--surface-2); border:0; width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--ink-2); font-size:1.1rem; line-height:1;}
.modal-x:hover{background:var(--line); color:var(--ink);}
dialog{position:fixed; inset:0; margin:auto;}
.modal-wrap{position:relative;}

@media (max-width:560px){
  form{flex-direction:column; padding:8px;}
  form .qi{padding:4px 6px;}
  button.ask{width:100%; padding:12px;}
  .q-head .qtime{display:none;}
  .card > .body{padding:16px 16px 4px;}
  .meta,.legend,details.sql summary,.sql-body{padding-left:16px; padding-right:16px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* Opciones de desambiguación y sugerencias: el sistema no elige por el usuario,
   ofrece alternativas. Se dibujan dentro de la tarjeta de aviso, debajo del texto. */
.opciones{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px 52px}
.opciones .chip{text-align:left;white-space:normal;line-height:1.35}
.opciones .chip .d{opacity:.65;font-weight:400}
.opciones .chip.sug{font-style:italic}
@media (max-width:640px){.opciones{padding-left:18px}}

/* ---------- Referencia: documentación y diccionario por censo ----------
   Dos plegables que siguen al censo elegido. El contenido se carga a demanda
   (el diccionario de 2023 son 81 KB), así que la página no paga nada si no se
   abren. Tipografía normal, no la negrita del cuerpo de respuesta: acá se lee
   texto largo, no se leen cifras. */
.ref{margin:26px 0 8px; display:flex; flex-direction:column; gap:12px;}
.ref > details{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.ref > details > summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; padding:15px 20px;
  font-weight:700; color:var(--ink); font-size:1rem; list-style:none;
}
.ref > details > summary::-webkit-details-marker{display:none;}
.ref > details > summary::after{
  content:"⌄"; margin-left:auto; color:var(--ink-3); font-size:1.1rem; line-height:1;
  transition:transform .15s;
}
.ref > details[open] > summary::after{transform:rotate(180deg);}
.ref > details[open] > summary{border-bottom:1px solid var(--line);}
.ref .ref-c{
  font-size:.78rem; font-weight:700; color:var(--azul-600); background:var(--azul-50);
  border-radius:999px; padding:3px 10px;
}
.ref-body{padding:16px 20px 20px;}
.ref-body h4{font-size:.79rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); margin:18px 0 7px;}
.ref-lead{font-size:1rem; color:var(--ink); margin:0 0 6px;}
.ref-p{color:var(--ink); font-size:.93rem; line-height:1.55; margin:0 0 6px;}
.ref-p.sin{color:var(--ink-3);}
.ref-ul{margin:0; padding-left:20px; color:var(--ink); font-size:.93rem; line-height:1.55;}
.ref-ul li{margin:5px 0;}
table.ref-tab{border-collapse:collapse; width:100%; font-size:.9rem;}
table.ref-tab th,table.ref-tab td{padding:7px 12px; text-align:left; border-bottom:1px solid var(--line); color:var(--ink);}
table.ref-tab th{width:38%; font-weight:700; background:var(--inset);}
table.ref-tab tr:last-child th,table.ref-tab tr:last-child td{border-bottom:0;}
table.ref-tab.cods td.cod{width:110px; font-family:var(--mono); font-size:.85rem; font-weight:700;}
table.ref-tab.cods tr.perdido td{color:var(--ink-3);}
.tag-p{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--warn);
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:999px; padding:1px 7px;}

/* buscador del diccionario */
.buscador{
  display:flex; align-items:center; gap:9px; border:1.5px solid var(--line-strong);
  border-radius:10px; padding:8px 12px; margin-bottom:14px; background:var(--surface);
}
.buscador:focus-within{border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-50);}
.buscador svg{width:17px; height:17px; color:var(--ink-3); flex-shrink:0;}
.buscador input{flex:1; border:0; outline:0; font:inherit; font-size:.95rem; background:none; color:var(--ink); min-width:0;}
.buscador .cuenta{font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* una variable del diccionario */
.ref-tabla{display:flex; align-items:center; gap:9px;}
.ref-tabla .ref-n{font-size:.72rem; color:var(--ink-3); background:var(--inset); border-radius:999px; padding:2px 8px; letter-spacing:0;}
details.var{border-bottom:1px solid var(--line);}
details.var:last-of-type{border-bottom:0;}
details.var > summary{
  display:flex; align-items:baseline; gap:12px; cursor:pointer; padding:9px 2px;
  list-style:none; font-size:.92rem;
}
details.var > summary::-webkit-details-marker{display:none;}
details.var > summary:hover{background:var(--azul-50);}
details.var .et{color:var(--ink); min-width:0; font-weight:600;}
details.var > summary::before{content:"›"; color:var(--ink-3); font-size:1rem; line-height:1; transition:transform .13s; flex-shrink:0;}
details.var[open] > summary::before{transform:rotate(90deg);}
details.var > .tablewrap,details.var > .ref-p{margin:2px 0 12px;}
@media (max-width:560px){
  .ref-body{padding:14px 16px 18px;}
  details.var > summary{flex-direction:column; gap:2px;}
}

/* ---------- Botón + desplegable del diccionario ----------
   Va dentro del panel de consulta, debajo de la caja de pregunta: es ahí donde
   uno necesita saber qué variables hay. El desplegable se posiciona absoluto
   para no empujar la página, y la lista scrollea sola. */
.dicc-wrap{position:relative; margin-top:12px;}
.btn-dicc{
  display:flex; align-items:center; gap:10px; width:100%; font:inherit; font-size:.92rem;
  font-weight:700; color:var(--ink); background:var(--surface); cursor:pointer;
  border:1.5px solid var(--line-strong); border-radius:10px; padding:10px 14px;
  transition:border-color .13s, background .13s;
}
.btn-dicc:hover{border-color:var(--azul); background:var(--azul-50);}
.btn-dicc svg{width:18px; height:18px; color:var(--azul-600); flex-shrink:0;}
.btn-dicc .btn-censo{
  margin-left:auto; font-size:.76rem; font-weight:700; color:var(--azul-600);
  background:var(--azul-50); border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.btn-dicc .chev{color:var(--ink-3); font-size:1.05rem; line-height:1; transition:transform .15s;}
.btn-dicc[aria-expanded="true"]{border-color:var(--azul); background:var(--azul-50);}
.btn-dicc[aria-expanded="true"] .chev{transform:rotate(180deg);}
.dicc-pop{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 7px);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 12px 34px -10px rgba(1,58,105,.28), 0 2px 8px rgba(0,0,0,.08);
  padding:13px 15px 6px; max-height:min(62vh,560px); display:flex; flex-direction:column;
}
.dicc-pop[hidden]{display:none;}
.dicc-lista{overflow-y:auto; padding-right:4px; margin-bottom:8px;}
.dicc-lista h4.ref-tabla{margin:12px 0 4px; position:sticky; top:0; background:var(--surface); padding:4px 0;}
.dicc-lista h4.ref-tabla:first-child{margin-top:0;}
@media (max-width:560px){
  .dicc-pop{max-height:70vh; padding:11px 12px 6px;}
  .btn-dicc .btn-censo{display:none;}
}

/* La pregunta textual del formulario, dentro de la variable desplegada. */
details.var .ref-p.desc{color:var(--ink-2); font-size:.88rem; font-style:italic; margin:2px 0 8px;}

/* Datos de contacto del INE, al pie. Va con su propio rótulo para que quede
   claro que es el organismo que produce los datos, no el de esta aplicación. */
footer .ine-box{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
footer .ine-box p{margin:0; line-height:1.65;}
footer .ine-box b{color:var(--ink);}