/* ============================================================
   Tabla ligera (reemplazo de DataTables)
   Estilos de la barra de búsqueda, ordenamiento, paginación y
   apariencia corporativa de las tablas gestionadas por tabla.js.
   ============================================================ */

/* ---- Encabezados ordenables ---- */
.tabla-ligera th.tabla-ordenable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.35rem;
}

.tabla-ligera th.tabla-ordenable::after {
    content: "\2195"; /* ↕ */
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    font-size: 0.8em;
}

.tabla-ligera th.tabla-ordenable.tabla-asc::after {
    content: "\2191"; /* ↑ */
    opacity: 1;
    color: var(--aa-dorado, #DCBE61);
}

.tabla-ligera th.tabla-ordenable.tabla-desc::after {
    content: "\2193"; /* ↓ */
    opacity: 1;
    color: var(--aa-dorado, #DCBE61);
}

/* ---- Apariencia corporativa de la tabla ---- */
.tabla-ligera thead th {
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%) !important;
    color: #fff !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase !important;
    padding: 0.9rem 1rem !important;
    border-bottom: 2px solid var(--aa-dorado, #DCBE61) !important;
    vertical-align: middle;
}

.tabla-ligera tbody td {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    color: #2a2a2a;
    vertical-align: middle;
}

.tabla-ligera tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.tabla-ligera tbody tr:hover {
    background-color: rgba(194, 34, 25, 0.05); /* rojo corporativo tenue */
}

/* ---- Barra de búsqueda ---- */
.tabla-barra .input-group-text {
    background-color: transparent;
    border-right: 0;
}

.tabla-barra .tabla-buscar {
    border-left: 0;
}

.tabla-barra .tabla-buscar:focus {
    border-color: var(--aa-rojo, #C22219);
    box-shadow: 0 0 0 0.2rem rgba(194, 34, 25, 0.15);
}

.tabla-barra .input-group:focus-within .input-group-text {
    border-color: var(--aa-rojo, #C22219);
}

/* ---- Pie: info + paginación ---- */
.tabla-pie .pagination {
    flex-wrap: wrap;
    gap: 2px;
}

.tabla-pie .page-link {
    color: #2a2a2a;
    border-radius: 6px;
    border-color: var(--eg-border, #e4e6ea);
    transition: all 0.15s ease-in-out;
}

.tabla-pie .page-link:hover {
    background: linear-gradient(135deg, var(--aa-rojo, #C22219) 0%, var(--aa-rojo-dark, #A01C15) 100%);
    border-color: var(--aa-rojo, #C22219);
    color: #fff;
}

.tabla-pie .page-item.active .page-link {
    background: linear-gradient(135deg, var(--aa-rojo, #C22219) 0%, var(--aa-rojo-dark, #A01C15) 100%);
    border-color: var(--aa-rojo, #C22219);
    color: #fff;
    box-shadow: 0 2px 8px rgba(194, 34, 25, 0.3);
}

.tabla-pie .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: transparent;
}

.tabla-pie .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(194, 34, 25, 0.2);
}

.tabla-pie .tabla-info {
    color: #666;
}