:root {
    --primary: #1D336B;
    --primary-hover: #1E3B7D;
    --primary-light: #e8edf5;
    --primary-text: #ffffff;
    --secondary: #424242;
    --bg-panel: rgba(255, 255, 255, 0.98);
    --border: rgba(0,0,0,0.09);
    --divider: rgba(0,0,0,0.06);
    --surface-off: #f1f5f9;
    --magenta: #E4007B;
    --cyan: #0d6d8a;

    /* Identidad institucional */
    --color-brand-magenta: #ED008C;
    --color-brand-magenta-hover: #C40073;

    /* Acciones destructivas (Limpiar / Borrar) */
    --color-action-danger: #D32F2F;
    --color-action-danger-hover: #B71C1C;
    --color-action-danger-text: #FFFFFF;
    
    --radius-sm: 6px; 
    --radius-md: 8px;
    --radius-lg: 14px;
    --transition: 160ms cubic-bezier(0.16,1,0.3,1);
    --font: 'Inter', sans-serif;
    --weight-normal: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-muted:  #4b5563;
    --text-faint:  #374151;
}

[data-theme="dark"] {
  --bg:          #0f1117;
  --surface:     #1a1d24;
  --surface-2:   #20242e;
  --surface-off: #252931;
  /* --bg-panel nunca se redefinía acá — quedaba fijo en blanco (su valor de :root) sin
     importar el tema, así que cualquier caja que lo usara directamente (ej. #measure-panel,
     que no tiene su propio override [data-theme="dark"]) se veía blanca en modo oscuro. */
  --bg-panel:    #1a1d24;
  --border:      rgba(255,255,255,0.08);
  --divider:     rgba(255,255,255,0.05);
  --text:        #e5e7eb;
  --text-muted:  #9ca3af;
  --text-faint:  #6b7280;

  --primary:       #3ab0d4;
  --primary-hover: #56bfde;
  --primary-light: #0c2d38;
  --primary-text:  #ffffff;
  --secondary:     #c9d1d9;

  --green:       #4ade80;
  --green-hover: #22c55e;
  --green-light: #052e16;

  --magenta:     #E4007B;
  --cyan:        #00B6E6;

  /* Identidad institucional — ajuste para fondos oscuros (contraste WCAG AA) */
  --color-brand-magenta: #FF40A3;
  --color-brand-magenta-hover: #ED008C;

  /* Acciones destructivas */
  --color-action-danger: #EF5350;
  --color-action-danger-hover: #D32F2F;
  --color-action-danger-text: #121212;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

html {
    font-size: 13px;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font);
    background: #f5f5f5;
}

#app-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

input,
select,
button,
textarea {
    font-family: var(--font);
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

/* --- CABEZAL INSTITUCIONAL --- */
#main-header {
    position: relative;
    flex-shrink: 0;
    height: 46px;
    background: var(--primary);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Contenedor principal del cuerpo: ocupa todo el espacio restante bajo el cabezal */
.main-layout {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.header-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

#dynamic-location-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

#dynamic-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#dynamic-location {
    font-size: 11px;
    font-weight: 400;
    color: #ddd;
    margin-top: 1px;
}

/* --- LEFT SIDEBAR (Controls) --- */
#left-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border-radius: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Envuelve solo el contenido con scroll (Navegador Territorial + Variable a representar) — NO
   #map-tools, que es hijo de #left-panel pero se posiciona con position:absolute FUERA de sus
   290px a propósito (flota sobre el mapa). Ponerle overflow a #left-panel directamente atrapaba
   esa barra de herramientas dentro del área con scroll. #map-tools no participa del layout flex
   (al ser absolute), así que envolver a sus hermanos acá no lo afecta. */
#left-panel-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#left-panel.collapsed {
    transform: translateX(-100%);
}

.panel-header {
    padding: 6px 12px;
    background: var(--primary);
    color: var(--primary-text);
    border-radius: 0;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}

.panel-header .material-icons {
    font-size: 18px;
}

.panel-content {
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

/* Iconos dentro de paneles: máximo 16px */
#left-panel .material-icons,
#right-panel .material-icons {
    font-size: 16px;
}
/* Los panel-header mantienen 18px */
.panel-header .material-icons {
    font-size: 18px;
}

.control-group {
    margin-bottom: 10px;
}

.control-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: block;
}

.control-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.control-label-row .control-label { margin-bottom: 0; }

/* Agrupa el label con el chip de conteo (selection-count-chip) para que el par se comporte como
   un solo bloque dentro del space-between de .control-label-row, sin correr el botón Limpiar. */
.control-label-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Retroalimentación visual de selección múltiple en Región/Comuna (2+ checkboxes marcados) --
   mismo lenguaje visual que .level-lock-chip ("Fijado por tu búsqueda"): pastilla, fondo
   var(--surface-off), texto chico y muted. Sin botón de cerrar -- es solo informativo, el botón
   Limpiar de al lado ya cumple ese rol. */
.selection-count-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--surface-off);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #777);
    white-space: nowrap;
}

.section-clear-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--color-action-danger);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.section-clear-btn:hover {
    background: rgba(211, 47, 47, 0.08);
    color: var(--color-action-danger-hover);
}
.section-clear-btn .material-icons { font-size: 12px; }

select,
input[type="range"] {
    width: 100%;
    padding: 6px 10px;
    background: var(--surface-off);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    font-size: 12px;
    color: #111827;
    transition: var(--transition);
}

.checkbox-list {
    width: 100%;
    max-height: 92px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-off);
    display: flex;
    flex-direction: column;
}

.checkbox-list--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.comuna-search-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-off);
    padding: 5px 10px;
    margin-bottom: 4px;
}

.comuna-search-wrapper .material-icons {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

.comuna-search-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 11px;
    color: #111827;
    width: 100%;
    padding: 0;
}

.search-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.search-clear-btn:hover {
    color: var(--primary);
}

.checkbox-list:empty::after {
    content: '—';
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: #94a3b8;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: #111827;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
    border-radius: 0;
}

.checkbox-item:hover {
    background: var(--primary-light);
}

.checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
}

.checkbox-item.is-checked {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

select:focus, input[type="range"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 109, 138, 0.2);
    background: white;
}

.radio-list-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
    max-height: none;
}

/* Caja del texto informativo (ver wireHeroInfo en app.js). */
.indicator-info-tip {
    display: none;
    position: fixed;
    z-index: 10000;
    max-width: 300px;
    padding: 9px 12px;
    background: #1f2a44;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* "i" de la caja de valores: texto informativo y nota metodológica en párrafos separados */
#heroInfoTip p {
    margin: 0;
}

#heroInfoTip p + p {
    margin-top: 6px;
}

.radio-item {
    display: flex;
    align-items: flex-start;
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.radio-item:last-child {
    border-bottom: none;
}

.radio-item:hover {
    background-color: #f5f8fc;
}

.radio-item.selected {
    background-color: #f0f4fa; /* Color similar al de seleccion */
}

.radio-item input[type="radio"] {
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.radio-item label {
    cursor: pointer;
    font-size: 12px;
    color: #444;
    user-select: none;
    flex: 1;
    line-height: 1.3;
}

.radio-item.selected label {
    color: var(--primary);
    font-weight: 600;
}

.btn-download {
    width: 100%;
    padding: 10px;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    transition: background 0.2s;
}

.btn-download:hover {
    background: #1b5e20;
}

/* --- AREA TYPE FILTER --- */
/* Transición de entrada/salida al cambiar de nivel geográfico (updateAreaFilterButtons) --
   antes era un salto instantáneo de display:block/none que reordenaba todo el contenido de
   abajo sin aviso. max-height con un tope generoso (más que el contenido real, que son como
   máx. 2 filas de píldoras) anima suave sin necesitar calcular el alto real en JS. */
#areaFilterContainer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    margin-bottom: 0 !important;
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease, margin-bottom 0.18s ease;
    text-align: center;
}
#areaFilterContainer.visible {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
    /* 8px, no los 16px genéricos de .control-group -- coincide con el ajuste "Tipo de Área
       compacto" ya existente más abajo en este archivo (mismo contenedor, más apretado que
       el resto del panel porque Manzanas-Entidades puede mostrar hasta 4 botones). */
    margin-bottom: 8px !important;
}

.area-filter-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
}

.area-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.area-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.area-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* --- TOGGLE BUTTONS (calc-btn) --- */
.calc-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.calc-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.calc-btn.active {
    background: #0072A6;
    border-color: #0072A6;
    color: white;
}

/* --- VIZ MODE TOGGLE (segmented, una sola fila) --- */
#vizModeContainer {
    margin-top: 0;
}

.viz-toggle {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-off);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px;
    gap: 2px;
}

.viz-btn {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-radius: 18px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all var(--transition);
    background: transparent;
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.viz-btn:hover:not(.active) {
    color: var(--primary);
}

.viz-btn.active {
    background: #0072A6;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* --- COMPARACIONES BIVARIADAS (modo "Comparar indicadores") --- */
.bivariate-picker-subtitle {
    font-size: 11px;
    color: var(--text-muted, #888);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Mensaje de "sin comparaciones": mismo look de caja que la lista de indicadores
   (.radio-list-wrapper/.radio-item) para que no se vea como texto suelto. */
.comparison-empty-message {
    margin-bottom: 0;
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
}

/* #bivariate-picker necesita ser flex column + flex:1 + min-height:0 por la misma razón que
   #univariate-picker (ver esa regla, más abajo en este archivo): sin esto, #comparisonGroups
   no tiene ningún ancestro que le pase el espacio real disponible, así que la lista de
   comparaciones no tenía scroll propio y quedaba cortada sin remedio. */
#bivariate-picker {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Lista plana de tarjetas de comparación para la temática activa (ya no hay acordeón propio
   por categoría — la agrupación la da el árbol Dimensión/Subdimensión/Temática compartido con
   "Ver un indicador", ver renderComparisonsForTema() en app.js).
   flex:1 + min-height:0 + overflow-y:auto (antes ausentes): mismo patrón que
   .radio-list-wrapper — sin esto la lista crecía a su alto natural sin límite ni scroll. */
#comparisonGroups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.comparison-card {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}

.comparison-card:hover {
    border-color: var(--primary);
    background: #f5f8fc;
}

.comparison-card.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.comparison-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.comparison-card.active .comparison-card-title {
    color: var(--primary);
}

.comparison-card-axes {
    font-size: 10.5px;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
}

/* Categoría original (scope) de la comparación — ya no agrupa la navegación, pero se conserva
   como contexto secundario chico en la tarjeta. */
.comparison-card-scope {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #aaa);
    margin-top: 4px;
}

[data-theme="dark"] .bivariate-picker-subtitle {
    color: var(--text-muted);
}
[data-theme="dark"] .comparison-empty-message {
    background: var(--surface-off);
    border-color: var(--border);
}
[data-theme="dark"] .comparison-card {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .comparison-card:hover {
    background: var(--surface-off);
}
[data-theme="dark"] .comparison-card-title {
    color: var(--text);
}
[data-theme="dark"] .comparison-card-axes {
    color: var(--text-muted);
}

/* --- RIGHT SIDEBAR (Details) --- */
.toggle-left-btn {
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 60px;
    background: white;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    color: #555;
    z-index: 100;
}

.toggle-left-btn:hover {
    color: var(--primary);
    background: #f9f9f9;
}

.toggle-tab-btn {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 60px;
    background: white;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    color: #555;
    z-index: 100;
}

.toggle-tab-btn:hover {
    color: var(--primary);
    background: #f9f9f9;
}

#right-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border-radius: 0;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    /* Hidden by default */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#details-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
}

#details-content .details-fixed {
    flex-shrink: 0;
}

#details-content .details-scroll {
    flex: 1;
    overflow-y: auto;
    margin-top: 5px;
}

#right-panel.active {
    transform: translateX(0);
}

.feature-subtitle {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.stat-card {
    background: white;
    padding: 5px 7px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.stat-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--cyan);
}

.stat-label {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}

