/* Import Montserrat from Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); 

/* ✅ EXCEPCIONES CRÍTICAS: Font Awesome debe mantener sus fuentes */
.fas, .far, .fab, .fal, .fad,
i.fas, i.far, i.fab, i.fal, i.fad,
i[class^="fa-"], i[class*=" fa-"],
.fa, .fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ✅ REGLA GLOBAL PRINCIPAL: Forzar Montserrat en TODA la aplicación (excepto Font Awesome) */
*:not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]), 
*::before:not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]), 
*::after:not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]),
html, 
body,
div:not([class*="fa-"]),
span:not([class*="fa-"]),
h1, h2, h3, h4, h5, h6,
p,
a:not([class*="fa-"]),
button:not([class*="fa-"]),
input,
textarea,
select,
option,
label,
.form-control,
.form-select,
.btn,
.nav-link,
.dropdown-menu,
.dropdown-item,
.alert,
.card,
.badge,
.spinner-border,
.page-title,
.page-subtitle,
.section-title,
.form-label,
.validation-message,
.nav-text,
.sidebar,
.top-row,
.content,
.mobile-toggle-btn,
.sidebar-toggle-btn,
.modern-btn,
.user-btn-clean,
.localidad-btn-clean {
    font-family: 'Montserrat', sans-serif !important;
}

body, html {
    font-family: 'Montserrat', sans-serif !important;
}


/* ✅ Variables CSS para consistencia y fácil mantenimiento - NUEVA PALETA AZUL VIBRANTE */
:root {
    --primary-color: #0440b8;        /* ✅ NUEVO: Azul vibrante principal */
    --primary-dark: #032e7a;         /* ✅ NUEVO: Azul oscuro para contraste */
    --primary-light: #3366d1;        /* ✅ NUEVO: Azul claro intermedio */
    --primary-lighter: #e8f0ff;      /* ✅ NUEVO: Azul muy claro para fondos */
    --secondary-color: #4a5568;      /* ✅ ACTUALIZADO: Gris neutro que complementa el azul */
    --success-color: #00a86b;        /* ✅ NUEVO: Verde esmeralda que complementa el azul */
    --warning-color: #ff8c00;        /* ✅ NUEVO: Naranja vibrante que contrasta con el azul */
    --danger-color: #e53e3e;         /* ✅ NUEVO: Rojo vibrante */
    --info-color: #00bcd4;           /* ✅ NUEVO: Cyan que armoniza con el azul */
    --light-color: #f7fafc;          /* ✅ NUEVO: Gris muy claro */
    --dark-color: #0440b8;           /* ✅ NUEVO: Igual al primary para consistencia */
    --white: #ffffff;
    
    /* ✅ Sidebar dimensions */
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 0px;
    
    /* ✅ Header height - INCREMENTADO */
    --header-height: 3.5rem; /* INCREMENTADO: de 3rem a 3.5rem */
    --header-height-mobile: 4rem; /* AÑADIDO: altura específica para móvil */
    
    /* ✅ Tipografía moderna - TAMAÑOS REDUCIDOS */
    --font-family: 'Montserrat', sans-serif;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1rem;      /* REDUCIDO: de 1.15rem a 1rem */
    --font-size-xl: 1.1rem;    /* REDUCIDO: de 1.3rem a 1.1rem */
    --font-size-xxl: 1.25rem;  /* REDUCIDO: de 1.5rem a 1.25rem */
    
    /* ✅ Espaciado y sombras - REDUCIDOS con nueva paleta */
    --border-radius: 6px;
    --border-radius-sm: 3px;
    --border-radius-lg: 8px;
    --shadow-sm: 0 1px 3px rgba(4, 64, 184, 0.1);     /* ✅ ACTUALIZADO: sombra con nuevo azul */
    --shadow-md: 0 3px 6px rgba(4, 64, 184, 0.12);    /* ✅ ACTUALIZADO: sombra con nuevo azul */
    --shadow-lg: 0 6px 12px rgba(4, 64, 184, 0.15);   /* ✅ ACTUALIZADO: sombra con nuevo azul */
    --shadow-xl: 0 8px 16px rgba(4, 64, 184, 0.18);   /* ✅ ACTUALIZADO: sombra con nuevo azul */
    
    /* ✅ Transiciones suaves */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

/* ✅ Reset y configuración base - FONDO BLANCO */
html, body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base);
    line-height: 1.5;
    background-color: #ffffff; /* ✅ AGREGADO: fondo blanco para html y body */
}

