/* =====================================================
   MINIALFA
   JUSTIFICAR FALTA
===================================================== */


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

.justify-modal svg {
    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.justify-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1100;

    display:
        none;

    place-items:
        center;

    padding:
        18px;
}


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


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

.justify-backdrop {
    position:
        absolute;

    inset:
        0;

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

    backdrop-filter:
        blur(3px);

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


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

.justify-window {
    position:
        relative;

    z-index:
        1;

    width:
        min(100%, 700px);

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

    overflow-y:
        auto;

    overflow-x:
        hidden;

    background:
        #ffffff;

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

    border-radius:
        18px;

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

    scrollbar-width:
        thin;

    scrollbar-gutter:
        stable;
}


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


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

.justify-header {
    padding:
        22px 24px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        #ffffff;

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


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


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

    color:
        var(--accent-dark);

    font-size:
        0.69rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        1.33rem;

    line-height:
        1.2;
}


.justify-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.83rem;

    line-height:
        1.5;
}


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

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


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


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


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

.justify-content {
    padding:
        20px 24px 22px;
}


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

.justify-employee-card {
    min-width:
        0;

    padding:
        14px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        13px;

    background:
        var(--surface-soft);

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

    border-radius:
        13px;
}


/* =====================================================
   AVATAR
===================================================== */

.justify-avatar {
    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    background:
        var(--brand);

    border-radius:
        50%;

    font-size:
        0.77rem;

    font-weight:
        800;
}


/* =====================================================
   DATOS DEL EMPLEADO
===================================================== */

.justify-employee-data {
    min-width:
        0;
}


.justify-employee-data span,
.justify-employee-data strong,
.justify-employee-data small {
    display:
        block;
}