/* --- EXPANSIBLE TABS (DYNAMIC ISLAND STYLE) --- */
#tabs-container {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    align-items: center;
    background: rgba(150, 155, 160, 0.75);
    /* Gris más oscuro con transparencia */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    overflow: hidden;
    max-width: 95vw;
}

#tabs-container:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: rgba(150, 155, 160, 0.9);
    /* Más opaco en hover */
}

.dropdown-toggle {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: white;
    white-space: nowrap;
    background: var(--color-brand-magenta);
    border: none;
    outline: none;
    transition: background 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(237, 0, 140, 0.3);
}

.dropdown-toggle:hover {
    background: var(--color-brand-magenta-hover);
}

.dropdown-toggle .caret {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

#tabs-container.expanded .dropdown-toggle .caret {
    transform: rotate(-90deg);
    /* Apunta a la izquierda para indicar cierre */
}

.tab-dropdown-item {
    padding: 0 10px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: #f5f6f8;
    border: 1px solid #e6e6e6;
    outline: none;
}

.tab-dropdown-item:hover {
    background-color: #eef2f7;
    color: #333;
    border-color: #d5dbe3;
}

.tab-dropdown-item .material-icons {
    font-size: 14px;
    color: #666;
}

.tab-dropdown-item:hover .material-icons {
    color: #333;
}

/* --- TAB SEARCH BUTTON --- */
.tab-search-btn {
    height: 26px;
    width: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    outline: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 4px;
}
.tab-search-btn:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
}
.tab-search-btn .material-icons { font-size: 14px; }

/* --- OMNISEARCH PANEL --- */
#omnisearch-panel {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 420px;
    max-width: 92vw;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
#omnisearch-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.omnisearch-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}
.omnisearch-input-wrap .material-icons {
    color: #888;
    font-size: 18px;
    flex-shrink: 0;
}
.omnisearch-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    color: #222;
    background: transparent;
}
#omnisearchClose {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    transition: color 0.15s;
}
#omnisearchClose:hover { color: #333; }
#omnisearchClose .material-icons { font-size: 18px; }

#omnisearch-results {
    max-height: 440px;
    overflow-y: auto;
    padding: 6px 0;
}

.omnisearch-empty,
.omnisearch-count {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    font-size: 12px;
    color: #777;
}
.omnisearch-empty .material-icons { font-size: 17px; }
.omnisearch-count {
    color: #1E3B7D;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 16px 4px;
    border-bottom: 1px solid #f0f0f0;
}
.omnisearch-count .material-icons { font-size: 15px; color: var(--text-muted); }

.omnisearch-group { margin-bottom: 2px; }

.omnisearch-group-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1E3B7D;
    background: #f5f7fc;
    border-top: 1px solid #eef0f8;
    border-bottom: 1px solid #eef0f8;
}
.omnisearch-group-count {
    margin-left: auto;
    background: #1E3B7D;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.omnisearch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 1px solid #f7f7f7;
}
.omnisearch-item:hover { background: #eef2ff; }
.omnisearch-item--unavail {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
.omnisearch-item-label {
    font-size: 12px;
    color: #222;
    line-height: 1.4;
    flex: 1;
}
.omnisearch-item-label mark {
    background: #FFF176;
    color: #111;
    border-radius: 2px;
    padding: 0 1px;
}
.omnisearch-unavail-tag {
    font-size: 10px;
    color: var(--text-muted, #aaa);
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--surface-off, #f0f0f0);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Dark mode omnisearch */
[data-theme="dark"] #omnisearch-panel {
    background: #1e2535;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .omnisearch-input-wrap { border-bottom-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .omnisearch-input-wrap input { color: #e8e8e8; }
[data-theme="dark"] .omnisearch-input-wrap .material-icons { color: #aaa; }
[data-theme="dark"] #omnisearchClose { color: #888; }
[data-theme="dark"] #omnisearchClose:hover { color: #ccc; }
[data-theme="dark"] .omnisearch-group-header { background: #252d42; border-color: rgba(255,255,255,0.08); color: #8ab4f8; }
[data-theme="dark"] .omnisearch-group-count { background: #8ab4f8; color: #1e2535; }
[data-theme="dark"] .omnisearch-item { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .omnisearch-item:hover { background: rgba(138,180,248,0.12); }
[data-theme="dark"] .omnisearch-item-label { color: #e0e0e0; }
[data-theme="dark"] .omnisearch-count { color: #8ab4f8; border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .omnisearch-empty { color: #888; }

/* --- DRIVER.JS TOUR OVERRIDES --- */
.driver-popover {
    font-family: var(--font) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
    max-width: 340px !important;
}
.driver-popover * {
    font-family: var(--font) !important;
}
.driver-popover-title {
    font-size: 14px !important;
    font-weight: var(--weight-bold) !important;
    color: #1E3B7D !important;
    margin-bottom: 6px !important;
}
.driver-popover-description {
    font-size: 13px !important;
    color: #444 !important;
    line-height: 1.55 !important;
}
.driver-popover-progress-text {
    font-size: 11px !important;
    color: #888 !important;
}
/* Todos los botones del footer: eliminar text-shadow y estilos base */
.driver-popover-footer button {
    text-shadow: none !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: var(--weight-semibold) !important;
    border-radius: 6px !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
}
/* Botón Siguiente / Finalizar */
.driver-popover-footer .driver-popover-navigation-btns button:last-child {
    background-color: #1E3B7D !important;
    color: #ffffff !important;
    border-color: #1E3B7D !important;
    text-shadow: none !important;
}
.driver-popover-footer .driver-popover-navigation-btns button:last-child:hover {
    background-color: #16306a !important;
    border-color: #16306a !important;
}
/* Botón Anterior */
.driver-popover-footer .driver-popover-navigation-btns button:first-child {
    background-color: #ffffff !important;
    color: #1E3B7D !important;
    border-color: #1E3B7D !important;
    text-shadow: none !important;
}
.driver-popover-footer .driver-popover-navigation-btns button:first-child:hover {
    background-color: #eef2ff !important;
}
.driver-popover-close-btn {
    color: #aaa !important;
    text-shadow: none !important;
}
.driver-popover-close-btn:hover { color: #333 !important; }

/* --- DYNAMIC HORIZONTAL LEGEND & WRAPPER --- */
#legend-wrapper {
    position: absolute;
    bottom: 14px;
    /* left/right se recalculan en JS (updateTablePanelPosition) según el ancho real de los
       paneles — con izquierda/derecha fijos, el flex centra su contenido en el ÁREA VISIBLE del
       mapa entre ambos paneles, no en toda la ventana (si no, con el panel derecho ancho en modo
       Ficha Territorial, la leyenda queda montada encima de ese panel). */
    left: 290px;
    right: 0;
    transition: left 0.3s cubic-bezier(0.25,0.8,0.25,1),
                right 0.3s cubic-bezier(0.25,0.8,0.25,1),
                bottom 0.28s cubic-bezier(0.25,0.8,0.25,1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    pointer-events: none;
}

/* Modo Tabla: el panel #data-table-panel (260px de alto, z-index:150) tapa el widget si se queda
   en su posición normal -- se sube por encima de la tabla para que el switch (y su botón
   "Leyenda") sigan siempre visibles y clickeables. */
#legend-wrapper.legend-wrapper--table-mode {
    bottom: 274px;
}

#legend-wrapper > * {
    pointer-events: auto;
}

/* Mapa comparado (bivariado): la tarjeta de leyenda es notoriamente más alta/ancha que la barra
   univariada -- centrada en el área del mapa tapaba mucha información. Se pega al borde
   izquierdo del área visible en vez de quedar al medio. */
#legend-wrapper.legend-wrapper--bivariate {
    align-items: flex-start;
    padding-left: 14px;
}

#legend-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
    width: max-content;
    overflow: hidden;
    /* Tope usado para animar el colapso/expansión al entrar en modo Tabla (ver
       #legend-wrapper.legend-wrapper--table-mode más abajo, que lo lleva a 0). La leyenda
       bivariada (título + ejes + grilla 3x3 + título del eje X,
       que puede ocupar 2 líneas con comparaciones de nombre largo) puede superar fácilmente los
       300px que tenía antes — el excedente se recortaba por arriba en vez de mostrarse
       completo. 460px deja margen para el peor caso. */
    max-height: 460px;
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.22s ease;
}

/* Switch Leyenda/Tabla: mismo patrón visual que .viz-toggle (Ver un indicador / Mapa
   comparado) -- pista clara con el segmento activo resaltado en azul. */
.legend-table-switch {
    display: flex;
    background: var(--surface-off);
    border: 1.5px solid #000;
    border-radius: 20px;
    padding: 2px;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.legend-table-btn {
    border: none;
    border-radius: 18px;
    padding: 4px 12px;
    cursor: pointer;
    background: transparent;
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transition: all var(--transition);
}

.legend-table-btn:hover:not(.active) {
    color: var(--primary);
}

.legend-table-btn.active {
    background: #0072A6;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Botón "Límites" en la esquina inferior izquierda del mapa, con su recuadro encima. left lo
   ajusta updateTablePanelPosition (panel izquierdo abierto o cerrado, medición activa). Con la
   tabla abierta sube por encima de ella, igual que la leyenda. */
.limites-control {
    position: absolute;
    bottom: 14px;
    left: 300px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transition: left 0.3s cubic-bezier(0.25,0.8,0.25,1), bottom 0.28s cubic-bezier(0.25,0.8,0.25,1);
}
.limites-control.limites-control--tabla {
    bottom: 274px;
}
body.territorial-expanded-active .limites-control {
    display: none;
}
.limites-btn {
    border: 1.5px solid #000;
    border-radius: 16px;
    padding: 3px 10px;
    background: var(--surface-off);
    color: #4b5563;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.limites-btn:hover:not(.active) {
    color: var(--primary);
}
.limites-btn.active {
    background: #0072A6;
    color: #fff;
    font-weight: 700;
}
[data-theme="dark"] .limites-btn:not(.active) {
    color: var(--text-muted);
}

/* Recuadro "Límites del mapa": un límite por fila, con su muestra de línea. Mismo fondo y sombra
   que la leyenda. */
.limites-box {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    max-width: 280px;
    box-sizing: border-box;
    font-size: 11px;
    color: #333;
}
.limites-box[hidden] { display: none; }
.limites-titulo {
    font-weight: 700;
    margin-bottom: 5px;
}
.limites-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.limites-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.limites-item svg {
    flex: 0 0 auto;
}
.limites-vacio {
    color: #666;
}
[data-theme="dark"] .limites-box {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .limites-vacio {
    color: var(--text-muted);
}

/* Indica que "Leyenda" también se puede volver a pulsar para ocultar/mostrar su contenido
   (no solo para cambiar desde Tabla) -- gira hacia arriba cuando el cuerpo está oculto, ya sea
   por colapso manual o porque está activo el modo Tabla. */
.legend-collapse-chevron {
    display: inline-block;
    font-size: 9px;
    margin-left: 1px;
    transition: transform 0.15s ease;
}

#legend-wrapper.legend-wrapper--collapsed .legend-collapse-chevron,
#legend-wrapper.legend-wrapper--table-mode .legend-collapse-chevron {
    transform: rotate(-90deg);
}

/* Modo Tabla, o clic en "Leyenda" ya activa (ocultar leyenda manualmente sin cambiar a Tabla):
   oculta el cuerpo de la leyenda con la misma transición que ya tenía el colapso original. */
#legend-wrapper.legend-wrapper--table-mode #legend-inner,
#legend-wrapper.legend-wrapper--collapsed #legend-inner {
    max-height: 0;
    opacity: 0;
}

#legend {
    background: white;
    padding: 12px 12px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    z-index: 1;
    width: 340px;
}

#calcModeContainer.legend-integrated {
    background: white;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    border-left: none;
    border-bottom: 1px solid #e0e0e0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    margin-left: 0;
    margin-bottom: 0;
}

.legend-calc-label {
    font-size: 11px;
    font-weight: 700;
    color: #444;
    white-space: nowrap;
    text-align: center;
}

.legend-calc-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* --- CLASSIFICATION CONTROL (dentro de calcModeContainer) --- */
.legend-calc-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

.legend-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    margin-top: 6px;
}

.legend-hint {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.75;
}

.legend-metadata {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    opacity: 0.75;
    margin-left: auto;
}

/* --- LEGEND HEADER --- */
.legend-header-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    min-height: 20px;
}

.legend-hero-number {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-right: 8px;
    line-height: 1;
}

.legend-hero-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}

.legend-color-bar {
    position: relative;
    height: 10px;
    display: flex;
    width: 100%;
    border-radius: 2px;
    background: #f5f5f5;
}

.legend-color-segment {
    height: 100%;
    transition: opacity 0.15s ease-out, filter 0.1s ease-out;
    /* Flex-basis will be set dynamically */
}

/* Clase oculta a clic (state.legendDisabledClasses, ver updateChoropleth): antes solo bajaba la
   opacidad a 0.25, pero un color ya pálido de la rampa (ej. un celeste claro intermedio) apagado
   así se veía casi igual a un color activo cualquiera -- el usuario no podía distinguir "esta
   clase está oculta" de "esta clase es así de pálida en la rampa" (reportado con captura). Las
   franjas diagonales + escala de grises rompen esa ambigüedad sin depender de qué tan oscuro o
   claro sea el color de fondo de cada clase -- franjas ALTERNADAS claro/oscuro (no solo blancas):
   un color de fondo ya pálido (ej. el amarillo de la rampa) casi no dejaba ver franjas blancas por
   falta de contraste (reportado con captura); alternar con una franja oscura garantiza contraste
   contra cualquier color de fondo, claro u oscuro. */
.legend-color-segment.is-disabled {
    opacity: 0.85;
    filter: grayscale(65%);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,0.28) 0px,
        rgba(0,0,0,0.28) 3px,
        rgba(255,255,255,0.75) 3px,
        rgba(255,255,255,0.75) 6px
    );
}

/* Hover sobre un tramo clickeable (ocultar/mostrar clase): marca suavemente cuál está bajo el
   cursor antes de hacer clic -- pedido explícito del usuario, con un borde gris (NO un cambio de
   color/brillo del tramo, que se probó primero y no convenció). box-shadow inset en vez de
   outline/border reales para no alterar el ancho de cada tramo (son flex items con % exactos).
   Solo en los tramos con data-class-idx (los clasificables, ver updateChoropleth); los de un
   indicador de densidad no llevan ese atributo y quedan sin este hover, igual que ya quedan sin
   cursor de mano. */
.legend-color-segment[data-class-idx]:hover {
    box-shadow: inset 0 0 0 2px rgba(75, 85, 99, 0.7);
}

.legend-marker {
    position: absolute;
    top: -8px;
    left: 0%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    transition: left 0.15s ease-out, opacity 0.2s;
    opacity: 0;
    z-index: 5;
}

/* Hover Marker: Solid Black ▼ */
.legend-marker.hover {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #111;
    z-index: 6;
}

/* Selected Marker: Outlined ▽ */
.legend-marker.selected {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #111;
    z-index: 5;
}

.legend-marker.selected::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid white;
}

