/* Reset de estilos básicos */

:root {
    --verde: #a2d249;
    --light-verde: #dfefc0;
    --azul: #70a0e6;
    --celeste: #dae2ee;
    --naranja: #ffac4f;
    --rosa: #c61261;
    --rosita: #ffb4d4;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Space Grotesk", sans-serif;
}

.body-log, .html-log {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

body, html {
    height: 100%;
   /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    background-color: white;
}



/* Estilos del header */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(to bottom, rgba(0, 105, 138, 0.5), rgba(0, 134, 176, 0)); /* Degradado de azul rey opaco hacia arriba */
    background-color: #00698a;
}

    header label {
        font-family: "Quicksand", sans-serif;
        font-weight: 500;
        font-size: 1.3rem;
        color:ghostwhite;
    }
    

.logo-izquierda, .logo-derecha {
    height: 50px;
    
}

.logo-derecha {
    border-radius: 8px;
}

.header-right {
    display: flex;
    align-items: center;
}

.register-button {
    margin-left: 10px;
    padding: 10px 15px;
    border: none;
    background-color: #a2d249;
    color: white;
    font-size: large;
    cursor: pointer;
    border-radius: 15px;
}

    .register-button:hover {
        background-color: #97c444;
    }




/* Contenedor principal */
 .main-container {
    display: flex;
    max-width: max-content;
    
    background-color: #ffffff;
    height:100%;
    /*overflow: hidden;*/
    margin-top: 0;
}

.image-container {
    flex: 1.5;
    background-color: #007497;
    text-align: center;
    position: relative;
    width: 100%;
    
}

    .image-container label {
        font-family: "Quicksand", sans-serif;
        font-weight: bolder;
        font-size: 2.6rem;
        position: absolute;
        bottom: 0px;
        left: 00px;
        padding: 50px 0px;
        color: white;
        width: 100%;
        background: linear-gradient(to top, rgba(0, 0, 137, 0.4), rgba(0, 0, 139, 0)); /* Degradado de azul rey opaco hacia arriba */
        /* Aquí puedes añadir otras propiedades según necesites */
    }

    .image-container img {

        object-fit: cover;
        opacity: 0.5;

        width: 100%;
        height: 100%;;
    }

h1 {
    font-family: "Quicksand", sans-serif;
    font-weight: bolder;
    font-size: 2rem;
    margin-bottom: 10px;
    font-optical-sizing: auto;
}

