/* Inteligencia Territorial Electoral — sistema de diseño v0.1
   Principios (ver docs/diseno/SISTEMA-DE-DISENO.md):
   1. Neutral políticamente: nada de colores de partidos como marca.
   2. Cada cifra con su fuente y fecha.
   3. Legible antes que vistoso: contraste AA, objetivos táctiles >= 44px, sin depender de JavaScript. */

/* ---------- Tokens ---------- */
:root {
    --c-tinta: #0b3c53;          /* marca: azul petróleo */
    --c-tinta-osc: #072838;
    --c-tinta-suave: #e3eef3;
    --c-acento: #b45309;         /* ámbar oscuro: destaca sin ser color de partido */
    --c-acento-suave: #fdf1e3;

    --c-fondo: #f5f7f9;
    --c-superficie: #ffffff;
    --c-texto: #14222c;
    --c-texto-suave: #43545f;    /* 7.6:1 sobre fondo */
    --c-borde: #d3dce3;
    --c-borde-fuerte: #738794;

    --c-ok: #1b7f5c;
    --c-ok-suave: #e3f4ed;
    --c-aviso: #8a5300;
    --c-aviso-suave: #fff3d6;
    --c-error: #b3261e;
    --c-error-suave: #fdeceb;

    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-num: var(--fuente);          /* las cifras usan la misma fuente, con dígitos de ancho fijo */
    --fuente-codigo: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1rem;
    --t-lg: 1.25rem;
    --t-xl: 1.625rem;
    --t-2xl: 2.125rem;

    --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem;
    --e5: 1.5rem; --e6: 2rem; --e7: 3rem;

    --radio: 0.5rem;
    --sombra: 0 1px 2px rgb(7 40 56 / 8%), 0 1px 1px rgb(7 40 56 / 4%);
    --ancho-lateral: 15.5rem;
    --c-lateral: #06222f;
    --c-lateral-activo: #124562;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --c-tinta: #7fc4de;
        --c-tinta-osc: #04202d;
        --c-tinta-suave: #12323f;
        --c-acento: #f0a35a;
        --c-acento-suave: #3a2812;
        --c-fondo: #0c1820;
        --c-superficie: #12232d;
        --c-texto: #e8eff3;
        --c-texto-suave: #a9bbc6;
        --c-borde: #28404e;
        --c-borde-fuerte: #6f8a9b;
        --c-ok: #5fd0a3;
        --c-ok-suave: #123428;
        --c-aviso: #f2c36b;
        --c-aviso-suave: #3a2d0e;
        --c-error: #ff9d96;
        --c-error-suave: #3d1a18;
        --sombra: none;
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--c-fondo);
    color: var(--c-texto);
    font: 400 var(--t-base)/1.55 var(--fuente);
    font-variant-numeric: tabular-nums;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e3); text-wrap: balance; }
h1 { font-size: var(--t-xl); font-weight: 650; }
h2 { font-size: var(--t-lg); font-weight: 650; }
h3 { font-size: var(--t-base); font-weight: 650; }
p { margin: 0 0 var(--e3); max-width: 68ch; }
a { color: var(--c-tinta); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--fuente-codigo); font-size: 0.9em; }
img, svg { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--c-acento);
    outline-offset: 2px;
    border-radius: 2px;
}

.saltar {
    position: absolute; left: var(--e4); top: -4rem; z-index: 100;
    background: var(--c-tinta-osc); color: #fff; padding: var(--e3) var(--e4);
    border-radius: var(--radio); transition: top 0.15s;
}
.saltar:focus { top: var(--e3); }