.legend-marker-value {
    position: absolute;
    bottom: 9px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #111;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: #111;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.legend-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 10px;
    color: #666;
    font-weight: 500;
}

/* --- UTILS --- */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* --- MAP TOOLS --- */
#map-tools {
    position: absolute;
    top: 10px;
    left: calc(100% + 36px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}

.tool-btn {
    position: relative;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #555;
    transition: all 0.2s;
}

/* Tooltip propio: reemplaza el title nativo del navegador (lento y sin estilo) */
.tool-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    max-width: 220px;
    width: max-content;
    white-space: normal;
    transform: translateY(-50%) translateX(-4px);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    transition-delay: 0.15s;
    z-index: 50;
}

.tool-btn[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    transition-delay: 0.15s;
    z-index: 50;
}

.tool-btn[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.tool-btn[data-tooltip]:hover::before {
    opacity: 1;
}

/* Con el popup/menú del botón abierto, el tooltip queda de más (se superpone a las
   opciones) — se oculta aunque el mouse siga encima del botón. */
.tool-btn[data-tooltip].popup-open::after,
.tool-btn[data-tooltip].popup-open::before {
    opacity: 0 !important;
}

.tool-btn .material-icons,
.tool-btn .help-mode-icon {
    font-size: 16px;
}

.tool-btn:hover {
    background: #f0f0f0;
    color: var(--primary);
}

.tool-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.help-mode-icon {
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    font-family: inherit;
}

body.help-cursor-mode,
body.help-cursor-mode * {
    cursor: help !important;
}

/* Overlays de ayuda contextual — position:fixed para no ser clippeados por overflow */
.help-highlight-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    border: 2px solid rgba(245, 158, 11, 0.85);
    border-radius: 5px;
    animation: help-overlay-pulse 1.8s ease-in-out infinite;
}

@keyframes help-overlay-pulse {
    0%, 100% {
        border-color: rgba(245, 158, 11, 0.6);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0);
    }
    50% {
        border-color: rgba(245, 158, 11, 1);
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18);
    }
}

/* Toast de instrucción del modo ayuda */
#help-mode-toast {
    position: fixed;
    /* Debajo del selector de temática (#tabs-container: header 46px + top 8px + alto ~36px =
       borde inferior ~90px) -- con 56px quedaba prácticamente a la misma altura, tapándolo. */
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #1a1a2e;
    color: #fff;
    padding: 9px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-left: 4px solid #f59e0b;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#help-mode-toast.help-mode-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.palette-widget {
    position: relative;
}

/* Envoltorio genérico para los botones que abren #mapStylePanel/#toolsPanel (mismo rol que
   .palette-widget: solo position:relative para anclar el popup). */
.toolbar-widget {
    position: relative;
}

/* Divisor entre clusters de la barra vertical de herramientas (Navegación / Estilo+Herramientas /
   Exportar+Ayuda) -- ver conversación sobre reorganizar la barra en 3 clusters + 2 sueltos. */
.tools-cluster-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    width: 28px;
    margin: 2px 0;
}

/* Panel único que agrupa Mapa base + Transparencia + Paleta ("Estilo del mapa") o Medir +
   Selección múltiple ("Herramientas") -- mismo look que .palette-popup, pero con varias
   secciones adentro en vez de una lista plana de opciones. */
.tools-panel {
    position: absolute;
    left: 45px;
    top: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    /* Mismo ancho que ya tenía .palette-popup sola (la más ancha de las 3 secciones que ahora
       viven adentro) -- 240px le sobraba espacio de más comparado con el resto de cajas/textos
       del visualizador (~11-12px, paneles angostos). */
    width: 200px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    z-index: 100;
}

/* #toolsPanel (Medir distancia / Selección múltiple) tiene contenido bastante más corto que
   #mapStylePanel -- no tiene sentido que comparta el mismo ancho de 200px, se ve con espacio
   vacío de más. */
#toolsPanel {
    width: 170px;
}

.tools-panel.show {
    display: flex;
}

.tools-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 3px;
}

.tools-panel-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 4px 0;
}

/* Mapa base/Transparencia/Paleta viven ahora ANIDADOS dentro de #mapStylePanel (antes eran
   popups independientes, cada uno position:absolute con su propio botón) -- se anulan esas
   reglas de popup individual para que se vean como secciones normales, en flujo, una debajo de
   la otra dentro del panel único. */
#mapStylePanel .basemap-menu,
#mapStylePanel .opacity-popup,
#mapStylePanel .palette-popup {
    position: static;
    display: flex;
    flex-direction: column;
    width: auto;
    box-shadow: none;
    border: none;
    z-index: auto;
}
#mapStylePanel .opacity-popup {
    padding: 4px 10px 10px;
}

/* Botones de modo dentro de #toolsPanel (Medir distancia / Selección múltiple) -- llevan
   etiqueta de texto visible, a diferencia de los íconos sueltos de la barra principal. */
.tool-panel-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 11px;
    color: #444;
    text-align: left;
    border-radius: 4px;
    transition: background 0.1s;
}
.tool-panel-btn:hover {
    background: #f5f5f5;
}
.tool-panel-btn .material-icons {
    font-size: 15px;
    color: #777;
    flex-shrink: 0;
}
/* Mismo estilo "seleccionado" que ya usan las comunas/regiones marcadas (.checkbox-item.is-
   checked: fondo claro + texto del color primario) en vez del relleno sólido que usaba
   .tool-btn.active -- consistencia visual entre ambos. */
.tool-panel-btn.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.tool-panel-btn.active .material-icons {
    color: var(--primary);
}

.palette-popup {
    position: absolute;
    left: 45px;
    top: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    width: 200px;
    overflow: hidden;
    border: 1px solid #ddd;
    z-index: 100;
}

.palette-popup.show {
    display: flex;
}

.palette-popup-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px 4px;
}

.palette-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #444;
    transition: background 0.1s;
}

.palette-option:hover {
    background: #f5f5f5;
}

.palette-option.active {
    background: #eef4ff;
}

.png-export-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    cursor: pointer;
    border: none;
    border-top: 1px solid #f0f0f0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: #444;
    text-align: left;
    transition: background 0.1s;
}
.png-export-option:hover {
    background: #f5f5f5;
}
.png-export-option .material-icons {
    font-size: 17px;
    color: #777;
    flex-shrink: 0;
}

.png-export-hint-banner {
    position: fixed;
    /* Debajo del selector de temática (#tabs-container: header 46px + top 8px + alto ~36px =
       borde inferior ~90px) -- con 70px quedaba encima, mismo problema ya corregido en
       #help-mode-toast (ver esa regla). */
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 450;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1D336B;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 9px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    max-width: min(92vw, 680px);
}
.png-export-hint-banner .material-icons {
    font-size: 18px;
    flex-shrink: 0;
}
.png-export-hint-banner button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    /* Antes 15px -- notoriamente más grande que la escala tipográfica del resto de la app
       (~11-13px en botones/pills equivalentes, ej. .dropdown-toggle usa 12px). */
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.png-export-hint-banner button:hover {
    background: rgba(255, 255, 255, 0.28);
}
.png-draw-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
}
.png-draw-mode-btn .material-icons {
    font-size: 17px;
    margin: 0;
}
.png-draw-mode-btn.active {
    background: #fff;
    color: #1D336B;
}

.png-export-confirm-yes {
    background: #E4007B !important;
    font-weight: 700;
    padding: 5px 12px !important;
    white-space: nowrap;
}
.png-export-confirm-yes:hover {
    background: #b80065 !important;
}

.palette-swatches {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.palette-swatches span {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: inline-block;
}

/* Variante para paletas bivariadas (Mapa comparado): grilla 3x3 en vez de rampa lineal */
.palette-swatches-grid {
    display: grid;
    grid-template-columns: repeat(3, 13px);
    grid-template-rows: repeat(3, 13px);
    gap: 2px;
}

.opacity-popup {
    position: absolute;
    left: 45px;
    top: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: none;
    width: 180px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    z-index: 30;
    box-sizing: border-box;
}

.opacity-popup input[type="range"] {
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.opacity-popup.show {
    display: block;
}

.opacity-popup label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 6px;
}

.basemap-menu {
    position: absolute;
    left: 45px;
    top: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    width: 140px;
    overflow: hidden;
    border: 1px solid #ccc;
    /* Único popup de herramientas sin z-index propio (opacity-popup:30, palette-popup/
       pngExportPopup:100, level-menu:500) -- sin esto, algún otro elemento posicionado con
       z-index explícito podía pintarse encima en parte de cada fila, justo donde cae el texto,
       bloqueando el cursor de mano y el clic ahí aunque el resto de la fila respondiera bien. */
    z-index: 100;
}

/* --- SELECTOR DE NIVEL GEOGRÁFICO (control único: candado + nombre del nivel + chevron) ---
   Antes eran 2 piezas separadas (badge "Auto"/"Fijo" + un <div> de texto sin estilo de botón,
   que parecía estático pero mostraba el nivel real) -- ahora es un solo control con chrome
   completo de botón/select, y el candado (abierto/cerrado) reemplaza la palabra "Auto"/"Fijo". */
.level-indicator-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: filter 0.15s, border-color 0.15s;
    /* background/border-color/color los fija updateAutoLevelIndicator() según el estado */
}

