/* =====================================================
   MINIALFA
   PERMISOS - INCAPACIDADES
===================================================== */


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

.disability-modal svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

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

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


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


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

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

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

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

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


@keyframes disabilityWindowIn {

    from {
        opacity:
            0;

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

    to {
        opacity:
            1;

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

}


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

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

    background:
        #ffffff;
}


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


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

    color:
        var(--danger);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        1.28rem;

    font-weight:
        800;

    line-height:
        1.2;
}


.disability-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.8rem;

    line-height:
        1.5;
}


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

.disability-close {
    width:
        42px;

    height:
        42px;

    padding:
        0;

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


.disability-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);
}


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


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

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


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

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

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;
}


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


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


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

    color:
        var(--danger);

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


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

    font-size:
        0.84rem;

    font-weight:
        800;
}


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

    font-size:
        0.65rem;

    font-weight:
        650;

    text-align:
        right;
}


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

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

    color:
        var(--text);

    font-size:
        0.8rem;

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


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

    border-color:
        var(--danger);

    box-shadow:
        0 0 0 3px
        rgba(196, 76, 67, 0.10);
}


/* =====================================================
   DROPDOWN
===================================================== */

.disability-employee-options {
    display:
        none;
}


.disability-employee-options.show {
    display:
        block;

    animation:
        disabilityDropdownIn
        0.16s ease-out;
}


@keyframes disabilityDropdownIn {

    from {
        opacity:
            0;

        transform:
            translateY(-4px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


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

.disability-employee-option {
    cursor:
        pointer;

    transition:
        background-color 0.14s ease;
}


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


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

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


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

    font-size:
        0.78rem;
}


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

    color:
        var(--muted);

    font-size:
        0.68rem;
}


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

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


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


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


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

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


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

    font-size:
        0.6rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        0.79rem;
}


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

    color:
        var(--muted);

    font-size:
        0.67rem;
}


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

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

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    background:
        var(--success);

    border-radius:
        50%;
}


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


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

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

    overflow:
        hidden;

    background:
        #f7f9fa;

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

    border-radius:
        11px;
}


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

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

    margin-bottom:
        8px;
}


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

    color:
        var(--brand-dark);

    font-size:
        0.72rem;

    font-weight:
        800;

    text-align:
        center;
}


/* =====================================================
   NAVEGACIÓN
===================================================== */

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

    min-height:
        36px;

    padding:
        5px 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;
}


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

    background:
        var(--danger);

    border-color:
        var(--danger);

    box-shadow:
        0 4px 10px
        rgba(196, 76, 67, 0.12);

    transform:
        translateY(-1px);
}


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


/* =====================================================
   SEMANA
===================================================== */

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

    gap:
        4px;
}


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

    color:
        #62717c;

    font-size:
        0.59rem;

    font-weight:
        800;
}


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

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


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


.disability-calendar-days button:hover:not(:disabled) {
    color:
        var(--danger);

    background:
        #fff3f1;

    border-color:
        #e8b9b5;

    transform:
        translateY(-1px);
}


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

.disability-day.today:not(.selected-start):not(.selected-end) {
    color:
        var(--danger);

    background:
        #fff2f0;

    border-color:
        #efc2be;

    font-weight:
        800;
}


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

.disability-day.weekend:not(.selected-start):not(.selected-end):not(.in-range) {
    color:
        #7a8790;

    background:
        #f1f4f5;
}


/* =====================================================
   RANGO
===================================================== */

.disability-day.in-range {
    color:
        #7c3732;

    background:
        #fde6e3;

    border-color:
        #f4d0cd;

    border-radius:
        4px;

    font-weight:
        650;
}


/* =====================================================
   INICIO / FIN DEL RANGO
===================================================== */

.disability-day.selected-start,
.disability-day.selected-end {
    color:
        #ffffff;

    background:
        var(--danger);

    border-color:
        var(--danger);

    box-shadow:
        0 3px 8px
        rgba(196, 76, 67, 0.16);

    font-weight:
        800;
}


