/* =====================================================
   MINIALFA
   CONSULTAR CHECADAS
===================================================== */


/* =====================================================
   SVG DEL COMPONENTE
===================================================== */

.checks-calendar-modal svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.checks-calendar-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1050;

    display:
        none;

    place-items:
        center;

    padding:
        16px;
}


.checks-calendar-modal.show,
.checks-calendar-modal.is-open,
.checks-calendar-modal.active,
.checks-calendar-modal[aria-hidden="false"] {
    display:
        grid;
}


/* =====================================================
   FONDO
===================================================== */

.checks-calendar-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(8, 25, 37, 0.72);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* =====================================================
   TARJETA PRINCIPAL
===================================================== */

.checks-calendar-card {
    position:
        relative;

    z-index:
        1;

    width:
        min(100%, 680px);

    max-height:
        calc(100vh - 32px);

    overflow-y:
        auto;

    overflow-x:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        rgba(214, 222, 229, 0.8);

    border-radius:
        18px;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.30);

    scrollbar-width:
        thin;

    scrollbar-gutter:
        stable;
}


.checks-calendar-modal.show
.checks-calendar-card {
    animation:
        checksCalendarIn
        0.22s ease-out;
}


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

.checks-calendar-header {
    padding:
        22px 24px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        #ffffff;

    border-bottom:
        1px solid
        var(--border);
}


.checks-calendar-header-content {
    min-width:
        0;
}