.level-indicator-btn:hover {
    filter: brightness(0.96);
}

.level-indicator-lock {
    font-size: 14px !important;
    flex-shrink: 0;
}
/* Candado abierto = automático (default), candado cerrado = fijado (indicator.is-fixed, ver
   updateAutoLevelIndicator). 2 íconos con visibilidad por clase en vez de reescribir el
   textContent de uno solo -- ver BUG 2 de la auditoría de usabilidad. */
.level-indicator-lock--closed { display: none; }
.level-indicator-btn.is-fixed .level-indicator-lock--open { display: none; }
.level-indicator-btn.is-fixed .level-indicator-lock--closed { display: inline; }

/* Letra junto al candado -- "A" (Automático) / "M" (Manual), pedido explícito del usuario para
   distinguir el estado de un vistazo sin depender solo de la forma abierta/cerrada del candado.
   Mismo mecanismo de visibilidad por clase que el candado (is-fixed), sin margen propio -- el
   gap:6px de .level-indicator-btn ya separa el candado, la letra y el nombre del nivel. */
.level-indicator-mode {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.85;
    flex-shrink: 0;
    margin-left: -3px;
}
.level-indicator-mode--closed { display: none; }
.level-indicator-btn.is-fixed .level-indicator-mode--open { display: none; }
.level-indicator-btn.is-fixed .level-indicator-mode--closed { display: inline; }

/* flex:1 + centrado -- así el nombre del nivel queda centrado en el botón completo (no solo
   en el espacio libre entre el candado y el chevron), y empuja el chevron al borde derecho. */
#layer-current-label {
    flex: 1;
    text-align: center;
}

.level-indicator-chevron {
    font-size: 15px !important;
    opacity: 0.75;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.level-indicator-btn[aria-expanded="true"] .level-indicator-chevron {
    transform: rotate(180deg);
}

/* Chip descartable "Fijado por tu búsqueda" (ver updateAutoLevelIndicator/selectGlobalResult):
   mismo criterio visual que .control-label-row + .section-clear-btn (Región/Comuna), en una
   caja propia porque acá no acompaña a un <label> de sección sino al selector de nivel. */
.level-lock-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
    padding: 3px 4px 3px 8px;
    background: var(--surface-off);
    border-radius: 20px;
    font-size: 10px;
    color: var(--text-muted, #777);
}

/* Aviso flotante junto a las herramientas del mapa (#map-tools): nivel fijado manualmente que no
   dibuja nada al zoom actual (ver updateZoomHint()) -- evita que el mapa se vea "roto" sin
   explicación cuando el usuario aleja el zoom por debajo del mínimo del nivel fijado. Informativo
   y transitorio (se autocierra solo, ver setTimeout en updateZoomHint/updateAutoLevelCapHint) --
   no bloquea el mapa ni exige acción. Recuadro angosto (no una barra horizontal) anclado a la
   derecha de #map-tools (290px de #left-panel + 36px de separación + 30px de ancho del botón +
   10px de aire), con el mismo lenguaje visual que las cajas del panel izquierdo (.checkbox-list):
   fondo var(--surface-off) con transparencia leve, borde gris un poco más marcado que
   var(--border) (pedido explícito: notorio pero sutil), texto oscuro, radio var(--radius-md).
   El color de fondo/borde va hardcodeado (no var(--surface-off)/var(--border) directo) porque
   ambos necesitan más opacidad/contraste que el resto de las cajas del panel -- el override
   [data-theme="dark"] de más abajo trae el equivalente para modo oscuro. */
#zoom-level-toast {
    position: absolute;
    top: 10px;
    left: 366px;
    z-index: 96;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 200px;
    padding: 10px 12px;
    background: rgba(241, 245, 249, 0.92);
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.18);
    font-size: 12px;
    line-height: 1.4;
    backdrop-filter: blur(6px);
    animation: zoomToastIn 0.25s ease-out;
}

[data-theme="dark"] #zoom-level-toast {
    background: rgba(37, 41, 49, 0.92);
    border-color: rgba(255, 255, 255, 0.16);
}

#zoom-level-toast button#zoomToastClose {
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

#zoom-level-toast button#zoomToastClose:hover {
    color: var(--primary);
}

#zoom-level-toast a,
#zoom-level-toast .zoom-toast-action {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
}

/* Solo <a>/<button> son clickeables -- el <span class="zoom-toast-action"> del aviso de
   "elige manualmente el siguiente" (updateAutoLevelCapHint) es puro texto destacado, sin acción. */
#zoom-level-toast a,
#zoom-level-toast button.zoom-toast-action {
    cursor: pointer;
}

/* Aviso "Seleccione un nivel más detallado" (updateAutoLevelCapHint): caja informativa ancha,
   centrada bajo el selector de temática. Borde neutro uniforme, sin franjas de color. */
#zoom-level-toast.zoom-toast--centrado {
    top: 64px;
    left: 50%;
    z-index: 210;
    /* Ancho según el contenido (sin espacio en blanco sobrante a la derecha); la X va en la
       esquina superior, fuera del flujo del texto. */
    width: max-content;
    max-width: min(400px, calc(100vw - 32px));
    padding: 9px 32px 9px 13px;
    gap: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    transform: translateX(-50%);
    animation: zoomToastCentroIn 0.25s ease-out;
}

[data-theme="dark"] #zoom-level-toast.zoom-toast--centrado {
    color: #e5e7eb;
    background: #252931;
    border-color: rgba(255, 255, 255, 0.16);
}

#zoom-level-toast.zoom-toast--centrado .zoom-toast-titulo {
    display: block;
    margin-bottom: 3px;
    font-size: 12.5px;
    color: inherit;
}

#zoom-level-toast.zoom-toast--centrado .zoom-toast-linea { display: block; }
#zoom-level-toast.zoom-toast--centrado .zoom-toast-lista { margin: 2px 0 3px; padding-left: 16px; font-weight: 600; }
#zoom-level-toast.zoom-toast--centrado .zoom-toast-nota { color: #6b7280; }
[data-theme="dark"] #zoom-level-toast.zoom-toast--centrado .zoom-toast-nota { color: #9ca3af; }

#zoom-level-toast.zoom-toast--centrado button#zoomToastClose {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 16px;
}

@keyframes zoomToastCentroIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes zoomToastIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.level-menu {
    /* top/left los fija JS (openLevelMenu) relativo a #left-panel, para no quedar
       cortado por el overflow:auto del panel navegador — mismo criterio que
       #globalSearchResults. */
    position: absolute;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    display: none;
    flex-direction: column;
    width: 190px;
    overflow: hidden;
    z-index: 500;
}

.level-menu.show {
    display: flex;
}

.level-menu-title {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px 4px;
    text-align: left;
}

.level-menu-divider {
    height: 1px;
    background: #eee;
    margin: 2px 0;
}

.level-option {
    /* Reset del chrome nativo de <button> (BUG 4: ahora son <button role="option">, no <div>) */
    display: flex;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: #444;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.level-option:hover {
    background: #f5f8fc;
}

.level-option.active {
    background: var(--primary-light, #eef4ff);
    color: var(--primary);
    font-weight: 600;
}

/* BUG 3: antes solo color:#bbb -- demasiado sutil, se veía "igual" a una opción habilitada en
   una revisión rápida. Opacidad reducida + cursor not-allowed explícito para que se lea
   claramente como no disponible, no solo como un gris apenas distinto. */
.level-option.disabled {
    color: #888;
    opacity: 0.45;
    cursor: not-allowed;
}

.level-option.disabled:hover {
    background: none;
}

[data-theme="dark"] .level-option.disabled {
    color: var(--text-muted);
    opacity: 0.4;
}

.level-option .material-icons {
    font-size: 14px;
}

[data-theme="dark"] .level-menu {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .level-menu-title {
    color: var(--text-muted);
}
[data-theme="dark"] .level-menu-divider {
    background: var(--border);
}
[data-theme="dark"] .level-option {
    color: var(--text);
}
[data-theme="dark"] .level-option:hover {
    background: var(--surface-off);
}

.basemap-menu.show {
    display: flex;
}

.basemap-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid #eee;
}

.basemap-option:last-child {
    border-bottom: none;
}

.basemap-option:hover {
    background: #f5f5f5;
}

.basemap-option.active {
    background: var(--primary);
    color: white;
}

/* --- PANEL MEDICIÓN --- */
#measure-panel {
    display: none;
    position: absolute;
    bottom: 14px;
    left: 300px;
    z-index: 300;
    width: 170px;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 12px 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.13);
    font-size: 13px;
    font-family: var(--font);
    transition: bottom 0.2s ease;
}

.mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
}

.mp-close-btn {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    transition: background var(--transition), color var(--transition);
}

.mp-close-btn:hover {
    background: var(--surface-off);
    color: var(--primary);
}

.mp-row {
    margin-bottom: 6px;
}

.mp-label {
    font-size: 9px;
    color: var(--secondary);
    margin-bottom: 2px;
}

.mp-value--seg {
    font-size: 14px;
    font-weight: 700;
    color: var(--magenta);
    line-height: 1.2;
}

