/*==================================================
  ANULA EL CSS DEL TEMPLATE RESUME
==================================================*/

.resume-section {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px !important;
}

.resume-section-content {
    width: 100% !important;
    max-width: 100% !important;
}


/*==========================================================
    CALENDARIO ESCOLAR V2
==========================================================*/

#calendario-escolar {

    --principal: #FF6600;
    --principal-dark: #E95D00;

    --borde: #E6E6E6;
    --gris: #F7F7F7;

    --texto: #333333;

    --radio: 16px;

    --sombra: 0 10px 25px rgba(0,0,0,.08);

    width: 100%;
    max-width: 1700px;

    margin: 35px auto;

    font-family: "Segoe UI", Arial, sans-serif;

    color: var(--texto);
}


/*==========================================================
    GRID DE MESES
==========================================================*/

#calendario-escolar .cal-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/*==========================================================
    TABLET
==========================================================*/

@media(max-width:1200px) {

    #calendario-escolar .cal-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}






/*==========================================================
    NAVEGACIÓN EN MÓVIL
==========================================================*/

@media(max-width:768px) {

    /*======================================================
        CONTENEDOR
    ======================================================*/

    #calendario-escolar .cal-navegacion {

        width: 100%;

        display: grid;

        grid-template-columns: 46px minmax(0,1fr) 46px;

        align-items: center;

        gap: 7px;

        margin: 0 auto 12px;

        padding: 0;
    }


    /*======================================================
        BOTONES GENERALES
    ======================================================*/

    #calendario-escolar .cal-btn {

        height: 39px;

        min-width: 0;

        padding: 0;

        margin: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 8px;

        box-sizing: border-box;
    }


    /*======================================================
        ANTERIOR
    ======================================================*/

    #calendario-escolar .cal-btn-anterior {

        width: 46px;

        height: 39px;

        font-size: 0;

        padding: 0;

        position: relative;
    }


    #calendario-escolar .cal-btn-anterior span {

        display: none !important;
    }


    #calendario-escolar .cal-btn-anterior i {

        display: none !important;
    }


    /*
        Flecha creada con CSS
    */



    /*======================================================
        MES ACTUAL
    ======================================================*/

    #calendario-escolar .cal-btn-actual {

        width: 100%;

        height: 39px;

        padding: 0 10px;

        font-size: 10px;

        white-space: nowrap;

        background: rgb(255,102,0);

        border-color: #E87413;

        color: #ffffff;
    }


    #calendario-escolar .cal-btn-actual i {

        display: inline-block;

        font-size: 10px;

        margin-right: 6px;
    }


    #calendario-escolar .cal-btn-actual span {

        display: inline;
    }


    /*======================================================
        SIGUIENTE
    ======================================================*/

    #calendario-escolar .cal-btn-siguiente {

        width: 46px;

        height: 39px;

        font-size: 0;

        padding: 0;

        position: relative;
    }


    #calendario-escolar .cal-btn-siguiente span {

        display: none !important;
    }


    #calendario-escolar .cal-btn-siguiente i {

        display: none !important;
    }


    /*
        Flecha creada con CSS
    */




    /*======================================================
        HOVER ANTERIOR / SIGUIENTE
    ======================================================*/

    #calendario-escolar .cal-btn-anterior:hover,
    #calendario-escolar .cal-btn-siguiente:hover {

        background: #FFF7F1;

        border-color: #E87413;
    }



    /*======================================================
        DESHABILITADO
    ======================================================*/

    #calendario-escolar .cal-btn-anterior:disabled,
    #calendario-escolar .cal-btn-siguiente:disabled {

        opacity: .35;
    }


    /*======================================================
        VER MES
    ======================================================*/

    #calendario-escolar .cal-ver-mes {

        grid-column: 1 / -1;

        width: 100%;

        height: auto;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        padding: 0;

        margin: 3px 0 0;
    }


    #calendario-escolar .cal-ver-mes label {

        margin: 0;

        font-size: 10px;

        font-weight: 700;

        color: #555555;
    }


    #calendario-escolar #cal-select-mes {

        height: 38px;

        min-width: 185px;

        padding: 0 30px 0 12px;

        border-radius: 8px;

        font-size: 10px;

        font-weight: 700;

        background: #ffffff;

        border: 1px solid rgba(232,116,19,.30);

        color: #444444;

        outline: none;
    }


    /*======================================================
        SOLO UN MES EN MÓVIL
    ======================================================*/

    #calendario-escolar .cal-grid-navegable {

        display: block;

        width: 100%;
    }


    #calendario-escolar .cal-mes-wrapper {

        display: none;

        width: 100%;
    }


    #calendario-escolar .cal-mes-wrapper.cal-visible {

        display: block;

        width: 100%;
    }

}



/*==========================================================
    TARJETA DEL MES
==========================================================*/

