/*
 * Tablas del dashboard — estilos de HRTable (web/js/dataTable.js).
 * Sin dependencias de DataTables.
 *
 * Escritorio: tabla clásica.
 * Tablet:     scroll horizontal dentro de la tarjeta.
 * Móvil:      cada fila se convierte en una tarjeta etiqueta:valor.
 */

/* ===== Contenedor tipo tarjeta ===== */
.hr-table-wrapper {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    padding: 16px 18px 12px;
    box-shadow: 0 8px 22px rgba(20, 34, 50, .06);
    margin-bottom: 22px;
}

/* ===== Barra superior ===== */
.hr-table-top,
.hr-table-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.hr-table-top { margin-bottom: 14px; }
.hr-table-bottom { margin-top: 14px; }

.dataTables_length {
    display: flex; align-items: center; gap: 10px;
    color: #4b5b6b; font-size: 13.5px;
}
.dataTables_length label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid #d3dce6;
    border-radius: 10px;
    background: #fff;
    color: #22303f;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.dataTables_length select { padding: 6px 10px; cursor: pointer; }
.dataTables_filter { display: flex; align-items: center; }
.dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: #445362; font-size: 13.5px; }
.dataTables_filter input { padding: 8px 12px; min-width: 240px; }
.dataTables_length select:focus,
.dataTables_filter input:focus,
.hr-filter:focus {
    outline: none;
    border-color: #79a9d8;
    box-shadow: 0 0 0 4px rgba(31, 127, 179, .14);
}

