/* =========================================
   ESTILOS COMUNES
   ========================================= */
.btn-pill { border-radius: 50px; font-weight: 600; }
.btn-primary { background-color: #2c19db; border-color: #300ead; }
.btn-primary:hover { background-color: #667eea; border-color: #667eea; }

/* =========================================
   ESTILOS NAVBAR (Home/Guest)
   ========================================= */
body.navbar-mode { padding-top: 100px; }

.modern-navbar {
    background: #E1F5FE !important; /* Color azul claro solicitado */
    border-radius: 999px !important;
    margin: 20px 40px !important;
    padding: 10px 30px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    width: auto !important;
    left: 0; right: 0;
}

.navbar-brand { color: #333 !important; font-weight: 700; font-size: 1.2rem; }
.navbar-nav .nav-link { color: #000 !important; font-weight: 600; padding: 0 15px !important; transition: color 0.3s ease; }
.navbar-nav .nav-link:hover { color: #fff !important; }

/* Logo grande sobresaliente en navbar */
.modern-navbar .navbar-brand img,
.modern-navbar .navbar-brand {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    position: relative;
    top: -15px; /* Hace que sobresalga visualmente */
    margin-bottom: -15px;
    z-index: 2;
}

@media (max-width: 768px) {
    .modern-navbar .navbar-brand img,
    .modern-navbar .navbar-brand {
        height: 60px !important;
        max-height: 60px !important;
        top: 0;
        margin-bottom: 0;
    }
}

/* Estilo para el submenú dropdown (Blog) */
.submenu-blog, .submenu-blog .dropdown-menu, .submenu-blog .dropdown-menu.show {
    background: #E1F5FE !important;
}

.submenu-blog > a, .submenu-blog > .nav-link, .submenu-blog > .dropdown-toggle {
    background: #E1F5FE !important;
    color: #333 !important; /* Texto oscuro para contraste */
    font-weight: bold !important;
    border-radius: 8px 8px 0 0;
}

.submenu-blog .dropdown-item {
    color: #333 !important; /* Texto oscuro para contraste */
    font-weight: bold !important;
}

/* Efecto hover para el submenú del blog */
.submenu-blog > a:hover, .submenu-blog > .nav-link:hover, .submenu-blog > .dropdown-toggle:hover,
.submenu-blog > a:focus, .submenu-blog > .nav-link:focus, .submenu-blog > .dropdown-toggle:focus {
    background: #b3e5fc !important;
    color: #000 !important;
}

.submenu-blog .dropdown-item:hover, .submenu-blog .dropdown-item:focus {
    background: #b3e5fc !important;
    color: #000 !important;
}

/* =========================================
   ESTILOS SIDEBAR (Internal Pages)
   ========================================= */
body.sidebar-mode { padding-top: 0; background-color: #f8f9fa; }

.sidebar-custom {
    /* Fondo blanco definido en clase bg-white de bootstrap */
    border-right: 1px solid #eee;
    z-index: 1000; /* z-index para desktop */
}

.sidebar-custom .nav-link {
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 10px;
    transition: all 0.2s;
    margin-bottom: 5px;
}

.sidebar-custom .nav-link:hover {
    background-color: #f8f9fa;
    color: #000 !important;
    transform: translateX(5px);
}

.sidebar-custom .nav-link.active-item {
    background-color: #eef2ff;
    color: #4f46e5 !important; /* Indigo */
    font-weight: 700;
}

.sidebar-custom .nav-link.active-item i {
    color: #4f46e5 !important;
}

/* Estilos para el submenú colapsable */
.sidebar-custom [data-bs-toggle="collapse"] {
    cursor: pointer;
}

.sidebar-custom [data-bs-toggle="collapse"] i.bi-chevron-down {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.sidebar-custom [data-bs-toggle="collapse"]:not(.collapsed) i.bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-custom #configSubmenu .nav-link {
    font-size: 0.9rem;
    padding: 8px 10px;
}

.sidebar-custom #configSubmenu .nav-link i {
    font-size: 0.85rem;
}

/* Ajuste del contenido principal para que no quede oculto por el navbar flotante */
/* No necesario en modo sidebar, pero sí en navbar mode */

@media (max-width: 768px) {
    .modern-navbar {
        margin: 10px;
        border-radius: 20px;
        padding: 10px 15px;
    }
    
    .navbar-actions {
        margin-top: 10px;
        justify-content: center;
        width: 100%;
    }
}

/* =========================================
   ESTILOS SIDEBAR RESPONSIVE (Off-Canvas)
   ========================================= */
    @media (max-width: 768px) {
        .sidebar-custom {
            position: fixed !important;
            top: 0;
            left: 0;
            height: 100%;
            width: 260px;
            z-index: 1051 !important; /* Por encima del overlay (1050) */
            background-color: #fff;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }

    body.sidebar-open .sidebar-custom {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1050; /* ANTES: 1040, AHORA: 1050 (Debajo del sidebar, encima del contenido) */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* Aseguramos que el contenido principal no se mueva */
    #main-content {
        transition: margin-left 0.3s ease-in-out;
    }
}