/* Variables Base y Temas */
:root {
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Titulos y cifras van en Space Grotesk: mismo par que usan los visores
       electorales "editoriales" (ancha, geometrica, se distingue del cuerpo
       en Inter sin romper la lectura). Cae a Inter si la fuente no carga. */
    --font-heading: 'Space Grotesk', var(--font-family);
    
    /* Variables Light Theme (Por Defecto) */
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --text-muted: #64748b;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --panel-border: rgba(255, 255, 255, 0.5);
    --panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: #cbd5e1;
    --divider-color: #e2e8f0;

    /* Escala de texto y superficies. Todo lo que el JS inyecta usa estos tokens:
       antes iban en hex elegido para el tema oscuro y en claro se perdian. */
    --text-strong: #0f172a;
    --text-soft: #475569;
    --surface-1: #ffffff;
    --surface-2: rgba(15, 23, 42, 0.045);
    --surface-hover: rgba(15, 23, 42, 0.07);
    --accent-violeta: #6d28d9;
    --accent-cian: #0369a1;
    --danger: #dc2626;
    --ok: #047857;
    --ring: rgba(59, 130, 246, 0.35);
}

/* Modo Oscuro */
[data-theme="dark"] {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --panel-bg: rgba(30, 41, 59, 0.85);
    --panel-border: rgba(255, 255, 255, 0.1);
    --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --input-bg: rgba(15, 23, 42, 0.8);
    --input-border: #334155;
    --divider-color: #334155;

    --text-strong: #f1f5f9;
    --text-soft: #cbd5e1;
    --surface-1: rgba(30, 41, 59, 0.9);
    --surface-2: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --accent-violeta: #a78bfa;
    --accent-cian: #38bdf8;
    --danger: #f87171;
    --ok: #34d399;
    --ring: rgba(96, 165, 250, 0.45);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tipografía */
h1, h2, h3 { font-family: var(--font-heading); }
h1 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
     background: linear-gradient(90deg, #1d4ed8, #6d28d9);
     -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] h1 { background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; }
h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 700; }
.badge { background: linear-gradient(90deg, #3b82f6, #8b5cf6); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-left: 8px;}

/* Layout */
.top-nav {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 2000;
    border-radius: 0;
    border-bottom: 1px solid var(--panel-border);
}

/* ---------------------------------------------------------------------------
   Procedencia del dato bajo el mapa.
   --------------------------------------------------------------------------- */
.barra-procedencia {
    /* Al pie de la barra izquierda, no flotando sobre el mapa: ahi el panel de
       metricas la tapaba y el texto se cortaba a media frase. margin-top:auto la
       empuja al fondo aunque los controles de arriba cambien de alto. */
    margin-top: auto;
    padding: 9px 11px;
    border-top: 1px solid var(--divider-color);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.barra-procedencia:empty { display: none; }
.barra-procedencia .aster { color: var(--accent-cian); font-weight: 800; }
.barra-procedencia .recorte { color: var(--text-strong); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Funciones fuera del plan.
   Se muestran, no se esconden: para una cuenta de demostracion, saber que existe
   algo mas es justamente el punto. Pero el control queda inerte y se dice por que,
   en vez de dejar un boton que falla sin explicacion.
   --------------------------------------------------------------------------- */
.fuera-de-plan {
    position: relative;
    opacity: 0.55;
    filter: grayscale(0.7);
    pointer-events: none;
    user-select: none;
}
.aviso-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px dashed var(--divider-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.aviso-plan strong { color: var(--text-strong); font-weight: 700; }
.aviso-plan .candado { font-size: 1rem; flex: 0 0 auto; }

#plan-badge[data-plan="demo"] {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--divider-color);
}

/* ---------------------------------------------------------------------------
   Bloque de marca (logo + nombre).
   Se dimensiona con el logo ausente y con el logo presente: mientras no exista el
   archivo, marca.js retira la imagen y queda solo el texto, que debe verse
   intencional y no como un hueco esperando algo.
   --------------------------------------------------------------------------- */
.marca-lockup {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.marca-logo {
    display: block;
    width: auto;
    flex: 0 0 auto;
    /* Sin esto, un logo alto empuja la barra entera mientras carga. */
    max-height: 44px;
    object-fit: contain;
}
.marca-textos {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.marca-producto {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.marca-empresa {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.72;
    white-space: nowrap;
}
/* Sin logo, el nombre carga solo la identidad y merece algo mas de peso. */
.marca-sin-logo .marca-producto { font-size: 1.22rem; }

@media (max-width: 720px) {
    .marca-producto { font-size: 1rem; }
    .marca-empresa { font-size: 0.62rem; letter-spacing: 0.06em; }
    .marca-logo { max-height: 34px; }
}

.nav-brand { display: flex; align-items: center; }
.nav-controls { display: flex; gap: 10px; }

.main-layout {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.sidebar-left {
    width: 320px;
    height: 100%;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    border-radius: 0;
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.map-container {
    flex: 1;
    position: relative;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   Basemap "silenciado".
   Los tiles de CARTO traen calles, POIs y nombres a full saturacion, compitiendo
   con el color del coropletico que es el dato real. Bajarle saturacion y subirle
   brillo al tile (no al mapa entero: el pane de Leaflet aisla justo la capa base)
   deja el fondo como referencia geografica discreta y el relleno por partido es
   lo unico que salta a la vista. Se probo separar rotulos del basemap con las
   variantes "_nolabels"/"_only_labels" de CARTO, pero esas vienen bloqueadas con
   marca de agua salvo cuenta de pago propia — este filtro no depende de nada externo.
--------------------------------------------------------------------------- */
#map .leaflet-tile-pane {
    filter: saturate(0.55) contrast(0.94) brightness(1.06);
}
[data-theme="dark"] #map .leaflet-tile-pane {
    filter: saturate(0.6) contrast(1.05) brightness(0.92);
}

.sidebar-right {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 350px;
    max-height: calc(100% - 40px);
    z-index: 1500;
    padding: 20px;
    border-radius: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.sidebar-hidden { transform: translateX(120%); }

/* Componentes Glassmorphism */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
}

.inner-panel {
    border-radius: 12px;
    padding: 15px;
    margin-top: auto;
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .inner-panel { background: rgba(0, 0, 0, 0.2); }

/* Controles de Formulario */
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;}

.styled-select, .styled-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.styled-select:focus, .styled-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.highlight-select { border-color: #10b981; }

/* Radio Buttons estilo Chips */
.radio-group { display: flex; gap: 10px; }
.radio-btn { flex: 1; cursor: pointer; }
.radio-btn input { display: none; }
.radio-btn span {
    display: block;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}
.radio-btn input:checked + span {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}
/* Modo de vista no disponible para el ambito de la contienda seleccionada
   (ej. vista nacional en una eleccion de Ayuntamiento). */
.solo-impresion { display: none; }
.radio-btn.disabled { pointer-events: none; }
.radio-btn.disabled span { opacity: 0.4; }

.divider { border: none; height: 1px; background-color: var(--divider-color); }
.hidden { display: none !important; }
.help-text { font-size: 0.75rem; color: var(--text-muted); }

/* Botones */
.btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-icon {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}
.btn-icon:hover { background: var(--panel-border); }

.dashboard-header { display: flex; justify-content: space-between; align-items: center; }

/* Tarjetas de Métricas */
.metric-card {
    background: rgba(0,0,0,0.03);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
}
[data-theme="dark"] .metric-card { background: rgba(0,0,0,0.2); }
.highlight-card { border-left: 4px solid var(--accent-color); }

.metric-title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 5px; }
.metric-subtitle { font-size: 1.1rem; font-weight: 600; }
.metric-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--accent-color); }

.chart-container-large { height: 250px; width: 100%; margin-top: 10px;}

/* Password Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    border-radius: 16px;
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes modalPop {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* Overlay de Carga */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: white;
}
.loader-spinner {
    width: 50px; height: 50px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Leaflet popups */
.leaflet-popup-content-wrapper {
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--panel-border);
    color: var(--text-color);
    border-radius: 12px;
}
.leaflet-popup-tip { background: var(--panel-bg); }
.chart-container { width: 250px; height: 180px; }

/* Dashboard Insights */
.insights-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--divider-color);
}

.insight-widget {
    background: rgba(0,0,0,0.03);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
}
[data-theme="dark"] .insight-widget { background: rgba(0,0,0,0.2); }

.insight-widget h4 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Termómetro */
.thermometer-track {
    width: 100%;
    height: 12px;
    background: var(--input-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 5px;
}
.thermometer-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.5s ease;
}
.thermometer-val { font-weight: bold; font-size: 1.1rem; }
.bg-red { background-color: #ef4444; }
.bg-green { background-color: #10b981; }
.bg-neutral { background-color: #3b82f6; }
.text-red { color: #ef4444; }
.text-green { color: #10b981; }

/* Margen */
.margin-text {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Barras de Fuerza */
.force-bar-container { margin-bottom: 6px; }
.force-bar-label { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: bold; margin-bottom: 2px;}
.force-bar-track {
    width: 100%; height: 6px;
    background: var(--input-border);
    border-radius: 3px;
    overflow: hidden;
}
.force-bar-fill { height: 100%; border-radius: 3px; }

/* Alerta Nulos */
.null-alert {
    background: rgba(239, 68, 68, 0.15);
    border-left: 4px solid #ef4444;
    color: #ef4444;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Etiquetas Dinámicas on Hover */
.leaflet-tooltip.hover-tooltip {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    font-weight: 700;
    font-size: 0.9rem;
    color: #f8fafc !important;
    padding: 6px 12px !important;
    pointer-events: none;
    backdrop-filter: blur(4px);
    text-align: center;
}

/* Remover la flecha (triángulo) por defecto de Leaflet */
.leaflet-tooltip.hover-tooltip::before,
.leaflet-tooltip.hover-tooltip::after {
    display: none !important;
}

/* Remover el outline (cuadro de enfoque del navegador) al hacer clic en un polígono */
.leaflet-interactive:focus {
    outline: none !important;
}

[data-theme="light"] .leaflet-tooltip.hover-tooltip {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

.loader { border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid #3b82f6; width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Graficas ampliables
   El panel lateral mide 350px: ahi la grafica solo alcanza para ver la forma.
   El detalle (votos, % del total, como se agrupan las coaliciones y por cuanto
   gana la primera fuerza) necesita pantalla completa.
--------------------------------------------------------------------------- */
.chart-card { cursor: zoom-in; transition: border-color 0.2s ease; }
.chart-card:hover { border-color: var(--accent-color); }

.chart-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.btn-expand {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: zoom-in;
    white-space: nowrap;
}
.btn-expand:hover { color: var(--accent-color); border-color: var(--accent-color); }

.chart-modal-content {
    width: 94vw;
    max-width: 1180px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px 26px;
    cursor: default;
}
.chart-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 15px; margin-bottom: 18px;
}
.chart-modal-canvas { height: min(44vh, 400px); width: 100%; }

.grafica-nota {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 14px 0 0;
    line-height: 1.5;
}

.margen-callout {
    margin-top: 18px;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.margen-item {
    flex: 1 1 240px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent-color);
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(127, 127, 127, 0.06);
}
.margen-item .margen-cifra { font-size: 1.5rem; font-weight: 800; }
.margen-item .margen-texto { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.coaliciones-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}
.coalicion-card {
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 14px;
    background: rgba(127, 127, 127, 0.06);
}
.coalicion-card .coalicion-total { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.coalicion-card .coalicion-pct { font-size: 0.82rem; color: var(--text-muted); }
.chips-partidos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.chip-partido {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    padding: 3px 9px; border-radius: 999px;
}
.chip-partido small { font-weight: 600; opacity: 0.9; }
.coalicion-desglose { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; }

/* Mapa en pantalla completa */
.map-fs-btn {
    position: absolute; top: 12px; left: 12px; z-index: 1200;
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--panel-border);
    color: var(--text-color);
    font-size: 0.78rem; font-weight: 600;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    box-shadow: var(--panel-shadow);
}
.map-fs-btn:hover { color: var(--accent-color); border-color: var(--accent-color); }

body.map-fullscreen .top-nav,
body.map-fullscreen .sidebar-left { display: none; }
body.map-fullscreen .sidebar-right { top: 12px; right: 12px; }

/* ---------------------------------------------------------------------------
   Acabado
--------------------------------------------------------------------------- */

/* Las cifras bailaban al actualizarse porque cada digito tiene otro ancho */
.metric-value, .margen-cifra, .coalicion-total, .chip-partido small,
.coalicion-desglose strong, #quick-insight-text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.metric-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.72rem;
}

.metric-card {
    background: var(--surface-1);
    border: 1px solid var(--divider-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
[data-theme="dark"] .metric-card { box-shadow: none; }

.chart-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10); transform: translateY(-1px); }
[data-theme="dark"] .chart-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }

/* Botones de panel: dos, independientes, con estado visible */
.btn-panel {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2);
    border: 1px solid var(--divider-color);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.82rem; font-weight: 600;
    padding: 7px 13px; border-radius: 8px; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-panel:hover { background: var(--surface-hover); color: var(--text-strong); }
.btn-panel.activo {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.btn-panel.activo:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* El panel izquierdo se colapsa sin sacudir el layout */
.sidebar-left {
    overflow-x: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
}
.sidebar-left.sidebar-oculta {
    width: 0; padding-left: 0; padding-right: 0;
    opacity: 0; border-right-color: transparent;
}

/* Foco visible: se navega con teclado en presentaciones */
:where(button, select, input, [tabindex]):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Barras de desplazamiento discretas en vez de las del sistema */
.sidebar-left, .sidebar-right, .chart-modal-content, #dash-history-table {
    scrollbar-width: thin;
    scrollbar-color: var(--divider-color) transparent;
}
.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar,
.chart-modal-content::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb,
.chart-modal-content::-webkit-scrollbar-thumb {
    background: var(--divider-color); border-radius: 99px;
}
.sidebar-left::-webkit-scrollbar-track,
.sidebar-right::-webkit-scrollbar-track,
.chart-modal-content::-webkit-scrollbar-track { background: transparent; }

/* La pastilla de estado de la barra superior */
#quick-insight {
    background: var(--surface-2) !important;
    border-color: var(--divider-color) !important;
    color: var(--text-soft) !important;
    box-shadow: none !important;
}
#quick-insight-text { color: var(--text-strong); }

/* El cambio de tema ya no salta */
body, .glass-panel, .metric-card, .btn-panel, .styled-select, .styled-input {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Tarjeta de primera fuerza
--------------------------------------------------------------------------- */
.ganador-card {
    border-left: 4px solid var(--color-ganador, var(--accent-color));
    padding-top: 14px;
}
.ganador-etiqueta {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
}
.ganador-nombre {
    font-family: var(--font-heading);
    font-size: 1.15rem; font-weight: 700; line-height: 1.15;
    color: var(--color-ganador, var(--text-strong));
    margin: 2px 0 8px; letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.ganador-cifras { display: flex; align-items: baseline; gap: 12px; }
.ganador-cuota {
    font-family: var(--font-heading);
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.ganador-cuota span { font-size: 1.1rem; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.ganador-votos {
    font-size: 0.82rem; color: var(--text-soft); line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.ganador-votos span { color: var(--text-muted); font-size: 0.76rem; }

/* Barra ganador vs segundo: el margen de un vistazo */
.ganador-barra {
    display: flex; gap: 3px; margin-top: 12px;
    height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--surface-2);
}
.ganador-barra span { display: block; height: 100%; border-radius: 99px; min-width: 2px; transition: width 0.4s ease; }
.ganador-rival {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 0.74rem; color: var(--text-muted); margin-top: 6px;
}
.ganador-rival strong { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ganador-rival span { opacity: 0.6; }

/* ---------------------------------------------------------------------------
   Leyenda del mapa
--------------------------------------------------------------------------- */
.map-legend {
    position: absolute; bottom: 96px; left: 12px; z-index: 1100;
    width: 208px; max-height: 46vh; display: flex; flex-direction: column;
    background: var(--panel-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    border-radius: 12px; overflow: hidden;
    font-size: 0.78rem;
}
.leyenda-cabeza {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid var(--divider-color);
    color: var(--text-muted); font-weight: 700; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.leyenda-cabeza button {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    font-size: 1rem; line-height: 1; padding: 0 4px;
}
.leyenda-cuerpo { overflow-y: auto; padding: 6px; }
.map-legend.contraida .leyenda-cuerpo { display: none; }

.leyenda-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; cursor: pointer;
    padding: 5px 6px; border-radius: 7px;
    font-family: inherit; font-size: 0.78rem; color: var(--text-soft);
    text-align: left;
}
.leyenda-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.leyenda-item.resaltado { background: var(--surface-hover); color: var(--text-strong); font-weight: 700; }
.leyenda-color { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.leyenda-nombre { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda-conteo { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.leyenda-item.resaltado .leyenda-conteo { color: var(--text-strong); }

.leyenda-nota {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 6px 2px; margin-top: 4px;
    border-top: 1px solid var(--divider-color);
    color: var(--text-muted); font-size: 0.68rem; line-height: 1.3;
}
.leyenda-rampa {
    width: 34px; height: 8px; border-radius: 3px; flex: 0 0 auto;
    background: linear-gradient(90deg, rgba(100,116,139,0.30), rgba(100,116,139,1));
}
body.map-fullscreen .map-legend { bottom: 96px; }

/* ---------------------------------------------------------------------------
   Esqueletos de carga
--------------------------------------------------------------------------- */
.esqueleto-card { pointer-events: none; }
.esqueleto {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: esqueletoBrillo 1.4s ease-in-out infinite;
    border-radius: 6px;
}
.esqueleto.linea { height: 12px; margin-bottom: 10px; }
.esqueleto.linea.corta { width: 45%; height: 9px; }
.esqueleto.linea.titulo { height: 26px; width: 70%; }
.esqueleto.linea:last-child { margin-bottom: 0; width: 85%; }
@keyframes esqueletoBrillo {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------------------
   Botón de Análisis IA
   Era un degradado a todo lo ancho con tipografía de 1.1rem que aparecía y
   desaparecía, empujando el panel. Ahora vive fijo al pie, apagado hasta que
   hay un territorio elegido.
--------------------------------------------------------------------------- */
.btn-ia {
    display: flex; align-items: center; gap: 11px; width: 100%;
    margin-top: auto; padding: 11px 13px;
    font-family: inherit; text-align: left; cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--divider-color);
    background: var(--surface-2);
    color: var(--text-soft);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-ia-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.btn-ia-texto strong { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.btn-ia-texto small {
    font-size: 0.72rem; color: var(--text-muted); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn-ia:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.28);
}
.btn-ia:not(:disabled) .btn-ia-texto small { color: rgba(255, 255, 255, 0.78); }
.btn-ia:not(:disabled):hover {
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.40);
    transform: translateY(-1px);
}
.btn-ia:disabled { cursor: default; }

/* Selector de ámbito sin alternativas: se ve como dato, no como control roto */
.styled-select.sin-opciones {
    opacity: 0.75; cursor: default;
    background-image: none;
}

/* ---------------------------------------------------------------------------
   Controles en pareja
   Dos campos que responden a la misma pregunta van en el mismo renglón. Ahorra
   cuatro renglones de scroll y agrupa lo que conceptualmente va junto.
--------------------------------------------------------------------------- */
.grupo-titulo {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    padding-bottom: 6px; margin-bottom: 2px;
    border-bottom: 1px solid var(--divider-color);
}

.campos-fila { display: flex; gap: 10px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
/* El año son cuatro dígitos: no necesita media columna */
.campo-angosto { flex: 0 0 88px; }
.campo .styled-select { width: 100%; }
.campo label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* En pareja el select es más angosto: se aprieta el relleno para que quepa
   "Distrito federal" sin cortarse */
.campos-fila .styled-select { padding-left: 10px; padding-right: 8px; font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   Matriz de Escenarios por Sección (Solos vs Coalición vs Simulado)
--------------------------------------------------------------------------- */
.scorecard-card {
    background: var(--surface-1);
    border: 1px solid var(--divider-color);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.scorecard-card.destacado {
    border-color: var(--accent-cian);
    background: var(--surface-2);
}
.scorecard-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
}
.scorecard-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.scorecard-badge {
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.matriz-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--text-strong);
}
.matriz-tabla th {
    position: sticky;
    top: 0;
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: center;
    border-bottom: 2px solid var(--divider-color);
    z-index: 2;
}
.matriz-tabla td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--divider-color);
    vertical-align: middle;
    color: var(--text-strong);
}
.matriz-tabla tr:hover td {
    background: var(--surface-hover);
}
.badge-ganador-secc {
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    color: #ffffff;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ---------------------------------------------------------------------------
   Selector interactivo de partidos con palomita para el visor ampliado
--------------------------------------------------------------------------- */
.chart-modal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--divider-color);
    border-radius: 8px;
    margin-bottom: 14px;
}

.filtro-partido-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 14px;
    border: 1px solid var(--divider-color);
    background: var(--surface-1);
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.filtro-partido-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-strong);
}

.filtro-partido-btn.activo {
    background: var(--surface-hover);
    color: var(--text-strong);
    border-color: var(--accent-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filtro-check {
    font-weight: 900;
    font-size: 0.8rem;
    line-height: 1;
}

.filtro-partido-btn.activo .filtro-check {
    color: var(--ok);
}

.filtro-partido-btn:not(.activo) {
    opacity: 0.55;
    background: var(--surface-2);
    border-style: dashed;
}

.filtro-partido-btn:not(.activo) .filtro-check {
    color: var(--text-muted);
}

.filtro-color-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.filtro-accion-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--divider-color);
    background: var(--surface-1);
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filtro-accion-btn:hover {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
}

/* ---------------------------------------------------------------------------
   ESTILOS DE IMPRESIÓN Y EXPORTACIÓN A PDF LIMPIO (SIN CORTES NI SALTOS FEOS)
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Cuarto de Guerra expandido.
   La matriz de escenarios y las tarjetas se aprietan en 800px: con el municipio
   completo hay que hacer scroll dentro de un contenedor que ya va dentro de otro
   scroll. Expandido, el mismo contenido se lee de corrido.
   Se declara ANTES del bloque @media print a proposito, y ahi dentro se anula:
   el papel siempre manda su propio ancho, sin importar como quedo la pantalla.
   --------------------------------------------------------------------------- */
#ai-modal.war-room-expandido .modal-content {
    /* !important obligado: el modal trae max-width y width como estilo EN LINEA en el
       HTML, y un estilo en linea gana a cualquier regla externa por especificidad que
       tenga. Sin esto el boton no hacia absolutamente nada. */
    width: 96vw !important;
    max-width: none !important;
    max-height: 94vh !important;
    border-radius: 12px;
}

/* La tabla de la matriz trae max-height en linea (380px), pensada para el modal
   angosto. Expandida se le da el alto que el espacio ya permite. */
#ai-modal.war-room-expandido #ai-matriz-tabla-wrapper {
    /* Mismo motivo: el wrapper trae max-height:380px en linea. */
    max-height: 60vh !important;
}

/* Con mas ancho caben mas tarjetas por fila sin estirarlas. */
#ai-modal.war-room-expandido #ai-matriz-scorecards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#ai-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
}
#ai-expand-btn[aria-pressed="true"] {
    background: var(--surface-hover);
    border-color: var(--accent-cian);
}

/* En pantallas chicas el modal ya ocupa casi todo: el boton no aporta y estorba. */
@media (max-width: 820px) {
    #ai-expand-btn { display: none; }
}

@media print {
    @page {
        size: letter portrait;
        margin: 1.2cm 1.5cm;
    }

    html, body {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        display: block !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        font-size: 10pt !important;
    }

    /* Ocultar elementos de UI no ejecutivos */
    nav.top-nav,
    aside.sidebar-left,
    aside.sidebar-right,
    #map,
    #loading-overlay,
    #welcome-modal,
    .leaflet-control-container,
    #controls-panel,
    #close-ai-modal,
    #ai-print-btn,
    #ai-run-btn,
    #ai-tipo-analisis,
    #ai-foco-group,
    #ai-rival-group,
    #ai-preguntas-container,
    .btn-icon,
    .btn-panel,
    .map-fs-btn,
    .map-legend,
    #dashboard-sidebar,
    .dashboard-header {
        display: none !important;
    }

    .main-layout {
        display: block !important;
        overflow: visible !important;
        position: static !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Solo el War Room es el documento. La regla aplicaba a .modal-overlay, que
       alcanza a los cuatro modales del visor: el de contrasena (oculto con estilo
       en linea) y el de graficas (oculto con .hidden) reaparecian impresos, porque
       un !important externo gana tanto al inline como a una clase de la misma
       especificidad declarada antes. */
    .modal-overlay:not(#ai-modal) { display: none !important; }

    #ai-modal {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    /* El estado de la pantalla no debe filtrarse al papel: si se imprime con el
       modal expandido, el ancho lo sigue mandando la hoja. */
    #ai-modal.war-room-expandido .modal-content,
    #ai-modal.war-room-expandido #ai-matriz-tabla-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .modal-content, #ai-modal .modal-content {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #ai-context-bar {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        padding: 12px 14px !important;
        border-radius: 6px !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #ai-semaforo-container {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        padding: 16px !important;
        border-radius: 6px !important;
        margin-bottom: 16px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #ai-focos-container, #ai-matriz-container {
        display: block !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Evitar que tarjetas y filas se corten a mitad de hoja */
    .scorecard-card, #ai-matriz-scorecards, table, thead, tbody, tr, figure {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #ai-matriz-tabla-wrapper {
        max-height: none !important;
        overflow: visible !important;
        border: 1px solid #cbd5e1 !important;
        height: auto !important;
    }

    .matriz-tabla {
        width: 100% !important;
        font-size: 8.5pt !important;
        border-collapse: collapse !important;
    }

    .matriz-tabla th {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid #94a3b8 !important;
        font-weight: 700 !important;
        padding: 6px 8px !important;
    }

    .matriz-tabla td {
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        padding: 5px 6px !important;
    }

    .badge-ganador-secc, .scorecard-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
    }

    /* ---------------------------------------------------------------------
       Tokens de tema para papel.
       El bloque no redefinia ninguna variable, asi que en tema oscuro
       --text-strong es #f1f5f9 y todo lo que lo usa en linea salia casi blanco
       sobre papel blanco. Redefinirlos aqui cubre de una vez las tarjetas que
       se fueron agregando despues de escribir esta hoja, sin tener que
       enumerarlas una por una cada vez que aparece una nueva.
       --------------------------------------------------------------------- */
    :root {
        --text-color: #0f172a !important;
        --text-strong: #0f172a !important;
        --text-soft: #334155 !important;
        --text-muted: #475569 !important;
        --divider-color: #cbd5e1 !important;
        --surface-1: #ffffff !important;
        --surface-2: #f8fafc !important;
        --surface-hover: #f1f5f9 !important;
        --accent-color: #1d4ed8 !important;
        --accent-cian: #0369a1 !important;
        --accent-violeta: #5b21b6 !important;
    }

    /* Etiqueta huerfana: se ocultaba el <select> pero no su <label> hermano, asi
       que "Enfoque del analisis" salia impreso solo, sin nada debajo. */
    label[for="ai-tipo-analisis"] {
        display: none !important;
    }

    /* Encabezado de identificacion. En pantalla no se ve; en papel es lo unico
       que dice de que territorio y de que fecha es el documento. */
    .solo-impresion {
        display: block !important;
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 10px !important;
        margin-bottom: 16px !important;
    }

    /* Tarjetas agregadas despues de esta hoja: mismo tratamiento que las viejas. */
    #ai-movimientos-container,
    #ai-totales-container,
    #ai-simulador-veredicto {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        border-radius: 6px !important;
        padding: 12px 14px !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Los controles del simulador son mandos, no resultado: en un documento
       impreso quedaban a medias, porque .btn-panel ya ocultaba sus botones. Se
       conserva la composicion de la alianza y el veredicto, que si son datos. */
    #ai-partidos-pool,
    #ai-pool-status,
    #ai-btn-add-alianza,
    #ai-inactivos-wrapper,
    #ai-alianzas-grid button,
    #ai-focos-cargar {
        display: none !important;
    }

    #ai-calculador-alianzas {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* La grafica de barras se imprimia VACIA: las barras llevan el color de la
       fuerza como background en linea y la cifra de votos en blanco encima, y los
       navegadores no imprimen fondos salvo que se les pida. Salia el recuadro en
       blanco y los numeros invisibles. */
    #ai-totales-container,
    #ai-totales-container *,
    #ai-barras-grafico,
    #ai-barras-grafico * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* El scroll horizontal del grafico recorta las barras que no caben en la hoja. */
    #ai-barras-grafico {
        overflow: visible !important;
    }
}


/* ---------------------------------------------------------------------------
   Tabla de secciones ganadas
--------------------------------------------------------------------------- */
.btn-secciones {
    display: flex; align-items: center; gap: 11px; width: 100%;
    margin-top: 15px; padding: 11px 13px;
    font-family: inherit; text-align: left; cursor: zoom-in;
    border-radius: 10px;
    border: 1px solid var(--divider-color);
    background: var(--surface-2); color: var(--text-soft);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-secciones:hover { border-color: var(--accent-color); background: var(--surface-hover); }
.btn-secciones span[aria-hidden] { font-size: 1.1rem; color: var(--accent-color); }
.btn-secciones strong { display: block; font-size: 0.9rem; color: var(--text-strong); }
.btn-secciones small { font-size: 0.72rem; color: var(--text-muted); }

.marcador-fila {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px; margin: 14px 0 18px;
}
.marcador-col {
    border: 1px solid var(--divider-color); border-radius: 10px;
    padding: 12px; background: var(--surface-2);
}
.marcador-titulo {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px;
}
.marcador-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.marcador-chip {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; font-size: 0.72rem; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
}
.marcador-chip strong { font-family: var(--font-heading); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.marcador-pie { font-size: 0.7rem; color: var(--text-muted); margin-top: 9px; }

.escenario-control { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.escenario-control label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
}
.escenario-control .styled-input { flex: 1 1 220px; width: auto; padding: 8px 11px; font-size: 0.88rem; }

.tabla-secciones-envoltura {
    max-height: 46vh; overflow: auto;
    border: 1px solid var(--divider-color); border-radius: 10px;
}
.tabla-secciones { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tabla-secciones th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-1); color: var(--text-muted);
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--divider-color);
}
.tabla-secciones td { padding: 5px 8px; border-bottom: 1px solid var(--divider-color); }
.celda-seccion {
    font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--surface-2); color: var(--text-soft); text-align: center;
    width: 62px;
}
.celda-fuerza { color: #fff; font-weight: 600; white-space: nowrap; }
.celda-vacia { color: var(--text-muted); text-align: center; }

/* ---------------------------------------------------------------------------
   Panel de IA: jerarquía tipográfica en vez de emoji
   El área acumulaba una veintena de iconos decorativos compitiendo entre sí.
   Los encabezados se distinguen ahora por peso, tamaño y una regla de color.
--------------------------------------------------------------------------- */
#ai-modal h2 { letter-spacing: -0.02em; font-weight: 800; }
#ai-modal h3 {
    font-size: 0.82rem !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Regla de color a la izquierda: marca la sección sin ocupar una línea */
#ai-focos-container > div:first-child,
#ai-matriz-container > div:first-child {
    border-left: 3px solid currentColor;
    padding-left: 10px;
}
#ai-focos-container > div:first-child { color: var(--danger); }
#ai-matriz-container > div:first-child { color: var(--accent-cian); }

.scorecard-title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem !important;
    font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Cabildo Municipal: Lazy Loading y Detalle Nominal
--------------------------------------------------------------------------- */
.cabildo-resumen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.cabildo-resumen-text {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    flex: 1 1 auto;
}

.btn-cabildo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #60a5fa;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-cabildo-toggle:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #93c5fd;
    transform: translateY(-1px);
}

.btn-cabildo-ico {
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.cabildo-detalle-box {
    margin-top: 10px;
    background: var(--surface-2, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--divider-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

.cabildo-detalle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--divider-color, rgba(255, 255, 255, 0.08));
}

.cabildo-header-titulo {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-violeta, #a78bfa);
}

.cabildo-header-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.cabildo-lista-scroll {
    max-height: 260px;
    overflow-y: auto;
}

.cabildo-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.cabildo-tabla th {
    position: sticky;
    top: 0;
    background: var(--surface-1, #1e293b);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--divider-color, rgba(255, 255, 255, 0.08));
    text-align: left;
    z-index: 1;
}

.cabildo-tabla td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: top;
}

.cabildo-tabla tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.cabildo-td-cargo {
    white-space: nowrap;
    width: 28%;
}

.cabildo-cargo-nombre {
    font-weight: 700;
    color: var(--text-strong, #f8fafc);
    font-size: 0.72rem;
}

.badge-principio {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
}

.badge-principio.mr {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.badge-principio.rp {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.cabildo-td-persona {
    width: 48%;
}

.cabildo-propietario-txt {
    font-weight: 600;
    color: var(--text-strong, #fff);
    line-height: 1.25;
}

.cabildo-suplente-txt {
    font-size: 0.66rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.cabildo-td-partido {
    width: 24%;
    text-align: right;
    white-space: nowrap;
}

.cabildo-partido-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-1, rgba(255, 255, 255, 0.06));
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    color: var(--text-soft);
}

/* ---------------------------------------------------------------------------
   Modal Cabildo: Layout compacto con mini gráfica a la derecha
--------------------------------------------------------------------------- */
.cabildo-modal-top-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--divider-color, rgba(255, 255, 255, 0.06));
    border-radius: 10px;
    padding: 12px 14px;
}

@media (max-width: 768px) {
    .cabildo-modal-top-grid {
        grid-template-columns: 1fr;
    }
}

.cabildo-modal-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cabildo-kpis-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cabildo-kpi-badge {
    background: var(--surface-1, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--divider-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cabildo-kpi-lbl {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.cabildo-kpi-val {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.cabildo-mini-chart-card {
    background: var(--surface-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--divider-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 170px;
}

.cabildo-mini-chart-head {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-align: center;
}