/*
 * Versión actualizada con el fix visual para el botón hamburguesa en móvil.
 * Ahora tiene un fondo sólido (#ff84e4) y está fijado correctamente
 * en la esquina superior derecha del topnav, tal como se ve en las capturas.
 * (02/12/2025 17:35)
*/

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color:#000000;
    background-image: url("../imagenes_host/fondodepantalla.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
}

html {
    height: 100%;
}

#pagina {
    position: relative;
    min-height: 100%;
}

@font-face{
    font-family:fuente;
    src:url("../fuentes_host/Fundamental Brigade Schwer.ttf");
}

/* --- ESTILOS TOPNAV PC (DEFAULT) --- */

.topnav {
    background-color: #141414;
    overflow: hidden;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center; /* Centra verticalmente los items */
    position: relative; 
}

/* Links normales */
.topnav > a {
    float: left;
    color: #ffff00;
    text-align: center;
    padding: 7px 23px;
    text-decoration: none;
    font-size: 25px;
    font-family:fuente;
}

/* Estilo para el contenedor de la marca */
.topnav .brand a {
    color: #ffff00;
    text-decoration: none;
    font-size: 25px;
    font-family:fuente;
    padding: 7px 23px;
    display: block;
}
 
.topnav a:hover, .topnav .brand a:hover {
    background-color: #ff84e4;
    color: #ffff00;
}
 
.topnav a.active {
    background-color: #ff4141;
    color: white;
}

/* El botón hamburger oculto en PC */
.topnav .icon {
    display: none;
}

/* --- ESTILOS GENERALES Y TEXTO --- */

.advertencia {
    font-size:20px;
    font-family:fuente;
    text-align:center;
    color: #000000;
    background-color: #ffff00;
    width: 100%;
    height:25px;
    border-left-width: 0px;
    border-right-width: 0px;
}

.centro {
    text-align:center;
    align-items:center;
    align-content:center;
}

#pie {
    font-size:25px;
    padding: 7px;
    background:#141414;
    color:#ffff00;
    text-align:center;
    line-height:30px;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:45px;
    font-family:fuente;
}

.textoweb {
    font-family:fuente;
    text-align:center;
    color: #ffff00;
}

.textowebv2 {
    font-family:fuente;
    text-align:center;
    color: #ff84e4;
}

/* --- GRID LAYOUT --- */
.textodiscord {
    font-family:fuente;
    font-size:20px;
    text-align:center;
    color: #ffff00;
}

.grid1 {
    display: grid; /* Makes the container a grid container */
    grid-template-columns: 30fr 12fr;
    grid-gap: 30px;
    padding: 30px;
    box-sizing: border-box;
    height: 100vh;
}

.grid2 {
    display: grid; /* Makes the container a grid container */
    grid-template-columns: repeat(1); /* Creates two columns of equal width */
    grid-gap: 30px;
    padding: 30px;
}

.grid3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
    padding: 30px;
    box-sizing: border-box;
    height: 90vh;
}

.div1, .div2, .div3 {
    outline: 5px solid yellow;
    background-color: rgba(20, 20, 20, 0.7);
    padding: 30px;
    overflow-y: auto;
}

table, tr {
    border-collapse:collapse;
}

a:link, a:visited {
    color: #ffff00;
}

h1 { font-size:50px; font-family:fuente; text-align: center; color: #ffffff; }
h2 { font-size:30px; font-family:fuente; text-align: center; color: #ffffff; }
h3 { font-size:25px; font-family:fuente; text-align: center; color: #ffffff; }
h4 { font-size:20px; font-family:fuente; text-align: center; color: #ffffff; }


/*-------------------------------------*/
/* OPTIMIZACIÓN PARA LA NAVBAR EN CEL */
/*-------------------------------------*/

@media (max-aspect-ratio: 1) { 
    
    /* CONFIGURACIÓN BÁSICA BARRA CERRADA */
    .topnav {
        height: 90px;
        justify-content: space-between;
        padding: 0;
        position: relative;
    }

    /* Ocultar links normales al inicio */
    .topnav > a:not(.icon) { /* Agregamos :not(.icon) para ser más específicos */
        display: none; 
    } 
    
    /* --- INICIO DE FIX VISUAL PARA EL BOTÓN HAMBURGUESA --- */

    .topnav a.icon {
        display: block !important;
        /* CLAVE: Añadimos background-color para el efecto de cuadrado */
        background-color: #ff84e4; 
        
        font-size: 50px;
        padding: 0; /* Removemos padding para centrar con height/line-height */
        
        position: absolute;
        right: 0; 
        top: 0; 
        
        /* Aseguramos que ocupe el mismo alto que la barra de navegación */
        height: 90px; 
        /* Usamos line-height para centrar el carácter '☰' verticalmente */
        line-height: 90px; 
        width: 90px; /* Le damos un ancho fijo para que sea un cuadrado */
        text-align: center; /* Centra el carácter '☰' horizontalmente */
    }
    
    /* Mantenemos el estilo activo para cuando se haga clic (si el JS lo maneja) */
    .topnav a.icon.active {
        background-color: #ff4141;
        color: white;
    }

    /* --- FIN DE FIX VISUAL PARA EL BOTÓN HAMBURGUESA --- */

    /* Estilo del Brand en celular */
    .topnav .brand {
        display: block;
        height: 90px;
        display: flex;
        align-items: center;
    }

    .topnav .brand a {
        font-size: 40px;
        padding-left: 20px;
    }

    /* --- ESTADO ABIERTO (RESPONSIVE) --- */
    
    .topnav.responsive {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        z-index: 100;
    }

    /* El Brand se mantiene arriba a la izquierda */
    .topnav.responsive .brand {
        width: 100%;
        border-bottom: 1px solid #333;
    }

    /* Los links aparecen y ocupan todo el ancho */
    /* Excluimos .icon del display: block para que no se apile */
    .topnav.responsive > a:not(.icon) { 
        display: block;
        text-align: left;
        width: 100%;
        font-size: 40px !important;
        padding: 20px 40px !important;
        border-top: 1px solid #333;
        float: none;
    }

    /* El icono sigue absoluto arriba a la derecha, NO SE MUEVE */
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        /* Reaplicamos el fondo para que el cuadrado persista al abrir */
        background-color: #ff84e4; 
    }

    /* --- AJUSTES CONTENIDO --- */
    
    .grid3 {
        grid-template-columns: 1fr;
        height: auto;
        padding: 10px;
    }

    h1 { font-size: 75px; }
    h2 { font-size: 45px; }
    h3 { font-size: 38px; }
    h4 { font-size: 30px; } 

    .advertencia {
        font-size: 30px;
        height: auto;
        padding: 5px;
    }
}