.mp-value--total {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.mp-value--area {
    font-size: 14px;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1.2;
}

.mp-row--units {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mp-row--units .mp-label {
    margin-bottom: 0;
    white-space: nowrap;
}

#mp-unit-select {
    flex: 1;
    background: var(--surface-off);
    border: 1px solid var(--border);
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    outline: none;
}

.mp-status {
    font-size: 9.5px;
    color: var(--secondary);
    opacity: 0.65;
    line-height: 1.4;
    margin-bottom: 8px;
    min-height: 2.4em;
}

.mp-clear-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 5px;
    padding: 4px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.mp-clear-btn:hover {
    background: var(--primary);
    color: var(--primary-text);
}

/* Búsqueda global */
#globalSearchInput { transition: border-color 0.2s, box-shadow 0.2s; }
#globalSearchInput:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(0,27,95,0.1); }
#globalSearchResults::-webkit-scrollbar { width: 5px; }
#globalSearchResults::-webkit-scrollbar-track { background: #f5f5f5; }
#globalSearchResults::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.global-result-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}
.global-result-item:last-child { border-bottom: none; }
.global-result-item:hover { background: #f0f4ff; }
/* Resultado marcado con las flechas del teclado (ver initGlobalSearch). */
.global-result-item.is-active { background: #e3ecfb; }
[data-theme="dark"] .global-result-item.is-active { background: var(--surface-off) !important; }
.global-result-name { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.global-result-meta { font-size: 11px; color: #888; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.global-tipo-tag {
    font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
    background: #e8eaf6; color: #3949ab;
}
.global-tipo-tag.tipo-ciudad { background: #e3f2fd; color: #1565c0; }
.global-tipo-tag.tipo-pueblo { background: #e8f5e9; color: #2e7d32; }
.global-tipo-tag.tipo-aldea { background: #fff3e0; color: #e65100; }
.global-tipo-tag.tipo-localidad { background: #fce4ec; color: #880e4f; }
.global-tipo-tag.tipo-comuna { background: #ede7f6; color: #4527a0; }
.global-search-group-label {
    font-size: 10px; font-weight: 700; color: #aaa; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 6px 12px 2px; background: #fafafa;
}
[data-theme="dark"] #globalSearchInput { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] #globalSearchResults { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .global-result-item:hover { background: var(--surface-off) !important; }
[data-theme="dark"] .global-result-name { color: var(--text) !important; }
[data-theme="dark"] .global-search-group-label { background: var(--surface-off) !important; }

.entity-search-no-results {
    padding: 14px 12px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* --- SPATIAL SELECTION TOOLS --- */
#btnToggleSelection.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 70, 127, 0.35);
}

#sel-toggle-wrapper {
    position: relative;
}

/* Antes salía disparado hacia la derecha (position:absolute) desde #btnToggleSelection, cuando
   ese botón vivía suelto en la barra principal. Ahora #btnToggleSelection vive dentro de
   #toolsPanel (un panel angosto, 220px) -- en vez de desbordarse hacia afuera, el grupo se
   despliega EN FLUJO debajo del botón, envolviendo en varias filas si hace falta. */
/* Lista vertical (no grilla de íconos): cada submodo ahora lleva etiqueta de texto visible
   (BUG 1 de la auditoría de usabilidad -- antes eran 6 íconos sueltos sin texto, reintroducía
   el problema de "íconos sin agrupar" ya resuelto en la barra principal). */
#selection-tools-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 8px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}

.sel-tool-btn.active {
    background: var(--magenta) !important;
    color: white !important;
    border-color: var(--magenta) !important;
    box-shadow: 0 2px 8px rgba(228, 0, 123, 0.4);
}

.sel-tool-btn.active .material-icons {
    color: white !important;
}

.buffer-popup {
    /* left/top los fija posicionarPopupBuffer (app.js), a la derecha del panel Herramientas. */
    position: fixed;
    left: 0;
    top: 0;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    display: none;
    width: 190px;
    padding: 12px 14px;
    border: 1px solid #ccc;
    z-index: 120;
    box-sizing: border-box;
}

.buffer-popup.show {
    display: block;
}

.buffer-popup label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 6px;
}

/* Selection Count Badge */
.sel-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--magenta);
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 5;
}

/* Aggregated details styling */
.agg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--magenta), #c2185b);
    color: white;
    border-radius: 6px;
    margin-bottom: 6px;
}

.agg-header .agg-count {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.agg-header .agg-desc {
    font-size: 11px;
    opacity: 0.9;
    text-align: right;
    line-height: 1.3;
}

.agg-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.agg-actions button {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    color: #555;
}

.agg-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0f4fa;
}

.agg-actions button.danger:hover {
    border-color: #e53935;
    color: #e53935;
    background: #ffebee;
}

[data-theme="dark"] .agg-actions button {
    background: var(--surface-off);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .agg-actions button:hover {
    background: var(--surface-2);
}

/* Tablet/Mobile Adjustments */
/* Tablet y celular (900 px o menos): los paneles pasan a ser cajones que se abren y cierran con
   sus pestañas (el izquierdo parte cerrado, ver init en app.js), el selector de temática ocupa el
   ancho bajo el cabezal y la leyenda se ajusta al ancho de la pantalla. */
@media (max-width: 900px) {
    #tabs-container {
        left: 10px;
        right: 10px;
        top: 8px;
        transform: none;
        max-width: none;
    }

    #left-panel {
        top: 54px;
        width: min(320px, calc(100vw - 44px));
    }

    #right-panel {
        top: 54px;
        width: min(300px, calc(100vw - 44px));
    }

    #legend {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }

    /* body #...: la regla base de #map-start-overlay está más abajo en este archivo. */
    body #map-start-overlay {
        left: 50%;
        width: calc(100% - 40px);
        max-width: 320px;
    }

    #dynamic-location-container {
        position: static;
        transform: none;
        flex: 1;
        min-width: 0;
        padding: 0 8px;
        overflow: hidden;
    }
    #dynamic-title, #dynamic-location {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Con el panel izquierdo abierto en pantalla angosta, la caja inicial quedaba encima del panel. */
@media (max-width: 900px) {
    body:has(#left-panel:not(.collapsed)) #map-start-overlay { display: none; }
}

@media (max-width: 600px) {
    .header-logos img { height: 28px !important; }
    #dynamic-title { font-size: 11px; }
    #dynamic-location { font-size: 10px; }
}

/* ============================================
   DATA TABLE PANEL
   ============================================ */
#data-table-panel {
    position: absolute;
    bottom: 0;
    left: 290px;
    right: 0;
    height: 260px;
    display: none;
    flex-direction: column;
    background: white;
    border-top: 2px solid var(--primary);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    /* Antes en 12: al ser un ancestro posicionado, fijaba el contexto de apilamiento de TODO
       lo que crece hacia arriba desde acá (ej. #csv-dropdown, que se abre sobre el propio botón
       CSV con bottom:calc(100% + 6px) y puede llegar hasta arriba de la pantalla) -- por debajo
       de #main-header (z-index:100) quedaba tapado/cortado por el header aunque el dropdown en
       sí tuviera z-index:500, porque ese 500 solo se compara contra otros hijos de este mismo
       panel, no contra el header. */
    z-index: 150;
    transition: left 0.3s cubic-bezier(0.25,0.8,0.25,1),
                right 0.3s cubic-bezier(0.25,0.8,0.25,1);
}

#data-table-panel.table-fullwidth {
    left: 0;
}

#data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    cursor: default;
    overflow: visible;
}

#data-table-container {
    flex: 1;
    overflow: auto;
}

/* Nota de símbolos bajo la tabla: * anonimizado, - no aplica o sin datos censales */
#data-table-nota {
    flex-shrink: 0;
    padding: 4px 14px;
    font-size: 11px;
    color: #666;
    border-top: 1px solid #eee;
}

#data-table-panel {
    --table-font-size: 11px;
}

#data-table {
    border-collapse: collapse;
    font-size: var(--table-font-size);
    width: 100%;
    min-width: max-content;
}

#data-table th {
    position: sticky;
    top: 0;
    background: #f0f4f8;
    border: 1px solid #dde3ea;
    padding: 6px 10px;
    font-size: calc(var(--table-font-size) - 1px);
    font-weight: 700;
    color: var(--primary);
    text-align: left;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    z-index: 1;
}

#data-table th.geo-col {
    background: #e8f0fe;
}

#data-table th:hover {
    background: #d4e2f4;
}

#data-table td {
    border: 1px solid #f0f0f0;
    padding: 5px 10px;
    white-space: nowrap;
    color: #333;
}

#data-table td.geo-col {
    color: #555;
}

#data-table tbody tr:nth-child(even) td {
    background: #fafafa;
}

#data-table tbody tr:hover td {
    background: rgba(13,109,138,0.06);
}
#data-table tbody tr {
    cursor: pointer;
}
#data-table tbody tr.table-row-selected td {
    background: rgba(13,109,138,0.18) !important;
    box-shadow: inset 2px 0 0 var(--primary, #0d6d8a);
}

/* ============================================
   REUSABLE CLASSES (Details Panel)
   ============================================ */

/* Divider horizontal */
.divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/* Placeholder state for details panel */
.details-placeholder {
    text-align: center;
    color: var(--text-muted, #999);
    margin-top: 50px;
}

.details-placeholder .material-icons {
    font-size: 48px;
}

/* ========================================================================
   DARK MODE OVERRIDES (Applied when data-theme="dark" is on <html>)
   ======================================================================== */
[data-theme="dark"] body,
[data-theme="dark"] {
    background: var(--bg);
    color: var(--text);
}
[data-theme="dark"] #main-header {
    background: var(--surface-off) !important;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] #left-panel,
[data-theme="dark"] #right-panel,
[data-theme="dark"] .control-group {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .panel-header {
    background: var(--surface-off);
    border-top-color: var(--border);
    border-bottom-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .control-label {
    color: var(--text);
}
[data-theme="dark"] select,
[data-theme="dark"] input {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] select:focus,
[data-theme="dark"] input[type="range"]:focus {
    background: var(--surface) !important;
}
[data-theme="dark"] select option {
    background: var(--surface-off);
    color: var(--text);
}

[data-theme="dark"] .checkbox-list {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .comuna-search-wrapper {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .comuna-search-wrapper input {
    color: var(--text) !important;
}

[data-theme="dark"] .checkbox-item {
    color: var(--text) !important;
}

[data-theme="dark"] .checkbox-item:hover {
    background: rgba(255,255,255,0.07) !important;
}

[data-theme="dark"] .checkbox-item.is-checked {
    background: rgba(29,51,107,0.35) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .radio-list-wrapper {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .radio-item {
    border-bottom-color: var(--divider) !important;
    color: var(--text-muted);
}
[data-theme="dark"] .radio-item:hover {
    background: var(--surface-off) !important;
}
[data-theme="dark"] .radio-item.selected {
    background: var(--surface-2) !important;
}
[data-theme="dark"] .radio-item.selected label {
    color: var(--primary) !important;
}
[data-theme="dark"] .calc-btn,
[data-theme="dark"] .area-btn {
    background: var(--surface-off);
    border-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .area-btn.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-hover);
}
[data-theme="dark"] .calc-btn.active {
    background: #0072A6;
    border-color: #0072A6;
    color: white;
}
[data-theme="dark"] .viz-toggle {
    background: var(--surface-off);
    border-color: var(--border);
}
[data-theme="dark"] .viz-btn {
    color: var(--text-muted);
}
[data-theme="dark"] .viz-btn.active {
    background: #0072A6;
    color: #fff;
}
[data-theme="dark"] .maplibregl-popup-content,
[data-theme="dark"] .maplibregl-ctrl-group,
[data-theme="dark"] .maplibregl-ctrl-group button {
    background: var(--surface-off) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-compass .maplibregl-ctrl-icon {
    filter: invert(0.85) !important;
}
[data-theme="dark"] #legend,
[data-theme="dark"] #calcModeContainer.legend-integrated {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .legend-hero-number,
[data-theme="dark"] .legend-hero-desc,
[data-theme="dark"] .legend-calc-label {
    color: var(--text) !important;
}
[data-theme="dark"] .legend-color-bar {
    background: var(--surface-off) !important;
}
[data-theme="dark"] .legend-table-switch {
    background: var(--surface-off) !important;
    border-color: #000 !important;
}
[data-theme="dark"] .legend-table-btn {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .legend-table-btn.active {
    background: #0072A6 !important;
    color: #fff !important;
}
[data-theme="dark"] .stat-card {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .stat-card .stat-label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--divider) !important;
}
/* --- Dark mode: Tabla de datos --- */
[data-theme="dark"] #data-table-panel {
    background: var(--surface);
    border-top-color: var(--primary);
}
[data-theme="dark"] #data-table-header {
    background: var(--surface-off);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] #data-table-nota {
    color: var(--text-muted, #aaa);
    border-top-color: var(--border);
}
[data-theme="dark"] #data-table th {
    background: var(--surface-off);
    border-color: var(--border);
    color: var(--primary);
}
[data-theme="dark"] #data-table th.geo-col {
    background: var(--surface-2, #22263a);
}
[data-theme="dark"] #data-table th:hover {
    background: var(--surface-2, #22263a);
}
[data-theme="dark"] #data-table td {
    border-color: var(--divider);
    color: var(--text);
}
[data-theme="dark"] #data-table tbody tr:nth-child(even) td {
    background: var(--surface-off);
}
[data-theme="dark"] #data-table tbody tr:hover td {
    background: var(--primary-light, rgba(13,109,138,0.15));
}
[data-theme="dark"] #data-table tbody tr.table-row-selected td {
    background: rgba(13,109,138,0.32) !important;
    box-shadow: inset 2px 0 0 var(--primary, #0d6d8a);
}

