/* ==========================================================================
   LIITM v2 — Laboratorio de Inteligencia e Innovación Territorial Municipal

   SISTEMA DE COLOR: el mismo de /laboratorio-territorial/, extraído de su
   bloque `.fedomu-lab` en page-laboratorio-territorial.php. No es una
   aproximación: son los mismos tokens, la misma rampa y los mismos polos.

     --lab-surface  #034FB1   el fondo de pagina ES azul institucional
     --lab-panel    #ffffff   las tarjetas son blancas sobre el azul
     --lab-ink      #0a1f3a   texto sobre blanco
     --lab-muted    #5a6a80   texto secundario sobre blanco
     --lab-gold     #c9a85a   SOLO borders >=3px, nunca texto (2,14:1 sobre blanco)
     --lab-gold-bright #EBC677 dorado para texto sobre azul (5,38:1 AA large)
     CORO_RAMP      5 quintiles, la rampa secuencial del Lab

   Tema unico a proposito. El Lab se compromete con un mundo visual —azul
   institucional— y no tiene modo oscuro. Un fondo azul a 7,62:1 contra blanco
   funciona en cualquier preferencia del sistema. Es una decision, no un olvido.

   Encapsulado bajo .liitm-v2. NO toca el Lab actual ni otros estilos del tema.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
}
/* IBM Plex Mono SOLO para codigo (URI, codigo de cuadro, codigo de municipio).
   Los datos legibles van en Inter con tabular-nums: el mono pequeno se lee como
   maquina de escribir (regla 7 del sistema de diseno Fedomu). */
@font-face {
	font-family: "IBM Plex Mono";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-regular.woff2") format("woff2");
}

.liitm-v2 {
	/* ── Tokens del Lab, copiados tal cual ─────────────────────────────── */
	--l-surface: #034FB1;
	--l-panel: #ffffff;
	--l-panel-alt: #f5f7fb;
	--l-ink: #0a1f3a;
	--l-muted: #5a6a80;
	--l-muted-2: #657489;
	--l-accent: #034FB1;
	--l-accent-hover: #023a85;
	--l-accent-tint: rgba(3, 79, 177, .06);
	--l-gold: #c9a85a;
	--l-gold-bright: #EBC677;
	--l-ink-on-blue: #ffffff;
	--l-muted-on-blue: rgba(255, 255, 255, .82);
	--l-border: rgba(10, 31, 58, .12);
	--l-border-strong: rgba(10, 31, 58, .20);
	--l-border-on-blue: rgba(255, 255, 255, .55);
	--l-divider-on-blue: rgba(255, 255, 255, .28);
	--l-track: rgba(10, 31, 58, .08);
	--l-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 32px -12px rgba(0, 0, 0, .35);
	/* panel-rest: sombra de reposo de todo panel de Papel (DESIGN.md, «ligeramente elevado»). */
	--l-panel-rest: 0 1px 2px rgba(10, 31, 58, .06), 0 10px 24px -18px rgba(10, 31, 58, .35);

	/* ── CORO_RAMP: la rampa secuencial del Lab, 5 quintiles ───────────────
	   Monotonia de luminosidad L .948 -> .354, uniformidad de pasos 1,39
	   (objetivo < 2,0), extremo oscuro a 11,23:1 sobre blanco. Verificado. */
	--s1: #e9eef6;
	--s2: #b9c8de;
	--s3: #7e9ac5;
	--s4: #3e6aa5;
	--s5: #0d3a73;

	/* ── Rampa 'p' de V1, para poblacion / superficie / densidad ───────────
	   Copiada literalmente de `colorFor()` del Laboratorio actual. Es distinta
	   de CORO_RAMP: llega al azul institucional #034FB1 y remata en #022a61. */
	--p1: #cdd9ec;
	--p2: #9ab8de;
	--p3: #5a83c4;
	--p4: #034FB1;
	--p5: #022a61;

	/* ── Divergente derivado del sistema, para la brecha urbano-rural ──────
	   El Lab no tiene divergente porque no muestra brechas. Se construye con
	   sus dos polos de marca —dorado #c9a85a y azul #034FB1— y un neutro
	   claro al centro; nunca un tono en el punto medio. Polos separados a
	   dE 32,0 en vision normal y 28,7 en protanopia. */
	--d1: #8a6a1f;
	--d2: #b8963f;
	--d3: #e0c07e;
	--d4: #f2f0ea;
	--d5: #9ab8de;
	--d6: #3e6aa5;
	--d7: #022a61;

	/* Color por significado (regla 7): oro = identidad de la lectura, azul =
	   estadistico central, teal = total del pais. Tokens de theme.json. */
	--l-gold-card: #D4AF37;
	--l-ink-on-gold: #0a1f3a;
	--l-teal: #008080;
	--l-sidebar-w: 276px;
	--l-sidebar-w-collapsed: 60px;
	--l-topbar-h: 54px;

	--l-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--l-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	display: flex;
	/* PANTALLA COMPLETA (Roberto, 11-sep): el Lab no es una ventana dentro de
	   la pagina. Ocupa todo el ancho y todo el alto que queda bajo el header
	   fijo del tema. Sin marco, sin radio, sin sombra, sin max-width. La
	   altura del header la mide el JS (--liitm-hdr); 68px es el respaldo. */
	--liitm-hdr: 68px;
	min-height: 560px;
	height: calc(100vh - var(--liitm-hdr));
	height: calc(100dvh - var(--liitm-hdr));
	margin: var(--liitm-hdr) 0 0;
	width: 100%;
	max-width: none;
	/* El azul institucional es el FONDO, igual que en el Lab. */
	background: var(--l-surface);
	color: var(--l-ink-on-blue);
	font-family: var(--l-sans);
	font-feature-settings: 'ss01', 'cv11';
	font-size: 14px;
	line-height: 1.45;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	gap: 8px;
	padding: 8px;
}

.liitm-v2 *,
.liitm-v2 *::before,
.liitm-v2 *::after { box-sizing: border-box; }
/* Reset de boton con :where() para que su especificidad sea CERO: con
   `.liitm-v2 button` (clase + elemento) el reset le ganaba a `.liitm-v2__pill`,
   `.liitm-v2__btn`, `.liitm-v2__nav-item` y `.liitm-v2__nav-toggle` (solo
   clase), y por eso las capas y los botones se veian como texto plano y el
   sidebar perdia peso y tamano de fuente. */
