/* =====================================================
   MINIALFA
   PDF DE VACACIONES
   RH-VAC-01
===================================================== */


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

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

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.vacation-pdf-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1250;

    display:
        none;

    place-items:
        center;

    padding:
        14px;
}


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


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

.vacation-pdf-backdrop {
    position:
        absolute;

    inset:
        0;

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

    backdrop-filter:
        blur(3px);

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


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

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


.vacation-pdf-modal.show
.vacation-pdf-window {
    animation:
        vacationPdfIn
        0.22s ease-out;
}


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

.vacation-pdf-modal-header {
    padding:
        15px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        #ffffff;

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


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


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

    color:
        var(--accent-dark);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        1.17rem;
}


.vacation-pdf-modal-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.78rem;
}


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

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


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


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


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

.vacation-pdf-preview {
    overflow:
        auto;

    padding:
        26px;

    background:
        #e9eef1;

    scrollbar-width:
        thin;
}


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

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

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

.vacation-document-brand {
    min-width:
        0;

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex:
        1;
}


.vacation-company-logo {
    display:
        block;

    width:
        190px;

    max-width:
        190px;

    height:
        88px;

    max-height:
        88px;

    object-fit:
        contain;

    object-position:
        left center;
}


/* =====================================================
   CÓDIGO
===================================================== */

.vacation-document-code {
    min-width:
        155px;

    flex:
        0 0 auto;

    text-align:
        right;
}


.vacation-document-code span,
.vacation-document-code strong,
.vacation-document-code small {
    display:
        block;
}


.vacation-document-code span {
    color:
        #52606d;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.vacation-document-code strong {
    margin-top:
        4px;

    color:
        #0a283a;

    font-size:
        18px;

    font-weight:
        850;
}


.vacation-document-code small {
    margin-top:
        3px;

    color:
        #7c8790;

    font-size:
        9px;
}


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

.vacation-document-title {
    padding:
        27px 0 23px;

    text-align:
        center;
}


.vacation-document-title > span {
    display:
        block;

    color:
        #175cd3;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


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

    color:
        #0a283a;

    font-size:
        24px;

    line-height:
        1.2;
}


.vacation-document-title p {
    max-width:
        490px;

    margin:
        0 auto;

    color:
        #66737d;

    font-size:
        11px;

    line-height:
        1.5;
}


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

.vacation-document-employee {
    display:
        grid;

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

    gap:
        0;

    overflow:
        hidden;

    padding:
        0;

    background:
        #f8fafb;

    border:
        1px solid
        #d6dee5;

    border-radius:
        9px;
}


.vacation-document-employee > div {
    min-width:
        0;

    padding:
        13px 15px;
}


.vacation-document-employee > div:nth-child(odd) {
    border-right:
        1px solid
        #d6dee5;
}


.vacation-document-employee > div:nth-child(n + 3) {
    border-top:
        1px solid
        #d6dee5;
}


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


.vacation-document-employee span {
    margin-bottom:
        4px;

    color:
        #66737d;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.vacation-document-employee strong {
    color:
        #17212b;

    font-size:
        12px;

    font-weight:
        750;

    overflow-wrap:
        anywhere;
}


/* =====================================================
   BLOQUES
===================================================== */

.vacation-document-period,
.vacation-document-selected,
.vacation-document-observation {
    margin-top:
        17px;

    padding:
        14px 15px;

    background:
        #ffffff;

    border:
        1px solid
        #d6dee5;

    border-radius:
        9px;
}


/* =====================================================
   TÍTULO DE BLOQUES
===================================================== */

.vacation-document-section-title {
    margin-bottom:
        10px;

    color:
        #175cd3;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


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

.vacation-period-data {
    display:
        grid;

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

    gap:
        9px;
}


.vacation-period-data > div {
    min-width:
        0;

    padding:
        10px 11px;

    background:
        #f8fafb;

    border:
        1px solid
        #e0e6eb;

    border-radius:
        7px;
}


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


.vacation-period-data span {
    color:
        #66737d;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.vacation-period-data strong {
    margin-top:
        3px;

    color:
        #17212b;

    font-size:
        11px;
}


/* =====================================================
   OMITIDOS
===================================================== */

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


.vacation-pdf-omitted {
    background:
        #fff8e8 !important;

    border-color:
        #eed69c !important;
}


.vacation-pdf-omitted strong {
    color:
        #8a5a00;
}


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

.vacation-document-selected-help {
    margin:
        -3px 0 10px;

    color:
        #66737d;

    font-size:
        9px;

    line-height:
        1.45;
}


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

    flex-wrap:
        wrap;

    gap:
        6px;
}


.vacation-document-date {
    padding:
        5px 8px;

    color:
        #1849a9;

    background:
        #e8f2ff;

    border:
        1px solid
        #d0e1f8;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        750;
}


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

.vacation-document-observation p {
    margin:
        0;

    color:
        #17212b;

    font-size:
        10px;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


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

.vacation-document-note {
    margin-top:
        18px;

    padding:
        13px 14px;

    color:
        #315e61;

    background:
        #eef8f8;

    border:
        1px solid
        #cce4e5;

    border-left:
        4px solid
        #087a83;

    border-radius:
        7px;
}


.vacation-document-note p {
    margin:
        0;

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        justify;
}


.vacation-document-note strong {
    color:
        #164e52;
}


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

.vacation-document-signatures {
    margin-top:
        74px;

    display:
        grid;

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

    gap:
        70px;

    text-align:
        center;
}


.vacation-document-signature {
    min-width:
        0;
}


.vacation-signature-line {
    height:
        29px;

    margin-bottom:
        7px;

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


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


.vacation-document-signature strong {
    color:
        #17212b;

    font-size:
        10px;
}


.vacation-document-signature small {
    margin-top:
        2px;

    color:
        #69757e;

    font-size:
        9px;
}


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

.vacation-document-footer {
    margin-top:
        38px;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #66737d;

    border-top:
        1px solid
        #d6dee5;

    font-size:
        9px;
}


.vacation-document-footer strong {
    color:
        #0a283a;

    font-size:
        9px;
}


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

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

.vacation-pdf-secondary,
.vacation-pdf-primary {
    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:
        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-pdf-secondary {
    color:
        var(--text);

    background:
        #ffffff;

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


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

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


/* IMPRIMIR */

.vacation-pdf-primary {
    color:
        #ffffff;

    background:
        var(--brand);

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


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

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

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

    transform:
        translateY(-1px);
}


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


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

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

    outline-offset:
        2px;
}


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

@media (max-width: 820px) {

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

}


@media (max-width: 520px) {

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


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

        border-radius:
            13px;
    }


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


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

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .vacation-pdf-secondary,
    .vacation-pdf-primary {
        width:
            100%;
    }

}


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

@keyframes vacationPdfIn {

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


    .vacation-pdf-modal {
        position:
            static;

        display:
            block !important;

        opacity:
            1 !important;

        pointer-events:
            auto;
    }


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


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

        width:
            auto;

        height:
            auto;

        overflow:
            visible;

        padding:
            0;

        background:
            #ffffff;

        box-shadow:
            none;
    }


    .vacation-report-sheet {
        width:
            100%;

        min-height:
            297mm;

        margin:
            0;

        padding:
            14mm;

        box-shadow:
            none;
    }


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

        height:
            88px;

        object-fit:
            contain;

        object-position:
            left center;
    }

}


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

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

    .vacation-pdf-window,
    .vacation-pdf-close,
    .vacation-pdf-secondary,
    .vacation-pdf-primary {
        animation:
            none;

        transition:
            none;
    }

}