#calendario-escolar .cal-month {

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    border: 3px solid var(--color-mes);

    box-shadow: var(--sombra);

    --color-mes: #FF6600;
}


/*==========================================================
    COLOR SEGÚN EL AÑO
==========================================================*/

/*
    2026 = NARANJA INSTITUCIONAL
*/

#calendario-escolar .cal-month.cal-2026 {

    --color-mes: #FF6600;
}


/*
    2027 = ROJO
*/

#calendario-escolar .cal-month.cal-2027 {

    --color-mes: #A94448;
}


/*==========================================================
    ENCABEZADO DEL MES
==========================================================*/

#calendario-escolar .cal-month-header {

    width: 100%;

    height: 38px;

    padding: 0 !important;

    margin: 0 !important;

    background: #EDEDED !important;

    overflow: hidden;

    position: relative;
}


/*==========================================================
    CONTENEDOR MES + AÑO
==========================================================*/

#calendario-escolar .cal-month-title {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 0;

    padding: 0;

    margin: 0;

    background: #EDEDED;
}


/*==========================================================
    NOMBRE DEL MES
==========================================================*/

#calendario-escolar .cal-month-name {

    height: 100%;

    width: 72%;

    min-width: 72%;

    padding: 0 30px 0 14px;

    margin: 0;

    display: flex;

    align-items: center;

    position: relative;

    z-index: 2;

    background: var(--color-mes);

    color: #ffffff;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    white-space: nowrap;

    box-sizing: border-box;
}


/*==========================================================
    DIAGONAL DEL ENCABEZADO
==========================================================*/

#calendario-escolar .cal-month-name::after {

    content: "";

    position: absolute;

    top: 0;

    right: -28px;

    width: 48px;

    height: 100%;

    background: var(--color-mes);

    clip-path: polygon(
        55% 0,
        100% 0,
        45% 100%,
        0 100%
    );

    z-index: -1;
}


/*==========================================================
    AÑO
==========================================================*/

#calendario-escolar .cal-month-year {

    height: 100%;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding: 0 14px 0 0;

    margin: 0;

    background: #EDEDED;

    color: #000000;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1;

    position: relative;

    z-index: 3;

    box-sizing: border-box;
}


/*==========================================================
    TABLA DEL CALENDARIO
==========================================================*/

#calendario-escolar table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    background: #ffffff;
}


/*==========================================================
    DÍAS DE LA SEMANA
==========================================================*/

#calendario-escolar .cal-month thead tr {

    background: var(--color-mes);
}


#calendario-escolar .cal-month thead th {

    background: var(--color-mes);

    color: #ffffff;

    border: none;

    padding: 4px 2px;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 11px;

    font-weight: 800;

    text-align: center;

    vertical-align: middle;

    line-height: 1;
}


/*==========================================================
    CELDAS
==========================================================*/

#calendario-escolar td {

    position: relative;

    height: 50px;

    border: 1px solid #ececec;

    vertical-align: top;

    overflow: hidden;

    padding: 2px;

    background: #ffffff;

    color: #333333;
}


/*==========================================================
    CELDAS VACÍAS
==========================================================*/

#calendario-escolar .vacio {

    background: #fafafa !important;
}


/*==========================================================
    NÚMERO DEL DÍA
==========================================================*/

#calendario-escolar .numero {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #ffffff;

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 13px;

    color: #333333;
}


/*==========================================================
    CONTENEDOR DE EVENTOS
==========================================================*/

#calendario-escolar .eventos-dia {

    position: absolute;

    left: 3px;

    right: 3px;

    bottom: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    flex-wrap: wrap;

    z-index: 4;

    min-height: 20px;
}


/*==========================================================
    ICONOS DE EVENTOS
==========================================================*/

#calendario-escolar .evento-icono {

    width: 16px;

    height: 16px;

    display: inline-block;

    box-sizing: border-box;

    flex-shrink: 0;
}


/*==========================================================
    RECESO
==========================================================*/

#calendario-escolar .evento-receso {

    background: #F7B07C;
}


/*==========================================================
    VACACIONES
==========================================================*/

#calendario-escolar .evento-vacaciones {

    background: #FFE8E8;

    border: 2px solid #ED2024;
}


/*==========================================================
    FASE INTENSIVA
==========================================================*/

#calendario-escolar .evento-fase-intensiva {

    background: #D96B0B;
}


/*==========================================================
    INICIO DE CLASES
==========================================================*/

#calendario-escolar .evento-inicio {

    background: #8B1238;

    clip-path: polygon(
        0 0,
        72% 0,
        100% 50%,
        72% 100%,
        0 100%
    );
}


/*==========================================================
    FIN DE CLASES
==========================================================*/

#calendario-escolar .evento-fin {

    background: #8B1238;

    clip-path: polygon(
        28% 0,
        100% 0,
        100% 100%,
        28% 100%,
        0 50%
    );
}


/*==========================================================
    SUSPENSIÓN
==========================================================*/

