/* 
 ########   #######  ########  #######  ##    ## ########  ######     ########  ######   ######  ##     ## ######## ##          ###     ######  
##     ## ##     ##    ##    ##     ## ###   ## ##       ##    ##    ##       ##    ## ##    ## ##     ## ##       ##         ## ##   ##    ## 
##     ## ##     ##    ##    ##     ## ####  ## ##       ##          ##       ##       ##       ##     ## ##       ##        ##   ##  ##       
########  ##     ##    ##    ##     ## ## ## ## ######    ######     ######    ######  ##       ##     ## ######   ##       ##     ##  ######  
##     ## ##     ##    ##    ##     ## ##  #### ##             ##    ##             ## ##       ##     ## ##       ##       #########       ## 
##     ## ##     ##    ##    ##     ## ##   ### ##       ##    ##    ##       ##    ## ##    ## ##     ## ##       ##       ##     ## ##    ## 
########   #######     ##     #######  ##    ## ########  ######     ########  ######   ######   #######  ######## ######## ##     ##  ######
*/
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    padding: 0;
}

.he {
    color: #2c3e50;
    font-size: 2.5em;
    text-align: center;
    font-weight: bold;
    margin-top: 30px;
}

.separador {
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 0;
}

.escuelas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    overflow: visible;
}

.escuela {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
    width: 250px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    padding-bottom: 15px;
    border: 4px solid transparent; /* Se actualizará dinámicamente */
}

.escuela[data-nivel="maternal"] { border-color: #5cacc4; }
.escuela[data-nivel="preescolar"] { border-color: #8cd19d; }
.escuela[data-nivel="primaria"] { border-color: #cee879; }
.escuela[data-nivel="secundaria"] { border-color: #fcb653; }
.escuela[data-nivel="preparatoria"] { border-color: #ff5254; }

.escuela img {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    margin-top: 20px;
}

.escuela h3 {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

.escuela:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.boton-escuela {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.mensaje-sin-escuelas {
    color: #333;
    font-weight: bold;
}


/* 
 ######   ########     ###    ########   #######   ######  
##    ##  ##     ##   ## ##   ##     ## ##     ## ##    ## 
##        ##     ##  ##   ##  ##     ## ##     ## ##       
##   #### ########  ##     ## ##     ## ##     ##  ######  
##    ##  ##   ##   ######### ##     ## ##     ##       ## 
##    ##  ##    ##  ##     ## ##     ## ##     ## ##    ## 
 ######   ##     ## ##     ## ########   #######   ######  
*/
.grados-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    padding: 10px 0;
    justify-content: center;
    align-items: center;
}

.escuela.activa .grados-container {
    display: flex;
}

.grado {
    text-align: center;
    padding: 6px; /* Reducido */
    border-radius: 5px;
    font-size: 1em; /* Reducido */
    font-weight: bold;
    margin: 4px 8px; /* Ajustado */
    color: white;
    background-color: #cee879;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    width: 70%; /* Reducido */
    cursor: pointer; /* Hace que los grados sean clickeables */
}

@media (max-width: 768px) {
    .grados-container {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
/* 
########  ##     ## ########    ###    
##     ## ##     ##    ##      ## ##   
##     ## ##     ##    ##     ##   ##  
########  ##     ##    ##    ##     ## 
##   ##   ##     ##    ##    ######### 
##    ##  ##     ##    ##    ##     ## 
##     ##  #######     ##    ##     ##
*/
.ruta {
    display: flex;
    align-items: center;
    font-size: 1em;
    font-weight: bold;
    gap: 0.5em;
    margin: 20px;
    padding: 10px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: none;
}

.enlace-ruta {
    color: #7f8c8d;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.enlace-ruta:hover {
    color: #2980b9;
}

.separador-ruta {
    color: #666;
}

.actual-ruta {
    color: #001489;
    font-weight: bold;
}

/* 
######  #### ##    ##    ########  ######   ######  ##     ## ######## ##          ###     ######  
##    ##  ##  ###   ##    ##       ##    ## ##    ## ##     ## ##       ##         ## ##   ##    ## 
##        ##  ####  ##    ##       ##       ##       ##     ## ##       ##        ##   ##  ##       
 ######   ##  ## ## ##    ######    ######  ##       ##     ## ######   ##       ##     ##  ######  
      ##  ##  ##  ####    ##             ## ##       ##     ## ##       ##       #########       ## 
##    ##  ##  ##   ###    ##       ##    ## ##    ## ##     ## ##       ##       ##     ## ##    ## 
 ######  #### ##    ##    ########  ######   ######   #######  ######## ######## ##     ##  ######  
 */                                                                                                  
 .contenedor-sin-escuelas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(70vh - 130px);
    width: 100%;
}

.contenedor-sin-escuelas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 4px solid #001489; /* Marco azul ajustado a la imagen */
    border-radius: 8px; /* Opcional, para bordes redondeados */
    box-sizing: border-box;
}