.section-description {
    font-size: var(--font-size-lg);
    color: var(--outlook-text-secondary);
    margin: 0;
}
.census-kpis-section {
    padding: var(--section-padding, var(--spacing-16)) 0;
    background: var(--outlook-bg-secondary);
}
.census-insights-section {
    padding: var(--section-padding, var(--spacing-16)) 0;
    background: var(--outlook-bg-primary);
}
.census-pathways-section {
    padding: var(--section-padding, var(--spacing-16)) 0;
    background: var(--outlook-bg-tertiary);
}
.pathways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-8);
}
.pathway-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--section-border, var(--outlook-border));
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
}
.pathway-card:hover {
    border-color: var(--palette-blue-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.pathway-icon-wrapper {
    padding: 2rem;
    text-align: center;
    background: linear-gradient(180deg, #fafafa 0%, white 100%);
}
.pathway-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-3);
}
.pathway-question {
    font-size: var(--font-size-md);
    font-style: italic;
    color: var(--palette-blue-primary);
    margin-bottom: var(--spacing-lg);
}
.pathway-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pathway-features li {
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}
.pathway-features i {
    color: var(--color-success);
    margin-top: var(--spacing-1);
}
.pathway-footer {
    padding: var(--spacing-lg) var(--spacing-8);
    background: var(--outlook-bg-secondary);
    border-top: 1px solid var(--section-border, var(--outlook-border));
}
.census-discover-section {
    padding: var(--section-padding, var(--spacing-16)) 0;
    background: var(--outlook-bg-primary);
}
.discover-card {
    background: linear-gradient(135deg, var(--outlook-bg-tertiary) 0%, var(--outlook-bg-primary) 100%);
    border: 2px solid var(--outlook-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-10);
}
.discover-header {
    text-align: center;
    margin-bottom: var(--spacing-10);
}
.discover-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
}
.discover-title i {
    color: var(--palette-blue-primary);
}
.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
.discover-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--outlook-bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-base);
}
.discover-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(calc(-1 * var(--spacing-1)));
}
.discover-icon {
    font-size: var(--font-size-lg);
    color: var(--color-success);
    margin-top: var(--spacing-1);
    flex-shrink: 0;
}
.discover-text {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-primary);
    line-height: 1.5;
}
.census-info-section {
    padding: var(--spacing-8) 0;
    background: var(--color-primary);
    color: var(--text-light);
}
.info-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-8);
}
.info-compact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.info-compact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--text-light-rgb, 255, 255, 255), 0.1);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    color: var(--palette-blue-primary);
}
.info-compact-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}
.info-compact-label {
    font-size: var(--font-size-compact);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .section-title {
        font-size: var(--font-size-2xl);
    }

    .section-description {
        font-size: var(--font-size-md);
    }

    .pathways-grid {
        grid-template-columns: 1fr;
    }

    .discover-grid {
        grid-template-columns: 1fr;
    }

    .info-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .pathway-title {
        font-size: var(--font-size-xl);
    }

    .discover-title {
        font-size: var(--font-size-2xl);
    }

    .info-compact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.census-kpis-section,
.census-insights-section,
.census-pathways-section,
.census-discover-section {
    animation: fadeInUp 0.6s ease;
}
.census-insights-section {
    animation-delay: 0.1s;
}
.census-pathways-section {
    animation-delay: 0.2s;
}
.census-discover-section {
    animation-delay: 0.3s;
}
@media print {
    .pathway-footer,
    .census-info-section {
        display: none;
    }

    .pathway-card,
    .discover-card {
        break-inside: avoid;
        box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .census-kpis-section,
    .census-insights-section,
    .census-pathways-section,
    .census-discover-section,
    .pathway-card,
    .discover-item,
    .btn-pathway {
        animation: none;
        transition: none;
    }
}
@media (prefers-contrast: high) {
    .pathway-card {
        border-width: 2px;
    }

    .section-title,
    .pathway-title {
        font-weight: 800;
    }
}
.census-topbar {
    background: var(--outlook-bg-primary);
    border-bottom: 1px solid var(--outlook-border-light);
    padding: var(--spacing-3) var(--spacing-4);
    position: sticky;
    /* El offset es la altura de la barra principal. Antes era 0 porque .binas-topbar no
       llegaba a quedar fija (su contenedor .binas-nav-stack medía lo mismo que ella y el
       rango de sticky era cero); ahora el stack es sticky de verdad, así que sin offset
       esta sub-barra se metería debajo de la barra principal, que va en z-index 1060. */
    top: var(--binas-topbar-height, 4rem);
    z-index: 100;
    transition: box-shadow 0.2s ease;
}
/* Por debajo de 992px la barra de escritorio no se muestra y la móvil declara
   `min-height: 48px` (ver binas-navbar.css), así que el offset es ese. */
@media (max-width: 991.98px) {
    .census-topbar {
        top: 48px;
    }
}
.census-topbar.scrolled {
    box-shadow: var(--outlook-shadow-elevated);
}
.topbar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    max-width: 1400px;
    margin: 0 auto;
}
.section-nav-horizontal {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--spacing-1) 0;
}
.section-nav-horizontal::-webkit-scrollbar {
    display: none;
}
.section-pill {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-secondary);
    background: var(--outlook-bg-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-all);
}
.section-pill:hover {
    background: var(--outlook-bg-hover);
    color: var(--outlook-text-primary);
}
.section-pill.active {
    background: var(--palette-blue-primary);
    color: var(--text-light);
    border-color: var(--palette-blue-primary);
}
.section-pill i {
    font-size: var(--font-size-md);
}
.topbar-actions {
    display: flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
}
.btn-toggle-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-secondary);
    background: var(--outlook-bg-secondary);
    border: 1px solid var(--outlook-border);
    cursor: pointer;
    transition: var(--transition-all);
    flex-shrink: 0;
}
.btn-toggle-filters:hover {
    background: var(--outlook-bg-hover);
    border-color: var(--outlook-border-hover);
}
.btn-toggle-filters.active {
    background: var(--oklch-blue-bg);
    color: var(--palette-blue-primary);
    border-color: var(--palette-blue-primary);
}
.topbar-filters {
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    padding-top: var(--spacing-4);
    opacity: 1;
    max-width: 1400px;
    margin: 0 auto;
}
.topbar-filters.collapsed {
    max-height: 0;
    padding-top: 0;
    opacity: 0;
}
.topbar-filters.expanded {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}
.filters-grid {
    display: grid;
    /* 4 filtros reales: Provincia, Departamento, NBI, Zona.
       El boton Actualizar vive en .topbar-nav, no en esta grilla. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.filter-item {
    display: flex;
    flex-direction: column;
}
.filter-item .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-secondary);
    margin-bottom: var(--spacing-1);
}
.filter-item .form-select {
    font-size: var(--font-size-base);
    padding: var(--spacing-2) var(--spacing-3);
    border-color: var(--outlook-border);
    border-radius: var(--radius-md);
}
.filter-item .form-select:focus {
    border-color: var(--palette-blue-primary);
    box-shadow: 0 0 0 2px var(--oklch-blue-bg);
}
/* Dropdowns multi-seleccion (dxTagBox con checkboxes): mismo aspecto que .form-select */
.filter-item .census-filter-tagbox.dx-texteditor {
    font-size: var(--font-size-base);
    border-color: var(--outlook-border);
    border-radius: var(--radius-md);
    background-color: var(--outlook-bg-primary);
}
.filter-item .census-filter-tagbox.dx-state-focused {
    border-color: var(--palette-blue-primary);
    box-shadow: 0 0 0 2px var(--oklch-blue-bg);
}
.filter-item .census-filter-tagbox.dx-state-disabled {
    opacity: 0.6;
}
.filter-item .census-filter-tagbox .dx-tag-content {
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}
.filter-item .filter-hint {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    margin-top: var(--spacing-1);
}
/* Variante standalone del hint, sin requerir el ancestro .filter-item — usada en EphAnalisis/
   EphSeguimiento para un aviso general debajo de la grilla de filtros (ej. Región/Decil), no atado
   a un único filtro puntual. */
.filter-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
}
.filter-actions {
    display: flex;
    align-items: flex-end;
}
.filter-actions .btn {
    font-size: var(--font-size-base);
    padding: var(--spacing-2) var(--spacing-4);
}
/* Toggle de fuente de datos (Censo 2022 / Proyectado con EPH) del tablero unificado
   (Census/Dashboard/Index). Reusa el lenguaje visual de .section-pill en vez de un
   <input type="checkbox">/form-switch nativo, para sentirse consistente con los pills de
   navegación del mismo topbar — decisión de UI documentada en Dashboard/Index.cshtml. */
.source-toggle {
    display: inline-flex;
    gap: var(--spacing-1);
    padding: var(--spacing-1);
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-pill);
    width: fit-content;
}
.source-toggle-btn {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--outlook-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-all);
}
.source-toggle-btn:hover {
    color: var(--outlook-text-primary);
}
.source-toggle-btn.active {
    background: var(--palette-blue-primary);
    color: var(--text-light);
}
/* Franja de aviso del modo Proyectado — mismo rol que .proy-banner de eph-index.css (no cargada
   en este bundle), con tono de advertencia para que nunca se confunda con el Censo 2022 real. */
.dashboard-mode-banner {
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    background: var(--semantic-warning-light);
    color: var(--semantic-warning-text);
    border: 1px solid var(--semantic-warning);
}
/* Badges compactas para las celdas de las matrices de cruce EPH proyectado, reusadas por
   eph-cross-pivots.js tanto acá como en EphProyeccion/_EphDashboardPanels.cshtml. */