.oculto-visual {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botones y formularios ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    min-height: 2.75rem; padding: 0 var(--e5);
    border: 1px solid transparent; border-radius: var(--radio);
    background: var(--c-tinta); color: #fff; font: 600 var(--t-sm)/1 var(--fuente);
    cursor: pointer; text-decoration: none;
    transition: background-color 0.18s, border-color 0.18s;
}
.boton:hover { background: var(--c-tinta-osc); }
.boton--secundario { background: transparent; color: var(--c-tinta); border-color: var(--c-borde-fuerte); }
.boton--secundario:hover { background: var(--c-tinta-suave); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .boton:not(.boton--secundario) { color: #04202d; }
    :root:not([data-tema="claro"]) .boton:not(.boton--secundario):hover { background: #a6d8ea; }
}

.campo { margin-bottom: var(--e4); }
.campo label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--e1); }
.campo input {
    width: 100%; min-height: 2.75rem; padding: 0 var(--e3);
    border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio);
    background: var(--c-superficie); color: var(--c-texto); font: inherit;
}
.campo input:hover { border-color: var(--c-tinta); }
.campo input:focus-visible { outline-offset: 0; border-color: var(--c-acento); }
.campo .ayuda { font-size: var(--t-xs); color: var(--c-texto-suave); margin: var(--e1) 0 0; }

.alerta {
    display: flex; gap: var(--e3); align-items: flex-start;
    padding: var(--e3) var(--e4); border-radius: var(--radio);
    border: 1px solid; margin-bottom: var(--e4); font-size: var(--t-sm);
}
.alerta p { margin: 0; }
.alerta--error { background: var(--c-error-suave); border-color: var(--c-error); color: var(--c-texto); }
.alerta--error .icono { color: var(--c-error); }
.alerta--info { background: var(--c-tinta-suave); border-color: var(--c-tinta); }
.alerta--aviso { background: var(--c-aviso-suave); border-color: var(--c-aviso); }