#calendario-escolar .evento-suspension {

    background: #ED2024;

    border-radius: 50%;
}


/*==========================================================
    JORNADA
==========================================================*/

#calendario-escolar .evento-jornada {

    border: 2px solid #F28C28;

    border-radius: 50%;

    background: #ffffff;
}


/*==========================================================
    CTE
==========================================================*/

#calendario-escolar .evento-cte {

    border: 2px solid #F28C28;

    background: #ffffff;
}


/*==========================================================
    EVALUACIÓN
==========================================================*/

#calendario-escolar .evento-evaluacion {

    border: 2px solid #E8B400;

    background: #ffffff;
}


/*==========================================================
    PREINSCRIPCIÓN
==========================================================*/

#calendario-escolar .evento-preinscripcion {

    border: 2px solid #8B1238;

    background: #ffffff;
}


/*==========================================================
    CALIFICACIONES
==========================================================*/

#calendario-escolar .evento-calificaciones {

    background: #F3B300;
}


/*==========================================================
    ACOTACIONES
==========================================================*/

#calendario-escolar .calendar-acotaciones {

    width: 100%;

    margin: 14px auto 18px;

    padding: 0;
}


/*==========================================================
    ENCABEZADO DE ACOTACIONES
==========================================================*/

#calendario-escolar .acotaciones-header {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 7px;
}


#calendario-escolar .acotaciones-titulo {

    font-family: "Saira Extra Condensed", sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 1.2px;

    color: #E87413;

    white-space: nowrap;
}


#calendario-escolar .acotaciones-linea {

    height: 1px;

    flex: 1;

    background: linear-gradient(
        90deg,
        #9f3758,
        #9f3758
    );

    border-radius: 10px;
}


/*==========================================================
    TABLA DE ACOTACIONES
==========================================================*/

#calendario-escolar .acotaciones-tabla {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px 8px;

    width: 100%;
}


/*==========================================================
    ELEMENTO DE ACOTACIÓN
==========================================================*/

#calendario-escolar .acotacion-item {

    min-height: 34px;

    display: flex;

    align-items: center;

    padding: 5px 8px;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(232,116,19,.13);

    border-left: 2px solid rgba(232,116,19,.40);

    border-radius: 5px;

    box-shadow:
        0 1px 5px rgba(0,0,0,.035);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background-color .18s ease;
}


/*==========================================================
    HOVER DE ACOTACIÓN
==========================================================*/

#calendario-escolar .acotacion-item:hover {

    transform: translateY(-1px);

    background: #fff9f4;

    border-color: rgba(232,116,19,.35);

    border-left-color: #E87413;

    box-shadow:
        0 4px 10px rgba(232,116,19,.12);
}


/*==========================================================
    ICONOS DE ACOTACIONES
==========================================================*/

#calendario-escolar .acotacion-item .evento-icono {

    flex: 0 0 auto;

    width: 18px;

    height: 18px;

    margin-right: 7px;

    border-radius: 4px;
}


/*==========================================================
    TEXTO DE ACOTACIONES
==========================================================*/

#calendario-escolar .acotacion-texto {

    font-family: "Muli", sans-serif;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.15;

    color: #444444;
}


#calendario-escolar .acotacion-item:hover .acotacion-texto {

    color: #E87413;
}


/*==========================================================
    HOVER SOBRE DÍAS CON EVENTO
==========================================================*/

#calendario-escolar .dia-con-evento {

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


#calendario-escolar .dia-con-evento:hover,
#calendario-escolar .dia-con-evento:focus {

    transform: scale(1.035);

    position: relative;

    z-index: 5;

    box-shadow:
        0 4px 12px rgba(232,116,19,.28);

    outline: none;
}


/*==========================================================
    HOVER EVENTOS CON FONDO
==========================================================*/

#calendario-escolar .dia-con-evento.evento-receso:hover,
#calendario-escolar .dia-con-evento.evento-vacaciones:hover,
#calendario-escolar .dia-con-evento.evento-fase-intensiva:hover {

    filter: brightness(1.04);
}


/*==========================================================
    ANIMACIÓN DE ICONOS
==========================================================*/

#calendario-escolar .eventos-dia .evento-icono {

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}


#calendario-escolar .eventos-dia .evento-icono:hover,
#calendario-escolar .eventos-dia .evento-icono:focus {

    transform: scale(1.25);

    filter: brightness(1.08);

    box-shadow:
        0 3px 9px rgba(232,116,19,.35);

    outline: none;
}


#calendario-escolar .eventos-dia .evento-icono:active {

    transform: scale(1.20);

    box-shadow:
        0 2px 8px rgba(232,116,19,.40);
}


#calendario-escolar .dia-con-evento:hover .evento-icono {

    transform: scale(1.12);
}


/*==========================================================
    TOOLTIP
==========================================================*/

.tooltip {

    z-index: 99999;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 11px;

    font-weight: 600;
}