.eph-cross-badge {
    display: inline-block;
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
    border-radius: 99px;
    white-space: nowrap;
}
.eph-cross-badge--info { background: var(--semantic-info-light); color: var(--semantic-info-text); }
.eph-cross-badge--warning { background: var(--semantic-warning-light); color: var(--semantic-warning-text); }
.eph-cross-badge--danger { background: var(--semantic-danger-light); color: var(--semantic-danger-text); }
.census-dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5) var(--spacing-4);
}
.census-main {
    width: 100%;
}
.panel-section {
    /* Ahora quedan fijas las DOS: la barra principal (.binas-nav-stack es sticky) y
       .census-topbar debajo. El offset de anclas suma las dos alturas — la de la
       sub-barra la publica el JS del dashboard en --topbar-height al expandir o
       colapsar los filtros. */
    scroll-margin-top: calc(var(--binas-topbar-height, 4rem) + var(--topbar-height, 96px) + var(--spacing-4));
    margin-bottom: var(--spacing-8);
    animation: fadeInUp 0.4s ease-out both;
}
.panel-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--outlook-border-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.panel-title i {
    color: var(--palette-blue-primary);
    font-size: 1.25rem;
}
.kpi-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.kpi-modern-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--outlook-shadow-card);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.kpi-modern-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.kpi-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
}
.kpi-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-card-icon.icon-hogares {
    background: linear-gradient(135deg, #10b981, var(--emerald-600));
}
.kpi-card-icon.icon-personas {
    background: linear-gradient(135deg, var(--tw-violet-500), #7c3aed);
}
.kpi-card-icon.icon-map {
    background: linear-gradient(135deg, var(--amber-500), #d97706);
}
.kpi-card-icon i {
    color: var(--text-light);
    font-size: var(--font-size-md);
}
.kpi-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
    line-height: 1.3;
}
.kpi-card-subtitle {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    display: block;
}
.kpi-card-body {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.kpi-modern-value {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--palette-blue-primary);
    line-height: 1.1;
    text-align: center;
    margin-bottom: var(--spacing-1);
    font-variant-numeric: tabular-nums;
}
.kpi-modern-label {
    text-align: center;
    color: var(--outlook-text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-3);
}
.kpi-breakdown {
    margin-top: auto;
    border-top: 1px solid var(--outlook-border-light);
    padding-top: var(--spacing-3);
}
.kpi-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    font-size: 0.8rem;
    color: var(--outlook-text-secondary);
}
.kpi-breakdown-item span:first-child {
    font-weight: var(--font-weight-medium);
}
.kpi-breakdown-val {
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    font-variant-numeric: tabular-nums;
}
.kpi-selectable {
    cursor: pointer;
    /* Mismo grosor de borde que el resto de .kpi-modern-card: si no, las tarjetas
       seleccionables quedan 1px desalineadas respecto al mapa y a la lista de orgs. */
    position: relative;
}
.kpi-selectable::before {
    content: '';
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: transparent;
    transition: background-color 0.2s ease;
}
.kpi-selectable:hover {
    box-shadow: var(--outlook-shadow-elevated);
}
.kpi-selectable.active {
    border-color: var(--palette-blue-primary);
    background: var(--outlook-bg-primary);
    /* El anillo va por dentro (inset) para marcar la seleccion sin alterar el alto de la fila */
    box-shadow: inset 0 0 0 1px var(--palette-blue-primary), var(--outlook-shadow-card);
}
.kpi-selectable.active::before {
    background: var(--palette-blue-primary);
}
.kpi-selectable.active .kpi-card-header {
    background: var(--outlook-bg-secondary);
}
.kpi-map-card {
    padding: 0;
}
.kpi-map-card .kpi-card-body {
    padding: 0;
    overflow: hidden;                              
}
.map-mini-card {
    background: var(--outlook-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sin height/max-height fijos: la tarjeta es un grid item y debe estirarse hasta
       la altura de la fila, si no queda mas baja que las tarjetas de KPI. */
    min-height: 180px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.map-mini-card #mini-map {
    width: 100%;
    height: 100%;
    min-height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.map-mini-card .dx-vectormap {
    width: 100% !important;
    height: 100% !important;
}
.map-mini-card .dx-vectormap-container {
    width: 100% !important;
    height: 100% !important;
}
.map-mini-card .dxm-control-bar {
    transform: scale(0.8);
    transform-origin: top right;
}
.chart-wrapper {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-5);
    overflow: visible;                                                
    box-shadow: var(--outlook-shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;                     
}
.chart-wrapper:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.panel-section > .row.g-4 {
    /* Reemplaza el margin-bottom que se le saca a .chart-wrapper.h-100 de adentro */
    margin-bottom: var(--spacing-5);
}
.row.g-4 > .col-md-6 > .chart-wrapper.h-100 {
    display: flex;
    flex-direction: column;
    /* La separacion vertical la da el gutter de .g-4; el margin propio duplicaria
       el espacio y ademas desbordaria la columna por culpa del h-100. */
    margin-bottom: 0;
}
.row.g-4 > .col-md-6 > .chart-wrapper.h-100 .chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.chart-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.chart-header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chart-header-icon.icon-water {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.chart-header-icon.icon-sanitation {
    background: linear-gradient(135deg, var(--emerald-500), var(--green-600));
}
.chart-header-icon.icon-pivot {
    background: linear-gradient(135deg, #6366f1, var(--tw-indigo-600));
}
.chart-header-icon i {
    color: var(--text-light);
    font-size: var(--font-size-md);
}
.chart-header-content {
    flex: 1;
    min-width: 0;
}
.chart-header-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
    line-height: 1.3;
}
.chart-header-subtitle {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    display: block;
}
.chart-body {
    padding: var(--spacing-5);
    overflow: visible;                          
    position: relative;
}
.chart-container {
    min-height: 280px;
    width: 100%;
    overflow: visible;                          
    position: relative;
    z-index: 1;
}
.dx-tooltip-wrapper,
.dx-overlay-wrapper,
.dx-popover-wrapper {
    z-index: 10000 !important;
}
.dx-tooltip {
    z-index: 10001 !important;
}
.dxc-tooltip {
    z-index: 10002 !important;
}
.dx-pie-chart {
    overflow: visible !important;
}
.dx-pie-chart svg {
    overflow: visible !important;
}
.dxc-chart {
    overflow: visible !important;
}
.pivot-grid-container {
    min-height: 350px;
}
.chart-wrapper .chart-body.p-0 {
    min-height: 280px;
    position: relative;
}
.chart-wrapper .pivot-skeleton {
    min-height: 250px;
}
.chart-legend-table {
    margin-top: var(--spacing-4);
    border-top: 1px solid var(--outlook-border-light);
    padding-top: var(--spacing-4);
}
.legend-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
}
.legend-table th {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-tertiary);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: var(--font-size-xs);
}
.legend-table th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}
.legend-table th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}
.legend-table th.text-end {
    text-align: right;
}
.legend-table tbody tr {
    transition: background-color 0.15s ease;
}
.legend-table tbody tr:hover {
    background-color: var(--outlook-bg-hover);
}
.legend-table tbody tr.hover {
    background-color: var(--outlook-bg-secondary);
}
.legend-table td {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--outlook-border-light);
}
.legend-table tbody tr:last-child td {
    border-bottom: none;
}
.legend-label-cell {
    color: var(--outlook-text-primary);
    font-weight: var(--font-weight-medium);
}
.legend-value-cell {
    color: var(--outlook-text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.legend-label-cell {
                                             
}
.legend-table:not(.legend-table-comparative) tbody tr {
                                
}
.legend-table:not(.legend-table-comparative) tbody tr.hover {
                                                               
    background-color: var(--outlook-bg-hover);
}
@media (max-width: 767.98px) {
    .legend-table-comparative .legend-col-nat {
        display: none;
    }
    
    .legend-level-badge {
        font-size: 0.6rem;
        padding: 1px 5px;
    }
}
@media (max-width: 575.98px) {
    .legend-table-comparative .legend-col-prov {
        display: none;
    }
}
.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--outlook-shadow-modal);
}
.modal-header {
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--spacing-4);
}
.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    display: flex;
    align-items: center;
}
.modal-title i {
    color: var(--palette-blue-primary);
}
.modal-body {
    padding: var(--spacing-5);
}
.modal-footer {
    background: var(--outlook-bg-secondary);
    border-top: 1px solid var(--outlook-border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: var(--spacing-3) var(--spacing-4);
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.top-orgs-card {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.top-orgs-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.top-orgs-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--palette-blue-primary), #1565c0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.top-orgs-icon i {
    color: var(--text-light);
    font-size: var(--font-size-md);
}
.top-orgs-title-group {
    flex: 1;
    min-width: 0;
}
.top-orgs-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
    line-height: 1.3;
}
.top-orgs-subtitle {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    display: block;
}
.top-orgs-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2);
    gap: var(--spacing-1);
    overflow-y: auto;
    max-height: 200px;
}
.top-org-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}
.top-org-item:hover {
    background: var(--outlook-bg-hover);
}
.top-org-rank {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background: var(--outlook-bg-secondary);
    border: 1px solid var(--outlook-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-secondary);
    flex-shrink: 0;
}
.top-org-item:nth-child(1) .top-org-rank {
    background: linear-gradient(135deg, var(--ranking-gold), #f0c000);
    border-color: #e0b000;
    color: #6b5900;
}
.top-org-item:nth-child(2) .top-org-rank {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
    border-color: #909090;
    color: #505050;
}
.top-org-item:nth-child(3) .top-org-rank {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    border-color: #a06030;
    color: var(--text-light);
}
.top-org-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.top-org-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.top-org-source {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.top-org-source.source-reported {
    background: rgba(16, 185, 129, 0.15);
    color: var(--emerald-600);
}
.top-org-source.source-estimated {
    background: var(--outlook-bg-secondary);
    color: var(--outlook-text-tertiary);
}
.top-org-value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--palette-blue-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 2px var(--spacing-2);
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-sm);
}
.top-orgs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
    color: var(--outlook-text-tertiary);
    text-align: center;
    gap: var(--spacing-2);
}
.top-orgs-empty i {
    font-size: 1.25rem;
    opacity: 0.5;
}
.top-orgs-empty span {
    font-size: var(--font-size-xs);
}
.top-org-item.skeleton {
    pointer-events: none;
}
.top-org-item.skeleton .top-org-rank {
    background: var(--outlook-bg-secondary);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.top-org-item.skeleton .skeleton-text {
    height: 12px;
    width: 100%;
    max-width: 100px;
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.top-org-item.skeleton .skeleton-badge {
    height: 20px;
    width: 50px;
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.top-orgs-list-wrapper {
    position: relative;
    min-height: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.top-orgs-skeleton {
    position: absolute;
    inset: 0;
    padding: var(--spacing-2);
    background: var(--outlook-bg-primary);
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}
.top-orgs-skeleton.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.top-orgs-data-ready {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.top-orgs-skeleton:not(.loaded) ~ .top-orgs-data-ready {
    opacity: 0;
    pointer-events: none;
}
.top-orgs-skeleton.loaded ~ .top-orgs-data-ready {
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 1199.98px) {
    .filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-actions {
        grid-column: span 3;
    }
    
    .kpi-modern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    .kpi-modern-value {
        font-size: 1.75rem;
    }
    
    .top-orgs-list-container {
        max-height: 160px;
    }
}
@media (min-width: 768px) {
    .topbar-filters {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .btn-toggle-filters {
        display: none !important;
    }
}
@media (max-width: 767.98px) {
    .census-topbar {
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .topbar-nav {
        flex-wrap: wrap;
        gap: var(--spacing-2);
        align-items: center;
    }
    .topbar-actions.d-none.d-md-flex {
        display: none !important;
    }
    .filter-actions {
        width: auto;
    }
    
    .section-nav-horizontal {
        order: 1;
        width: 100%;
        justify-content: center;
    }
    
    .btn-toggle-filters {
        order: 2;
        flex: 1;
    }
    
    .section-pill {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }
    
    .section-pill i {
        font-size: var(--font-size-base);
    }
    
    .filters-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }
    
    .filter-actions {
        grid-column: span 2;
    }
    
    .filter-item .form-label {
        font-size: var(--font-size-xs);
    }
    
    .filter-item .form-select {
        font-size: var(--font-size-sm);
        padding: var(--spacing-2);
    }
    
    .census-dashboard-container {
        padding: var(--spacing-4) var(--spacing-3);
    }
    
    .panel-section {
        /* Mismo calculo que en desktop: --topbar-height ya refleja la altura real
           del topbar en mobile (con los filtros colapsados), y los 48px son la barra
           principal en su variante móvil. */
        scroll-margin-top: calc(48px + var(--topbar-height, 110px) + var(--spacing-3));
        margin-bottom: var(--spacing-6);
    }
    
    .panel-title {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-4);
    }
    
    .kpi-modern-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3);
    }
    
    .kpi-card-header {
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .kpi-card-icon {
        width: 32px;
        height: 32px;
    }
    
    .kpi-card-icon i {
        font-size: var(--font-size-base);
    }
    
    .kpi-card-body {
        padding: var(--spacing-3);
    }
    
    .kpi-modern-value {
        font-size: 1.5rem;
    }
    
    .kpi-modern-label {
        font-size: 0.65rem;
    }
    
    .chart-section-header {
        padding: var(--spacing-3);
    }
    
    .chart-header-icon {
        width: 32px;
        height: 32px;
    }
    
    .chart-header-icon i {
        font-size: var(--font-size-base);
    }
    
    .chart-header-title {
        font-size: var(--font-size-sm);
    }
    
    .chart-container {
        min-height: 220px;
    }
    
    .pivot-grid-container {
        min-height: 280px;
    }
    
    .chart-body {
        padding: var(--spacing-3);
    }
    
    .top-orgs-header {
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .top-orgs-icon {
        width: 32px;
        height: 32px;
    }
    
    .top-orgs-icon i {
        font-size: var(--font-size-base);
    }
    
    .top-orgs-title {
        font-size: var(--font-size-xs);
    }
    
    .top-org-item {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }
    
    .top-org-rank {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
    }
    
    .top-org-name {
        font-size: 0.7rem;
    }
    
    .top-org-value {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}
@media (max-width: 575.98px) {
    .section-pill span {
        display: none;
    }
    
    .section-pill {
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .kpi-modern-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        grid-column: span 1;
    }
    
    .chart-container {
        min-height: 200px;
    }
    
    .pivot-grid-container {
        min-height: 250px;
    }
}
.badge-primary {
    background-color: rgba(74, 144, 226, 0.1);
    color: var(--palette-blue-primary);
    border: 1px solid rgba(74, 144, 226, 0.2);
}
.badge-info {
    background-color: rgba(80, 184, 216, 0.1);
    color: var(--palette-cyan);
    border: 1px solid rgba(80, 184, 216, 0.2);
}
.badge-success {
    background-color: rgba(72, 201, 176, 0.1);
    color: var(--palette-teal);
    border: 1px solid rgba(72, 201, 176, 0.2);
}
.badge-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #e0a800;
    border: 1px solid rgba(255, 193, 7, 0.2);
}
.stats-banner .row {
    margin: 0;
}
.stats-banner .value {
    font-size: 1.75rem;               
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-2);
    display: block;
}
.stats-banner .label {
    font-size: var(--font-size-xs);           
    color: var(--outlook-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-weight-medium);
    display: block;
}
.filter-panel {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--outlook-shadow-subtle);
}
.filter-panel h5 {
    font-size: var(--font-size-base);           
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.filter-panel h5 i {
    color: var(--outlook-icon-neutral);
    font-size: var(--icon-size-md);
}
.filter-panel .btn-group { display: flex; gap: var(--spacing-2); }
#filtersContent {
    margin-top: var(--spacing-md);
}
.filter-group {
    margin-bottom: var(--spacing-md);
}
.filter-group:last-child {
    margin-bottom: 0;
}
.filter-group label {
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-secondary);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);           
}
.filter-group label i {
    color: var(--outlook-icon-neutral);
    font-size: var(--icon-size-sm);
}
.filter-group .form-control,
.filter-group .form-select {
    font-size: var(--font-size-sm);           
    height: auto;
    padding: 0.5rem 0.75rem;
}
.filter-group .form-select[multiple] {
    min-height: 90px;
}
.table-container {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--outlook-shadow-subtle);
    margin-bottom: var(--spacing-md);
}
.table-responsive {
    overflow-x: auto;
}
.table-responsive::-webkit-scrollbar {
    height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-sm);
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--outlook-border);
    border-radius: var(--radius-sm);
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--outlook-border-hover);
}
#censusDetailedGrid {
    font-size: 0.75rem !important;                          
}
#censusDetailedGrid .dx-header-row > td {
    padding: 6px 8px !important;                            
    font-size: 0.688rem !important;           
    font-weight: 600 !important;
    background: var(--outlook-bg-secondary) !important;
    color: var(--outlook-text-primary) !important;
    border-bottom: 2px solid var(--outlook-border) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#censusDetailedGrid .dx-data-row > td {
    padding: 5px 8px !important;                            
    font-size: 0.75rem !important;           
    border-bottom: 1px solid var(--outlook-border-light) !important;
}
#censusDetailedGrid .dx-row:hover {
    background-color: var(--outlook-bg-hover) !important;
}
#censusDetailedGrid .dx-row-alt {
    background-color: rgba(248, 249, 250, 0.5) !important;
}
#censusDetailedGrid .dx-data-row > td[aria-colindex="12"],
#censusDetailedGrid .dx-data-row > td[aria-colindex="13"] {
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--palette-blue-primary) !important;
}
#censusDetailedGrid .dx-command-fixed {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(248,249,250,1) 10%, 
        rgba(248,249,250,1) 100%) !important;
}
#censusDetailedGrid .dx-header-row > td:not([aria-colindex="11"]):not([aria-colindex="12"]) {
    min-width: 140px !important;                                            
}
#censusDetailedGrid .dx-filter-row > td {
    padding: 4px 6px !important;
}
#censusDetailedGrid .dx-filter-row input,
#censusDetailedGrid .dx-filter-row select {
    font-size: 0.75rem !important;
    padding: 3px 6px !important;
    height: 26px !important;
}
#censusDetailedGrid .dx-filter-panel {
    background: var(--outlook-bg-secondary) !important;
    border: 1px solid var(--outlook-border-light) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 8px !important;
    margin: 8px 0 !important;
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-filter-panel-text {
    font-size: 0.75rem !important;
    color: var(--outlook-text-secondary) !important;
}
#censusDetailedGrid .dx-pager {
    padding: 6px 12px !important;
    background: var(--outlook-bg-secondary) !important;
    border-top: 1px solid var(--outlook-border-light) !important;
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-page-sizes,
#censusDetailedGrid .dx-pages {
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-page-size {
    padding: 4px 8px !important;
    min-width: 32px !important;
}
#censusDetailedGrid .dx-datagrid-summary-item {
    font-weight: 700 !important;
    color: var(--palette-blue-primary) !important;
    font-size: 0.813rem !important;           
}
#censusDetailedGrid .dx-group-panel {
    background: var(--outlook-bg-secondary) !important;
    border: 1px dashed var(--outlook-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
    margin-bottom: 8px !important;
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-group-panel-message {
    font-size: 0.75rem !important;
    color: var(--outlook-text-tertiary) !important;
}
#censusDetailedGrid .dx-column-chooser-button {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-datagrid-export-button {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}
#censusDetailedGrid .dx-datagrid-search-panel {
    margin-right: 8px !important;
}
#censusDetailedGrid .dx-texteditor-input {
    font-size: 0.75rem !important;
    padding-block: 4px !important;
    padding-inline-end: 8px !important;
    height: 28px !important;
}
#censusDetailedGrid .dx-texteditor.dx-state-focused {
    border-color: var(--outlook-border-focus) !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15) !important;
}
.data-table thead th .sort-icon {
    margin-left: var(--spacing-2);
    opacity: 0.5;
    transition: opacity 0.2s;
    font-size: var(--icon-size-xs);
    color: var(--outlook-icon-neutral);
}
.data-table thead th.sorted .sort-icon {
    opacity: 1;
    color: var(--color-primary);
}
.data-table .text-end {
    text-align: right;
}
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: var(--radius-md);
}
.loading-overlay.d-none {
    display: none !important;
}
.loading-overlay .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
    border-color: var(--outlook-border-light);
    border-top-color: var(--color-primary);
}
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--outlook-bg-secondary);
    border-top: 1px solid var(--outlook-border-light);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}