/* --- Dark mode: Radio list (Variable a mapear) --- */
[data-theme="dark"] .radio-list-wrapper {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .radio-item {
    border-bottom-color: var(--divider) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .radio-item label {
    color: var(--text) !important;
}
[data-theme="dark"] .radio-item:hover {
    background: var(--surface-2, #22263a) !important;
}
[data-theme="dark"] .radio-item.selected {
    background: rgba(58,176,212,0.12) !important;
}
[data-theme="dark"] .radio-item.selected label {
    color: var(--primary) !important;
}

/* --- Dark mode: Marcadores y etiquetas de leyenda --- */
[data-theme="dark"] #legendMarkerHover,
[data-theme="dark"] .legend-marker.hover {
    border-top-color: #ffffff !important;
}
[data-theme="dark"] #legendMarkerSelected,
[data-theme="dark"] .legend-marker.selected {
    border-top-color: #ffffff !important;
}
[data-theme="dark"] #legendMarkerSelected::after,
[data-theme="dark"] .legend-marker.selected::after {
    border-top-color: var(--surface) !important;
}
[data-theme="dark"] .legend-marker-value {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .legend-axis {
    color: var(--text-muted) !important;
}
/* Los números del eje (0, quiebres, máximo) se generan con color:#444 inline (updateChoropleth
   en app.js) — un color por elemento siempre gana sobre lo heredado del contenedor padre, así
   que hacía falta apuntar directo a los spans (con !important, la única forma de vencer un
   estilo inline) o quedaban casi invisibles sobre el fondo oscuro de la leyenda. */
[data-theme="dark"] .legend-axis span {
    color: var(--text) !important;
}

/* --- Dark mode: Herramientas flotantes --- */
[data-theme="dark"] .tool-btn {
    background: var(--surface-off);
    border-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .tool-btn:hover {
    background: var(--surface-2, #22263a);
    color: var(--primary);
}
[data-theme="dark"] .toggle-left-btn,
[data-theme="dark"] .toggle-tab-btn {
    background: var(--surface-off);
    border-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .basemap-menu,
[data-theme="dark"] .opacity-popup,
[data-theme="dark"] .buffer-popup,
[data-theme="dark"] .palette-popup {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .palette-option {
    border-top-color: var(--divider);
    color: var(--text-muted);
}
[data-theme="dark"] .palette-option:hover,
[data-theme="dark"] .palette-option.active {
    background: var(--surface-2, #22263a);
    color: var(--text);
}
[data-theme="dark"] .png-export-option {
    border-top-color: var(--divider);
    color: var(--text-muted);
}
[data-theme="dark"] .png-export-option:hover {
    background: var(--surface-2, #22263a);
    color: var(--text);
}
[data-theme="dark"] .palette-popup-title {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .basemap-option {
    border-bottom-color: var(--divider);
    color: var(--text-muted);
}
[data-theme="dark"] .basemap-option:hover,
[data-theme="dark"] .basemap-option.active {
    background: var(--surface-2, #22263a);
    color: var(--text);
}

/* --- Dark mode: Buscador indicadores --- */
[data-theme="dark"] #indicatorSearch {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] #searchClearBtn {
    color: var(--text-muted) !important;
}

/* --- Dark mode: Panel de contexto geográfico --- */
[data-theme="dark"] #geoContextPanel > div {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] #geoContextPanel [style*="background:var(--surface-off"] {
    background: var(--surface-2, #20242e) !important;
}
[data-theme="dark"] #geoContextPanel span[style*="color:#777"] {
    color: var(--text) !important;
}
[data-theme="dark"] #geoContextPanel span[style*="color:#aaa"] {
    color: var(--text-muted) !important;
}
/* Título "Contexto geo." y valores en azul oscuro (#1565c0): ilegibles sobre fondo oscuro. Se
   usa el mismo tono de los valores de los indicadores del panel. */
[data-theme="dark"] #geoContextPanel span[style*="color:#1565c0"] {
    color: var(--primary) !important;
}
[data-theme="dark"] #geoContextPanel span[style*="background:#1565c0"] {
    background: var(--primary) !important;
}

/* --- Dark mode: Botón descargar CSV --- */
[data-theme="dark"] .btn-download {
    background: var(--primary) !important;
    color: white !important;
}

/* --- Dark mode: Textos panel derecho (clases y estilos inline hardcodeados) --- */
[data-theme="dark"] .feature-subtitle,
[data-theme="dark"] .stat-label,
[data-theme="dark"] #details-content [style*="color: #333"],
[data-theme="dark"] #details-content [style*="color:#333"],
[data-theme="dark"] #details-content [style*="color: #444"],
[data-theme="dark"] #details-content [style*="color:#444"],
[data-theme="dark"] #details-content [style*="color: #555"],
[data-theme="dark"] #details-content [style*="color:#555"],
[data-theme="dark"] #details-content [style*="color: #666"],
[data-theme="dark"] #details-content [style*="color:#666"],
[data-theme="dark"] #details-content [style*="color: #777"],
[data-theme="dark"] #details-content [style*="color:#777"],
[data-theme="dark"] #details-content [style*="color: #888"],
[data-theme="dark"] #details-content [style*="color:#888"],
[data-theme="dark"] #details-content [style*="color: #999"],
[data-theme="dark"] #details-content [style*="color:#999"],
[data-theme="dark"] #details-content [style*="color: #9e9e9e"],
[data-theme="dark"] #details-content [style*="color:#9e9e9e"] {
    color: var(--text) !important;
}

/* --- Tipo de Área compacto (Manzanas Entidades) --- */
#areaFilterContainer {
    margin-bottom: 8px;
}
#areaFilterContainer .control-label {
    font-size: 10px;
    margin-bottom: 2px;
}
#areaFilterContainer .area-filter-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 3px;
}
#areaFilterContainer .area-btn {
    padding: 3px 4px;
    font-size: 10px;
    border-radius: 12px;
}

/* ============================================================
   OVERLAY CARGA DE CAPA (map-loading-overlay)
   ============================================================ */
#map-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.map-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    color: #444;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.map-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid #ddd;
    border-top-color: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    animation: mapSpinAnim 0.7s linear infinite;
}

@keyframes mapSpinAnim {
    to { transform: rotate(360deg); }
}

[data-theme="dark"] #map-loading-overlay {
    background: rgba(18, 24, 40, 0.78);
}

[data-theme="dark"] .map-loading-box {
    background: #1e2535;
    color: #ccc;
    border-color: #333;
}

[data-theme="dark"] .map-loading-spinner {
    border-color: #444;
    border-top-color: var(--cyan);
}

/* ============================================================
   OVERLAY INSTRUCCIÓN INICIAL (map-start-overlay)
   ============================================================ */
#map-start-overlay {
    position: absolute;
    top: 50%;
    left: calc(290px + (100% - 290px) / 2);
    transform: translate(-50%, -50%);
    z-index: 200;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0,0,0,0.07);
    max-width: 300px;
    width: calc(100% - 420px);
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
}
.mso-title {
    font-weight: 700;
    font-size: 13px;
    color: #222;
    margin-bottom: 8px;
    letter-spacing: 0.1px;
}
.mso-steps {
    text-align: left;
    font-size: 12px;
    color: #555;
    line-height: 1.45;
    margin: 0;
}
.mso-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.mso-step + .mso-step {
    margin-top: 7px;
}
.mso-step-text {
    flex: 1;
}
.mso-badge {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}
.mso-badge svg {
    width: 12px;
    height: 12px;
}
.mso-tema {
    color: #E4007B;
    font-weight: var(--weight-semibold);
}
.mso-indicador {
    color: var(--primary);
}
.mso-eg {
    color: var(--text-muted, #999);
    font-size: 11px;
}

/* Estado neutro del botón de temática (sin tab activa) */
.dropdown-toggle--neutral {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    border: 1.5px solid #E4007B !important;
    color: #E4007B !important;
}
.dropdown-toggle--neutral:hover {
    background: rgba(255, 255, 255, 0.32) !important;
}

/* Dark mode */
[data-theme="dark"] #map-start-overlay {
    background: rgba(26, 29, 36, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .mso-title {
    color: #e5e7eb;
}
[data-theme="dark"] .mso-steps {
    color: #9ca3af;
}
[data-theme="dark"] .mso-indicador {
    color: #3ab0d4;
}

/* ============================================================
   ULTRA-COMPACTACIÓN GLOBAL (overrides definitivos)
   ============================================================ */

/* Íconos globales */
.material-icons {
    font-size: 16px !important;
}
#map-tools .material-icons,
.panel-header .material-icons,
.tool-btn .material-icons {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

/* Botones herramientas flotantes */
.tool-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
}

/* Botón header (Tutorial) */
#btnHelp {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    margin-top: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}
#btnHelp .material-icons {
    font-size: 14px !important;
}

/* Temáticas - tab items */
.tab-dropdown-item {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 6px !important;
}
.tab-dropdown-item .material-icons {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
}
.tab-search-btn {
    height: 26px !important;
    width: 26px !important;
}
.tab-search-btn .material-icons {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
}

/* ===================================================
   CONTROL DE SCROLL DEL PANEL IZQUIERDO
   Una sola zona de scroll por sección para eliminar
   el problema de múltiples scrollbars anidados.
   =================================================== */

/* Sección Navegador: nunca se achica ni tiene scroll propio -- el único scroll permitido en el
   panel izquierdo es el de la lista de indicadores ("Variable a representar"). Si Región/Comuna
   suman mucho contenido, esta sección crece a su alto natural completo y es "Variable a
   representar" (flex:1, ver más abajo) la que cede el espacio que haga falta. */
#nav-panel-content {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Sección Variable: flex column para que el radio-list llene el espacio.
   flex:1 (antes ausente) — sin esto, esta sección solo tomaba su alto natural dentro de
   #left-panel-scroll y el max-height:45vh de .radio-list-wrapper más abajo terminaba
   determinando su tamaño de forma aislada, sin relación con el espacio real disponible.
   Con Región/Comuna + buscador + esta sección sumando más que la altura visible real
   (que se reduce con el zoom del navegador o con la barra de tareas de Windows visible),
   el sobrante quedaba en el scroll de #left-panel-scroll — un scroll "de afuera" fácil de
   no notar mientras el mouse está sobre el scroll propio (más chico) del radio-list, dejando
   la sensación de que la caja de indicadores está cortada sin remedio. Con flex:1 esta
   sección siempre ocupa exactamente el espacio que sobra del panel, así el único scroll que
   hace falta usar es el propio del radio-list. */
#var-panel-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 6px !important;
}

/* Eslabón que faltaba en la cadena de flex: #var-indicator-group vive dentro de
   #univariate-picker (buscador + lista), un <div> plano sin ninguna regla propia — su
   flex:1 no tenía ningún efecto porque solo funciona si el padre DIRECTO es un contenedor
   flex. Sin este puente, la altura de la lista dependía por completo del max-height:45vh de
   .radio-list-wrapper (ver más abajo) en vez del espacio real disponible. */
#univariate-picker {
    /* display SIN !important a propósito: app.js alterna esto a 'none' con estilo inline al
       entrar a modo "Comparar indicadores" — con !important acá, esa regla del stylesheet le
       ganaba al inline display:none de JS y la caja de "Ver un indicador" (buscador + lista)
       quedaba visible y superpuesta encima del panel de comparaciones. app.js pone 'flex'
       (no 'block') al volver a mostrarlo, así el layout de abajo sigue funcionando igual. */
    display: flex;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* El control-group que contiene el radio-list crece para llenar el espacio */
#var-indicator-group {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* El radio-list ocupa el espacio disponible del control-group. Antes tenía además un techo
   fijo (max-height:45vh) para forzar su propio scroll sin depender de que algo de afuera la
   apretara — pero un techo fijo en vh no tiene relación con el espacio REAL disponible (que
   cambia con el zoom del navegador, el alto de la ventana, o la barra de tareas de Windows):
   podía ser más chico que el espacio real (dejando espacio en blanco abajo) o más grande
   (quedando cortado, con el sobrante escondido en el scroll de #left-panel-scroll). Ahora que
   #var-panel-content tiene flex:1 y de verdad ocupa el espacio sobrante del panel, este
   flex:1 ya se ajusta solo al alto real disponible — el min-height sigue de piso para que
   nunca quede ilegiblemente chico. */
#var-panel-content .radio-list-wrapper {
    flex: 1 !important;
    min-height: 80px !important;
    overflow-y: auto !important;
}

/* ===================================================
   SCROLLBARS DELGADOS Y DISCRETOS
   =================================================== */