.tooltip-inner {

    background: #ffffff !important;

    color: #E87413 !important;

    padding: 8px 12px;

    border-radius: 7px;

    max-width: 280px;

    text-align: center;

    line-height: 1.4;

    white-space: pre-line;

    border: 1px solid rgba(232,116,19,.35);

    box-shadow:
        0 5px 18px rgba(0,0,0,.16);
}


/*==========================================================
    FLECHAS DEL TOOLTIP
==========================================================*/

.bs-tooltip-top .arrow::before {

    border-top-color: #E87413 !important;
}


.bs-tooltip-bottom .arrow::before {

    border-bottom-color: #E87413 !important;
}


.bs-tooltip-left .arrow::before {

    border-left-color: #E87413 !important;
}


.bs-tooltip-right .arrow::before {

    border-right-color: #E87413 !important;
}


/*==========================================================
    ENCABEZADO GENERAL
==========================================================*/

.cal-header {

    width: 100%;

    margin-bottom: 20px;
}


/*==========================================================
    CONTENEDOR ENCABEZADO
==========================================================*/

.cal-encabezado {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    align-items: center;

    gap: 10px;

    padding: 10px 0 20px;
}


/*==========================================================
    IMAGEN
==========================================================*/

.cal-encabezado-imagen {

    grid-column: span 6;

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


.cal-imagen-directiva {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    object-fit: contain;
}


/*==========================================================
    TEXTO DEL ENCABEZADO
==========================================================*/

.cal-encabezado-texto {

    grid-column: span 6;

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;
}


/*==========================================================
    TÍTULO
==========================================================*/

.cal-titulo-principal {

    width: 100%;

    padding: 6px 12px 7px;

    background: #C9232D;

    color: #ffffff;

    font-family: "Muli", sans-serif;

    font-size: clamp(20px,2.4vw,36px);

    font-weight: 800;

    font-style: italic;

    line-height: 1.05;

    border-radius: 30px 0 0 30px;

    box-shadow:
        0 4px 8px rgba(0,0,0,.25);
}


/*==========================================================
    CICLO
==========================================================*/

.cal-ciclo {

    margin-top: 8px;

    margin-left: 4px;

    color: #000000;

    font-family: "Muli", sans-serif;

    font-size: clamp(23px,2.5vw,36px);

    font-weight: 800;

    font-style: italic;

    line-height: 1;
}


/*==========================================================
    SUBTÍTULO
==========================================================*/

.cal-subtitulo {

    margin-top: 6px;

    margin-left: 4px;

    color: #F15A24;

    font-family: "Muli", sans-serif;

    font-size: clamp(14px,1.5vw,20px);

    font-weight: 700;

    font-style: italic;

    line-height: 1.05;
}


/*==========================================================
    CONTENEDOR ACOTACIONES
==========================================================*/

.cal-acotaciones-box {

    width: 100%;
}


/*==========================================================
    TABLET
==========================================================*/

@media(max-width:900px) {

    .cal-encabezado {

        grid-template-columns:
            minmax(170px,.65fr)
            minmax(300px,1.35fr);

        gap: 15px;
    }


    .cal-titulo-principal {

        font-size: 32px;

        padding-left: 20px;
    }


    .cal-ciclo {

        font-size: 35px;
    }


    .cal-subtitulo {

        font-size: 20px;
    }

}


/*==========================================================
    MÓVIL
==========================================================*/

@media(max-width:576px) {


    /*----------------------------------------------
        CALENDARIO
    ----------------------------------------------*/

    #calendario-escolar .cal-month {

        border-width: 2px;

        border-radius: 12px;
    }


    /*----------------------------------------------
        ENCABEZADO DEL MES
    ----------------------------------------------*/

    #calendario-escolar .cal-month-header {

        height: 34px !important;
    }


    /*----------------------------------------------
        NOMBRE DEL MES
    ----------------------------------------------*/

    #calendario-escolar .cal-month-name {

        width: 70%;

        min-width: 70%;

        padding: 0 20px 0 10px;

        font-size: 14px;
    }


    /*----------------------------------------------
        DIAGONAL
    ----------------------------------------------*/

    #calendario-escolar .cal-month-name::after {

        right: -22px;

        width: 40px;
    }


    /*----------------------------------------------
        AÑO
    ----------------------------------------------*/

    #calendario-escolar .cal-month-year {

        padding-right: 7px;

        font-size: 15px;
    }


    /*----------------------------------------------
        DÍAS DE SEMANA
    ----------------------------------------------*/

    #calendario-escolar .cal-month thead th {

        font-size: 10px;

        padding: 3px 1px;
    }


    /*----------------------------------------------
        CELDAS
    ----------------------------------------------*/

    #calendario-escolar td {

        height: 45px;

        font-size: 10px;
    }


    /*----------------------------------------------
        NÚMERO
    ----------------------------------------------*/

    #calendario-escolar .numero {

        width: 24px;

        height: 24px;

        font-size: 11px;
    }


    /*----------------------------------------------
        EVENTOS
    ----------------------------------------------*/

    #calendario-escolar .eventos-dia {

        left: 2px;

        right: 2px;

        bottom: 2px;

        gap: 2px;
    }


    #calendario-escolar .evento-icono {

        width: 15px;

        height: 15px;
    }


    /*----------------------------------------------
        ACOTACIONES
    ----------------------------------------------*/

    #calendario-escolar .calendar-acotaciones {

        margin-top: 10px;

        margin-bottom: 14px;
    }


    #calendario-escolar .acotaciones-header {

        gap: 7px;

        margin-bottom: 6px;
    }


    #calendario-escolar .acotaciones-titulo {

        font-size: 14px;

        letter-spacing: .8px;
    }


    #calendario-escolar .acotaciones-tabla {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 4px 5px;
    }


    #calendario-escolar .acotacion-item {

        min-height: 29px;

        padding: 4px 5px;

        border-left-width: 2px;

        border-radius: 4px;
    }


    #calendario-escolar .acotacion-item .evento-icono {

        width: 14px;

        height: 14px;

        margin-right: 5px;

        border-radius: 3px;
    }


    #calendario-escolar .acotacion-texto {

        font-size: 9px;

        line-height: 1.1;
    }


    /*----------------------------------------------
        TOOLTIP
    ----------------------------------------------*/

    .tooltip-inner {

        max-width: 190px;

        font-size: 14px;

        padding: 6px 8px;
    }


    /*----------------------------------------------
        HOVER MÓVIL
    ----------------------------------------------*/

    #calendario-escolar .dia-con-evento:hover,
    #calendario-escolar .dia-con-evento:focus {

        transform: scale(1.02);
    }


    /*----------------------------------------------
        ENCABEZADO GENERAL
    ----------------------------------------------*/

    .cal-encabezado {

        display: flex;

        flex-direction: column;

        gap: 8px;

        padding-top: 5px;
    }


    .cal-encabezado-imagen {

        width: 100%;

        min-height: 110px;

        order: 1;
    }


    .cal-imagen-placeholder {

        width: 100%;

        height: 110px;
    }


    .cal-imagen-placeholder img {

        max-width: 90%;

        max-height: 110px;

        object-fit: contain;
    }


    .cal-encabezado-texto {

        width: 100%;

        order: 2;
    }


    .cal-titulo-principal {

        width: 100%;

        min-width: 0;

        padding: 7px 15px 8px;

        font-size: 29px;

        border-radius: 25px 0 0 25px;

        text-align: left;
    }


    .cal-ciclo {

        margin-top: 9px;

        font-size: 34px;
    }


    .cal-subtitulo {

        margin-top: 7px;

        font-size: 19px;

        line-height: 1.05;
    }

}




