/* =====================================================
   MINIALFA
   PDF INDIVIDUAL DE JUSTIFICACIÓN
   RH-JUS-01
===================================================== */


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

.justification-pdf-modal svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.justification-pdf-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1250;

    display:
        none;

    place-items:
        center;

    padding:
        14px;
}


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


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

.justification-pdf-backdrop {
    position:
        absolute;

    inset:
        0;

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

    backdrop-filter:
        blur(3px);

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


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

.justification-pdf-window {
    position:
        relative;

    z-index:
        1;

    width:
        min(100%, 1000px);

    height:
        min(94vh, 920px);

    display:
        grid;

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

    overflow:
        hidden;

    background:
        #eef2f4;

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

    border-radius:
        16px;

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


.justification-pdf-modal.show
.justification-pdf-window {
    animation:
        justificationPdfIn
        0.22s ease-out;
}


/* =====================================================
   ENCABEZADO DE VISTA PREVIA
===================================================== */

.justification-pdf-header {
    padding:
        15px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        #ffffff;

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


.justification-pdf-header-content {
    min-width:
        0;
}


.justification-pdf-header-content > span {
    display:
        block;

    color:
        var(--accent-dark);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.justification-pdf-header h2 {
    margin:
        3px 0;

    color:
        var(--brand-dark);

    font-size:
        1.17rem;
}


.justification-pdf-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.78rem;
}


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

.justification-pdf-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,
        transform 0.16s ease;
}


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


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


/* =====================================================
   VISTA PREVIA
===================================================== */

.justification-pdf-preview {
    overflow:
        auto;

    padding:
        26px;

    background:
        #e9eef1;

    scrollbar-width:
        thin;
}


/* =====================================================
   HOJA A4
===================================================== */

.justification-sheet {
    width:
        794px;

    min-height:
        1123px;

    margin:
        0 auto;

    padding:
        46px 50px;

    color:
        #17212b;

    background:
        #ffffff;

    box-shadow:
        0 5px 22px
        rgba(0, 0, 0, 0.13);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =====================================================
   ENCABEZADO DEL DOCUMENTO
===================================================== */

.justification-document-header {
    min-height:
        104px;

    padding-bottom:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    border-bottom:
        3px solid
        #123b52;
}


/* =====================================================
   LOGO DE LA EMPRESA
===================================================== */

.justification-brand {
    min-width:
        0;

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex:
        1;
}


.justification-company-logo {
    display:
        block;

    width:
        190px;

    max-width:
        190px;

    height:
        88px;

    max-height:
        88px;

    object-fit:
        contain;

    object-position:
        left center;
}


/*
   Solo existe como reserva si PHP no logra
   leer el archivo. No muestra ningún texto.
*/

.justification-logo-placeholder {
    width:
        190px;

    height:
        88px;
}


/* =====================================================
   CÓDIGO DEL FORMATO
===================================================== */

.justification-format {
    flex:
        0 0 auto;

    min-width:
        150px;

    text-align:
        right;
}


.justification-format span,
.justification-format strong,
.justification-format small {
    display:
        block;
}


.justification-format span {
    color:
        #52606d;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.justification-format strong {
    margin-top:
        4px;

    color:
        #0a283a;

    font-size:
        18px;

    font-weight:
        850;
}


.justification-format small {
    margin-top:
        3px;

    color:
        #7c8790;

    font-size:
        9px;
}


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

.justification-title {
    padding:
        28px 0 23px;

    text-align:
        center;
}


.justification-title > span {
    display:
        block;

    color:
        #087a83;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.justification-title h1 {
    margin:
        5px 0 6px;

    color:
        #0a283a;

    font-size:
        24px;

    line-height:
        1.2;
}


.justification-title p {
    max-width:
        470px;

    margin:
        0 auto;

    color:
        #66737d;

    font-size:
        11px;

    line-height:
        1.5;
}


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

.justification-employee {
    display:
        grid;

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

    gap:
        0;

    overflow:
        hidden;

    background:
        #f8fafb;

    border:
        1px solid
        #d6dee5;

    border-radius:
        9px;
}


.justification-employee-field {
    min-width:
        0;

    padding:
        14px 15px;
}


.justification-employee-field:nth-child(odd) {
    border-right:
        1px solid
        #d6dee5;
}


.justification-employee-field:nth-child(n + 3) {
    border-top:
        1px solid
        #d6dee5;
}


.justification-employee span,
.justification-employee strong {
    display:
        block;
}


.justification-employee span {
    margin-bottom:
        4px;

    color:
        #66737d;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.justification-employee strong {
    color:
        #17212b;

    font-size:
        12px;

    font-weight:
        750;

    overflow-wrap:
        anywhere;
}


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

.justification-body {
    margin-top:
        24px;
}


/* =====================================================
   CAMPOS
===================================================== */

.justification-document-field {
    margin-bottom:
        15px;

    padding-bottom:
        11px;

    border-bottom:
        1px solid
        #d6dee5;
}


.justification-document-field:last-child {
    margin-bottom:
        0;
}


.justification-document-field > span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #66737d;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.justification-document-field strong {
    display:
        block;

    color:
        #17212b;

    font-size:
        12px;

    font-weight:
        750;
}


.justification-document-field p {
    margin:
        0;

    color:
        #17212b;

    font-size:
        11px;

    line-height:
        1.6;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


/* =====================================================
   TEXTO ADMINISTRATIVO
===================================================== */

.justification-statement {
    margin-top:
        24px;

    padding:
        15px 16px;

    color:
        #315e61;

    background:
        #eef8f8;

    border:
        1px solid
        #cce4e5;

    border-left:
        4px solid
        #087a83;

    border-radius:
        7px;
}


.justification-statement p {
    margin:
        0;

    font-size:
        11px;

    line-height:
        1.65;

    text-align:
        justify;
}


.justification-statement strong {
    color:
        #164e52;
}


/* =====================================================
   FIRMAS
===================================================== */

.justification-signatures {
    margin-top:
        88px;

    display:
        grid;

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

    gap:
        74px;

    text-align:
        center;
}


.justification-signature {
    min-width:
        0;
}


.justification-signature-line {
    height:
        30px;

    margin-bottom:
        7px;

    border-bottom:
        1px solid
        #17212b;
}


.justification-signature strong,
.justification-signature small {
    display:
        block;
}


.justification-signature strong {
    color:
        #17212b;

    font-size:
        10px;

    font-weight:
        750;
}


.justification-signature small {
    margin-top:
        2px;

    color:
        #69757e;

    font-size:
        9px;
}


/* =====================================================
   PIE
===================================================== */

.justification-footer {
    margin-top:
        45px;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #66737d;

    border-top:
        1px solid
        #d6dee5;

    font-size:
        9px;
}


.justification-footer strong {
    color:
        #0a283a;

    font-size:
        9px;
}


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

.justification-pdf-actions {
    padding:
        14px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    background:
        #ffffff;

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


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

.justification-pdf-cancel,
.justification-pdf-print {
    min-height:
        42px;

    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:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


/* CANCELAR */

.justification-pdf-cancel {
    color:
        var(--text);

    background:
        #ffffff;

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


.justification-pdf-cancel:hover {
    background:
        #f4f7f8;

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* IMPRIMIR */

.justification-pdf-print {
    color:
        #ffffff;

    background:
        var(--brand);

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


.justification-pdf-print:hover {
    background:
        var(--brand-dark);

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

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

    transform:
        translateY(-1px);
}


.justification-pdf-cancel:active,
.justification-pdf-print:active {
    transform:
        translateY(1px)
        scale(0.97);
}


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

.justification-pdf-close:focus-visible,
.justification-pdf-cancel:focus-visible,
.justification-pdf-print:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


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

@media (max-width: 820px) {

    .justification-pdf-preview {
        padding:
            18px;
    }

}


@media (max-width: 520px) {

    .justification-pdf-modal {
        padding:
            6px;
    }


    .justification-pdf-window {
        height:
            calc(100vh - 12px);

        border-radius:
            13px;
    }


    .justification-pdf-header {
        padding:
            13px 14px;
    }


    .justification-pdf-preview {
        padding:
            10px;
    }


    .justification-pdf-actions {
        padding:
            12px;

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .justification-pdf-cancel,
    .justification-pdf-print {
        width:
            100%;
    }

}


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

@keyframes justificationPdfIn {

    from {
        opacity:
            0;

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

    to {
        opacity:
            1;

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

}


/* =====================================================
   IMPRESIÓN
===================================================== */

@media print {

    @page {
        size:
            A4;

        margin:
            0;
    }


    .justification-pdf-modal {
        position:
            static;

        display:
            block !important;

        opacity:
            1 !important;

        pointer-events:
            auto;
    }


    .justification-pdf-backdrop,
    .justification-pdf-header,
    .justification-pdf-actions {
        display:
            none !important;
    }


    .justification-pdf-window,
    .justification-pdf-preview {
        display:
            block;

        width:
            auto;

        height:
            auto;

        overflow:
            visible;

        padding:
            0;

        background:
            #ffffff;

        box-shadow:
            none;
    }


    .justification-sheet {
        width:
            100%;

        min-height:
            297mm;

        margin:
            0;

        padding:
            14mm;

        box-shadow:
            none;
    }


    .justification-company-logo {
        width:
            190px;

        height:
            88px;

        object-fit:
            contain;

        object-position:
            left center;
    }

}


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

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

    .justification-pdf-window,
    .justification-pdf-close,
    .justification-pdf-cancel,
    .justification-pdf-print {
        animation:
            none;

        transition:
            none;
    }

}