.form-container {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.form-container-login {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.input-group-login input:focus + label,
.input-group-login input:not(:placeholder-shown) + label {
    top: -15px;
    left: 10px;
    font-size: 12px;
    color: black;
}

    .form-container label {
        margin-bottom: 40px;
        color: #999;
    }

.input-group {
    position: relative;
    margin-bottom: 20px;
}

    .input-group input {
        width: 100%;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 15px;
        outline: none;
        background: white;
        font-size: 1.1rem;
    }

    .input-group label {
        position: absolute;
        top: 15px;
        left: 10px;
        color: #999;
        pointer-events: none;
        transition: all 0.3s ease;
        background-color: white;
        padding: 0 5px;
    }

    .input-group input:focus + label,
    .input-group input:not(:placeholder-shown) + label {
        top: -15px;
        left: 10px;
        font-size: 12px;
        color: black;
    }

    .input-group .error-message {
        display: none;
        color: red;
        font-size: 12px;
        margin-top: 5px;
    }

.forgot-password {
    color: #70a0e6;
    text-decoration: none;
    margin-bottom: 20px;
    text-align: end;
    width:fit-content;
}

    .forgot-password:hover {
        text-decoration: underline;
    }

.forgot-passw {
    display: flex;
    flex-direction: column;
}

button[type="submit"] {
    padding: 10px 20px;
    border: none;
    background-color: black;
    color: white;
    cursor: pointer;
    border-radius: 15px;
    font-size: large;
    box-shadow: inset 0 0 0 0 #D80286;
    transition: ease-out 0.4s;
}

    button[type="submit"]:hover, button[type="submit"]:focus {
        background-color: #21252b;
    }

.registrarse {
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 10px;
}

    .registrarse a {
        background-color: #70a0e6;
        width: fit-content;
        align-self: center;
        padding: 10px 15px;
        text-decoration: none;
        color: black;
        border-radius: 15px;
        font-weight: 500;
    }

    .registrarse label {
        margin-bottom: 0;
        color: black;
        font-weight: 500;
        margin-top: 25px;
    }

/* REGISTRO */
#crear-passw {
    width: max-content;
    background-color: #70a0e6;
    color: #21252b;
    font-weight: 500;
}

.input-group-regis {
    position: relative;
    margin-bottom: 15px;
}

    .input-group-regis input {
        width: 100%;
        padding: 10px;
        border: 1px solid #0f0707;
        border-radius: 15px;
        outline: none;
        background: transparent;
        font-size: 1.1rem;
    }

    .input-group-regis label {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #999;
        pointer-events: none;
        transition: all 0.3s ease;
        background-color: white;
        padding: 0 5px;
    }

    .input-group-regis input:focus + label,
    .input-group-regis input:not(:placeholder-shown) + label {
        top: -10px;
        left: 10px;
        font-size: 12px;
        color: black;
    }

    .input-group-regis .error-message {
        display: none;
        color: red;
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

.form-container-regis {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

    .form-container-regis label {
        margin-bottom: 25px;
        color: #999;
    }

.div-btnCrear {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
}

/* INDEX */
.main-container-index {
    display: flex;
}

.main-container-index-admin {
    display: flex;
    width: 100%;
    padding: 20px 40px;
}

.form-container-index {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
}

.form-container-index-admin{
    width:100%;
}

    .form-container-index form {
        margin-top: 20px;
        flex: 1;
    }

.input-group input[type="seccion"] {
    text-transform: uppercase;
}

.datos-group {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
}

.index-options {
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 40px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid ghostwhite;
    border-top: 1px solid ghostwhite;
    column-gap: 15px;
}

    .index-options h3, span {
        font-family: "Quicksand", sans-serif;
        display: flex;
        align-items: center;
        justify-content: start;
        font-weight: bold;
    }

    .index-options span {
        font-weight: normal;
        margin-right: 10px;
        margin-left: 3px;

    }

.index-options-btns {
    display: flex;
    justify-content: space-between;
    column-gap: 8px;
    align-items: center;
    
   }

    



.index-options-btns button {
    border: none;
    padding: 10px 15px;
   
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:transparent;
    color:black;
    font-size:large;
}

    .index-options-btns button:focus, .index-options-btns button:hover {
        border-bottom: 5px solid orange;
        padding: 10px 15px;
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        color: black;
        transition: 0.02s;
    }






/* Estilos del modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilitar scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo opaco */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centrado vertical y horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ancho del modal */
    max-width: 500px; /* Ancho máximo */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Estilos del botón de cierre */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

svg {
    height: min-content;
   /*margin-right: 5px;*/
}

    svg:hover {
        stroke: #fe5c4f;
        animation: rotate360 2s alternate;
    }

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.btn-nivel-edu {
    display: flex;
    align-items: center;
    column-gap: 15px;
    margin-top: 10px;
    align-items:start;
    flex-direction:column;
}

.btn-nivel-edu div{
    display:flex;
    gap:15px;
    margin-top:15px;
}

    .btn-nivel-edu button {
        border: none;
        padding: 15px 20px;
        border-radius: 15px;
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: medium;
    }

.sty-primaria {
    background-color: #ffb2d3f9;
    color: #c61261;
    font-weight: 500;
}

.sty-secundaria {
    background-color: #d3dae6;
    color: #314665;
    font-weight: 500;
}

.image-container-index {
    flex: 1;
    padding: 40px;
    background-color: aliceblue;
    text-align: center;
}

    .image-container-index img {
        width: 50%;
        height: 50%;
        object-fit: cover;
        border-radius: 20px;
    }

    /*ROBEEE*/


.hidden {
    display: none;
}

.column {
    float: left;
    width: 50%;
    
    box-sizing: border-box;
    
}

#asignaturas{
    padding-left:10px;
}

.row{
    margin-top:10px;
}

.tipo-ex-conteiner{
    margin-top:15px;
   
}

#contenedor{
    margin-bottom:20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
}

    li:hover {
        background-color: #ffac4f;
        border-color: #ffac4f;
        color: #180f07;
        font-weight: 500;
    }

#volver {
    
    width: min-content;
    padding: 10px 15px;
    border-radius: 10px;
    border: none;
    font-weight:600;
    color:black;
    font-size:medium;
    background-color: #70a0e6;
}



