/* ═══════════════════════════════════════════════════════════════════════════
   TEMA-DATOS.CSS — Presentación de datos (tablas, paginación)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de tema.css: es la última capa y la que manda.

   Alcance: SOLO presentación de datos.
     · Tablas Bootstrap (.table y variantes)
     · Envoltorios propios (.table-card-wrap, .filter-panel)
     · Paginación de Bootstrap (.pagination) — la usa el paginado propio
     · Estados de tabla (sin datos / cargando) y spinners
     · Badges de estado DENTRO de tablas

   Fuera de alcance (los cubre tema.css u otro agente):
     .leyenda-tabla · body/contenedores/.card · navbar · alertas · scrollbars
     · foco · .dash-badge y sus .badge-* (son del dashboard)

   Notas de cascada (por qué hay tanto !important):
     · elegante.css pinta celdas con `color:#2a2a2a !important` en selectores de
       especificidad (0,2,2) → hay que igualar o superar ESA especificidad,
       no basta con !important. De ahí los selectores con `>` explícitos.
     · elegante.css y cascade.css usan degradados fijos en cabeceras y
       paginación → se neutralizan con `background-image:none`.

   Todos los colores salen de los tokens --t-* de tema.css. Las únicas
   excepciones son superposiciones neutras rgba()/triplete blanco-negro que
   Bootstrap exige en formato "R, G, B".
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. CONTRATO DE VARIABLES DE TABLA DE BOOTSTRAP 5.3
      Bootstrap dibuja las tablas con variables (--bs-table-*): el fondo de las
      celdas es `background-color:var(--bs-table-bg)` y el rayado/hover se
      pintan con `box-shadow: inset 0 0 0 9999px <color>`. Mapeando estas
      variables a los tokens tematizamos .table-striped, .table-hover,
      .table-active y .table-bordered de una sola vez y sin tocar el rayado
      celda a celda.
   ─────────────────────────────────────────────────────────────────────────── */
.table {
    --bs-table-color:         var(--t-text);
    --bs-table-bg:            var(--t-surface);
    --bs-table-border-color:  var(--t-border);
    --bs-table-accent-bg:     transparent;

    /* Filas alternas: superficie sutil, nunca negro (requisito del rediseño) */
    --bs-table-striped-color: var(--t-text);
    --bs-table-striped-bg:    var(--t-surface-2);

    /* Hover de fila */
    --bs-table-hover-color:   var(--t-text);
    --bs-table-hover-bg:      var(--t-surface-3);

    /* Fila marcada como activa */
    --bs-table-active-color:  var(--t-text);
    --bs-table-active-bg:     var(--t-surface-3);

    border-color: var(--t-border) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. TABLAS — BASE
   ─────────────────────────────────────────────────────────────────────────── */

/* Celdas del cuerpo. Los selectores con `>` suben la especificidad a (0,1,3)
   para ganarle a `.table tbody td` (0,1,2) de elegante.css, que fija
   color:#2a2a2a y dejaría texto negro sobre fondo negro en oscuro. */
.table > tbody > tr > td,
.table > tbody > tr > th {
    color: var(--t-text) !important;
    background-color: var(--t-surface);
    border-color: var(--t-border-subtle) !important;
    vertical-align: middle !important;
}

/* Separador horizontal de 1px entre filas (minimalismo: sin marcos) */
.table > tbody > tr {
    border-color: var(--t-border-subtle) !important;
}

/* Última fila sin línea: el borde lo pone el envoltorio */
.table:not(.table-bordered) > tbody > tr:last-child > td,
.table:not(.table-bordered) > tbody > tr:last-child > th {
    border-bottom-width: 0 !important;
}

/* Cabecera genérica (sin .table-dark) */
.table > thead > tr > th,
.table > thead > tr > td {
    background-color: var(--t-surface-2) !important;
    background-image: none !important;
    color: var(--t-text) !important;
    border-bottom: 1px solid var(--t-border-strong) !important;
    font-weight: 600 !important;
}

/* Pie de tabla (totales) */
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    background-color: var(--t-surface-2) !important;
    background-image: none !important;
    color: var(--t-text) !important;
    border-top: 1px solid var(--t-border-strong) !important;
    font-weight: 600 !important;
}

