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


:root {
    --color-fondo-pagina: #EFF2F5;
    --color-texto-principal: #222B36;
    --color-primario-corporativo: #0B2D48;
    --color-primario-corporativo-hover: #071E30;
    --color-acento-tecnologico: #00AEEF;
    --color-acento-tecnologico-hover: #008BC7;
    --color-acento-neutral-elegante: #AEB6BF;
    --color-blanco: #FFFFFF;
    --fuente-principal: 'Poppins', sans-serif;
    --radio-borde-general: 0.3rem;
    --sombra-suave: 0 6px 18px rgba(11, 45, 72, 0.08);
    --sidebar-bg: #1A2C42;
    /* Paleta Heráldica */
    --oro: #D4AF37;
    --plata: #C0C0C0;
    --gules-rojo: #DC143C;
    --sinople-verde: #009B4D;
    /* Colores base del tema */
    --main-bg: #F0F2F5; /* Lo mantenemos para el glassmorphism */
    --card-bg: #FFFFFF;
    --text-primary: #333748;
    --text-secondary: #8A92A6;
    --sidebar-text: #E0E0E0;
    /* ¡NUEVO COLOR DE ACENTO HERÁLDICO! */
    --accent-color: var(--oro);
    --border-color: #E2E8F0;
    --icons--nav: #FDB913;
}
.navbar {
    /* Sombra suave para dar profundidad y separarla del contenido */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Un borde inferior muy sutil para un acabado limpio */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    /* Aumentamos ligeramente la altura para que no se sienta apretada */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

    .navbar .nav-link {
        display: flex; /* Activamos flexbox */
        flex-direction: column; /* Apilamos los elementos verticalmente (ícono arriba, texto abajo) */
        align-items: center; /* Centramos horizontalmente */
        justify-content: center; /* Centramos verticalmente */
        text-align: center;
        min-width: 80px; /* Damos un ancho mínimo para que no se vean muy juntos */
        font-size: 0.8rem; /* Ajustamos el tamaño de la fuente del texto */
        color: var(--color-acento-neutral-elegante); /* Color base para íconos y texto no activo */
        transition: color 0.2s ease-in-out;
        background-color: transparent !important;
    }

        .navbar .nav-link i {
            font-size: 1.5rem; /* Hacemos el ícono más grande */
            margin-bottom: 5px; /* Añadimos un pequeño espacio entre el ícono y el texto */
        }
        .navbar .nav-link span {
            font-weight: 500;
        }
        .navbar .nav-link:hover {

            opacity: 1; /* Aseguramos que no haya fondo */
        }
            .navbar .nav-link:hover,
            .navbar .nav-link:hover i,
            .navbar .nav-link:hover span {
                color: var(--icons--nav);
            }

        /* Estilo para el enlace de la página ACTIVA */
        .navbar .nav-link.active {
            color: var(--icons--nav) !important; /* ¡Usamos !important para asegurar que el dorado predomine! */
            background-color: transparent !important; /* Aseguramos que no haya fondo */
            font-weight: 600; /* Mantenemos el texto en negrita para destacar */
        }

            .navbar .nav-link.active,
            .navbar .nav-link.active i,
            .navbar .nav-link.active span {
                color: var(--icons--nav) !important; /* ¡LA CLAVE! Forzamos el color en todos los elementos internos */
            }

body {
    font-family: var(--fuente-principal);
    margin: 0;
    background-color: var(--color-fondo-pagina);
    color: var(--color-texto-principal);
    line-height: 1.6;
    padding-top: 70px;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    background-color: #f0f2f5; /* Un color base por si la imagen no carga */
    background-image: url('/svg/blob-scene-haikei (2).svg'); /* Centra la imagen */
    background-attachment: fixed; /* El fondo no se mueve con el scroll */
}
.card {
    width: 100%;
    max-width: 100%;
}

/* Nos aseguramos que la fila del mapa/lista también lo haga */
.row.g-4 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.sidebar {
    width: 260px;
    position: fixed; /* Fijo en la pantalla */
    top: 0;
    left: 0;
    height: 100vh; /* Ocupa toda la altura */
    background-color: var(--color-primario-corporativo);
    color: var(--color-blanco);
    padding: 20px 0;
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.sidebar-header {
    text-align: center;
    padding: 0 20px 20px 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between; /* Coloca el título a la izq. y el botón a la der. */
    align-items: center;
    padding: 0 15px 20px 25px; /* Ajustamos el padding para que se vea bien */
}

    .sidebar-header h3 {
        margin: 0;
        font-size: 1.5em;
        color: var(--color-acento-tecnologico);
    }

.lista-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lista-menu .menu-titulo {
        font-size: 0.7em;
        color: var(--color-acento-neutral-elegante);
        text-transform: uppercase;
        padding: 25px 20px 10px 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .lista-menu .menu-link {
        display: flex;
        align-items: center;
        padding: 12px 25px;
        color: #E0E0E0;
        text-decoration: none;
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-left: 4px solid transparent;
    }

        .lista-menu .menu-link .icon {
            margin-right: 15px;
            font-style: normal;
            font-size: 1.2em;
        }
        .lista-menu .menu-link i {
            margin-right: 15px;
            font-style: normal;
            font-size: 1.2em;
            line-height: 1; /* Añadido para mejor alineación vertical */
        }

        .lista-menu .menu-link:hover {
            background-color: var(--color-acento-tecnologico-hover);
            color: var(--color-blanco);
        }

        .lista-menu .menu-link.active {
            background-color: var(--oro);
            color: var(--color-blanco);
            border-left: 4px solid var(--color-acento-tecnologico);
            font-weight: 600;
        }

.contenido-principal {
    margin-left: 260px; /* Esto empuja el contenido para dejar espacio al sidebar */
    padding: 20px; /* Mantenemos el padding interno del contenido */
    width: calc(100% - 260px); /* El ancho se calcula restando el del sidebar */
    box-sizing: border-box;
}

    /* Ajuste para que el container no ocupe toda la página ahora */
    .contenido-principal .container {
        max-width: 1400px;
        margin: 0 auto; /* Esto centra el contenedor dentro del contenido-principal */
    }

.background-container {
    position: fixed; /* Lo fijamos para que no se mueva con el scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Lo enviamos detrás de todo el contenido */
    overflow: hidden; /* Evita barras de scroll inesperadas */
}


@media (max-width: 992px) {
    /* En pantallas más pequeñas, es común que el sidebar se oculte o cambie de posición.
       Aquí se mantendría, pero si quisieras ocultarlo o ponerlo arriba, esta sería la sección.
       Para este layout, lo mantendríamos fijo pero el contenido principal reacciona. */
}

@media (max-width: 768px) {
    body {
        padding: 15px;
        background-image: url('/svg/blob-scene-haikei (3).svg');
    }
    .espaciador-escritorio {
        display: none;
    }

    .contenido-principal {
        margin-left: 0; /* En pantallas pequeñas, no necesitamos margen a la izquierda si el sidebar cambia de lugar o se oculta */
        width: 100%; /* El contenido principal ocupa todo el ancho */
        padding: 15px; /* Ajusta el padding para móviles si es necesario */
    }

    .container { /* Re-aplicamos el ancho para pantallas pequeñas */
        width: 100%;
        padding: 20px 15px;
        margin-top: 10px;
    }


    /* Aquí irían las reglas para hacer el sidebar responsive, por ejemplo, ocultarlo y mostrarlo con un botón,
       o cambiarlo a un diseño de "overlay" para pantallas pequeñas. Como no tienes ese HTML/JS,
       solo ajustamos el contenido principal. */
}

@media (max-width: 480px) {
    /* Más ajustes si es necesario para pantallas muy pequeñas */
}
/* Estilo para el enlace del menú cuando está activo */
/* --- ESTILOS PARA LA FUNCIONALIDAD DE CONTRAER/EXPANDIR --- */

/* Transiciones suaves */
.sidebar, .contenido-principal {
    transition: all 0.3s ease-in-out;
}

.sidebar-toggle-btn {
    /* 1. Dimensiones y forma del botón */
    width: 38px;
    height: 38px;
    border-radius: 50%; /* ¡Esto lo convierte en un círculo! */
    /* 2. Color y borde */
    background-color: rgba(255, 255, 255, 0.08); /* Fondo muy sutil */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde casi invisible */
    color: var(--color-acento-neutral-elegante); /* Color del ícono */
    /* 3. Alineación del ícono (la flecha o las barras) */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 4. Estilos generales y transición */
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .sidebar-toggle-btn:hover {
        background-color: var(--color-acento-tecnologico);
        border-color: var(--color-acento-tecnologico);
        color: var(--color-blanco);
        transform: rotate(180deg) scale(1.1); /* Efecto de rotación y escala */
    }

/* --- ESTADO CONTRAÍDO (COLLAPSED) --- */

/* 1. Sidebar contraído */
.sidebar.collapsed {
    width: 80px; /* Ancho reducido */
}

    /* 2. Ocultar texto y ajustar elementos internos */
    .sidebar.collapsed .link-text,
    .sidebar.collapsed .sidebar-header h3,
    .sidebar.collapsed .lista-menu .menu-titulo span {
        display: none; /* Ocultamos todo el texto */
    }

    /* 3. Centrar los iconos y títulos */
    .sidebar.collapsed .menu-link {
        justify-content: center; /* Centramos el icono */
        padding: 15px 10px;
    }

        .sidebar.collapsed .menu-link .icon {
            margin-right: 0; /* Quitamos el margen del icono */
            font-size: 1.4em;
        }

    .sidebar.collapsed .lista-menu .menu-titulo {
        padding: 25px 0 10px 0;
        text-align: center;
    }
        /* Después de contraer el título, dejamos un separador visual */
        .sidebar.collapsed .lista-menu .menu-titulo::after {
            content: '• • •';
            color: var(--color-acento-neutral-elegante);
            font-size: 0.8em;
            letter-spacing: 3px;
        }


/* 4. Ajustar el contenido principal */
.contenido-principal.collapsed {
    margin-left: 80px; /* Reducimos el margen para que ocupe el espacio */
    width: calc(100% - 80px);
}



/* --- MEJORAS AL ESTADO CONTRAÍDO --- */

/* 1. Reemplazar los puntos por una línea divisoria elegante */
.sidebar.collapsed .lista-menu .menu-titulo::after {
    content: ''; /* Quitamos el contenido de texto */
    display: block;
    width: 30px; /* Ancho de la línea .sidebar-toggle-btn
    margin: 8px auto 0; /* Centramos la línea */
    border-bottom: 1px solid var(--color-acento-neutral-elegante); /* Creamos la línea */
}

/* 2. Ajustar el estilo del enlace activo para que se vea más limpio */
.sidebar.collapsed .menu-link.active {
    background-color: var(--oro); /* Un fondo más sutil */
}

    .sidebar.collapsed .menu-link.active .icon {
        transform: scale(1.1); /* Hacemos el icono un poco más grande */
    }
.sidebar.collapsed .sidebar-header {
    justify-content: center; /* Centra el botón cuando el título desaparece */
    padding: 0 0 20px 0; /* Ajustamos el padding para el estado contraído */
}
.sidebar-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    padding: 0.5rem; /* Espaciado similar al de otros elementos */
    flex-grow: 1; /* Permite que el enlace ocupe el espacio disponible */
}

.sidebar-logo {
    height: 120px; /* Ajusta la altura de tu logo. El ancho se ajustará automáticamente */
    width: auto; /* Mantiene la proporción original de la imagen */
    margin-right: 10px; /* Crea un espacio entre el logo y el botón de contraer */
}

/* Cuando la barra está colapsada, ocultamos el logo para que no se vea cortado */
.sidebar.collapsed .sidebar-logo-link {
    display: none;
    }
/* ======================================= */
/* =         ESTILOS RESPONSIVOS         = */
/* ======================================= */

/* --- Estilos para la barra de navegación móvil --- */
.mobile-nav {
    /* Por defecto, la barra móvil está oculta en escritorio */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: var(--color-blanco);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-size: 0.7rem;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

    .mobile-nav-link i {
        font-size: 1.4rem;
        margin-bottom: 4px;
    }

    .mobile-nav-link.active {
        color: var(--oro);
    }


/* --- Media Query: Reglas para la vista móvil --- */
@media (max-width: 768px) {
    /* 1. Ocultamos la barra lateral de escritorio */
    .sidebar {
        display: none;
    }

    /* 2. Mostramos la barra de navegación móvil */
    .mobile-nav {
        display: flex;
    }

    /* 3. Ajustamos el contenido principal */
    .contenido-principal {
        margin-left: 0;
        width: 100%;
        /* Dejamos espacio abajo para que la barra no tape el contenido */
        padding-bottom: 80px;
    }

    /* 4. Quitamos el margen del body que era para la navbar superior */
    body {
        padding-top: 0;
    }
  
}
@media (max-width: 991.98px) {
    /* 1. Ocultamos la barra de navegación SUPERIOR */
    .navbar {
        display: none;
    }

    /* 2. Mostramos la barra de navegación INFERIOR */
    .mobile-nav {
        display: flex;
    }

    /* 3. Ajustamos el espaciado del body */
    body {
        padding-top: 0; /* Quitamos el espacio superior */
        padding-bottom: 70px; /* Añadimos espacio inferior para la barra móvil */
    }
}
/* ================================================= */
/* =     ESTILOS PARA LISTA DE MÓDULOS MÓVIL      = */
/* ================================================= */

/* Botón "Más" en la barra de navegación */
#more-modules-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Hoja de módulos (oculta por defecto) */
#mobile-modules-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-fondo-pagina);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    z-index: 1001;
    transform: translateY(100%); /* La ocultamos abajo */
    transition: transform 0.3s ease-in-out;
}

    /* Estado visible de la hoja */
    #mobile-modules-sheet.is-open {
        transform: translateY(0);
    }

/* Encabezado de la hoja */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-borde);
}

    .sheet-header h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-texto-principal);
    }