/*LISTA DE EXAMENES*/

.examenlist-container {
    font-family: "Space Grotesk", sans-serif;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
    overflow: auto;
}

    .examenlist-container > h1 {
        font-family: "Quicksand", sans-serif;
        margin-bottom:0px;
    }

    .examenlist-container > div{
        display:flex;
        justify-content:space-between;
        margin-top:10px;
    }

    .examenlist-container > div form input{
        padding:10px 15px;
        border-radius:15px;
        border:1px solid gray;
        font-size:medium;
        width:100%;
        
    }

    .examenlist-container > div > button{
        height:min-content;
    }

    


#examenes-list li {
    padding: 5px 10px;
    background-color:antiquewhite;
    border-left: 4px solid #ffac4f;
    border-radius: 3px;
    font-size:small;
    font-weight:400;
    cursor: pointer;
    border-block-color:antiquewhite;
}

    #examenes-list li:hover {
        background-color: #ffac4f;
        transition: ease-in 0.1s;
        border-left: 4px solid #ffac4f;
    }

/*DETALLES DEL EXAMEN*/

.detalles-ex-body{
display:block;
}

.detalles-ex-conteiner{
    padding: 10px 25px;
}

.detalles-ex-conteiner div {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
    align-items:center;
}

.detalles-ex-conteiner div input{
    height:min-content;
    padding: 10px 15px;
    border-radius:15px;
}

.detalles-ex-conteiner > div > .buttons-group-ex > button{
    margin: 0px 5px;
}

    .detalles-ex-conteiner div > button {
        height: min-content;
        align-self: center;
        padding:  10px;
        border-radius: 10px;
        border: 1px solid #70a0e6;
        background-color: #70a0e6;
        font-weight:500;
        font-size:1rem;
    }

    .detalles-ex-conteiner div > button:hover {
       background-color:black;
       color:white;
       border:none;
    }
.detalles-ex-conteiner > div > h2{
    margin-top:20px;
}

#alumnos-list {
    list-style-type: none;
}



    #alumnos-list li {
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        background-color:var(--celeste);
        border:none;
    }

        #alumnos-list li:hover {
            background-color: #00698a;
            color:white;
        }

    #alumnos-list li > span > input{
        border-radius:8px;
       border:none;
        margin-left:10px;
        text-align:center;
        font-weight:bolder;
        font-size:medium;
    }

        #alumnos-list li > button {
            border-radius: 6px;
            border: 1px solid transparent;
            background-color: var(--naranja);
            padding: 5px 10px;
            color: black;
            font-size: 1rem;
            font-weight: bolder;
        }

        .pyr-conteiner{
            padding:10px 25px;
        }

    .agg-btns{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding-left:15px;
    }

.pyr-conteiner > .buttons-filter {
    background-color: transparent;
    padding: 15px;
    display: flex;
    gap: 10px;
    margin: 10px 0px;
}