/* Menú lateral y superior - MÁS PEQUEÑO */
.nav-menu, .sidebar, .navbar, .nav-link, .sidebar .nav-link, .sidebar .nav-item {
    font-size: var(--font-size-base) !important;  /* REDUCIDO: de lg a base */
    font-family: var(--font-family) !important;
}

/* ✅ CRÍTICO: Sobrescribir padding de Bootstrap en nav-links del sidebar */
.sidebar .nav-link,
.sidebar .nav-item .nav-link,
.nav-scrollable .nav-link {
    padding:0.3rem 0.1rem  !important;
}

/* Formularios generales (inputs, labels, etc) */
.form-label, label, .form-group, .form-control, input, textarea {
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-family) !important;
}

/* Títulos de sección y página MÁS PEQUEÑOS */
.section-title, .page-title, .page-subtitle {
    font-size: var(--font-size-lg) !important;  /* REDUCIDO: de xl a lg */
    font-family: var(--font-family) !important;
}

/* KPIs del dashboard: tamaño más pequeño y armónico */
.kpi, .kpi-value, .dashboard-kpi, .dashboard-kpi-value {
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
}

/* Excepción: dropdown/select mantiene tamaño base */
select.form-select, select, .dropdown-menu, .dropdown-item {
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
}

/* ✅ CRÍTICO: Dropdown Z-Index Fix - Los dropdowns deben aparecer por encima del sidebar */
.dropdown-menu {
    z-index: 1055 !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid rgba(4, 64, 184, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ✅ CRÍTICO: Optimizaciones para móvil SIN sobrescribir comportamiento de Bootstrap */
@media (max-width: 768px) {
    .dropdown-menu {
        /* Solo ajustes de tamaño y posicionamiento, NO display ni transform */
        max-width: calc(100vw - 2rem) !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
        backdrop-filter: none !important;
        background-color: #fff !important;
        /* Permitir que Bootstrap controle position, top, left, display y transform */
    }
    
    /* NO forzar backdrop a display: none, dejar que Bootstrap lo maneje */
    
    /* Mantener dropdown como relativo para permitir posicionamiento correcto */
    .dropdown {
        position: relative;
    }
}

/* ✅ CRÍTICO: Asegurar que todos los elementos dropdown tengan el z-index correcto */
.dropdown,
.dropup,
.dropend,
.dropstart {
    z-index: 1055 !important; /* ✅ NUEVO: Igual que dropdown-menu */
}

/* ✅ CRÍTICO: Bootstrap dropdown backdrop también necesita z-index correcto */
.dropdown-backdrop {
    z-index: 1054 !important; /* ✅ NUEVO: Justo debajo de los dropdowns */
}

/* ✅ Botones modernos con efectos - TAMAÑOS REDUCIDOS */
.btn {
    font-family: var(--font-family);
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: 0.375rem 0.75rem; /* REDUCIDO: de 0.5rem 1rem a 0.375rem 0.75rem */
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-sm); /* Botones en sm para armonía con formularios */
}

    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: var(--transition-normal);
    }

    .btn:hover::before {
        left: 100%;
    }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: 2px solid var(--primary-color);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px); /* REDUCIDO: de -2px a -1px */
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    /* ✅ Cards modernas con efectos glassmorphism - TAMAÑOS REDUCIDOS */
.card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    overflow: hidden;
}

    .card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px); /* REDUCIDO: de -4px a -2px */
    }

