@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,100;8..144,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,100;8..144,300&family=Roboto:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@700&family=Roboto+Serif:opsz,wght@8..144,100;8..144,300&family=Roboto:ital@0;1&display=swap');


:root {
    font-family: 'Roboto', sans-serif
}

html {
    font-family: Roboto, Arial, sans-serif;
}


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

img {
    max-width: 100%;
}

header {
    padding: 0px 20px;
    height: 66px;
    background-color: #195FE8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img {
    padding-left: 20px;
    width: 280px;
    align-items: center;
    
}

header h3 { /*Este H3 es el que indica si es PROFESOR o ALUMNO */
    color: rgb(255, 202, 87);
    padding-top: 3px;
    margin: 0;
    padding-right: 20px;
}

header .boton_ingresar {
    background-color: white;
    padding: 10px 20px;
    color: #007bff;
    font-size: 12px;
    border-radius: 30px;
    border: none;
    border-radius: 20px;
}

header .boton_ingresar:hover {
    box-shadow: 0px 0px 8px rgb(255, 202, 87);
    font-weight: 550;
    align-items: center;
    justify-items: center;
    margin-right: -1.5px;
}


article h4 {
    margin-bottom: 30px;
}

.main_azul article {
    margin-bottom: 40px;
}

main {
    justify-content: center;
    align-content: center;
    justify-items: center;
}

