/* =====================================================
   MINIALFA
   PDF COMISIÓN
   RH-COM-01
===================================================== */


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

.commission-pdf-modal svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


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

.commission-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;

    display: none;
    place-items: center;

    padding: 14px;
}


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


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

.commission-pdf-backdrop {
    position: absolute;
    inset: 0;

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

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


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

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


.commission-pdf-modal.show
.commission-pdf-window {
    animation:
        commissionPdfIn
        0.22s ease-out;
}


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

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


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


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

    color: var(--success);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


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

    color: var(--brand-dark);

    font-size: 1.17rem;
}


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

    color: var(--muted);

    font-size: 0.78rem;
}


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

.commission-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,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


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


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


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

.commission-pdf-preview {
    overflow: auto;

    padding: 26px;

    background: #e9eef1;

    scrollbar-width: thin;
}


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

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

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

    padding-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    border-bottom:
        3px solid
        #2f8758;
}


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

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

    display: flex;
    align-items: center;

    flex: 1;
}


.commission-company-logo {
    display: block;

    width: 190px;
    max-width: 190px;

    height: 88px;
    max-height: 88px;

    object-fit: contain;
    object-position: left center;
}


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

.commission-document-code {
    min-width: 160px;

    flex: 0 0 auto;

    text-align: right;
}


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


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

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}


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

    color: #0a283a;

    font-size: 18px;
    font-weight: 850;
}


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

    color: #7c8790;

    font-size: 9px;
}


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

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

    text-align: center;
}


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

    color: #2f8758;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


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

    color: #0a283a;

    font-size: 24px;
    line-height: 1.2;
}


.commission-document-title p {
    max-width: 520px;

    margin: 0 auto;

    color: #66737d;

    font-size: 11px;
    line-height: 1.5;
}


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

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


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

    padding: 13px 15px;
}


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


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


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


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

    color: #66737d;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


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

    font-size: 12px;
    font-weight: 750;

    overflow-wrap: anywhere;
}


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

.commission-document-activity,
.commission-document-destination,
.commission-document-description,
.commission-document-observation {
    margin-top: 17px;

    padding: 14px 15px;

    background: #ffffff;

    border:
        1px solid
        #d6dee5;

    border-radius: 9px;
}


/* =====================================================
   TÍTULOS
===================================================== */

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

    color: #246d47;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* =====================================================
   ACTIVIDAD
===================================================== */

.commission-activity-data {
    display: grid;

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

    gap: 9px;
}


.commission-activity-data > div {
    min-width: 0;

    padding: 10px 11px;

    background: #f2faf6;

    border:
        1px solid
        #d4e8dc;

    border-radius: 7px;
}


.commission-activity-data span,
.commission-activity-data strong {
    display: block;
}


.commission-activity-data span {
    color: #66737d;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}


.commission-activity-data strong {
    margin-top: 3px;

    color: #17212b;

    font-size: 11px;

    overflow-wrap: anywhere;
}


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

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


.commission-document-extra {
    margin-top: 10px;

    padding: 10px 11px;

    background: #eaf6ef;

    border:
        1px solid
        #cbe4d5;

    border-left:
        4px solid
        #2f8758;

    border-radius: 7px;
}


.commission-document-extra span,
.commission-document-extra strong {
    display: block;
}


.commission-document-extra span {
    color: #47705a;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}


.commission-document-extra strong {
    margin-top: 3px;

    color: #246d47;

    font-size: 11px;
}


/* =====================================================
   DESTINO
===================================================== */

.commission-document-destination > strong {
    display: block;

    color: #17212b;

    font-size: 11px;

    overflow-wrap: anywhere;
}


/* =====================================================
   DESCRIPCIÓN / OBSERVACIONES
===================================================== */

.commission-document-description p,
.commission-document-observation p {
    margin: 0;

    color: #17212b;

    font-size: 10px;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =====================================================
   DECLARACIÓN
===================================================== */

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

    padding: 13px 14px;

    color: #2e6747;

    background: #f1faf5;

    border:
        1px solid
        #d2e9dc;

    border-left:
        4px solid
        #2f8758;

    border-radius: 7px;
}


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

    font-size: 10px;
    line-height: 1.6;

    text-align: justify;
}


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

.commission-document-signatures {
    margin-top: 72px;

    display: grid;

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

    gap: 70px;

    text-align: center;
}


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


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

    margin-bottom: 7px;

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


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


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

    font-size: 10px;
}


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

    color: #69757e;

    font-size: 9px;
}


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

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


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


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

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

.commission-pdf-secondary,
.commission-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;
}


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

    background: #ffffff;

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


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

    border-color: #b9c7d1;

    transform: translateY(-1px);
}


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

    background: var(--brand);

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


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


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


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

.commission-pdf-close:focus-visible,
.commission-pdf-secondary:focus-visible,
.commission-pdf-primary:focus-visible {
    outline:
        3px solid
        rgba(47, 135, 88, 0.16);

    outline-offset: 2px;
}


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

@keyframes commissionPdfIn {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

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

}


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

@media (max-width: 520px) {

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


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


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


    .commission-pdf-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


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

}


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

@media print {

    @page {
        size: A4;
        margin: 0;
    }


    .commission-pdf-modal {
        position: static;

        display: block !important;

        opacity: 1 !important;

        pointer-events: auto;
    }


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


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

        width: auto;
        height: auto;

        overflow: visible;

        padding: 0;

        background: #ffffff;

        box-shadow: none;
    }


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

        min-height: 297mm;

        margin: 0;

        padding: 14mm;

        box-shadow: none;
    }


    .commission-company-logo {
        width: 190px;
        height: 88px;

        object-fit: contain;
        object-position: left center;
    }

}


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

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

    .commission-pdf-window,
    .commission-pdf-close,
    .commission-pdf-secondary,
    .commission-pdf-primary {
        animation: none;
        transition: none;
    }

}