/* =====================================================
   MINIALFA
   REPORTE GENERAL DE CHECADAS
   RH-CHK-01
===================================================== */


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

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

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


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

.checks-pdf-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1200;

    display:
        none;

    place-items:
        center;

    padding:
        14px;
}


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


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

.checks-pdf-backdrop {
    position:
        absolute;

    inset:
        0;

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

    backdrop-filter:
        blur(3px);

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


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

.checks-pdf-window {
    position:
        relative;

    z-index:
        1;

    width:
        min(100%, 1080px);

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


.checks-pdf-modal.show
.checks-pdf-window {
    animation:
        checksPdfIn
        0.22s ease-out;
}


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

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


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


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

    color:
        var(--accent-dark);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

    color:
        var(--brand-dark);

    font-size:
        1.17rem;
}


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

    color:
        var(--muted);

    font-size:
        0.78rem;
}


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

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


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

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


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


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

.checks-pdf-preview {
    overflow:
        auto;

    padding:
        26px;

    background:
        #e9eef1;

    scrollbar-width:
        thin;
}


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

.attendance-report-sheet {
    width:
        794px;

    min-height:
        1123px;

    margin:
        0 auto;

    padding:
        42px 44px;

    color:
        #17212b;

    background:
        #ffffff;

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

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


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

.report-header {
    min-height:
        112px;

    padding-bottom:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

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


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

.report-brand {
    min-width:
        0;

    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex:
        1;
}


.report-company-logo {
    display:
        block;

    width:
        150px;

    height:
        110px;

    object-fit:
        contain;

    object-position:
        left center;
}


/* =====================================================
   DATOS DEL DOCUMENTO
===================================================== */

.report-document-data {
    min-width:
        150px;

    flex:
        0 0 auto;

    text-align:
        right;
}


.report-document-data span,
.report-document-data strong,
.report-document-data small {
    display:
        block;
}


.report-document-data span {
    color:
        #52606d;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.report-document-data strong {
    margin-top:
        4px;

    color:
        #0a283a;

    font-size:
        18px;

    font-weight:
        850;
}


.report-document-data small {
    margin-top:
        3px;

    color:
        #7c8790;

    font-size:
        9px;
}


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

.report-title-section {
    padding:
        25px 0 20px;

    text-align:
        center;
}


.report-eyebrow {
    display:
        block;

    color:
        #087a83;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


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

    color:
        #0a283a;

    font-size:
        24px;

    line-height:
        1.2;
}


.report-title-section > p {
    margin:
        0;

    color:
        #66737d;

    font-size:
        11px;

    line-height:
        1.5;
}


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

.report-period {
    margin-top:
        12px;

    padding:
        7px 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #123b52;

    background:
        #eaf3f7;

    border:
        1px solid
        #d1e2ea;

    border-radius:
        999px;

    font-size:
        10px;
}


.report-period span {
    color:
        #647883;

    font-weight:
        650;
}


.report-period strong {
    font-weight:
        800;
}


/* =====================================================
   INFORMACIÓN DEL REPORTE
===================================================== */

.report-meta {
    margin-bottom:
        17px;

    display:
        grid;

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

    gap:
        8px;
}


.report-meta > div {
    padding:
        10px 11px;

    background:
        #f8fafb;

    border:
        1px solid
        #d6dee5;

    border-radius:
        8px;
}


.report-meta span,
.report-meta strong {
    display:
        block;
}


.report-meta span {
    margin-bottom:
        3px;

    color:
        #66737d;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.report-meta strong {
    color:
        #17212b;

    font-size:
        11px;
}


/* =====================================================
   RESUMEN
===================================================== */

.report-summary {
    margin:
        17px 0 20px;

    display:
        grid;

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

    gap:
        8px;
}


.report-summary-item {
    min-width:
        0;

    padding:
        10px 11px;

    background:
        #ffffff;

    border:
        1px solid
        #d6dee5;

    border-top:
        4px solid;

    border-radius:
        8px;
}


.report-summary-item span,
.report-summary-item strong {
    display:
        block;
}


.report-summary-item span {
    color:
        #66737d;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.report-summary-item strong {
    margin-top:
        2px;

    color:
        #17212b;

    font-size:
        18px;
}


.report-summary-attendance {
    border-top-color:
        #2b8558;
}


.report-summary-incomplete {
    border-top-color:
        #d58b18;
}


.report-summary-absence {
    border-top-color:
        #c44c43;
}


.report-summary-justified {
    border-top-color:
        #087a83;
}


/* =====================================================
   DETALLE
===================================================== */

.report-records {
    margin-top:
        16px;
}


.report-section-title {
    margin-bottom:
        8px;
}


.report-section-title span {
    display:
        block;

    color:
        #087a83;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.report-section-title h2 {
    margin:
        2px 0 0;

    color:
        #0a283a;

    font-size:
        13px;
}


/* =====================================================
   TABLA
===================================================== */

.report-table {
    width:
        100%;

    table-layout:
        fixed;

    border-collapse:
        collapse;

    color:
        #17212b;

    font-size:
        8px;
}


.report-table th {
    padding:
        7px 5px;

    color:
        #ffffff;

    background:
        #123b52;

    border:
        1px solid
        #123b52;

    font-size:
        7px;

    font-weight:
        750;

    line-height:
        1.2;

    text-align:
        left;

    text-transform:
        uppercase;
}


.report-table td {
    padding:
        7px 5px;

    vertical-align:
        middle;

    border:
        1px solid
        #d6dee5;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;
}


.report-table tbody tr:nth-child(even) {
    background:
        #f8fafb;
}


/* =====================================================
   ANCHOS
===================================================== */

.report-col-number {
    width:
        6%;
}


.report-col-employee {
    width:
        20%;
}


.report-col-date {
    width:
        11%;
}


.report-col-time {
    width:
        9%;
}


.report-col-meal {
    width:
        15%;
}


.report-col-worked {
    width:
        11%;
}


.report-col-extra {
    width:
        9%;
}


.report-col-status {
    width:
        10%;
}


/* =====================================================
   EMPLEADO EN TABLA
===================================================== */

.report-employee-cell strong,
.report-employee-cell small {
    display:
        block;
}


.report-employee-cell strong {
    color:
        #17212b;

    font-size:
        8px;

    font-weight:
        750;
}


.report-employee-cell small {
    margin-top:
        2px;

    color:
        #69757e;

    font-size:
        7px;
}


/* =====================================================
   COMIDA
===================================================== */

.report-meal-time {
    display:
        grid;

    gap:
        2px;
}


.report-meal-time span {
    display:
        block;

    white-space:
        nowrap;
}


.report-meal-time small {
    margin-right:
        2px;

    color:
        #71808a;

    font-size:
        6px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


/* =====================================================
   HORAS EXTRA
===================================================== */

.report-extra-value {
    font-weight:
        750;
}


.report-extra-value.has-extra {
    color:
        #8a5a00;
}


.report-extra-authorized {
    display:
        block;

    margin-top:
        2px;

    color:
        #8a5a00;

    font-size:
        6px;

    font-weight:
        700;
}


/* =====================================================
   ESTADOS
===================================================== */

.report-status {
    padding:
        3px 5px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    max-width:
        100%;

    border-radius:
        999px;

    font-size:
        6.5px;

    font-weight:
        800;

    line-height:
        1.2;

    white-space:
        nowrap;
}


.report-status-attendance {
    color:
        #246b49;

    background:
        #e7f5ed;
}


.report-status-incomplete {
    color:
        #8a5700;

    background:
        #fff3d7;
}


.report-status-absence {
    color:
        #a23d36;

    background:
        #fbe8e6;
}


.report-status-justified {
    color:
        #087078;

    background:
        #e4f4f4;
}


/* =====================================================
   FILA VACÍA
===================================================== */

.report-empty {
    padding:
        18px !important;

    color:
        #66737d;

    text-align:
        center;
}


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

.report-note {
    margin-top:
        18px;

    padding:
        11px 12px;

    color:
        #315e61;

    background:
        #eef8f8;

    border:
        1px solid
        #cce4e5;

    border-left:
        4px solid
        #087a83;

    border-radius:
        7px;
}


.report-note strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #164e52;

    font-size:
        9px;
}


.report-note p {
    margin:
        0;

    font-size:
        8px;

    line-height:
        1.5;
}


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

.report-signatures {
    margin-top:
        70px;

    display:
        grid;

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

    gap:
        70px;

    text-align:
        center;
}


.report-signature-line {
    height:
        28px;

    margin-bottom:
        7px;

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


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


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

    font-size:
        9px;
}


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

    color:
        #69757e;

    font-size:
        8px;
}


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

.report-footer {
    margin-top:
        35px;

    padding-top:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #66737d;

    border-top:
        1px solid
        #d6dee5;

    font-size:
        8px;
}


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

    font-size:
        8px;
}


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

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    background:
        #ffffff;

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