#close-sheet-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
}

/* Contenido y enlaces de la lista */
.sheet-content {
    padding: 1rem;
}

.sheet-link {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--color-texto-principal);
    border-radius: var(--radio-borde-general);
    font-weight: 500;
}

    .sheet-link:hover {
        background-color: rgba(0,0,0,0.05);
    }

    .sheet-link i {
        font-size: 1.25rem;
        margin-right: 1rem;
        color: var(--color-primario-corporativo);
    }

/* Overlay para el fondo */
.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

    .sheet-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

/* En wwwroot/css/site.css */
.nav-link {
    position: relative;
    display: inline-block;
}
.nav-link-container {
    position: relative; /* Esta es el ancla para el badge */
    display: flex;
    align-items: center;
}

.notification-badge {
    position: absolute;
    top: 8px; /* Ajusta la posición vertical */
    right: 5px; /* Ajusta la posición horizontal */

    background-color: #dc3545; /* Rojo de Bootstrap */
    color: white;
    width: 20px; /* Ancho fijo para que sea un círculo */
    height: 20px; /* Alto fijo */
    border-radius: 50%; /* Esto lo hace circular */

    display: flex; /* Centra el número dentro del círculo */
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    /* Borde del color del navbar para que resalte */
    [cite_start]border: 2px solid #0B2D48;
    [cite: 16]
}