:root{
    --sidebar-w: 280px;
    --brand: #f2c300;      /* Amarillo */
    --text:  #2b2f33;
    --muted: #8a9199;
    --border:#e6e8eb;
    --hover :#f6f7f9;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Botón hamburguesa */
#show-sidebar.sidebar-toggle{
    position: fixed;
    left: 12px;
    top: 56px;
    width: 40px;
    height: 40px;
    z-index: 1001;
    display: grid;
    place-items: center;
    color: #222;
    background: var(--brand);
    border-radius: 10px;
    text-decoration: none;
    box-shadow: var(--shadow);
}
#show-sidebar .fa{ font-size: 18px; }

/* Overlay cuando el sidebar está abierto */
.sidebar-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 1000;
}

/* Sidebar base (off-canvas) */
.new-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 16px 14px 20px;
    transform: translateX(calc(-1 * var(--sidebar-w)));
    transition: transform .25s ease;
    z-index: 1002;
    overflow-y: auto;
}

/* Header del sidebar */
.new-sidebar .sidebar-header{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 16px;
}
.new-sidebar .sidebar-close{
    border: 0;
    background: transparent;
    color: #737a80;
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 24px;
}
.new-sidebar .sidebar-close:hover{ background: var(--hover); }
.new-sidebar .user-info{
    grid-column: 1 / -1;
    font-size: 14px;
    margin-top: 6px;
    text-align: center;
}
.new-sidebar .user-info .username{ font-weight: 700; color: var(--text); }

/* Menú */
.sidebar-menu{
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.sidebar-menu li{ margin: 6px 0; border-color: var(--border); border-radius: 10px; }
.sidebar-menu li a,
.sidebar-menu li h\:link,
.sidebar-menu li h\:outputLink{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
    border: thin solid #c4c4c4;
    border-radius: 8px;
    transition: background .15s ease, transform .05s ease;
    position: relative;
}
.sidebar-menu li a:hover{ background: var(--hover); }
.sidebar-menu li a:active{ transform: translateY(1px); }
/* Ícono en línea con el texto */
.sidebar-menu .menu-icon,
.sidebar-menu i.fa{
    flex-shrink: 0;
    font-size: 16px;
    color: #646b73;
    width: 18px;
    height: 18px;
}
.sidebar-menu span{
    flex: 1;
    text-align: center;
    font-size: 16px
}

/* Título de sección */
.menu-section{
    margin: 18px 0 8px;
    padding: 0 2px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .06em;
}

/* Divisor */
.divisor {
    border: none; /* Elimina el borde predeterminado */
    height: 1px; /* Grosor de la línea */
    background-color: #c4c4c4; /* Color de la línea */
    margin: 30px 0; /* Espacio arriba y abajo */
}

/* Contenido: se desplaza cuando el menú está abierto */
.page-content{
    transition: margin-left .25s ease;
}

/* Estado abierto */
.page-wrapper.toggled .new-sidebar{
    transform: translateX(0);
    box-shadow: var(--shadow);
    border-color: var(--brand);
    border-top-width: thick;
    border-right-width: thick;
    border-bottom-width: thick;
    border-radius: 10px;
    width: 300px;
}
.page-wrapper.toggled .sidebar-overlay{ display: block; }
.page-wrapper.toggled #show-sidebar{ display: none; }

/* En pantallas grandes empujamos el contenido, en móviles no */
@media (min-width: 992px){
    .page-wrapper.toggled .page-content{ margin-left: var(--sidebar-w); }
    /* movemos un poco el botón para que no quede debajo del panel */
    .page-wrapper.toggled #show-sidebar{ left: calc(var(--sidebar-w) + 12px); }
}

/* Scrollbar sutil (WebKit) */
.new-sidebar::-webkit-scrollbar{ width: 8px; }
.new-sidebar::-webkit-scrollbar-thumb{
    background: #d9dde2; border-radius: 6px;
}