/* ==========================================================================
   Tablas: que se vean como tablas y no como listas.

   Aplica a toda <table> dentro del contenido (.ss-page), sin tocar cada página:
   encabezado con fondo y línea marcada, líneas verticales tenues entre
   columnas, filas alternadas y resaltado al pasar el mouse.
   ========================================================================== */

.ss-page table {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.ss-page thead th {
    background: #f3f4f6;
    color: #5B636B;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid #dfe2e6;
    white-space: nowrap;
}

/* El tr del thead traía bg-gray-50 + border; el th manda. */
.ss-page thead tr { background: transparent; border: 0; }

.ss-page tbody td {
    border-bottom: 1px solid #eceef1;
    vertical-align: middle;
}
.ss-page tbody tr:last-child td { border-bottom: 0; }

.ss-page :is(th, td) + :is(th, td) { border-left: 1px solid #eceef1; }
.ss-page thead :is(th, td) + :is(th, td) { border-left-color: #e3e6e9; }

.ss-page tbody tr:nth-child(even) { background: #fafafb; }
.ss-page tbody tr:hover { background: #fff4ec; }
.ss-page tbody tr[class*="cursor-pointer"]:hover td:first-child { box-shadow: inset 3px 0 0 #F26A21; }

/* Botón de orden dentro del th: hereda el estilo del encabezado. */
.ss-th-orden { font-size: inherit; letter-spacing: inherit; color: inherit; }
.ss-th-orden:hover { color: #1E2226; }

/* Tabla dentro de tarjeta: que el encabezado llegue al borde redondeado. */
.ss-page .rounded-xl > .overflow-x-auto:first-child table thead th:first-child { border-top-left-radius: .75rem; }
.ss-page .rounded-xl > .overflow-x-auto:first-child table thead th:last-child { border-top-right-radius: .75rem; }

/* Buscador type=search: sin la "x" nativa que desentona en Chrome. */
.ss-barra-tabla input[type=search]::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

/* ------------------------------- Oscuro ------------------------------- */

html.dark .ss-page thead th {
    background: #22262b;
    color: #8c939a;
    border-bottom-color: #3a4047;
}
html.dark .ss-page tbody td { border-bottom-color: #2a2e33; }
html.dark .ss-page :is(th, td) + :is(th, td) { border-left-color: #2a2e33; }
html.dark .ss-page thead :is(th, td) + :is(th, td) { border-left-color: #33383e; }
html.dark .ss-page tbody tr:nth-child(even) { background: #1b1f23; }
html.dark .ss-page tbody tr:hover { background: #2a2f35; }
html.dark .ss-th-orden:hover { color: #e2e8f0; }
html.dark .ss-th-orden.text-blue-700 { color: #ffa270; }