.main_azul {
        /* display: flex; */
        flex-direction: column;
        background:linear-gradient(#195FE8,#142A78);
        
    }

    .main_yellow article {
        margin-bottom: 40px;
    }
    
    .main_yellow {
        /* display: flex; */
        flex-direction: column;
        background:linear-gradient(#F8B60C,#F8B60C);
    }

    .buttons_home a{
        height: 20px;
        border-radius: 25px;
        border: 2px;
        border-color: #007bff;
        color:  #195FE8;
        padding: 10px 30px;
        padding-right: 20px;   
    }
    
    .buttons_home {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    

a{
    text-decoration: none;
}
a:active{
    text-decoration: none;
}

.campo {
    padding: 10px; 
    margin: 5px; 
    margin-right: 20px;
    margin-bottom: 10px;
    border: 1px solid #ccc; 
}

body .boton_enviar {
    background: transparent;
    padding: 10px 20px;
    color: #007bff;
    font-weight: bold;
    border: 2px solid #007bff;
    border-radius: 10px;
}

form {
    display: flex;
    flex-direction: column;

}

form input {
    border-radius: 25px;
    border: none;
    padding: 10px;
    margin-left: 5px;
    margin-bottom: 15px;
}


label {
    font-size: 12px;
    padding: 5px;
}

h2 {
    margin: -1px;
    margin-bottom: 10px;
}



.switch_container p {
    color: white
}


.fin

footer {
    background-color: #f2f2f2; 
    text-align: center; 
    padding: 20px;
    display: flex;
    justify-self: auto;
    align-items: center;
}

.footer-boton {
    display: inline-block;
    margin: 5px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 10px;
}


.Profesor {
    background-color: #F8B60C; 
}

.Alumno {
    background-color: #F8B60C; 
}

.Atras { /* Empiezan --------------- BOTONES DE ABAJO casi footer */
    background-color: transparent;
    color: #007bff;
    border: 1px solid #007bff;
}

.botones_finales {
    padding: 15px;
    padding-top: 40px;
    color: white;
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
}

.botones_finales_azules {
    padding: 15px;
    padding-top: 40px;
    color: #007bff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boton_atras {
    height: 20px;
    background-color: rgba(247, 170, 54, 0);
    color:  rgba(255, 255, 255, 1);
    padding: 20px;
}

.boton_atras a{
    color: white;
}

.boton_atras:hover {
    font-weight: 550;
    align-items: center;
    justify-items: center;
    margin-left: -1.5px;
}

.boton_atras_azul {
    background-color: rgba(247, 170, 54, 0);
    color:  #007bff;
    padding: 15px 10px;
}

.boton_atras_azul:hover {
    font-weight: 550;
    align-items: center;
    justify-items: center;
    margin-right: -1.5px;
}

.boton_atras_azul a{
    color: #007bff;
}

.abajo {    
    border-radius: 25px;
    border: 2px solid white;
    color:  rgba(255, 255, 255, 1);
    padding: 10px 30px;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.button_creargrupo {    
    border-radius: 25px;
    border: 2px solid white;
    color:  rgba(255, 255, 255, 1);
    padding: 10px 30px;
    width: 200px;
    margin-top: -50px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.abajo:hover {    
    box-shadow: 0px 0px 8px rgb(255, 202, 87);
    align-items: center;
    background-color: white;
    color: #007bff;    
}

.descripciones_grupos {
    align-items: center;
    color: white;
    justify-content: center;
    text-align: center;
}

.descripciones_grupos button {
    margin-bottom: 25px;
}

.descripciones_grupos h3 {
    color: #F8B60C;
    margin-bottom: 5px;
}

.abajo_azul { 
    border-radius: 25px;
    border: 2px #007bff;
    background-color: rgba(247, 170, 54, 0);
    color:  #007bff;
    padding: 10px 20px;
}

.abajo_azul:hover {    
    font-weight: 550;
    align-items: center;
    justify-items: center;
    margin-right: -1.5px;    
    text-shadow: 0px 0px 5px rgba(55, 198, 241, 0.281);
}

.abajo a{
    height: 20px;
    flex-direction: column;
    border-radius: 25px;
    border: 2px;
    border-color: #007bff;
    color:  #195FE8;
    padding: 10px 30px;
    position: relative;
    z-index: 2;
}


/* Terminan --------------- BOTONES DE ABAJO casi footer */

body{
    margin: 0;
    font-family: sans-serif;
}


body .header {
    width: 100%;
    max-width: 100%; 
    margin: 0 ;
    padding: 10px; 
    box-sizing: border-box;         
  }

  .body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
  }


header{
    width: 100%;
}


/*desaparecer la casilla de verificación*/
#btn-menu{display: none;}


.menuwebapp ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}
.menuwebapp li{
    border-right: 1px solid
}
.menuwebapp li:hover{
    background: rgba(0,0,0,0.3);   
}
.menuwebapp li a{
    display: block;
    padding: 1rem 2rem;
    
    text-decoration: none;
}

@media (max-width:760px){  
    
    .menuwebapp ul{
        flex-direction: column;
    }
    .menuwebapp li{
        border-top: 1px 
    }

   /*uso el pseudo selector :checked para identificar cuando  la casilla de verificación está marcada.
    Y para que esto ejecute otro elemento necesito el combinador de hermanos (~)*/
    #btn-menu:checked ~ .menuwebapp{
        margin: 0;  
    }
}



  .tengo_un_codigo {
    padding-top: 20px;
  }

  /* FOOTER */


  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex-grow: 1;

  }
  
  .textofin {
    text-align: center; 
    vertical-align: top; 
    font-size: 10px;
    width: 90%; 

  }

  footer .fininicio p {
    grid-area: 2  / 3  / 5;
    display: flex;
    align-items: center;
}


footer .logosfin {


display: grid;
grid-template-columns: 15% 85%;
gap: 2em;
align-items: center;
}


@media (max-width:760px){

    .img_final{ 
        position: absolute;
        bottom: 0px;
        right: 0px;    
        z-index: 1;
        background-image: url(../imagenes/imagen_fin_abajo.png);
        height: 420px;
        width: 420px;
        mix-blend-mode: luminosity;
        background-size: cover  ;
        background-repeat:no-repeat ;
        background-position-y: 58px;
        background-position-x: -20px;
        opacity: 100%;
    }

    .img_trofeo{ 
        position: absolute;
        bottom: 0px;
        right: 0px;    
        z-index: 1;
        background-image: url(../imagenes/trofeos.png);
        height: 450px;
        width: 450px;
        mix-blend-mode: luminosity;
        background-size: cover  ;
        background-repeat:no-repeat ;
        background-position-y: 58px;
        background-position-x: -20px;
        opacity: 33%;
    }

    .img_alumno{ 
        position: absolute;
        bottom: 0px;
        right: 0px;    
        z-index: 1;
        background-image: url(../imagenes/alumno.png);
        height: 400px;
        width: 400px;
        mix-blend-mode: luminosity;
        background-size: cover  ;
        background-repeat:no-repeat ;
        background-position-y: 65px;
        background-position-x: 35px;
        opacity: 33%;
    }

    .img_profesora{ 
        position: absolute;
        bottom: 0px;
        right: 0px;    
        z-index: 1;
        background-image: url(../imagenes/profesora.png);
        height: 450px;
        width: 450px;
        mix-blend-mode: luminosity;
        background-size: cover  ;
        background-repeat:no-repeat ;
        background-position-y: 58px;
        background-position-x: -20px;
        opacity: 33%;
    }

    .switch_container {
        background-color: rgb(247, 170, 54);
        display: flex;
        border-radius: 25px;
        border: none;
        padding: 10px 45px;
        margin-top: 24px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 15px;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .switch_container button {
        border-radius: 25px;
        border: none;
        background-color: rgba(184, 184, 184, 0.60);
        color:  rgba(99, 99, 99, 0.6);
        padding: 10px 10px;
        align-items: center;
        z-index: 2;
    }
    
    .switch_container button:hover {
        background-color: white;
        color: #007bff;
        box-shadow: 0px 0px 8px rgba(255, 202, 87, 0.733);
    }


    .formulario_container {
        padding-top: 20px;     
        color: white;
        justify-content: center;
        justify-items: center;
        justify-self: center;
        align-items: center;
        flex-direction: column;
        display: flex;
    }  

    .main_ayuda {
        background-image: url("../imagenes/imagen_ayuda.png");
        margin-bottom: -25px;
        margin-right: -180px;
        background-size: 400px;
        background-repeat: no-repeat;
        background-position: bottom;
        background-color: grey;
    }

    footer .logosfin {
        display: grid;
        grid-template-columns: 100px 200px;
        gap: 2em;
        align-items: center;
        min-width: 100px;
        min-height: 100px;
        padding: 20px;
        }
    #Acumar {
        width: 70px;
        align-items: center;
      }    
    }

    @media (min-width:760px){

        .img_final{ 
            position: absolute;
            bottom: 0px;
            right: 600px;    
            z-index: 1;
            background-image: url(../imagenes/imagen_fin_abajo.png);
            height: 450px;
            width: 450px;
            mix-blend-mode: luminosity;
            background-size: cover  ;
            background-repeat:no-repeat ;
            justify-content: center;
            opacity: 100%;
        }

        .img_trofeo{ 
            position: absolute;
            bottom: 0px;
            right: 0px;    
            z-index: 1;
            background-image: url(../imagenes/trofeos.png);
            height: 800px;
            width: 800px;
            mix-blend-mode: luminosity;
            background-size: cover  ;
            background-repeat:no-repeat ;
            background-position-y: 150px;
            background-position-x: -80px;
            opacity: 33%;
        }

        .img_alumno{ 
            position: absolute;
            bottom: 0px;
            right: 0px;    
            z-index: 1;
            background-image: url(../imagenes/alumno.png);
            height: 800px;
            width: 800px;
            mix-blend-mode: luminosity;
            background-size: cover  ;
            background-repeat:no-repeat ;
            background-position-y: 100px;
            background-position-x: -30px;
            opacity: 33%;
        }

        .img_profesora{ 
            position: absolute;
            bottom: 0px;
            right: 0px;    
            z-index: 1;
            background-image: url(../imagenes/profesora.png);
            height: 800px;
            width: 800px;
            mix-blend-mode: luminosity;
            background-size: cover  ;
            background-repeat:no-repeat ;
            background-position-y: 100px;
            background-position-x: -30px;
            opacity: 33%;
        }

        .switch_container {
            background-color: rgb(247, 170, 54);
            display: flex;
            border-radius: 25px;
            border: none;
            padding: 10px 45px;
            margin-top: 24px;
            margin-right: 18px;
            /* margin-bottom: 15px; */
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .switch_container button {
            border-radius: 25px;
            border: none;
            background-color: rgba(184, 184, 184, 0.60);
            color:  rgba(99, 99, 99, 0.6);
            padding: 10px 20px;
            align-items: center;
            z-index: 2;
        }
        
        .switch_container button:hover {
            background-color: white;
            color: #007bff;
            box-shadow: 0px 0px 8px rgba(255, 202, 87, 0.733);
        }

        .formulario_container {
            padding-top: 20px;
            padding-left: 30px; 
            color: white;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-items: center;
            flex-direction: column;
            display: flex;
        }  

        .main_ayuda {
            background-image: url("../imagenes/imagen_ayuda.png");
            margin-bottom: -40px;
            margin-right: -900px;
            background-size: 700px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-color: grey;
        }

        #Acumar {
            width: 100px;
            align-items: center;
          }    
        }

.imagen_footer {
    mix-blend-mode: luminosity;
    align-items: right;
    padding-right: -50px;
}


/* FIN FOOOOTEEEER*/


    .presentacion {
    text-align: center;
    margin-bottom: 10px;
    }

    .presentacion h3 {
    margin-bottom: 5px;
    }


    .presentacion p {
        margin-bottom: 10px;
    }


    /* MENU HAMBURGUESA */
    

   /* MENU HAMBURGUESA */
   


   


    /*desaparecer la casilla de verificación*/
    #btn-menu{display: none;}
   
    /*desaparecer la img del menú hamburguesa*/
    header label{
        display: none;
        width: 3rem;
        height: 3rem;
        padding: 1rem;
     
    }
   
    /*convierto el cursor en mano porque tengo una img y no un vínculo*/
    header label:hover{
        cursor: pointer;
        background: rgba(0,0,0,0.3);
       
    }
   
    .menu ul{
        list-style: none;
        display: flex;
        justify-content: flex-start;
       




    }
    .menu li{
        border-right: 1px;
        margin: 2px;
    }
    .menu li:hover{
        background: rgba(0,0,0,0.3);  
    }
    .menu li a{
        display: block;
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;
        margin-right: 10px;
    }


    @media (max-width:500px){
        /*hago visible la img del menú hamburguesa*/
        header label{
            display: block;
        }
     
        /*saco del flujo de cajas a menú para poder ubicarlo fuera del plano*/
        .menu{
            position: absolute;
            background: RGB(25, 95, 232);
         
            padding: 5px;
            width: 40%;
            margin-left: 100%;
            transition: all .4s;
            top: 65px;
            left: 60%;
       
        }
        .menu ul{
            flex-direction:column;
           
            padding: 4px;
        }
        .menu li{
            border-top: 1px ;
            text-align: center;
        }
   
       /*uso el pseudo selector :checked para identificar cuando  la casilla de verificación está marcada.
        Y para que esto ejecute otro elemento necesito el combinador de hermanos (~)*/
        #btn-menu:checked ~ .menu{
            margin: 0;  
        }
    }



        /* FIN MENU HAMBURGUESA */

        /* FIN MENU HAMBURGUESA */






