/* ==========================================================
   MARIPOSA CALENDAR
   DISEÑO PREMIUM — FUNDACIÓN MARIPOSA DEL DESIERTO
========================================================== */

:root{
    --mc-orange:#f58220;
    --mc-orange-dark:#df6f12;
    --mc-orange-soft:#fff4eb;
    --mc-dark:#213547;
    --mc-text:#45515d;
    --mc-muted:#7b8794;
    --mc-border:#e5e9ed;
    --mc-bg:#f7f8fa;
    --mc-white:#ffffff;
}


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

#mariposa-calendar{

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

    margin:35px auto 60px;

    padding:30px;

    background:var(--mc-white);

    border:1px solid rgba(33,53,71,.06);

    border-radius:18px;

    box-shadow:
        0 10px 35px rgba(33,53,71,.07),
        0 2px 8px rgba(33,53,71,.03);

    box-sizing:border-box;

}


/* ==========================================================
   FULLCALENDAR — GENERAL
========================================================== */

#mariposa-calendar .fc{

    font-family:inherit;

    color:var(--mc-dark);

}


/* ==========================================================
   BARRA SUPERIOR
========================================================== */

#mariposa-calendar .fc-header-toolbar{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}


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

#mariposa-calendar .fc-toolbar-title{

    color:var(--mc-dark);

    font-size:25px;

    font-weight:700;

    letter-spacing:-.4px;

    text-transform:none;

}


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

#mariposa-calendar .fc-button{

    border:1px solid var(--mc-border) !important;

    background:var(--mc-white) !important;

    color:var(--mc-dark) !important;

    font-size:12px;

    font-weight:600;

    padding:9px 13px;

    border-radius:8px !important;

    box-shadow:none !important;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


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

#mariposa-calendar .fc-button:hover{

    background:var(--mc-orange-soft) !important;

    border-color:var(--mc-orange) !important;

    color:var(--mc-orange-dark) !important;

    transform:translateY(-1px);

}


/* ==========================================================
   BOTÓN ACTIVO
========================================================== */

#mariposa-calendar .fc-button-active{

    background:var(--mc-orange) !important;

    border-color:var(--mc-orange) !important;

    color:#ffffff !important;

}


/* ==========================================================
   BOTÓN HOY
========================================================== */

#mariposa-calendar .fc-today-button{

    background:var(--mc-orange) !important;

    border-color:var(--mc-orange) !important;

    color:#ffffff !important;

}


/* ==========================================================
   BOTONES ANTERIOR / SIGUIENTE
========================================================== */

#mariposa-calendar .fc-prev-button,
#mariposa-calendar .fc-next-button{

    min-width:38px;

    padding:9px 11px;

}


/* ==========================================================
   TABLA
========================================================== */

#mariposa-calendar .fc-scrollgrid{

    border:1px solid var(--mc-border) !important;

    border-radius:12px;

    overflow:hidden;

}


/* ==========================================================
   ENCABEZADOS DE DÍAS
========================================================== */

#mariposa-calendar .fc-col-header-cell{

    background:#fafbfc;

    border-color:var(--mc-border) !important;

}


/* ==========================================================
   TEXTO DÍAS
========================================================== */

#mariposa-calendar .fc-col-header-cell-cushion{

    padding:13px 5px;

    color:#647383;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    text-decoration:none;

}


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

#mariposa-calendar .fc-daygrid-day{

    background:#ffffff;

    border-color:var(--mc-border) !important;

    transition:background .2s ease;

}


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

#mariposa-calendar .fc-daygrid-day:hover{

    background:#fffaf6;

}


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

#mariposa-calendar .fc-daygrid-day-number{

    padding:10px 11px;

    color:#617080;

    font-size:11px;

    font-weight:600;

    text-decoration:none;

}


/* ==========================================================
   DÍAS FUERA DEL MES
========================================================== */

#mariposa-calendar .fc-day-other{

    background:#fafbfc;

}

#mariposa-calendar .fc-day-other .fc-daygrid-day-number{

    color:#c5ccd3;

}


/* ==========================================================
   DÍA ACTUAL
========================================================== */

#mariposa-calendar .fc-day-today{

    background:#fffaf6 !important;

}


#mariposa-calendar .fc-day-today .fc-daygrid-day-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:27px;

    height:27px;

    padding:0;

    margin:7px;

    border-radius:50%;

    background:var(--mc-orange);

    color:#ffffff;

}


/* ==========================================================
   FINES DE SEMANA
========================================================== */

#mariposa-calendar .fc-day-sat,
#mariposa-calendar .fc-day-sun{

    background:#fcfcfd;

}


/* ==========================================================
   EVENTOS
========================================================== */

