/* =====================================================
           IMPORTS - ARCHIVOS CSS MODULARES
           ===================================================== */
@import url('./navbar.css');
/* @import url('./buttons-system.css'); */
@import url('./header.css');
@import url('./sidebar.css');
@import url('./layout-principal.css');
@import url('./view-header.css');
@import url('./buttons.css');
@import url('./preloader.css');
@import url('./watermark.css');
@import url('./dropdown.css');
@import url('./tables.css');
@import url('./cards.css');
@import url('./utilities.css');
@import url('./formularios.css');
@import url('./tabs.css');
@import url('./jumbotrons.css');
@import url('./acordions.css');
@import url('./galeria.css');
@import url('./mapas.css');
@import url('./mobile-sidebar.css');
@import url('./login-styles.css');
@import url('./secciones.css');
@import url('./sankey.css');
@import url('./buttons.css');
@import url('./netflix-style.css');

/*
 * ==========================================================================
 * 1. VARIABLES CSS (CUSTOM PROPERTIES)
 * Aquí definimos el ADN de nuestro diseño.
 * ¡Ahora con los colores del logo SNIER!
 * ==========================================================================
 */
:root {
    /* Paleta de Colores Principal (Basada en el logo) */
    --color-primario: #8BC34A;
    /* Verde lima del logo */
    --color-secundario: #606060;
    /* Gris del logo */
    /* --color-fondo-oscuro: #022336; */
    --color-fondo-oscuro: #022336;
    /* Azul oscuro del logo */
    --glass-gradient-bg: linear-gradient(to right, rgba(2, 35, 54, 0.75), rgba(11, 138, 174, 0.75));
    --opaque-gradient-bg: linear-gradient(to right, #022336, #0b8aae);

    /* Paleta de Acciones (Podemos mantener estos para consistencia en UI) */
    --color-exito: #198754;
    --color-peligro: #dc3545;
    --color-advertencia: #ffc107;
    --color-info: #0dcaf0;

    /* Paleta de Grises y Texto */
    --color-fondo: #f8f9fa;
    --color-superficie: #ffffff;
    --color-borde: #dee2e6;
    --texto-principal: #212529;
    /* Mantenemos un negro suave para legibilidad */
    --texto-secundario: var(--color-secundario);
    /* Usamos el gris del logo */
    --texto-sobre-color: #ffffff;
    /* Texto blanco para usar sobre fondos de color */

    /* Tipografía */
    --fuente-principal: 'Montserrat', sans-serif;
    --fuente-titulos: 'Poppins', sans-serif;
    --fuente-monoespacio: 'Courier New', Courier, monospace;
    --tamano-fuente-base: 16px;
    --linea-altura-base: 1.6;
    /* Ligeramente más espaciado para mejor legibilidad */

    /* Bordes y Sombras (Sin cambios) */
    --radio-borde: 0.375rem;
    --sombra-suave: 0 2px 4px rgba(0, 0, 0, 0.075);

    /* ==========================================================================
     * DESIGN TOKENS AVANZADOS - UI EXPERT LEVEL
     * ========================================================================== */

    /* Espaciado sistemático (8px grid system) */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-xxl: 3rem;
    /* 48px */
    --spacing-xxxl: 4rem;
    /* 64px */

    /* Radio de bordes sistemático */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;
    /* Círculo completo */

    /* Sombras sistemáticas con profundidad */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(139, 195, 74, 0.3);

    /* Transiciones sistemáticas */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 350ms ease-out;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index sistemático */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;

    /* Tipografía expandida */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */

    /* Pesos de fuente */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Colores de estado con variaciones */
    --color-primario-50: #f0f9e8;
    --color-primario-100: #d9f0c4;
    --color-primario-200: #bde69c;
    --color-primario-300: #a1dc74;
    --color-primario-400: #8bd057;
    --color-primario-500: #8BC34A;
    /* Color base */
    --color-primario-600: #7cb342;
    --color-primario-700: #689f38;
    --color-primario-800: #558b2f;
    --color-primario-900: #33691e;

    /* Azul oscuro con variaciones */
    --color-oscuro-50: #e8f2ff;
    --color-oscuro-100: #bdd9ff;
    --color-oscuro-200: #91c0ff;
    --color-oscuro-300: #64a7ff;
    --color-oscuro-400: #4294ff;
    --color-oscuro-500: #2081ff;
    --color-oscuro-600: #1c74e8;
    --color-oscuro-700: #1862cc;
    --color-oscuro-800: #1450b0;
    --color-oscuro-900: #002D56;
    /* Color base */

    /* Breakpoints responsive */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/*
         * ==========================================================================
         * 2. ESTILOS GENERALES Y RESETEO
         * Aplicamos nuestros valores base al documento.
         * ==========================================================================
         */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Un reseteo fundamental para el manejo de cajas */
}

html {
    font-size: var(--tamano-fuente-base);
}

body {
    margin: 0;
    font-family: var(--fuente-principal);
    line-height: var(--linea-altura-base);
    color: var(--texto-principal);
    background-color: var(--color-fondo);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fuente-titulos);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    color: var(--texto-principal);
}