.pagination-container label {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
}
.pagination-container .form-select {
    font-size: var(--font-size-sm);
    height: 2rem;                      
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--outlook-border);
}
.pagination-container #pageInfo {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    font-weight: var(--font-weight-medium);
}
.pagination-container .pagination {
    margin-bottom: 0;
}
.pagination-container .page-link {
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.75rem;
    color: var(--outlook-text-primary);
    border: 1px solid var(--outlook-border);
    background: var(--outlook-bg-primary);
    transition: background-color 0.2s, border-color 0.2s;
}
.pagination-container .page-link:hover:not(.disabled) {
    background: var(--outlook-bg-hover);
    border-color: var(--outlook-border-hover);
    color: var(--outlook-text-primary);
}
.pagination-container .page-item.disabled .page-link {
    background: var(--outlook-bg-secondary);
    border-color: var(--outlook-border-light);
    color: var(--outlook-text-disabled);
    opacity: 0.6;
}
.filter-panel .btn-group, .table-container .btn-group { display: flex; gap: var(--spacing-2); }
.btn-success,
.btn-info,
.btn-danger {
    padding: var(--spacing-3) var(--spacing-md);               
    font-size: var(--font-size-sm);           
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn-success i,
.btn-info i,
.btn-danger i {
    font-size: var(--icon-size-sm);
}
.data-table tbody tr td.text-center {
    padding: var(--spacing-xl) var(--spacing-md);
}
.data-table tbody tr td.text-center i {
    font-size: 2.5rem;
    opacity: 0.3;
    color: var(--outlook-text-tertiary);
    display: block;
    margin-bottom: var(--spacing-md);
}
.data-table tbody tr td.text-center .text-muted {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
}
#filtersContent {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    max-height: 1000px;
    opacity: 1;
}
#filtersContent.collapsed {
    max-height: 0;
    opacity: 0;
}
#toggleFilters i {
    transition: transform 0.3s ease;
}
#toggleFilters.collapsed i {
    transform: rotate(180deg);
}
@media (max-width: 992px) {
    .stats-banner .value {
        font-size: 1.5rem;
    }
    
    #censusDetailedGrid {
        font-size: 0.688rem !important;                                 
    }
}
@media (max-width: 768px) {
    .filter-panel,
    .table-container {
        padding: var(--spacing-3);          
    }
    
    .stats-banner .stats-item {
        border-right: none;
        border-bottom: 1px solid var(--outlook-border-light);
        padding: var(--spacing-3);
    }
    
    .stats-banner .stats-item:last-child {
        border-bottom: none;
    }
    
    .stats-banner .value {
        font-size: 1.25rem;
    }
    
    .data-table thead th,
    .data-table tbody td {
        padding: var(--spacing-2);
        font-size: var(--font-size-xs);
    }
    
    .filter-group .form-select[multiple] {
        min-height: 70px;
    }
    
    .pagination-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pagination-container > div {
        width: 100%;
        text-align: center;
    }
    
    .filter-panel .btn-group, .table-container .btn-group { flex-direction: column; }
    
    .btn-group .btn {
        width: 100%;
    }
    
    #censusDetailedGrid .dx-header-row > td {
        min-width: 100px !important;                                      
    }
}
@media (max-width: 576px) {
    .filter-panel h5 {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .filter-panel .btn-group {
        width: 100%;
        flex-direction: column;
    }
    
    .filter-panel .btn-group .btn {
        width: 100%;
    }
    
    .stats-banner .value {
        font-size: 1.125rem;
    }
    
    .filter-tags {
        flex-direction: column;
    }
    
    .filter-tag {
        width: 100%;
        justify-content: space-between;
    }
}
@media print {
    .filter-panel,
    .filter-panel .btn-group,
    .pagination-container {
        display: none !important;
    }
    
    .table-container {
        box-shadow: none;
        border: 1px solid var(--outlook-border);
    }
    
    .data-table {
        font-size: var(--font-size-xs);
    }
    
    .data-table tbody tr:hover {
        background-color: transparent;
    }
    
    #censusDetailedGrid .dx-data-row > td {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}
.data-table:focus-visible,
.filter-panel:focus-visible,
#censusDetailedGrid:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.basic-query-wrapper {
                min-height: 100vh;
                background: var(--outlook-bg-tertiary);
            }
.filters-card {
                background: var(--outlook-bg-primary);
                border: var(--border-width) solid var(--outlook-border-light);
                border-radius: var(--radius-lg);
                padding: var(--spacing-lg);
                margin-bottom: var(--spacing-lg);
                box-shadow: var(--outlook-shadow-subtle);
            }
.filter-row {
                display: flex;
                flex-wrap: wrap;
                gap: var(--spacing-md);
                align-items: flex-end;
            }
.filter-group {
                flex: 1;
                min-width: 200px;
            }
.filter-group label {
                display: block;
                font-size: var(--font-size-xs);
                font-weight: var(--font-weight-semibold);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--outlook-text-secondary);
                margin-bottom: var(--spacing-sm);
            }
.filter-group label i {
                color: var(--outlook-icon-neutral);
            }
.filter-group select {
                width: 100%;
                padding: var(--spacing-sm) var(--spacing-md);
                border: var(--border-width) solid var(--outlook-border);
                border-radius: var(--radius-md);
                font-size: var(--font-size-sm);
                font-family: var(--font-family-base);
                background: var(--outlook-bg-primary);
                color: var(--outlook-text-primary);
                transition: var(--transition-all);
                height: var(--input-height-md);
            }
.filter-group select:hover {
                border-color: var(--outlook-border-hover);
            }
.filter-group select:focus {
                outline: none;
                border-color: var(--outlook-border-focus);
                box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
            }
.filter-group select:disabled {
                background: var(--outlook-bg-secondary);
                color: var(--outlook-text-disabled);
                cursor: not-allowed;
            }
.btn-load {
                padding: var(--spacing-sm) var(--spacing-lg);
                background: var(--color-primary);
                color: var(--text-light);
                border: none;
                border-radius: var(--button-radius);
                font-weight: var(--font-weight-semibold);
                font-size: var(--font-size-sm);
                font-family: var(--font-family-base);
                cursor: pointer;
                transition: var(--transition-all);
                display: inline-flex;
                align-items: center;
                gap: var(--spacing-sm);
                height: var(--button-height-md);
            }
.btn-load:hover {
                background: var(--color-primary-light);
                box-shadow: var(--shadow-primary);
                transform: translateY(-1px);
            }
.btn-load:active {
                transform: translateY(0);
            }
.region-banner {
                background: var(--hero-bg);
                color: var(--hero-text);
                padding: var(--spacing-lg) var(--spacing-xl);
                border-radius: var(--radius-lg);
                margin-bottom: var(--spacing-lg);
                display: flex;
                align-items: center;
                gap: var(--spacing-md);
                box-shadow: var(--outlook-shadow-card);
            }
.region-banner-icon {
                width: 56px;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.15);
                border-radius: var(--radius-lg);
                font-size: var(--icon-size-lg);
            }
