/* ============================================
   ESTILO GENERAL
============================================ */

* { box-sizing:border-box; }

body {
    margin:0;
    padding:0;
    font-family:"Poppins", sans-serif;
    background:#eef1f5;
    overflow-x:hidden;
}

/* ============================================
   TOPBAR MÓVIL
============================================ */

.topbar {
    display:none;
    background:#0275d8;
    height:60px;
    color:white;
    align-items:center;
    padding:0 15px;
    font-size:18px;
    font-weight:600;
}

.topbar .hamburger {
    margin-right:15px;
}

/* ============================================
   HAMBURGUESA
============================================ */

.hamburger {
    display:none;
    font-size:30px;
    cursor:pointer;
    color:white;
}

/* ============================================
   SIDEBAR — AHORA SIEMPRE VISIBLE EN PC
============================================ */

.sidebar {
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100%;
    background:#005fb8;
    color:white;
    padding-top:25px;
    box-shadow:4px 0 18px rgba(0,0,0,0.25);
    z-index:9999;
    
    /* ?? PC: menú visible SIEMPRE */
    transform:translateX(0);
    transition:transform .3s ease;
}

.sidebar img {
    width:130px;
    display:block;
    margin:0 auto 10px;
}

.sidebar h2 {
    text-align:center;
    margin:10px 0 25px 0;
    font-size:18px;
    font-weight:500;
}

/* Items del menú */
.sidebar a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    color:white;
    text-decoration:none;
    font-size:15px;
    transition:all .25s;
}

.sidebar a i { width:20px; }

/* ============================================
   CONTENIDO — SE CORRIGIÓ PARA QUE NO TAPE EL MENÚ
============================================ */

.content {
    margin-left:260px;     /* ?? PC deja espacio */
    padding:30px;
    position:relative;
    z-index:1;
    transition:margin-left .3s ease, transform .3s ease;
}

/* ============================================
   MODO CELULAR
============================================ */

@media(max-width:950px){

    .topbar { display:flex; }

    .hamburger { display:block; }

    .sidebar {
        transform:translateX(-260px); /* ?? OCULTA EN CELULAR */
    }

    .sidebar.show {
        transform:translateX(0);
    }

    .content {
        margin-left:0 !important;
        padding-top:80px;
    }

    .content.shift {
        transform:translateX(260px);
    }
}

/* ============================================
   OVERLAY
============================================ */

.overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:9998;
}

.overlay.show { display:block; }

/* ============================================
   BOX DEL CONTENIDO
============================================ */

.box {
    background:white;
    padding:35px;
    border-radius:14px;
    box-shadow:0 4px 18px rgba(0,0,0,0.12);
}