/* =====================================================
   MINIALFA
   HISTORIAL DE CHECADAS
===================================================== */


/* =====================================================
   SVG DEL MÓDULO
===================================================== */

.history-panel svg,
.absence-panel svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =====================================================
   DISTRIBUCIÓN PRINCIPAL
===================================================== */

.history-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, 0.75fr);

    gap:
        20px;

    align-items:
        start;
}


/* =====================================================
   PANELES
===================================================== */

.history-panel,
.absence-panel {
    min-width:
        0;

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);
}


.history-panel {
    padding:
        clamp(
            18px,
            2.5vw,
            26px
        );
}


.absence-panel {
    padding:
        20px;
}


/* =====================================================
   ENCABEZADO HISTORIAL
===================================================== */

.history-header {
    margin-bottom:
        20px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;
}


.history-header-text {
    min-width:
        0;

    max-width:
        580px;
}


.history-eyebrow {
    display:
        block;

    color:
        var(--accent-dark);

    font-size:
        0.71rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.history-header-text h2 {
    margin:
        4px 0 5px;

    color:
        var(--brand-dark);

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.5rem
        );

    line-height:
        1.2;
}


.history-header-text p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.87rem;

    line-height:
        1.5;
}


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

.history-header-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        8px;
}


.history-calendar-button,
.history-pdf-button,
.history-back {
    min-height:
        42px;

    padding:
        8px 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

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

    border-radius:
        9px;

    font-size:
        0.79rem;

    font-weight:
        750;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


/* CONSULTAR */

.history-calendar-button {
    color:
        var(--accent-dark);

    background:
        #ffffff;
}


.history-calendar-button:hover {
    background:
        #edf9fa;

    border-color:
        #91c6c9;

    transform:
        translateY(-1px);
}


/* PDF */

.history-pdf-button {
    color:
        #ffffff;

    background:
        var(--brand);

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


.history-pdf-button:hover {
    background:
        var(--brand-dark);

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

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

    transform:
        translateY(-1px);
}


/* VOLVER */

.history-back {
    color:
        var(--brand);

    background:
        #ffffff;
}


.history-back:hover {
    color:
        var(--accent-dark);

    background:
        var(--surface-soft);

    border-color:
        #b8c9d3;

    transform:
        translateX(-2px);
}


.history-calendar-button:active,
.history-pdf-button:active,
.history-back:active {
    transform:
        translateY(1px)
        scale(0.97);
}


/* =====================================================
   LISTA DE CHECADAS
===================================================== */

.history-list {
    display:
        grid;

    gap:
        11px;
}


/* =====================================================
   TARJETA DE CHECADA
===================================================== */

.check-history-card {
    position:
        relative;

    min-width:
        0;

    padding:
        15px;

    display:
        grid;

    grid-template-columns:
        minmax(190px, 1.15fr)
        minmax(330px, 1fr);

    align-items:
        center;

    gap:
        18px;

    background:
        var(--surface-soft);

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

    border-left:
        5px solid
        var(--success);

    border-radius:
        12px;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


.check-history-card:hover {
    background:
        #ffffff;

    transform:
        translateY(-1px);
}


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

.check-history-card.attendance {
    border-left-color:
        var(--success);
}


.check-history-card.incomplete {
    border-left-color:
        var(--warning);
}


/* =====================================================
   PERSONA
===================================================== */

.history-person {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.history-avatar,
.absence-avatar {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    background:
        var(--brand);

    border-radius:
        50%;

    font-size:
        0.78rem;

    font-weight:
        800;
}


.history-person-data {
    min-width:
        0;
}


.history-person-data > span {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        0.75rem;
}


.history-name-row {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.history-name-row > strong {
    max-width:
        100%;

    overflow:
        hidden;

    color:
        var(--brand-dark);

    font-size:
        0.85rem;

    font-weight:
        780;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   BADGE CHECADA
===================================================== */

.check-status {
    min-height:
        24px;

    padding:
        3px 8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        0.67rem;

    font-weight:
        800;
}


.attendance-status {
    color:
        var(--success);

    background:
        var(--success-soft);
}


.incomplete-status {
    color:
        #9a5b00;

    background:
        var(--warning-soft);
}


/* =====================================================
   FECHA DEL REGISTRO
===================================================== */

.history-record-date {
    margin-top:
        6px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--muted);

    font-size:
        0.7rem !important;

    font-weight:
        650;
}


.history-record-date svg {
    flex:
        0 0 auto;

    color:
        var(--accent-dark);
}


/* =====================================================
   INFORMACIÓN DE JORNADA
===================================================== */

.history-times {
    min-width:
        0;

    display:
        grid;

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

    gap:
        8px;
}


/* =====================================================
   CAMPO
===================================================== */

.history-time-item {
    min-width:
        0;

    min-height:
        58px;

    padding:
        9px 10px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    background:
        #ffffff;

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

    border-radius:
        9px;

    transition:
        border-color 0.16s ease,
        background-color 0.16s ease;
}


.history-time-item > span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--muted);

    font-size:
        0.66rem;

    font-weight:
        650;

    line-height:
        1.2;
}


.history-time-item strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--brand-dark);

    font-size:
        0.81rem;

    font-weight:
        800;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   TIEMPO TRABAJADO
===================================================== */

.history-worked-time {
    background:
        #f8fbfc;
}


.history-worked-time strong {
    color:
        var(--accent-dark);
}


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

.history-overtime-item {
    min-width: 0;

    overflow: hidden;

    background:
        #f8fafb;
}


.history-overtime-value {
    width: 100%;

    min-width: 0;

    display: grid !important;

    grid-template-columns: 1fr;

    justify-items: start;

    gap: 4px;
}


.history-overtime-value strong {
    display: block;

    max-width: 100%;

    overflow: visible;

    color:
        var(--brand-dark);

    font-size:
        0.82rem;

    font-weight:
        800;

    line-height:
        1.2;

    text-overflow: clip;

    white-space: nowrap;
}


.history-overtime-value small {
    width: max-content;

    max-width: 100%;

    padding:
        3px 7px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        #7a4e00;

    background:
        var(--warning-soft);

    border-radius:
        999px;

    font-size:
        0.56rem;

    font-weight:
        800;

    line-height:
        1.2;

    white-space: nowrap;
}


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

.history-overtime-item.has-extra-time {
    background:
        #fffaf0;

    border-color:
        #e6cc91;
}


.history-overtime-item.has-extra-time > span {
    color:
        #8a5a00;
}


.history-overtime-item.has-extra-time
.history-overtime-value strong {
    color:
        #8a5a00;

    font-size:
        0.88rem;
}


/* =====================================================
   REGISTRO CON HORAS EXTRA
===================================================== */

.check-history-card.has-overtime {
    box-shadow:
        inset -3px 0 0
        rgba(203, 139, 24, 0.55);
}


/* =====================================================
   SIN REGISTRO
===================================================== */

.missing-check {
    color:
        var(--danger) !important;

    font-size:
        0.71rem !important;
}

/* =====================================================
   PANEL FALTAS
===================================================== */

.absence-header {
    margin-bottom:
        15px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;
}


.absence-header-title {
    min-width:
        0;
}


.absence-eyebrow {
    display:
        block;

    color:
        var(--danger);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.absence-header h2 {
    margin:
        3px 0 3px;

    color:
        var(--brand-dark);

    font-size:
        1.08rem;
}


.absence-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.76rem;

    line-height:
        1.4;
}


/* =====================================================
   CONTADOR
===================================================== */

.absence-count {
    min-width:
        32px;

    height:
        32px;

    padding:
        0 9px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--danger);

    background:
        var(--danger-soft);

    border:
        1px solid
        #edc3bf;

    border-radius:
        999px;

    font-size:
        0.76rem;

    font-weight:
        800;
}


/* =====================================================
   LISTA DE FALTAS
===================================================== */

.absence-list {
    display:
        grid;

    gap:
        11px;
}


/* =====================================================
   TARJETA FALTA
===================================================== */

.absence-card {
    padding:
        13px;

    background:
        var(--surface-soft);

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

    border-left:
        4px solid
        #e09189;

    border-radius:
        12px;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


.absence-card:hover {
    background:
        #ffffff;

    transform:
        translateY(-1px);
}


/* =====================================================
   PERSONA FALTA
===================================================== */

.absence-person {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.absence-avatar {
    width:
        38px;

    height:
        38px;

    font-size:
        0.71rem;
}


.absence-person-data {
    min-width:
        0;

    flex:
        1;
}


.absence-person-data strong,
.absence-person-data span {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.absence-person-data strong {
    color:
        var(--brand-dark);

    font-size:
        0.8rem;

    font-weight:
        770;
}


.absence-person-data span {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.7rem;
}


/* =====================================================
   ESTADO FALTA
===================================================== */

.absence-status-badge {
    margin-left:
        auto;

    padding:
        4px 8px;

    flex:
        0 0 auto;

    border-radius:
        999px;

    font-size:
        0.66rem;

    font-weight:
        800;
}


.absence-status-badge.pending {
    color:
        #9a5b00;

    background:
        var(--warning-soft);
}


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

.absence-detail {
    margin:
        12px 0;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

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

    font-size:
        0.77rem;
}


.absence-detail span {
    color:
        var(--muted);
}


.absence-detail strong {
    color:
        var(--brand-dark);

    font-size:
        0.75rem;
}


/* =====================================================
   JUSTIFICAR
===================================================== */

.justify-button {
    width:
        100%;

    min-height:
        40px;

    padding:
        8px 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #ffffff;

    background:
        var(--brand);

    border:
        0;

    border-radius:
        9px;

    font-size:
        0.78rem;

    font-weight:
        750;

    transition:
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


.justify-button:hover {
    background:
        var(--brand-dark);

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

    transform:
        translateY(-1px);
}


.justify-button:active {
    transform:
        translateY(1px)
        scale(0.98);
}


/* =====================================================
   ACCESIBILIDAD
===================================================== */

.history-calendar-button:focus-visible,
.history-pdf-button:focus-visible,
.history-back:focus-visible,
.justify-button:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


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

@media (max-width: 1180px) {

    .history-layout {
        grid-template-columns:
            1fr;
    }


    .absence-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 820px) {

    .history-header {
        display:
            grid;
    }


    .history-header-actions {
        justify-content:
            flex-start;
    }


    .check-history-card {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 620px) {

    .history-times {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .absence-list {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 540px) {

    .history-header-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .history-header-actions > * {
        width:
            100%;
    }


    .history-times {
        grid-template-columns:
            1fr 1fr;
    }


    .absence-person {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .absence-status-badge {
        margin-left:
            48px;
    }

}


@media (max-width: 390px) {

    .history-times {
        grid-template-columns:
            1fr;
    }


    .history-date-item {
        grid-column:
            auto;
    }

}


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

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

    .check-history-card,
    .absence-card,
    .history-calendar-button,
    .history-pdf-button,
    .history-back,
    .justify-button {
        transition:
            none;
    }

}