.checks-calendar-header-content > span {
    display:
        block;

    color:
        var(--accent-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.checks-calendar-header h2 {
    margin:
        4px 0;

    color:
        var(--brand-dark);

    font-size:
        1.34rem;

    line-height:
        1.2;
}


.checks-calendar-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.84rem;

    line-height:
        1.5;
}


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

.checks-calendar-close {
    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--brand);

    background:
        #ffffff;

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

    border-radius:
        11px;

    cursor:
        pointer;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


.checks-calendar-close:hover {
    color:
        var(--danger);

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


.checks-calendar-close:active {
    transform:
        scale(0.94);
}


/* =====================================================
   CONTENIDO
===================================================== */

.checks-calendar-content {
    padding:
        20px 24px 24px;
}


/* =====================================================
   NAVEGACIÓN DEL MES
===================================================== */

.calendar-navigation {
    margin-bottom:
        16px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;
}


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

.calendar-current-month {
    min-width:
        0;

    text-align:
        center;
}


.calendar-current-month span {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--muted);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.calendar-current-month strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--brand-dark);

    font-size:
        0.94rem;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =====================================================
   BOTONES DE NAVEGACIÓN
===================================================== */

.calendar-nav-button {
    width:
        44px;

    height:
        44px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        var(--brand);

    background:
        #ffffff;

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

    border-radius:
        10px;

    cursor:
        pointer;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


.calendar-nav-button:hover {
    color:
        var(--accent-dark);

    background:
        #edf9fa;

    border-color:
        #a7cfd1;

    transform:
        translateY(-1px);
}


.calendar-nav-button:active {
    transform:
        scale(0.94);
}


/* =====================================================
   CONTENEDOR DEL CALENDARIO
===================================================== */

.calendar-shell {
    padding:
        16px;

    background:
        var(--surface-soft);

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

    border-radius:
        14px;
}


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

.calendar-weekdays {
    display:
        grid;

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

    gap:
        7px;

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        0.69rem;

    font-weight:
        800;

    text-align:
        center;

    text-transform:
        uppercase;
}


.calendar-weekdays span {
    min-height:
        28px;

    display:
        grid;

    place-items:
        center;
}


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

.calendar-days {
    display:
        grid;

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

    gap:
        7px;
}


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

.calendar-days button {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    min-height:
        48px;

    aspect-ratio:
        1;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    font-size:
        0.8rem;

    font-weight:
        700;

    cursor:
        pointer;

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


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

.calendar-days button:hover {
    color:
        var(--accent-dark);

    background:
        #edf9fa;

    border-color:
        #9bcacc;

    transform:
        translateY(-1px);
}


/* =====================================================
   RANGO SELECCIONADO COMPLETO

   Incluye:
   - Inicio
   - Días intermedios
   - Final
===================================================== */

.calendar-days button.in-range,
.calendar-days button.selected,
.calendar-days button[aria-selected="true"],
.calendar-days button.range-start,
.calendar-days button.range-end {
    color:
        var(--accent-dark);

    background:
        #ddf1f2;

    border-color:
        #b7dfe1;

    box-shadow:
        inset 0 0 0 1px
        rgba(8, 122, 131, 0.04);
}


/* =====================================================
   EXTREMOS DEL RANGO
===================================================== */

.calendar-days button.range-start,
.calendar-days button.range-end,
.calendar-days button.selected {
    color:
        #ffffff;

    background:
        var(--accent-dark);

    border-color:
        var(--accent-dark);

    box-shadow:
        0 4px 10px
        rgba(8, 122, 131, 0.16);

    transform:
        translateY(-1px);
}


/* =====================================================
   ARIA SELECTED

   Mantiene compatibilidad con la lógica JS actual.
===================================================== */

.calendar-days button[aria-selected="true"] {
    color:
        #ffffff;

    background:
        var(--accent-dark);

    border-color:
        var(--accent-dark);
}


/* =====================================================
   HOVER DENTRO DEL RANGO
===================================================== */

.calendar-days button.in-range:hover {
    color:
        var(--accent-dark);

    background:
        #cce9eb;

    border-color:
        #91cacc;
}


/* =====================================================
   HOVER EN LOS EXTREMOS
===================================================== */

.calendar-days button.range-start:hover,
.calendar-days button.range-end:hover,
.calendar-days button.selected:hover,
.calendar-days button[aria-selected="true"]:hover {
    color:
        #ffffff;

    background:
        var(--accent);

    border-color:
        var(--accent);
}


/* =====================================================
   DÍAS DESHABILITADOS
===================================================== */

.calendar-days button:disabled {
    color:
        #a9b3bb;

    background:
        #f2f4f5;

    border-color:
        transparent;

    cursor:
        not-allowed;

    opacity:
        0.68;

    box-shadow:
        none;

    transform:
        none;
}


/* =====================================================
   FOCUS
===================================================== */

.calendar-days button:focus-visible,
.calendar-nav-button:focus-visible,
.checks-calendar-close:focus-visible,
.calendar-cancel-button:focus-visible,
.calendar-confirm-button:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


/* =====================================================
   AYUDA
===================================================== */

.calendar-help {
    margin-top:
        14px;

    padding:
        11px 13px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    color:
        var(--muted);

    background:
        #f8fafb;

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

    border-radius:
        10px;
}


.calendar-help svg {
    margin-top:
        1px;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);
}


.calendar-help span {
    font-size:
        0.73rem;

    line-height:
        1.5;
}


/* =====================================================
   PERIODO SELECCIONADO
===================================================== */

.calendar-selection {
    margin-top:
        14px;

    padding:
        13px 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #164e52;

    background:
        #eaf7f7;

    border:
        1px solid
        #c5e4e5;

    border-left:
        4px solid
        var(--accent);

    border-radius:
        10px;
}


/* =====================================================
   ICONO DE SELECCIÓN
===================================================== */

.calendar-selection-icon {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);

    background:
        rgba(255, 255, 255, 0.72);

    border-radius:
        9px;
}


.calendar-selection > div:last-child {
    min-width:
        0;
}


.calendar-selection span,
.calendar-selection strong {
    display:
        block;
}


.calendar-selection > div:last-child > span {
    color:
        #4f7679;

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}


.calendar-selection strong {
    margin-top:
        2px;

    overflow:
        hidden;

    color:
        #164e52;

    font-size:
        0.82rem;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   ACCIONES
===================================================== */

.checks-calendar-actions {
    padding:
        17px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    background:
        var(--surface-soft);

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


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

.calendar-cancel-button,
.calendar-confirm-button {
    min-height:
        43px;

    padding:
        9px 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        10px;

    font-size:
        0.81rem;

    font-weight:
        750;

    cursor:
        pointer;

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


/* =====================================================
   CANCELAR
===================================================== */

.calendar-cancel-button {
    color:
        var(--text);

    background:
        #ffffff;

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


.calendar-cancel-button:hover {
    background:
        #f4f7f8;

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* =====================================================
   CONSULTAR
===================================================== */

.calendar-confirm-button {
    color:
        #ffffff;

    background:
        var(--brand);

    border:
        1px solid
        var(--brand);
}


.calendar-confirm-button:not(:disabled):hover {
    background:
        var(--brand-dark);

    border-color:
        var(--brand-dark);

    box-shadow:
        0 6px 14px
        rgba(10, 40, 58, 0.16);

    transform:
        translateY(-1px);
}


.calendar-confirm-button:disabled {
    opacity:
        0.44;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;
}


.calendar-cancel-button:active,
.calendar-confirm-button:not(:disabled):active {
    transform:
        translateY(1px)
        scale(0.97);
}


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

@media (max-width: 720px) {

    .checks-calendar-card {
        width:
            min(100%, 620px);
    }


    .calendar-days button {
        min-height:
            44px;
    }

}


@media (max-width: 560px) {

    .checks-calendar-modal {
        padding:
            10px;
    }


    .checks-calendar-card {
        width:
            100%;

        max-height:
            calc(100vh - 20px);

        border-radius:
            15px;
    }


    .checks-calendar-header {
        padding:
            16px;
    }


    .checks-calendar-content {
        padding:
            15px;
    }


    .calendar-shell {
        padding:
            11px;
    }


    .calendar-days,
    .calendar-weekdays {
        gap:
            5px;
    }


    .calendar-days button {
        min-height:
            40px;

        border-radius:
            8px;
    }


    .checks-calendar-actions {
        padding:
            15px;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .calendar-cancel-button,
    .calendar-confirm-button {
        width:
            100%;
    }

}


@media (max-width: 420px) {

    .checks-calendar-header h2 {
        font-size:
            1.2rem;
    }


    .calendar-shell {
        padding:
            8px;
    }


    .calendar-days,
    .calendar-weekdays {
        gap:
            3px;
    }


    .calendar-days button {
        min-height:
            36px;

        font-size:
            0.72rem;
    }


    .calendar-navigation {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            40px;
    }


    .calendar-nav-button {
        width:
            40px;

        height:
            40px;
    }


    .calendar-help {
        padding:
            9px 10px;
    }


    .calendar-selection {
        padding:
            11px;
    }

}


@media (max-width: 360px) {

    .checks-calendar-actions {
        grid-template-columns:
            1fr;
    }


    .calendar-days button {
        min-height:
            34px;

        font-size:
            0.69rem;
    }

}


/* =====================================================
   ANIMACIÓN
===================================================== */

@keyframes checksCalendarIn {

    from {
        opacity:
            0;

        transform:
            translateY(12px)
            scale(0.98);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =====================================================
   MOVIMIENTO REDUCIDO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .checks-calendar-card,
    .calendar-nav-button,
    .calendar-days button,
    .checks-calendar-close,
    .calendar-cancel-button,
    .calendar-confirm-button {
        animation:
            none;

        transition:
            none;
    }

}