/* =====================================================
   MINIALFA
   HISTORIAL DE PERMISOS
===================================================== */


/* =====================================================
   PÁGINA
===================================================== */

.permission-history-page {
    min-width: 0;
}


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

.permission-history-page svg,
.permission-detail-modal svg {
    flex: 0 0 auto;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


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

.permission-history-header {
    display: flex;

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

    gap: 18px;

    margin-bottom: 18px;
}


.permission-history-header > div {
    min-width: 0;
}


.permission-history-header > div > span {
    display: block;

    color: var(--accent-dark);

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

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


.permission-history-header h1 {
    margin: 4px 0;

    color: var(--brand-dark);

    font-size:
        clamp(
            1.35rem,
            2.3vw,
            1.8rem
        );

    line-height: 1.2;
}


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

    color: var(--muted);

    font-size: 0.86rem;
    line-height: 1.5;
}


/* =====================================================
   VOLVER
===================================================== */

.permission-history-back {
    min-height: 43px;

    padding: 8px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex: 0 0 auto;

    color: var(--brand);

    background: #ffffff;

    border: 1px solid var(--brand);
    border-radius: 10px;

    font-size: 0.78rem;
    font-weight: 750;

    text-decoration: none;
    white-space: nowrap;

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


.permission-history-back:hover {
    color: #ffffff;

    background: var(--brand);

    transform: translateY(-1px);
}


.permission-history-back:active {
    transform: scale(0.97);
}


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

.permission-history-summary {
    display: grid;

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

    gap: 12px;

    margin-bottom: 18px;
}


.permission-history-summary article {
    min-width: 0;

    padding: 15px 16px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-left: 5px solid var(--accent);

    border-radius: 12px;
}


.permission-history-summary span,
.permission-history-summary strong,
.permission-history-summary small {
    display: block;
}


.permission-history-summary span {
    margin-bottom: 7px;

    color: var(--muted);

    font-size: 0.67rem;
    font-weight: 750;

    text-transform: uppercase;
}


.permission-history-summary strong {
    margin-bottom: 3px;

    color: var(--brand-dark);

    font-size: 1.55rem;
    line-height: 1;
}


.permission-history-summary small {
    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 650;
}


.summary-total {
    border-left-color: var(--accent) !important;
}


.summary-upcoming {
    border-left-color: #175cd3 !important;
}


.summary-upcoming strong {
    color: #1849a9;
}


.summary-active {
    border-left-color: var(--success) !important;
}


.summary-active strong {
    color: var(--success);
}


.summary-finished {
    border-left-color: #667085 !important;
}


.summary-finished strong {
    color: #475467;
}


/* =====================================================
   CONTENEDORES
===================================================== */

.permission-history-filters,
.permission-history-results {
    background: var(--surface);

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

    border-radius: var(--radius);
}


.permission-history-filters {
    margin-bottom: 18px;

    padding: 18px;
}


.permission-history-results {
    min-width: 0;

    padding: 18px;
}


/* =====================================================
   CABECERAS
===================================================== */

.permission-history-filter-header,
.permission-history-results-header {
    display: flex;

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

    gap: 16px;
}


.permission-history-filter-header {
    margin-bottom: 15px;
}


.permission-history-filter-header span,
.permission-history-results-header span {
    display: block;

    color: var(--accent-dark);

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

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


.permission-history-filter-header strong {
    color: var(--brand-dark);

    font-size: 1.02rem;
}


.permission-history-results-header {
    margin-bottom: 14px;
}


.permission-history-results-header h2 {
    margin: 3px 0 0;

    color: var(--brand-dark);

    font-size: 1.16rem;
}


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

.permission-history-results-header > strong {
    padding: 5px 9px;

    color: #075985;

    background: #e7f2f8;

    border-radius: 999px;

    font-size: 0.72rem;
}


/* =====================================================
   LIMPIAR FILTROS
===================================================== */

.permission-clear-filters {
    min-height: 39px;

    padding: 7px 11px;

    color: var(--brand);

    background: #ffffff;

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

    border-radius: 9px;

    font-size: 0.75rem;
    font-weight: 750;

    cursor: pointer;

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


.permission-clear-filters:hover {
    color: var(--danger);

    background: var(--danger-soft);

    border-color: #e5a49f;

    transform: translateY(-1px);
}


/* =====================================================
   FILTROS
===================================================== */

.permission-history-filter-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        repeat(
            4,
            minmax(125px, 0.7fr)
        );

    gap: 11px;
}


.permission-history-filter-grid label {
    min-width: 0;

    display: grid;

    gap: 5px;

    color: var(--text);

    font-size: 0.75rem;
    font-weight: 750;
}


.permission-history-filter-grid input,
.permission-history-filter-grid select {
    width: 100%;
    min-height: 42px;

    padding: 8px 10px;

    color: var(--text);

    background: #ffffff;

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

    font-size: 0.78rem;

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


.permission-history-filter-grid input:focus,
.permission-history-filter-grid select:focus {
    outline: none;

    border-color: var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(8, 122, 131, 0.12);
}


/* =====================================================
   BUSCADOR
===================================================== */

.permission-search-field > div {
    position: relative;
}


.permission-search-field svg {
    position: absolute;

    top: 50%;
    left: 11px;

    color: var(--muted);

    pointer-events: none;

    transform: translateY(-50%);
}


.permission-search-field input {
    padding-left: 36px;
}


/* =====================================================
   LISTA
===================================================== */

.permission-history-list {
    display: grid;

    gap: 9px;
}


/* =====================================================
   CRÍTICO PARA LOS FILTROS
===================================================== */

.permission-history-card[hidden] {
    display: none !important;
}


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

.permission-history-card {
    position: relative;

    min-width: 880px;

    padding:
        12px
        12px
        12px
        17px;

    display: grid;

    grid-template-columns:
        minmax(205px, 1.3fr)
        minmax(115px, 0.68fr)
        minmax(140px, 0.82fr)
        minmax(145px, 0.85fr)
        minmax(95px, 0.55fr)
        auto;

    align-items: center;

    gap: 11px;

    overflow: hidden;

    background: #ffffff;

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

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


.permission-history-card:hover {
    background: #fbfcfd;

    border-color: #c8d3dc;

    transform: translateY(-1px);
}


/* =====================================================
   ACENTO
===================================================== */

.permission-card-accent {
    position: absolute;

    inset: 0 auto 0 0;

    width: 5px;

    background: var(--accent);
}


.permission-accent-vacation {
    background: #175cd3;
}


.permission-accent-personal {
    background: var(--purple);
}


.permission-accent-disability {
    background: var(--danger);
}


.permission-accent-commission {
    background: var(--success);
}


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

.permission-card-person {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;
}


.permission-card-avatar,
.permission-detail-avatar {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #ffffff;

    background: var(--brand);

    border-radius: 50%;

    font-size: 0.74rem;
    font-weight: 800;
}


.permission-card-person > div:last-child {
    min-width: 0;
}


.permission-card-person strong,
.permission-card-person span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.permission-card-person strong {
    color: var(--brand-dark);

    font-size: 0.8rem;
}


.permission-card-person span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.68rem;
}


/* =====================================================
   COLUMNAS
===================================================== */

.permission-card-type,
.permission-card-date,
.permission-card-description,
.permission-card-status,
.permission-card-action {
    min-width: 0;
}


.permission-card-date span,
.permission-card-description span {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 0.65rem;
}


.permission-card-date strong,
.permission-card-description strong {
    display: block;

    overflow: hidden;

    color: var(--text);

    font-size: 0.76rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =====================================================
   BADGES
===================================================== */

.permission-type-badge,
.permission-status-badge {
    min-height: 26px;

    padding: 4px 8px;

    display: inline-flex;

    align-items: center;

    border-radius: 999px;

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

    white-space: nowrap;
}


/* TIPOS */

.permission-type-vacation {
    color: #1849a9;

    background: #e8f2ff;
}


.permission-type-personal {
    color: var(--purple);

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


.permission-type-disability {
    color: var(--danger);

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


.permission-type-commission {
    color: var(--success);

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


/* ESTADOS */

.permission-status-badge {
    color: #3e4c59;

    background: #edf0f3;
}


.permission-status-upcoming {
    color: #1849a9;

    background: #e8f2ff;
}


.permission-status-active {
    color: var(--success);

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


.permission-status-finished {
    color: #475467;

    background: #edf0f3;
}


.permission-status-cancelled {
    color: var(--danger);

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


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

.permission-view-detail {
    min-height: 37px;

    padding: 6px 9px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    color: var(--brand);

    background: #ffffff;

    border: 1px solid var(--brand);
    border-radius: 8px;

    font-size: 0.73rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}


.permission-view-detail:hover {
    color: #ffffff;

    background: var(--brand);

    transform: translateY(-1px);
}


/* =====================================================
   SCROLL DE RESULTADOS
===================================================== */

.permission-history-results {
    overflow-x: auto;

    scrollbar-width: thin;
}


/* =====================================================
   VACÍO
===================================================== */

.permission-history-empty[hidden] {
    display: none !important;
}


.permission-history-empty {
    padding: 34px 18px;

    color: var(--muted);

    text-align: center;
}


.permission-history-empty > div {
    width: 50px;
    height: 50px;

    margin: 0 auto 11px;

    display: grid;
    place-items: center;

    color: var(--brand);

    background: #edf2f4;

    border-radius: 50%;
}


.permission-history-empty strong,
.permission-history-empty span {
    display: block;
}


.permission-history-empty strong {
    color: var(--brand-dark);
}


.permission-history-empty span {
    margin-top: 3px;

    font-size: 0.76rem;
}


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

.permission-detail-modal {
    position: fixed;

    inset: 0;

    z-index: 1200;

    display: none;

    place-items: center;

    padding: 18px;
}


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


.permission-detail-backdrop {
    position: absolute;

    inset: 0;

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

    backdrop-filter: blur(3px);

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


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

.permission-detail-window {
    position: relative;

    z-index: 1;

    width: min(100%, 680px);

    max-height:
        calc(100vh - 36px);

    overflow-y: auto;

    background: #ffffff;

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

    box-shadow:
        0 26px 75px
        rgba(0, 0, 0, 0.30);

    scrollbar-width: thin;
}


.permission-detail-modal.show
.permission-detail-window {
    animation:
        permissionDetailIn
        0.22s ease-out;
}


@keyframes permissionDetailIn {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

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

}


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

.permission-detail-header {
    padding: 18px 20px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

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


.permission-detail-header-content {
    min-width: 0;
}


.permission-detail-header-content > span {
    display: block;

    color: var(--accent-dark);

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

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


.permission-detail-header h2 {
    margin: 3px 0;

    color: var(--brand-dark);

    font-size: 1.23rem;
}


.permission-detail-header p {
    margin: 0;

    color: var(--muted);

    font-size: 0.76rem;
}


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

.permission-detail-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;
}


.permission-detail-close:hover {
    color: var(--danger);

    background: var(--danger-soft);

    border-color: #e5a49f;

    transform: translateY(-1px);
}


.permission-detail-close:active {
    transform: scale(0.94);
}


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

.permission-detail-employee {
    margin: 18px 20px;

    padding: 12px;

    display: grid;

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

    align-items: center;

    gap: 11px;

    background: var(--surface-soft);

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


.permission-detail-person {
    min-width: 0;
}


.permission-detail-person span,
.permission-detail-person strong,
.permission-detail-person small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.permission-detail-person span,
.permission-detail-person small {
    color: var(--muted);

    font-size: 0.7rem;
}


.permission-detail-person strong {
    margin: 1px 0;

    color: var(--brand-dark);

    font-size: 0.82rem;
}


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

.permission-detail-content {
    padding:
        0
        20px
        20px;

    display: grid;

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

    gap: 9px;
}


.permission-detail-field {
    min-width: 0;

    padding: 10px 11px;

    background: #f8fafb;

    border: 1px solid #dce3e8;
    border-radius: 8px;
}


.permission-detail-field.full {
    grid-column: 1 / -1;
}


.permission-detail-field span,
.permission-detail-field strong {
    display: block;
}


.permission-detail-field span {
    margin-bottom: 3px;

    color: var(--muted);

    font-size: 0.64rem;
    font-weight: 700;

    text-transform: uppercase;
}


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

    font-size: 0.78rem;

    overflow-wrap: anywhere;
}


.permission-detail-field p {
    margin: 0;

    color: var(--text);

    font-size: 0.76rem;

    line-height: 1.5;

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


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

.permission-detail-actions {
    padding: 14px 20px;

    display: flex;

    justify-content: flex-end;

    gap: 9px;

    background: var(--surface-soft);

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


.permission-detail-primary,
.permission-detail-secondary {
    min-height: 41px;

    padding: 8px 13px;

    border-radius: 9px;

    font-size: 0.76rem;
    font-weight: 750;

    cursor: pointer;

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


.permission-detail-secondary {
    color: var(--text);

    background: #ffffff;

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


.permission-detail-secondary:hover {
    background: #f4f7f8;

    border-color: #b9c7d1;

    transform: translateY(-1px);
}


.permission-detail-primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    background: var(--brand);

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


.permission-detail-primary:hover {
    background: var(--brand-dark);

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

    transform: translateY(-1px);
}


.permission-detail-primary:active,
.permission-detail-secondary:active {
    transform: scale(0.97);
}


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

.permission-history-back:focus-visible,
.permission-clear-filters:focus-visible,
.permission-view-detail:focus-visible,
.permission-detail-close:focus-visible,
.permission-detail-primary:focus-visible,
.permission-detail-secondary:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.15);

    outline-offset: 2px;
}


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

@media (max-width: 1120px) {

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


    .permission-history-filter-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .permission-search-field {
        grid-column: span 2;
    }

}


@media (max-width: 700px) {

    .permission-history-header {
        display: grid;
    }


    .permission-history-back {
        justify-self: start;
    }


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


    .permission-search-field {
        grid-column: 1 / -1;
    }

}


@media (max-width: 500px) {

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


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


    .permission-search-field {
        grid-column: auto;
    }


    .permission-history-filter-header,
    .permission-history-results-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .permission-detail-content {
        grid-template-columns: 1fr;
    }


    .permission-detail-field.full {
        grid-column: auto;
    }


    .permission-detail-employee {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .permission-detail-employee
    > .permission-status-badge {
        grid-column: 1 / -1;

        justify-self: start;
    }


    .permission-detail-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

}


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

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

    .permission-history-card,
    .permission-history-back,
    .permission-clear-filters,
    .permission-view-detail,
    .permission-detail-window,
    .permission-detail-close,
    .permission-detail-primary,
    .permission-detail-secondary {
        animation: none;

        transition: none;
    }

}