.encabezado{
    display: flex;
    align-items: center;
    background-color: #2f2c2b;
}

#img_logo{
    width: 150px;
}

nav{
    background-color: #2f2c2b;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Ajustes de botones */
#BotonIndex{
    font-size: 25px;
}

.boton_index {
    background-color: #2f2c2b;
    margin: 0px 20px 0px 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
}

.boton_index:hover{
    transition: 0.3s;
    background-color: #fd8d32;
    color: #2f2c2b;
}

a{
    font-size: 24px;
    text-decoration: none;
    font-weight:bold;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}

.boton {
    text-align: center;
    background-color: #2f2c2b;
    margin: 0px 20px 0px 20px;
    width: auto;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

.boton:hover {
    background-color: #fd8d32;
    color: #2f2c2b;
}


/* Estilos para el menú desplegable */
.menu-container {position: relative;}

.menu {
    background-color: #2f2c2b;
    margin: 0px 20px 0px 20px;
    width: auto;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    font-size: 24px;
    padding: 0 10px;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

.menu:hover {
    background-color: #fd8d32;
    color: #2f2c2b;
}


.submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    background-color: #2f2c2b;
    flex-direction: column;
    border: none;
    height: auto;
    width: fit-content;
    min-width: 100%;
}

.menu-container:hover .submenu {display: flex;}

.submenu a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;
}

.submenu a:hover {
    background-color: #fd8d32;
    color:#ffffff;
    transition: 0.3s;
}

.menu-container.abierto .submenu {
        display: flex;
}


/* ── Encabezado: necesita position:relative para que el z-index del
     hamburguesa funcione por encima del overlay cuando el panel
     está abierto en móvil ──────────────────────────────────────── */
.encabezado {
    position: relative;
    z-index: 1001;
}


/* ── Ícono hamburguesa — oculto en escritorio ─────────────────── */
.hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: 16px;
    padding: 0;
}

.hamburguesa span {
    display: block;
    height: 3px;
    width: 100%;
    background: #fd8d32;
    border-radius: 2px;
}


/* ── Fondo oscuro detrás del panel — oculto salvo cuando está
     "visible" (controlado por components.js) ──────────────────── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999;
}

.nav-overlay.visible {
    display: block;
}


/* ── Cabecera interna del panel (título + botón cerrar) —
     oculta en escritorio, solo aparece dentro del panel móvil ──── */
.nav-drawer-header {
    display: none;
}

.cerrar-menu {
    background: none;
    border: none;
    font-size: 22px;
    color: #2f2c2b;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}


/* ── Flecha de acordeón — solo visible dentro del panel móvil ──── */
.menu-chevron {
    display: none;
}


/* ── Indicador de página activa ──────────────────────────────────
   Sin transición ni animación: en móvil no hay cursor, así que un
   hover no comunica nada. Esto es un estado fijo que simplemente
   marca en qué sección está el usuario en este momento. ────────── */
.boton.activo,
.menu-container.activo .menu {
    background-color: #4a3728;
    border-left: 4px solid #fd8d32;
    color: #fd8d32;
}

.submenu a.activo {
    background-color: #1c1817;
    color: #fd8d32;
    border-left: 4px solid #fd8d32;
}


/* ═══════════════════════════════════════════════════════════════
   Estilos para dispositivos móviles — panel lateral (sin animación)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #img_logo {
        width: 130px;
    }

    #BotonIndex {
        font-size: 20px;
    }

    .hamburguesa {
        display: flex;
    }

    /* El panel se identifica por ID (#nav-principal) en vez de por
       la etiqueta <nav> sola. Esto le da más especificidad que
       cualquier regla genérica ".boton"/".menu" que pueda existir
       en otro archivo CSS del proyecto, evitando que esas reglas
       "se cuelen" y rompan la apariencia de este panel.

       display:none por defecto. Solo se muestra con la clase
       "abierto" — y por seguridad, components.js también fija el
       estilo display directamente en línea, así el toggle funciona
       sin depender del orden de carga de los archivos CSS. */
    #nav-principal {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        width: min(280px, 80vw);
        background-color: #2f2c2b;
        margin-top: 0;
        padding-top: 20px;
        z-index: 1000;
        overflow-y: auto;
    }

    #nav-principal.abierto {
        display: block !important;
    }

    .nav-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fd8d32;
        padding: 16px;
    }

    .nav-drawer-titulo {
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        font-size: 18px;
        color: #2f2c2b;
    }

    /* ── IMPORTANTE: cada enlace es un bloque normal (display:block
       a nivel de panel), NO un hijo de un contenedor flex con
       justify-content. Así es IMPOSIBLE que terminen centrados
       verticalmente — el apilado de bloques siempre va de arriba
       hacia abajo, en el orden del HTML, sin excepción.

       border:none + border-radius:0 al inicio resetea cualquier
       estilo de "píldora" (esquinas redondeadas, borde completo)
       que pudiera heredarse de una regla ".boton" genérica de otro
       archivo del proyecto. Luego se aplica el borde izquierdo
       propio de este panel. ──────────────────────────────────── */
    #nav-principal .boton {
        display: block;
        border: none;
        border-radius: 0;
        border-left: 4px solid transparent;
        border-bottom: 1px solid rgba(253, 141, 50, 0.15);
        margin: 0;
        padding: 14px 18px;
        font-size: 18px;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        transition: none;
    }

    #nav-principal .menu-container {
        display: block;
        width: 100%;
    }

    #nav-principal .menu {
        display: flex;
        align-items: center;
        border: none;
        border-radius: 0;
        border-left: 4px solid transparent;
        border-bottom: 1px solid rgba(253, 141, 50, 0.15);
        margin: 0;
        padding: 14px 18px;
        font-size: 18px;
        width: 100%;
        box-sizing: border-box;
        transition: none;
    }

    #nav-principal .menu a {
        flex: 1;
        text-align: left;
        font-size: inherit;
    }

    /* La flecha cambia de carácter (▾ ↔ ▴) vía JS al abrir/cerrar
       el acordeón — sin transform ni transition, cambio instantáneo */
    #nav-principal .menu-chevron {
        display: inline-block;
        margin-left: auto;
        font-size: 14px;
    }

    /* El submenú deja de flotar: se acomoda como acordeón dentro
       del panel, empujando el resto de los enlaces hacia abajo.
       También es display:block puro — mismo motivo que arriba. */
    #nav-principal .submenu {
        position: static;
        display: none;
        width: 100%;
        background-color: #1c1817;
    }

    #nav-principal .menu-container.abierto .submenu {
        display: block;
    }

    #nav-principal .submenu a {
        display: block;
        border: none;
        border-radius: 0;
        border-left: 4px solid transparent;
        border-bottom: 1px solid rgba(253, 141, 50, 0.08);
        margin: 0;
        padding: 12px 0px 12px 26px;
        font-size: 18px;
        box-sizing: border-box;
    }
}