/*==========================================================
    MÓVILES MUY PEQUEÑOS
==========================================================*/

@media(max-width:380px) {

    #calendario-escolar .cal-navegacion {

        grid-template-columns:
            40px
            minmax(0,1fr)
            40px;

        gap: 5px;
    }


    #calendario-escolar .cal-btn-anterior,
    #calendario-escolar .cal-btn-siguiente {

        width: 40px;

        height: 36px;
    }



    #calendario-escolar .cal-btn-actual {

        height: 36px;

        font-size: 9px;

        padding: 0 5px;
    }


    #calendario-escolar .cal-btn-actual i {

        font-size: 9px;

        margin-right: 4px;
    }


    #calendario-escolar #cal-select-mes {

        min-width: 155px;

        height: 34px;

        font-size: 9px;
    }


    #calendario-escolar .cal-ver-mes {

        gap: 5px;
    }


    #calendario-escolar .cal-ver-mes label {

        font-size: 9px;
    }

}

















/*==========================================================
    NAVEGACIÓN DE MESES
==========================================================*/

#calendario-escolar .cal-navegacion {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 0 auto 18px;

    flex-wrap: wrap;
}


/*==========================================================
    BOTONES
==========================================================*/

#calendario-escolar .cal-btn {

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 0 15px;

    border: 1px solid rgba(232,116,19,.30);

    border-radius: 8px;

    background: #ffffff;

    color: #555555;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);

    transition:
        all .2s ease;
}


#calendario-escolar .cal-btn:hover {

    background: #FFF7F1;

    color: #E87413;

    border-color: #E87413;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(232,116,19,.14);
}


#calendario-escolar .cal-btn:active {

    transform: translateY(0);

}


/*==========================================================
    BOTÓN MES ACTUAL
==========================================================*/

#calendario-escolar .cal-btn-actual {

    background: #E87413;

    border-color: #E87413;

    color: #ffffff;
}


#calendario-escolar .cal-btn-actual:hover {

    background: #FF6600;

    border-color: #FF6600;

    color: #ffffff;
}


