html {
    min-height: 100%;
    position: relative;
}

.logo{    
    background-image: url("../../../docu/img/fondosHeader/fondoLargo.png");
    background-size: 100% 100%;    
    display: flex
}

.logo img{
    width: 30%; 
    position: relative;
    padding: 6px;
    left: 10%;
}

.navegador nav ul {
    display: flex; /* Activar Flexbox */    
    list-style-type: none; /* Quitar estilos de lista */
    padding: 0; /* Quitar padding predeterminado */
    margin: 0;
    background-color: #1bb1df88;
}

.navegador nav li{        
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    text-align: center; /* Centrar el texto */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.navegador nav a {
    display: block; /* Hacer que el enlace ocupe todo el espacio del li */
    color: #110303;
    padding: 10px; /* Espaciado para una mejor visualización */    
    text-decoration: none; /* Quitar el subrayado del enlace */
     
}

.navegador nav a:hover {
    background-color:  #217dbb;
}

a{
    text-decoration: none;
    color: #fd8536;
    font-weight: bold;
}

.labelMenu{
    display: none;
}

body {
    background-color: #b1d3eb;
    margin: 0;
    margin-bottom: 40px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modelo:active{
    -webkit-transform:scale(2);transform:scale(2);
}

.bloques{
    width: 80%;
    text-align: justify;
    padding: 10px;
}

.bloques h3, .bloques h2{
    text-align: center;
}

.bloquesCentrados{
    width: 80%;
    text-align: center;
    padding: 10px;
}

.allianz{
    width: 80%;
    text-align: center;
    padding: 60px;
}

.tituloDatosNecesarios, .tituloUnete, .tituloPresentacion{
    text-align: center;
}

.imagenes{
    width: 80%;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: center;
}

#imgCalendario {
    width: 80%;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: center;
}

.imagenes img{
    border: #217dbb 1px solid; 
    border-radius:22px;
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.2);
}

#imgCalendario img, #imgFormEditar{
    border: #217dbb 1px solid; 
    border-radius:22px;
    height: 15rem;
    object-fit: cover;
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.2);
}

.camisetas{
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: center;
}

.fuenteCaputa{
    padding: 20px;
}

h1{
    font-size: 40px;
    font-weight: bold;
}

h2{
    font-size: 30px;
    color: #0011ff;
    font-weight: bold;
}

#imgCalendario h2{
    font-size: 18px;
}

#imgCalendario p,
#botonesCalendario{
    text-align: center;
}

#imgCalendario h3{
    text-align: left;
    font-size: 18px;
}

.textoInscrito{
    text-align: center;
    color: red;
    font-weight: bold !important;
    font-size: 30px !important;
}

h3{
    font-weight: bold;
    font-size: 22px;
}

h4, h5{
    
    font-size: 18px;
    font-weight: bold; 
}

p{
    font-size: 18px;
}

li{
    font-weight: bold;
}

table{    
    font-weight: bold;
    font-size: 18px;
}

table td{
    padding: 10px;
    text-align: center;
}

footer{
    font-weight: bold;
    font-size: 15px;
    position: absolute; 
    height: 40px;   
    width: 100%;
    bottom: 0;
}

.navFooter nav ul {
    display: flex; /* Activar Flexbox */    
    list-style-type: none; /* Quitar estilos de lista */
    padding: 0; /* Quitar padding predeterminado */
    margin: 0;
    background-color: #1bb1df88;
}

.navFooter nav li{        
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    padding: 10px; /* Espaciado para una mejor visualización */    
}

.navFooter nav a {
    color: #110303;   
    text-decoration: none; /* Quitar el subrayado del enlace */
     
}

.gmail div{
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    padding: 3px;
}

.face a div{
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    padding: 3px;
}


.insta a, .face a, .gmail{
    display: flex;
}

.insta a div{
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    padding: 3px;
}

.logoInsta, .logoFace, .logoGmail{
    text-align: right;
}

.labelInsta, .labelFace, .labelCorreo{
    text-align: left;
}

/* Formularios login.php, usuarios.php, nuevoUsuario.php */
.error{
    color: red;
    font-weight: bold;
}

.correcto{
    color: green;
    font-weight: bold;
}

form{
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    gap: 6px;
    font-size: 20px;
    text-align: center;
}

form a, #panelAdministrador a{
    color: #000000;
}

form label, button{
    font-size: 20px;    
    font-weight: bold;
    padding: 6px;
    border-radius: 10px;
}

form input, select{
    font-size: 16px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.2);
    border: 0;
}

#archivo{
    box-shadow: none;
}

.botonFormulario{
    border-radius: 10px;
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.2);
    background-color: #1bb1df88;
    border: #268faf88 2px solid;
}


#pagLogin{
    width: 60%;
    height: 100%;
    padding: 10px;
    margin: 20px auto; 
    text-align: center;
}