.liitm-v2 :where(button) {
	font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
	margin: 0; padding: 0;
}
.liitm-v2 p { margin: 0; }
.liitm-v2 svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.liitm-v2 :focus-visible { outline: 2px solid var(--l-gold-bright); outline-offset: 2px; }
/* Los numeros van en Inter con tabular-nums. */
.liitm-v2 .liitm-v2__kpi-val,
.liitm-v2 .liitm-v2__stat-num,
.liitm-v2 .liitm-v2__lg-scale,
.liitm-v2 .liitm-v2__hist-ax,
.liitm-v2 .liitm-v2__comp-v,
.liitm-v2 .liitm-v2__row-top b,
.liitm-v2 .liitm-v2__meta dd {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1, 'ss01', 'cv11';
}

.liitm-v2__fatal {
	padding: 48px 32px; max-width: 68ch; margin: 0 auto;
	background: var(--l-panel); color: var(--l-ink); border-radius: 10px;
}
.liitm-v2__fatal h1 { font-size: 1.6rem; margin: 0 0 .6em; letter-spacing: -.03em; }
.liitm-v2__fatal p { margin: 0 0 .8em; color: var(--l-muted); font-size: 15px; line-height: 1.6; }
.liitm-v2__fatal code { font-family: var(--l-mono); font-size: .88em; background: var(--l-panel-alt); padding: .1em .35em; border-radius: 3px; }

/* ── SIDEBAR · tarjeta blanca sobre el azul ──────────────────────────────── */
.liitm-v2__sidebar {
	width: var(--l-sidebar-w); background: var(--l-panel); color: var(--l-ink);
	border-radius: 10px; display: flex; flex-direction: column; flex-shrink: 0;
	overflow: hidden; box-shadow: var(--l-panel-rest);
}
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__sidebar { width: var(--l-sidebar-w-collapsed); }
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-item span,
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-section,
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-tag,
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__back span { display: none; }
.liitm-v2__nav { flex: 1; overflow-y: auto; padding: 8px 10px 0; }
.liitm-v2__nav-section {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--l-muted-2); padding: 18px 10px 8px;
}
.liitm-v2__nav-section:first-child { padding-top: 10px; }
/* Item de navegacion: icono en una ficha de color por dominio (el color es
   del dominio, no decoracion: agua = teal, residuos = rojo, energia = oro...),
   etiqueta con cuerpo (14px/500) y cuenta como capsula. */