/* ALMUERZOOOOOOOO */
        .menu_contenedor { /*Aca quiero juntar todo para que este centrado*/
            margin: 0;
            padding: 0;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            color: #195FE8;
        }
        
        .menu_contenedor span {
            font-size: 12px;
        }
    
    .menu_contenedor_pagina_permisos {
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: 100vh;
        text-align: center;
    }
    
    .autorizaciones {
        margin: 0;
        padding: 0;
        padding-top: 20px;
        justify-content: center;
        align-items: center;
        height: 100vh;
        text-align: center;
    }
    
    
    .menu_contenedor img {
        border-radius: 18px;
    }
    
        
    
        .titulo_seccion {
            justify-content: center;
            text-align: center;
            padding-bottom: -20px;
        }
    
        .descripcion_seccion {
            padding-top: -20px;
            justify-content: center;
            text-align: center;
            color: rgb(38, 38, 38);
        }
    
        .almuerzos_comidas {
            justify-content: center;
            text-align: center;
            cursor: pointer;
        }
    
        .almuerzos_comidas img {
            border-radius: 18px;
            }
            
        
        .almuerzos_descrip {
            display: flex;
            justify-content: space-between;
            justify-content: center;
            align-items: center;
            padding-bottom: 20px;
            padding-top: -10px;
        }        
    
    
    
        .almuerzos_descrip h3
        .almuerzos_descrip p {
            color: #007bff;
            padding: 10px;
            justify-content: space-between;
            justify-content: center;
            align-items: center;
        }
        
        .almuerzos_comidas:hover {
        border-radius:  20px;
        margin-left: 60px;    
        margin-right: 60px;
        justify-content: center;
        mix-blend-mode: luminosity;
        background-color: greenyellow;
        }