.buttons-filter button {
    padding: 10px 15px;
    border-radius: 15px;
    font-weight: 500;
    border: none;
    background-color: var(--celeste);
    color: #314665;
}

        .buttons-filter > button:focus{
            background-color:black;
            font-weight:500;
            color:white;
        }

#preguntas-list li {
    padding:  10px 15px;
    border: none;
    border-radius:15px;
    margin:0;
    border: 1px solid lightgray;
    margin-bottom:10px;

    

    

    
}

#preguntas-list > li > button {
   
    
   
    border:none;
    border-radius:8px;
    height:min-content;
    font-size: medium;
    margin-right:5px;
    

    
}
.preguntas-op {
   
    display: flex;
   
    height:min-content;
}
.preguntas-op > button{
    background-color:var(--rosita);
    color:var(--rosa);
    font-size:medium;
    padding:10px ;
    border-radius:25px;
    border:none;
    font-weight:500;
    margin-right:10px;
    display:inline-flex;
}




    #preguntas-list li:hover {
        background-color: var(--celeste);
        border: 1px solid blue;
    }


/*  ALUMNO PERFIL*/

/*ALUMNO INDEX*/

/*.alumno-header{
    background-color:var(--verde);
}*/

/*.alumno-index-main-conteiner{
    margin:40px;
}*/

.alumno-index-main-conteiner h1{
    margin:0;
}

#alumno-info label{

    font-size:larger;


}

#alumno-info {
    display:flex;
    position:relative;
    justify-content: space-between;
    align-items:center;
   
    padding: 10px 40px;
    border-bottom: 1px solid ghostwhite;
    border-top: 1px solid ghostwhite;
    
}

    #alumno-info button {
        border: none;
        display: flex;
        gap:5px;
        align-items: center;
        background-color:transparent;
        font-size:larger;
        padding:0px 15px;
    }


    #alumno-info button:hover {
        border-bottom: 5px solid var(--naranja);
    }




#alumno-info > div {
    display: flex;
    gap: 20px;
}


#alumno-info > .bienvenida-alumno {
    display:grid;
    justify-content:center;
    align-content:center;
    align-items:center;
    gap:0;

}

    #alumno-info > .bienvenida-alumno > div {
        display: flex;
      
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        gap:5px;
       
    }

    #alumno-info > .bienvenida-alumno > label {
        color:gray;
    }
        /*#alumno-info h3,h1{
    font-weight:400;
    font-size:1.5rem;
    
}*/

        .alumno-index-main-conteiner > h2{

    margin-bottom:10px;
    margin:15px 40px;
}

#examenes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid gray;
    
    padding: 10px;
}


.examen {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    border-radius: 20px;
    padding: 10px;
   
    border:none;
}


    .examen:hover {
        background-color: var(--celeste);
        border:none;
       
   
    }

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

.nombre-fecha {
    justify-content: flex-start;
}

.nombre-examen {
    font-size: 1.2em; /* Hacer un poco más grande el nombre del examen */
}

.fecha-examen {
    color: gray; /* Color gris para la fecha */
}

.calificacion {
    justify-content: center;
    text-align: center;
    font-weight:600;
    font-size:1.1rem;
}

.boton {
    justify-content: flex-end;
    text-align: right;
}

.boton-examen {
    background-color: var(--azul); /* Color rosa para el botón */
    padding: 10px 20px; /* Padding arriba y abajo en el botón */
    border: none;
    cursor: pointer;
    font-size:1rem;
    font-weight:500;
}

    .boton-examen:disabled {
        background-color: lightgray; /* Cambia el color del botón si está deshabilitado */
        cursor: not-allowed;
    }

    /*EXAMEN VIRTUAL PREGUNTAS*/

.realizar-ex-container{
    margin:30px 40px;
}

    .realizar-ex-container h1 {
        font-weight: bold;
        font-size:2rem;
        margin-bottom:0;

        
    }

    .realizar-ex-container > .instrucciones {
        color: gray;
        
        
    }
    #examen-form > #preguntas-container{
        margin-top:20px;
    }
   #examen-form > #preguntas-container > .pregunta > p{
      font-size:1.1rem;
      font-weight:500;
      
      
    }