/* ── .table-dark ────────────────────────────────────────────────────────────
   Todos los thead del sistema usan class="table-dark". El diseño anterior lo
   pintaba con un degradado slate #1E293B→#0F172A y borde ámbar de 2px.
   Rediseño minimalista: cabecera sobria de superficie + 1px de borde, legible
   en claro y sin desentonar en oscuro. Se neutralizan también las variables
   propias de Bootstrap para .table-dark (que fijan #212529).                */
.table-dark,
.table > thead.table-dark,
.table > tbody.table-dark {
    --bs-table-color:         var(--t-text);
    --bs-table-bg:            var(--t-surface-2);
    --bs-table-border-color:  var(--t-border);
    --bs-table-striped-color: var(--t-text);
    --bs-table-striped-bg:    var(--t-surface-3);
    --bs-table-active-color:  var(--t-text);
    --bs-table-active-bg:     var(--t-surface-3);
    --bs-table-hover-color:   var(--t-text);
    --bs-table-hover-bg:      var(--t-surface-3);
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}

/* (0,2,3) para superar `.table thead.table-dark th` (0,2,2) de elegante.css */
.table > thead.table-dark > tr > th,
.table > thead.table-dark > tr > td {
    background: var(--t-surface-2) !important;
    background-image: none !important;   /* mata el degradado slate */
    color: var(--t-text) !important;
    border-bottom: 1px solid var(--t-border-strong) !important;
    border-color: var(--t-border) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 0.7rem 0.9rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

/* ── Variantes de .table ──────────────────────────────────────────────────── */

/* Rayado: el color efectivo viene de --bs-table-striped-bg (--t-surface-2).
   Se declara aquí también sobre la celda porque elegante.css raya el <tr>
   con rgba() fija; al ser el fondo de la celda opaco, aquel queda anulado.  */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    --bs-table-bg-type: var(--t-surface-2);
    color: var(--t-text) !important;
}

/* Hover de fila */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    --bs-table-bg-state: var(--t-surface-3);
    color: var(--t-text) !important;
}

/* Densidad compacta */
.table-sm > :not(caption) > * > * {
    padding: 0.4rem 0.6rem !important;
}

/* Rejilla completa: borde algo más marcado que el separador de filas */
.table-bordered > :not(caption) > * > * {
    border-color: var(--t-border) !important;
    border-width: 1px !important;
}
.table-bordered > tbody > tr:last-child > td,
.table-bordered > tbody > tr:last-child > th {
    border-bottom-width: 1px !important;
}

/* Contenedor con desplazamiento horizontal. Sin fondo propio para no tapar el
   radio del envoltorio; las barras las tematiza tema.css. */
.table-responsive {
    background: transparent;
}
.table-responsive > .table {
    margin-bottom: 0 !important;
}