/*  FIN ALMUERZOOOOOOOO */


    /* CALENDARIO */

    #calendario {
    width: 300px;
    right: auto;
    padding: 20px;
    border-radius: 10px; 
background-color: #f8b50c49;

    }

    #calendario table td {
        width: 14.28%; /* 100% dividido en 7 columnas */
        font-size: 14px;
        overflow: hidden; /* Ocultar cualquier contenido excedente */
        white-space: nowrap; /* Evitar que los números se rompan en varias líneas */
    }

   
#calendario {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 400px; /* Ancho máximo del calendario */
    padding: 10px;
}

#calendario table {
    width: 100%;
    border-collapse: collapse;
}

#calendario table th,
#calendario table td {
    border: 1px solid #000000;
 
    padding: 5px;
    flex: 1; /* Distribuir el espacio de manera uniforme entre las celdas */
    min-width: 0; /* Permitir que las celdas se reduzcan de tamaño si es necesario */
}

@media (max-width: 480px) {
    #calendario {
        max-width: 100%;
    }
}

    /* CALENDARIO */

    /*  general*/



        
        .homeimagen {
        width: 100%;
        height: 100%;
        display: flex;
        object-fit: cover;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        }
      

 


  footer {
    background-color: #007bff;}


    main .button_other {
        background: #195FE8;;
        padding: 21px 0px;    
        width: 190px;
        color: #ffffff;
        font-size: 18px;
       
        border-radius: 20px;
        cursor: pointer;
    
        display: flex;
        flex-direction: column;
        margin: 15px auto; 
    
        justify-content: center; 
        align-items: center;
        text-align: center;
        }


    .button_other:hover {
        cursor: pointer;
        background-color: #F8B60C;
        box-shadow: 0px 0px 8px #ce4c01;
    }

    
.historia {
    margin: 20px;
}
.galeria
{
    margin: 20px;
}
.ayuda {
    margin: 30px
}

.p_ayuda {
    font-weight: 550;
    font-style: italic;
    margin-top: -25px;

}

.ayuda a {
    font-weight: 550;
}

/* span .ayuda {
        background-image: url("../imagenes/imagen_ayuda.png");
        background-size: 500px;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
        background-position: bottom;
        background-color: rgba(0, 0, 0, 0.33); 
} */

.main_ayuda .boton_atras {
    margin-left: 10px;
    text-align: right;
}

.main_ayuda .boton_atras:hover {
    font-weight: 550;
    margin-left: -8;
    color: rgb(247, 170, 54);
}

.main_ayuda h1 {
    color: #ffffff;
    margin-bottom: 25px;
}

.main_ayuda h3 {
    color: #2b2d30;
}

.main_ayuda p {
    width: 550px;
    color: #2b2d30;
    margin-bottom: 25px;
} 

@media (max-width:550px){
    .main_ayuda p {
        width: 300px;
        color: #2b2d30;
        margin-bottom: 10px;
    } 
  }


/* GALERIA */
/* Estilos para la galería de miniaturas */
.galeria {
    display: flex;
    margin-top: 25px; /* Ajusta el margen superior según la separación deseada */

}

.imagen {
    width: 300px;
    height: 200px;
    margin: 1px;
    cursor: pointer;

}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

/* Estilos para la imagen ampliada en el modal */
.modal img {
    display: block;
    margin: 0 auto;
    max-width: 300%;
    max-height: 300%;
}

/* Estilos para el botón de cierre */
.cerrar {
    position: absolute;
    top: 100px;
    right: 85px;
    font-size: 30px;
    cursor: pointer;
    color: white;
}

.cerrar:hover {
    color: #f44336;
}



.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Crea 3 columnas iguales */
    grid-gap: 5px; /* Espacio entre las celdas de la cuadrícula */
   
  }
  
  .grid-item {
    text-align: center;
  }
  
  .grid-item img {
    max-width: 100%;
    height: auto;
   
    object-fit: cover; /* Controla cómo se ajusta la imagen en su contenedor */
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
      
  }

  @media (max-width: 600px) {
    .grid-container {
      grid-template-columns: 1fr; 
      object-fit: cover;
    
    }

    .imagen {
        width: 300px;
        height: 200px;
    }


    .modal img {
        display: block;
        margin: 0 auto;
        max-width: 50%;
        max-height: 50%;
    }
  }






  .historia {
    padding: 20px;
      border-radius: 10px; 
  background-color: #f8b50c49;
  line-height: 1.5;
  margin-top: 50px;
    }
  
  

  /* FIN GALERIA */



  /* MAPA Y CALENDARIO */


  .calendario_mapa {
    display: flex;
    column-gap:40px;
    padding: 30px;
  }

  iframe {
width: 700px;
height: 400px;
  }
  
  .mapa, .calendario {
    max-width: 100%; 
    box-sizing: border-box; 
   
  }
  
  
  @media (max-width: 768px) {
    .calendario_mapa {
      flex-direction: column; 
    
    }
  
    iframe {
    
        height: 100%; 
        width: 100%; 

    }
  }


  #visitas {
    padding-left: 25px;