#mariposa-calendar .fc-event{

    border:none !important;

    border-radius:7px !important;

    margin:3px 5px !important;

    padding:5px 7px !important;

    background:var(--mc-orange) !important;

    color:#ffffff !important;

    box-shadow:
        0 3px 8px rgba(245,130,32,.20);

    cursor:pointer;

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

}


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

#mariposa-calendar .fc-event:hover{

    transform:translateY(-1px);

    box-shadow:
        0 5px 12px rgba(245,130,32,.30);

    opacity:.95;

}


/* ==========================================================
   TEXTO EVENTO
========================================================== */

#mariposa-calendar .fc-event-title{

    font-size:11px;

    font-weight:600;

    line-height:1.35;

}


/* ==========================================================
   HORA DEL EVENTO
========================================================== */

#mariposa-calendar .fc-event-time{

    font-size:10px;

    font-weight:700;

}


/* ==========================================================
   VISTA SEMANA / DÍA
========================================================== */

#mariposa-calendar .fc-timegrid-slot{

    border-color:var(--mc-border) !important;

}


#mariposa-calendar .fc-timegrid-axis{

    color:var(--mc-muted);

    font-size:10px;

}


/* ==========================================================
   VISTA AGENDA
========================================================== */

#mariposa-calendar .fc-list{

    border:1px solid var(--mc-border);

    border-radius:12px;

    overflow:hidden;

}


#mariposa-calendar .fc-list-day-cushion{

    background:#fafbfc;

}


#mariposa-calendar .fc-list-day-text{

    color:var(--mc-dark);

    font-weight:700;

}


#mariposa-calendar .fc-list-event{

    cursor:pointer;

}


#mariposa-calendar .fc-list-event:hover td{

    background:#fffaf6 !important;

}


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

@media(max-width:768px){

    #mariposa-calendar{

        width:calc(100% - 24px);

        margin:25px auto 40px;

        padding:16px;

        border-radius:14px;

    }


    #mariposa-calendar .fc-header-toolbar{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;

        margin-bottom:18px;

    }


    #mariposa-calendar .fc-toolbar-chunk{

        display:flex;

        align-items:center;

        justify-content:center;

    }


    #mariposa-calendar .fc-toolbar-title{

        font-size:20px;

        text-align:center;

    }


    #mariposa-calendar .fc-button{

        padding:8px 10px;

        font-size:11px;

    }


    #mariposa-calendar .fc-col-header-cell-cushion{

        font-size:8px;

        padding:10px 2px;

    }


    #mariposa-calendar .fc-daygrid-day-number{

        padding:7px;

        font-size:10px;

    }


    #mariposa-calendar .fc-event{

        margin:2px 3px !important;

        padding:4px 5px !important;

        border-radius:5px !important;

    }


    #mariposa-calendar .fc-event-title{

        font-size:9px;

    }


}


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

@media(max-width:480px){

    #mariposa-calendar{

        width:calc(100% - 16px);

        padding:10px;

    }


    #mariposa-calendar .fc-toolbar-title{

        font-size:18px;

    }


    #mariposa-calendar .fc-header-toolbar{

        gap:8px;

    }


    #mariposa-calendar .fc-button{

        padding:7px 8px;

        font-size:10px;

    }


    #mariposa-calendar .fc-col-header-cell-cushion{

        font-size:7px;

        letter-spacing:.03em;

    }


    #mariposa-calendar .fc-daygrid-day-number{

        font-size:9px;

    }

}


/* ==========================================================
   MODAL PREMIUM
========================================================== */

.mc-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .30s ease,
        visibility .30s ease;

    z-index:999999;

}


.mc-modal.mc-show{

    opacity:1;

    visibility:visible;

}


.mc-modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(18,30,41,.72);

    backdrop-filter:blur(6px);

}


.mc-modal-content{

    position:relative;

    width:95%;

    max-width:900px;

    max-height:90vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:20px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.28);

    animation:mcModal .28s ease;

    z-index:2;

    padding:0;

}


@keyframes mcModal{

    from{

        opacity:0;

        transform:translateY(25px) scale(.97);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ==========================================================
   CERRAR MODAL
========================================================== */

.mc-modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:rgba(33,53,71,.85);

    color:#ffffff;

    font-size:22px;

    line-height:44px;

    text-align:center;

    cursor:pointer;

    z-index:100;

    transition:
        background .2s ease,
        transform .2s ease;

}


.mc-modal-close:hover{

    background:var(--mc-orange);

    transform:rotate(90deg);

}


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

.mc-modal-image{

    width:100%;

    height:320px;

    background:#f3f5f7;

    overflow:hidden;

}


.mc-modal-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/* ==========================================================
   CUERPO MODAL
========================================================== */

.mc-modal-body{

    padding:35px 38px 40px;

}


#mc-modal-title{

    font-size:34px;

    color:var(--mc-dark);

    margin:0 0 16px;

    line-height:1.25;

    letter-spacing:-.5px;

}