/* ---------- Insignias de estado ---------- */
.insignia {
    display: inline-flex; align-items: center; gap: var(--e1);
    padding: 0.125rem var(--e3); border-radius: 999px; border: 1px solid;
    font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.insignia--ok { background: var(--c-ok-suave); border-color: var(--c-ok); color: var(--c-texto); }
.insignia--aviso { background: var(--c-aviso-suave); border-color: var(--c-aviso); color: var(--c-texto); }
.insignia--neutra { background: transparent; border-color: var(--c-borde-fuerte); color: var(--c-texto-suave); }

/* ---------- Pantalla de ingreso ---------- */
.ingreso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.ingreso__marca {
    background: var(--c-tinta-osc); color: #e8f1f5;
    padding: var(--e6) var(--e5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e6);
}
.ingreso__marca h1 { color: #fff; font-size: var(--t-xl); max-width: 22ch; }
.ingreso__marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4); }
.ingreso__marca li { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t-sm); color: #cfe0e8; }
.ingreso__marca li strong { color: #fff; display: block; }
.ingreso__marca .icono { margin-top: 0.15rem; color: #f0a35a; }
.ingreso__formulario { padding: var(--e6) var(--e5); display: grid; place-content: center; }
.ingreso__tarjeta { width: min(100%, 24rem); }
.ingreso__tarjeta h2 { font-size: var(--t-xl); }
.ingreso__tarjeta .boton { width: 100%; }
.marca { display: inline-flex; align-items: center; gap: var(--e3); font-weight: 650; text-decoration: none; color: inherit; }
.marca__sello {
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: grid; place-items: center;
    background: var(--c-acento); color: #fff;
}
.marca small { display: block; font-weight: 400; opacity: 0.8; font-size: var(--t-xs); }

@media (min-width: 56rem) {
    .ingreso { grid-template-columns: minmax(20rem, 5fr) 6fr; }
    .ingreso__marca { padding: var(--e7) var(--e6); }
}

/* ---------- Armazón de la aplicación (v0.2): barra lateral oscura agrupada y barra superior ---------- */
.app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.app__cuerpo { min-width: 0; display: flex; flex-direction: column; }

.lateral { background: var(--c-lateral); color: #cfe0e8; padding: var(--e3) var(--e3) var(--e2); }
.lateral .marca { color: #fff; padding: var(--e1) var(--e2) var(--e3); }
.lateral .marca small { color: #9db8c5; opacity: 1; }
.lateral__modulos { display: flex; gap: var(--e3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--e1); }
.lateral__modulos::-webkit-scrollbar { display: none; }
.lateral__grupo { flex: none; }
.lateral__titulo { display: none; margin: 0; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e1); }
.nav-enlace {
    display: flex; align-items: center; gap: var(--e3); min-height: 2.75rem; padding: 0 var(--e3);
    border-radius: 0.6rem; text-decoration: none; color: #d7e6ee; font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
a.nav-enlace:hover { background: #0d3446; color: #fff; }
.nav-enlace[aria-current="page"] { background: var(--c-lateral-activo); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--c-acento); }
.nav-enlace .icono { width: 1.125rem; height: 1.125rem; }

.app__barra {
    display: flex; align-items: center; gap: var(--e4); padding: var(--e2) var(--e4);
    background: var(--c-superficie); border-bottom: 1px solid var(--c-borde); position: sticky; top: 0; z-index: 5;
}
.barra__contexto { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0; font-size: var(--t-sm); max-width: none; }
.contexto__chip {
    display: inline-flex; align-items: center; gap: var(--e2); border: 1px solid var(--c-borde-fuerte); border-radius: 99px;
    padding: 0.15rem 0.65rem; font-size: var(--t-xs); background: #fff;
}
.contexto__punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-ok); }
.barra__usuario { display: flex; align-items: center; gap: var(--e3); font-size: var(--t-sm); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.barra__usuario span { text-align: right; line-height: 1.3; }
.barra__usuario small { display: block; color: var(--c-texto-suave); }
.barra__salir {
    display: inline-flex; align-items: center; gap: var(--e2); min-height: 2.5rem; padding: 0 var(--e3);
    border-radius: var(--radio); border: 1px solid var(--c-borde-fuerte); text-decoration: none; font-size: var(--t-sm); color: var(--c-texto);
}
.barra__salir:hover { background: var(--c-tinta-suave); }
.barra__salir[aria-current="page"] { background: var(--c-tinta-suave); border-color: var(--c-tinta); }

.contenido { padding: var(--e5) var(--e4) var(--e7); max-width: 80rem; width: 100%; }
.contenido__cabecera { margin-bottom: var(--e5); }
.contenido__cabecera p { color: var(--c-texto-suave); margin-bottom: 0; }
.migas { font-size: var(--t-xs); color: var(--c-texto-suave); margin-bottom: var(--e2); }

@media (min-width: 56rem) {
    .app { grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
    .lateral { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: var(--e4) var(--e3); }
    .lateral .marca { padding-bottom: var(--e4); }
    .lateral__modulos { flex-direction: column; gap: 0; overflow: visible; }
    .lateral__grupo { margin-top: var(--e3); }
    .lateral__grupo:first-child { margin-top: 0; }
    .lateral__titulo { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7f9dab; padding: 0 var(--e3); margin: 0 0 var(--e1); }
    .lateral ul { flex-direction: column; }
    .contenido { padding: var(--e6) var(--e6) var(--e7); }
}

/* ---------- Tarjetas, cifras y tablas ---------- */
.rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: var(--e5); }
.tarjeta {
    background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio);
    padding: var(--e4) var(--e5); box-shadow: var(--sombra);
}
.tarjeta h2, .tarjeta h3 { margin-bottom: var(--e2); }
.tarjeta--vacia { border-style: dashed; border-color: var(--c-borde-fuerte); background: transparent; box-shadow: none; }

.cifra__etiqueta { font-size: var(--t-sm); color: var(--c-texto-suave); display: flex; justify-content: space-between; gap: var(--e3); align-items: center; }
.cifra__valor { font: 650 var(--t-2xl)/1.1 var(--fuente); font-variant-numeric: tabular-nums; margin: var(--e2) 0; }
.cifra__valor--pendiente { color: var(--c-texto-suave); }
.cifra__nota { font-size: var(--t-xs); color: var(--c-texto-suave); margin: 0; }
.fuente { font-size: var(--t-xs); color: var(--c-texto-suave); border-top: 1px solid var(--c-borde); padding-top: var(--e2); margin: var(--e3) 0 0; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--c-borde); border-radius: var(--radio); background: var(--c-superficie); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
caption { text-align: left; padding: var(--e3) var(--e4); font-weight: 650; }
th, td { padding: var(--e3) var(--e4); text-align: left; border-top: 1px solid var(--c-borde); vertical-align: top; }
thead th { background: var(--c-tinta-suave); border-top: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.separado { margin-top: var(--e6); }

/* ---------- Filtros, mapa y leyendas ---------- */
.filtros { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--e5); }
.filtros .campo { margin: 0; min-width: 14rem; }
.campo select {
    width: 100%; min-height: 2.75rem; padding: 0 var(--e3); font: inherit;
    border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio);
    background: var(--c-superficie); color: var(--c-texto);
}
.cifra__sufijo { font-size: var(--t-sm); font-weight: 500; color: var(--c-texto-suave); }
.cifra__valor--texto { font-size: var(--t-lg); line-height: 1.25; }
.nota-mapa { font-size: var(--t-sm); color: var(--c-texto-suave); }
.mapa {
    height: 26rem; border: 1px solid var(--c-borde); border-radius: var(--radio);
    background: var(--c-tinta-suave); margin-bottom: var(--e3); z-index: 0;
}
.leyenda { list-style: none; padding: 0; margin: 0 0 var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-sm); }
.leyenda li { display: flex; align-items: center; gap: var(--e2); }
.chip-color {
    display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 50%;
    border: 2px solid var(--c-texto); margin-right: var(--e2); vertical-align: -0.1rem; flex: none;
}
.leyenda .chip-color { margin-right: 0; }

/* ---------- Pestañas de escenario, pesos, barras y método ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.pestanas a {
    display: inline-flex; flex-direction: column; justify-content: center; min-height: 2.75rem; padding: var(--e1) var(--e4);
    border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio); text-decoration: none; color: var(--c-texto); font-size: var(--t-sm);
}
.pestanas a:hover { background: var(--c-tinta-suave); }
.pestanas a[aria-current="page"] { background: var(--c-tinta); border-color: var(--c-tinta); color: #fff; font-weight: 650; }
.pestanas__detalle { font-size: var(--t-xs); opacity: 0.85; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .pestanas a[aria-current="page"] { color: #04202d; } }
.fila-activa th, .fila-activa td { background: var(--c-tinta-suave); }
tfoot th, tfoot td { border-top: 2px solid var(--c-borde-fuerte); background: var(--c-tinta-suave); }

.pesos__rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: var(--e3) 0; }
.pesos .campo { margin: 0; }

.barra { display: inline-block; width: 6rem; height: 0.625rem; border-radius: 999px; background: var(--c-borde); vertical-align: middle; margin-right: var(--e2); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--c-tinta); }
.porque { font-weight: 400; margin-top: var(--e1); }
.porque summary { cursor: pointer; color: var(--c-tinta); font-size: var(--t-xs); min-height: 1.5rem; }
.porque ul { margin: var(--e2) 0 0; padding-left: var(--e5); font-size: var(--t-xs); color: var(--c-texto-suave); }
.metodo { margin-top: var(--e5); border: 1px solid var(--c-borde); border-radius: var(--radio); padding: var(--e3) var(--e5); background: var(--c-superficie); }
.metodo summary { cursor: pointer; font-weight: 650; min-height: 2rem; display: flex; align-items: center; }
.metodo[open] summary { margin-bottom: var(--e3); }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.pasos li { counter-increment: paso; display: flex; gap: var(--e3); font-size: var(--t-sm); }
.pasos li::before {
    content: counter(paso); flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--c-tinta); color: #fff; font-weight: 650; font-size: var(--t-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .app__barra, .lateral, .saltar { display: none; }
    .app { display: block; }
    body { background: #fff; color: #000; }
}

.lista-pendientes { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e2); }
.lista-pendientes li { padding: var(--e3) var(--e4); border: 1px dashed var(--c-borde-fuerte); border-radius: var(--radio); font-size: var(--t-sm); }
.lista-pendientes .cifra__nota { display: block; }

.lista-corta { margin: var(--e2) 0 var(--e3); padding-left: var(--e5); display: grid; gap: var(--e2); }
.lista-corta .cifra__nota { display: block; }

/* ---------- Programa de gobierno: insumos ---------- */
.alerta--ok { background: var(--c-ok-suave); border-color: var(--c-ok); }
.alerta--ok .icono { color: var(--c-ok); }
.boton--chico { min-height: 2.75rem; padding: 0 var(--e3); font-size: var(--t-xs); }
.boton--peligro { color: var(--c-error); border-color: var(--c-error); }
.boton--peligro:hover { background: var(--c-error-suave); }
.insumo-form { margin-top: var(--e2); }
.acciones { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.insumos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.insumos .tarjeta { padding: var(--e4); }
.insumo-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; margin-top: var(--e3); }
.insumo-eje { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.insumo-eje select { min-height: 2.75rem; padding: 0 var(--e3); font: inherit; border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio); background: var(--c-superficie); color: var(--c-texto); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .boton--peligro { color: var(--c-error); } }

.formulario-angosto { max-width: 28rem; }

/* ---------- Celular: menú de módulos que se desliza y barra superior compacta ---------- */
@media (max-width: 55.99rem) {
    .lateral .marca { font-size: var(--t-sm); line-height: 1.25; }
    .lateral__modulos { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); padding-right: var(--e6); }
    .app__barra { position: static; padding: var(--e2) var(--e3); gap: var(--e2); }
    .barra__usuario > span { display: none; }
    .barra__salir { padding: 0 var(--e3); }
    .contenido { padding: var(--e4) var(--e3) var(--e6); }
}