#examen-form > .enviar-resp {
    padding: 15px 20px;
    background-color: var(--naranja);
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 1.1rem;
    height: min-content;
}
   .pregunta{
       margin-bottom:15px;
   }


   /*PERFIL ADMINISTRADOR*/
   /*INDEX*/

.form-container-admin-index {
    margin: 15px 40px;
}

    .form-container-admin-index h1 {
        font-weight:bold;
        font-size: 1.5rem;
    }

/*AGREGAR ALUMNO REGISTRO*/
.agg-alumno-container {
   
    height: min-content;
    padding: 10px 40px;
}

.agg-alumno-container h1{
    margin-bottom:0px;
}


    
    


    .agg-alumno-container > .form-agg-alumn-conteiner h1 {
   margin-bottom:0px;
    }

    .form-agg-alumn-conteiner #form-alumno{
        margin-top:20px;
    }


    .agg-alumno-container #form-docente{
        margin-top:25px;
    }
   

    
  /*Context menu agregar bontones*/

/* Estilo del botón */
.preguntas-op > #menuBtnExamen {
    background-color: #f28bb2;
    color: white;
    padding: 10px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
}

/* Estilo del menú contextual */
.context-menu-agg {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
    margin-top: 10px;
}

    .context-menu-agg ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .context-menu-agg ul li {
            padding: 10px 20px;
            cursor: pointer;
        }

            .context-menu-agg ul li:hover {
                background-color: #f28bb2;
                color: white;
            }




/*CONTEXT MENU CERRAR SESION ALUMNO*/
.context-menu {
    display: none;
    position: absolute;
    background-color: var(--light-verde);
    z-index: 1000;
    left: 350px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    width: 200px; /* Ancho fijo para el menú */
}

    .context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .context-menu ul li {
            padding: 10px 20px;
            cursor: pointer;
            margin: 0;
            border: none;
            border-radius: 0;
            
            font-weight: 500;
            background-color: #f0f0f0;
        }

            .context-menu ul li:hover {
                background-color: var(--celeste);
                
                font-weight:600;
            }
/* Estilos del modal CAMBIAR CONTRASEÑA */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilitar scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo opaco */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centrado vertical y horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ancho del modal */
    max-width: 500px; /* Ancho máximo */
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-content h2{
    margin-bottom:25px;
}

/* Estilos del botón de cierre */
.close {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: bolder;
}

    .close:hover,
    .close:focus {
        color: #00698a;
        text-decoration: none;
        cursor: pointer;
        font-weight: bolder;
    }


    /*EXAMEN FORM DEL ALUMNO*/
    #examen-form{
        display:flex;
       justify-content:space-between;
    }


    /*LISTA DE DOCENTES EN ADMIN*/
.docente-contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
   
  
}

.info-docente {
    text-align: left;
}

    .info-docente h3 {
        margin: 0;
        font-size: 1.2em;
    }

    .info-docente p {
        margin: 0;
        font-size: 0.9em;
        color: #666;
    }

.boton-contenedor {
    text-align: right;
}

#docentes-list {
    height:100%;
}

#docentes-list li{
    border-radius:13px;
    background-color:var(--celeste);
    border:none;
    padding:10px 15px;
}

   
.boton-examen {
   
  background-color:var(--naranja);
    padding: 8px 16px;
    cursor: pointer;
}

 


/*.context-menu {
    display: none;
    position: absolute;
    top: 30px;
    right: 0px; 
    background-color:var(--light-verde);
    
    z-index: 1000;
} 

    .context-menu ul {
        list-style: none;
        margin: 0;
       
    }

        .context-menu ul li {
            padding: 10px 20px;
            cursor: pointer;
        }

            .context-menu ul li:hover {
                background-color: #f0f0f0;
            }*/