.card-header {
    background: linear-gradient(135deg, var(--primary-lighter) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-bottom: 1px solid rgba(34, 106, 148, 0.1);
    padding: 1rem; /* REDUCIDO: de 1.25rem a 1rem */
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--font-size-base); /* REDUCIDO: de lg a base para títulos más pequeños */
}

.card-body {
    padding: 1.25rem; /* REDUCIDO: de 1.5rem a 1.25rem */
}

/* ✅ Formularios estilizados - TAMAÑOS REDUCIDOS */
.form-control {
    font-family: var(--font-family);
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem; /* REDUCIDO: de 0.75rem 1rem a 0.5rem 0.75rem */
    transition: var(--transition-fast);
    background-color: var(--white);
    font-size: var(--font-size-sm);
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.25); /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
        outline: none;
        background-color: var(--white);
    }

.form-label {
    font-family: var(--font-family);
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.375rem; /* REDUCIDO: de 0.5rem a 0.375rem */
    font-size: var(--font-size-xs); /* REDUCIDO: de sm a xs */
}

/* ✅ Alerts modernas - TAMAÑOS REDUCIDOS */
.alert {
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 0.75rem 1.25rem; /* REDUCIDO: de 1rem 1.5rem a 0.75rem 1.25rem */
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm); /* AÑADIDO: tamaño de fuente más pequeño */
}

.alert-danger {
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.05) 100%); /* ✅ ACTUALIZADO: nuevo rojo */
    color: var(--danger-color);
    border-left: 4px solid var(--danger-color);
}

.alert-success {
    background: linear-gradient(135deg, rgba(0, 168, 107, 0.1) 0%, rgba(0, 168, 107, 0.05) 100%); /* ✅ ACTUALIZADO: nuevo verde */
    color: var(--success-color);
    border-left: 4px solid var(--success-color);
}

/* ✅ Spinners animados - TAMAÑOS REDUCIDOS */
.spinner-border {
    width: 1.25rem; /* REDUCIDO: de 1.5rem a 1.25rem */
    height: 1.25rem;
    border-width: 0.15em; /* REDUCIDO: de 0.2em a 0.15em */
    border-color: var(--primary-color);
    border-right-color: transparent;
    animation: spinner-border 0.75s linear infinite;
}

/* ✅ User Dropdown mejorado - TAMAÑOS REDUCIDOS */
.user-btn-clean {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: var(--white) !important;
    border: none !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0.375rem 0.75rem; /* REDUCIDO: de 0.5rem 1rem a 0.375rem 0.75rem */
    font-size: var(--font-size-sm); /* REDUCIDO: de base a sm */
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

    .user-btn-clean::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: var(--transition-normal);
    }

    .user-btn-clean:hover::before {
        left: 100%;
    }

    .user-btn-clean:hover,
    .user-btn-clean:focus,
    .user-btn-clean.show {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important;
        color: var(--white) !important;
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-1px); /* REDUCIDO: de -2px a -1px */
    }

    .user-btn-clean i.fas.fa-user {
        font-size: 1.75rem; /* REDUCido: de 2.5rem a 1.75rem para ícono más pequeño */
        color: var(--white);
        margin-right: 1rem; /* REDUCIDO: de 0.5rem a 0.375rem */
    }

    /* ✅ Localidad Selector mejorado - TAMAÑOS INCREMENTADOS */
.localidad-btn-clean {
    background: none !important;
    color: var(--primary-color) !important;
    border: 2px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.625rem 1.125rem; /* INCREMENTADO: de 0.375rem 0.75rem a 0.625rem 1.125rem */
    font-size: var(--font-size-lg); /* INCREMENTADO: de sm a lg (1rem) */
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    position: relative;
    min-width: 200px; /* INCREMENTADO: de 150px a 200px */
    justify-content: space-between;
    height: 2.75rem; /* INCREMENTADO: de 2.5rem a 2.75rem */
}