/* ---------- Ajustes de celular (revisión de producto) ---------- */
.tabla-envoltura table { min-width: 36rem; }
th[scope="row"] .cifra__nota { display: block; font-weight: 400; }
th[scope="row"] { min-width: 11rem; }
.boton--chico { white-space: nowrap; }

.meta-lista { display: grid; grid-template-columns: max-content 1fr; gap: var(--e1) var(--e4); margin: var(--e3) 0; font-size: var(--t-sm); }
.meta-lista dt { font-weight: 650; color: var(--c-texto-suave); }
.meta-lista dd { margin: 0; }
.meta-form { display: grid; gap: var(--e2); max-width: 32rem; margin-top: var(--e3); }

/* ---------- Partidos: barras de peso (la cifra siempre va escrita; el color no significa un partido) ---------- */
.partidos-barras { list-style: none; margin: var(--e4) 0 0; padding: 0; }
.bp { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr minmax(7rem, auto); gap: var(--e3); align-items: center; margin: var(--e2) 0; font-size: var(--t-sm); }
.bp__pista { display: block; height: 1rem; background: var(--c-tinta-suave); border-radius: 4px; overflow: hidden; }
.bp__relleno { display: block; height: 100%; }
.bp__relleno--0 { background: #0072B2; } .bp__relleno--1 { background: #E69F00; } .bp__relleno--2 { background: #009E73; }
.bp__relleno--3 { background: #CC79A7; } .bp__relleno--4 { background: #56B4E9; } .bp__relleno--5 { background: #D55E00; }
.bp__relleno--6 { background: #F0E442; } .bp__relleno--7 { background: #666666; } .bp__relleno--otro { background: #9aa8b1; }
.bp__valor { text-align: right; font-family: var(--fuente-num); white-space: nowrap; }
/* Comparación de barras (municipio frente a promedio) y minigráficos de evolución */
.cmp { display: grid; gap: 2px; min-width: 7rem; }
.cmp__pista { display: block; height: .6rem; background: var(--c-tinta-suave); border-radius: 3px; overflow: hidden; }
.cmp__barra { display: block; height: 100%; }
.cmp__barra--mun { background: #0072B2; }
.cmp__barra--par { background: #9aa8b1; }
.spark { width: 6rem; height: 1.7rem; vertical-align: middle; margin-left: var(--e2); }
.spark polyline { stroke: #0072B2; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: #0072B2; }
@media (max-width: 640px) { .bp { grid-template-columns: 1fr; gap: var(--e1); } .bp__valor { text-align: left; } }

/* ---------- Perfil del candidato ---------- */
.perfil-rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-bottom: var(--e4); }
.redes { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.red { display: flex; gap: var(--e3); align-items: center; border: 1px solid var(--c-borde); border-radius: var(--radio); padding: var(--e3); background: var(--c-superficie); }
.red__icono { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-tinta-suave); color: var(--c-tinta); display: grid; place-items: center; font-weight: 700; flex: none; }
.red__datos { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Mapa del municipio ---------- */
.capas { border: 1px solid var(--c-borde); border-radius: var(--radio); padding: var(--e3) var(--e4); margin: 0 0 var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); background: var(--c-superficie); }
.capas legend { font-weight: 600; padding: 0 var(--e2); }
.capa { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); min-height: 2.75rem; cursor: pointer; }
.mapa--alto { min-height: 32rem; }
.chip-color--vereda { background: #fbe3b9; border: 2px solid #7a4b00; }
.chip-color--puesto { background: transparent; border: 3px solid #14222c; border-radius: 50%; }
.spark + .cifra__nota { white-space: nowrap; }
.insignias { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0; margin: var(--e2) 0; }
.ruta { list-style: none; padding: 0; margin: var(--e3) 0; display: grid; gap: var(--e2); }
.ruta__paso { display: grid; grid-template-columns: 6rem 1fr; gap: var(--e2); align-items: baseline; }
.ruta__paso .cifra__nota { grid-column: 2; }

/* Pirámide de población: hombres a la izquierda, mujeres a la derecha (Okabe-Ito, no colores de partido) */
.piramide { max-width: 40rem; margin: var(--e3) 0; }
.piramide__titulos, .piramide__fila { display: grid; grid-template-columns: 1fr 4.5rem 1fr; align-items: center; gap: var(--e2); margin: 0; }
.piramide__titulos { font-size: var(--t-sm); color: var(--c-texto-suave); }
.piramide__titulos span:first-child { text-align: right; }
.piramide__titulos span:nth-child(2) { text-align: center; }
.piramide__fila { margin: 2px 0; font-size: var(--t-sm); }
.piramide__grupo { text-align: center; font-family: var(--fuente-num); }
.piramide__lado { display: flex; height: 1rem; background: var(--c-tinta-suave); border-radius: 3px; overflow: hidden; }
.piramide__lado--h { justify-content: flex-end; }
.piramide__barra { display: block; height: 100%; }
.piramide__barra--h { background: #0072B2; }
.piramide__barra--m { background: #D55E00; }

/* Capas de color del mapa del municipio */
.capas-color { display: flex; flex-wrap: wrap; gap: var(--e3); }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e2) 0; font-size: var(--t-sm); }
.leyenda__bloque { display: grid; gap: 2px; max-width: 24rem; }
.leyenda__item { display: block; }
.leyenda .cifra__nota { margin: var(--e1) 0 0; }
@media print {
    .app__barra, .lateral, .capas-color, .capas, .acciones, #imprimir, .tarjeta, .contenido__cabecera p:not(.migas), noscript { display: none !important; }
    .mapa--alto { height: 70vh !important; }
    .leyenda { display: flex !important; }
}

.capas--alcance .alcance { display: inline-flex; gap: var(--e3); align-items: center; margin-right: var(--e4); }

/* ---------- Componentes v0.2: más jerarquía y menos ruido (reemplazan a los de arriba) ---------- */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
.rejilla { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.tarjeta { border-radius: 0.75rem; padding: var(--e4) var(--e5); }
.cifra__etiqueta { font-weight: 500; }
.cifra__valor { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.cifra__valor--texto { font-size: var(--t-lg); font-weight: 650; letter-spacing: 0; }
.cifra__sufijo { font-weight: 500; }

.alerta { border-left-width: 4px; border-radius: 0.75rem; }

.insignia { border-color: transparent; padding: 0.1rem 0.6rem; }
.insignia--ok { background: var(--c-ok-suave); color: #0f5c43; }
.insignia--aviso { background: var(--c-aviso-suave); color: #6b4200; }
.insignia--neutra { background: #eef2f5; border-color: var(--c-borde); color: var(--c-texto-suave); }

.tabla-envoltura { border-radius: 0.75rem; box-shadow: var(--sombra); }
thead th { background: #f3f7f9; border-bottom: 2px solid var(--c-borde); color: var(--c-texto-suave); }
tbody tr:hover > th, tbody tr:hover > td { background: #f3f8fb; }
th, td { padding: 0.65rem var(--e4); }
.separado { margin-top: var(--e7); }

/* La acción de guardar al programa se repite en cada fila: va pequeña y discreta */
.boton--programa { min-height: 2rem; padding: 0 var(--e3); font-size: var(--t-xs); font-weight: 600; border-color: var(--c-borde); }
.insumo-form { margin-top: var(--e2); }

/* ---------- Mapa del municipio con panel lateral (v0.2) ---------- */
.mapa-lay { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--e5); }
.mapa-col { min-width: 0; }
.mapa-col .mapa { margin-bottom: var(--e3); }
.mapa-panel { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 0.75rem; box-shadow: var(--sombra); padding: var(--e2) var(--e4) var(--e4); align-self: start; }
.panel-grupo { border-top: 1px solid var(--c-borde); padding: var(--e2) 0; }
.panel-grupo:first-of-type { border-top: 0; }
.panel-grupo > summary { cursor: pointer; font-weight: 650; min-height: 2.5rem; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.panel-grupo > summary::-webkit-details-marker { display: none; }
.panel-grupo > summary::after { content: "＋"; color: var(--c-texto-suave); }
.panel-grupo[open] > summary::after { content: "－"; }
.mapa-panel .capas { border: 0; padding: 0; margin: 0 0 var(--e2); background: transparent; display: grid; gap: 0; }
.mapa-panel .capas legend { padding: 0; }
.mapa-panel .capas--alcance .alcance { display: grid; gap: 0; margin: 0 0 var(--e2); }
.mapa-panel .capa { min-height: 2.5rem; }
.seg-grupo { border: 0; margin: 0 0 var(--e3); padding: 0; }
.seg-grupo legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: var(--e2); color: var(--c-texto-suave); }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio); overflow: hidden; background: #fff; }
.seg label { flex: 1 1 auto; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 var(--e3); font-size: var(--t-sm); font-weight: 600; cursor: pointer; border-right: 1px solid var(--c-borde); border-bottom: 1px solid var(--c-borde); margin: 0 -1px -1px 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:hover { background: var(--c-tinta-suave); }
.seg label:has(input:checked) { background: var(--c-tinta); color: #fff; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--c-acento); outline-offset: -3px; }
.panel-acciones { padding-top: var(--e2); border-top: 1px solid var(--c-borde); }
.mapa--alto { min-height: 34rem; }

@media (min-width: 64rem) {
    .mapa-lay { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
    .mapa-col .mapa--alto { height: 38rem; }
    .mapa-panel { max-height: 46rem; overflow-y: auto; position: sticky; top: 4.5rem; }
}
@media print {
    .mapa-panel { display: none !important; }
    .mapa-lay { display: block; }
}


/* ---------- Ficha territorial v0.2: índice interno y panorama de indicadores clave ---------- */
.ficha-lay { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); }
.ficha-col { min-width: 0; }
.ficha-toc { font-size: var(--t-sm); }
.ficha-toc__titulo { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-texto-suave); margin: 0 0 var(--e2); }
.ficha-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }
.ficha-toc a { display: block; padding: 0.4rem var(--e3); border-radius: 0.5rem; text-decoration: none; color: var(--c-texto-suave); }
.ficha-toc a:hover { background: var(--c-tinta-suave); color: var(--c-tinta); }
.ficha-col h2[id] { scroll-margin-top: 5rem; }
.panorama { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: var(--e3) 0 var(--e5); }
.kpi { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 0.75rem; box-shadow: var(--sombra); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.kpi p { margin: 0; }
.kpi__etiqueta { font-size: var(--t-sm); color: var(--c-texto-suave); }
.kpi__etiqueta a { color: inherit; text-decoration: none; }
.kpi__etiqueta a:hover { color: var(--c-tinta); text-decoration: underline; }
.kpi__valor { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.kpi__valor small { font-size: var(--t-sm); font-weight: 500; color: var(--c-texto-suave); margin-left: 0.25rem; }
.kpi__pie { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.delta, .chip-fuente { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; font-size: var(--t-xs); padding: 0.1rem 0.6rem; }
.delta { font-weight: 650; }
.delta--ok { background: var(--c-ok-suave); color: #0f5c43; }
.delta--aviso { background: var(--c-aviso-suave); color: #6b4200; }
.delta--neutro { background: var(--c-tinta-suave); color: var(--c-tinta); }
.chip-fuente { border: 1px dashed var(--c-borde-fuerte); color: var(--c-texto-suave); background: #fff; }
@media (min-width: 64rem) {
    .ficha-lay { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; }
    .ficha-toc { position: sticky; top: 5rem; }
    .ficha-toc ul { flex-direction: column; }
}

/* ---------- Resumen v0.2: síntesis de hechos ---------- */
.sintesis { background: linear-gradient(90deg, var(--c-acento-suave), #fff 75%); border: 1px solid #efd3b0; border-left: 4px solid var(--c-acento); border-radius: 0.75rem; padding: var(--e4) var(--e5); margin-bottom: var(--e5); }
.sintesis h2 { font-size: var(--t-base); margin-bottom: var(--e2); }
.sintesis ul { margin: 0 0 var(--e2); padding-left: var(--e5); display: grid; gap: var(--e1); }
.sintesis .cifra__nota { margin: 0; }

/* ---------- Programa: coherencia, versiones e informe ---------- */
.lista-limpia { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.diferencias { max-height: 28rem; overflow: auto; border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio); padding: var(--e3); font-size: var(--t-sm); }
.diferencias__linea { margin: 0 0 var(--e1); padding-left: var(--e2); border-left: 3px solid transparent; }
.diferencias__linea--agregada { border-left-color: #1a7f37; background: #e8f5ec; }
.diferencias__linea--quitada { border-left-color: #b42318; background: #fdecea; }
@media print {
    .informe .tarjeta { display: block !important; break-inside: avoid; }
    .contenido__cabecera p { display: block !important; }
}

/* ---------- Formularios largos (problemas, consultas) y campos de texto libre ---------- */
.campo textarea {
    width: 100%; min-height: 5.5rem; padding: var(--e2) var(--e3); resize: vertical;
    border: 1px solid var(--c-borde-fuerte); border-radius: var(--radio);
    background: var(--c-superficie); color: var(--c-texto); font: inherit; line-height: 1.45;
}
.campo textarea:hover { border-color: var(--c-tinta); }
.campo textarea:focus-visible { outline-offset: 0; border-color: var(--c-acento); }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e4); align-items: start; max-width: 60rem; margin-bottom: var(--e4); }
.formulario .campo { margin: 0; min-width: 0; }
.formulario .campo--completo { grid-column: 1 / -1; }
.formulario button { justify-self: start; }
.filtros .campo--ancho { flex: 1 1 22rem; }