.liitm-v2__nav-item {
	--nav-c: var(--l-accent); --nav-c-bg: var(--l-accent-tint);
	display: flex; gap: 12px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 10px;
	color: var(--l-ink); width: 100%; text-align: left; font-size: 14px; font-weight: 500;
	letter-spacing: -.01em; line-height: 1.25; margin: 2px 0;
	transition: background 160ms cubic-bezier(.23, 1, .32, 1), color 160ms;
}
.liitm-v2__nav-item svg {
	width: 32px; height: 32px; flex: 0 0 32px; padding: 7px; border-radius: 9px;
	background: var(--nav-c-bg); color: var(--nav-c); stroke-width: 1.9;
	transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.liitm-v2__nav-item[data-dom="all"]        { --nav-c: #034FB1; --nav-c-bg: rgba(3, 79, 177, .10); }
.liitm-v2__nav-item[data-dom="tabla"]      { --nav-c: #0a1f3a; --nav-c-bg: rgba(10, 31, 58, .08); }
.liitm-v2__nav-item[data-dom="territorio"] { --nav-c: #0033A0; --nav-c-bg: rgba(0, 51, 160, .10); }
.liitm-v2__nav-item[data-dom="conteos"]    { --nav-c: #3e6aa5; --nav-c-bg: rgba(62, 106, 165, .12); }
.liitm-v2__nav-item[data-dom="agua"]       { --nav-c: #008080; --nav-c-bg: rgba(0, 128, 128, .11); }
.liitm-v2__nav-item[data-dom="residuos"]   { --nav-c: #C41E3A; --nav-c-bg: rgba(196, 30, 58, .10); }
.liitm-v2__nav-item[data-dom="energia"]    { --nav-c: #9c7a1a; --nav-c-bg: rgba(212, 175, 55, .18); }
.liitm-v2__nav-item[data-dom="vivienda"]   { --nav-c: #0d3a73; --nav-c-bg: rgba(13, 58, 115, .10); }
.liitm-v2__nav-item[data-dom="hogar"]      { --nav-c: #7A5F0E; --nav-c-bg: rgba(122, 95, 14, .10); }
.liitm-v2__nav-item:hover { background: var(--l-panel-alt); color: var(--l-ink); }
@media (hover: hover) { .liitm-v2__nav-item:hover svg { transform: translateY(-1px); } }
.liitm-v2__nav-item[aria-current="page"] {
	background: var(--l-accent-tint); color: var(--l-accent); font-weight: 650;
}
.liitm-v2__nav-item[aria-current="page"] svg { background: var(--nav-c); color: #fff; }
.liitm-v2__nav-item[data-off="1"] { color: var(--l-muted-2); cursor: not-allowed; font-weight: 500; }
.liitm-v2__nav-item[data-off="1"] svg { background: var(--l-panel-alt); color: var(--l-muted-2); }
.liitm-v2__nav-item[data-off="1"]:hover { background: none; color: var(--l-muted-2); }
.liitm-v2__nav-tag {
	margin-left: auto; font-size: 11px; font-weight: 650; letter-spacing: 0;
	color: var(--l-muted); background: var(--l-panel-alt); padding: 3px 8px; min-width: 26px;
	text-align: center; border-radius: 9999px; font-variant-numeric: tabular-nums;
}
.liitm-v2__nav-item[aria-current="page"] .liitm-v2__nav-tag { background: var(--l-accent); color: #fff; }
.liitm-v2__nav-item[data-off="1"] .liitm-v2__nav-tag {
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--l-muted-2); background: none; border: 1px solid var(--l-border);
}
.liitm-v2__back,
.liitm-v2__collapse {
	display: flex; gap: 10px; align-items: center; padding: 13px 18px;
	border-top: 1px solid var(--l-border); color: var(--l-muted); font-size: 13px; font-weight: 500;
	text-decoration: none; width: 100%; text-align: left;
}
.liitm-v2__back:hover,
.liitm-v2__collapse:hover { color: var(--l-accent); background: var(--l-accent-tint); }
.liitm-v2__back svg,
.liitm-v2__collapse svg {
	width: 15px; height: 15px; flex: 0 0 15px;
	transition: transform 240ms cubic-bezier(.23, 1, .32, 1);
}
.liitm-v2[data-sidebar="collapsed"] .liitm-v2__collapse svg { transform: rotate(180deg); }
.liitm-v2__collapse { margin-top: 8px; background: var(--l-panel); }

/* ── MAIN ────────────────────────────────────────────────────────────────── */
.liitm-v2__main { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 8px; }
/* Buscador en la cabecera azul: pildora de Papel, con lista de resultados
   (combobox). Encuentra, no solo cuenta. */
.liitm-v2__search-wrap { position: relative; flex: 0 1 260px; min-width: 180px; }
.liitm-v2__search {
	display: flex; align-items: center; gap: 8px; background: var(--l-panel);
	border: 1px solid var(--l-panel); border-radius: 9999px; padding: 8px 14px;
	box-shadow: var(--l-panel-rest);
}
.liitm-v2__search:focus-within { outline: 2px solid var(--l-gold-bright); outline-offset: 2px; }
.liitm-v2__search input:focus-visible { outline: none; }
.liitm-v2__search svg { width: 14px; height: 14px; stroke: var(--l-muted); stroke-width: 2; flex: 0 0 14px; }
.liitm-v2__search input {
	border: 0; background: none; outline: none; font: inherit; font-size: 13.5px;
	color: var(--l-ink); width: 100%; padding: 0; min-width: 0;
}
.liitm-v2__search input::placeholder { color: var(--l-muted); }
.liitm-v2__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.liitm-v2__results {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0;
	padding: 6px; list-style: none; background: var(--l-panel); color: var(--l-ink);
	border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(10, 31, 58, .28), 0 18px 40px -20px rgba(0, 0, 0, .45);
	max-height: 320px; overflow-y: auto;
}
.liitm-v2__results[hidden] { display: none; }
.liitm-v2__result {
	display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 8px;
	font-size: 13.5px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.liitm-v2__result small { font-weight: 400; font-size: 12px; color: var(--l-muted); margin-left: auto; text-align: right; white-space: nowrap; }
.liitm-v2__result:hover, .liitm-v2__result[aria-selected="true"] { background: var(--l-accent-tint); color: var(--l-accent); }
.liitm-v2__result--none { color: var(--l-muted); font-weight: 400; cursor: default; }
.liitm-v2__result--none:hover { background: none; color: var(--l-muted); }
.liitm-v2__badge {
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	border: 1px solid var(--l-border-on-blue); color: var(--l-ink-on-blue); padding: 6px 11px;
	border-radius: 9999px; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Cabecera editorial: vive sobre el AZUL, con el dorado luminoso en la
   segunda linea (5,38:1 AA para texto grande, verificado por el Lab). */
.liitm-v2__header {
	flex: 0 0 auto; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
	padding: 14px 20px 16px; color: var(--l-ink-on-blue);
	border-bottom: 1px dotted var(--l-divider-on-blue);
}
.liitm-v2__header-titles { flex: 1 1 320px; min-width: 0; }
.liitm-v2 h1, .liitm-v2 h2, .liitm-v2 p { margin: 0; }
.liitm-v2__title-1 {
	display: block; font-family: var(--l-sans); font-weight: 800; letter-spacing: -.04em;
	line-height: 1; font-size: clamp(1.6rem, 2.6vw, 2.25rem); color: var(--l-ink-on-blue);
}
/* Segunda linea en Inter (regla 2: sin serif en titulos), peso medio, sin
   cursiva. El dorado luminoso se mantiene: 5,38:1 sobre el azul. */
.liitm-v2__title-2 {
	display: block; font-family: var(--l-sans); font-weight: 600; font-style: normal;
	letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	color: var(--l-gold-bright); margin-top: 6px;
}
.liitm-v2__header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; flex: 0 0 auto; }
.liitm-v2__btn { white-space: nowrap; flex: 0 0 auto; }
.liitm-v2__btn {
	display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--l-border-on-blue);
	border-radius: 9999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--l-ink-on-blue);
	background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .38);
	transition: background 140ms, border-color 140ms, color 140ms;
}
.liitm-v2__btn:hover { background: rgba(255, 255, 255, .18); border-color: var(--l-gold-bright); color: var(--l-gold-bright); }
.liitm-v2__btn svg { width: 14px; height: 14px; stroke-width: 1.9; }
.liitm-v2__btn:focus-visible, .liitm-v2__pill:focus-visible, .liitm-v2__nav-item:focus-visible { outline: 2px solid var(--l-gold-bright); outline-offset: 2px; }
.liitm-v2__btn--primary { background: var(--l-panel); color: var(--l-accent); border-color: var(--l-panel); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); }
.liitm-v2__btn--primary:hover { background: var(--l-gold-bright); color: var(--l-ink); border-color: var(--l-gold-bright); }

.liitm-v2__content {
	flex: 1; overflow-y: auto; padding: 0; display: grid; gap: 8px;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas: "kpis kpis" "map detail" "bottom bottom";
	align-content: start;
}
.liitm-v2__kpis {
	grid-area: kpis; display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* Tarjetas blancas sobre el azul, como en el Lab. */
.liitm-v2__card {
	background: var(--l-panel); color: var(--l-ink);
	border-radius: 10px; overflow: hidden; box-shadow: var(--l-panel-rest);
}
.liitm-v2__kpi { padding: 16px 18px 15px; position: relative; }
.liitm-v2__kpi-lab {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--l-muted); margin-bottom: 8px; padding-right: 26px;
}
.liitm-v2__kpi-val {
	font-family: var(--l-sans); font-size: 1.55rem; font-weight: 700;
	letter-spacing: -.03em; line-height: 1.1; color: var(--l-ink);
}
.liitm-v2__kpi-sub { font-size: 12px; color: var(--l-muted-2); margin-top: 6px; }
/* Modelo v1: la tarjeta describe la ENTIDAD seleccionada (pais o municipio),
   como la fila de atributos de un GIS. La fuente va al pie y el alcance en una
   capsula: oro cuando es un municipio (seleccion), neutra cuando es el pais. */
.liitm-v2__kpi-val small { font-size: 12.5px; font-weight: 500; color: var(--l-muted); letter-spacing: 0; margin-left: 5px; }
.liitm-v2__kpi-src { font-size: 11.5px; color: var(--l-muted); margin-top: 6px; line-height: 1.4; }
.liitm-v2__kpi-scope {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 9px;
	border-radius: 9999px; font-size: 11px; font-weight: 650; letter-spacing: .02em;
	background: var(--l-panel-alt); color: var(--l-muted); max-width: 100%;
}
.liitm-v2__kpi-scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liitm-v2__kpi[data-scope="municipio"] .liitm-v2__kpi-scope { background: rgba(212, 175, 55, .22); color: var(--l-ink); }
.liitm-v2__kpi[data-scope="municipio"] .liitm-v2__kpi-val { color: var(--l-accent); }
.liitm-v2__kpi .liitm-v2__nd { font-size: 1.1rem; font-weight: 500; }
/* Sello de artefacto: cada tarjeta lleva su icono inline (regla 7). */
.liitm-v2__kpi-ico {
	position: absolute; top: 14px; right: 14px; width: 18px; height: 18px;
	stroke-width: 1.7; opacity: .55;
}
/* Color por significado, no por decoracion (regla 7): la LECTURA ACTIVA es
   la identidad de lo que se mira -> tarjeta oro con texto marino (8,5:1). La
   MEDIANA es el estadistico central -> filete azul y cifra azul. El TOTAL DEL
   PAIS es el marco de referencia -> filete teal. Los rangos quedan neutros. */
.liitm-v2__kpi[data-tone="identidad"] {
	background: var(--l-gold-card); color: var(--l-ink-on-gold);
	box-shadow: 0 14px 28px -16px rgba(212, 175, 55, .75);
}
.liitm-v2__kpi[data-tone="identidad"] .liitm-v2__kpi-lab,
.liitm-v2__kpi[data-tone="identidad"] .liitm-v2__kpi-sub { color: rgba(10, 31, 58, .78); }
.liitm-v2__kpi[data-tone="identidad"] .liitm-v2__kpi-val { color: var(--l-ink-on-gold); }
.liitm-v2__kpi[data-tone="identidad"] .liitm-v2__kpi-ico { opacity: .75; }
.liitm-v2__kpi[data-tone="mediana"] .liitm-v2__kpi-val,
.liitm-v2__kpi[data-tone="mediana"] .liitm-v2__kpi-ico { color: var(--l-accent); }
.liitm-v2__kpi[data-tone="pais"] .liitm-v2__kpi-ico { color: var(--l-teal); }

/* La tarjeta debe ser mas alta que su cabecera + el cuerpo del mapa. Con
   min-height 400 y una cabecera de ~156px (las pills llegan a 84px), el cuerpo
   se desbordaba 76px y `overflow:hidden` recortaba la leyenda entera. */
.liitm-v2__map-card { grid-area: map; display: flex; flex-direction: column; min-height: max(480px, calc(100vh - 440px)); }
.liitm-v2__map-head {
	display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
	padding: 16px 18px 12px; border-bottom: 1px solid var(--l-border);
}
.liitm-v2__map-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.liitm-v2__map-head .liitm-v2__micro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liitm-v2__micro {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--l-muted);
}
.liitm-v2__map-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; color: var(--l-ink); }
/* Con 27 lecturas sin filtrar, las pills ocupaban 5 filas (134px) y empujaban
   el mapa fuera de vista. Se acotan a 3 filas con scroll propio; el filtro de
   dominio del sidebar es la via normal para bajar de 27 a 4-6. */
.liitm-v2__pills {
	flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: nowrap;
	overflow-x: auto; overflow-y: hidden; padding: 2px 24px 4px 0; margin-top: 4px;
	scrollbar-width: none; scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.liitm-v2__pills::-webkit-scrollbar { display: none; }
.liitm-v2__pill { scroll-snap-align: start; flex: 0 0 auto; }
/* Botones de capa: fondo, borde y peso visibles. Antes eran texto plano
   sobre blanco (borde al 20 % y fondo blanco), no se leian como botones. */
.liitm-v2__pill {
	border: 1px solid rgba(3, 79, 177, .30); border-radius: 9999px; padding: 7px 14px;
	font-size: 12.5px; font-weight: 600; color: var(--l-accent); background: #eaf0f9;
	white-space: nowrap; line-height: 1.2;
	box-shadow: 0 1px 0 rgba(10, 31, 58, .06);
	transition: background 140ms, border-color 140ms, color 140ms, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.liitm-v2__pill:hover { border-color: var(--l-accent); color: var(--l-accent-hover); background: #dde7f5; }
@media (hover: hover) { .liitm-v2__pill:hover { transform: translateY(-1px); } }
.liitm-v2__pill[aria-checked="true"] {
	background: var(--l-accent); color: #fff; border-color: var(--l-accent); font-weight: 650;
	box-shadow: 0 8px 16px -10px rgba(3, 79, 177, .7);
}
/* min-height 0: el alto lo reparte flex desde la tarjeta, no lo fuerza el hijo. */
.liitm-v2__map-body { position: relative; flex: 1; min-height: 0; background: var(--l-panel-alt); }
.liitm-v2__map { position: absolute; inset: 0; }
.liitm-v2__map svg { width: 100%; height: 100%; display: block; }
.liitm-v2__reg { fill: none; stroke: var(--l-muted-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* PARIDAD V1 · los 158 poligonos municipales del IGN. V1 pinta el coropletico
   sobre el poligono, no sobre un marcador; V2 hace lo mismo. */
.liitm-v2__mun {
	stroke: rgba(255, 255, 255, .85); stroke-width: .6; cursor: pointer;
	vector-effect: non-scaling-stroke; transition: none; outline: none;
}
.liitm-v2__mun:focus-visible { stroke: var(--l-gold-bright); stroke-width: 3; }
/* Objetivos de toque: circulos transparentes de >=14 px de radio en pantalla
   sobre los municipios cuyo poligono mide menos de 24 px. Reenvian el toque
   al poligono. El mapa deja de exigir puntería de cirujano en el telefono. */
.liitm-v2__tgt { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
/* Selector de region: acerca el viewBox a una region y devuelve tamanos tocables. */
.liitm-v2__zoom { display: inline-flex; align-items: center; margin-left: auto; }
.liitm-v2__zoom select {
	font: inherit; font-size: 12.5px; font-weight: 600; color: var(--l-accent);
	background: var(--l-paper-chip, #eaf0f9); border: 1px solid rgba(3, 79, 177, .30); border-radius: 9999px;
	padding: 6px 30px 6px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23034FB1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.liitm-v2__zoom select:focus-visible { outline: 2px solid var(--l-gold-bright); outline-offset: 2px; }
.liitm-v2__map svg:focus-visible { outline: 2px solid var(--l-gold-bright); outline-offset: -2px; }
.liitm-v2__mun:hover { stroke: var(--l-gold); stroke-width: 2.4; }
.liitm-v2__mun[data-sel="1"] { stroke: var(--l-gold); stroke-width: 3; }
/* El contorno de region va ENCIMA de los municipios para que se lea la division
   territorial sin tapar el dato. */
.liitm-v2__reg { pointer-events: none; }
/* El paso mas claro de CORO_RAMP queda a dE 5,4 del blanco: el borde de tinta
   es lo que garantiza que un municipio de valor bajo siga siendo visible. */
.liitm-v2__dot {
	stroke: rgba(10, 31, 58, .35); stroke-width: 1; cursor: pointer;
	vector-effect: non-scaling-stroke; transition: r 120ms;
}
.liitm-v2__dot:hover { stroke: var(--l-gold); stroke-width: 3; }
.liitm-v2__dot[data-sel="1"] { stroke: var(--l-gold); stroke-width: 3.5; }
.liitm-v2__overlay {
	position: absolute; background: var(--l-panel); border: 1px solid var(--l-border);
	border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 18px -8px rgba(10, 31, 58, .28);
}
/* La leyenda debe estar ACOTADA: sin max-width, la lista de cortes por
   cuantiles la estiraba a 532px y tapaba medio mapa. */
/* Abajo a la DERECHA: al sureste de la isla hay mar; abajo a la izquierda
   la leyenda tapaba 26 municipios de la region Enriquillo. */
.liitm-v2__overlay--legend { right: 14px; bottom: 14px; width: 248px; }
.liitm-v2__overlay--stat { right: 14px; top: 14px; text-align: right; min-width: 132px; }
.liitm-v2__stat-num {
	font-family: var(--l-sans); font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em;
	line-height: 1.1; margin-top: 4px; color: var(--l-accent);
}
.liitm-v2__stat-unit { font-size: 11.5px; color: var(--l-muted); margin-top: 3px; }
.liitm-v2__lg-ramp { display: flex; gap: 2px; margin: 8px 0 5px; }
.liitm-v2__lg-ramp i { flex: 1; height: 12px; border-radius: 3px; display: block; }
.liitm-v2__lg-scale {
	display: flex; justify-content: space-between; font-size: 11px;
	color: var(--l-muted);
}
/* Escala por cuantiles: los cortes se alinean con los limites entre swatches,
   que es la convencion de un coropletico por tramos. 8px y sin envolver. */
.liitm-v2__lg-cuts {
	display: flex; justify-content: space-between; font-size: 11px;
	color: var(--l-muted); margin-top: 3px;
	letter-spacing: -.02em;
}
.liitm-v2__lg-cuts span { white-space: nowrap; }
/* `display:flex` de autor vence al `display:none` que el atributo [hidden]
   aplica desde la hoja del navegador. Sin esta regla, los cortes de una lectura
   por cuantiles seguian visibles al pasar a la lectura divergente: numeros de
   poblacion bajo una escala de puntos porcentuales. */
.liitm-v2__lg-cuts[hidden] { display: none; }
.liitm-v2__lg-nd {
	display: flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--l-muted);
	margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--l-border);
}
.liitm-v2__lg-nd i {
	width: 14px; height: 11px; border-radius: 2px; display: block; flex: 0 0 14px;
	background-image: repeating-linear-gradient(45deg, var(--l-muted-2) 0 1.5px, transparent 1.5px 4px);
	border: 1px solid var(--l-border-strong);
}

/* Resultado inmediato bajo el mapa (telefono): el dato del municipio tocado,
   ahi mismo, sin bajar 1.400 px hasta la ficha. En escritorio la ficha esta
   al lado y esta tarjeta no se muestra. */
.liitm-v2__hit { display: none; }
.liitm-v2__hit-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.liitm-v2__hit-name { font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: var(--l-ink); }
.liitm-v2__hit-prov { font-size: 12.5px; color: var(--l-muted); }
.liitm-v2__hit-val { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--l-accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
.liitm-v2__hit-val small { font-size: 12.5px; font-weight: 500; color: var(--l-muted); letter-spacing: 0; margin-left: 6px; }
.liitm-v2__hit-med { font-size: 12.5px; color: var(--l-muted); margin-top: 4px; }
.liitm-v2__hit-med b { color: var(--l-ink); font-weight: 650; }
.liitm-v2__hit-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.liitm-v2__hit-btn {
	display: inline-flex; gap: 6px; align-items: center; border-radius: 9999px; padding: 9px 14px;
	font-size: 13px; font-weight: 600; background: var(--l-accent); color: #fff; border: 1px solid var(--l-accent);
}
.liitm-v2__hit-btn--ghost { background: var(--l-panel-alt); color: var(--l-accent); border-color: rgba(3, 79, 177, .30); }
.liitm-v2__hit-btn svg { width: 14px; height: 14px; stroke-width: 2; }

.liitm-v2__detail { grid-area: detail; display: flex; flex-direction: column; min-height: 480px; }
.liitm-v2__detail-head {
	padding: 16px 18px; border-bottom: 1px solid var(--l-border);
	display: flex; gap: 10px; align-items: flex-start;
}
.liitm-v2__detail-title { font-size: 17px; font-weight: 750; letter-spacing: -.025em; margin-top: 5px; color: var(--l-ink); }
.liitm-v2__detail-close {
	margin-left: auto; color: var(--l-muted); flex: 0 0 auto; width: 36px; height: 36px;
	display: grid; place-items: center; border-radius: 9999px; background: var(--l-panel-alt);
}
.liitm-v2__detail-close:hover { color: var(--l-accent); background: var(--l-accent-tint); }
.liitm-v2__detail-link { margin-left: auto; }
.liitm-v2__detail-link + .liitm-v2__detail-close { margin-left: 8px; }
.liitm-v2__detail-link[data-ok="1"] { background: rgba(212, 175, 55, .22); color: var(--l-ink); }
.liitm-v2__nota {
	margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: rgba(212, 175, 55, .14);
	color: var(--l-ink); font-size: 12.5px; line-height: 1.5;
}
.liitm-v2__nota b { font-weight: 650; }
.liitm-v2__detail-close svg { width: 16px; height: 16px; stroke-width: 2; }
/* Cabecera de valor de la ficha: la cifra del municipio en la lectura activa,
   con la mediana impresa al lado. Es lo primero que se lee. */
.liitm-v2__detail-hero { padding: 14px 18px 16px; border-bottom: 1px solid var(--l-border); background: var(--l-panel-alt); }
.liitm-v2__detail-hero-lab { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--l-muted); }
.liitm-v2__detail-hero-val { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--l-accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
.liitm-v2__detail-hero-val small { font-size: 12.5px; font-weight: 500; color: var(--l-muted); letter-spacing: 0; margin-left: 6px; }
.liitm-v2__detail-hero-med { font-size: 12.5px; color: var(--l-muted); margin-top: 6px; line-height: 1.45; }
.liitm-v2__detail-hero-med b { color: var(--l-ink); font-weight: 650; }
/* Grupos por dominio: abiertos solo el activo; los identificadores al final, plegados. */
.liitm-v2__grp { border-top: 1px solid var(--l-border); margin: 0 -18px; padding: 0 18px; }
.liitm-v2__grp:first-of-type { border-top: 0; }
.liitm-v2__grp summary {
	display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 12px 0;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--l-muted);
}
.liitm-v2__grp summary::-webkit-details-marker { display: none; }
.liitm-v2__grp summary::after {
	content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg); transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.liitm-v2__grp[open] summary::after { transform: rotate(-135deg); }
.liitm-v2__grp summary b { font-weight: 650; color: var(--l-ink); background: var(--l-panel-alt); padding: 2px 8px; border-radius: 9999px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.liitm-v2__grp summary:hover { color: var(--l-accent); }
.liitm-v2__grp summary:focus-visible { outline: 2px solid var(--l-gold-bright); outline-offset: -2px; }
.liitm-v2__grp > .liitm-v2__row:last-child, .liitm-v2__grp > .liitm-v2__meta:last-child { margin-bottom: 14px; }
.liitm-v2__row--active .liitm-v2__row-top span { color: var(--l-accent); font-weight: 650; }
.liitm-v2__detail-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.liitm-v2__detail-empty { color: var(--l-muted); font-size: 13.5px; line-height: 1.5; text-align: center; padding: 40px 12px; }
.liitm-v2__detail-empty svg { width: 30px; height: 30px; stroke-width: 1.3; margin-bottom: 9px; opacity: .5; }
.liitm-v2__meta {
	display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px;
	margin: 0 0 14px;
}
.liitm-v2__meta dt { color: var(--l-muted); }
.liitm-v2__meta dd { margin: 0; }
.liitm-v2__row { margin-bottom: 12px; }
.liitm-v2__row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; color: var(--l-muted); }
.liitm-v2__row-top b { font-weight: 650; color: var(--l-ink); }
.liitm-v2__bar { height: 7px; border-radius: 4px; background: var(--l-track); position: relative; }
.liitm-v2__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--l-accent); display: block; }
/* Marca de mediana en dorado: 3px, respetando la regla del sistema. */
.liitm-v2__bar u { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--l-gold); border-radius: 1px; }
.liitm-v2__nd { font-size: 12px; color: var(--l-muted-2); font-style: italic; font-weight: 400; }
/* Valor categorico en la ficha: swatch + etiqueta, sin barra. */
.liitm-v2__cat-val { display: inline-flex; gap: 5px; align-items: center; font-family: var(--l-sans); }
.liitm-v2__cat-val i { width: 9px; height: 9px; border-radius: 2px; display: block; flex: 0 0 9px; }

/* PARIDAD V1 · bloque del ayuntamiento en la ficha. Separado del Censo porque
   la autoridad y la web las publica FEDOMU, no la ONE. */
.liitm-v2__ayto {
	margin: 0 0 12px; padding: 9px 10px; background: var(--l-panel-alt);
	border-radius: 6px;
}
.liitm-v2__ayto-alc { font-size: 13px; line-height: 1.35; }
.liitm-v2__ayto-alc b { font-weight: 650; color: var(--l-ink); }
.liitm-v2__ayto-alc span {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--l-muted); margin-top: 2px;
}
.liitm-v2__ayto-links { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; }
.liitm-v2__ayto-links a { font-size: 12.5px; color: var(--l-accent); text-decoration: none; }
.liitm-v2__ayto-links a:hover { text-decoration: underline; }
.liitm-v2__ayto-src { font-size: 11px; color: var(--l-muted-2); margin-top: 6px; }
.liitm-v2__meta--ids dd a { color: var(--l-accent); text-decoration: none; }
.liitm-v2__meta--ids dd a:hover { text-decoration: underline; }

/* Leyenda categorica: la identidad nunca queda solo en el color, cada swatch
   lleva su etiqueta y su conteo de municipios. */
.liitm-v2__lg-cats { display: grid; gap: 3px; margin-top: 2px; }
.liitm-v2__lg-cat {
	display: flex; gap: 7px; align-items: center; font-size: 11.5px;
	color: var(--l-muted); font-family: var(--l-sans);
}
.liitm-v2__lg-cat i { width: 11px; height: 11px; border-radius: 2px; display: block; flex: 0 0 11px; }
.liitm-v2__lg-cat b {
	margin-left: auto; font-weight: 650; color: var(--l-ink);
	font-variant-numeric: tabular-nums;
}
.liitm-v2__lg-cat[data-vacia="1"] { opacity: .45; }

.liitm-v2__bottom {
	grid-area: bottom; display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
.liitm-v2__panel-head {
	padding: 16px 18px; border-bottom: 1px solid var(--l-border);
	display: flex; gap: 10px; align-items: flex-start;
}
.liitm-v2__panel-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; color: var(--l-ink); }
.liitm-v2__panel-count { margin-left: auto; font-size: 11.5px; color: var(--l-muted); white-space: nowrap; margin-top: 2px; }
.liitm-v2__panel-body { padding: 16px 18px; }

.liitm-v2__hist { display: flex; align-items: flex-end; gap: 2px; height: 104px; margin-bottom: 8px; }
.liitm-v2__hist i {
	flex: 1; background: var(--s3); border-radius: 2px 2px 0 0; min-height: 1px; display: block;
}
.liitm-v2__hist i[data-sel="1"] { background: var(--l-gold); }
.liitm-v2__hist-ax {
	display: flex; justify-content: space-between; font-size: 11px; color: var(--l-muted);
}
.liitm-v2__hist-note { font-size: 12px; color: var(--l-muted); margin-top: 10px; line-height: 1.5; }

.liitm-v2__comp { display: grid; gap: 8px; }
.liitm-v2__comp-row { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center; }
.liitm-v2__comp-lab { font-size: 12px; color: var(--l-muted); text-align: right; line-height: 1.3; }
.liitm-v2__comp-tr { position: relative; height: 18px; background: var(--l-track); border-radius: 4px; }
.liitm-v2__comp-p95 { position: absolute; top: 0; bottom: 0; left: 0; background: var(--s2); border-radius: 3px; }
.liitm-v2__comp-med { position: absolute; top: 0; bottom: 0; left: 0; background: var(--s4); border-radius: 3px; }
.liitm-v2__comp-v {
	position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px;
	font-weight: 600; color: var(--l-ink); padding-left: 5px; white-space: nowrap;
}

.liitm-v2__prov { font-size: 12.5px; line-height: 1.5; color: var(--l-muted); }
.liitm-v2__prov dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0 0 12px; }
.liitm-v2__prov dt { color: var(--l-muted-2); white-space: nowrap; }
.liitm-v2__prov dd { margin: 0; word-break: break-word; color: var(--l-ink); }
.liitm-v2__prov code {
	font-family: var(--l-mono); font-size: 11px; background: var(--l-panel-alt);
	padding: 1px 5px; border-radius: 3px; color: var(--l-muted);
}
.liitm-v2__apa {
	margin: 0 0 12px; padding: 0 0 0 1.15em; text-indent: -1.15em;
	font-size: 12px; line-height: 1.55; color: var(--l-muted);
}
.liitm-v2__apa i { font-style: italic; }
.liitm-v2__note-lab {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--l-accent); margin: 0 0 4px;
}
.liitm-v2__warn {
	margin: 0; padding: 10px 0 0; border-top: 1px solid var(--l-border);
	font-size: 12px; line-height: 1.5; color: var(--l-muted);
}
.liitm-v2__warn b { color: var(--l-ink); font-weight: 650; }

/* El pie vive sobre el azul. */
.liitm-v2__foot {
	grid-column: 1 / -1; font-size: 12px; color: var(--l-muted-on-blue);
	line-height: 1.55; padding: 10px 6px 4px;
}
.liitm-v2__foot strong { color: var(--l-ink-on-blue); }
.liitm-v2__foot code { font-family: var(--l-mono); }

@media (prefers-reduced-motion: reduce) {
	.liitm-v2 * { transition: none !important; animation: none !important; }
}
/* El topbar es una fila flex: breadcrumb + buscador (min 200px) + contador no
   caben bajo ~720px y empujaban el contador fuera del viewport. Se cede el
   breadcrumb, que es redundante con el titulo, y el buscador pasa a encogible. */
@media (max-width: 720px) {
	.liitm-v2__search { min-width: 0; flex: 1 1 auto; }
}
/* Vista de tabla: ocupa el AREA DEL MAPA (tabla de atributos, como en un
   GIS) mientras esta activa; el mapa se oculta. Antes el host caia en una
   fila implicita del grid que medía 0px y la tabla era invisible. */
.liitm-v2__tabla-host { grid-area: map; overflow: auto; min-height: 480px; max-height: 70vh; }
/* `display:flex` de autor vence al `display:none` del atributo [hidden]:
   sin esta regla el mapa seguia pintandose debajo de la tabla. */
.liitm-v2__map-card[hidden] { display: none; }
.liitm-v2__tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.liitm-v2__tabla caption {
	text-align: left; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--l-ink);
	letter-spacing: -.01em; position: sticky; left: 0;
}
.liitm-v2__tabla th, .liitm-v2__tabla td {
	padding: 8px 12px; border-bottom: 1px solid var(--l-border); white-space: nowrap; text-align: left;
}
.liitm-v2__tabla td { font-variant-numeric: tabular-nums; text-align: right; color: var(--l-ink); }
.liitm-v2__tabla td:nth-child(-n+3) { text-align: left; color: var(--l-muted); }
.liitm-v2__tabla thead th {
	position: sticky; top: 0; z-index: 2; background: var(--l-panel-alt); color: var(--l-muted);
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	border-bottom: 1px solid var(--l-border-strong);
}
.liitm-v2__tabla tbody th {
	position: sticky; left: 0; z-index: 1; background: var(--l-panel); font-weight: 650; color: var(--l-ink);
	box-shadow: inset -1px 0 0 var(--l-border);
}
.liitm-v2__tabla tbody tr:hover td, .liitm-v2__tabla tbody tr:hover th { background: var(--l-accent-tint); }
.liitm-v2__tabla thead th:first-child { left: 0; z-index: 3; }

/* Estado vacio de un panel, alineado con el de la ficha. */
.liitm-v2__panel-empty {
	color: var(--l-muted); font-size: 13px; line-height: 1.5; text-align: center; padding: 28px 12px;
}
.liitm-v2__panel-empty svg { width: 26px; height: 26px; stroke-width: 1.3; margin-bottom: 8px; opacity: .5; display: block; margin-inline: auto; }

/* Identificadores en la ficha: nunca partir un codigo en dos lineas. */
.liitm-v2__meta--ids dd code { white-space: nowrap; }

/* Boton "Lecturas" del topbar: solo existe en movil (lo crea el JS). */
.liitm-v2__nav-toggle { display: none; }
.liitm-v2__backdrop { display: none; }

@media (max-width: 1000px) {
	.liitm-v2 { height: auto; min-height: calc(100vh - var(--liitm-hdr)); max-height: none; flex-direction: column; overflow: visible; padding: 8px; }
	/* HOJA INFERIOR. El sidebar es la mejor idea de v2 y era lo primero que
	   desaparecia en el telefono. Aqui vive como hoja deslizable sobre el
	   mapa: mismo markup, mismo JS de navegacion, otra posicion. z-index por
	   encima del header fijo del tema (40). */
	.liitm-v2__sidebar {
		position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 78vh;
		z-index: 80; border-radius: 18px 18px 0 0;
		transform: translateY(103%); transition: transform 280ms cubic-bezier(.23, 1, .32, 1);
		box-shadow: 0 -16px 48px rgba(0, 0, 0, .38);
	}
	.liitm-v2[data-sheet="open"] .liitm-v2__sidebar { transform: none; }
	/* Asa de arrastre visual. */
	.liitm-v2__sidebar::before {
		content: ""; display: block; width: 44px; height: 5px; border-radius: 3px;
		background: var(--l-border-strong); margin: 10px auto 0; flex: 0 0 auto;
	}
	.liitm-v2__nav { padding: 6px 12px 0; }
	/* «Cerrar» siempre a la vista, pegado al pie de la hoja. */
	.liitm-v2__collapse { position: sticky; bottom: 0; margin-top: 8px; border-top: 1px solid var(--l-border); box-shadow: 0 -8px 16px -12px rgba(10, 31, 58, .25); }
	.liitm-v2__nav-item { padding: 8px 12px 8px 10px; font-size: 15px; border-radius: 12px; }
	.liitm-v2__nav-item svg { width: 36px; height: 36px; flex-basis: 36px; padding: 8px; border-radius: 10px; }
	.liitm-v2__nav-section { padding: 16px 12px 8px; }
	.liitm-v2__back, .liitm-v2__collapse { padding: 14px 20px; font-size: 14px; }
	/* En movil "Colapsar" no tiene sentido: el mismo boton cierra la hoja. */
	.liitm-v2__collapse span { display: none; }
	.liitm-v2__collapse::after { content: "Cerrar"; }
	.liitm-v2__collapse svg { transform: rotate(-90deg); }
	/* El estado colapsado de escritorio no aplica a la hoja. */
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__sidebar { width: auto; }
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-item span,
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__back span { display: inline; }
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-tag { display: inline-block; }
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__nav-section { display: block; }
	.liitm-v2[data-sidebar="collapsed"] .liitm-v2__collapse svg { transform: rotate(-90deg); }
	.liitm-v2__backdrop {
		display: block; position: fixed; inset: 0; z-index: 79;
		background: rgba(10, 31, 58, .55); opacity: 0; pointer-events: none;
		transition: opacity 240ms;
	}
	.liitm-v2[data-sheet="open"] .liitm-v2__backdrop { opacity: 1; pointer-events: auto; }
	.liitm-v2__nav-toggle {
		display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px;
		border-radius: 9999px; background: var(--l-panel); color: var(--l-accent);
		border: 1px solid var(--l-panel); box-shadow: var(--l-panel-rest);
		font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
	}
	.liitm-v2__hit { display: block; order: 1; padding: 14px 16px 16px; border-top: 1px solid var(--l-border); }
	.liitm-v2__hit[hidden] { display: none; }
	/* El boton «volver arriba» del tema tapaba los valores de la ficha. */
	body.liitm-v2-body #fedomu-btt { display: none !important; }
	.liitm-v2__nav-toggle svg { width: 15px; height: 15px; stroke-width: 2; }

	.liitm-v2__content {
		grid-template-columns: minmax(0, 1fr);
		/* El mapa va PRIMERO: en el telefono es el lienzo del GIS; los KPI
		   y la ficha vienen despues. */
		grid-template-areas: "map" "kpis" "detail" "bottom";
		overflow-y: visible;
	}
	.liitm-v2__tabla-host { min-height: 0; max-height: 60vh; }
	.liitm-v2__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.liitm-v2__map-card, .liitm-v2__detail { min-height: 340px; }
}
html.liitm-v2-sheet-open { overflow: hidden; }

/* El body de esta pagina es azul: asi no hay franja clara entre el header y
   el shell ni bajo el shell antes del pie. El shell empieza exactamente donde
   termina el header fijo (margin-top = --liitm-hdr, medido por el JS). */
body.liitm-v2-body { background: var(--l-surface, #034FB1); }

/* Telefono: la leyenda deja de flotar sobre el mapa y pasa debajo, en su
   propio bloque; la mediana queda como unica capa sobre el mapa. Sin esto,
   35 pills + leyenda + mediana se amontonaban sobre un mapa de 340px. */
@media (max-width: 720px) {
	.liitm-v2__map-card { min-height: 0; }
	.liitm-v2__map-head { padding: 14px 16px; }
	.liitm-v2__map-body { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; }
	/* Alto = proporcion real del viewBox (la publica el JS en --liitm-map-ar):
	   el mapa ocupa exactamente lo que dibuja, sin franja vacia debajo. */
	.liitm-v2__map { position: relative; height: auto; aspect-ratio: var(--liitm-map-ar, 1.72); max-height: 60vh; flex: 0 0 auto; }
	.liitm-v2__map svg { height: 100%; }
	.liitm-v2__overlay--legend {
		position: static; width: auto; border: 0; border-top: 1px solid var(--l-border);
		border-radius: 0; box-shadow: none; padding: 14px 16px; order: 2;
	}
	.liitm-v2__map-card { padding-bottom: 0; }
	.liitm-v2__search-wrap { flex: 1 1 160px; min-width: 0; }
	/* En telefono la cuenta de municipios viaja en el placeholder del buscador
	   y la mediana flotante se retira: tapaba la costa norte y la tarjeta
	   «Mediana» viene justo debajo del mapa. */
	.liitm-v2__badge { display: none; }
	.liitm-v2__overlay--stat { display: none; }
	.liitm-v2__btn { padding: 8px 13px; font-size: 12.5px; }
	.liitm-v2__header { padding: 16px 16px 14px; gap: 12px; }
	.liitm-v2__header-titles { flex-basis: 100%; }
	/* Los botones «Ver tabla» y «CSV» bajan a la cabeza del mapa (los mueve el
	   JS) y la cabeza del mapa se reordena: titulo, mapa, capas debajo del mapa
	   junto a la leyenda. El mapa arranca ~100 px mas arriba. */
	.liitm-v2__map-head { display: contents; }
	.liitm-v2__map-head > div:first-child { order: 0; padding: 14px 16px 10px; }
	.liitm-v2__map-head .liitm-v2__zoom { order: 0; margin: 0 16px 10px; align-self: flex-start; }
	.liitm-v2__map-head .liitm-v2__btn { order: 3; }
	.liitm-v2__map-body { order: 1; }
	.liitm-v2__pills { order: 2; margin: 0; padding: 12px 16px 10px; border-top: 1px solid var(--l-border); }
	.liitm-v2__map-actions { order: 3; display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
	.liitm-v2__map-actions .liitm-v2__btn { background: var(--l-paper-chip, #eaf0f9); color: var(--l-accent); border-color: rgba(3, 79, 177, .30); }
	.liitm-v2__map-actions .liitm-v2__btn--primary { background: var(--l-accent); color: #fff; border-color: var(--l-accent); box-shadow: none; }
	.liitm-v2__overlay--stat { right: 8px; top: 8px; padding: 8px 10px; min-width: 0; }
	.liitm-v2__stat-num { font-size: 1.2rem; }
	.liitm-v2__header { padding: 18px 16px 16px; }
	.liitm-v2__header-actions { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
	.liitm-v2__kpi { padding: 14px 16px 13px; }
	.liitm-v2__kpi-val { font-size: 1.4rem; }
	.liitm-v2__comp-row { grid-template-columns: 104px 1fr; }
	.liitm-v2__detail { min-height: 0; }
}