.localidad-btn-clean:hover,
.localidad-btn-clean:focus,
.localidad-btn-clean.show {
    background: rgba(4, 64, 184, 0.1) !important; /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
    color: var(--primary-dark) !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-sm) !important;
    transform: translateY(-1px);
}

.localidad-btn-clean:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: auto;
}

.localidad-btn-clean .dropdown-arrow {
    font-size: 0.7rem; /* INCREMENTADO: de 0.8rem a 1rem */
    transition: var(--transition-fast);
    color: var(--primary-color);
}

.localidad-btn-clean.show .dropdown-arrow {
    transform: rotate(180deg);
}

.localidad-nome {
    font-weight: 500;
    font-size: var(--font-size-lg); /* INCREMENTADO: a lg para mejor visibilidad */
    color: var(--primary-color) !important;
}

.localidad-btn-clean i.fas.fa-map-marker-alt,
.localidad-loading i.fas.fa-map-marker-alt {
    font-size: 1.125rem; /* INCREMENTADO: de 0.9rem a 1.125rem */
    color: var(--primary-color);
    margin-right: 0.5rem; /* INCREMENTADO: de 0.375rem a 0.5rem */
}

/* ✅ Localidad selector wrapper - TAMAÑOS INCREMENTADOS */
.localidad-selector {
    display: flex;
    align-items: center;
    min-height: 2.75rem; /* INCREMENTADO: de 2.5rem a 2.75rem */
}

.localidad-dropdown {
    width: 100%;
    /* ✅ CRÍTICO: Asegurar z-index correcto para el dropdown de localidad */
    z-index: 1055 !important;
}

.localidad-nombre {
    font-size: var(--font-size-lg); /* INCREMENTADO: para mejor legibilidad */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px; /* INCREMENTADO: de 200px a 220px */
}

/* ✅ Localidad menu items - TAMAÑOS INCREMENTADOS */
.localidad-menu {
    min-width: 320px; /* INCREMENTADO: de 300px a 320px */
    max-height: 400px;
    overflow-y: auto;
    /* ✅ CRÍTICO: Z-index específico para el menú de localidad */
    z-index: 1055 !important;
}

/* ✅ MÓVIL: Evitar que el dropdown de localidad se corte por ancho fijo */
@media (max-width: 768px) {
    .localidad-menu {
        min-width: 240px !important; /* Reducir mínimo para pantallas pequeñas */
        max-width: calc(100vw - 1rem) !important; /* Asegurar que no exceda el viewport */
        width: auto !important;
    }
}

.item-content {
    display: flex;
    align-items: center;
    gap: 0.875rem; /* INCREMENTADO */
    padding: 1rem 1.125rem; /* INCREMENTADO: de 0.875rem 1rem a 1rem 1.125rem */
    width: 100%;
}

.item-icon {
    width: 40px; /* INCREMENTADO: de 36px a 40px */
    height: 40px; /* INCREMENTADO: de 36px a 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
    border-radius: 50%;
    flex-shrink: 0;
}

.item-icon i {
    font-size: 1.125rem; /* INCREMENTADO: de 1rem a 1.125rem */
    color: var(--primary-color);
}

.item-name {
    font-weight: 500;
    color: var(--dark-color);
    font-size: var(--font-size-lg); /* INCREMENTADO: de base a lg */
    line-height: 1.2;
}