.justify-employee-data span {
    margin-bottom:
        2px;

    color:
        var(--muted);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.justify-employee-data strong {
    overflow:
        hidden;

    color:
        var(--brand-dark);

    font-size:
        0.9rem;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.justify-employee-data small {
    margin-top:
        2px;

    overflow:
        hidden;

    color:
        var(--muted);

    font-size:
        0.73rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   FECHA DE LA FALTA
===================================================== */

.justify-date-box {
    padding:
        9px 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #075985;

    background:
        #eaf5fa;

    border:
        1px solid
        #c8e2ee;

    border-radius:
        10px;
}


.justify-date-icon {
    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #075985;

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

    border-radius:
        8px;
}


.justify-date-box span,
.justify-date-box strong {
    display:
        block;

    white-space:
        nowrap;
}


.justify-date-box span {
    color:
        #527d91;

    font-size:
        0.61rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.justify-date-box strong {
    margin-top:
        1px;

    color:
        #075985;

    font-size:
        0.76rem;

    font-weight:
        800;
}


/* =====================================================
   FORMULARIO
===================================================== */

.justify-form {
    display:
        grid;

    gap:
        17px;

    margin-top:
        19px;
}


/* =====================================================
   CAMPO
===================================================== */

.justify-field {
    min-width:
        0;

    display:
        grid;

    gap:
        7px;
}


.justify-field label {
    color:
        var(--brand-dark);

    font-size:
        0.79rem;

    font-weight:
        750;
}


.justify-required {
    color:
        var(--danger);
}


/* =====================================================
   ETIQUETA / REQUISITO
===================================================== */

.justify-label-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.justify-requirement {
    padding:
        3px 7px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

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

    border-radius:
        999px;

    font-size:
        0.63rem;

    font-weight:
        700;
}


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

.justify-control {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    color:
        var(--text);

    background:
        #ffffff;

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

    border-radius:
        9px;

    font:
        inherit;

    font-size:
        0.8rem;

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


.justify-control:hover:not(:disabled) {
    border-color:
        #b7c7d2;
}


.justify-control:focus {
    border-color:
        var(--accent);

    outline:
        none;

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


/* =====================================================
   SELECT
===================================================== */

.justify-select-wrapper {
    position:
        relative;

    min-width:
        0;
}


.justify-select-wrapper select {
    appearance:
        none;

    -webkit-appearance:
        none;

    padding-right:
        42px;

    cursor:
        pointer;
}


.justify-select-wrapper > svg {
    position:
        absolute;

    top:
        50%;

    right:
        13px;

    color:
        var(--muted);

    pointer-events:
        none;

    transform:
        translateY(-50%);
}


.justify-select-wrapper:focus-within > svg {
    color:
        var(--accent-dark);
}


/* =====================================================
   TEXTAREA
===================================================== */

.justify-textarea {
    min-height:
        115px;

    line-height:
        1.5;

    resize:
        vertical;
}


.justify-textarea::placeholder {
    color:
        #98a5ae;
}


/* =====================================================
   DESHABILITADOS
===================================================== */

.justify-control:disabled {
    color:
        #78848c;

    background:
        #f3f5f6;

    cursor:
        not-allowed;

    opacity:
        0.78;
}


/* =====================================================
   ERROR
===================================================== */

.justify-control[aria-invalid="true"],
.justify-control.is-invalid {
    border-color:
        var(--danger);

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


.justify-error {
    color:
        var(--danger);

    font-size:
        0.71rem;

    font-weight:
        700;
}


/* =====================================================
   PIE DEL CAMPO
===================================================== */

.justify-field-footer {
    min-height:
        18px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;
}


.justify-counter {
    margin-left:
        auto;

    color:
        var(--muted);

    font-size:
        0.69rem;

    white-space:
        nowrap;
}


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

.justify-info {
    margin-top:
        17px;

    padding:
        12px 13px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    color:
        #164e52;

    background:
        #eaf7f7;

    border:
        1px solid
        #c7e4e5;

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

    border-radius:
        10px;
}


.justify-info-icon {
    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);

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

    border-radius:
        8px;
}


.justify-info p {
    margin:
        3px 0 0;

    color:
        #416c6f;

    font-size:
        0.75rem;

    line-height:
        1.5;
}


.justify-info strong {
    color:
        #164e52;
}


/* =====================================================
   JUSTIFICACIÓN GUARDADA
===================================================== */

.justify-saved-info {
    margin-top:
        17px;

    padding:
        13px;

    display:
        grid;

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

    gap:
        10px;

    color:
        var(--success);

    background:
        var(--success-soft);

    border:
        1px solid
        rgba(43, 133, 88, 0.22);

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

    border-radius:
        10px;
}


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


.justify-saved-item {
    min-width:
        0;
}


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


.justify-saved-item span {
    margin-bottom:
        2px;

    color:
        #59846c;

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.justify-saved-item strong {
    overflow:
        hidden;

    color:
        var(--success);

    font-size:
        0.77rem;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


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

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

.justify-secondary,
.justify-primary,
.justify-document {
    min-height:
        43px;

    padding:
        9px 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        9px;

    font-size:
        0.79rem;

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

.justify-secondary {
    color:
        var(--text);

    background:
        #ffffff;

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


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

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* =====================================================
   JUSTIFICAR
===================================================== */

.justify-primary {
    color:
        #ffffff;

    background:
        var(--brand);

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


.justify-primary: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);
}


/* =====================================================
   PDF / FORMATO
===================================================== */

.justify-document {
    color:
        var(--success);

    background:
        var(--success-soft);

    border:
        1px solid
        rgba(43, 133, 88, 0.38);
}


.justify-document:hover {
    background:
        rgba(43, 133, 88, 0.14);

    border-color:
        var(--success);

    transform:
        translateY(-1px);
}


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

.justify-document[hidden] {
    display:
        none !important;
}


/* =====================================================
   DESHABILITADO
===================================================== */

.justify-primary:disabled {
    opacity:
        0.44;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;
}


/* =====================================================
   PRESIÓN
===================================================== */

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


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

.justify-close:focus-visible,
.justify-secondary:focus-visible,
.justify-document:focus-visible,
.justify-primary:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


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

@media (max-width: 620px) {

    .justify-modal {
        padding:
            10px;
    }


    .justify-window {
        max-height:
            calc(100vh - 20px);

        border-radius:
            15px;
    }


    .justify-header {
        padding:
            17px;
    }


    .justify-content {
        padding:
            16px;
    }


    .justify-actions {
        padding:
            15px;
    }


    .justify-employee-card {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .justify-date-box {
        grid-column:
            1 / -1;

        width:
            100%;
    }

}


@media (max-width: 520px) {

    .justify-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .justify-secondary,
    .justify-primary,
    .justify-document {
        width:
            100%;
    }


    .justify-saved-info {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 390px) {

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


    .justify-employee-card {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .justify-avatar {
        margin-inline:
            auto;
    }


    .justify-date-box {
        justify-content:
            center;
    }


    .justify-label-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;
    }

}


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

@keyframes justifyModalIn {

    from {
        opacity:
            0;

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

    to {
        opacity:
            1;

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

}


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

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

    .justify-window,
    .justify-close,
    .justify-control,
    .justify-secondary,
    .justify-primary,
    .justify-document {
        animation:
            none;

        transition:
            none;
    }

}