.mc-modal-category{

    display:inline-flex;

    align-items:center;

    margin-bottom:20px;

    padding:7px 14px;

    background:var(--mc-orange);

    color:#ffffff;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

}


/* ==========================================================
   INFORMACIÓN
========================================================== */

#mc-modal-date,
#mc-modal-location,
#mc-modal-speaker{

    margin-bottom:12px;

    color:#56616d;

    font-size:14px;

    line-height:1.7;

}


#mc-modal-date strong,
#mc-modal-location strong,
#mc-modal-speaker strong{

    color:var(--mc-dark);

}


/* ==========================================================
   DESCRIPCIÓN
========================================================== */

#mc-modal-description{

    margin-top:25px;

    padding-top:24px;

    border-top:1px solid var(--mc-border);

    line-height:1.8;

    color:#4c5660;

    font-size:15px;

}


#mc-modal-description img{

    width:100%;

    border-radius:12px;

    margin-bottom:20px;

}


/* ==========================================================
   BADGES
========================================================== */

.mc-modal-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:20px 0;

}


.mc-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 12px;

    border-radius:999px;

    background:#f1f4f6;

    color:var(--mc-dark);

    border:1px solid #e1e6ea;

    font-size:12px;

    font-weight:600;

}


.mc-badge.virtual{

    background:#e9f8ef;

    color:#18794e;

    border-color:#c5ead2;

}


.mc-badge.presential{

    background:#eef4ff;

    color:#2764c7;

    border-color:#d4e2fb;

}


.mc-badge.featured{

    background:#fff6df;

    color:#946800;

    border-color:#f7e3a7;

}


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

.mc-modal-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;

}


.mc-modal-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 20px;

    background:var(--mc-orange);

    color:#ffffff !important;

    border:1px solid var(--mc-orange);

    border-radius:9px;

    text-decoration:none !important;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.mc-modal-button:hover{

    background:var(--mc-orange-dark);

    color:#ffffff !important;

    transform:translateY(-1px);

    box-shadow:
        0 5px 14px rgba(245,130,32,.22);

}


/* ==========================================================
   SCROLLBAR MODAL
========================================================== */

.mc-modal-content::-webkit-scrollbar{

    width:7px;

}


.mc-modal-content::-webkit-scrollbar-track{

    background:#f5f6f7;

}


.mc-modal-content::-webkit-scrollbar-thumb{

    background:#cbd2d8;

    border-radius:20px;

}


.mc-modal-content::-webkit-scrollbar-thumb:hover{

    background:var(--mc-orange);

}


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

@media(max-width:768px){

    .mc-modal-content{

        width:94vw;

        max-height:94vh;

        border-radius:16px;

    }


    .mc-modal-image{

        height:220px;

    }


    .mc-modal-body{

        padding:24px 20px 28px;

    }


    #mc-modal-title{

        font-size:27px;

    }


    .mc-modal-actions{

        flex-direction:column;

    }


    .mc-modal-button{

        width:100%;

    }


    .mc-modal-close{

        top:12px;

        right:12px;

        width:40px;

        height:40px;

        line-height:40px;

        font-size:20px;

    }

}


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

@media(max-width:480px){

    .mc-modal-image{

        height:190px;

    }


    #mc-modal-title{

        font-size:24px;

    }


    #mc-modal-description{

        font-size:14px;

    }

 /* ==========================================================
   AJUSTE DE LEGIBILIDAD — TIPOGRAFÍA
========================================================== */

/* Título del mes */
#mariposa-calendar .fc-toolbar-title{
    font-size:28px;
}

/* Botones */
#mariposa-calendar .fc-button{
    font-size:13px;
    padding:10px 14px;
}

/* Días de la semana */
#mariposa-calendar .fc-col-header-cell-cushion{
    font-size:12px;
    padding:14px 6px;
    letter-spacing:.06em;
}

/* Números de los días */
#mariposa-calendar .fc-daygrid-day-number{
    font-size:13px;
    padding:11px 12px;
}

/* Eventos */
#mariposa-calendar .fc-event-title{
    font-size:12px;
    line-height:1.4;
}

/* Hora de los eventos */
#mariposa-calendar .fc-event-time{
    font-size:11px;
}

/* Vista agenda */
#mariposa-calendar .fc-list-day-text,
#mariposa-calendar .fc-list-day-side-text{
    font-size:14px;
}

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

@media(max-width:768px){

    #mariposa-calendar .fc-toolbar-title{
        font-size:22px;
    }

    #mariposa-calendar .fc-button{
        font-size:12px;
        padding:9px 11px;
    }

    #mariposa-calendar .fc-col-header-cell-cushion{
        font-size:10px;
    }

    #mariposa-calendar .fc-daygrid-day-number{
        font-size:12px;
    }

    #mariposa-calendar .fc-event-title{
        font-size:10px;
    }

} 
  
  
  
  
}