/* Celdas de utilidad alineadas a números (finanzas) */
.table > tbody > tr > td.text-end,
.table > tfoot > tr > td.text-end,
.table > tfoot > tr > th.text-end {
    font-variant-numeric: tabular-nums !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. CLASES PROPIAS DEL SISTEMA
   ─────────────────────────────────────────────────────────────────────────── */

/* Envoltorio de tablas: tarjeta sobria que recorta el radio de la cabecera */
.table-card-wrap {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;   /* minimalismo: la separa el borde, no la sombra */
    overflow: hidden;
    margin-bottom: 0;
}
.table-card-wrap .table {
    margin-bottom: 0 !important;
}
/* Radio interior = radio del envoltorio menos su borde de 1px */
.table-card-wrap .table > thead.table-dark > tr > th:first-child,
.table-card-wrap .table > thead > tr > th:first-child {
    border-top-left-radius: calc(var(--t-radius) - 1px);
}
.table-card-wrap .table > thead.table-dark > tr > th:last-child,
.table-card-wrap .table > thead > tr > th:last-child {
    border-top-right-radius: calc(var(--t-radius) - 1px);
}

/* Panel de filtros: superficie sutil hundida sobre el contenedor */
.filter-panel {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-text) !important;
}
/* elegante.css fija color:#555 en estas etiquetas → ilegibles en oscuro */
.filter-panel .form-label,
.filter-panel label,
.filter-panel .leyenda {
    color: var(--t-text-muted) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. PAGINACIÓN DE BOOTSTRAP
      La usa el paginado propio del sistema (scripts/*.js genera
      <ul class="pagination">).
   ─────────────────────────────────────────────────────────────────────────── */
.pagination {
    --bs-pagination-color:               var(--t-text-muted);
    --bs-pagination-bg:                  var(--t-surface);
    --bs-pagination-border-color:        var(--t-border);
    --bs-pagination-border-radius:       var(--t-radius-sm);
    --bs-pagination-hover-color:         var(--t-text);
    --bs-pagination-hover-bg:            var(--t-surface-3);
    --bs-pagination-hover-border-color:  var(--t-border-strong);
    --bs-pagination-focus-color:         var(--t-text);
    --bs-pagination-focus-bg:            var(--t-surface-3);
    --bs-pagination-focus-box-shadow:    var(--t-ring);
    --bs-pagination-active-color:        var(--t-primary-contrast);
    --bs-pagination-active-bg:           var(--t-primary);
    --bs-pagination-active-border-color: var(--t-primary);
    --bs-pagination-disabled-color:      var(--t-text-faint);
    --bs-pagination-disabled-bg:         var(--t-surface);
    --bs-pagination-disabled-border-color: var(--t-border-subtle);
}

/* elegante.css fija color/borde con !important en (0,2,1) → se replica el
   selector para ganar por orden de carga. */
.pagination .page-link {
    background-color: var(--t-surface) !important;
    background-image: none !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text-muted) !important;
    box-shadow: none !important;
    transition: var(--t-transition) !important;
}
.pagination .page-link:hover {
    background-color: var(--t-surface-3) !important;
    border-color: var(--t-border-strong) !important;
    color: var(--t-text) !important;
    transform: none !important;      /* sin desplazamiento (minimalismo) */
    box-shadow: none !important;
}
/* (0,3,1), igual que elegante.css; gana por orden de carga */
.pagination .page-item.active .page-link {
    background: var(--t-primary) !important;
    background-image: none !important;   /* mata el degradado */
    border-color: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.pagination .page-item.disabled .page-link {
    background-color: var(--t-surface) !important;
    background-image: none !important;
    border-color: var(--t-border-subtle) !important;
    color: var(--t-text-faint) !important;
    opacity: 1 !important;
}
.pagination .page-link:focus-visible {
    box-shadow: var(--t-ring) !important;
    z-index: 2;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. ESTADOS DE TABLA — "sin datos" y "cargando"
      Patrón real del sistema (scripts/*.js):
        <tr><td colspan="N" class="text-center text-muted py-3">Sin registros</td></tr>
        <tr><td colspan="N" class="text-center text-muted py-4">
            <div class="spinner-border spinner-border-sm me-2"></div>Cargando…</td></tr>
      `.text-muted` de Bootstrap es (0,1,0) y PIERDE contra el
      `color:#2a2a2a !important` (0,1,2) de elegante.css: en oscuro el texto y
      el spinner (que usa currentColor) quedaban casi invisibles. Estos
      selectores llegan a (0,2,3) y lo corrigen.
   ─────────────────────────────────────────────────────────────────────────── */
.table > tbody > tr > td.text-muted,
.table > tbody > tr > th.text-muted,
.table > tbody > tr > td .text-muted {
    color: var(--t-text-muted) !important;
}

/* Utilidades de color a nivel de celda: mismo problema de especificidad */
.table > tbody > tr > td.text-danger  { color: var(--t-danger) !important; }
.table > tbody > tr > td.text-success { color: var(--t-success) !important; }
.table > tbody > tr > td.text-warning { color: var(--t-warning) !important; }
.table > tbody > tr > td.text-info    { color: var(--t-info) !important; }
.table > tbody > tr > td.text-primary { color: var(--t-primary) !important; }
.table > tbody > tr > td.text-secondary { color: var(--t-text-muted) !important; }

/* Spinners: .spinner-border/.spinner-grow se dibujan con currentColor, así que
   basta con garantizar un color de texto legible en el contenedor. */
.table .spinner-border,
.table .spinner-grow {
    color: var(--t-text-muted);
    vertical-align: -0.125em;
}
/* Spinner suelto en paneles de carga (fuera de tabla, mismo patrón de datos) */
.table-card-wrap .spinner-border,
.table-card-wrap .spinner-grow {
    color: var(--t-text-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. BADGES DE ESTADO DENTRO DE TABLAS
      Solo se tocan los que van dentro de una tabla. Los .dash-badge /
      .badge-success|danger|warning|info|dark|muted son exclusivos del
      dashboard (scripts/index.js) y quedan fuera de este archivo.
      Aquí se corrigen las variantes de Bootstrap que se pierden en oscuro.
   ─────────────────────────────────────────────────────────────────────────── */
.table .badge {
    border-radius: var(--t-radius-sm) !important;
    font-weight: 600 !important;
}
/* .bg-light/.bg-dark se confunden con la superficie según el tema → se les da
   una superficie con borde para que siempre se lean como pastilla. */
.table .badge.bg-light,
.table .badge.bg-dark {
    background-color: var(--t-surface-3) !important;
    border: 1px solid var(--t-border-strong) !important;
    color: var(--t-text) !important;
}
/* .bg-warning (#ffc107) y .bg-info (#0dcaf0) de Bootstrap son claros en AMBOS
   temas (no dependen de data-bs-theme), pero .badge pone texto blanco encima:
   ~1.6:1 y ~2.1:1 → ilegible. Necesitan texto oscuro siempre. Los tokens de
   texto oscuro son opuestos según el tema, de ahí las dos reglas. */
.table .badge.bg-warning,
.table .badge.bg-info {
    color: var(--t-text) !important;          /* claro: texto oscuro del tema */
}
[data-tema="dark"] .table .badge.bg-warning,
[data-tema="dark"] .table .badge.bg-info {
    color: var(--t-text-invert) !important;   /* oscuro: el invertido es el oscuro */
}

/* ───────────────────────────────────────────────────────────────────────────
   8. AJUSTES SOLO PARA TEMA OSCURO
      Red de seguridad: en oscuro NADA de la presentación de datos debe quedar
      blanco. Las reglas anteriores ya usan tokens; esto cubre los fondos
      blancos fijos que cascade.css/elegante.css inyectan con !important.
   ─────────────────────────────────────────────────────────────────────────── */
[data-tema="dark"] .table,
[data-tema="dark"] .table-card-wrap {
    background-color: var(--t-surface) !important;
    background-image: none !important;
}

/* Celdas con .bg-white/.bg-light incrustadas en tablas */
[data-tema="dark"] .table > tbody > tr > td.bg-white,
[data-tema="dark"] .table > tbody > tr > th.bg-white,
[data-tema="dark"] .table > thead > tr > th.bg-white {
    background-color: var(--t-surface) !important;
    color: var(--t-text) !important;
}
[data-tema="dark"] .table > tbody > tr > td.bg-light,
[data-tema="dark"] .table > tbody > tr > th.bg-light,
[data-tema="dark"] .table > thead > tr > th.bg-light {
    background-color: var(--t-surface-2) !important;
    color: var(--t-text) !important;
}

/* Enlaces y botones-enlace dentro de celdas */
[data-tema="dark"] .table > tbody > tr > td a:not(.btn) {
    color: var(--t-primary);
}
[data-tema="dark"] .table > tbody > tr > td a:not(.btn):hover {
    color: var(--t-primary-hover);
}

/* ───────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE — densidad cómoda en pantallas pequeñas
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .table > thead.table-dark > tr > th {
        font-size: 0.7rem !important;
        padding: 0.55rem 0.6rem !important;
    }
    .table > tbody > tr > td {
        padding: 0.55rem 0.6rem !important;
    }
    .filter-panel {
        border-radius: var(--t-radius-sm) !important;
    }
}