/* ============================================================
   RESPONSIVE MOBILE - OpenREM
   Archivo unificado para todas las páginas
   ============================================================ */

/* ============================================================
   ESCALA TIPOGRÁFICA MÓVIL - ARMÓNICA
   Basada en ratio 1.125 (major second)
   ============================================================ */
:root {
    /* ESCALA MÓVIL UNIFICADA */
    /* Nivel 1: Títulos principales */
    --mobile-h1: 1.1rem;        /* Header principal */
    --mobile-h2: 0.95rem;       /* Títulos de sección */
    --mobile-h3: 0.85rem;       /* Subtítulos */
    
    /* Nivel 2: Texto */
    --mobile-body: 0.8rem;      /* Texto normal */
    --mobile-body-sm: 0.75rem;  /* Texto secundario */
    
    /* Nivel 3: UI Elements */
    --mobile-label: 0.7rem;     /* Labels, badges */
    --mobile-hint: 0.65rem;     /* Hints, ayudas */
    --mobile-micro: 0.6rem;     /* Texto muy pequeño */
    
    /* Botones */
    --mobile-btn: 0.85rem;      /* Botones principales */
    --mobile-btn-sm: 0.75rem;   /* Botones secundarios */
    
    /* MANTENER VARIABLES LEGACY para compatibilidad */
    --fs-title-xl: 1.1rem;
    --fs-title-lg: 0.95rem;
    --fs-title-md: 0.85rem;
    --fs-title-sm: 0.8rem;
    --fs-text-lg: 0.8rem;
    --fs-text-md: 0.75rem;
    --fs-text-sm: 0.7rem;
    --fs-text-xs: 0.65rem;
    --fs-label: 0.7rem;
    --fs-badge: 0.65rem;
    --fs-hint: 0.6rem;
    --fs-btn-lg: 0.85rem;
    --fs-btn-md: 0.8rem;
    --fs-btn-sm: 0.75rem;
}

/* ============================================================
   ESTILOS BASE PARA FILTROS DE ESTABLECIMIENTO
   ============================================================ */
.filtros-estab-contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.filtro-box {
    border-radius: 12px;
    padding: 1.2rem;
    border-width: 2px;
    border-style: solid;
}

.filtro-box-ubicacion {
    background: #e3f2fd;
    border-color: #1976d2;
}

.filtro-box-caracteristicas {
    background: #e8f5e9;
    border-color: #388e3c;
}