.hr-filter-clear {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #dde5ee; background: #fff; color: #4b5b6b;
    border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.hr-filter-clear:hover { background: #f4f7fb; color: #1f7fb3; border-color: #cfe0f1; }

/* ===== Scroll (tablet) ===== */
.hr-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Tabla ===== */
.hr-table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.hr-table-wrapper thead th {
    background: #f4f7fb;
    color: #33506b;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 13px 12px;
    border-bottom: 2px solid #e1e9f2;
    border-top: 0;
    /* que envuelvan: encabezados largos ya no estiran la tabla */
    white-space: normal;
    line-height: 1.25;
    vertical-align: middle;
    text-align: left;
}
.hr-table-wrapper thead th:first-child { border-top-left-radius: 10px; }
.hr-table-wrapper thead th:last-child { border-top-right-radius: 10px; }

.hr-table-wrapper tbody td {
    padding: 12px 14px;
    border-top: 1px solid #eef2f6;
    font-size: 14px;
    color: #22303f;
    vertical-align: middle;
}
.hr-table-wrapper tbody tr:hover td { background-color: #f3f9ff; }
.hr-table-wrapper tr.hr-empty td { text-align: center; color: #8593a3; padding: 28px 14px; }

/* indicadores de orden */
.hr-table-wrapper th.hr-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 26px; }
.hr-table-wrapper th.hr-sortable::after {
    content: "\2195"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    opacity: .28; font-size: 12px; font-weight: 400;
}
.hr-table-wrapper th.hr-sort-asc::after { content: "\2191"; opacity: .95; color: #1f7fb3; }
.hr-table-wrapper th.hr-sort-desc::after { content: "\2193"; opacity: .95; color: #1f7fb3; }
.hr-table-wrapper th.hr-sortable:hover { background: #eaf2fb; }

/* botones de acción compactos */
.hr-table-wrapper td .btn { border-radius: 8px; }
.hr-table-wrapper td .btn + .btn { margin-left: 2px; }

/* ===== Columna de acciones siempre visible =====
   Si la tabla es ancha y hay scroll horizontal, la columna de acciones
   queda fijada a la derecha en vez de esconderse al final. */
.hr-table-wrapper th.hr-col-actions,
.hr-table-wrapper td.hr-col-actions { white-space: nowrap; }
/* solo se fija cuando la tabla desborda (clase que pone el JS) */
.hr-table-wrapper.is-scrollable th.hr-col-actions,
.hr-table-wrapper.is-scrollable td.hr-col-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #fff;
    box-shadow: -10px 0 12px -10px rgba(20, 34, 50, .35);
}
.hr-table-wrapper.is-scrollable th.hr-col-actions { background: #f4f7fb; z-index: 4; }
.hr-table-wrapper.is-scrollable tbody tr:hover td.hr-col-actions { background: #f3f9ff; }

/* Celdas: ancho mínimo legible y quiebre solo cuando de verdad hace falta
   (así no se parten palabras a la mitad como "Martin ez"). */
.hr-table-wrapper thead th,
.hr-table-wrapper tbody td {
    min-width: 112px;
    overflow-wrap: break-word;
    word-break: normal;
}
.hr-table-wrapper th.hr-col-actions,
.hr-table-wrapper td.hr-col-actions { min-width: 0; }

/* ===== Botón "Filters" + panel desplegable ===== */
.hr-filter-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #dde5ee; background: #fff; color: #4b5b6b;
    border-radius: 9px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.hr-filter-toggle:hover { background: #f4f7fb; color: #1f7fb3; border-color: #cfe0f1; }
.hr-filter-toggle.is-open,
.hr-filter-toggle.has-filters { background: #eaf2fb; border-color: #bcd8ef; color: #176790; }
.hr-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px;
    background: #1f7fb3; color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}

.hr-filter-panel {
    background: #f8fbfe;
    border: 1px solid #e1ebf5;
    border-radius: 12px;
    padding: 16px 16px 12px;
    margin-bottom: 14px;
}
.hr-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 16px;
}
.hr-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hr-filter-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: #7b8b9b; margin: 0;
}
.hr-filter {
    width: 100%;
    border: 1px solid #dde5ee;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 13.5px;
    font-weight: 400;
    color: #34485c;
    background-color: #fff;
}
select.hr-filter { cursor: pointer; }
.hr-filter-panel__foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ===== Tabs (Employee: Active / Inactive) ===== */
.hr-content .nav-tabs {
    border: 0;
    gap: 6px;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #e7ecf3;
    display: inline-flex;
    box-shadow: 0 4px 12px rgba(20, 34, 50, .05);
    margin-bottom: 16px;
}
.hr-content .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #5b6b7c;
    background: transparent;
    transition: background .15s, color .15s;
}
.hr-content .nav-tabs .nav-link:hover { background: #f1f6fb; color: #1f7fb3; }
.hr-content .nav-tabs .nav-link.active {
    background: #1f7fb3;
    color: #fff;
    box-shadow: 0 5px 12px rgba(31, 127, 179, .28);
}
/* el contenedor con borde que envolvía a los tabs ya no hace falta */
.hr-content nav.border,
.hr-content .tab-content.border { border: 0 !important; padding: 0 !important; }

/* ===== Info y paginación ===== */
.dataTables_info { color: #7b8b9b; font-size: 13px; }
.dataTables_paginate { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paginate_button {
    border-radius: 9px;
    border: 1px solid #e1e9f2;
    background: #fff;
    color: #4b5b6b;
    padding: 6px 12px;
    font-size: 13.5px;
    cursor: pointer;
}
.paginate_button:hover:not(.disabled):not(.current) { background: #eef6fd; border-color: #cfe0f1; color: #176790; }
.paginate_button.current {
    background: #1f7fb3; border-color: #1f7fb3; color: #fff;
    box-shadow: 0 4px 10px rgba(31, 127, 179, .3);
}
.paginate_button.disabled { color: #c2ccd6; cursor: default; background: #fff; border-color: #eef2f6; }

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .hr-table-wrapper { padding: 14px 14px 10px; }
    .dataTables_filter input { min-width: 180px; }
}

/* ===== MÓVIL: cada fila es una tarjeta ===== */
@media (max-width: 767px) {
    .hr-table-wrapper { padding: 14px 12px 10px; border-radius: 12px; }

    .hr-table-top, .hr-table-bottom { flex-direction: column; align-items: stretch; }
    .dataTables_length { justify-content: space-between; flex-wrap: wrap; }
    .hr-filter-grid { grid-template-columns: 1fr; }
    .hr-filter-panel__foot { justify-content: stretch; }
    .hr-filter-panel__foot .hr-filter-clear { width: 100%; justify-content: center; }
    .hr-content .nav-tabs { display: flex; width: 100%; }
    .hr-content .nav-tabs .nav-link { flex: 1 1 0; text-align: center; padding: 8px 10px; }
    .dataTables_filter { width: 100%; }
    .dataTables_filter label { width: 100%; }
    .dataTables_filter input { width: 100%; min-width: 0; }
    .dataTables_paginate { justify-content: center; }
    .dataTables_info { text-align: center; }

    .hr-table-scroll { overflow-x: visible; }
    .hr-table-wrapper table,
    .hr-table-wrapper tbody,
    .hr-table-wrapper tr,
    .hr-table-wrapper td { display: block; width: 100%; }

    /* cabecera y fila de filtros se ocultan: el filtrado queda en el buscador */
    .hr-table-wrapper thead { display: none; }

    .hr-table-wrapper tbody tr {
        border: 1px solid #e7ecf3;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 4px 2px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 34, 50, .05);
    }
    .hr-table-wrapper tbody tr:hover td { background: transparent; }

    .hr-table-wrapper tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        border-top: 0;
        border-bottom: 1px solid #f1f5f9;
        padding: 10px 12px;
        text-align: right;
    }
    .hr-table-wrapper tbody td:last-child { border-bottom: 0; }
    /* en tarjetas no hace falta fijar acciones ni ancho mínimo */
    .hr-table-wrapper.is-scrollable th.hr-col-actions,
    .hr-table-wrapper.is-scrollable td.hr-col-actions { position: static; box-shadow: none; white-space: normal; }
    .hr-table-wrapper tbody td { min-width: 0; }
    .hr-table-wrapper tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #8593a3;
    }
    /* celda sin etiqueta (acciones): centrada y a todo lo ancho */
    .hr-table-wrapper tbody td:not([data-label])::before { content: ""; flex: 0; }
    .hr-table-wrapper tr.hr-empty td { display: block; text-align: center; }
    .hr-table-wrapper tr.hr-empty td::before { content: ""; }
}

/* ===== Barra de filtros rápidos (Applications) ===== */
.hr-prefilter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(20, 34, 50, .05);
}
.hr-prefilter__title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: #33506b;
    padding-bottom: 7px; margin-right: 4px;
}
.hr-prefilter__title .bi { color: #1f7fb3; }
.hr-prefilter__field { display: flex; flex-direction: column; gap: 5px; min-width: 165px; flex: 0 1 auto; }
.hr-prefilter__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #7b8b9b; margin: 0;
}
@media (max-width: 767px) {
    .hr-prefilter { align-items: stretch; }
    .hr-prefilter__title { padding-bottom: 0; }
    .hr-prefilter__field { min-width: 0; flex: 1 1 100%; }
}