.usuarios{
    display: flex;
    width: 40%;
    height: 100%;
    padding: 10px;
    margin: 20px auto; 
    text-align: center;
    flex-direction: column;
}

#formNuevoUsuario{
    width: 50%;
    margin: 0px auto; 
}

#codigoRegistro{
    flex-direction: row; /* 🔧 esto anula el "column" heredado */
    gap: 20px;
    width: fit-content;
    margin: 20px auto;
    padding: 10px;
}

#codigoRegistro input{
    width: 400px;
}

.subtituloH2{
    text-align: center;
    color: #0011ff;
}
/* Fin configuración formularios */


/*Estilo dashboard.php*/
.botonAdmin{
    border-radius: 10px;
    background-color: #1bb1df88;
}

#cerrarSesion{
    font-size: 12px;
}

#cerrarSesion a, #nuevaActividad a{
    color: #000000;
}

.contPrincipal{
    display: flex;
    flex-direction: column;
}

#headerAdmin{
    display: grid;
    grid-template-columns: 25% 1fr;
    text-align: center;
    background-color: #8ab7d6;
}

.contHeader{
    padding: 10px;
}

#panelAdministrador{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
}

#bodyDash{
    background-color: #cfe7f77a;
}

.tabla th{
    background-color: #8ab7d6;
    padding: 10px;
}
.tabla th, .tabla td{
    border: 1px solid #948e8e65;
}

#contTablas{
    padding: 20px;
}

.checkbox{
    height: 30px;
    width: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*Fin Estilo dashboard.php*/

@media (max-width: 1200px){
    #imgCalendario{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .camisetas{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #Footer nav ul{
        display: flex;
        flex-direction: column;
    }

    /* Configuración formilarios login.php */
    #pagLogin{
        width: 100%;
        margin: 5px auto; 
    }

    .usuarios{
        display: flex;
        flex-direction: column;
        width: 40%;
        margin: 0px auto; 
    }
    #formNuevoUsuario{
        width: 60%;
        margin: 0px auto; 
    }
    /*Fin configuración formilarios login.php */
}


@media (max-width: 600px){
    h1{
        font-size: 30px;
    }

    #navegador nav ul{
        flex-direction: column;   /*Cambia a disposición vertical en pantallas pequeñas */
        align-items:start;
    }

    nav ul{
        display: flex;
        flex-direction: column;
    }

    .imagenes, #imgCalendario{
        display: flex;
        flex-direction: column;
    }

    .camisetas{
        display: flex;
        flex-direction: column;
    }

    .logo{    
        background-image: url("../../../docu/img/fondosHeader/fondoCorto.png");
    }

    .logo img{
        width: 75%;
    }


    /* Configuración formilarios login.php */
    #pagLogin{
        width: 100%;
        margin: 5px auto; 
    }

    .usuarios{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 0px auto; 
    }
    #formNuevoUsuario{
        width: 90%;
        margin: 0px auto; 
    }
    /*Fin configuración formilarios login.php */


    /* CSS para menú hamburguesa */
    .menuHamburguer{
        display: flex;
        background-color: #1bb1df88;
    }
    .labelMenu{
        display: inline;
        padding:8px 0px;
        font-size: 20px;
        font-weight: bold;
    }

    .hamburger{
        position:relative;
        left:0;
        top:0;
        height:30px;
        width:30px;
        padding:10px 20px;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
        -webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
        transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
        z-index:1002;
        cursor:pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none
    }
    .hamburger.is-active{
      background-color:none;
    }
    ._layer{
        background:#000000;
        margin-bottom:4px;
        border-radius:2px;
        width:28px;
        height:4px;
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
        -webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
        transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
    }
    .hamburger:hover .-top{
        -webkit-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
        transform:translateY(-100%);
    }
    .hamburger:hover .-bottom{
        -webkit-transform:translateY(50%);
        -ms-transform:translateY(100%);
        transform:translateY(100%);
        }
    .hamburger.is-active .-top{
        -webkit-transform:translateY(200%) rotate(45deg) !important;
        -ms-transform:translateY(200%) rotate(45deg) !important;
        transform:translateY(200%) rotate(45deg) !important;
    }
    .hamburger.is-active .-mid{
        opacity:0;
    }
    .hamburger.is-active .-bottom{
        -webkit-transform:translateY(-200%) rotate(135deg) !important;
        -ms-transform:translateY(-200%) rotate(135deg) !important;
        transform:translateY(-200%) rotate(135deg) !important;
    }
    
    .nav.is_active{
        display: block;
        transform: translate3d(0px, 0px, 0px);
    }
    .nav{
        display: none;
        bottom: 0;
        height: 70%;
        position:relative;
        left: 0;
        top: 0;
        transform: translate3d(0px, -100%, 0px);
        transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
        width: 100%;
        z-index: 1001;
    }

    .nav ul li{
        padding: 0px 15px;
    }
    /* Fin configuración menú hamburguesa */
}