.checkbox-list::-webkit-scrollbar,
.radio-list-wrapper::-webkit-scrollbar,
#nav-panel-content::-webkit-scrollbar,
#var-panel-content::-webkit-scrollbar,
#comparisonGroups::-webkit-scrollbar {
    width: 4px;
}
.checkbox-list::-webkit-scrollbar-track,
.radio-list-wrapper::-webkit-scrollbar-track,
#nav-panel-content::-webkit-scrollbar-track,
#var-panel-content::-webkit-scrollbar-track,
#comparisonGroups::-webkit-scrollbar-track {
    background: transparent;
}
/* Mismo estilo delgado y discreto en las dos listas ("Ver un indicador" y "Comparar
   indicadores") -- sin esto, #comparisonGroups queda con el scrollbar ancho por defecto del
   navegador en vez de coincidir con el resto del panel. */
.checkbox-list::-webkit-scrollbar-thumb,
.radio-list-wrapper::-webkit-scrollbar-thumb,
#nav-panel-content::-webkit-scrollbar-thumb,
#var-panel-content::-webkit-scrollbar-thumb,
#comparisonGroups::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
}
.checkbox-list::-webkit-scrollbar-thumb:hover,
.radio-list-wrapper::-webkit-scrollbar-thumb:hover,
#comparisonGroups::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .checkbox-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .radio-list-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] #nav-panel-content::-webkit-scrollbar-thumb,
[data-theme="dark"] #var-panel-content::-webkit-scrollbar-thumb,
[data-theme="dark"] #comparisonGroups::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .checkbox-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .radio-list-wrapper::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #comparisonGroups::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.36);
}

/* Panel izquierdo - listas */
/* box-sizing:border-box es necesario acá: sin esto, el padding se suma al 100% de ancho que ya
   ocupa cada fila (hijo de un contenedor flex en columna) en vez de quedar incluido en él, y el
   texto cercano al borde derecho queda tapado por el scroll o recortado. */
.checkbox-item {
    font-size: 11px !important;
    padding: 5px 8px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
.radio-item {
    padding: 5px 8px !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}
.radio-item input[type="radio"] {
    margin-top: 2px !important;
}
.radio-item label {
    font-size: 11px !important;
    line-height: 1.4 !important;
}
.control-group {
    margin-bottom: 16px !important;
}

/* Panel derecho - tarjetas de datos */
.stat-card {
    padding: 4px 8px !important;
}
.stat-label {
    font-size: 11px !important;
}
.stat-val {
    font-size: 14px !important;
}

/* Acciones multi-selección */
.agg-actions button {
    padding: 5px 8px !important;
    font-size: 11px !important;
}

/* Widget de leyenda / rangos */
#legend-inner {
    gap: 8px !important;
}
#calcModeContainer.legend-integrated .calc-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
}

/* ============================================================
   SELECTOR DE TEMÁTICA — Dimensión → Subdimensión → Temática
   (Insumos/Tabulados/Variables.xlsx, hoja "Dimensiones")
   ============================================================ */

/* El dropdown pasa de crecer horizontalmente a un panel flotante vertical,
   porque ahora contiene 2 niveles apilados (Dimensión y Subdimensión/Temática)
   en vez de una sola fila de chips. */
#tabs-container.expanded {
    overflow: visible;
}
.tabs-expand-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
#tabs-container.expanded .tabs-expand-menu {
    display: flex;
    position: absolute;
    top: 40px;
    /* Centrado respecto al propio #tabs-container (que ya está centrado en pantalla) en vez
       de left:0 — con left:0 el panel (más ancho que la píldora) crecía solo hacia la derecha
       desde el borde izquierdo del trigger, quedando visualmente descentrado. */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 270px;
    max-width: min(340px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border: 1px solid #e0e0e0;
    white-space: normal;
}

/* --- Nivel 1: píldoras de Dimensión --- */
.dimension-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.dimension-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f5f6f8;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dimension-btn:hover {
    background: #eef2f7;
}
.dimension-btn.active {
    background: #0072A6;
    border-color: #0072A6;
    color: #fff;
}

