/* =====================================================
   MINIALFA
   PERMISOS - VACACIONES
===================================================== */


/* =====================================================
   SVG
===================================================== */

.vacation-modal svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.vacation-modal {
    backdrop-filter:
        blur(3px);

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


.vacation-backdrop {
    background:
        rgba(8, 25, 37, 0.76);
}


/* =====================================================
   VENTANA
===================================================== */

.vacation-window {
    width:
        min(100%, 720px);

    max-height:
        min(
            92vh,
            850px
        );

    overflow-y:
        auto;

    background:
        #ffffff;

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

    border-radius:
        17px;

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

    scrollbar-width:
        thin;
}


/* =====================================================
   ANIMACIÓN DE APERTURA
===================================================== */

.vacation-modal.show
.vacation-window,
.vacation-modal.is-open
.vacation-window,
.vacation-modal[aria-hidden="false"]
.vacation-window {
    animation:
        vacationWindowIn
        0.22s ease-out;
}


@keyframes vacationWindowIn {

    from {
        opacity:
            0;

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

    to {
        opacity:
            1;

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

}


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

.vacation-header {
    padding:
        18px 20px;

    align-items:
        flex-start;

    background:
        #ffffff;
}


.vacation-header-content {
    min-width:
        0;
}


.vacation-header-content > span {
    display:
        block;

    color:
        var(--accent-dark);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.vacation-header h2 {
    margin:
        4px 0;

    color:
        var(--brand-dark);

    font-size:
        1.28rem;

    font-weight:
        800;

    line-height:
        1.2;
}


.vacation-header p {
    max-width:
        560px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.8rem;

    line-height:
        1.5;
}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.vacation-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:
        10px;

    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;
}


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    box-shadow:
        0 5px 12px
        rgba(196, 76, 67, 0.10);

    transform:
        translateY(-1px);
}


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


/* =====================================================
   SECCIONES
===================================================== */

.vacation-section {
    padding:
        16px 20px;
}


/* =====================================================
   TÍTULO DE SECCIÓN
===================================================== */

.vacation-section-title {
    margin-bottom:
        11px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;
}


.vacation-section-title > div {
    min-width:
        0;
}


.vacation-section-title > div > span,
.vacation-section-title > div > strong {
    display:
        block;
}


.vacation-section-title > div > span {
    margin-bottom:
        2px;

    color:
        var(--accent-dark);

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


.vacation-section-title > div > strong {
    color:
        var(--brand-dark);

    font-size:
        0.84rem;

    font-weight:
        800;
}


.vacation-section-title > small {
    color:
        #687782;

    font-size:
        0.65rem;

    font-weight:
        650;

    text-align:
        right;
}


/* =====================================================
   BÚSQUEDA
===================================================== */

.vacation-search-box input {
    min-height:
        42px;

    color:
        var(--text);

    font-size:
        0.8rem;

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


.vacation-search-box input::placeholder {
    color:
        #7d8992;
}


.vacation-search-box input:focus {
    outline:
        none;

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(8, 122, 131, 0.10);
}


/* =====================================================
   DROPDOWN DE EMPLEADOS
===================================================== */

.vacation-employee-dropdown {
    display:
        none;
}


.vacation-employee-dropdown.show {
    display:
        block;

    animation:
        vacationDropdownIn
        0.16s ease-out;
}


@keyframes vacationDropdownIn {

    from {
        opacity:
            0;

        transform:
            translateY(-4px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   OPCIONES DE EMPLEADO
===================================================== */

.vacation-employee-option {
    cursor:
        pointer;

    transition:
        background-color 0.14s ease;
}


.vacation-employee-option:last-of-type {
    border-bottom:
        0;
}


.vacation-option-data {
    min-width:
        0;
}


.vacation-option-data strong,
.vacation-option-data small {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.vacation-option-data strong {
    color:
        var(--brand-dark);

    font-size:
        0.78rem;
}


.vacation-option-data small {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.68rem;
}


/* =====================================================
   EMPLEADO SELECCIONADO
===================================================== */

.vacation-selected-employee[hidden] {
    display:
        none !important;
}


.vacation-selected-employee {
    padding:
        10px 11px;
}


.vacation-selected-data {
    min-width:
        0;
}


.vacation-selected-data span,
.vacation-selected-data strong,
.vacation-selected-data small {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.vacation-selected-data span {
    color:
        var(--muted);

    font-size:
        0.6rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.vacation-selected-data strong {
    margin-top:
        1px;

    color:
        var(--brand-dark);

    font-size:
        0.79rem;
}


.vacation-selected-data small {
    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        0.67rem;
}


/* =====================================================
   CHECK EMPLEADO
===================================================== */

.vacation-selected-check {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    background:
        var(--success);

    border-radius:
        50%;
}


.vacation-selected-check svg {
    stroke-width:
        2.1;
}


/* =====================================================
   CALENDARIO
===================================================== */

.vacation-calendar {
    padding:
        11px 12px 12px;

    overflow:
        hidden;

    background:
        #f7f9fa;

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

    border-radius:
        11px;
}


/* =====================================================
   CABECERA DEL CALENDARIO
===================================================== */

.vacation-calendar-header {
    min-height:
        37px;

    margin-bottom:
        8px;
}


.vacation-calendar-navigation {
    min-width:
        0;
}


.vacation-calendar-navigation > strong {
    min-width:
        130px;

    color:
        var(--brand-dark);

    font-size:
        0.72rem;

    font-weight:
        800;

    text-align:
        center;
}


/* =====================================================
   NAVEGACIÓN DEL CALENDARIO
===================================================== */

.vacation-calendar-navigation button,
.vacation-today {
    min-width:
        36px;

    min-height:
        36px;

    padding:
        5px 8px;

    color:
        var(--brand);

    background:
        #ffffff;

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

    border-radius:
        8px;

    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;
}


.vacation-calendar-navigation button:hover,
.vacation-today:hover {
    color:
        #ffffff;

    background:
        var(--brand);

    border-color:
        var(--brand);

    box-shadow:
        0 4px 10px
        rgba(10, 40, 58, 0.10);

    transform:
        translateY(-1px);
}


.vacation-calendar-navigation button:active,
.vacation-today:active {
    transform:
        scale(0.95);
}


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

.vacation-weekdays {
    margin-bottom:
        4px;

    gap:
        4px;
}


.vacation-weekdays span {
    padding:
        3px 0;

    color:
        #62717c;

    font-size:
        0.59rem;

    font-weight:
        800;
}


/* =====================================================
   GRID DE DÍAS
===================================================== */

.vacation-calendar-days {
    gap:
        4px;
}


/*
   IMPORTANTE:
   anulamos el aspect-ratio:1 del CSS compartido.

   Esa regla era la responsable de que cada día
   se convirtiera en un cuadro enorme.
*/

.vacation-calendar-days button {
    width:
        100%;

    height:
        39px;

    min-height:
        39px;

    aspect-ratio:
        auto;

    padding:
        0;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        transparent;

    border-radius:
        7px;

    font-size:
        0.73rem;

    cursor:
        pointer;

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


.vacation-calendar-days button:hover:not(:disabled) {
    color:
        var(--brand-dark);

    background:
        #eef8f8;

    border-color:
        #a9d4d7;

    transform:
        translateY(-1px);
}


/* =====================================================
   HOY
===================================================== */

.vacation-day.today:not(.selected) {
    color:
        var(--accent-dark);

    background:
        #e7f5f5;

    border-color:
        #acd8da;

    font-weight:
        800;
}


/* =====================================================
   FIN DE SEMANA
===================================================== */

.vacation-day.weekend:not(.selected) {
    color:
        #7a8790;

    background:
        #f1f4f5;
}


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

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

    background:
        var(--brand);

    border-color:
        var(--brand);

    box-shadow:
        0 3px 8px
        rgba(18, 59, 82, 0.12);

    font-weight:
        800;
}


/* =====================================================
   MODO CONSULTA
===================================================== */

.vacation-day:disabled {
    cursor:
        default;

    opacity:
        1;
}


/* =====================================================
   ESPACIOS VACÍOS
===================================================== */

.vacation-day.empty {
    height:
        39px;

    min-height:
        39px;
}


/* =====================================================
   RESUMEN DEL PERIODO
===================================================== */

.vacation-period-summary {
    margin:
        14px 20px;

    padding:
        12px 13px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    background:
        #f2f7fa;

    border:
        1px solid
        #c8dbe6;

    border-radius:
        10px;
}


.vacation-period-main {
    min-width:
        0;
}


.vacation-period-main span,
.vacation-period-main strong,
.vacation-period-main small {
    display:
        block;
}


.vacation-period-main > span {
    color:
        var(--muted);

    font-size:
        0.61rem;

    font-weight:
        750;

    text-transform:
        uppercase;
}


.vacation-period-main > strong {
    margin-top:
        2px;

    color:
        var(--brand-dark);

    font-size:
        0.8rem;
}


/* =====================================================
   CONTADOR DE DÍAS
===================================================== */

.vacation-days-result {
    min-width:
        88px;

    padding:
        7px 10px;

    color:
        #ffffff;

    background:
        var(--brand);

    border-radius:
        8px;

    text-align:
        center;
}


.vacation-days-result strong {
    display:
        block;

    font-size:
        1.15rem;

    line-height:
        1.1;
}


.vacation-days-result span {
    display:
        block;

    margin-top:
        2px;

    font-size:
        0.59rem;

    line-height:
        1.2;
}


/* =====================================================
   DÍAS OMITIDOS
===================================================== */

.vacation-skipped {
    margin-top:
        5px;

    color:
        var(--warning);

    font-size:
        0.67rem;

    font-weight:
        650;
}


/* =====================================================
   DÍAS SELECCIONADOS
===================================================== */

.vacation-selected-days {
    margin:
        0 20px 15px;

    padding:
        12px 13px;

    background:
        #ffffff;

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

    border-radius:
        10px;
}


.vacation-selected-days-header {
    margin-bottom:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.vacation-selected-days-header > span {
    color:
        var(--brand-dark);

    font-size:
        0.74rem;

    font-weight:
        800;
}


.vacation-selected-days-header > small {
    color:
        var(--muted);

    font-size:
        0.62rem;
}


/* =====================================================
   CHIPS
===================================================== */

.vacation-selected-days-list {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.vacation-day-chip {
    padding:
        4px 7px;

    color:
        #1849a9;

    background:
        #e8f2ff;

    border:
        1px solid
        #d0e1f8;

    border-radius:
        999px;

    font-size:
        0.66rem;

    font-weight:
        750;
}


.vacation-no-days {
    padding:
        0 !important;

    color:
        var(--muted) !important;

    background:
        transparent !important;

    border:
        0 !important;

    font-size:
        0.7rem;

    font-weight:
        500;
}


/* =====================================================
   OBSERVACIONES
===================================================== */

.vacation-observation {
    min-height:
        82px;

    color:
        var(--text);

    font-size:
        0.77rem;

    line-height:
        1.45;

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


.vacation-observation::placeholder {
    color:
        #82909a;
}


.vacation-observation:focus {
    outline:
        none;

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(8, 122, 131, 0.10);
}


.vacation-observation:disabled {
    color:
        #59666f;

    background:
        #f6f8f9;

    cursor:
        default;
}


/* =====================================================
   CONTADOR DE TEXTO
===================================================== */

.vacation-counter {
    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        0.65rem;

    text-align:
        right;
}


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

.vacation-info {
    margin:
        14px 20px;

    padding:
        11px 12px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        #315e61;

    background:
        #eef8f8;

    border:
        1px solid
        #d1e6e7;

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

    border-radius:
        8px;
}


.vacation-info svg {
    margin-top:
        1px;

    flex:
        0 0 auto;

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


.vacation-info p {
    margin:
        0;

    font-size:
        0.7rem;

    line-height:
        1.5;
}


/* =====================================================
   GUARDADO
===================================================== */

.vacation-saved[hidden] {
    display:
        none !important;
}


.vacation-saved {
    margin:
        0 20px 14px;

    padding:
        11px 12px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;
}


.vacation-saved svg {
    margin-top:
        1px;

    flex:
        0 0 auto;
}


.vacation-saved span,
.vacation-saved strong {
    display:
        block;
}


.vacation-saved span {
    font-size:
        0.68rem;
}


.vacation-saved strong {
    margin-top:
        2px;

    color:
        #286c4b;

    font-size:
        0.72rem;
}


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

.vacation-actions {
    padding:
        14px 20px;
}


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

.vacation-secondary,
.vacation-primary,
.vacation-document {
    min-height:
        41px;

    padding:
        8px 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        9px;

    font-size:
        0.76rem;

    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
===================================================== */

.vacation-secondary:hover {
    background:
        #f4f7f8;

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* =====================================================
   REGISTRAR
===================================================== */

.vacation-primary:not(:disabled):hover {
    background:
        var(--brand-dark);

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

    transform:
        translateY(-1px);
}


.vacation-primary:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;
}


/* =====================================================
   DOCUMENTO
===================================================== */

.vacation-document:hover {
    color:
        #ffffff;

    background:
        var(--success);

    border-color:
        var(--success);

    transform:
        translateY(-1px);
}


/* =====================================================
   PRESIONAR
===================================================== */

.vacation-secondary:active,
.vacation-primary:not(:disabled):active,
.vacation-document:active {
    transform:
        translateY(1px)
        scale(0.97);
}


/* =====================================================
   ERRORES
===================================================== */

.vacation-error[hidden] {
    display:
        none !important;
}


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

.vacation-close:focus-visible,
.vacation-calendar-navigation button:focus-visible,
.vacation-today:focus-visible,
.vacation-day:focus-visible,
.vacation-employee-option:focus-visible,
.vacation-secondary:focus-visible,
.vacation-primary:focus-visible,
.vacation-document:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


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

@media (max-width: 600px) {

    .vacation-window {
        max-height:
            calc(100vh - 16px);
    }


    .vacation-calendar-header {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .vacation-calendar-navigation {
        justify-content:
            space-between;
    }


    .vacation-calendar-navigation > strong {
        min-width:
            0;

        flex:
            1;
    }


    .vacation-today {
        align-self:
            flex-start;
    }


    .vacation-selected-days-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }

}


@media (max-width: 500px) {

    .vacation-period-summary {
        margin-inline:
            15px;

        grid-template-columns:
            1fr;
    }


    .vacation-days-result {
        justify-self:
            start;
    }


    .vacation-selected-days,
    .vacation-info,
    .vacation-saved {
        margin-inline:
            15px;
    }

}


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

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

    .vacation-window,
    .vacation-employee-dropdown,
    .vacation-close,
    .vacation-day,
    .vacation-calendar-navigation button,
    .vacation-today,
    .vacation-secondary,
    .vacation-primary,
    .vacation-document {
        animation:
            none;

        transition:
            none;
    }

}