h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

p {
    font-family: var(--fuente-principal);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    line-height: var(--linea-altura-base);
    color: var(--texto-principal);
}

a {
    color: var(--color-primario);
    text-decoration: none;
    /* Ensure no underline by default */
    transition: color var(--transition-fast), opacity var(--transition-fast);
    /* Smooth transition for hover */
}

a:hover {
    text-decoration: none;
    /* Remove underline on hover */
    opacity: 0.8;
    /* Subtle visual feedback on hover */
}

/* ==========================================================================
 * 3. ESTILOS ESPECÍFICOS DEL LOGIN (VERSIÓN EXPERTA)
 * ==========================================================================
 */

/* Animación de pulso para llamado a la acción */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 195, 74, 0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(139, 195, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 195, 74, 0);
    }
}

@keyframes pulse-shadow-dark {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 45, 86, 0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 45, 86, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 45, 86, 0);
    }
}

/* Botón principal en el Hero Section */
.hero-actions .login-btn-primary {
    background: var(--color-primario);
    border: 2px solid var(--color-primario);
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: var(--font-weight-bold);
    color: var(--texto-sobre-color);
    font-size: var(--font-size-base);
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: pulse-shadow 2s infinite;
}

.hero-actions .login-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    background-color: var(--color-primario-600);
    border-color: var(--color-primario-600);
    text-decoration: none;
    color: var(--texto-sobre-color);
}

.hero-actions .login-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.7s;
}

.hero-actions .login-btn-primary:hover::before {
    left: 100%;
}

/* Card de Login */
.login-card {
    background: var(--color-superficie);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--color-borde);
    overflow: hidden;
    /* Asegura que el borde superior no se salga */
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--color-primario);
}

/* Pestañas de Login (Tabs) - Estilo Botón Elegante */
.login-tabs .nav-link {
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-base);
    border: none;
    color: var(--texto-secundario);
    background-color: var(--color-fondo);
}

.login-tabs .nav-link.active {
    color: var(--texto-sobre-color);
    background-color: var(--color-primario);
    box-shadow: var(--shadow-md);
}

/* Grupo de Formulario de Login - Icono a la Izquierda Mejorado */
.login-form-group {
    margin-bottom: 1.25rem;
}

.login-form-group .input-group {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-borde);
    transition: var(--transition-base);
    background-color: var(--color-superficie);
}

.login-form-group .input-group:focus-within {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.2);
}

.login-form-group .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--texto-secundario);
    padding-left: var(--spacing-lg);
    padding-right: 0;
}

.login-form-group .form-control {
    border: none;
    background-color: transparent;
    padding-left: var(--spacing-sm);
}

.login-form-group .form-control:focus {
    box-shadow: none;
}

/* Botón de submit del formulario */
.login-card .login-btn-primary {
    background: var(--color-oscuro-900);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) 0;
    font-weight: var(--font-weight-bold);
    color: var(--texto-sobre-color);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    width: 100%;
    animation: pulse-shadow-dark 2s infinite;
}

.login-card .login-btn-primary:hover {
    background: var(--color-oscuro-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Botón de invitado */
#consultaPublica .login-btn-primary {
    background: var(--color-primario);
    animation: pulse-shadow 2s infinite;
}

#consultaPublica .login-btn-primary:hover {
    background: var(--color-primario-600);
}

/* Enlaces */
.login-card a {
    color: var(--color-oscuro-800);
    font-weight: 500;
    text-decoration: none;
}

.login-card a:hover {
    color: var(--color-primario);
    text-decoration: underline;
}

/* Ajustes para la nueva sección de beneficios */
.benefits-nav .nav-link {
    color: var(--texto-principal);
}

.benefits-nav .nav-link:hover,
.benefits-nav .nav-link:hover small,
.benefits-nav .nav-link:hover span {
    color: var(--color-primario);
}