/*==========================================================
    BOTÓN DESHABILITADO
==========================================================*/

#calendario-escolar .cal-btn:disabled {

    opacity: .35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/*==========================================================
    SELECT — VER MES
==========================================================*/

#calendario-escolar .cal-ver-mes {

    height: 38px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding-left: 5px;
}


#calendario-escolar .cal-ver-mes label {

    margin: 0;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 11px;

    font-weight: 800;

    color: #555555;
}


#calendario-escolar #cal-select-mes {

    height: 38px;

    min-width: 175px;

    padding: 0 30px 0 10px;

    border: 1px solid rgba(232,116,19,.30);

    border-radius: 8px;

    background: #ffffff;

    color: #444444;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;

    outline: none;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.05);
}


#calendario-escolar #cal-select-mes:focus {

    border-color: #E87413;

    box-shadow:
        0 0 0 2px rgba(232,116,19,.12);
}


/*==========================================================
    VISOR DE MESES
==========================================================*/

#calendario-escolar .cal-grid-navegable {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
}


/*==========================================================
    CONTENEDOR DEL MES
==========================================================*/

#calendario-escolar .cal-mes-wrapper {

    display: none;

    min-width: 0;
}


/*
    Los tres meses visibles
*/

#calendario-escolar .cal-mes-wrapper.cal-visible {

    display: block;
}


/*==========================================================
    TRANSICIÓN
==========================================================*/

#calendario-escolar .cal-mes-wrapper.cal-visible
.cal-month {

    animation:
        calendarioEntrada .25s ease;
}


@keyframes calendarioEntrada {

    from {

        opacity: .25;

        transform: translateY(5px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:768px) {

    /*----------------------------------------------
        NAVEGACIÓN
    ----------------------------------------------*/

    #calendario-escolar .cal-navegacion {

        display: grid;

        grid-template-columns:
            42px
            1fr
            42px;

        gap: 6px;

        margin-bottom: 12px;
    }


    /*----------------------------------------------
        BOTONES
    ----------------------------------------------*/

    #calendario-escolar .cal-btn {

        height: 36px;

        padding: 0;

        border-radius: 7px;

        font-size: 0;
    }


    #calendario-escolar .cal-btn i {

        font-size: 13px;
    }


    /*----------------------------------------------
        MES ACTUAL
    ----------------------------------------------*/

    #calendario-escolar .cal-btn-actual {

        font-size: 10px;

        white-space: nowrap;

        padding: 0 7px;
    }


    #calendario-escolar .cal-btn-actual i {

        font-size: 11px;
    }


    /*----------------------------------------------
        SELECT
    ----------------------------------------------*/

    #calendario-escolar .cal-ver-mes {

        grid-column: 1 / -1;

        width: 100%;

        justify-content: center;

        padding: 0;

        margin-top: 2px;
    }


    #calendario-escolar .cal-ver-mes label {

        font-size: 10px;
    }


    #calendario-escolar #cal-select-mes {

        height: 34px;

        min-width: 165px;

        font-size: 10px;
    }


    /*----------------------------------------------
        SOLO UN MES EN MÓVIL
    ----------------------------------------------*/

    #calendario-escolar .cal-grid-navegable {

        display: block;

        width: 100%;
    }


    #calendario-escolar .cal-mes-wrapper.cal-visible {

        display: block;

        width: 100%;
    }

}


@media(max-width:380px) {

    #calendario-escolar .cal-navegacion {

        grid-template-columns:
            38px
            1fr
            38px;

        gap: 4px;
    }


    #calendario-escolar .cal-btn {

        height: 34px;
    }


    #calendario-escolar .cal-btn-actual {

        font-size: 9px;

        padding: 0 4px;
    }


    #calendario-escolar #cal-select-mes {

        min-width: 150px;

        height: 32px;

        font-size: 9px;
    }

}


















/*==========================================================
    FLECHAS DE NAVEGACIÓN
==========================================================*/

#calendario-escolar .flecha-cal {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    color: #E87413;

    pointer-events: none;
}


#calendario-escolar .texto-cal {

    display: inline;
}


/*==========================================================
    PC
==========================================================*/

@media(min-width:769px) {

    #calendario-escolar .cal-btn-anterior,
    #calendario-escolar .cal-btn-siguiente {

        gap: 7px;
    }


    #calendario-escolar .cal-btn-anterior .flecha-cal,
    #calendario-escolar .cal-btn-siguiente .flecha-cal {

        font-size: 20px;
    }

}


/*==========================================================
    MÓVIL
==========================================================*/

