/* FONDO GENERAL */

body{
    background:#eef3f8;
    font-family:'Segoe UI',sans-serif;
}

/* HEADER */
header{
    display:flex;
    background:white;
    justify-content:space-around;
    align-items:center;
    padding:20px;      
    border-bottom: 1px solid #e5edf5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}
.headerTitulo{
    width: 800px;
}
.headerColegio{
    background:white;
    border-radius:14px;
    padding:15px 20px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
/* TITULO PRINCIPAL */

.headerColegio h1{
    font-size:36px;
    color:#1e3a5f;
    font-weight:700;
    line-height:1.2;
    margin-bottom:10px;
    text-align:center;
}

/* SUBTITULO */
.headerColegio p{
    font-size:18px;
    color:#4a607a;
    text-align:center;
}
/* CALENDARIO */

#calendar{
    background:white;
    border-radius:14px;
    padding:15px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* TÍTULO */

.fc-toolbar-title{
    font-size:22px !important;
    font-weight:600;
    color:#1e3a5f;
    text-transform:capitalize;
}

/* BOTONES */
.fc-button{
    background:#2d5baf !important;
    border:none !important;
    border-radius:8px !important;
    font-size:13px !important;
    padding:6px 10px !important;
    transition:0.2s;
}

.fc-button:hover{
    background:#24498d !important;
}

/* CABECERA DÍAS */

.fc-col-header-cell{
    background:#f5f8fc;
    padding:10px 0 !important;
    font-size:14px;
    color:#1e3a5f;
    border-color:#dde6f0 !important;
}

/* HORARIOS */
.fc-timegrid-axis{
    width:65px !important;
    font-size:13px;
    color:#4a607a;
}

/* FILAS MÁS CHICAS */
.fc-timegrid-slot{
    height:45px !important;
}

/* EVENTOS */

.fc-event{
    width: 50px;
    height: 30px !important;
    border:none !important;
    border-radius:8px !important;
    padding:3px !important;
    font-size:13px !important;
    font-weight:600;
    display:flex;
    justify-content:center;
    /* align-items:center; */
    box-shadow:none !important;
}

/* SOLO NOMBRE */
.fc-event-time{
    display:none !important;
}

/* LABORATORIO */

.fc-event[style*="red"]{
    background:#2d5baf !important;
}

/* CARRITO */

.fc-event[style*="orange"]{
    background:#6fa8ff !important;
    color:#16345f !important;
}

/* LÍNEAS */

.fc-theme-standard td,
.fc-theme-standard th{
    border-color:#e5edf5 !important;
}

/* HOY */

.fc-day-today{
    background:#f0f6ff !important;
}
.fc-view-harness{
    height: 440px !important;
}
/* MODAL */

.modal{
    display:none;
    position:fixed;
    z-index:999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    justify-content:center;
    align-items:center;
}

.modal-content{
    background:white;
    width:400px;
    padding:25px;
    border-radius:12px;
    position:relative;
}

.modal-content h2{
    margin-bottom:20px;
    color:#1e3a5f;
}

.modal-content input,
.modal-content select{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
}

.modal-content button{
    width:100%;
    padding:12px;
    background:#1e3a5f;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.modal-content button:hover{
    background:#294b77;
}

.cerrar{
    position:absolute;
    right:15px;
    top:10px;
    font-size:24px;
    cursor:pointer;
}

.infoHorario{
    background:#eef3f8;
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
}
/*MESAJES */
.mensajeError{
    color:#d32f2f;
    font-weight:bold;
    margin-top:8px;
    display:none;
}

/* BOTÓN DESHABILITADO */

button:disabled{
    cursor:not-allowed;
}
/* PROYECTOR */

.fc-event[style*="green"]{

    background:#5bbd8a !important;

    color:white !important;
}
/* SELECT RECURSOS */
.selectRecurso{
    font-weight:600;
    transition:0.2s ease;
}

/* LABORATORIO */

.select-laboratorio{
    background:#2d5baf !important;
    color:white !important;
}

/* CARRITO */

.select-carrito{
    background:#f96e29 !important;
    color:white !important;
}

/* PROYECTOR */
.select-proyector{
    background:#5bbd8a !important;
    color:white !important;
}

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

@media (max-width: 1024px){

    body{
        padding:10px;
    }

    header{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .headerTitulo{
        width:100%;
    }

    #calendar{
        padding:10px;
        overflow-x:auto;
    }

    .fc-toolbar{
        flex-direction:column;
        gap:10px;
    }

    .fc-toolbar-title{
        font-size:18px !important;
        text-align:center;
    }

    .fc-button{
        font-size:12px !important;
        padding:5px 8px !important;
    }

    .fc-col-header-cell{
        font-size:12px;
    }

    .fc-timegrid-axis{
        width:55px !important;
        font-size:11px;
    }

    .fc-timegrid-slot{
        height:auto !important;
    }

    .fc-event{
        width:auto;
        min-height:28px;
        font-size:11px !important;
        border-radius:6px !important;
    }

    .modal-content{
        width:90%;
        max-width:400px;
    }
}

@media (max-width:768px){

    body{
        padding:10px;
        background:#eef3f8;
    }

    /* HEADER */
    .headerColegio{
        padding:20px 15px;
        border-radius:18px;
        margin-bottom:15px;
    }

    .logo{
        width:70px;
        height:70px;
        margin-bottom:10px;
    }

    .headerColegio h1{
        font-size:24px;
        line-height:1.2;
        margin-bottom:10px;
        text-align:center;
    }
    .headerColegio p{
        font-size:14px;
        text-align:center;
    }

    /* CALENDARIO */
    #calendar{
        padding:10px;
        border-radius:18px;
        overflow-x:auto;
    }

    /* TOOLBAR */
    .fc-toolbar{
        display:flex !important;
        flex-direction:column;
        gap:10px;
        align-items:center !important;
    }

    .fc-toolbar-title{
        font-size:18px !important;
        text-align:center;
    }

    /* BOTONES */
    .fc-button{
        font-size:12px !important;
        padding:8px 12px !important;
        border-radius:10px !important;
    }

    /* DÍAS */

    .fc-col-header-cell{
        font-size:12px !important;
        padding:8px 2px !important;
    }

    /* HORAS */

    .fc-timegrid-axis{
        width:60px !important;
        font-size:14px;
    }

    /* CELDAS */
    .fc-timegrid-slot{
        height:65px !important;
    }

    /* EVENTOS */
   .fc-event{
        min-height:45px !important;
        font-size:11px !important;
        border-radius:10px !important;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    /* SCROLL HORIZONTAL */

    .fc-scroller{
        overflow:auto !important;
    }

    /* MODAL */

    .modal-content{
        width:95% !important;
        max-width:95% !important;
        padding:20px;
        border-radius:18px;
    }

    .modal-content input,
    .modal-content select{
        font-size:16px;
        padding:12px;
    }

    .modal-content button{
        padding:14px;
        font-size:16px;
    }
}
@media (min-width:320px) and (max-width: 480px){

    .headerColegio {
        display: none;
    }

    .headerColegio p{
        font-size:11px;
    }
    .headerTitulo h1{
        font-size:16px;
    }
    .fc-toolbar-title{
        font-size:14px !important;
    }
    .fc-button-group .fc-button{
        font-size: 8px !important;
    }
    .fc-toolbar-chunck .fc-toolbar-title{
        display: none;
    }
    .fc-event{
        height: 30px !important;
    }
}
/* =========================
   ANIMACIONES
========================= */

/* CALENDARIO */

#calendar{

    animation:fadeIn 0.5s ease;
}

/* EVENTOS */

.fc-event{
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.fc-event:hover{

    transform:scale(1.03);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* BOTONES */

.fc-button{
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.fc-button:hover{
    transform:translateY(-1px);
}

/* MODAL */
.modal-content{
    animation:modalEntrada 0.25s ease;
}

/* KEYFRAMES */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes modalEntrada{

    from{
        opacity:0;
        transform:scale(0.95);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}
/* =========================
   MOBILE PRO
========================= */