font-size: 15px;
  }
  
  /* FIN MAPA Y CALENDARIO */


  main .visitas {
    flex: 1; 
  }

/* VIDEO */

video {
   
    max-width: 60%; 
    width: 60%; 
}
.contenedorvideoimagen {
    text-align: center;
max-width: 100%; 
padding: 10px;
}

.video {
    text-align: center;
}


/* FIN VIDEO */



/* COMIENZO - Desplegable de opciones de grupos */
/* Estilo base para el botón y el contenedor del menú desplegable */
.menu-container {
    position: relative;
    display: inline-block;
  }
  
  /* Estilo para el botón principal */
  .dropdown-btn {
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  /* Estilo para el contenido del menú desplegable (inicialmente oculto) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Estilo para los enlaces dentro del menú desplegable */
  .dropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
  }
  
  /* Cambiar el color del enlace cuando pasa el ratón sobre él */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Mostrar el menú desplegable cuando pasa el ratón sobre el botón */
  .menu-container:hover .dropdown-content {
    display: block;
  }

  /* FIN Desplegable de opciones de grupos */



/* VISITAS */


#visitas h1 {
    padding: 15px;
    }
    
    
    #visitas h2 {
        padding: 5px;
        margin-left: 5px;
        }
    
    
    .reservas p {
       padding: 15px;
    }
    
    
    .reservas h3 {
        padding: 15px
    }
    
    
    /* FIN VISITAS */
    