.item-badge {
    font-size: 0.875rem; /* INCREMENTADO: de 0.8rem a 0.875rem */
    color: var(--success-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ✅ User Dropdown mejorado - TAMAÑOS INCREMENTADOS */
.user-btn-clean {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: var(--white) !important;
    border: none !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0.625rem 1.125rem; /* INCREMENTADO: de 0.5rem 1rem a 0.625rem 1.125rem */
    font-size: var(--font-size-lg); /* INCREMENTADO: de base a lg */
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    height: 2.75rem; /* INCREMENTADO: de 2.5rem a 2.75rem */
}

.user-btn-clean i.fas.fa-user {
    font-size: 1.125rem; /* INCREMENTADO: de 1rem a 1.125rem */
    color: var(--white);
    margin-right: 0.5rem;
}

/* ✅ CRÍTICO: Dropdown específico del usuario también necesita z-index */
#userDropdownContainer .dropdown-menu {
    z-index: 1055 !important; /* ✅ NUEVO: Específico para el dropdown del usuario */
}

/* ✅ Top row - FIJA EN TODAS las pantallas */
.top-row {
    background: linear-gradient(135deg, var(--white) 0%, rgba(232, 240, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(4, 64, 184, 0.1);
    box-shadow: var(--shadow-sm);
    height: var(--header-height); /* 3.5rem */
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: sticky !important; /* ✅ FIJA: sticky en desktop */
    top: 0 !important;
    left: var(--sidebar-width); /* 200px */
    right: 0;
    z-index: 1000; /* ✅ MANTENIDO: z-index menor que dropdowns (1055) pero mayor que contenido */
    transition: var(--transition-normal);
    width: 100%;
}

/* ✅ Content area - CON PADDING para compensar header fijo Y FONDO BLANCO */
.content {
    flex: 1;
    padding: 1rem;
    margin-top: 0; /* ✅ SIN margin-top ya que sticky maneja la posición */
    padding-top: 1rem; /* ✅ PADDING normal sin compensación extra */
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #ffffff; /* ✅ CAMBIADO: de var(--light-color) a blanco puro */
    min-height: calc(100vh - var(--header-height)); /* ✅ ALTURA mínima correcta */
}

/* ✅ Mobile Toggle Button - POSICIÓN CORREGIDA A LA IZQUIERDA */
.mobile-toggle-btn {
    display: none;
    position: fixed;
    top: 0.5rem; /* CORREGIDO: posición superior */
    left: 0.75rem; /* CORREGIDO: de vuelta a la izquierda */
    width: 40px; /* INCREMENTADO: tamaño más grande */
    height: 40px;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    z-index: 1002;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: var(--transition-fast);
}

.mobile-toggle-btn:hover {
    background: linear-gradient(135deg, #032e7a 0%, #0440b8 100%) !important; /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
    transform: scale(1.05) !important;
    box-shadow: var(--shadow-xl) !important;
}

.mobile-toggle-btn:active {
    transform: scale(0.95) !important;
}

.mobile-toggle-btn:focus {
    outline: 2px solid #3366d1 !important; /* ✅ ACTUALIZADO: azul claro */
    outline-offset: 2px !important;
}

/* ✅ AGREGAR: Estilos para el botón de toggle del sidebar en desktop */
.sidebar-toggle-btn,
.modern-btn {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ COLOR PRINCIPAL: azul vibrante */
    border: none;
    border-radius: 6px;
    color: white;
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.sidebar-toggle-btn:hover,
.modern-btn:hover {
    background: linear-gradient(135deg, #032e7a 0%, #0440b8 100%); /* ✅ COLOR PRINCIPAL: hover invertido */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sidebar-toggle-btn:active,
.modern-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.sidebar-toggle-btn:focus,
.modern-btn:focus {
    outline: 2px solid #3366d1; /* ✅ COLOR PRINCIPAL: azul claro para focus */
    outline-offset: 2px;
}

/* ✅ AGREGAR: Estilos para el icono hamburguesa */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}

.hamburger-icon::before,
.hamburger-icon::after,
.hamburger-icon {
    content: '';
    height: 2px;
    background-color: white;
    border-radius: 1px;
    transition: var(--transition-fast);
}

.hamburger-icon::before {
    width: 100%;
}

.hamburger-icon::after {
    width: 100%;
}

/* ✅ AGREGAR: Icono hamburguesa para móvil */
.mobile-hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 16px;
    height: 12px;
}

.mobile-hamburger-icon::before,
.mobile-hamburger-icon::after,
.mobile-hamburger-icon {
    content: '';
    height: 2px;
    background-color: white;
    border-radius: 1px;
    transition: var(--transition-fast);
}

.mobile-hamburger-icon::before {
    width: 100%;
}

.mobile-hamburger-icon::after {
    width: 100%;
}

/* ✅ Loading states mejorados - MÁS GRANDES */
.localidad-loading {
    display: flex;
    align-items: center;
    gap: 0.875rem; /* INCREMENTADO */
    padding: 0.625rem 1.125rem; /* INCREMENTADO: padding más grande */
    color: var(--secondary-color);
    font-size: var(--font-size-base); /* INCREMENTADO: de sm a base */
    font-weight: 500;
    min-height: 2.75rem; /* INCREMENTADO */
}

.loading-spinner-small {
    width: 28px; /* INCREMENTADO: de 24px a 28px */
    height: 28px; /* INCREMENTADO: de 24px a 28px */
    position: relative;
}

/* ✅ Sidebar - FONDO MEJORADO PARA MEJOR CONTRASTE */
.sidebar {
    background: linear-gradient(180deg, #f7fafc 0%, #e8f0ff 100%); /* ✅ ACTUALIZADO: gradiente azul suave */
    border-right: 1px solid rgba(4, 64, 184, 0.2); /* ✅ ACTUALIZADO: nueva paleta azul */
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: var(--sidebar-width); /* 200px */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001; /* ✅ MANTENIDO: z-index del sidebar menor que dropdowns (1055) */
    transition: var(--transition-normal);
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    transform: translateX(-100%);
}

.sidebar.collapsed .sidebar-header {
    padding: 1rem 0.5rem;
}

.sidebar.collapsed .nav-scrollable {
    padding: 0 0.25rem;
}

/* ✅ Mobile Responsive - TOP-ROW FIJA EN MÓVIL */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
        width: 240px;
        z-index: 1003; /* ✅ MANTENIDO: z-index del sidebar en móvil menor que dropdowns */
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    main {
        margin-left: 0;
        width: 100%;
    }
    
    .top-row {
        left: 0;
        height: 3.5rem;
        padding: 0 1rem 0 4.5rem !important;
        position: fixed !important; /* ✅ FIJA en móvil */
        top: 0 !important;
        width: 100%;
        z-index: 1000; /* ✅ MANTENIDO: menor que dropdowns (1055) */
        margin: 0;
    }
    
    .content {
        margin-top: 3.5rem !important; /* ✅ COMPENSAR top-row fija */
        padding-top: 0.75rem !important;
        height: auto;
        padding: 0.75rem;
        min-height: calc(100vh - 3.5rem);
    }
    
    .mobile-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0.5rem !important;
        left: 0.75rem !important;
        width: 40px;
        height: 40px;
        z-index: 1070 !important; /* ✅ INCREMENTADO: Mayor que dropdowns para que siempre sea visible */
        background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%) !important;
        border: none;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(4, 64, 184, 0.3) !important;
        transition: all 0.3s ease;
    }
    
    .mobile-toggle-btn:hover,
    .mobile-toggle-btn:active {
        background: linear-gradient(135deg, #032e7a 0%, #0440b8 100%) !important;
        transform: scale(1.05) !important;
        box-shadow: 0 6px 16px rgba(4, 64, 184, 0.4) !important;
    }
    
    /* ✅ CRÍTICO: Ocultar el botón de desktop en móvil */
    .sidebar-toggle-btn {
        display: none !important; /* ✅ OCULTAR botón de desktop sidebar en móvil */
    }
    
    .top-row .d-flex.align-items-center.flex-grow-1 {
        margin-left: 0;
        margin-right: 0.75rem;
    }
    
    /* ✅ Optimización para pantallas muy pequeñas */
    @media (max-width: 480px) {
        .mobile-toggle-btn {
            top: 0.4rem;
            left: 0.5rem;
            width: 36px;
            height: 36px;
        }
        
        .top-row {
            padding-left: 4rem !important;
            height: 3rem !important;
        }
        
        .content {
            margin-top: 3rem !important; /* ✅ AJUSTADO para altura reducida */
            min-height: calc(100vh - 3rem);
            padding: 0.5rem;
        }
        
        /* ✅ ASEGURAR que el botón de desktop esté oculto también en pantallas muy pequeñas */
        .sidebar-toggle-btn {
            display: none !important;
        }
    }
}

/* ✅ DEPURACIÓN FONT AWESOME: Forzar visibilidad de iconos con estilos específicos */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
}

/* ✅ CRÍTICO: Reglas específicas para Font Awesome con máxima prioridad */
i.fas,
i.far,
i.fab,
i[class^="fa-"],
i[class*=" fa-"],
.fas,
.far,
.fab,
span.fas,
span.far,
span.fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    speak: never !important;
    text-decoration: inherit !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    vertical-align: -0.125em !important;
}

/* ✅ Iconos regulares específicos */
i.far,
span.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* ✅ Iconos de marcas específicos */
i.fab,
span.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* ✅ Estilos específicos por clase de icono */
.fa-tachometer-alt::before { content: "\f3fd" !important; }
.fa-shopping-bag::before { content: "\f290" !important; }
.fa-users::before { content: "\f0c0" !important; }
.fa-file-invoice::before { content: "\f570" !important; }
.fa-truck::before { content: "\f0d1" !important; }
.fa-boxes::before { content: "\f468" !important; }
.fa-wallet::before { content: "\f555" !important; }
.fa-university::before { content: "\f19c" !important; }
.fa-percentage::before { content: "\f541" !important; }
.fa-book::before { content: "\f02d" !important; }
.fa-database::before { content: "\f1c0" !important; }
.fa-cogs::before { content: "\f085" !important; }
.fa-chevron-down::before { content: "\f078" !important; }
.fa-user-plus::before { content: "\f234" !important; }
.fa-user-edit::before { content: "\f4ff" !important; }
.fa-user-circle::before { content: "\f2bd" !important; }
.fa-save::before { content: "\f0c7" !important; }
.fa-times::before { content: "\f00d" !important; }
.fa-exclamation-triangle::before { content: "\f071" !important; }
.fa-bell::before { content: "\f0f3" !important; }
.fa-chart-line::before { content: "\f201" !important; }
.fa-arrow-up::before { content: "\f062" !important; }
.fa-arrow-down::before { content: "\f063" !important; }
.fa-minus::before { content: "\f068" !important; }
.fa-money-check::before { content: "\f53c" !important; }
.fa-file-invoice-dollar::before { content: "\f571" !important; }
.fa-chart-area::before { content: "\f1fe" !important; }

/* Regular icons específicos */
.far.fa-star::before { content: "\f005" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }

/* Brand icons específicos */
.fab.fa-font-awesome::before { content: "\f2b4" !important; font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* Iconos en elementos específicos de la aplicación */
.nav-icon, .kpi-icon i, .metric-icon i, .action-icon i, 
.alert-icon i, .activity-icon i, .nav-arrow {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* EXCLUIR iconos Font Awesome de las reglas globales de Montserrat */
body *:not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(i[class*="fa-"]):not(span[class*="fa-"]) {
    font-family: 'Montserrat', sans-serif !important;
}

/* ✅ REGLA FINAL DE RESPALDO: Fuerza Montserrat en cualquier elemento que se pueda haber escapado */

/* ✅ MODALES GLOBALES: Asegurar uso consistente del color principal */
.modal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: var(--white) !important;
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
    font-weight: 600 !important;
}

.modal .modal-header .btn-close {
    filter: invert(1) !important;
    opacity: 0.8 !important;
}

.modal .modal-header .btn-close:hover {
    opacity: 1 !important;
}

.modal .modal-title {
    color: var(--white) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
}

/* Modales específicos de búsqueda (ciudades, sectores, etc.) */
.modal .modal-body .search-form .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.25) !important;
}

.modal .modal-body .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    border-color: var(--primary-color) !important;
}