@media(max-width:768px) {

    #calendario-escolar .cal-btn-anterior,
    #calendario-escolar .cal-btn-siguiente {

        width: 46px;

        height: 39px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 0;

        position: relative;
    }


    /*----------------------------------------------
        OCULTAR TEXTO
    ----------------------------------------------*/

    #calendario-escolar .cal-btn-anterior .texto-cal,
    #calendario-escolar .cal-btn-siguiente .texto-cal {

        display: none !important;
    }


    /*----------------------------------------------
        FLECHA
    ----------------------------------------------*/

    #calendario-escolar .cal-btn-anterior .flecha-cal,
    #calendario-escolar .cal-btn-siguiente .flecha-cal {

        display: flex !important;

        width: 100%;

        height: 100%;

        align-items: center;

        justify-content: center;

        font-family: Arial, sans-serif;

        font-size: 31px;

        font-weight: 300;

        line-height: 1;

        color: #E87413;

        transform: none !important;

        filter: none !important;

        box-shadow: none !important;
    }


    /*----------------------------------------------
        HOVER
    ----------------------------------------------*/

    #calendario-escolar .cal-btn-anterior:hover .flecha-cal,
    #calendario-escolar .cal-btn-siguiente:hover .flecha-cal {

        transform: scale(1.10) !important;

        color: #E87413;
    }

}


/*==========================================================
    MÓVIL PEQUEÑO
==========================================================*/

@media(max-width:380px) {

    #calendario-escolar .cal-btn-anterior,
    #calendario-escolar .cal-btn-siguiente {

        width: 40px;

        height: 36px;
    }


    #calendario-escolar .cal-btn-anterior .flecha-cal,
    #calendario-escolar .cal-btn-siguiente .flecha-cal {

        font-size: 28px;
    }

}





/*==========================================================
    NAVEGACIÓN MÓVIL — VERSIÓN COMPACTA
==========================================================*/

@media (max-width: 768px) {

    /*======================================================
        CONTENEDOR
    ======================================================*/

    #calendario-escolar .cal-navegacion {

        width: 100% !important;

        display: grid !important;

        grid-template-columns: 38px minmax(0, 1fr) 38px !important;

        gap: 5px !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 auto 10px !important;

        padding: 0 !important;
    }


    /*======================================================
        TODOS LOS BOTONES
    ======================================================*/

    #calendario-escolar .cal-navegacion .cal-btn {

        box-sizing: border-box !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        height: 36px !important;

        min-height: 36px !important;

        padding: 0 !important;

        border-radius: 7px !important;
    }


    /*======================================================
        MES ANTERIOR
    ======================================================*/

    #calendario-escolar .cal-btn-anterior {

        width: 38px !important;

        min-width: 38px !important;

        font-size: 0 !important;

        overflow: hidden !important;
    }


    #calendario-escolar .cal-btn-anterior .texto-cal {

        display: none !important;
    }


    #calendario-escolar .cal-btn-anterior .flecha-cal {

        display: flex !important;

        width: 100% !important;

        height: 100% !important;

        align-items: center !important;

        justify-content: center !important;

        font-family: Arial, sans-serif !important;

        font-size: 27px !important;

        line-height: 36px !important;

        font-weight: 400 !important;

        color: #E87413 !important;

        visibility: visible !important;

        opacity: 1 !important;

        transform: none !important;

        position: static !important;

    }


    /*======================================================
        MES ACTUAL
    ======================================================*/

    #calendario-escolar .cal-btn-actual {

        width: 100% !important;

        min-width: 0 !important;

        height: 36px !important;

        min-height: 36px !important;

        padding: 0 5px !important;

        font-size: 9px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        background: #E87413 !important;

        border-color: #E87413 !important;

        color: #ffffff !important;
    }


    #calendario-escolar .cal-btn-actual i {

        display: inline-block !important;

        font-size: 9px !important;

        margin-right: 4px !important;

        flex-shrink: 0 !important;
    }


    #calendario-escolar .cal-btn-actual span {

        display: inline !important;

        font-size: 9px !important;

        white-space: nowrap !important;
    }


    /*======================================================
        MES SIGUIENTE
    ======================================================*/

    #calendario-escolar .cal-btn-siguiente {

        width: 38px !important;

        min-width: 38px !important;

        font-size: 0 !important;

        overflow: hidden !important;
    }


    #calendario-escolar .cal-btn-siguiente .texto-cal {

        display: none !important;
    }


    #calendario-escolar .cal-btn-siguiente .flecha-cal {

        display: flex !important;

        width: 100% !important;

        height: 100% !important;

        align-items: center !important;

        justify-content: center !important;

        font-family: Arial, sans-serif !important;

        font-size: 27px !important;

        line-height: 36px !important;

        font-weight: 400 !important;

        color: #E87413 !important;

        visibility: visible !important;

        opacity: 1 !important;

        transform: none !important;

        position: static !important;

    }


    /*======================================================
        HOVER
    ======================================================*/

    #calendario-escolar .cal-btn-anterior:hover,
    #calendario-escolar .cal-btn-siguiente:hover {

        background: #FFF7F1 !important;

        border-color: #E87413 !important;
    }


    /*======================================================
        DESHABILITADOS
    ======================================================*/

    #calendario-escolar .cal-btn-anterior:disabled,
    #calendario-escolar .cal-btn-siguiente:disabled {

        opacity: .35 !important;
    }


    /*======================================================
        VER MES
    ======================================================*/

    #calendario-escolar .cal-ver-mes {

        grid-column: 1 / -1 !important;

        width: 100% !important;

        height: 34px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        margin: 2px 0 0 !important;

        padding: 0 !important;
    }


    #calendario-escolar .cal-ver-mes label {

        margin: 0 !important;

        font-size: 9px !important;

        font-weight: 700 !important;

        color: #555555 !important;
    }


    #calendario-escolar #cal-select-mes {

        width: 170px !important;

        min-width: 170px !important;

        max-width: 170px !important;

        height: 34px !important;

        padding: 0 25px 0 10px !important;

        font-size: 9px !important;

        border-radius: 7px !important;
    }


    /*======================================================
        UN SOLO MES
    ======================================================*/

    #calendario-escolar .cal-grid-navegable {

        display: block !important;

        width: 100% !important;
    }


    #calendario-escolar .cal-mes-wrapper {

        display: none !important;
    }


    #calendario-escolar .cal-mes-wrapper.cal-visible {

        display: block !important;

        width: 100% !important;
    }

}