/* Responsividad */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .image-container img {
        width: 70%;
        height: 90%;
        object-fit: cover;
        border-radius: 30px;
        background-color: aliceblue;
    }

    .image-container, .form-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .form-container {
        padding-top: 0;
    }

    .main-container svg > .icono-logo{
        height:20px;
        width:20px;
    }
}


/*ROBEEEE*/





/* Reset de estilos básicos 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Space Grotesk", sans-serif;
}

.body-log, .html-log {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: whitesmoke;
  
}

body, html{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  
}

/* Estilos del header 
.header-log {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color:transparent;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.logo-izquierda, .logo-derecha {
  height: 50px;
}

.logo-derecha{
  border-radius: 8px;
}

.header-right {
  display: flex;
  align-items: center;
}

.register-button {
  margin-left: 10px;
  padding: 10px 15px;
  border: none;
  background-color:#a2d249;
  color: white;
  font-size: large;
  cursor: pointer;
  border-radius: 15px;
  
}

.register-button:hover {
  background-color:#97c444;
}

/* Espacio para el header 
body::before {
  content: "";
  display: block;
  height: 70px; /* Altura del header 
  width: 100%;
}

/* Contenedor principal 
.main-container {
  display: flex;
  max-width: 900px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 40px;
  overflow: hidden;
  margin-top: 0px;
}

.image-container {
  flex: 1;
  padding: 40px;
  background-color: aliceblue;
  text-align: center;
}

.image-container label{
  font-family: "Quicksand", sans-serif;
  font-weight:bolder;
  font-size: 2rem;
  color:#a2d249;
  
}

.image-container img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  border-radius: 30px;
  
  

  
  
}

h1{
  font-family: "Quicksand", sans-serif;
  font-weight:bolder;
  font-size: 2rem;
  font-style: normal;
  
  margin-bottom: 10px;
  font-optical-sizing: auto;
}

.form-container {
  flex: 1;
  padding: 40px;
 
  display: flex;
  flex-direction: column;
 
}

.form-container label {
  margin-bottom: 30px;
  color: #999;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 15px;
  outline: none;
  background: white;
  font-size: 1.1rem;
}

.input-group label {
  position: absolute;
  top: 15px;
  left: 10px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
  background-color: white;
  padding: 0 5px;
  
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: -10px;
  left: 10px;
  font-size: 12px;
  color: black;
}

.input-group .error-message {
  display: none;
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.forgot-password {
  color: #70a0e6;
  text-decoration: none;
  margin-bottom: 20px;
  text-align: end;
}

.forgot-password:hover {
  text-decoration: underline;
  
}

.forgot-passw{
  display: flex;
  flex-direction: column;
}

button[type="submit"] {
  padding: 10px 20px;
  border: none;
  background-color: black;
  color: white;
  cursor: pointer;
  border-radius: 15px;
  font-size: large;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

button[type="submit"]:hover,:focus {
  background-color:#21252b;
  
}

.registrarse{
  display: flex;
  flex-direction: column;
  text-align: center;
  row-gap: 10px;
}

.registrarse a{
  background-color: #70a0e6;
  width: fit-content;
  align-self: center;
  padding: 10px 15px;
  text-decoration: none;
  color:black;
  border-radius: 15px;
  font-weight: 500;
}

.registrarse label{
  margin-bottom: 0;
  color: black;
  font-weight: 500;
  margin-top: 25px;
}

/*REGISTRO
#crear-passw{
  width: max-content;
  background-color: #70a0e6;
  color: #21252b;
  font-weight: 500;
}

.input-group-regis{
  position: relative;
  margin-bottom: 15px;
}

.input-group-regis input{
  width: 100%;
  padding: 10px;
  border: 1px solid #0f0707;
  border-radius: 15px;
  outline: none;
  background: transparent;
  font-size: 1.1rem;

}

.input-group-regis label{
  position: absolute;
  top: 10px;
  left: 10px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
  background-color: white;
  padding: 0 5px;
}

.input-group-regis input:focus + label,
.input-group-regis input:not(:placeholder-shown) + label {
  top: -10px;
  left: 10px;
  font-size: 12px;
  color: black;
}

.input-group-regis .error-message {
  display: none;
  color: red;
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.form-container-regis {
  flex: 1;
  padding: 40px;
 
  display: flex;
  flex-direction: column;
 
}

.form-container-regis label {
  margin-bottom: 25px;
  color: #999;
}

.div-btnCrear{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}

/*INDEX*/
/*h4{
  font-weight: normal;
  color: gray;
  margin-bottom: 30px;
}*

.main-container-index{
  display: flex;
  
  
}

.form-container-index form{
  margin-top: 20px;
  flex: 1;
}

.form-container-index {
  
  padding: 20px 40px;
 
  display: flex;
  flex-direction: column;
 
}

.input-group input[type="seccion"]{
  text-transform: uppercase;
}

.datos-group{
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
}

.index-options{
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 40px;
  padding-bottom: 10px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  border-bottom: 1px solid ghostwhite;
  border-top: 1px solid ghostwhite;
  column-gap: 15px;
}

.index-options h3,span{
  font-family: "Quicksand", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;

}

.index-options span{
  font-weight: normal;
  margin-right: 10px;
  margin-left: 3px;
}

.index-options-btns{
  display: flex;
  justify-content: space-between;
  column-gap: 15px;
}

.index-options button{
  border: none;
  padding: 10px 15px;
  border-radius: 10px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-examenlist{
  background-color: #dae2ee;
  color:#4a6a99;
  font-weight: 500;
  font-size: medium;
}

.btn-agg-alumno{
  background-color: #dfefc0;
  color:#7a9f37;
  font-weight: 500;
  font-size: medium;
}

/* Estilos del modal *
.modal {
  display: none; /* Oculto por defecto *
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Habilitar scroll si es necesario *
  background-color: rgba(0, 0, 0, 0.5); /* Fondo opaco *
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Centrado vertical y horizontal *
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ancho del modal *
  max-width: 500px; /* Ancho máximo *
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Estilos del botón de cierre *
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


svg{
  height: min-content;
 margin-right: 5px;
}
svg:hover{
 stroke:#fe5c4f ;
 animation: rotate360 2s alternate;
}

@keyframes rotate360 {
  0% {
      transform: rotate(0deg);
  }
  50% {
      transform: rotate(360deg);
  }
  100% {
      transform: rotate(0deg);
  }
}
 

.btn-nivel-edu{

 display: flex;
 align-items: center;
 column-gap: 15px;
 margin-top: 20px;
 
}

.btn-nivel-edu button{
  border: none;
  padding: 15px 20px;
  border-radius: 15px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: medium;
}

#btn-primaria{
  background-color:#ffb2d3f9;
  color:#c61261;
  font-weight: 500;
  font-size: medium;-
}

#btn-secundaria{
  background-color:#d3dae6;
  color:#314665;
  font-weight: 500;
  font-size: medium;
}

.image-container-index{
  
  flex: 1;
  padding: 40px;
  background-color: aliceblue;
  text-align: center;
}

.image-container-index img{
  width: 50%;
  height: 50%;
  object-fit: cover;
  border-radius: 20px;
  text-align: center;
}





/* Responsividad *
@media (max-width: 768px) {
  .main-container {
      flex-direction: column;
  }

  .image-container img {
    width: 70%;
    height: 90%;
    object-fit: cover;
    border-radius: 30px;
    background-color: aliceblue;
   
  }

  .image-container, .form-container {
      display: flex;
      justify-content: center;
      width: 100%;
      
  }

  .form-container{
    padding-top: 0;
  }
}