.region-banner-content h3 {
                font-size: var(--font-size-xl);
                font-weight: var(--font-weight-bold);
                margin: 0 0 var(--spacing-xs) 0;
                line-height: var(--line-height-tight);
            }
.region-banner-content p {
                font-size: var(--font-size-sm);
                opacity: 0.85;
                margin: 0;
            }
.cards-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: var(--spacing-lg);
            }
.breakdown-card {
                background: var(--outlook-card-bg);
                border: var(--border-width) solid var(--outlook-card-border);
                border-radius: var(--card-radius);
                overflow: hidden;
                transition: var(--transition-all);
                box-shadow: var(--outlook-shadow-subtle);
            }
.breakdown-card:hover {
                border-color: var(--outlook-border-hover);
                box-shadow: var(--outlook-shadow-card);
            }
.breakdown-card-header {
                padding: var(--spacing-md) var(--spacing-lg);
                background: var(--outlook-bg-secondary);
                border-bottom: var(--border-width) solid var(--outlook-border-light);
                display: flex;
                align-items: center;
                gap: var(--spacing-sm);
            }
.breakdown-card-header i {
                font-size: var(--icon-size-md);
                color: var(--palette-blue-primary);
            }
.breakdown-card-header h5 {
                margin: 0;
                font-size: var(--font-size-base);
                font-weight: var(--font-weight-semibold);
                color: var(--outlook-text-primary);
            }
.breakdown-card-body {
                padding: var(--spacing-lg);
            }
.breakdown-item {
                margin-bottom: var(--spacing-md);
            }
.breakdown-item:last-child {
                margin-bottom: 0;
            }
.breakdown-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: var(--spacing-xs);
            }
.breakdown-item-label {
                font-size: var(--font-size-sm);
                color: var(--outlook-text-secondary);
                max-width: 70%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
.breakdown-item-value {
                font-size: var(--font-size-sm);
                font-weight: var(--font-weight-bold);
                color: var(--outlook-text-primary);
            }
.breakdown-progress {
                height: 8px;
                background: var(--outlook-bg-secondary);
                border-radius: var(--radius-sm);
                overflow: hidden;
            }
.breakdown-progress-bar {
                height: 100%;
                border-radius: var(--radius-sm);
                transition: width var(--transition-slow);
            }
.card-agua .breakdown-card-header i {
                color: var(--palette-blue-primary);
            }
.card-agua .breakdown-progress-bar {
                background: linear-gradient(90deg, var(--palette-blue-primary), var(--palette-blue-secondary));
            }
.card-saneamiento .breakdown-card-header i {
                color: var(--palette-teal);
            }
.card-saneamiento .breakdown-progress-bar {
                background: linear-gradient(90deg, var(--palette-teal), var(--color-success));
            }
.card-zona .breakdown-card-header i {
                color: var(--binas-magenta);
            }
.card-zona .breakdown-progress-bar {
                background: linear-gradient(90deg, var(--binas-magenta), #8E44AD);
            }
.card-nbi .breakdown-card-header i {
                color: var(--binas-orange);
            }
.card-nbi .breakdown-progress-bar {
                background: linear-gradient(90deg, var(--binas-orange), #E67E22);
            }
.loading-state {
                text-align: center;
                padding: var(--spacing-16) var(--spacing-xl);
                color: var(--outlook-text-secondary);
            }
.loading-state .spinner-border {
                width: 3rem;
                height: 3rem;
                border-width: 0.25rem;
                color: var(--palette-blue-primary);
            }
.loading-state p {
                margin-top: var(--spacing-md);
                font-size: var(--font-size-sm);
            }
.error-state {
                text-align: center;
                padding: var(--spacing-xl);
                background: var(--insight-high-bg);
                border: var(--border-width) solid var(--insight-high-border);
                border-radius: var(--radius-md);
                color: var(--insight-high);
            }
.error-state i {
                margin-right: var(--spacing-sm);
            }
@media (max-width: 767.98px) {
                .filter-group {
                    min-width: 100%;
                }

                .region-banner {
                    flex-direction: column;
                    text-align: center;
                    padding: var(--spacing-md);
                }

                .region-banner-content h3 {
                    font-size: var(--font-size-lg);
                }

                .cards-grid {
                    grid-template-columns: 1fr;
                }

                .breakdown-card-body {
                    padding: var(--spacing-md);
                }
            }
@media (prefers-reduced-motion: reduce) {
                .breakdown-card,
                .btn-load,
                .filter-group select,
                .breakdown-progress-bar {
                    transition: none;
                }
            }
@media (prefers-contrast: high) {
                .breakdown-card {
                    border-width: var(--border-width-thick);
                }

                .filter-group select:focus {
                    outline: 2px solid var(--outlook-border-focus);
                }
            }
.quality-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.quality-filters {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    box-shadow: var(--outlook-shadow-card);
}
.quality-filters .filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
    gap: var(--spacing-3);
    align-items: end;
}
.info-banner {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: rgba(var(--palette-blue-primary-rgb), 0.04);
    border: 1px solid rgba(var(--palette-blue-primary-rgb), 0.15);
    border-radius: var(--radius-lg);
    align-items: flex-start;
}
.info-banner > i {
    color: var(--palette-blue-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.info-banner-content {
    flex: 1;
    min-width: 0;
}
.info-banner-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin-bottom: var(--spacing-1);
}
.info-banner-text {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    margin: 0;
    line-height: 1.6;
}
.summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: var(--outlook-shadow-card);
}
.summary-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
}
.summary-title i {
    color: var(--palette-teal);
}
.summary-stats {
    display: flex;
    gap: var(--spacing-5);
}
.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.summary-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--palette-blue-primary);
    font-variant-numeric: tabular-nums;
}
.summary-stat-label {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.quality-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-3);
}
.quality-kpi-card {
    background: var(--outlook-bg-primary);
    border: 2px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
    box-shadow: var(--outlook-shadow-card);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.quality-kpi-card:hover {
    box-shadow: var(--outlook-shadow-elevated);
}
.quality-kpi-card.active {
    border-color: var(--palette-blue-primary);
    background: rgba(var(--palette-blue-primary-rgb), 0.02);
}
.quality-kpi-card.critical .quality-kpi-icon {
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
}
.quality-kpi-card.critical.active {
    border-color: var(--color-danger);
}
.quality-kpi-card.moderate .quality-kpi-icon {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
}
.quality-kpi-card.moderate.active {
    border-color: var(--color-warning);
}
.quality-kpi-card.minor .quality-kpi-icon {
    background: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
}
.quality-kpi-card.minor.active {
    border-color: var(--color-info);
}
.quality-kpi-card.good .quality-kpi-icon {
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}
.quality-kpi-card.good.active {
    border-color: var(--color-success);
}
.quality-kpi-card.no-data .quality-kpi-icon {
    background: var(--outlook-bg-secondary);
    color: var(--outlook-text-tertiary);
}
.quality-kpi-card.no-data.active {
    border-color: var(--outlook-text-tertiary);
}
.quality-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-md);
}
.quality-kpi-content {
    flex: 1;
    min-width: 0;
}
.quality-kpi-value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.quality-kpi-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-secondary);
    margin-top: var(--spacing-1);
}
.quality-kpi-desc {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    margin-top: var(--spacing-1);
}
.quality-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.chart-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--outlook-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chart-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
}
.chart-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
}
.chart-card-title i {
    color: var(--palette-blue-primary);
}
.chart-card-body {
    padding: var(--spacing-4);
    position: relative;
    flex: 1;
}
.chart-card-body #distributionChart,
.chart-card-body #topDifferencesChart {
    height: 280px;
}
.legend-inline {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--outlook-border-light);
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--outlook-text-secondary);
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}
.legend-dot.dot-critical {
    background: var(--color-danger);
}
.legend-dot.dot-moderate {
    background: var(--color-warning);
}
.legend-dot.dot-minor {
    background: var(--color-info);
}
.legend-dot.dot-good {
    background: var(--color-success);
}
.grid-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--outlook-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.grid-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.grid-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
}
.grid-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
}
.grid-card-title i {
    color: var(--palette-blue-primary);
}
.grid-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.grid-card-actions .form-select-sm {
    width: auto;
}
.grid-card-body {
    padding: 0;
    position: relative;
    flex: 1;
}
.grid-card-body #qualityGrid {
    height: 500px;
}
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--outlook-border);
    border-top-color: var(--palette-blue-primary);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}
.loading-text {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-tertiary);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 1199.98px) {
    .quality-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .charts-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767.98px) {
    .quality-dashboard {
        padding: var(--spacing-3);
    }

    .quality-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-bar {
        flex-direction: column;
        gap: var(--spacing-3);
        text-align: center;
    }

    .summary-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-3);
    }

    .chart-card-body #distributionChart,
    .chart-card-body #topDifferencesChart {
        height: 220px;
    }

    .grid-card-body #qualityGrid {
        height: 350px;
    }
}
.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.insights-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--binas-navy);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.insights-title i {
    color: var(--census-primary);
}
.insights-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.813rem;
    font-weight: 600;
    border: 1px solid var(--insight-border);
    background: var(--text-light);
    color: var(--outlook-icon-neutral);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-btn:hover {
    background: var(--outlook-bg-hover);
    border-color: var(--census-primary);
    color: var(--census-primary);
}
.filter-btn.active {
    background: var(--census-primary);
    border-color: var(--census-primary);
    color: var(--text-light);
}
.filter-btn .count {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    background: var(--insight-count-bg);
    border-radius: 10px;
    font-size: 0.688rem;
}
.insight-card {
    background: var(--insight-bg);
    border: 1px solid var(--insight-border);
    border-radius: 8px;
    box-shadow: var(--insight-shadow, 0 2px 4px rgba(0,0,0,0.05));
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
}
.insight-card:hover {
    box-shadow: var(--insight-shadow-hover, 0 4px 8px rgba(0,0,0,0.1));
    border-color: var(--census-primary);
}
.insight-card[data-importance="high"] {
    border-left: 4px solid var(--insight-high);
}
.insight-card[data-importance="medium"] {
    border-left: 4px solid var(--insight-medium);
}
.insight-card[data-importance="low"] {
    border-left: 4px solid var(--insight-low);
}
.insight-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--insight-padding, 1rem);
    padding-bottom: 0.75rem;
    background: var(--outlook-bg-tertiary);
    border-bottom: 1px solid var(--insight-border);
}
.insight-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-light);
    border: 2px solid var(--insight-border);
}
.insight-icon {
    font-size: 1rem;
    color: var(--census-primary);
}
.insight-importance-badge {
    padding: 0.25rem 0.75rem;
    font-size: 0.688rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.insight-card-body {
    padding: var(--insight-padding, 1rem);
}
.insight-text {
    font-size: 0.938rem;
    line-height: 1.6;
    color: var(--outlook-text-primary);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}
.insight-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--outlook-bg-tertiary);
    border-radius: 6px;
    margin-top: 0.75rem;
}
.insight-metric-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.metric-label {
    font-size: 0.688rem;
    color: var(--outlook-icon-neutral);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--binas-navy);
}
.insight-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem var(--insight-padding, 1rem);
    background: var(--outlook-bg-tertiary);
    border-top: 1px solid var(--insight-border);
}
.btn-insight-action {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
    font-weight: 600;
    background: var(--census-primary);
    color: var(--text-light);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-insight-action:hover {
    background: var(--blue-600);
    transform: translateX(2px);
}
.btn-insight-dismiss {
    padding: 0.5rem;
    margin-left: 0.5rem;
    background: transparent;
    border: 1px solid var(--insight-border);
    border-radius: 6px;
    color: var(--outlook-icon-neutral);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-insight-dismiss:hover {
    background: var(--outlook-bg-hover);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.insight-category-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    opacity: 0.3;
}
.insight-card.dismissing {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}
.insight-card.new {
    animation: insightFadeIn 0.5s ease;
}
@keyframes insightFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.insight-card.highlighted {
    border: 2px solid var(--census-primary);
    box-shadow: 0 0 0 4px rgba(var(--palette-blue-primary-rgb), 0.1);
}
.insights-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}
.insights-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--fluent-neutral-bg);
    border-top: 4px solid var(--census-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.insights-loading-text {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--outlook-icon-neutral);
}
@media (max-width: 768px) {
    .insights-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .insights-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .insight-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .insight-card-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-insight-action {
        width: 100%;
    }

    .btn-insight-dismiss {
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 576px) {
    .insights-title {
        font-size: 1rem;
    }

    .insight-card-body {
        padding: 0.75rem;
    }

    .insight-text {
        font-size: 0.875rem;
    }

    .insight-metrics {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .filter-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}
@media print {
    .insight-card-footer,
    .insights-filters {
        display: none;
    }

    .insight-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--outlook-border-light);
    }
}
.btn-insight-action:focus,
.btn-insight-dismiss:focus,
.filter-btn:focus {
    outline: 2px solid var(--census-primary);
    outline-offset: 2px;
}
@media (prefers-contrast: high) {
    .insight-card {
        border-width: 2px;
    }

    .insight-text {
        font-weight: 600;
    }
}
@media (prefers-reduced-motion: reduce) {
    .insight-card,
    .btn-insight-action,
    .btn-insight-dismiss,
    .filter-btn {
        animation: none;
        transition: none;
    }
}
.coverage-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.coverage-filters {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    box-shadow: var(--outlook-shadow-card);
}
.coverage-filters .filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: var(--spacing-3);
    align-items: end;
}
.filter-actions-group {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-2);
    padding-bottom: 1px;
}
.info-banner {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: rgba(var(--palette-blue-primary-rgb), 0.04);
    border: 1px solid rgba(var(--palette-blue-primary-rgb), 0.15);
    border-radius: var(--radius-lg);
    align-items: flex-start;
}
.info-banner > i {
    color: var(--palette-blue-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.info-banner-content {
    flex: 1;
    min-width: 0;
}
.info-banner-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin-bottom: var(--spacing-1);
}
.info-banner-text {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    margin: 0;
    line-height: 1.6;
}
.summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: var(--outlook-shadow-card);
}
.summary-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
}
.summary-title i {
    color: var(--palette-teal);
}
.summary-stats {
    display: flex;
    gap: var(--spacing-5);
}
.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.summary-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--palette-blue-primary);
    font-variant-numeric: tabular-nums;
}
.summary-stat-label {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.coverage-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}
.coverage-kpi-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
    box-shadow: var(--outlook-shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.coverage-kpi-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.coverage-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--palette-blue-primary-rgb), 0.1);
    color: var(--palette-blue-primary);
    font-size: 1.1rem;
}
.coverage-kpi-icon.icon-success {
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}
.coverage-kpi-icon.icon-info {
    background: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
}
.coverage-kpi-icon.icon-warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
}
.coverage-kpi-content {
    flex: 1;
    min-width: 0;
}
.coverage-kpi-value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.coverage-kpi-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--outlook-text-secondary);
    margin-top: var(--spacing-1);
}
.coverage-kpi-sub {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    margin-top: var(--spacing-1);
}
.coverage-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.content-card {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--outlook-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.content-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-elevated);
}
.content-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--outlook-bg-secondary);
    border-bottom: 1px solid var(--outlook-border-light);
}
.content-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin: 0;
}
.content-card-title i {
    color: var(--palette-blue-primary);
}
.content-card-body {
    padding: 0;
    position: relative;
    flex: 1;
}
.coverage-map {
    height: 450px;
    width: 100%;
    z-index: 1;
}
.content-card-body #orgsGrid {
    height: 450px;
}
.chart-section {
    width: 100%;
}
.chart-section .content-card-body {
    padding: var(--spacing-4);
}
.chart-section #coverageBarChart {
    height: 400px;
}
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--outlook-border);
    border-top-color: var(--palette-blue-primary);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}