/* VERIFICACION ALUMNO */
.menu-container {
    padding: 30px;
    margin-left: 35px;
    margin-bottom: 5px;
   
  
}

.colegios {
    padding: 30px;
    margin-left: 35px;
  margin-bottom: 5px;
}
.colegios p {
    padding: 10px;
    color:#ffffff;
}
.colegios h3 {
    color: #ffffff;
}

/* VERIFICACION ALUMNO */

/*OPCIONES*/


.formulario_container h4 {
    padding: 35px;
    font-size: 20px;
}

main .button_other2 {
    background: #ffffff;;
    padding: 21px 0px;    
    width: 190px;
    color: #ffffff;
    font-size: 18px;
   
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    margin: 15px auto; 

    justify-content: center; 
    align-items: center;
    text-align: center;
    }


.button_other2:hover {
    cursor: pointer;
    background-color: #F8B60C;
    box-shadow: 0px 0px 8px #ce4c01;
}
/* FIN OPCIONES*/

/*AUTORIZACIONES*/
.autorizaciones h2  {
    color: white;
    margin-top: 30px;
}

.autorizaciones p {
    color: rgb(255, 255, 255);
    margin-top: 20px;

    font-style: italic;
}

.contenedorcarga {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

#archivoInput {
    display: none;
}

#archivoLabel {
    padding: 10px;
    border: 2px solid #ffffff;
    color: #f3f3f3;
    cursor: pointer;
    display: inline-block;
}

#archivoLabel:hover {
    background-color: #3498db;
    color: #fff;
}
/* FIN AUTORIZACIONES*/

/*CONFIRMACION */

.confirmacion h2 {
 color: white;
 margin-bottom: 20px ;
}

.confirmacion p {
    color: white;
    margin-top: 10px;
   }

.fin {
    text-align: center;
    font-size: 17px;
    margin-top: 20px;
}

/* FIIIIN CONFIRMACION */