/*
   Si es incapacidad de un solo día,
   el mismo botón tiene inicio y fin.
*/

.disability-day.selected-start.selected-end {
    border-radius:
        8px;
}


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

.disability-day:disabled {
    opacity:
        1;

    cursor:
        default;
}


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

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

    min-height:
        39px;
}


/* =====================================================
   RESUMEN
===================================================== */

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

    padding:
        12px 13px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    background:
        #fff3f1;

    border:
        1px solid
        #e5b3af;

    border-radius:
        10px;
}


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


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


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

    font-size:
        0.61rem;

    font-weight:
        750;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        0.8rem;
}


/* =====================================================
   DÍAS NATURALES
===================================================== */

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

    padding:
        7px 10px;

    color:
        #ffffff;

    background:
        var(--danger);

    border-radius:
        8px;

    text-align:
        center;
}


.disability-days-result strong,
.disability-days-result span {
    display:
        block;
}


.disability-days-result strong {
    font-size:
        1.15rem;

    line-height:
        1.1;
}


.disability-days-result span {
    margin-top:
        2px;

    font-size:
        0.59rem;
}


/* =====================================================
   CONTROLES
===================================================== */

.disability-control,
.disability-observation {
    color:
        var(--text);

    font-size:
        0.78rem;

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


.disability-control:focus,
.disability-observation:focus {
    outline:
        none;

    border-color:
        var(--danger);

    box-shadow:
        0 0 0 3px
        rgba(196, 76, 67, 0.10);
}


.disability-control:disabled,
.disability-observation:disabled {
    color:
        #59666f;

    background:
        #f6f8f9;

    cursor:
        default;
}


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

.disability-observation {
    min-height:
        82px;
}


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

    color:
        var(--muted);

    font-size:
        0.65rem;

    text-align:
        right;
}


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

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

    padding:
        11px 12px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        #70423e;

    background:
        #fff4f2;

    border:
        1px solid
        #efd4d1;

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

    border-radius:
        8px;
}


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

    flex:
        0 0 auto;

    color:
        var(--danger);
}


.disability-info p {
    margin:
        0;

    font-size:
        0.7rem;

    line-height:
        1.5;
}


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

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


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

    padding:
        11px 12px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;
}


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

    flex:
        0 0 auto;
}


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


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


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

    font-size:
        0.72rem;
}


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

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


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

    padding:
        8px 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

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

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

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* REGISTRAR */

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

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

    transform:
        translateY(-1px);
}


.disability-primary:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    box-shadow:
        none;
}


/* DOCUMENTO */

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

    background:
        var(--success);

    border-color:
        var(--success);

    transform:
        translateY(-1px);
}


.disability-secondary:active,
.disability-primary:not(:disabled):active,
.disability-document:active {
    transform:
        scale(0.97);
}


/* =====================================================
   HIDDEN
===================================================== */

.disability-error[hidden],
.disability-selected-employee[hidden],
.disability-saved[hidden] {
    display:
        none !important;
}


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

.disability-close:focus-visible,
.disability-calendar-navigation button:focus-visible,
.disability-today:focus-visible,
.disability-day:focus-visible,
.disability-employee-option:focus-visible,
.disability-secondary:focus-visible,
.disability-primary:focus-visible,
.disability-document:focus-visible {
    outline:
        3px solid
        rgba(196, 76, 67, 0.16);

    outline-offset:
        2px;
}


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

@media (max-width: 600px) {

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

        flex-direction:
            column;
    }


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


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

        flex:
            1;
    }


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

}


@media (max-width: 500px) {

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

        grid-template-columns:
            1fr;
    }


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


    .disability-info,
    .disability-saved {
        margin-inline:
            15px;
    }

}


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

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

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

        transition:
            none;
    }

}