.checks-pdf-cancel,
.checks-pdf-generate {
    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;
}


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

    background:
        #ffffff;

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


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

    border-color:
        #b9c7d1;

    transform:
        translateY(-1px);
}


.checks-pdf-generate {
    color:
        #ffffff;

    background:
        var(--brand);

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


.checks-pdf-generate:hover {
    background:
        var(--brand-dark);

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

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

    transform:
        translateY(-1px);
}


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


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

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

    outline-offset:
        2px;
}


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

@media (max-width: 840px) {

    .checks-pdf-preview {
        padding:
            14px;
    }


    .attendance-report-sheet {
        transform-origin:
            top left;
    }

}


@media (max-width: 520px) {

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


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

        border-radius:
            13px;
    }


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

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .checks-pdf-cancel,
    .checks-pdf-generate {
        width:
            100%;
    }

}


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

@keyframes checksPdfIn {

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


    .checks-pdf-modal {
        position:
            static;

        display:
            block !important;

        opacity:
            1 !important;

        pointer-events:
            auto;
    }


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


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

        width:
            auto;

        height:
            auto;

        overflow:
            visible;

        padding:
            0;

        background:
            #ffffff;

        box-shadow:
            none;
    }


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

        min-height:
            297mm;

        margin:
            0;

        padding:
            12mm;

        box-shadow:
            none;
    }

}


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

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

    .checks-pdf-window,
    .checks-pdf-close,
    .checks-pdf-cancel,
    .checks-pdf-generate {
        animation:
            none;

        transition:
            none;
    }

}