/* --- Nivel 2/3: Subdimensión / Temática --- */
.subdim-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}
.subdim-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.subdim-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    padding: 0 2px 4px;
    border-bottom: 1px dashed #e0e0e0;
    margin-bottom: 2px;
}
.tematica-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Fila completa alineada a la izquierda (antes: píldora centrada de ancho variable) */
.tab-dropdown-item {
    width: 100% !important;
    box-sizing: border-box;
    justify-content: flex-start !important;
    text-align: left;
    min-height: 30px !important;
    height: auto !important;
    padding: 7px 10px !important;
    line-height: 1.3;
}
.tab-dropdown-item.active {
    background: #f0f4fa;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}
/* Temática sin comparaciones predefinidas en modo "Comparar indicadores" — se muestra
   atenuada, NUNCA oculta, para que el árbol se vea igual en ambos modos (ver renderTabs()). */
.tab-dropdown-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* !important en este bloque: la regla clara #tabs-container.expanded .tabs-expand-menu
   (id + 2 clases) tiene más especificidad que un selector [data-theme="dark"] + 1 clase,
   así que sin !important el modo oscuro nunca ganaba y la caja quedaba blanca igual. */
[data-theme="dark"] .tabs-expand-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .dimension-btn {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] .dimension-btn:hover {
    background: var(--surface-2) !important;
}
/* La regla genérica de arriba (!important) también pisaba el estado activo — se restaura
   el mismo celeste que usa el modo claro. */
[data-theme="dark"] .dimension-btn.active {
    background: #0072A6 !important;
    border-color: #0072A6 !important;
    color: #fff !important;
}
[data-theme="dark"] .subdim-accordion {
    border-top-color: var(--border) !important;
}
[data-theme="dark"] .subdim-header {
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .tab-dropdown-item {
    background: var(--surface-off) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .tab-dropdown-item:hover {
    background-color: var(--surface-2) !important;
    border-color: var(--text-faint) !important;
}
[data-theme="dark"] .tab-dropdown-item .material-icons {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .tab-dropdown-item:hover .material-icons {
    color: var(--text) !important;
}
[data-theme="dark"] .tab-dropdown-item.active {
    background: rgba(58, 176, 212, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* La caja de instrucción inicial puede quedar tapada por el acordeón (ahora más alto
   por la lista vertical) — se oculta mientras el selector de temática está abierto. */
#tabs-container.expanded ~ #map-start-overlay {
    display: none;
}

/* ============================================
   FICHA TERRITORIAL
   Se abre desde el botón "Crear ficha territorial", al pie de #right-panel (ver
   .panel-footer-cta más abajo).
   ============================================ */
:root {
    --territorial-panel-width: 440px;
}

/* Los controles nativos de MapLibre (zoom +/-, brújula, ver map.addControl(...,'bottom-right')
   en app.js) viven en la esquina inferior derecha DEL MAPA, en un punto fijo que no se mueve
   solo cuando #right-panel se abre encima -- el panel (position:absolute, z-index más alto)
   los tapaba. Se corren hacia la izquierda el ancho exacto del panel abierto en cada uno de sus
   2 anchos posibles (el modo "expandido" no aplica: pasa a position:fixed centrado, ya no
   está pegado al borde derecho). */
.maplibregl-ctrl-bottom-right {
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Vista expandida (botón "Expandir ficha"): en vez de ensanchar el panel pegado al borde
   derecho (se sentía forzado, ocupando toda la pantalla de punta a punta), se convierte en una
   tarjeta centrada tipo modal, flotando sobre el fondo oscurecido de arriba. La combinación
   .active.right-panel--expanded (en vez de solo .right-panel--expanded) le da más especificidad
   que la regla base #right-panel.active { transform: translateX(0); }, así que gana sin
   depender del orden de aparición en el archivo ni de !important. */
#right-panel.active.right-panel--expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(1200px, 90vw);
    height: min(860px, 88vh);
    max-width: none;
    border-left: none;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    z-index: 210;
}

/* body.territorial-expanded-active (setTerritorialExpanded en app.js): oculta el resto de la
   interfaz flotante sobre el mapa. El fondo oscurecido ya las tapa visualmente, pero se ocultan
   igual para que no queden activas/clickeables por debajo. El panel izquierdo se colapsa aparte
   (vía su propia clase .collapsed, con su misma animación de siempre) desde setTerritorialExpanded,
   no acá. */
body.territorial-expanded-active #legend-wrapper,
body.territorial-expanded-active #map-tools,
body.territorial-expanded-active #measure-panel,
body.territorial-expanded-active #data-table-panel {
    display: none !important;
}

/* "Crear ficha territorial": franja al pie de #right-panel, de borde a borde y sin esquinas
   redondeadas (pedido explícito: recuadro que cubra el ancho del panel, no un botón píldora).
   Hijo directo del panel (flex column): queda fijo abajo aunque el contenido haga scroll. */
.panel-footer-cta {
    flex-shrink: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.panel-footer-cta:hover,
.panel-footer-cta:focus-visible {
    background: #00A1E9;
}
.panel-footer-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

@keyframes territorial-spin-anim {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.territorial-na {
    color: var(--text-muted, #9e9e9e);
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

@page {
    margin: 12mm;
}

@media print {
    /* html/body tienen overflow:hidden y height:100% para el layout normal de la app (mapa a
       pantalla completa). Al imprimir, #territorialPrintRoot pasa a position:static (ver arriba)
       y queda sujeto a ese overflow:hidden — el contenido se recorta a un solo "viewport" en vez
       de paginarse, y el PDF sale en blanco. Se libera acá, solo durante la impresión. */
    html,
body {
        overflow: visible !important;
        height: auto !important;
    }
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}


/* Selector de apariencia: solo íconos y discreto (herramienta básica, no compite con "Tutorial
   interactivo"). La opción activa con fondo blanco sólido e ícono azul; la otra, atenuada. */
.theme-switch {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    height: 24px;
    padding: 2px;
    gap: 1px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
}
.theme-switch button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.theme-switch button .material-icons { font-size: 14px; }
.theme-switch button:hover:not(.active) { color: rgba(255, 255, 255, 0.85); }
.theme-switch button.active { background: #ffffff; color: #1d2c5e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); cursor: default; }
.theme-switch button:focus-visible { outline: 2px solid #00A1E9; outline-offset: 1px; }
/* Bajo 820 px el texto del tutorial también se oculta: con ambos textos, el encabezado no alcanzaba. */
@media (max-width: 820px) {
    .btn-help-label { display: none; }
    #btnHelp { padding: 0 !important; width: 30px !important; justify-content: center; }
}

/* Panel izquierdo en pantallas bajas (notebook de 14" al 100%: ~650 px útiles). Al elegir una región
   aparece la lista de comunas y la sección "Variable a representar" se encogía hasta quedar bajo el
   borde inferior, sin forma de llegar a ella. Con un alto mínimo, el panel completo pasa a tener
   desplazamiento; y las listas de región/comuna se acortan un poco para que quepa más. */
/* !important: la regla base de #var-panel-content (más arriba) fija min-height:0 !important para
   que en pantallas grandes no aparezca un desplazamiento externo; esta va después y la reemplaza
   con un piso. En pantallas grandes nunca se alcanza (siempre sobra espacio). */
#var-panel-content { min-height: 220px !important; }
@media (max-height: 760px) {
    .checkbox-list { max-height: 72px; }
}

/* La caja "Zoom" (#debugZoomBox, creada en app.js) se oculta mientras hay abierto un panel de la
   barra de herramientas del mapa, para que no quede encima de su contenido. */
body:has(#map-tools .show) #debugZoomBox {
    visibility: hidden;
}

/* Los paneles de la barra de herramientas (Estilo del mapa, Herramientas) viven dentro de
   #left-panel, que comparte z-index con #legend-wrapper: la leyenda (más alta en el mapa
   comparado) los tapaba. Mientras hay uno abierto, el panel izquierdo pasa por encima. */
body:has(#map-tools .show) #left-panel {
    z-index: 12;
}

/* Dark mode: nivel geográfico fijado a mano (#auto-level-indicator.is-fixed). updateAutoLevelIndicator
   le asigna gris #666 en línea, que sobre el panel oscuro casi no se lee. */
[data-theme="dark"] #auto-level-indicator.is-fixed {
    background: var(--surface-off) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text) !important;
}

/* Dark mode: panel "Estilo del mapa" / "Herramientas". El contenedor quedaba blanco mientras sus
   secciones internas (Mapa base, Transparencia, Paleta) se oscurecían con borde propio. El panel
   completo toma el fondo oscuro y las secciones quedan integradas, sin fondo ni borde. */
[data-theme="dark"] .tools-panel {
    background: var(--surface-off);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text);
}
[data-theme="dark"] #mapStylePanel .basemap-menu,
[data-theme="dark"] #mapStylePanel .opacity-popup,
[data-theme="dark"] #mapStylePanel .palette-popup {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] .tools-panel-title {
    color: var(--text-muted);
}
[data-theme="dark"] .tools-panel-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tool-panel-btn {
    color: var(--text);
}
[data-theme="dark"] .tool-panel-btn .material-icons {
    color: var(--text-muted);
}
[data-theme="dark"] .tool-panel-btn:hover {
    background: var(--surface-2, #20242e);
}
[data-theme="dark"] .tool-panel-btn.active,
[data-theme="dark"] .tool-panel-btn.active .material-icons {
    color: var(--primary);
}

/* Caja al pasar el mouse sobre zonas censales y manzanas (_cajaHover en app.js). */
#mapHoverTip {
    position: absolute;
    z-index: 5;
    display: none;
    max-width: 300px;
    padding: 8px 10px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d5d9e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}
#mapHoverTip .mht-titulo { font-size: 13px; font-weight: 700; }
#mapHoverTip .mht-sub { color: #4b5563; }
#mapHoverTip .mht-cod { color: #6b7280; font-size: 11px; }
#mapHoverTip .mht-biv { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e5e7eb; display: grid; gap: 2px; }
#mapHoverTip .mht-fila { display: flex; justify-content: space-between; gap: 12px; }
#mapHoverTip .mht-valor { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mapHoverTip .mht-nivel { font-weight: 400; color: #6b7280; }
#mapHoverTip .mht-grupo { display: flex; align-items: center; margin-top: 2px; color: #4b5563; }
#mapHoverTip .mht-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
[data-theme="dark"] #mapHoverTip { background: #252931; color: #e5e7eb; border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] #mapHoverTip .mht-sub,
[data-theme="dark"] #mapHoverTip .mht-grupo { color: #cbd5e1; }
[data-theme="dark"] #mapHoverTip .mht-cod,
[data-theme="dark"] #mapHoverTip .mht-nivel { color: #9ca3af; }
[data-theme="dark"] #mapHoverTip .mht-biv { border-top-color: rgba(255, 255, 255, 0.12); }
#mapHoverTip .mht-cabecera {
    margin: -8px -10px 6px;
    padding: 6px 10px;
    background: #6b7280;
    color: #ffffff;
    border-radius: 6px 6px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
}
#mapHoverTip .mht-datos { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 1px; }
#mapHoverTip .mht-dato-nombre { color: #6b7280; }
#mapHoverTip .mht-dato-valor { font-weight: 600; text-align: right; }
[data-theme="dark"] #mapHoverTip .mht-cabecera { background: #4b5563; }
[data-theme="dark"] #mapHoverTip .mht-dato-nombre { color: #9ca3af; }

/* "i" informativa en la caja del valor del indicador (wireHeroInfo en app.js). */
.hero-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: #ffffff;
    color: #4b5563;
    font: italic 700 11px/16px Georgia, "Times New Roman", serif;
    text-align: center;
    cursor: help;
}
.hero-info-btn:hover,
.hero-info-btn:focus-visible {
    border-color: #4b5563;
    color: #1f2937;
    outline: none;
}
[data-theme="dark"] .hero-info-btn {
    background: #252931;
    border-color: #6b7280;
    color: #cbd5e1;
}
[data-theme="dark"] .hero-info-btn:hover,
[data-theme="dark"] .hero-info-btn:focus-visible {
    border-color: #cbd5e1;
    color: #ffffff;
}

/* Selector de unidad de la densidad (km² | ha) bajo la cifra de la caja de valores. */
.dens-unidad {
    display: inline-flex;
    margin: 6px 0 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}
.dens-unidad button {
    border: none;
    background: #ffffff;
    color: #4b5563;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}
.dens-unidad button + button { border-left: 1px solid #d1d5db; }
.dens-unidad button[aria-pressed="true"] { background: var(--primary); color: #ffffff; }
.dens-unidad button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.biv-unidad .dens-unidad { margin: 0; }

/* Filtro por distrito o zona: botones en el recuadro del panel derecho y aviso sobre el mapa. */
.filtro-sub-btn {
    margin-top: 5px;
    border: none;
    border-radius: 4px;
    background: #ffffff;
    color: #b0006a;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 8px;
    white-space: nowrap;
    cursor: pointer;
}
.filtro-sub-btn:hover { background: #ffe3f2; }
.filtro-sub-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Debajo del selector de temática (#tabs-container, arriba al centro del mapa). */
.filtro-sub-aviso {
    position: absolute;
    top: 62px;
    left: 290px;
    right: 0;
    z-index: 12;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
    transition: left 0.3s cubic-bezier(0.25,0.8,0.25,1), right 0.3s cubic-bezier(0.25,0.8,0.25,1);
}
.filtro-sub-aviso[hidden] { display: none; }
.filtro-sub-caja {
    pointer-events: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    max-width: 100%;
    background: #ffffff;
    color: #1f2937;
    border: 1.5px solid #000;
    border-radius: 20px;
    padding: 5px 6px 5px 14px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.filtro-sub-quitar {
    border: none;
    border-radius: 16px;
    background: #0072A6;
    color: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
}
.filtro-sub-quitar:hover { background: #005a84; }
.filtro-sub-quitar:focus-visible { outline: 2px solid #0072A6; outline-offset: 2px; }
[data-theme="dark"] .filtro-sub-caja { background: #252931; color: #e5e7eb; border-color: #6b7280; }
[data-theme="dark"] .dens-unidad { border-color: #4b5563; }
[data-theme="dark"] .dens-unidad button { background: #252931; color: #cbd5e1; }
[data-theme="dark"] .dens-unidad button + button { border-left-color: #4b5563; }
[data-theme="dark"] .dens-unidad button[aria-pressed="true"] { background: var(--primary); color: #0f172a; }

/* Menú de descarga CSV: temática activa y botón para desplegar el listado de temáticas. */
.csv-active-tema { padding: 0 14px; font-size: 12px; color: #374151; line-height: 1.4; }
.csv-add-temas {
    width: 100%;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #c9ced8;
    border-radius: 5px;
    color: #1D336B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.csv-add-temas:hover { background: #f3f5f9; }
[data-theme="dark"] .csv-active-tema { color: var(--text); }
[data-theme="dark"] .csv-add-temas { background: var(--surface-off); border-color: rgba(255, 255, 255, 0.2); color: var(--text); }
[data-theme="dark"] .csv-add-temas:hover { background: var(--surface-2, #20242e); }

/* Formatos admitidos de "Desde archivo" (misma caja que el texto informativo). */
/* "i" del buscador global y su ventana (ver initGlobalSearch en app.js). */
.search-info-btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: #ffffff;
    color: #4b5563;
    font: italic 700 11px/16px Georgia, "Times New Roman", serif;
    text-align: center;
    cursor: help;
}
.search-info-btn:hover,
.search-info-btn:focus-visible {
    border-color: #4b5563;
    color: #1f2937;
    outline: none;
}
[data-theme="dark"] .search-info-btn {
    background: #252931;
    border-color: #6b7280;
    color: #cbd5e1;
}
[data-theme="dark"] .search-info-btn:hover,
[data-theme="dark"] .search-info-btn:focus-visible {
    border-color: #cbd5e1;
    color: #ffffff;
}
.search-info-tip { max-width: 290px; pointer-events: auto; }
.search-info-tip b { display: block; margin-bottom: 3px; }
.search-info-tip b + div { margin-top: 0; }
.search-info-tip div + div { margin-top: 2px; }
.search-info-tip div + b { margin-top: 8px; }
.search-info-tip .sit-nota { margin-top: 8px; opacity: 0.8; }
.file-formats-tip { max-width: 270px; }
.file-formats-tip b { display: block; margin-bottom: 3px; }
.file-formats-tip div + div { margin-top: 2px; }
.file-formats-tip .fft-nota { margin-top: 6px; opacity: 0.8; }

/* Barra "Seleccione los elementos a exportar": conteo en vivo y botón Exportar deshabilitado
   mientras no hay elementos. */
.png-sel-count { font-weight: 600; white-space: nowrap; }
.png-sel-count:empty { display: none; }
.png-export-hint-banner button.png-export-confirm-yes:disabled { opacity: 0.45; cursor: not-allowed; }

/* Ventana inicial de condiciones de uso (initAvisoInicial en app.js). Se mantiene clara también en
   modo oscuro: es un texto normativo con el logo institucional a color. */
.aviso-inicial {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.6);
}
.aviso-inicial[hidden] { display: none; }
.aviso-inicial-caja {
    width: min(540px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 22px 16px;
    background: #ffffff;
    color: #1e3b7d;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    color-scheme: light;
}
.aviso-inicial-logo { display: block; width: 150px; max-width: 50%; margin: 0 auto 10px; }
.aviso-inicial-titulo {
    margin: 0 0 12px;
    text-align: center;
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 700;
    color: #1e3b7d;
}
.aviso-inicial-titulo span { display: block; font-size: 14px; font-weight: 600; }
.aviso-inicial-texto p {
    margin: 0 0 9px;
    font-size: 12px;
    line-height: 1.5;
    text-align: justify;
}
.aviso-inicial-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.aviso-inicial-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #1f2937; cursor: pointer; }
.aviso-inicial-check input { width: 15px; height: 15px; cursor: pointer; }
.aviso-inicial-boton {
    min-width: 100px;
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    background: #1e3b7d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.aviso-inicial-boton:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.aviso-inicial-boton:not(:disabled):hover { background: #172e63; }
.aviso-inicial-boton:focus-visible, .aviso-inicial-check input:focus-visible { outline: 2px solid #00A1E9; outline-offset: 2px; }
body.aviso-inicial-abierto { overflow: hidden; }

/* Leyenda en Manzanas - Entidades: muestra del achurado de los elementos sin base censal
   (MZ_BASE_CENSO = 0), el mismo patrón diagonal gris del mapa. */
.legend-hatch-note { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--text-muted, #4b5563); }
.legend-hatch-swatch { width: 18px; height: 11px; flex-shrink: 0; border: 1px solid rgba(70, 70, 70, 0.5); background: repeating-linear-gradient(-45deg, rgba(70, 70, 70, 0.82) 0 1px, transparent 1px 4px); }
/* Mapa comparado: mismo achurado sobre el gris de "sin datos", con el tamaño de su muestra anterior. */
.legend-hatch-swatch--biv { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background-color: #cccccc; }

/* Accesibilidad: foco visible en controles que tenían outline:none, y en los buscadores. */
.tab-search-btn:focus-visible, .dropdown-toggle:focus-visible { outline: 2px solid #0072A6; outline-offset: 2px; }
#varSearchInput:focus-visible, #globalSearchInput:focus-visible, #comunaSearchInput:focus-visible,
.omnisearch-input-wrap input:focus-visible { box-shadow: 0 0 0 2px rgba(0, 114, 166, 0.55); }

/* Enlace "Versión anterior" del encabezado (visualizador ArcGIS anterior). Texto discreto, sin
   competir con los botones; se oculta en pantallas angostas. */
.link-version-anterior {
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s, color 0.2s;
}
.link-version-anterior:hover,
.link-version-anterior:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    outline: none;
}
.link-version-anterior:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
@media (max-width: 900px) {
    .link-version-anterior { display: none; }
}