/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

/* MENÚ */
#submenu {
	background-color: white !important;
}
#submenu a {
	color: black;
}


/* --- EL CONTENEDOR QUE SE MUEVE --- */
/* Cambiamos el comportamiento de .sidebar para que sea la base transparente */
.sidebar {
    width: 310px; /* ancho total (Franja + Panel) */
    position: fixed;
    top: 0;
    right: -310px; /* escondido */
    height: 100vh;
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex; /* alinea franja y panel horizontalmente */
    background: rgba(255, 215, 0, 0.3); /* la barra amarilla transparente de fondo */
    /*backdrop-filter: blur(4px);*/
    overflow: hidden;
}

/* Estado activo para que aparezca */
.sidebar.active {
    right: 0 !important;
}

/* --- EL PANEL OSCURO (MI NAV) --- */
#sidebar {
    width: 300px; /* Ancho de los botones */
    height: 100vh;
	background: #1C1C1D; /* Fondo oscuro sólido */
    color: #fff;
    margin-left: auto; /* Empuja el nav al borde derecho de la franja amarilla */
    position: relative;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: none; /* Quitamos la transición aquí para que no choque con el padre */
    border-left: 3px solid #8B6914; /* Marco dorado sólido */
	overflow-x: hidden;
}

/* Segundo marco dorado con el efecto de "bajada" */
#sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;					/* Espacio entre los dos marcos */
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #FFD700 0%, #8B6914 50%, transparent 100%);
    opacity: 0.8;
    pointer-events: none;
}

/* --- ESTILOS DE LOS ENLACES --- */
/* NORMAL */
#sidebar ul.components {
    padding: 56px 0 10px 0;
    list-style: none;
}

/* ZOOM 250% APROX */
@media screen and (min-width: 501px) and (max-width: 768px) {
    #sidebar ul.components {
        padding: 56px 0 10px 0;
    }
}

/* ZOOM 300% - 400% APROX */
@media screen and (min-width: 351px) and (max-width: 500px) {
    #sidebar ul.components {
        padding: 48px 0 10px 0;
    }
}

/* ZOOM 500% O CELULARES PEQUEÑOS */
@media screen and (max-width: 350px) {
    #sidebar ul.components {
        padding: 10px 0 10px 0;
    }
}

#sidebar ul li a {
    padding: 12px 25px;
    font-size: 1.1em;
    display: block;
    color: #DAA520;				/* Texto dorado */
    text-decoration: none;
    transition: 0.3s;
}

#sidebar ul li a:hover {
    background: rgba(188, 136, 61, 0.2);
    color: #fff;
    padding-left: 30px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
	color: #000;
    background: linear-gradient(to bottom, #bc883d, #f5e47b, #bc883d);
	/*opacity: 0.7;*/
}

#sidebar ul li.active>a:hover {
    background: rgba(188, 136, 61, 0.2);
    color: #fff;
    padding-left: 30px;
}

/* Submenús (Corrección de fondo blanco) */
#sidebar ul ul a {
    background: #252525 !important;
    color: #b5934a !important;
    font-size: 0.9em !important;
    padding-left: 20px !important;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;				/* Justo debajo de la sidebar que tiene 1000 */
}

.overlay.active {
    display: block;
}

/* Heredo la animación que ya funciona en los niveles 1 y 2 */
.sidebar ul li a.active, 
.sidebar ul li .sub-menu li a.active,
.sidebar ul li .sub-menu li .sub-sub-menu li a.active { 
    background-color: rgba(255, 255, 255, 0.15);
    border-left: 4px solid #b5934a;
    transition: all 0.3s ease;
    transform: translateX(0px);	/* esto empuja la barra pequeña a la grande y da un espacio */
}

/* Espaciado para el tercer nivel */
.sub-sub-menu li a {
    padding-left: 40px;			/* Más a la derecha que el nivel 2 */
    font-size: 0.9em;			/* Un toque más pequeño para diferenciar */
    opacity: 0.7;
}

.sub-sub-menu li a:hover, 
.sub-sub-menu li a.active {
    opacity: 1;
}

/* --- EFECTO HOVER PARA EL SEGUNDO NIVEL (NO OPCIONAL) --- */
#sidebar ul ul a:hover {
    background: rgba(188, 136, 61, 0.3) !important; /* Un poco más oscuro que el nivel 1 */
    color: #fff !important;
    padding-left: 30px !important; /* Desplazamiento adicional al pasar el mouse */
}

/* --- EFECTOS VARIOS (NO OPCIONAL) --- */
#sidebarCollapse {
    background: transparent;
    padding: 0;
    border: none;
}

.sidebar-portada-space{
    height: 35px;
}

@media screen and (max-width: 500px){
    .sidebar-portada-space{
        height: 20px;
    }
}