.loading-text {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-tertiary);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 1199.98px) {
    .coverage-content {
        grid-template-columns: 1fr;
    }

    .coverage-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coverage-filters .filters-grid {
        grid-template-columns: repeat(2, 1fr) auto;
    }
}
@media (max-width: 767.98px) {
    .coverage-dashboard {
        padding: var(--spacing-3);
    }

    .coverage-kpi-grid {
        grid-template-columns: 1fr;
    }

    .coverage-filters .filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-actions-group {
        flex-direction: column;
    }

    .summary-bar {
        flex-direction: column;
        gap: var(--spacing-3);
        text-align: center;
    }

    .summary-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-3);
    }

    .coverage-map {
        height: 300px;
    }

    .content-card-body #orgsGrid {
        height: 350px;
    }

    .chart-section #coverageBarChart {
        height: 300px;
    }
}
.indicator-selector {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--outlook-shadow-subtle);
}
.indicator-selector h5 {
    font-size: var(--font-size-base);           
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.indicator-selector h5 i {
    color: var(--outlook-icon-neutral);
    font-size: var(--icon-size-md);
}
.indicator-card {
    background: var(--outlook-bg-primary);
    border: 2px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    text-align: center;
}
.indicator-card:hover {
    border-color: var(--outlook-border-hover);
    box-shadow: var(--outlook-shadow-card);
    background: var(--outlook-bg-secondary);
                         
}
.indicator-card.active {
    border-color: var(--color-primary);
    background: rgba(35, 45, 79, 0.05);
    box-shadow: var(--outlook-shadow-card);
}
.indicator-card.active .indicator-card-icon {
    color: var(--color-primary);
}
.filters-bar {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--outlook-shadow-subtle);
}
.filters-bar .form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-secondary);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);           
}
.filters-bar .form-label i {
    color: var(--outlook-icon-neutral);
    font-size: var(--icon-size-sm);
}
.filters-bar .form-select {
    font-size: var(--font-size-sm);           
    height: 2.125rem;                      
    padding: 0.5rem 0.75rem;
}
#mapCanvas {
    height: 500px;                                          
    border-radius: var(--radius-md);
    border: 1px solid var(--outlook-border-light);
    position: relative;
    overflow: hidden;
    background: var(--outlook-bg-secondary);
}
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: var(--radius-md);
}
.region-list {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--spacing-2);
}
.region-list::-webkit-scrollbar {
    width: 8px;
}
.region-list::-webkit-scrollbar-track {
    background: var(--outlook-bg-secondary);
    border-radius: var(--radius-sm);
}
.region-list::-webkit-scrollbar-thumb {
    background: var(--outlook-border);
    border-radius: var(--radius-sm);
}
.region-list::-webkit-scrollbar-thumb:hover {
    background: var(--outlook-border-hover);
}
.stat-item {
    padding: var(--spacing-3);
    text-align: center;
    border-right: 1px solid var(--outlook-border-light);
}
.stat-item:last-child {
    border-right: none;
}
.stat-value {
    font-size: 1.5rem;               
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-2);
}
.stat-label {
    font-size: var(--font-size-xs);           
    color: var(--outlook-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-weight-medium);
}
.leaflet-container {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
}
.leaflet-popup-content-wrapper {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
    border-radius: var(--radius-md);
    box-shadow: var(--outlook-shadow-card);
}
.leaflet-popup-content {
    color: var(--outlook-text-primary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-3);
}
.leaflet-popup-tip {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border);
}
.leaflet-control-zoom a {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    color: var(--outlook-text-primary);
    transition: background-color 0.2s, border-color 0.2s;
}
.leaflet-control-zoom a:hover {
    background: var(--outlook-bg-hover);
    border-color: var(--outlook-border-hover);
                         
}
.map-legend {
    background: var(--outlook-bg-primary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--outlook-shadow-card);
}
@media (max-width: 992px) {
    #mapCanvas {
        height: 400px;
    }
    
    .region-list {
        max-height: 400px;
    }
}
@media (max-width: 768px) {
    .indicator-selector,
    .filters-bar {
        padding: var(--spacing-3);
    }
    
    #mapCanvas {
        height: 350px;
    }
    
    .region-list {
        max-height: 300px;
    }
    
    .indicator-card {
        padding: var(--spacing-3);
    }
    
    .indicator-card-icon {
        font-size: var(--icon-size-lg);
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
}
@media (max-width: 576px) {
    #mapCanvas {
        height: 280px;
    }
    
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--outlook-border-light);
        padding: var(--spacing-2);
    }
    
    .stat-item:last-child {
        border-bottom: none;
    }
    
    .region-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
    
    .region-item-name {
        margin: 0;
    }
}
@media print {
    .filters-bar, .census-module .btn {
        display: none !important;
    }
    
    #mapCanvas {
        height: 600px;
        page-break-inside: avoid;
    }
    
}
.geo-dashboard-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 56px);
    background: var(--outlook-bg-secondary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--card-radius);
    overflow: visible;                        
}
@media (max-width: 992px) {
    .geo-dashboard-layout { grid-template-columns: 1fr; height:auto; min-height:calc(100vh - 56px); }
}
.geo-sidebar {
    background: var(--outlook-bg-primary);
    border-right: 1px solid var(--outlook-border-light);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    overflow-y: auto;
    position: relative;
    z-index: 600;
}
.geo-sidebar::-webkit-scrollbar { width: var(--scrollbar-width); }
.geo-sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); }
.geo-sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: var(--scrollbar-thumb-radius); }
.sidebar-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--outlook-text-secondary); letter-spacing:.5px; text-transform:uppercase; margin-bottom: var(--spacing-sm); display:flex; align-items:center; }
.geo-sidebar-section { display:flex; flex-direction:column; gap: var(--spacing-sm); }
.filter-group { display:flex; flex-direction:column; gap: var(--spacing-xs); }
.indicator-list { display:flex; flex-direction:column; gap:4px; overflow:visible !important; }
.indicator-item.active { background: var(--color-primary); color:#fff; border-color: var(--color-primary); font-weight:600; }
@media (max-width: 600px) {
    .indicator-item[data-description]:hover::after { left:0; top:100%; transform:translateY(6px); }
}
.indicator-skeleton-list { display:flex; flex-direction:column; gap:6px; }
.skeleton-indicator-item { display:flex; gap:10px; padding:6px 10px; border:1px solid var(--outlook-border-light); border-radius: var(--radius-pill); background: var(--outlook-bg-secondary); overflow:hidden; }
.skeleton-bullet { width:18px; height:18px; border-radius:50%; background: var(--outlook-border-light); }
.skeleton-lines { flex:1; display:flex; flex-direction:column; gap:4px; }
.skeleton-line { height:12px; background: var(--outlook-border-light); border-radius:4px; }
.skeleton-line.line-sm { width:70%; }
.skeleton-line.line-xs { width:40%; height:10px; }
@keyframes skeletonPulse { 0%{opacity:.85} 50%{opacity:.35} 100%{opacity:.85} }
.skeleton-indicator-item, .skeleton-bullet, .skeleton-line { animation:skeletonPulse 1.6s ease-in-out infinite; }
.geo-main {
    display:flex;
    flex-direction:column;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    overflow-y:auto;                                                 
    overflow-x:visible;
}
@media (max-width:992px) { .geo-main { padding: var(--spacing-md); } }
.geo-kpi-section { display:flex; flex-direction:column; gap: var(--spacing-md); }
.kpi-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); gap: var(--spacing-sm); overflow-x:auto; }
@media (max-width: 992px) { .kpi-row { grid-auto-flow:row; grid-auto-columns:unset; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); } }
.kpi-card { background: var(--outlook-card-bg); border:1px solid var(--outlook-card-border); border-radius: var(--card-radius); padding: var(--spacing-sm); display:flex; flex-direction:column; gap:4px; box-shadow: var(--outlook-shadow-card); position:relative; }
.kpi-label { font-size: .6rem; text-transform:uppercase; letter-spacing:.5px; color: var(--outlook-text-secondary); font-weight:600; }
.kpi-value { font-size: 1.05rem; font-weight:700; color: var(--outlook-text-primary); line-height:1; }
.kpi-skel-line.line-lg { width:60%; }
.kpi-skel-line.line-sm { width:40%; }
@keyframes kpiPulse { 0%{opacity:.85} 50%{opacity:.35} 100%{opacity:.85} }
.geo-content-row { flex:1; display:grid; grid-template-columns: 65% 35%; gap: var(--spacing-lg); min-height:0; }
@media (max-width:1200px) { .geo-content-row { grid-template-columns: 1fr; } }
.map-wrapper, .table-wrapper { display:flex; flex-direction:column; min-height:0; }
.map-section { flex:1; display:flex; flex-direction:column; }
.map-header { padding: var(--spacing-sm) var(--spacing-md); display:flex; flex-direction:column; gap: var(--spacing-xs); }
.map-header-row { display:flex; align-items:center; justify-content:space-between; width:100%; }
.map-header-row.legend-row { justify-content:flex-start; }
.map-title { font-size: var(--font-size-sm); font-weight:600; margin:0; display:flex; align-items:center; }
.map-switches { display:flex; align-items:center; gap: var(--spacing-sm); }
.map-toggle { display:flex; align-items:center; gap:4px; font-size:.6rem; }
.geographic-map {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: clamp(320px, 45vh, 560px);
    position: relative;
}
#map.geographic-map {
    width: 100%;
    height: 100%;
}
.geographic-map .leaflet-container {
    width: 100%;
    height: 100%;
}
.map-loading-overlay { position:absolute; inset:0; background:rgba(255,255,255,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:500; }
.map-loading-overlay.fade-out { animation: mapLoadFade .35s ease forwards; }
@keyframes mapLoadFade { to { opacity:0; visibility:hidden; } }
.regions-table-section { flex:1; display:flex; flex-direction:column; padding: var(--spacing-md); }
.table-responsive { flex:1; min-height:0; }
.col-rank { width:46px; }
.col-name { width:160px; }
.col-bar { width:140px; }
.col-small { width:90px; }
.map-legend { display:flex; align-items:center; gap: var(--spacing-xs); font-size:.65rem; background: var(--outlook-bg-tertiary); padding:4px 8px; border:1px solid var(--outlook-border-light); border-radius: var(--radius-pill); }
.legend-item { display:flex; align-items:center; gap:4px; }
.table-skeleton { position:relative; overflow:hidden; }
.table-skeleton table { width:100%; border-collapse:collapse; }
.table-skeleton thead th { background: var(--outlook-bg-tertiary); padding: 6px 8px; border-bottom:1px solid var(--outlook-border-light); }
.table-skeleton tbody tr { border-bottom:1px solid var(--outlook-border-light); }
.table-skeleton tbody td { padding: 6px 8px; }
.table-skeleton .skeleton-line, .table-skeleton .skeleton-bar { background: var(--outlook-border-light); border-radius:4px; animation:skeletonPulse 1.6s ease-in-out infinite; }
.table-skeleton .skeleton-bar { height:18px; width:100%; }
.geo-hidden { display:none !important; }
.indicator-item:focus-visible, .button:focus-visible, select:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
@media (max-width: 768px) {
    .geo-sidebar { padding: var(--spacing-md); }
    .indicator-item { font-size: var(--font-size-xs); padding:4px 8px; }
    .geo-content-row { gap: var(--spacing-md); }
    .map-header { gap: var(--spacing-sm); }
}
.geo-region-compare { display:flex; flex-direction:column; gap: var(--spacing-sm); }
.compare-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.compare-list li { display:flex; align-items:center; justify-content:space-between; gap: var(--spacing-xs); background: var(--outlook-bg-tertiary); border:1px solid var(--outlook-border-light); border-radius: var(--radius-md); padding:6px 8px; font-size:.65rem; }
.compare-list .cmp-label { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-list .cmp-value { font-weight:600; }
.compare-list button { border:none; background:transparent; color: var(--color-danger); cursor:pointer; font-size:.7rem; }
.compare-list button:hover { color: var(--color-danger-hover); }
.compare-actions { margin-top:4px; }
.compare-empty { font-size:.6rem; color: var(--outlook-text-secondary); }
.compare-active .region-row.selected { outline:2px solid var(--color-primary); outline-offset: -2px; background: var(--outlook-bg-hover); }
.col-wide-40 { width:40%; }
.col-narrow-20 { width:20%; }
.filters-card {
 background: var(--outlook-bg-primary, #fff);
 border: var(--border-width,1px) solid var(--outlook-border-light, #e5e5e5);
 border-radius: var(--radius-lg,12px);
 padding: var(--spacing-lg,24px);
 margin-bottom: var(--spacing-lg,24px);
 box-shadow: var(--outlook-shadow-subtle, 0 6px 20px rgba(0,0,0,0.04));
}
.data-shell {
 position: relative;
 isolation: isolate;
}
.data-surface {
 background: var(--outlook-bg-primary, #fff);
 border: var(--border-width,1px) solid var(--outlook-border-light, #e5e5e5);
 border-radius: var(--radius-lg,12px);
 padding: var(--spacing-lg,24px);
 box-shadow: var(--outlook-shadow-subtle, 0 6px 20px rgba(0,0,0,0.04));
}
.data-surface + .data-surface {
 margin-top: var(--spacing-lg,24px);
}
.section-subtitle {
 margin: 0;
 color: var(--outlook-text-secondary, #6b6b6b);
 font-size: var(--font-size-sm,14px);
}
.subtle-badge {
 background: var(--outlook-bg-secondary, #f4f6f9);
 color: var(--outlook-text-secondary, #6b6b6b);
 border: var(--border-width,1px) solid var(--outlook-border-light, #e5e5e5);
}
.shared-loading {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 160px;
}
.page-loading-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255,255,255,0.8);
 backdrop-filter: blur(6px);
 z-index: 10;
 border-radius: var(--radius-lg,12px);
}
.loading-surface {
 background: var(--outlook-bg-primary, #fff);
 border: var(--border-width,1px) solid var(--outlook-border-light, #e5e5e5);
 border-radius: var(--radius-lg,12px);
 padding: var(--spacing-lg,24px) var(--spacing-xl,32px);
 box-shadow: var(--outlook-shadow-card, 0 12px 36px rgba(0,0,0,0.08));
 text-align: center;
}
.filter-row {
 display: flex;
 flex-wrap: wrap;
 gap: var(--spacing-md,16px);
 align-items: flex-end;
}
.filter-group {
 flex:1;
 min-width:220px;
}
.filter-group label {
 display: block;
 font-size: var(--font-size-xs,12px);
 font-weight: var(--font-weight-semibold,600);
 text-transform: uppercase;
 letter-spacing:0.5px;
 color: var(--outlook-text-secondary, #6b6b6b);
 margin-bottom: var(--spacing-sm,8px);
}
.filter-group select {
 width:100%;
 padding: var(--spacing-sm,8px) var(--spacing-md,16px);
 border: var(--border-width,1px) solid var(--outlook-border, #d5d5d5);
 border-radius: var(--radius-md,8px);
 font-size: var(--font-size-sm,14px);
 font-family: var(--font-family-base, "Segoe UI", sans-serif);
 background: var(--outlook-bg-primary, #fff);
 color: var(--outlook-text-primary, #1b1b1b);
 transition: var(--transition-all,0.2s ease);
 height: var(--input-height-md,40px);
}
.filter-group select:hover {
 border-color: var(--outlook-border-hover, #b3b3b3);
}
.filter-group select:focus {
 outline: none;
 border-color: var(--outlook-border-focus, #0078d4);
 box-shadow: 0 3px rgba(0,120,212,0.15);
}
.filter-group select:disabled {
 background: var(--outlook-bg-secondary, #f5f5f5);
 color: var(--outlook-text-disabled, #9c9c9c);
 cursor: not-allowed;
}
.btn-load {
 padding: var(--spacing-sm,8px) var(--spacing-lg,20px);
 background: var(--color-primary, #0f6cbd);
 color: var(--text-light, #fff);
 border: none;
 border-radius: var(--button-radius,8px);
 font-weight: var(--font-weight-semibold,600);
 font-size: var(--font-size-sm,14px);
 font-family: var(--font-family-base, "Segoe UI", sans-serif);
 cursor: pointer;
 transition: var(--transition-all,0.2s ease);
 display: inline-flex;
 align-items: center;
 gap: var(--spacing-sm,8px);
 height: var(--button-height-md,40px);
}
.btn-load:hover {
 background: var(--color-primary-light, #0b7dd5);
 box-shadow: var(--shadow-primary, 0 8px 24px rgba(0,120,212,0.2));
}
.btn-load:active { box-shadow: var(--shadow-primary-pressed, 0 4px 12px rgba(0,120,212,0.2)); }
.filter-meta {
 margin-top: var(--spacing-sm,8px);
 display: flex;
 gap: var(--spacing-md,16px);
 align-items: center;
 flex-wrap: wrap;
}
.region-banner {
 background: var(--hero-bg, linear-gradient(135deg, var(--palette-blue-primary, #0f6cbd) 0%, var(--palette-blue-secondary, #2b88d8) 100%));
 color: var(--hero-text, #fff);
 padding: var(--spacing-lg,24px) var(--spacing-xl,32px);
 border-radius: var(--radius-lg,12px);
 margin-bottom: var(--spacing-lg,24px);
 display: flex;
 align-items: center;
 gap: var(--spacing-md,16px);
 box-shadow: var(--outlook-shadow-card,10px 30px rgba(0,0,0,0.1));
}
.region-banner-icon {
 width:56px;
 height:56px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255,255,255,0.15);
 border-radius: var(--radius-lg,12px);
 font-size: var(--icon-size-lg,24px);
}
.region-banner-content h3 {
 font-size: var(--font-size-xl,22px);
 font-weight: var(--font-weight-bold,700);
 margin:0 var(--spacing-xs,6px)0;
 line-height: var(--line-height-tight,1.2);
}
.region-banner-content p {
 font-size: var(--font-size-sm,14px);
 opacity:0.9;
 margin:0;
}
.cards-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
 gap: var(--spacing-lg,24px);
}
.breakdown-card {
 background: var(--outlook-card-bg, #fff);
 border: var(--border-width,1px) solid var(--outlook-card-border, #e5e5e5);
 border-radius: var(--card-radius,12px);
 overflow: hidden;
 transition: var(--transition-all,0.2s ease);
 box-shadow: var(--outlook-shadow-subtle, 0 6px 20px rgba(0,0,0,0.04));
}
.breakdown-card:hover {
 border-color: var(--outlook-border-hover, #c5c5c5);
 box-shadow: var(--outlook-shadow-card,10px 30px rgba(0,0,0,0.08));
}
.breakdown-card-header {
 padding: var(--spacing-md,16px) var(--spacing-lg,24px);
 background: var(--outlook-bg-secondary, #f7f9fb);
 border-bottom: var(--border-width,1px) solid var(--outlook-border-light, #e5e5e5);
 display: flex;
 align-items: center;
 gap: var(--spacing-sm,8px);
}
.breakdown-card-header i {
 font-size: var(--icon-size-md,18px);
 color: var(--palette-blue-primary, #0f6cbd);
}
.breakdown-card-header h5 {
 margin:0;
 font-size: var(--font-size-base,16px);
 font-weight: var(--font-weight-semibold,600);
 color: var(--outlook-text-primary, #1b1b1b);
}
.breakdown-card-body {
 padding: var(--spacing-lg,24px);
}
.breakdown-item { margin-bottom: var(--spacing-md,16px); }
.breakdown-item:last-child { margin-bottom:0; }
.breakdown-item-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-xs,6px);
 gap: var(--spacing-sm,8px);
}
.breakdown-item-label {
 font-size: var(--font-size-sm,14px);
 color: var(--outlook-text-secondary, #6b6b6b);
 max-width:70%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.breakdown-item-value {
 font-size: var(--font-size-sm,14px);
 font-weight: var(--font-weight-bold,700);
 color: var(--outlook-text-primary, #1b1b1b);
 white-space: nowrap;
}
.breakdown-progress {
 height:8px;
 background: var(--outlook-bg-secondary, #f7f9fb);
 border-radius: var(--radius-sm,6px);
 overflow: hidden;
}
.breakdown-progress-bar {
 height:100%;
 border-radius: var(--radius-sm,6px);
 transition: width var(--transition-slow,0.35s ease);
 background: linear-gradient(90deg, var(--palette-blue-primary, #0f6cbd), var(--palette-blue-secondary, #3a96dd));
}
.card-agua .breakdown-card-header i { color: var(--palette-blue-primary, #0f6cbd); }
.card-agua .breakdown-progress-bar { background: linear-gradient(90deg, var(--palette-blue-primary, #0f6cbd), var(--palette-blue-secondary, #3a96dd)); }
.card-saneamiento .breakdown-card-header i { color: var(--palette-teal, #0f9d8f); }
.card-saneamiento .breakdown-progress-bar { background: linear-gradient(90deg, var(--palette-teal, #0f9d8f), var(--color-success, #0ca678)); }
.card-zona .breakdown-card-header i { color: var(--binas-magenta, #c93b8f); }
.card-zona .breakdown-progress-bar { background: linear-gradient(90deg, var(--binas-magenta, #c93b8f), #8e44ad); }
.card-nbi .breakdown-card-header i { color: var(--binas-orange, #f08c00); }
.card-nbi .breakdown-progress-bar { background: linear-gradient(90deg, var(--binas-orange, #f08c00), #e67e22); }
.loading-state {
 text-align: center;
 padding: var(--spacing-16,64px) var(--spacing-xl,32px);
 color: var(--outlook-text-secondary, #6b6b6b);
}
.loading-state .spinner-border {
 width:3rem;
 height:3rem;
 border-width:0.25rem;
 color: var(--palette-blue-primary, #0f6cbd);
}
.loading-state p {
 margin-top: var(--spacing-md,16px);
 font-size: var(--font-size-sm,14px);
}
.error-state {
 text-align: center;
 padding: var(--spacing-xl,32px);
 background: var(--insight-high-bg, #fff5f5);
 border: var(--border-width,1px) solid var(--insight-high-border, #f8d7da);
 border-radius: var(--radius-md,10px);
 color: var(--insight-high, #b23c3c);
}
.error-state i { margin-right: var(--spacing-sm,8px); }
.indicator-card {
 transition: box-shadow 0.2s ease, border-color 0.2s ease;
 cursor: pointer;
 height:100%;
 display: flex;
 flex-direction: column;
 border:1px solid var(--bs-border-color, #dee2e6);
 border-radius: var(--bs-border-radius,0.375rem);
}
.indicator-card:hover {
 box-shadow: 0.25rem 0.5rem rgba(0,0,0,0.075);
 border-color: var(--bs-primary, #0d6efd);
}
.indicator-card .card-body {
 display: flex;
 flex-direction: column;
 flex:1;
}
.stat-label { color: var(--bs-secondary, #6c757d); flex:1; }
.stat-value { font-weight:600; color: var(--bs-body-color, #212529); white-space: nowrap; }
@keyframes loading {
0% { background-position:200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width:768px) {
 .filter-group { min-width:100%; }
 .region-banner {
 flex-direction: column;
 text-align: center;
 padding: var(--spacing-md,16px);
 }
 .region-banner-content h3 { font-size: var(--font-size-lg,18px); }
 .cards-grid { grid-template-columns:1fr; }
 .breakdown-card-body { padding: var(--spacing-md,16px); }
 .indicator-national-value { font-size:1.75rem; }
 .indicator-card-title { font-size:0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
 .breakdown-card, .btn-load, .filter-group select, .breakdown-progress-bar, .indicator-card, .sparkline-fill {
 transition: none;
 }
}
@media (prefers-contrast: high) {
 .breakdown-card { border-width: var(--border-width-thick,2px); }
 .filter-group select:focus { outline:2px solid var(--outlook-border-focus, #0078d4); }
}
.explorer-tab.active { background: var(--outlook-bg-secondary); color: var(--outlook-text-primary); border-color: var(--outlook-border-hover); }
.explorer-filter-bar { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--spacing-md); background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-md); padding: var(--spacing-md); }
.explorer-filter-bar .filter-group { display: flex; flex-direction: column; gap: var(--spacing-2); }
.explorer-filter-bar .filter-actions { display: flex; align-items: flex-end; }
.explorer-panel { display: none; }
.explorer-panel.active { display: block; animation: fadeInExplorer var(--duration-base) var(--ease-out); }
@keyframes fadeInExplorer { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }
.panel-col.wide { flex: 2 1 480px; }
.dx-chart-responsive { width:100%; height:280px; background: var(--outlook-bg-secondary); border:1px solid var(--outlook-border-light); border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; color: var(--outlook-text-tertiary); font-size: var(--font-size-sm); }
@media (max-width: 992px) { .panel-row { flex-direction: column; } .dx-chart-responsive { height:220px;} }
@media (max-width: 576px) { .explorer-filter-bar { grid-template-columns: 1fr 1fr; } .explorer-tab { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-xs);} }
.kpi-card { gap: var(--spacing-2); }
.kpi-card .kpi-change { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); margin-top: var(--spacing-1); }
.kpi-change.positive { color: var(--color-success); }
.kpi-change.negative { color: var(--color-danger); }
.kpi-change.neutral { color: var(--outlook-text-tertiary); }
.skeleton, .skeleton-table { background: var(--outlook-bg-secondary); border-radius: var(--radius-md); min-height: 80px; position: relative; overflow: hidden; }
.skeleton::after, .skeleton-table::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.explorer-tab:focus-visible, .explorer-filter-bar select:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
#compositeComponentsRow .kpi-card { min-height:110px; }
#compositeComponentsRow .kpi-label { font-size: var(--font-size-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#compositeComponentsRow .kpi-change { font-size: var(--font-size-xxs); background: var(--outlook-bg-secondary); padding:2px 6px; border-radius: var(--radius-pill); display:inline-block; }
#compositeLocation { font-size: var(--font-size-xs); color: var(--outlook-text-secondary); }
#indicatorCardsRow .kpi-card { min-height:100px; }
#indicatorCardsRow .kpi-label { font-size: var(--font-size-xs); }
#indicatorCardsRow .kpi-value { font-size:1.25rem; }
@media (max-width:576px) {
  #indicatorCardsRow .kpi-value { font-size:1.1rem; }
  #compositeComponentsRow .kpi-card { min-height:96px; }
}
.code-block {
    background: var(--outlook-bg-secondary);
    border: 1px solid var(--outlook-border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    color: var(--outlook-text-primary);
    overflow-x: auto;
    margin: 1rem 0;
}
.variable-card {
    border-left: 4px solid var(--palette-blue-primary);
    background: var(--outlook-bg-tertiary);
    padding: 1rem;
    margin-bottom: 1rem;
}
.variable-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.traceability-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--outlook-bg-secondary);
    color: var(--outlook-text-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: monospace;
    margin-top: 0.5rem;
}
.regional-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}
.region-selector-section {
    margin-bottom: var(--spacing-md);
}
.selector-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}
.selector-title {
    color: white;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}
.selector-body {
    padding: var(--spacing-md);
}
.kpi-comparison-section {
    margin-bottom: var(--spacing-lg);
}
.section-subtitle {
    font-size: var(--font-size-sm);
}
.kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
}
.kpi-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.kpi-icon {
    font-size: var(--font-size-xl);
    color: var(--indicator-color, var(--color-primary));
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--indicator-light-bg, rgba(74, 144, 226, 0.1));
    border-radius: var(--radius-sm);
}
.kpi-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-secondary);
    margin: 0;
    line-height: 1.3;
}
.comparison-section {
    margin-top: var(--spacing-sm);
}
.comparison-badge.badge-neutral {
    background: var(--gray-100);
    color: var(--outlook-text-secondary);
}
.progress-bar.regional {
    height: 100%;
    background: linear-gradient(90deg, var(--indicator-color, var(--color-primary)) 0%, var(--indicator-color, var(--color-primary)) 100%);
    transition: width 0.6s ease;
    position: relative;
}
.analysis-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.gap-chart-container {
    min-height: 250px;
}
.gap-interpretation {
    margin-top: var(--spacing-md);
}
.gap-interpretation .alert {
    border-left-width: 4px;
}
.interpretation-icon {
    font-size: var(--font-size-xl);
}
.interpretation-priority {
    display: block;
    margin-bottom: var(--spacing-xs);
}
.interpretation-message {
    color: var(--outlook-text-secondary);
}
.interpretation-recommendations {
    padding-left: var(--spacing-md);
    margin: 0;
    font-size: var(--font-size-sm);
}
.interpretation-recommendations li {
    margin-bottom: var(--spacing-xs);
}
.gap-interpretation .alert.alert-critical {
    background: var(--danger-light);
    border-color: var(--color-danger);
    color: var(--danger-dark);
}
.gap-interpretation .alert.alert-high {
    background: rgba(255, 152, 0, 0.1);
    border-color: #FF9800;
    color: #E65100;
}
.gap-interpretation .alert.alert-moderate {
    background: var(--warning-light);
    border-color: var(--color-warning);
    color: var(--warning-dark);
}
.gap-interpretation .alert.alert-low {
    background: var(--success-light);
    border-color: var(--color-success);
    color: var(--success-dark);
}
.radar-chart-container {
    min-height: 350px;
}
.similar-regions-list {
    border-top: 1px solid var(--border-light);
    padding-top: var(--spacing-md);
}
.list-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.similar-items {
    margin: 0;
}
.subregional-section {
    margin-bottom: var(--spacing-lg);
}
.actions-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--border-light);
}
.skeleton-card {
    opacity: 0.7;
}
.skeleton-line,
.skeleton-bar {
    background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-100) 50%, var(--gray-200) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-line {
    height: 14px;
    width: 100%;
}
.skeleton-line.line-xs {
    width: 30%;
}
.skeleton-line.line-sm {
    width: 60%;
}
.skeleton-line.line-md {
    width: 80%;
}
.skeleton-line.line-lg {
    height: 36px;
    width: 50%;
}
.skeleton-bar {
    height: 24px;
    width: 100%;
}
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-in both;
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out both;
}
.animate-delay-1 {
    animation-delay: 0.1s;
}
.animate-delay-2 {
    animation-delay: 0.2s;
}
.animate-delay-3 {
    animation-delay: 0.3s;
}
.animate-delay-4 {
    animation-delay: 0.4s;
}
.animate-delay-5 {
    animation-delay: 0.5s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .analysis-row {
        grid-template-columns: 1fr;
    }

    .kpi-cards-row {
        grid-template-columns: 1fr;
    }

    .actions-section {
        flex-direction: column;
    }

    .actions-section .btn {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .value-large {
        font-size: var(--font-size-2xl);
    }
}
.geo-hidden {
    display: none !important;
}

/* === _ComparisonModal styles (extracted from SimpleExplorer/_ComparisonModal.cshtml) === */
.comparison-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.comparison-indicator-card { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: 3px; padding: 0.4rem 0.6rem; display: grid; grid-template-columns: 100px 200px 60px 1fr; gap: 0.6rem; align-items: center; min-height: 36px; transition: all 0.2s ease; }
.comparison-indicator-card:hover { background: var(--outlook-bg-secondary); border-color: var(--palette-blue-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.indicator-info-compact { display: flex; align-items: center; gap: 0.4rem; min-width: 280px; flex-shrink: 0; }
.indicator-mini-category { font-size: 0.6rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.3px; padding: 0.15rem 0.35rem; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.indicator-mini-title { font-size: 0.75rem; font-weight: var(--font-weight-semibold); color: var(--outlook-text-primary); line-height: 1.2; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicator-mini-value { font-size: 0.75rem; font-weight: var(--font-weight-bold); color: var(--palette-blue-primary); white-space: nowrap; min-width: 50px; text-align: right; flex-shrink: 0; }
.chart-container-horizontal { height: 24px; position: relative; display: flex; align-items: center; }
.chart-bars-horizontal { position: absolute; left: 0; right: 0; height: 20px; background: linear-gradient(to right, var(--outlook-bg-secondary) 0%, var(--outlook-bg-primary) 50%, var(--outlook-bg-secondary) 100%); border: 1px solid var(--outlook-border); border-radius: 3px; padding: 2px; display: flex; align-items: stretch; justify-content: flex-start; gap: 1px; }
.bar-wrapper-horizontal { flex: 1; display: flex; align-items: center; position: relative; }
.bar-wrapper-horizontal:hover { z-index: 10; }
.bar-wrapper-horizontal.selected { z-index: 5; }
.bar-horizontal { width: 100%; height: 100%; border-radius: 2px; transition: opacity 0.2s ease; opacity: 0.9; }
.bar-wrapper-horizontal:hover .bar-horizontal { opacity: 0.8; }
.bar-wrapper-horizontal.selected .bar-horizontal { box-shadow: 0 0 0 2px var(--palette-blue-primary) inset; }
.region-selectable { cursor: pointer; transition: background-color 0.2s ease; }
.region-selectable:hover { background-color: var(--oklch-blue-bg); }
.compare-action { opacity: 0; transition: opacity 0.2s ease; }
.region-selectable:hover .compare-action { opacity: 1; }
@media (max-width: 1200px) {
    .indicator-info-compact { min-width: 220px; }
    .indicator-mini-title { font-size: 0.7rem; }
}

/* === AsignacionMasiva styles (usadas por el modal de asignación masiva embebido en EphAdmin/Config.cshtml) === */
.masiva-card { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.masiva-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem; }
.masiva-card-title { font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--outlook-text-primary); margin: 0; }
.masiva-filter-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.masiva-filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
.masiva-filter-group label { font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--outlook-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.masiva-result-banner { border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.9rem; margin-top: 1rem; display: none; }
.masiva-result-banner.success { background: var(--outlook-bg-secondary); border: 1px solid var(--palette-green); color: var(--outlook-text-primary); display: block; }
.masiva-result-banner.error { background: var(--outlook-bg-secondary); border: 1px solid var(--palette-red); color: var(--outlook-text-primary); display: block; }
.masiva-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.masiva-stat { background: var(--outlook-bg-secondary); border-radius: var(--radius-sm); padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--outlook-text-secondary); }
.masiva-stat strong { color: var(--palette-teal); }
.masiva-back-row { margin-bottom: 1rem; }

/* === Evolucion styles (usadas por eph-topbar/tabs en EphAnalisis/Index.cshtml) === */
.eph-topbar { position: sticky; top: 0; z-index: 1040; background-color: var(--outlook-bg-primary); border-bottom: 1px solid var(--outlook-border-light); }
.eph-topbar.scrolled { box-shadow: var(--outlook-shadow-elevated); }
.eph-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 12px 20px; align-items: end; }
.eph-filter-item { display: flex; flex-direction: column; gap: 4px; }
.eph-filter-item label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--outlook-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.eph-section-card { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
.eph-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--outlook-bg-secondary); background: var(--outlook-bg-secondary); flex-wrap: wrap; gap: 10px; }
.eph-section-header h6 { margin: 0; font-weight: var(--font-weight-semibold); color: var(--outlook-text-primary); }
.eph-section-body { padding: 20px; }
.view-toggle { display: flex; gap: 0; background: var(--outlook-bg-secondary); border-radius: var(--radius-md); padding: 4px; }
.view-toggle button { border: none; background: transparent; padding: 6px 16px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--outlook-text-secondary); cursor: pointer; }
.view-toggle button.active { background: var(--outlook-bg-primary); color: var(--palette-blue-primary); box-shadow: 0 1px 3px var(--outlook-shadow-subtle); }
.charts-grid-2x2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 20px; }
.chart-stacked-box { min-height: 360px; }
.chart-stacked-box .dx-chart { height: 320px !important; }

/* === AdvancedAnalysis styles (extracted from AdvancedAnalysis/Index.cshtml) === */
.kpi-row { gap: var(--spacing-sm); flex-wrap: wrap; }
.kpi-card { padding: var(--spacing-sm); min-width: 190px; border-radius: var(--radius-lg); box-shadow: var(--outlook-shadow-subtle); background: var(--outlook-bg-primary); }
.kpi-card .kpi-icon { width: 38px; height: 38px; }
.kpi-card .kpi-value { font-size: var(--font-size-lg); }
.regions-table-section .card-body { padding: 0 var(--spacing-sm) var(--spacing-sm); }
.table-controls .btn { padding: 0.35rem 0.65rem; }
.dimension-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--outlook-border-light); border-radius: var(--radius-sm); padding: 0.5rem; background-color: var(--outlook-bg-primary); }
.dimension-item { display: flex; align-items: center; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: var(--radius-sm); }
.dimension-item:hover { background-color: var(--outlook-bg-hover); }
.pivot-table-container { overflow: auto; max-height: 600px; }
.pivot-table th, .pivot-table td { white-space: nowrap; padding: 0.5rem 1rem; border: 1px solid var(--outlook-border-light); }
.pivot-table th { background-color: var(--outlook-bg-secondary); font-weight: var(--font-weight-semibold); }
.geo-content-row { flex: 1; display: grid; grid-template-columns: 100%; gap: var(--spacing-lg); min-height: 0; }

/* === SummaryData TreeList compact styles (extracted from SummaryData/Index.cshtml) === */
#censusSummaryTreeList, #censusSummaryTreeList .dx-treelist-headers, #censusSummaryTreeList .dx-treelist-rowsview { font-size: 0.78rem !important; }
#censusSummaryTreeList .dx-treelist-headers .dx-treelist-header-panel, #censusSummaryTreeList .dx-treelist-headers .dx-header-row td, #censusSummaryTreeList .dx-data-row td, #censusSummaryTreeList .dx-treelist-rowsview td { padding: 3px 6px !important; vertical-align: middle !important; font-size: 0.78rem !important; }
#censusSummaryTreeList .dx-treelist-headers .dx-header-row { height: 32px; }
#censusSummaryTreeList .btn-sm { padding: 0.12rem 0.3rem; font-size: 0.72rem; line-height: 1; }
#censusSummaryTreeList { height: calc(100vh - 220px) !important; max-height: calc(100vh - 150px) !important; }
#censusSummaryTreeList .dx-scrollable-container, #censusSummaryTreeList .dx-scrollable-content { overflow-y: scroll !important; -ms-overflow-style: scrollbar; }
#censusSummaryTreeList .dx-row-lines .dx-treelist-row .dx-command-select { padding: 0 !important; }
#censusSummaryTreeList .dx-treelist-headers td.dx-treelist-fixed-cell, #censusSummaryTreeList .dx-data-row td.dx-treelist-fixed-cell { background: var(--outlook-bg-primary); box-shadow: 2px 0 4px rgba(0,0,0,0.03); }
#censusSummaryTreeList .dx-scrollable-container { overflow-x: auto !important; }
.region-cell { display: inline-flex; align-items: center; gap: 6px; }
.region-cell .toggle-icon { cursor: pointer; font-size: 0.9rem; width: 1em; text-align: center; }
.region-cell .region-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; }

/* === Icosam component cards (extracted from Explorer/Icosam.cshtml) === */
.component-card { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--outlook-shadow-subtle); height: 100%; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.component-card .header { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); }
.component-card .title { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--text-primary); margin: 0; }
.component-card .meta { font-size: var(--font-size-xs); color: var(--outlook-text-secondary); }
.mini-bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--outlook-bg-secondary); overflow: hidden; }
.mini-bar .fill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--palette-blue-primary), var(--palette-teal)); transition: width var(--transition-fast); }
.mini-bar.weight .fill { background: linear-gradient(90deg, var(--palette-orange), var(--outlook-orange, #f29400)); }
.value-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-xs); color: var(--outlook-text-secondary); }
.variables-compact .var-row { display: flex; align-items: center; gap: var(--spacing-sm); padding: 6px 0; border-bottom: 1px solid var(--outlook-border-light); }
.variables-compact .var-row:last-child { border-bottom: none; }
.variables-compact .var-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--text-primary); }
.variables-compact .var-value { font-size: var(--font-size-xs); color: var(--outlook-text-secondary); min-width: 80px; text-align: right; }
.variables-compact .mini-bar { flex: 1; }
.icosam-kpi-row { gap: var(--spacing-sm); }
.icosam-kpi-card { min-width: 180px; }

/* === IcosamDef styles (extracted from Explorer/IcosamDef.cshtml) === */
.icosam-def-container { display: flex; flex-direction: column; gap: var(--spacing-md); }
/* .info-card and .sankey-shell shared with IcosamStory — see merged block below */

/* === IcosamDef + IcosamStory shared base (identical styles merged) === */
.info-card { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--outlook-shadow-subtle); }
.info-card h6 { margin-bottom: var(--spacing-xs); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.sankey-shell { background: var(--outlook-bg-primary); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-lg); box-shadow: var(--outlook-shadow-subtle); padding: var(--spacing-md); }
.sankey-wrapper { width: 100%; height: 520px; }
.legend-pill { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--outlook-bg-secondary); border: 1px solid var(--outlook-border-light); font-size: var(--font-size-xs); }
.hint-text { color: var(--outlook-text-secondary); font-size: var(--font-size-xs); }
.node rect { rx: 6px; ry: 6px; cursor: pointer; transition: opacity 0.2s; }
.node text { font-size: var(--font-size-xs); fill: var(--text-primary); pointer-events: none; }
.link { fill: none; stroke-opacity: 0.38; transition: stroke-opacity var(--transition-fast); }
.link:hover { stroke-opacity: 0.68; }

/* === IcosamDef-specific === */
.info-card p { margin: 0; color: var(--outlook-text-secondary); font-size: var(--font-size-sm); }
.sankey-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-sm); align-items: center; margin-bottom: var(--spacing-sm); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-sm); }
.step-tile { border: 1px dashed var(--outlook-border-light); border-radius: var(--radius-md); padding: var(--spacing-sm); background: var(--outlook-bg-secondary); }
.step-tile h6 { margin: 0 0 var(--spacing-xxs); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--text-primary); }
.step-tile p { margin: 0; font-size: var(--font-size-xs); color: var(--outlook-text-secondary); }
.link-label { fill: var(--text-primary); font-size: 10px; opacity: 0.9; pointer-events: none; }
.node-label-secondary { fill: var(--outlook-text-secondary); font-size: 10px; }
.mini-table { margin-top: var(--spacing-sm); border: 1px solid var(--outlook-border-light); border-radius: var(--radius-md); overflow: hidden; }
.mini-table table { width: 100%; border-collapse: collapse; background: var(--outlook-bg-primary); }
.mini-table th, .mini-table td { padding: 8px 10px; font-size: 12px; text-align: left; border-bottom: 1px solid var(--outlook-border-light); }
.mini-table th { background: var(--outlook-bg-secondary); color: var(--text-primary); font-weight: var(--font-weight-bold); }
.mini-table tr:last-child td { border-bottom: none; }
.badge-pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--outlook-bg-secondary); border: 1px solid var(--outlook-border-light); font-size: var(--font-size-xs); color: var(--text-primary); }

/* === IcosamStory-specific (after shared base above) === */
.icosam-story-container { display: flex; flex-direction: column; gap: var(--spacing-md); }
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.component-chip { border-radius: var(--radius-pill); border: 1px solid var(--outlook-border-light); padding: 4px 10px; font-size: var(--font-size-xs); background: var(--outlook-bg-secondary); }
/* IcosamStory D3 overrides — more complete than IcosamDef versions */
.node text { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); fill: var(--text-primary); pointer-events: none; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.link:hover { stroke-opacity: 0.68; }
.table-hover tbody tr:hover { background-color: var(--outlook-bg-secondary); }
.row-highlight { background-color: var(--outlook-bg-secondary) !important; font-weight: var(--font-weight-semibold); }
.node-dimmed { opacity: 0.3; }
.link-dimmed { stroke-opacity: 0.1; }
.link-highlight { stroke-opacity: 0.8; }

/* Enhanced KPI card variant */
.kpi-card-enhanced {
    background: var(--outlook-card-bg);
    border: 1px solid var(--outlook-card-border);
    border-left: 3px solid var(--palette-blue-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--outlook-shadow-card);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.kpi-card-enhanced:hover {
    box-shadow: var(--outlook-shadow-elevated);
}

/* Fade-in-up animation */
.animate-in {
    animation: fadeInUp var(--duration-base) var(--transition-base) forwards;
    opacity: 0;
}

/* Organization badge */
.org-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-2);
    background: var(--bg-grey-100);
    color: var(--outlook-text-secondary);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Review status badge */
.review-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.review-badge.badge-approved {
    background: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}

.review-badge.badge-pending {
    background: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
}

/* Chart legend square */
.legend-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* Previously active state */
.was-active {
    background: var(--outlook-bg-selected);
    opacity: 0.85;
}

/* Table row action button */
.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--outlook-icon-neutral);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.table-action-btn:hover {
    color: var(--outlook-icon-hover);
    background: var(--outlook-bg-hover);
}

/* Mobile menu open state */
.mobile-open {
    overflow: hidden;
}

.mobile-open .binas-sidebar {
    transform: translateX(0);
}

/* Generic loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Census/DetailedData tabs (Detalle / Resumen) ─────────────────── */
.dd-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
}
.dd-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dd-tab:hover {
    color: var(--gray-700);
}
.dd-tab.active {
    color: var(--module-census-accent);
    border-bottom-color: var(--module-census-accent);
}
.dd-tab i {
    font-size: 0.78rem;
}
.dd-tab-content {
    display: none;
}
.dd-tab-content.active {
    display: block;
}
@media (max-width: 768px) {
    .dd-tabs {
        gap: 0;
    }
    .dd-tab {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    .dd-tab span {
        display: none;
    }
}