/* Estilos de la tabla en JS puro (web/js/tabla.js). Sustituyen a
   jquery.dataTables.min.css, que eran 17 KB para lo mismo. */

.tabla-barra {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .75rem 0 .5rem;
}
.tabla-barra .tabla-buscador { max-width: 280px; }
.tabla-barra .tabla-porpagina { width: auto; margin-left: auto; }

.tabla-aviso { font-size: 14px; }
.tabla-aviso:empty { display: none; }

.tabla-pie {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    font-size: 13px;
    color: #6c7d8e;
}
.tabla-pie .tabla-paginas { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.tabla-pie .tabla-indicador { min-width: 56px; text-align: center; }

/* Encabezados ordenables: el indicador va en ::after para no tocar el texto,
   que es lo que leen los filtros y los lectores de pantalla. */
th.tabla-ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.tabla-ordenable::after { content: ' ↕'; opacity: .25; font-size: .8em; }
th.tabla-ordenable:hover::after { opacity: .6; }
th.tabla-ordenable.orden-asc::after { content: ' ↑'; opacity: .9; }
th.tabla-ordenable.orden-desc::after { content: ' ↓'; opacity: .9; }
th.tabla-ordenable:focus-visible { outline: 2px solid #f2849e; outline-offset: -2px; }

/* Fila de filtros por columna. */
.tabla-fila-filtros th {
    padding: 4px 6px;
    background: #fafafa;
    border-top: 1px solid #e4e4e4;
}
.tabla-fila-filtros th:empty { background: #fff; border-top-color: transparent; }
.tabla-fila-filtros input,
.tabla-fila-filtros select { width: 100%; min-width: 90px; font-size: 12px; }

@media (max-width: 576px) {
    .tabla-barra { flex-wrap: wrap; }
    .tabla-barra .tabla-buscador { max-width: 100%; }
    .tabla-barra .tabla-porpagina { margin-left: 0; }
}