.benefits-nav .nav-link:hover i {
    color: var(--color-primario);
}

/* Botones outline del login */
.login-btn-outline {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--color-primario);
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--texto-sobre-color);
    font-size: var(--font-size-base);
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.login-btn-outline:hover {
    background: var(--color-primario);
    color: var(--texto-sobre-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    text-decoration: none;
}

/* Formularios del login */
.login-form-group {
    margin-bottom: 1.5rem;
    /* Aumentar el espacio entre campos */
}

.login-form-group .form-label {
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    /* Ligeramente más grande */
}

.login-form-group .input-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--color-borde);
    transition: all 0.3s ease;
}

.login-form-group .input-group:focus-within {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.25);
}

.login-form-group .input-group-text {
    background: var(--color-superficie);
    color: var(--texto-secundario);
    border: none;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--color-borde);
}

.login-form-group .form-control {
    border: none;
    padding: 0.75rem 1rem;
    color: var(--texto-principal);
    font-weight: 400;
    background: var(--color-superficie);
}

.login-form-group .form-control:focus {
    box-shadow: none;
    background: var(--color-superficie);
}

.login-form-group .form-control::placeholder {
    color: var(--texto-secundario);
    opacity: 0.6;
}

/* Alertas del login */
.login-alert {
    border-radius: var(--radius-md);
    border: none;
    padding: var(--spacing-md);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
}

.login-alert-info {
    background: rgba(139, 195, 74, 0.9);
    /* Opaque primary color */
    color: var(--texto-sobre-color);
    border-left: 4px solid var(--color-primario);
}

.login-alert-danger {
    background-color: rgba(220, 53, 69, 0.9);
    /* Opaque danger color */
    color: var(--texto-sobre-color);
    border-left: 4px solid var(--color-peligro);
}

/* Botón de submit del formulario */
.login-card .login-btn-primary:hover {
    background: var(--color-primario);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Card del login */
.login-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    border: 1px solid rgba(139, 195, 74, 0.2);
    transition: var(--transition-smooth);
    position: relative;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primario), var(--color-oscuro-900), var(--color-primario));
    z-index: 1;
}

.login-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2xl);
    border-color: rgba(139, 195, 74, 0.3);
}

/* Botón dentro del card del login */
.login-card .login-btn-primary {
    background: var(--color-primario);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: var(--font-weight-bold);
    color: var(--texto-sobre-color);
    font-size: var(--font-size-base);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.login-card .login-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-primario-600), var(--color-oscuro-800));
    color: var(--texto-sobre-color);
    text-decoration: none;
}

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

.login-card .login-btn-primary:focus {
    outline: none;
    box-shadow: var(--shadow-lg), 0 0 0 3px rgba(139, 195, 74, 0.3);
}

/* Mejorar el texto del card */
.login-card h4 {
    color: var(--color-oscuro-900);
    font-weight: var(--font-weight-bold);
}

.login-card .text-muted {
    color: var(--texto-secundario);
    opacity: 0.8;
}

/* Video del login sin blur */
.login-video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: var(--transition-smooth);
    background: var(--color-superficie);
}

.login-video-container:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.login-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
}

.login-video-description {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
    color: var(--texto-principal);
    font-weight: var(--font-weight-medium);
}

.login-video-description:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Responsive para login */
@media (max-width: 768px) {

    .login-btn-primary,
    .login-btn-outline {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .login-video-container {
        max-width: 100%;
        border-radius: var(--radius-lg);
    }

    .login-video {
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 576px) {
    .login-card {
        border-radius: var(--radius-xl);
    }

    .login-video-container {
        border-radius: var(--radius-md);
    }

    .login-video {
        border-radius: var(--radius-md);
    }
}

/* =====================================================
   10. BENEFITS SECTION - ¿Para quién es útil el SNIER?
   ===================================================== */

.benefits-section {
    padding: var(--spacing-xxxl) 0;
    background-color: #f8f9fa;
    /* Un fondo muy sutil */
    position: relative;
    overflow: hidden;
}

.benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0), var(--color-primario-50), rgba(255, 255, 255, 0));
    transform: rotate(-10deg);
    z-index: 0;
    opacity: 0.5;
}

.benefits-section .container {
    position: relative;
    z-index: 1;
}

.benefits-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    color: var(--texto-principal) !important;
    /* Forzado para asegurar visibilidad */
    text-align: left;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.benefits-nav .nav-link div span {
    color: var(--texto-principal);
}

.benefits-nav .nav-link small {
    color: var(--texto-secundario);
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
}