/*==========================================================
    MÓVILES MUY PEQUEÑOS
==========================================================*/

@media (max-width: 380px) {

    #calendario-escolar .cal-navegacion {

        grid-template-columns:
            34px
            minmax(0,1fr)
            34px !important;

        gap: 4px !important;
    }


    #calendario-escolar .cal-navegacion .cal-btn {

        height: 34px !important;

        min-height: 34px !important;
    }


    #calendario-escolar .cal-btn-anterior,
    #calendario-escolar .cal-btn-siguiente {

        width: 34px !important;

        min-width: 34px !important;
    }


    #calendario-escolar .cal-btn-anterior .flecha-cal,
    #calendario-escolar .cal-btn-siguiente .flecha-cal {

        font-size: 25px !important;

        line-height: 34px !important;
    }


    #calendario-escolar .cal-btn-actual {

        height: 34px !important;

        min-height: 34px !important;

        font-size: 8px !important;

        padding: 0 3px !important;
    }


    #calendario-escolar .cal-btn-actual i {

        font-size: 8px !important;

        margin-right: 3px !important;
    }


    #calendario-escolar .cal-btn-actual span {

        font-size: 8px !important;
    }


    #calendario-escolar .cal-ver-mes {

        gap: 5px !important;
    }


    #calendario-escolar .cal-ver-mes label {

        font-size: 8px !important;
    }


    #calendario-escolar #cal-select-mes {

        width: 150px !important;

        min-width: 150px !important;

        max-width: 150px !important;

        height: 32px !important;

        font-size: 8px !important;
    }

}











/* CONTENEDOR */
#calendario-escolar .cal-instrucciones {
    width: 100%;
    margin: 8px auto 16px;
}


/* BOTÓN */
#calendario-escolar .cal-instrucciones-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 12px;

    border: 0;
    background: transparent;

    color: #E87413;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: all .2s ease;
}


/* ICONO INFO */
#calendario-escolar .cal-instrucciones-toggle > i:first-child {
    font-size: 12px;
}


/* FLECHA */
#calendario-escolar .flecha-instrucciones {
    font-size: 9px;
    transition: transform .25s ease;
}


/* TEXTO OCULTAR INICIALMENTE */
#calendario-escolar .texto-ocultar {
    display: none;
}


/* CUANDO ESTÁ ABIERTO */
#calendario-escolar .cal-instrucciones-toggle[aria-expanded="true"] {
    color: #555;
}

#calendario-escolar .cal-instrucciones-toggle[aria-expanded="true"] .texto-mostrar {
    display: none;
}

#calendario-escolar .cal-instrucciones-toggle[aria-expanded="true"] .texto-ocultar {
    display: inline;
}

#calendario-escolar .cal-instrucciones-toggle[aria-expanded="true"] .flecha-instrucciones {
    transform: rotate(180deg);
}


/* HOVER */
#calendario-escolar .cal-instrucciones-toggle:hover {
    color: #FF6600;
}


/* CONTENIDO */
#calendario-escolar .cal-instrucciones-contenido {
    width: 100%;
}


/* MENSAJE */
#calendario-escolar .cal-instrucciones-mensaje {
    max-width: 850px;
    margin: 2px auto 0;
    padding: 9px 14px;

    border-left: 3px solid #FF6600;
    border-radius: 6px;

    background: #FFF8F3;

    color: #666;

    font-family: "Muli", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    box-shadow: 0 2px 7px rgba(0,0,0,.04);
}

#calendario-escolar .cal-instrucciones-mensaje strong {
    color: #555;
}