/* =====================================================
   MINIALFA
   PDF PERMISO PERSONAL
   RH-PER-01
===================================================== */


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

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

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.personal-pdf-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1250;

    display:
        none;

    place-items:
        center;

    padding:
        14px;
}


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


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

.personal-pdf-backdrop {
    position:
        absolute;

    inset:
        0;

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

    backdrop-filter:
        blur(3px);

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


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

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


.personal-pdf-modal.show
.personal-pdf-window {
    animation:
        personalPdfIn
        0.22s ease-out;
}


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

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


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

    color:
        var(--purple);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        1.17rem;
}


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

    color:
        var(--muted);

    font-size:
        0.78rem;
}


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

.personal-pdf-close {
    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

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


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


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


/* =====================================================
   PREVIEW
===================================================== */

.personal-pdf-preview {
    overflow:
        auto;

    padding:
        26px;

    background:
        #e9eef1;

    scrollbar-width:
        thin;
}


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

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


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

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

    padding-bottom:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    border-bottom:
        3px solid
        #7650a8;
}


/* =====================================================
   LOGO
===================================================== */

.personal-document-brand {
    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    flex:
        1;
}


.personal-company-logo {
    display:
        block;

    width:
        190px;

    max-width:
        190px;

    height:
        88px;

    max-height:
        88px;

    object-fit:
        contain;

    object-position:
        left center;
}


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

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

    flex:
        0 0 auto;

    text-align:
        right;
}


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


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

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


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

    color:
        #0a283a;

    font-size:
        18px;

    font-weight:
        850;
}


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

    color:
        #7c8790;

    font-size:
        9px;
}


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

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

    text-align:
        center;
}


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

    color:
        #7650a8;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


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

    color:
        #0a283a;

    font-size:
        24px;
}


.personal-document-title p {
    max-width:
        500px;

    margin:
        0 auto;

    color:
        #66737d;

    font-size:
        11px;

    line-height:
        1.5;
}


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

.personal-document-employee {
    display:
        grid;

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

    overflow:
        hidden;

    padding:
        0;

    background:
        #f8fafb;

    border:
        1px solid
        #d6dee5;

    border-radius:
        9px;
}


.personal-document-employee > div {
    padding:
        13px 15px;
}


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


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


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


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

    color:
        #66737d;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


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

    font-size:
        12px;

    font-weight:
        750;
}


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

.personal-document-permission,
.personal-document-observation {
    margin-top:
        17px;

    padding:
        14px 15px;

    background:
        #ffffff;

    border:
        1px solid
        #d6dee5;

    border-radius:
        9px;
}


/* =====================================================
   TÍTULO DE SECCIONES
===================================================== */

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

    color:
        #52327f;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* =====================================================
   DATOS DEL PERMISO
===================================================== */

.personal-permission-data {
    display:
        grid;

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

    gap:
        9px;
}


.personal-permission-data > div {
    padding:
        10px 11px;

    background:
        #f8f6fb;

    border:
        1px solid
        #e3daef;

    border-radius:
        7px;
}


.personal-permission-data span,
.personal-permission-data strong {
    display:
        block;
}


.personal-permission-data span {
    color:
        #66737d;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.personal-permission-data strong {
    margin-top:
        3px;

    color:
        #17212b;

    font-size:
        11px;
}


/* =====================================================
   HORARIO DINÁMICO
===================================================== */

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


.personal-document-time {
    margin-top:
        10px;

    padding:
        10px 11px;

    background:
        #f2ecf8;

    border:
        1px solid
        #d9c8eb;

    border-left:
        4px solid
        #7650a8;

    border-radius:
        7px;
}


.personal-document-time span,
.personal-document-time strong {
    display:
        block;
}


.personal-document-time span {
    color:
        #674b83;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.personal-document-time strong {
    margin-top:
        3px;

    color:
        #52327f;

    font-size:
        12px;
}


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

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

    color:
        #17212b;

    font-size:
        10px;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


/* =====================================================
   NOTA
===================================================== */

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

    padding:
        13px 14px;

    color:
        #52327f;

    background:
        #f5f0fa;

    border:
        1px solid
        #e2d7ee;

    border-left:
        4px solid
        #7650a8;

    border-radius:
        7px;
}


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

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        justify;
}


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

.personal-document-signatures {
    margin-top:
        78px;

    display:
        grid;

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

    gap:
        70px;

    text-align:
        center;
}


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

    margin-bottom:
        7px;

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


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


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

    font-size:
        10px;
}


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

    color:
        #69757e;

    font-size:
        9px;
}


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

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


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


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

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

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    background:
        #ffffff;

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


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

.personal-pdf-secondary,
.personal-pdf-primary {
    min-height:
        42px;

    padding:
        9px 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        9px;

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


.personal-pdf-secondary {
    color:
        var(--text);

    background:
        #ffffff;

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


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

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


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

    background:
        var(--brand);

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


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


.personal-pdf-secondary:active,
.personal-pdf-primary:active {
    transform:
        scale(0.97);
}


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

@keyframes personalPdfIn {

    from {
        opacity:
            0;

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

    to {
        opacity:
            1;

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

}


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

@media (max-width: 520px) {

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


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


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


    .personal-pdf-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

}


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

@media print {

    @page {
        size:
            A4;

        margin:
            0;
    }


    .personal-pdf-modal {
        position:
            static;

        display:
            block !important;
    }


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


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

        width:
            auto;

        height:
            auto;

        overflow:
            visible;

        padding:
            0;

        background:
            #ffffff;

        box-shadow:
            none;
    }


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

        min-height:
            297mm;

        margin:
            0;

        padding:
            14mm;

        box-shadow:
            none;
    }

}