.benefits-nav .nav-link:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primario-200);
}

.benefits-nav .nav-link.active {
    background-color: var(--color-fondo-oscuro);
    color: var(--texto-sobre-color) !important;
    /* Forzado para asegurar visibilidad */
    box-shadow: var(--shadow-lg);
    border-color: var(--color-fondo-oscuro);
    transform: translateX(10px) scale(1.02);
}

.benefits-nav .nav-link.active div span,
.benefits-nav .nav-link.active small {
    color: var(--texto-sobre-color);
}

.benefits-nav .nav-link.active i {
    color: var(--texto-sobre-color);
    transform: scale(1.1);
}

.benefits-nav .nav-link.active small {
    opacity: 0.8;
}

.tab-content .tab-pane {
    transition: opacity 0.5s ease-in-out;
}

.benefit-card {
    background-color: var(--color-superficie);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition-smooth);
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.benefit-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 4px solid var(--color-primario);
}

.benefit-content {
    padding: var(--spacing-xl);
}

.benefit-content h4 {
    color: var(--color-oscuro-900);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.benefit-list {
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-lg);
}

.benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--texto-secundario);
}

.benefit-list i {
    color: var(--color-primario);
    margin-top: 4px;
}

@media (max-width: 991.98px) {
    .benefits-nav {
        flex-direction: row !important;
        overflow-x: auto;
        padding-bottom: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .benefits-nav .nav-link {
        flex: 0 0 auto;
        width: 280px;
    }

    .benefit-card {
        flex-direction: column;
    }
}

/* =====================================================
   11. CTA SECTION - Call to Action
   ===================================================== */
.cta-section {
    background: linear-gradient(135deg, var(--color-fondo-oscuro) 0%, var(--color-oscuro-900) 100%);
    color: var(--texto-sobre-color);
    padding: var(--spacing-xxxl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://cdn.sassoapps.com/img_snier/login/cta-bg-pattern.png') repeat;
    /* Placeholder for a subtle pattern */
    opacity: 0.1;
    z-index: 0;
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.cta-section p {
    font-size: var(--font-size-lg);
    max-width: 800px;
    margin: 0 auto var(--spacing-xxl) auto;
    opacity: 0.9;
}

.cta-section .btn {
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: var(--transition-smooth);
    margin: 0 var(--spacing-sm);
}

.cta-section .btn-light {
    background-color: var(--texto-sobre-color);
    color: var(--color-fondo-oscuro);
    border: 2px solid var(--texto-sobre-color);
    box-shadow: var(--shadow-md);
}

.cta-section .btn-light:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--texto-sobre-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta-section .btn-outline-light {
    border: 2px solid var(--texto-sobre-color);
    color: var(--texto-sobre-color);
    background-color: transparent;
}

.cta-section .btn-outline-light:hover {
    background-color: var(--texto-sobre-color);
    color: var(--color-fondo-oscuro);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Responsive adjustments for CTA section */
@media (max-width: 768px) {
    .cta-section h2 {
        font-size: var(--font-size-3xl);
    }

    .cta-section p {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xl);
    }

    .cta-section .btn {
        display: block;
        width: 80%;
        margin: var(--spacing-md) auto;
    }
}

@media (max-width: 576px) {
    .cta-section h2 {
        font-size: var(--font-size-2xl);
    }

    .cta-section .btn {
        width: 90%;
    }
}

/* =====================================================
   12. FOOTER SECTION - Modern & Elegant
   ===================================================== */
footer {
    background-color: var(--color-oscuro-900);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-xxxl) 0 var(--spacing-xl) 0;
    font-size: var(--font-size-sm);
}

footer h5 {
    color: var(--texto-sobre-color);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
}

footer .footer-links li {
    margin-bottom: var(--spacing-sm);
}

footer .footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
    /* Allows transform to work */
}

footer .footer-links a:hover {
    color: var(--color-primario);
    transform: translateX(5px);
    /* Subtle slide effect */
    text-decoration: none;
    /* Ensure no underline */
}

footer .social-icon {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-xl);
    margin-right: var(--spacing-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

footer .social-icon:hover {
    color: var(--texto-sobre-color);
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    transform: translateY(-3px) scale(1.1);
    box-shadow: var(--shadow-md);
}

footer hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

footer .small {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments for Footer */
@media (max-width: 768px) {
    footer {
        text-align: center;
    }

    footer .col-lg-2,
    footer .col-md-4 {
        margin-bottom: var(--spacing-xl);
    }

    footer .social-icon {
        margin: 0 var(--spacing-sm);
    }
}


/* html, body {
    height: 100%;
    margin: 0;
} */

/* .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa toda la altura de la ventana 
} */

/* main.flex-fill {
    flex: 1; /* Empuja el footer hacia abajo 
}

footer.footer-snier {
    background: linear-gradient(to right, #022336, #0b8aae);
    position: relative;
    width: 100%;
} */

/* Footer alineado con sidebar pero sin ocupar toda la altura */
.footer-content {
    margin-left: 250px;
    width: calc(100% - 250px);
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Cuando el sidebar está colapsado */
body.sidebar-collapsed .footer-content {
    margin-left: 0px;
    width: calc(100% - 0px);
    max-width: calc(100% - 0px);
}

/* En pantallas pequeñas (donde el sidebar normalmente desaparece) */
@media (max-width: 991px) {
    .footer-content {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
}


/* Leyendas */

/* Leyenda */
.leyenda {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 40px;
}

.leyenda p {
    margin: 0;
    margin-right: 20px;
    position: relative;
    padding-left: 20px;
    font-size: 10px;
    text-align: center
}

.leyenda p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.leyenda p:nth-child(1)::before {
    background-color: #ef9650;
}

.leyenda p:nth-child(2)::before {
    background-color: #f2cf44;
}

.leyenda p:nth-child(3)::before {
    background-color: #97d96d;
}

.leyenda p:nth-child(4)::before {
    background-color: #161c2c;
}

.leyenda p:nth-child(5)::before {
    background-color: #a77c50;
    width: 20px;
    /* Ajusta el ancho a tu preferencia */
    height: 2px;
    /* Ajusta el alto a tu preferencia */
    border-radius: 0;
    /* Remover el border-radius para que no sea un círculo */
    scroll-padding-right: 3%;
}

/* leyendas IHH */
.leyendas {
    font-size: 10px;
    margin-top: 20px;
    /* Ajusta según sea necesario */
}

.leyenda-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /* Espacio entre leyendas */
}

/* ESTILOS PARA LOS ICONOS */

.iconomenu {
    margin-right: 10px;
    /* Ajustar el margen derecho de la imagen */
}

.iconomenu {
    width: 56px !important;
    /* Establecer el ancho m ximo al 100% del contenedor */
    height: auto;
    /* Permitir que la altura se ajuste autom ticamente */
}

@media screen and (max-width: 500px) {
    .iconomenu {
        margin-bottom: 5px;
        margin-right: 10px;
        /* Ajustar el margen derecho de la imagen */
        width: 32px !important;
        /* Establecer el ancho m ximo al 100% del contenedor */
        height: auto;
        /* Permitir que la altura se ajuste autom ticamente */
    }
}

#tarjetas-totales .iconomenu {
    width: 40px;
    /* Tamaño del ícono */
    height: 40px;
    margin-bottom: 10px;
}

.iconoflecha {
    width: 68px !important;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.iconoflecha:hover {
    transform: scale(1.2);
}

/* @* Iconos *@ */
.iconotierra {
    width: 48px !important;
    height: auto;
}

.iconoco2e {
    width: 48px !important;
    height: auto;
}

.iconoflecha {
    width: 68px !important;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.iconoflecha:hover {
    transform: scale(1.2);
}

.iconoboton {
    width: 24px !important;
    height: auto;
}

.iconoboton2 {
    width: 36px !important;
    height: auto;
}

.iconoimg {
    width: 90px;
    height: auto;
    padding-top: 16px;
}

.iconoimg3 {
    width: 60px;
    height: auto;
}

.iconoimg2 {
    width: 60px;
    height: auto;
    padding: 3px;
}

.icono-responsivo {
    max-width: 24px;
    /* Establecer el ancho m ximo al 100% del contenedor */
    height: auto;
    /* Permitir que la altura se ajuste autom ticamente */
}

.icono-lateral {
    max-width: 100%;
    /* Establecer el ancho m ximo al 100% del contenedor */
    height: auto;
    /* Permitir que la altura se ajuste autom ticamente */
}

.iconomenu {
    width: 56px !important;
    /* Establecer el ancho m ximo al 100% del contenedor */
    height: auto;
    /* Permitir que la altura se ajuste autom ticamente */
}

.iconoboton {
    padding-right: 5px;
}

.iconobotongie {
    width: 60px !important;
    height: 60px;
    margin-top: 30px;
}

.icono-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0px;
}

.icon-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: red;
    color: white;
    font-size: 16px;   /* aumenta el tamaño del número */
    font-weight: bold;
    width: 22px !important;       /* 🔹 prueba más grande */
    height: 22px !important;
    border-radius: 50%;
    display: inline-flex !important;  /* asegúrate de que respete el tamaño */
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    z-index: 10;       /* por si queda detrás */
}

.usuario-activo-icono {
    font-size: 3rem;
    margin-right: 15px;
    color: #17a2b8;
    /* Color del ícono */
}

/* @* Diagrama *@ */
.diagram {
    display: flex;
    justify-content: space-between;
    margin: 0px;
    position: relative;
    z-index: 2;
}

.column {
    flex: 1;
    text-align: center;
    padding: 5px;
    min-width: 150px;
    max-width: 150px;
    border-radius: 8px;
}

.columni {
    flex: 1;
    text-align: center;
    min-width: 30px;
    max-width: 30px;
}

/*Textos del Diagrama*/
.column h5 {
    display: block;
    margin: 8px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 14px;
    font-weight: bold;
}

.column h4 {
    display: block;
    margin: 8px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 14px;
}

.column h3 {
    display: block;
    margin: 0px 0;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: bolder;
    color: #6E7080;
}

.column h2 {
    display: block;
    margin: 0px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 24px;
}

.column a {
    display: block;
    margin: 4px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 12px;
}

.column p {
    display: block;
    margin: 4px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 8px;
}

.column ul {
    text-align: justify;
    font-weight: bold;
}

.column li {
    display: block;
    margin: 4px 0;
    text-decoration: none;
    color: #6E7080;
    font-size: 8px;
}

.group1,
.group2,
.group3,
.groupgris,
.groupnaranja,
.groupverde,
.groupuranio {
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 2px -1px 11px -5px rgba(0, 0, 0, 0.2) !important
}

.group2 {
    /*background-color: #d0a1bd;*/
    background-color: #d48b99;
}

.group3 {
    background-color: #4E959B;
}

.group_pm {
    background-color: #f3f3f3;
    border-style: solid;
    border-color: #d9d9d9;
    border-width: 4px;
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 12px;
}

.groupgris {
    background-color: #f3f3f3;
}

.groupgris2 {
    padding: 0px;
    background-color: #f3f3f3;
    border-radius: 16px;
    box-shadow: 2px -1px 11px -5px rgba(0, 0, 0, 0.34) !important
}

.groupuranio {
    background-color: #F0DB97;
}

.groupnaranja {
    background-color: #e2bd04;
}

.groupverde {
    background-color: #b6dea0;
    /* background-color: #EEEDE4;*/
}

/* @* Linea retroalimentacion *@ */
.v-liner {
    border-left: thick solid #526675;
    height: 630px;
    margin-left: 50%;
    margin-top: 0px;
}

.v-liner2 {
    border-left: thick solid #526675;
    height: 333px;
    margin-left: 49%;
    margin-top: -25px;
}

.h-liner {
    position: fixed;
    /* top: 0; */
    left: 384px;
    right: 0;
    border-bottom: thick solid #526675;
    margin-top: 441px;
    width: 1095px;
}

.arrow-image {
    position: absolute;
    /* Posición absoluta para las imágenes de flechas */
}

.float-text {
    position: absolute;
    /* Posición absoluta para los textos */
    font-size: 12px;
}

.texto-vertical-right {
    position: absolute;
    /* Posición absoluta para los textos verticales */
    font-size: 12px;
}

.btn-d-rojo {
    background-color: #9f2241 !important;
    color: #ffffff !important;
    width: 100%;
    border-radius: 8px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
    /* Transición suave */
}

.btn-d-azul {
    background-color: #05556b !important;
    color: #ffffff !important;
    width: 100%;
    border-radius: 8px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
    /* Transición suave */
}

.navbarmapag {
    width: 100%;
    /* background-color: #161c2c; */
    overflow: auto;
    display: flex;
    justify-content: flex-start;
    /* o 'center' si prefieres */
    align-items: center;
}

.navbarmapag a {
    flex: 1;
    /* Asegura que cada enlace ocupe un espacio igual */
    padding: 5px;
    color: black;
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    /* Centra el texto dentro de cada enlace */
}

.navbarmapag a:hover {
    color: #fafafa;
    cursor: pointer;
    background-color: #595560;
}

.navbarmapag a.active {
    background-color: #1a8092ff;
    color: #fafafa;
}