.modal .modal-body .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important;
    border-color: var(--primary-dark) !important;
}

/* Estilos para elementos seleccionados en modales */
.modal .list-group-item.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.modal .list-group-item:hover {
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-color) !important;
}

/* ✅ ICONOS FONT AWESOME: REGLAS CON MÁXIMA PRIORIDAD */
/* Sobrescribir TODAS las reglas de Montserrat para iconos Font Awesome */

/* Selectores universales para Font Awesome */
.fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone,
i[class*="fa-"], i.fas, i.far, i.fab, i.fal, i.fad,
span[class*="fa-"], span.fas, span.far, span.fab,
em[class*="fa-"], strong[class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Pesos específicos con máxima prioridad */
.fas, .fa-solid,
i.fas, span.fas, em.fas, strong.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far, .fa-regular,
i.far, span.far, em.far, strong.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab, .fa-brands,
i.fab, span.fab, em.fab, strong.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Iconos específicos con contenido Unicode - MÁXIMA PRIORIDAD */
.fa-tachometer-alt::before { content: "\f3fd" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-shopping-bag::before { content: "\f290" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-users::before { content: "\f0c0" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-file-invoice::before { content: "\f570" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-truck::before { content: "\f0d1" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-boxes::before { content: "\f468" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-wallet::before { content: "\f555" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-university::before { content: "\f19c" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-percentage::before { content: "\f541" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-book::before { content: "\f02d" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-database::before { content: "\f1c0" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-cogs::before { content: "\f085" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-chevron-down::before { content: "\f078" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-user-plus::before { content: "\f234" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-user-edit::before { content: "\f4ff" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-user-circle::before { content: "\f2bd" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-save::before { content: "\f0c7" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-times::before { content: "\f00d" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-exclamation-triangle::before { content: "\f071" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-bell::before { content: "\f0f3" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-chart-line::before { content: "\f201" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-arrow-up::before { content: "\f062" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-arrow-down::before { content: "\f063" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-minus::before { content: "\f068" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-money-check::before { content: "\f53c" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-file-invoice-dollar::before { content: "\f571" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-chart-area::before { content: "\f1fe" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-search::before { content: "\f002" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-home::before { content: "\f015" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-star::before { content: "\f005" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-info-circle::before { content: "\f05a" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-sync-alt::before { content: "\f2f1" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }

/* Regular icons específicos */
.far.fa-star::before { content: "\f005" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }

/* Brand icons específicos */
.fab.fa-font-awesome::before { content: "\f2b4" !important; font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* Iconos en elementos específicos de la aplicación */
.nav-icon, .kpi-icon i, .metric-icon i, .action-icon i, 
.alert-icon i, .activity-icon i, .nav-arrow {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* EXCLUIR iconos Font Awesome de las reglas globales de Montserrat */
body *:not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(i[class*="fa-"]):not(span[class*="fa-"]) {
    font-family: 'Montserrat', sans-serif !important;
}

/* ✅ REGLA FINAL DE RESPALDO: Fuerza Montserrat en cualquier elemento que se pueda haber escapado */

/* ✅ CRÍTICO: Fix Font Awesome - Reglas finales con máxima especificidad */
.nav-module-header .nav-icon.fas,
.nav-link .nav-icon.fas,
.nav-module-header .nav-arrow.fas,
.sidebar i.fas,
.nav-module i.fas,
i.fas.nav-icon,
i.fas.nav-arrow {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

.nav-module-header .nav-icon.far,
.nav-link .nav-icon.far,
.nav-module-header .nav-arrow.far,
.sidebar i.far,
.nav-module i.far,
i.far.nav-icon,
i.far.nav-arrow {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

.nav-module-header .nav-icon.fab,
.nav-link .nav-icon.fab,
.nav-module-header .nav-arrow.fab,
.sidebar i.fab,
.nav-module i.fab,
i.fab.nav-icon,
i.fab.nav-arrow {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}