.filtro-box-titulo {
    margin: 0 0 1rem 0;
    font-size: var(--fs-text-lg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-box-titulo-ubicacion {
    color: #1565c0;
}

.filtro-box-titulo-caracteristicas {
    color: #2e7d32;
}

.filtro-box-grid {
    display: grid;
    gap: 1rem;
}

.filtro-box-grid-2cols {
    grid-template-columns: 1fr 1fr;
}

.filtro-input-busqueda {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--fs-text-md);
}

.filtro-ayuda {
    color: #666;
    font-size: var(--fs-text-sm);
}

/* ============================================================
   STEPPER ACORDEÓN - Paneles se abren bajo cada paso
   ============================================================ */
.stepper-acordeon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.stepper-acordeon .stepper-paso-box {
    grid-column: auto;
}

.stepper-acordeon .stepper-info-panel {
    display: none;
    grid-column: 1 / -1;
    margin: 0.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border: 2px solid #667eea;
    border-radius: 10px;
    animation: slideDown 0.3s ease;
}

.stepper-acordeon .stepper-info-panel.visible {
    display: block;
}

.stepper-acordeon .stepper-info-panel h4 {
    font-size: var(--fs-title-sm);
    color: #333;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stepper-acordeon .stepper-info-panel h4 i {
    color: #667eea;
}

.stepper-acordeon .stepper-info-panel p {
    font-size: var(--fs-text-sm);
    color: #555;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

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

/* ============================================================
   ANIMACIÓN DE ATENCIÓN - Panel de Filtros
   ============================================================ */

/* Pulso sutil en el header */
.animacion-atencion {
    animation: pulsoSutil 2s ease-in-out infinite;
}

@keyframes pulsoSutil {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(40, 167, 69, 0.6), 0 0 0 4px rgba(40, 167, 69, 0.1);
    }
}

/* Flecha animada que sube y baja */
.flecha-animada {
    animation: flechaRebote 1.5s ease-in-out infinite;
}

@keyframes flechaRebote {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* Quitar animaciones cuando el panel está abierto */
.panel-estab-header.abierto .flecha-animada,
.panel-establecimientos.abierto .flecha-animada {
    animation: none;
}

.panel-estab-header.abierto,
.panel-establecimientos.abierto .panel-estab-header {
    animation: none;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* ============================================================
   STEPPER - ESTADOS DINÁMICOS
   ============================================================ */

/* Transición suave entre estados */
.stepper-paso-box {
    transition: all 0.3s ease !important;
}

.stepper-paso-numero {
    transition: all 0.3s ease !important;
}

/* Estado pendiente (gris) */
.stepper-paso-box.pendiente {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    opacity: 0.7;
}

.stepper-paso-box.pendiente .stepper-paso-numero {
    background: #e0e0e0 !important;
    color: #666 !important;
}

/* Estado activo (azul brillante) */
.stepper-paso-box.activo {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
    border-color: #1565c0 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(21, 101, 192, 0.4) !important;
    opacity: 1;
}

.stepper-paso-box.activo .stepper-paso-numero {
    background: rgba(255,255,255,0.3) !important;
    color: white !important;
}

/* Estado completado - Teal elegante (no verde chillón) */
.stepper-paso-box.completado {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border-color: #0d9488 !important;
    color: white !important;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
}

.stepper-paso-box.completado .stepper-paso-numero {
    background: rgba(255,255,255,0.3) !important;
    color: white !important;
}

/* ============================================================
   CONTAINER - Reducir espacio superior
   ============================================================ */
.container {
    margin-top: 0.5rem !important;
}

.stepper-container {
    margin-bottom: 1rem !important;
}

.banner-info-integrado {
    margin-top: 0 !important;
}

/* ============================================================
   ESTILOS PARA MES DESDE/HASTA
   ============================================================ */
.grid-meses-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.select-mes {
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: var(--fs-text-lg);
    width: 100%;
}

/* ============================================================
   CARACTERIZACIONES RESPONSIVE
   ============================================================ */
.caracterizaciones-panel {
    margin-top: 1.5rem;
}

.caracterizaciones-grid {
    display: flex;
    gap: 1.5rem;
}

.caracterizacion-box {
    flex: 1;
    min-width: 0;
}

.caracterizacion-list {
    max-height: 300px;
    overflow-y: auto;
}

.caracterizacion-item {
    padding: 0.8rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    font-size: var(--fs-text-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================
   MESES GRID RESPONSIVE - Estilos base
   ============================================================ */
.meses-grid-responsive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    gap: 8px;
}

.mes-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.mes-item .mes-indicador {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-text-md);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mes-item.disponible .mes-indicador {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
}

.mes-item.no-disponible .mes-indicador {
    background: #e0e0e0;
    color: #9e9e9e;
}

.mes-item .mes-nombre {
    font-size: var(--fs-hint);
    font-weight: 600;
    color: #546e7a;
}

/* ============================================================
   ESTILOS PARA BOTONES CONSULTAR/LIMPIAR
   ============================================================ */
.botones-consulta-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.btn-consultar {
    min-width: 200px;
}

.btn-limpiar {
    min-width: 180px;
}

/* ============================================================
   TABLETS (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    
    /* Container paso 1 - descargas masivas */
    .container-paso1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Caracterizaciones grid */
    .caracterizaciones-grid {
        flex-direction: column !important;
    }
    
    .caracterizacion-box {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Filtros establecimiento - forzar 1 columna */
    .filtros-estab-contenedor {
        grid-template-columns: 1fr !important;
    }
    
    .filtro-box-grid-2cols {
        grid-template-columns: 1fr !important;
    }
    
    /* MES DESDE/HASTA - 1 columna en tablets */
    .grid-meses-selector {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Caracterizaciones en tablets */
    .caracterizaciones-grid {
        flex-direction: column !important;
    }
    
    .caracterizacion-box {
        width: 100% !important;
    }
    
    /* Stepper acordeón en tablets - 3 columnas */
    .stepper-acordeon {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Meses en tablets - grid 6 columnas */
    .meses-grid-responsive {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 8px !important;
    }
    
    .mes-item {
        flex-direction: column !important;
    }
    
    .mes-item .mes-indicador {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ============================================================
   MÓVILES (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    
    /* ==================== ESCALA TIPOGRÁFICA ARMÓNICA ==================== */
    /* 
       Jerarquía visual consistente:
       - Nivel 1 (títulos principales): 1rem
       - Nivel 2 (subtítulos/headers): 0.85rem
       - Nivel 3 (texto normal): 0.8rem
       - Nivel 4 (texto secundario): 0.75rem
       - Nivel 5 (hints/badges): 0.7rem
       - Nivel 6 (micro): 0.65rem
    */
    
    /* ==================== GENERAL ==================== */
    .container {
        padding: 0.8rem !important;
        margin: 0.5rem auto !important;
    }
    
    .card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* ==================== HEADER PRINCIPAL ==================== */
    .header {
        padding: 0.8rem 1rem !important;
    }
    
    .header h1 {
        font-size: 1rem !important;
    }
    
    .header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }
    
    .btn-volver {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
    }
    
    /* ==================== HEADER CON TABS - REDISEÑO MÓVIL ==================== */
    .header-with-tabs {
        padding: 0.6rem 0.8rem 0.4rem !important;
    }
    
    .header-main {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.15rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .header-logo-title {
        flex-direction: column !important;
        gap: 0.15rem !important;
    }
    
    .header-logo {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
        margin-bottom: 0.1rem !important;
    }
    
    /* ===== ESCALA TIPOGRÁFICA UNIFICADA ===== */
    /* Base: 0.75rem, escala 1.15x */
    
    /* Título principal - 0.9rem */
    .header-text h1 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* Subtítulo - 0.7rem */
    .header-subtitle {
        font-size: 0.7rem !important;
        opacity: 0.9 !important;
        margin: 0.1rem 0 0 0 !important;
        font-weight: 400 !important;
    }
    
    .header-info-mini {
        display: none !important;
    }
    
    /* Fecha actualización - 0.6rem */
    .fecha-actualizacion {
        font-size: 0.6rem !important;
        margin-top: 0.1rem !important;
        opacity: 0.75 !important;
        font-weight: 400 !important;
    }
    
    /* ==================== TABS NAVEGACIÓN - DISEÑO UNIFORME ==================== */
    .tabs-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        padding: 0.4rem !important;
        background: rgba(0,0,0,0.2) !important;
        border-radius: 10px !important;
        margin-top: 0.4rem !important;
    }
    
    .tab-item {
        width: 100% !important;
        padding: 0.6rem 0.8rem !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.6rem !important;
        background: rgba(255,255,255,0.1) !important;
        border: none !important;
        color: rgba(255,255,255,0.9) !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
        min-height: 40px !important;
    }
    
    /* Iconos de tabs - TAMAÑO UNIFORME */
    .tab-item i {
        width: 18px !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
        opacity: 0.85 !important;
    }
    
    /* Texto de tabs - TAMAÑO UNIFORME 0.75rem */
    .tabs-nav .tab-item span,
    .tab-item span {
        display: inline !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        visibility: visible !important;
        opacity: 1 !important;
        letter-spacing: 0.2px !important;
    }
    
    /* TAB ACTIVO - Azul profundo (NO verde) */
    .tab-item.active {
        background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
        color: white !important;
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4) !important;
    }
    
    .tab-item.active i {
        color: white !important;
        opacity: 1 !important;
    }
    
    .tab-item.active span {
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }
    
    /* TABS INACTIVOS - Hover */
    .tab-item:not(.active):hover {
        background: rgba(255,255,255,0.18) !important;
        color: white !important;
    }
    
    /* ==================== MESES DISPONIBILIDAD - GRID RESPONSIVE ==================== */
    .meses-grid-responsive {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }
    
    .mes-item {
        flex-direction: row !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
    }
    
    .mes-item.disponible {
        background: #e8f5e9 !important;
        border: 1px solid #a5d6a7 !important;
    }
    
    .mes-item.no-disponible {
        background: #fafafa !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    .mes-item .mes-indicador {
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        font-size: var(--fs-hint) !important;
    }
    
    .mes-item.disponible .mes-indicador {
        color: #2e7d32 !important;
    }
    
    .mes-item.no-disponible .mes-indicador {
        color: #bdbdbd !important;
    }
    
    .mes-item .mes-nombre {
        font-size: var(--fs-badge) !important;
    }
    
    .mes-item.disponible .mes-nombre {
        color: #2e7d32 !important;
    }
    
    .mes-item.no-disponible .mes-nombre {
        color: #bdbdbd !important;
    }
    
    /* Skeleton loader styles */
    .skeleton-months {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.4rem !important;
        padding: 0.5rem !important;
    }
    
    /* ==================== CHOICES.JS SELECTS RESPONSIVE ==================== */
    .choices {
        width: 100% !important;
    }
    
    .choices__inner {
        min-height: 44px !important;
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        height: auto !important;
    }
    
    .choices__list--single {
        padding: 0 !important;
    }
    
    .choices__list--single .choices__item,
    .choices__list--single .choices__item--selectable {
        font-size: 0.8rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
        overflow: visible !important;
        text-overflow: unset !important;
        overflow-wrap: break-word !important;
    }
    
    .choices__list--dropdown .choices__item,
    .choices__list--dropdown .choices__item--selectable {
        font-size: 0.8rem !important;
        padding: 10px 12px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
    }
    
    .choices[data-type*="select-one"] .choices__inner {
        padding-right: 30px !important;
        height: auto !important;
        min-height: 48px !important;
    }
    
    /* Selects nativos responsive */
    select {
        width: 100% !important;
        font-size: 0.8rem !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        white-space: normal !important;
    }
    
    /* Nivel 4: Selects */
    .filter-group select,
    .filtro-estab select {
        font-size: 0.75rem !important;
        padding: 10px !important;
        min-height: 44px !important;
    }
    
    /* Nivel 5: Labels */
    .filter-label,
    .filtro-estab label {
        font-size: 0.7rem !important;
        margin-bottom: 3px !important;
    }
    
    /* ==================== MES DESDE/HASTA - VERTICAL ==================== */
    .grid-meses-selector {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    
    .grid-meses-selector .filter-group {
        width: 100% !important;
    }
    
    .select-mes {
        width: 100% !important;
        font-size: 0.75rem !important;
    }
    
    /* ==================== CARACTERIZACIONES RESPONSIVE ==================== */
    .caracterizaciones-panel {
        margin-top: 0.8rem !important;
    }
    
    .caracterizaciones-header {
        padding: 0.6rem 0.8rem !important;
    }
    
    /* Nivel 3: Título caracterizaciones */
    .caracterizaciones-header h3 {
        font-size: 0.75rem !important;
    }
    
    /* Nivel 5: Subtítulo caracterizaciones */
    .caracterizaciones-header p {
        font-size: 0.65rem !important;
    }
    
    .caracterizaciones-grid {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    
    .caracterizacion-box {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Nivel 4: Título de cada caja */
    .caracterizacion-box h4 {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.7rem !important;
    }
    
    .caracterizacion-list {
        max-height: 250px !important;
        padding: 0.5rem !important;
    }
    
    .caracterizacion-item {
        padding: 0.6rem !important;
        font-size: var(--fs-text-xs) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    
    .caracterizacion-item label {
        font-size: var(--fs-text-xs) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Forzar wrap en items de caracterización */
    #listaFilas,
    #listaColumnas {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* ==================== CARACTERIZACIONES - REDISEÑO MÓVIL ==================== */
    
    /* Contenedor principal de caracterizaciones */
    .caracterizaciones-panel {
        margin-top: 1rem !important;
        padding: 0 !important;
    }
    
    /* Header del panel */
    .caracterizaciones-header {
        padding: 0.8rem 1rem !important;
        margin: 0 !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .caracterizaciones-header h3 {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }
    
    .caracterizaciones-header p {
        font-size: 0.7rem !important;
        margin: 0.3rem 0 0 0 !important;
    }
    
    /* Grid de cajas - vertical */
    .caracterizaciones-grid {
        flex-direction: column !important;
        gap: 0.8rem !important;
        padding: 0.5rem !important;
    }
    
    /* Cada caja (filas/columnas) */
    .caracterizacion-box {
        width: 100% !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    
    /* Título de cada caja */
    .caracterizacion-box h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.6rem 0.8rem !important;
        margin: 0 !important;
        font-size: 0.75rem !important;
        gap: 0.3rem !important;
    }
    
    .caracterizacion-box h4 i {
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Badge contador */
    .caracterizacion-badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Contenedor de lista de items */
    .caracterizacion-list {
        max-height: 220px !important;
        padding: 0.3rem !important;
        overflow-y: auto !important;
    }
    
    /* Contenedor interno de items (generado por JS) */
    [id^="lista-items-"] {
        max-height: none !important;
        padding-right: 0.2rem !important;
    }
    
    /* Botones Todas/Ninguna */
    .caracterizacion-box [style*="position: sticky"] {
        padding: 0.4rem 0.5rem !important;
        gap: 0.4rem !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .caracterizacion-box [style*="position: sticky"] button {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
        min-height: 32px !important;
    }
    
    /* ITEMS DE CARACTERIZACIÓN - LAYOUT COMPACTO PARA MÓVIL */
    #listaFilas .caracterizacion-item-checkbox,
    #listaColumnas .caracterizacion-item-checkbox,
    .caracterizacion-item-checkbox {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.6rem !important;
        margin-bottom: 0.25rem !important;
        border-radius: 6px !important;
        border-left-width: 3px !important;
    }
    
    /* Checkbox - TAMAÑO CONTROLADO */
    .caracterizacion-item-checkbox input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        accent-color: #0056b3 !important;
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
    }
    
    /* Label con texto */
    #listaFilas .caracterizacion-item-checkbox label,
    #listaColumnas .caracterizacion-item-checkbox label,
    .caracterizacion-item-checkbox label {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Número del item */
    .caracterizacion-item-checkbox label span {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
    }
    
    /* Lista de items interna */
    [id^="lista-items-filas"],
    [id^="lista-items-columnas"] {
        max-height: 200px !important;
        width: 100% !important;
    }
    
    .caracterizacion-badge {
        font-size: var(--fs-hint) !important;
        padding: 0.2rem 0.4rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
    }
    
    /* Header de caracterizacion-box */
    .caracterizacion-box h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 0.3rem !important;
    }
    
    .caracterizacion-box h4 i {
        flex-shrink: 0 !important;
    }
    
    /* Items de caracterización generados por JS */
    .caracterizacion-item-checkbox {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
        padding: 0.5rem !important;
        margin-bottom: 0.3rem !important;
        font-size: var(--fs-text-xs) !important;
    }
    
    .caracterizacion-item-checkbox label {
        font-size: var(--fs-hint) !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .caracterizacion-item-checkbox input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Contenedor de lista de items */
    [id^="lista-items-"] {
        max-height: 250px !important;
        padding-right: 0.3rem !important;
    }
    
    /* Botones Todas/Ninguna */
    .caracterizacion-box [style*="position: sticky"] {
        padding: 0.4rem !important;
    }
    
    .caracterizacion-box [style*="position: sticky"] button {
        padding: 0.35rem 0.5rem !important;
        font-size: var(--fs-text-xs) !important;
    }
    
    /* ==================== FILTROS GRID ==================== */
    .filters-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
    
    .filter-group select,
    .filter-group input {
        width: 100% !important;
        min-width: 100% !important;
        font-size: var(--fs-text-lg) !important;
        padding: 0.8rem !important;
    }
    
    /* ==================== PANEL SELECCIÓN DE FUENTE (Serie/Año) ==================== */
    #panelSeleccionFuente {
        margin: 0.5rem !important;
        border-radius: 12px !important;
    }
    
    #panelSeleccionFuente .card-header {
        padding: 0.8rem 1rem !important;
    }
    
    #panelSeleccionFuente .card-title {
        font-size: 0.85rem !important;
    }
    
    /* Grid de Serie REM y Año - VERTICAL en móvil */
    #panelSeleccionFuente > div > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #panelSeleccionFuente .filter-group {
        width: 100% !important;
    }
    
    #panelSeleccionFuente .filter-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    #panelSeleccionFuente select {
        font-size: 0.85rem !important;
        padding: 0.7rem !important;
    }
    
    #panelSeleccionFuente .btn {
        font-size: 0.9rem !important;
        padding: 0.8rem !important;
    }
    
    /* Aviso Serie P responsive */
    #avisoSerieP {
        font-size: 0.75rem !important;
        padding: 0.8rem !important;
    }
    
    #avisoSerieP p {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
    }
    
    /* ==================== STEPPER / GUÍA DE PASOS ==================== */
    .stepper-container {
        padding: 0.6rem 0.8rem !important;
        margin-bottom: 0.8rem !important;
        border-radius: 10px !important;
    }
    
    .stepper-titulo {
        margin-bottom: 0.5rem !important;
    }
    
    /* Título GUÍA DE CONSULTA */
    .stepper-titulo h2 {
        font-size: 0.75rem !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0.2rem !important;
        color: #1565c0 !important;
    }
    
    /* Subtítulo del stepper */
    .stepper-titulo p {
        font-size: 0.65rem !important;
        margin: 0 !important;
        color: #666 !important;
    }
    
    .stepper-titulo h2::before,
    .stepper-titulo h2::after {
        display: none !important;
    }
    
    /* ACORDEÓN/PASOS EN MÓVIL - 1 columna, layout horizontal interno */
    .stepper-acordeon,
    .stepper-pasos {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
    }
    
    .stepper-acordeon .stepper-paso-box,
    .stepper-paso-box {
        padding: 0.5rem 0.8rem !important;
        border-radius: 8px !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem !important;
        text-align: left !important;
    }
    
    .stepper-acordeon .stepper-paso-box::after,
    .stepper-paso-box::after {
        display: none !important;
    }
    
    /* Número del paso - en línea */
    .stepper-paso-numero {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Contenedor de textos */
    .stepper-paso-box > div:not(.stepper-paso-numero):not(.stepper-info-panel) {
        display: inline !important;
    }
    
    /* Texto del paso - en línea */
    .stepper-paso-texto {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        display: inline !important;
    }
    
    /* Subtexto del paso - en línea después del texto */
    .stepper-paso-subtexto {
        font-size: 0.65rem !important;
        display: inline !important;
        margin-left: 0.4rem !important;
        opacity: 0.8 !important;
    }
    
    /* Panel de información expandible */
    .stepper-acordeon .stepper-info-panel,
    .stepper-info-panel {
        grid-column: 1 / -1 !important;
        padding: 0.8rem !important;
        margin-top: 0.3rem !important;
        border-radius: 8px !important;
    }
    
    .stepper-info-panel h4 {
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .stepper-info-panel p {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.3 !important;
    }
    
    .stepper-info-panel .tip {
        font-size: 0.65rem !important;
        padding: 0.5rem !important;
    }
    
    /* ==================== PANEL ESTABLECIMIENTOS ==================== */
    .panel-estab-header {
        padding: 0.6rem 0.8rem !important;
    }
    
    /* Nivel 2: Título panel establecimientos */
    .panel-estab-header h2 {
        font-size: 0.75rem !important;
        gap: 0.4rem !important;
    }
    
    .panel-estab-body {
        padding: 0.8rem !important;
    }
    
    /* Filtros de establecimiento - 1 columna */
    .filtros-grid-estab,
    .panel-estab-grid,
    .grid-filtros-estab,
    .panel-estab-body > div:first-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }
    
    .filtros-columna,
    .filtros-col,
    .col-ubicacion,
    .col-caracteristicas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .filtro-estab {
        padding: 0.6rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* Nivel 5: Labels filtros */
    .filtro-estab label {
        font-size: 0.7rem !important;
    }
    
    .filtro-estab select {
        font-size: var(--fs-text-md) !important;
        padding: 0.6rem !important;
    }
    
    /* Filtros de establecimiento nuevas clases */
    .filtros-estab-contenedor {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .filtro-box {
        padding: 1rem !important;
    }
    
    .filtro-box-titulo {
        font-size: var(--fs-text-md) !important;
    }
    
    .filtro-box-grid-2cols {
        grid-template-columns: 1fr !important;
    }
    
    /* ==================== BOTONES FILTROS ==================== */
    .filtros-acciones {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    
    .btn-aplicar-filtros,
    .btn-limpiar-filtros {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.8rem 1rem !important;
        font-size: var(--fs-text-md) !important;
    }
    
    .contador-filtros {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
        padding: 0.6rem !important;
    }
    
    /* ==================== LISTA ESTABLECIMIENTOS ==================== */
    .lista-estab-header {
        flex-direction: column !important;
        gap: 0.8rem !important;
        align-items: flex-start !important;
    }
    
    .lista-estab-acciones {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .btn-seleccion-estab {
        flex: 1 1 45% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        font-size: var(--fs-text-xs) !important;
    }
    
    /* ==================== BOTONES CONSULTAR/LIMPIAR ==================== */
    .btn-container {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    
    .botones-consulta-container {
        flex-direction: column !important;
        gap: 0.6rem !important;
        padding: 0.8rem !important;
    }
    
    .btn-consultar,
    .btn-limpiar {
        width: 100% !important;
        min-width: 100% !important;
        justify-content: center !important;
    }
    
    /* Nivel 3: Botones principales */
    .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.8rem !important;
    }
    
    #btnConsultar,
    #btnLimpiar,
    .btn-continuar,
    .btn-buscar {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* ==================== PANEL RESULTADOS ==================== */
    .card-header,
    .resultados-header {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    
    .card-header > div,
    .resultados-info {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    #btnExportExcel,
    .btn-descargar {
        width: 100% !important;
    }
    
    /* ==================== CARACTERIZACIONES - Ver sección principal arriba ==================== */
    
    /* ==================== TABLAS ==================== */
    .table-container {
        max-height: 350px !important;
        margin: 0 -1rem !important;
        width: calc(100% + 2rem) !important;
    }
    
    table {
        font-size: var(--fs-badge) !important;
    }
    
    th, td {
        padding: 0.4rem 0.3rem !important;
        font-size: var(--fs-hint) !important;
    }
    
    th {
        white-space: nowrap !important;
    }
    
    /* ==================== MODALES ==================== */
    .modal-export-content,
    .modal-confirmacion-content,
    .popup-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 0.8rem !important;
        max-height: 90vh !important;
        margin: 0.5rem !important;
    }
    
    /* MODAL DE DISPONIBILIDAD - ESPECÍFICO */
    #modalDisponibilidad .modal-export-content {
        width: 98% !important;
        max-width: 98% !important;
        padding: 0.5rem !important;
        margin: 0.3rem !important;
    }
    
    #contenidoDisponibilidad {
        padding: 0 !important;
        overflow-x: auto !important;
    }
    
    /* Contenedor principal del mapa */
    #contenidoDisponibilidad > div {
        padding: 0.5rem !important;
        min-width: 100% !important;
    }
    
    /* Panel informativo ¿Por qué revisar? */
    #panelInfoMapaCargas {
        padding: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    #panelInfoMapaCargas h4 {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #panelInfoMapaCargas > div > div > p {
        font-size: 0.7rem !important;
    }
    
    /* Grid de info dentro del panel */
    #panelInfoMapaCargas [style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    
    /* Barra de opciones de agrupación */
    #contenidoDisponibilidad [style*="Agrupar por"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    /* Contenedor de tabs de agrupación - scroll horizontal */
    #contenidoDisponibilidad [style*="background: #e3f2fd"][style*="border-radius: 25px"] {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Botones de agrupación más compactos */
    #contenidoDisponibilidad [style*="background: #e3f2fd"] button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Leyenda más compacta */
    #contenidoDisponibilidad [style*="Leyenda"] {
        font-size: 0.7rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    /* Headers de grupos (servicios de salud) */
    #contenidoDisponibilidad [id^="header_grupo"] {
        padding: 0.6rem 0.5rem !important;
    }
    
    #contenidoDisponibilidad [id^="header_grupo"] span {
        font-size: 0.75rem !important;
    }
    
    /* Badges en headers */
    #contenidoDisponibilidad [style*="border-radius: 20px"][style*="font-weight: 700"] {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Stats en headers (✓ 12 / ✗ 52) */
    #contenidoDisponibilidad [style*="gap: 1rem"] > span,
    #contenidoDisponibilidad [style*="gap: 0.8rem"] > span {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    .popup-title,
    .modal-confirmacion-title {
        font-size: var(--fs-title-md) !important;
    }
    
    .popup-message {
        font-size: var(--fs-text-md) !important;
    }
    
    .modal-confirmacion-actions {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    
    .modal-confirmacion-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .resumen-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* ==================== BANNER INFO ==================== */
    .banner-info-integrado {
        padding: 0.5rem 0.8rem !important;
        margin: 0 !important;
    }
    
    .banner-info-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.3rem !important;
    }
    
    .banner-info-left {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.3rem !important;
    }
    
    /* Nivel 4: Labels del banner */
    .banner-info-label {
        font-size: 0.65rem !important;
    }
    
    /* Nivel 3: Serie y Año */
    .banner-info-serie,
    .banner-info-ano {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Nivel 5: Descripción */
    .banner-info-desc {
        margin-left: 0 !important;
        text-align: center !important;
        font-size: 0.65rem !important;
    }
    
    /* Nivel 5: Último mes */
    .banner-info-ultimo {
        font-size: 0.65rem !important;
    }
    
    /* Icono del banner */
    .banner-info-icono {
        font-size: 0.9rem !important;
    }
    
    /* ==================== ESTADÍSTICAS ==================== */
    .filtros-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .filtro-grupo {
        width: 100% !important;
    }
    
    .btn-actualizar {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .kpi-card {
        padding: 1rem !important;
    }
    
    .kpi-value {
        font-size: var(--fs-title-xl) !important;
    }
    
    .kpi-label {
        font-size: var(--fs-text-sm) !important;
    }
    
    .chart-container {
        height: 250px !important;
    }
    
    /* Carga servidor panel */
    .carga-servidor-panel {
        padding: 0.8rem !important;
    }
    
    .carga-content {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .carga-principal {
        justify-content: center !important;
    }
    
    .carga-metricas {
        justify-content: center !important;
    }
    
    /* ==================== CALIDAD MAESTRO ==================== */
    .kpis-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
        margin-right: 0 !important;
    }
    
    .charts-section {
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
    }
    
    .main-content {
        padding: 1rem !important;
    }
    
    .content-header {
        flex-direction: column !important;
        gap: 1rem !important;
        padding-right: 0 !important;
    }
    
    .header-meta {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* Tabla hallazgos */
    .hallazgos-table-container {
        margin: 0 -1rem !important;
        width: calc(100% + 2rem) !important;
    }
    
    .hallazgo-stats {
        display: none !important;
    }
    
    .detail-explanation {
        grid-template-columns: 1fr !important;
    }
    
    /* Export options */
    .export-options {
        flex-direction: column !important;
    }
    
    /* ==================== DESCARGAS MASIVAS - COMPLETO ==================== */
    
    /* === HEADER SIMPLE === */
    .header {
        padding: 0.8rem 1rem !important;
    }
    
    .header h1 {
        font-size: 0.95rem !important;
        gap: 0.5rem !important;
    }
    
    .header h1 i {
        font-size: 1rem !important;
    }
    
    .header-content {
        flex-direction: column !important;
        gap: 0.6rem !important;
        text-align: center !important;
    }
    
    .btn-volver {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* === PANEL ESTABLECIMIENTOS === */
    .panel-establecimientos {
        margin-bottom: 1rem !important;
        border-radius: 10px !important;
    }
    
    .panel-estab-header {
        padding: 0.8rem 1rem !important;
    }
    
    .panel-estab-header h2 {
        font-size: 0.85rem !important;
        gap: 0.4rem !important;
        flex-wrap: wrap !important;
    }
    
    .panel-estab-header h2 i {
        font-size: 0.9rem !important;
    }
    
    #contadorEstabSeleccionados {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    .panel-estab-body {
        padding: 1rem !important;
    }
    
    /* Aviso obligatorio */
    .panel-estab-body > p[style*="background: #fff3cd"] {
        font-size: 0.75rem !important;
        padding: 0.6rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* GRID PRINCIPAL DE FILTROS - Forzar 1 columna */
    .panel-estab-body > div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Contenedores Ubicación y Características */
    .panel-estab-body > div > div[style*="background: #e3f2fd"],
    .panel-estab-body > div > div[style*="background: #e8f5e9"] {
        padding: 0.8rem !important;
        border-radius: 10px !important;
    }
    
    /* Títulos de secciones */
    .panel-estab-body h3[style*="font-size: 1rem"] {
        font-size: 0.8rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    /* Grids internos de filtros → 1 columna */
    .panel-estab-body div[style*="display: grid"][style*="gap: 1rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    
    /* Grid 2 columnas de características → 1 columna */
    .panel-estab-body div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 1rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    
    .filtro-estab {
        margin-bottom: 0 !important;
    }
    
    .filtro-estab label {
        font-size: 0.75rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .filtro-estab select,
    .filtro-estab textarea,
    .filtro-estab input {
        font-size: 0.8rem !important;
        padding: 0.6rem !important;
        min-height: 40px !important;
    }
    
    /* Acciones de filtros */
    .filtros-acciones {
        flex-direction: column !important;
        gap: 0.6rem !important;
        margin-top: 1rem !important;
    }
    
    .btn-aplicar-filtros,
    .btn-limpiar-filtros {
        width: 100% !important;
        padding: 0.7rem !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
    }
    
    .contador-filtros {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    /* Lista de establecimientos header */
    .lista-estab-header {
        flex-direction: column !important;
        gap: 0.6rem !important;
        align-items: stretch !important;
        margin-top: 1rem !important;
    }
    
    .lista-estab-header h3 {
        font-size: 0.85rem !important;
    }
    
    .lista-estab-acciones {
        display: flex !important;
        gap: 0.5rem !important;
    }
    
    .btn-seleccion-estab {
        flex: 1 !important;
        font-size: 0.7rem !important;
        padding: 0.5rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Lista de establecimientos */
    .lista-establecimientos {
        min-height: 200px !important;
        max-height: 300px !important;
    }
    
    .estab-loading {
        padding: 1.5rem !important;
    }
    
    .estab-loading i {
        font-size: 1.5rem !important;
    }
    
    .estab-loading p {
        font-size: 0.8rem !important;
    }
    
    /* Botón contraer panel */
    .panel-estab-body > div[style*="text-align: center"][style*="margin-top: 1rem"] button {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Resumen de filtros */
    .filtros-aplicados-resumen {
        padding: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .filtros-aplicados-resumen h4 {
        font-size: 0.8rem !important;
    }
    
    .filtro-tag {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    /* === PASO 1: SERIES Y AÑOS === */
    #paso1Container {
        margin-bottom: 1rem !important;
    }
    
    /* Header del paso con grid inline → vertical */
    #paso1Container > .paso-header[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    #paso1Container .paso-header > div {
        width: 100% !important;
    }
    
    #paso1Container .paso-header .btn-continuar {
        width: 100% !important;
    }
    
    .paso-numero {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }
    
    .paso-header h3 {
        font-size: 0.9rem !important;
    }
    
    .paso-header p {
        font-size: 0.7rem !important;
    }
    
    /* Container 2 columnas → 1 columna */
    .container-paso1 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .panel-columna {
        padding: 1rem !important;
    }
    
    .panel-columna h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.8rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .panel-columna h4 i {
        font-size: 0.9rem !important;
    }
    
    /* Series items */
    .serie-item {
        padding: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .serie-item input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin-right: 0.8rem !important;
    }
    
    .serie-codigo {
        font-size: 0.9rem !important;
    }
    
    .serie-nombre {
        font-size: 0.75rem !important;
    }
    
    /* Años items */
    .ano-item {
        padding: 0.6rem 0.8rem !important;
    }
    
    .ano-item input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin-right: 0.6rem !important;
    }
    
    .ano-item span {
        font-size: 0.85rem !important;
    }
    
    /* Botón continuar */
    .btn-continuar {
        padding: 0.8rem !important;
        font-size: 0.85rem !important;
    }
    
    /* === PASO 2: HOJAS Y SECCIONES === */
    .panel-paso2 {
        padding: 1rem !important;
    }
    
    .panel-paso2 .paso-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
        padding: 0.8rem !important;
    }
    
    .panel-paso2 .paso-header > div:first-child {
        width: 100% !important;
    }
    
    .panel-paso2 .paso-header > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    .panel-paso2 .paso-header .btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    
    /* Resumen */
    .resumen {
        padding: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .resumen-titulo {
        font-size: 0.8rem !important;
    }
    
    .resumen-texto {
        font-size: 0.75rem !important;
    }
    
    /* Jerarquía */
    .jerarquia-item {
        margin-bottom: 0.6rem !important;
    }
    
    .jerarquia-header {
        padding: 0.7rem !important;
    }
    
    .jerarquia-toggle {
        width: 20px !important;
        height: 20px !important;
        margin-right: 0.5rem !important;
    }
    
    .jerarquia-titulo {
        font-size: 0.8rem !important;
    }
    
    .jerarquia-subtitulo {
        font-size: 0.65rem !important;
    }
    
    .jerarquia-contenido {
        margin-left: 0.8rem !important;
        padding-left: 0.8rem !important;
    }
    
    /* Sección config */
    .seccion-config {
        padding: 0.8rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .seccion-header input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    .seccion-titulo {
        font-size: 0.8rem !important;
    }
    
    .seccion-subtitulo {
        font-size: 0.65rem !important;
    }
    
    .config-area {
        padding-top: 0.6rem !important;
        margin-top: 0.6rem !important;
    }
    
    .config-titulo {
        font-size: 0.75rem !important;
    }
    
    /* Modal confirmación */
    .modal-confirmacion-content {
        padding: 1rem !important;
        width: 95% !important;
        max-width: 95% !important;
    }
    
    .modal-confirmacion-title {
        font-size: 1.1rem !important;
    }
    
    .resumen-exportacion {
        padding: 1rem !important;
    }
    
    .resumen-exportacion h3 {
        font-size: 0.9rem !important;
    }
    
    .resumen-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .resumen-item {
        font-size: 0.8rem !important;
    }
    
    .modal-confirmacion-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .modal-confirmacion-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.7rem !important;
    }

    /* ==================== DESCARGAS AVANZADAS ==================== */
    .busqueda-container {
        flex-direction: column !important;
    }
    
    .busqueda-container input {
        width: 100% !important;
    }
    
    .nodo-contenido {
        margin-left: 1rem !important;
        padding-left: 0.8rem !important;
    }
    
    .seleccion-counter {
        bottom: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
        justify-content: center !important;
    }
}

/* ============================================================
   PANTALLAS MUY PEQUEÑAS (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    
    .container {
        padding: 0.5rem !important;
    }
    
    .card {
        padding: 0.8rem !important;
        border-radius: 8px !important;
    }
    
    /* Stepper - mantener 1 columna horizontal */
    .stepper-pasos,
    .stepper-acordeon {
        grid-template-columns: 1fr !important;
        gap: 0.2rem !important;
    }
    
    .stepper-acordeon .stepper-paso-box,
    .stepper-paso-box {
        padding: 0.4rem 0.6rem !important;
    }
    
    .stepper-paso-numero {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.65rem !important;
    }
    
    .stepper-paso-texto {
        font-size: 0.7rem !important;
    }
    
    .stepper-paso-subtexto {
        font-size: 0.6rem !important;
    }
    
    .stepper-acordeon .stepper-info-panel {
        padding: 0.7rem !important;
    }
    
    /* Meses más compactos */
    .skeleton-month,
    .mes-item,
    .mes-disponible,
    .mes-box {
        min-width: 36px !important;
    }
    
    .mes-item .mes-indicador,
    .mes-disponible .indicador {
        width: 22px !important;
        height: 22px !important;
    }
    
    .mes-item .mes-label,
    .mes-disponible .mes-nombre {
        font-size: var(--fs-hint) !important;
    }
    
    /* Títulos */
    .header h1,
    .header-text h1 {
        font-size: var(--fs-text-lg) !important;
    }
    
    .card-title {
        font-size: var(--fs-title-sm) !important;
    }
    
    /* Tabs en pantallas muy pequeñas */
    .tab-item {
        padding: 0.6rem 0.8rem !important;
    }
    
    .tabs-nav .tab-item span,
    .tab-item span {
        display: inline !important;
        font-size: var(--fs-hint) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Meses en grid 3 columnas en pantallas muy pequeñas */
    .meses-grid-responsive {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .mes-item .mes-nombre {
        font-size: 9px !important;
    }
    
    .skeleton-months {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Choices.js en pantallas muy pequeñas */
    .choices__inner {
        min-height: 44px !important;
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        height: auto !important;
    }
    
    .choices__list--single .choices__item,
    .choices__list--single .choices__item--selectable {
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }
    
    .choices__list--dropdown .choices__item {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        white-space: normal !important;
    }
    
    select {
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
    }
    
    /* Caracterizaciones en pantallas muy pequeñas */
    .caracterizacion-item {
        padding: 0.4rem !important;
        font-size: 0.65rem !important;
    }
    
    .caracterizacion-item label {
        font-size: 0.65rem !important;
    }
    
    .caracterizacion-list {
        max-height: 180px !important;
    }
    
    /* Items de caracterización en pantallas muy pequeñas */
    .caracterizacion-item-checkbox {
        padding: 0.4rem 0.5rem !important;
        gap: 0.3rem !important;
    }
    
    .caracterizacion-item-checkbox label {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
    }
    
    /* Checkbox aún más pequeño en 480px */
    .caracterizacion-item-checkbox input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
    }
    
    #listaFilas .caracterizacion-item-checkbox label,
    #listaColumnas .caracterizacion-item-checkbox label {
        font-size: 0.65rem !important;
        word-break: break-word !important;
    }
    
    /* Títulos de caracterizaciones */
    .caracterizacion-box h4 {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 0.2rem !important;
    }
    
    .caracterizacion-badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.4rem !important;
        white-space: nowrap !important;
    }
    
    /* Botones Todas/Ninguna más compactos */
    .caracterizacion-box [style*="position: sticky"] button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.65rem !important;
        min-height: 28px !important;
    }
    
    /* KPIs 1 columna */
    .kpi-grid,
    .kpis-section {
        grid-template-columns: 1fr !important;
    }
    
    /* Botones más compactos */
    .btn-seleccion-estab {
        font-size: var(--fs-hint) !important;
        padding: 0.4rem !important;
    }
    
    /* Tabla */
    th, td {
        padding: 0.3rem 0.2rem !important;
        font-size: var(--fs-hint) !important;
    }
    
    /* Tabs más compactos - MANTENER TEXTO VISIBLE */
    .tab-item {
        padding: 0.5rem 0.6rem !important;
    }
    
    /* NO OCULTAR el texto de tabs */
    .tabs-nav .tab-item span,
    .tab-item span {
        display: inline !important;
        font-size: var(--fs-hint) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   MEJORAS TOUCH PARA MÓVILES
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    
    /* Elementos más grandes para toque */
    select, input:not([type="checkbox"]), button {
        min-height: 44px !important;
    }
    
    .btn {
        min-height: 48px !important;
    }
    
    /* Checkboxes - tamaño moderado pero usable */
    input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* EXCEPCIÓN: Checkboxes de caracterizaciones más pequeños */
    .caracterizacion-item-checkbox input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
    }
    
    /* Quitar hover effects */
    .card:hover,
    .kpi-card:hover,
    .btn:hover:not(:disabled) {
        transform: none !important;
    }
    
    /* Espaciado entre elementos tocables */
    .filtro-estab {
        margin-bottom: 0.8rem !important;
    }
    
    .serie-item,
    .ano-item {
        margin-bottom: 0.8rem !important;
    }
}

/* ============================================================
   LANDSCAPE EN MÓVILES
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    
    .header {
        padding: 0.6rem 1rem !important;
    }
    
    .header h1 {
        font-size: var(--fs-title-md) !important;
    }
    
    .stepper-pasos {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .kpi-grid,
    .kpis-section {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .modal-export-content,
    .popup-content {
        max-height: 85vh !important;
    }
}

/* ============================================================
   PRINT (opcional)
   ============================================================ */
@media print {
    .header,
    .sidebar,
    .btn-volver,
    .stepper-container,
    .filtros-acciones,
    .ambiente-indicator {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ============================================================
   ESTADÍSTICAS - RESPONSIVE
   Dashboard de Bitácora del Sistema
   ============================================================ */

/* ==================== TABLETS (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
    
    /* Panel de carga del servidor */
    .carga-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .carga-metricas {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    /* KPIs - 3 columnas */
    .estadisticas .kpi-grid,
    body:has(.carga-servidor-panel) .kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Gráficos - 2 columnas */
    .charts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .chart-card.full-width {
        grid-column: 1 / -1 !important;
    }
}

/* ==================== MÓVILES (max-width: 768px) ==================== */
@media (max-width: 768px) {
    
    /* === HEADER ESTADÍSTICAS === */
    .header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.8rem !important;
    }
    
    .header-title {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .header .logo {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.4rem !important;
    }
    
    .header h1 {
        font-size: 1.1rem !important;
    }
    
    .header-subtitle {
        font-size: 0.75rem !important;
    }
    
    /* === PANEL DE CARGA DEL SERVIDOR === */
    .carga-servidor-panel {
        padding: 0.8rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .carga-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 0.8rem !important;
        padding-bottom: 0.6rem !important;
    }
    
    .carga-titulo {
        font-size: 0.85rem !important;
        flex-wrap: wrap !important;
    }
    
    .carga-live-indicator {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.5rem !important;
    }
    
    .carga-timestamp {
        font-size: 0.65rem !important;
    }
    
    .carga-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .carga-principal {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.8rem !important;
    }
    
    .carga-gauge {
        width: 70px !important;
        height: 70px !important;
    }
    
    .carga-gauge::before {
        width: 52px !important;
        height: 52px !important;
    }
    
    .carga-porcentaje {
        font-size: 0.95rem !important;
    }
    
    .carga-detalle {
        font-size: 0.55rem !important;
    }
    
    .carga-nivel {
        padding: 0.3rem 0.6rem !important;
    }
    
    .nivel-texto {
        font-size: 0.65rem !important;
    }
    
    .carga-metricas {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .carga-metrica {
        width: 100% !important;
        padding: 0.5rem 0.8rem !important;
        justify-content: flex-start !important;
    }
    
    .metrica-icono {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    .metrica-valor {
        font-size: 0.95rem !important;
    }
    
    .metrica-label {
        font-size: 0.65rem !important;
    }
    
    .metrica-sublabel {
        font-size: 0.55rem !important;
    }
    
    /* === FILTROS === */
    .filtros-panel {
        padding: 1rem !important;
        gap: 0.8rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filtro-grupo {
        width: 100% !important;
    }
    
    .filtro-grupo label {
        font-size: 0.75rem !important;
    }
    
    .filtro-grupo input,
    .filtro-grupo select {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
        width: 100% !important;
    }
    
    .btn-filtrar,
    .btn-actualizar {
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }
    
    /* === KPI CARDS === */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }
    
    .kpi-card {
        padding: 1rem !important;
    }
    
    .kpi-header {
        margin-bottom: 0.6rem !important;
    }
    
    .kpi-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    .kpi-trend {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    .kpi-value {
        font-size: 1.5rem !important;
    }
    
    .kpi-label {
        font-size: 0.8rem !important;
    }
    
    .kpi-sublabel {
        font-size: 0.65rem !important;
    }
    
    /* Tarjeta versión */
    .kpi-card.version .version-name {
        font-size: 1.3rem !important;
    }
    
    .version-number {
        font-size: 0.75rem !important;
    }
    
    .version-build {
        font-size: 0.65rem !important;
    }
    
    .version-dots {
        gap: 3px !important;
    }
    
    .version-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    /* Estado errores */
    .kpi-estado-errores {
        flex-direction: column !important;
        gap: 0.3rem !important;
        font-size: 0.65rem !important;
    }
    
    /* === GRÁFICOS === */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .chart-card {
        padding: 1rem !important;
    }
    
    .chart-card.full-width {
        grid-column: auto !important;
    }
    
    .chart-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .chart-title {
        font-size: 0.9rem !important;
    }
    
    .chart-title i {
        font-size: 0.85rem !important;
    }
    
    .info-actualizacion {
        width: 100% !important;
        padding: 0.5rem 0.8rem !important;
        font-size: 0.7rem !important;
        flex-wrap: wrap !important;
    }
    
    .chart-container {
        height: 200px !important;
    }
    
    .chart-container.tall {
        height: 250px !important;
    }
    
    /* === TOP ENDPOINTS === */
    .top-list {
        padding: 0 !important;
    }
    
    .top-item {
        padding: 0.6rem 0 !important;
    }
    
    .top-rank {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
        margin-right: 0.6rem !important;
    }
    
    .top-name {
        font-size: 0.75rem !important;
    }
    
    .top-count {
        font-size: 0.85rem !important;
    }
    
    /* === TABLA ACTIVIDAD === */
    .tabla-card {
        margin-top: 1rem !important;
    }
    
    .tabla-header {
        padding: 0.8rem 1rem !important;
    }
    
    .tabla-title {
        font-size: 0.9rem !important;
    }
    
    .tabla-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .tabla-container table {
        min-width: 600px !important;
        font-size: 0.7rem !important;
    }
    
    .tabla-container th,
    .tabla-container td {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    .tabla-container th i {
        display: none !important;
    }
    
    /* Badges en tabla */
    .tabla-container .badge,
    .tabla-container span[class*="badge"] {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    /* Introducción */
    .container > div[style*="background: white"][style*="border-left"] {
        padding: 0.8rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .container > div[style*="background: white"] p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }
}

/* ==================== PANTALLAS MUY PEQUEÑAS (max-width: 480px) ==================== */
@media (max-width: 480px) {
    
    /* Header más compacto */
    .header {
        padding: 0.8rem !important;
    }
    
    .header .logo {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.2rem !important;
    }
    
    .header h1 {
        font-size: 0.95rem !important;
    }
    
    .btn-volver {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Panel carga más compacto */
    .carga-servidor-panel {
        padding: 0.6rem 0.8rem !important;
    }
    
    .carga-titulo {
        font-size: 0.75rem !important;
    }
    
    .carga-gauge {
        width: 60px !important;
        height: 60px !important;
    }
    
    .carga-gauge::before {
        width: 44px !important;
        height: 44px !important;
    }
    
    .carga-porcentaje {
        font-size: 0.85rem !important;
    }
    
    /* KPIs 1 columna */
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }
    
    .kpi-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0.8rem !important;
    }
    
    .kpi-card::before {
        width: 3px !important;
    }
    
    .kpi-header {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .kpi-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .kpi-card .kpi-trend {
        display: none !important;
    }
    
    .kpi-value {
        font-size: 1.3rem !important;
    }
    
    .kpi-label {
        font-size: 0.75rem !important;
    }
    
    /* Tarjeta versión - mantener vertical */
    .kpi-card.version {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* Gráficos */
    .chart-container {
        height: 180px !important;
    }
    
    .chart-container.tall {
        height: 220px !important;
    }
    
    /* Tabla */
    .tabla-container table {
        min-width: 500px !important;
        font-size: 0.65rem !important;
    }
    
    .tabla-container th,
    .tabla-container td {
        padding: 0.4rem 0.3rem !important;
    }
}