/* ==============================================================================
   CRM-GREU — Components: Tables
   Extraído de components.css — ver ese archivo para las reglas realmente
   comunes/transversales que no encajan en ninguna estructura concreta.
   ============================================================================== */

/* --- Tables ----------------------------------------------------------------- */
.table-container {
    overflow-x: auto;
    /* overflow-y explícito (no heredar "auto" implícito de la spec CSS): sin
       esto, este contenedor se convierte en su propio scrollport y rompe
       position:sticky en cualquier cabecera de tabla dentro de él (se ancla
       a este contenedor, que nunca desborda verticalmente, en vez de a
       .content, que es el que de verdad hace scroll). */
    overflow-y: visible;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-bg);
}

.data-table tbody td {
    padding: 11px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background 0.1s;
    /* cursor: pointer; */
}

.data-table tbody tr.selectable {
    cursor: pointer;
}

.data-table tbody tr:hover {
    background: rgba(7, 27, 53, 0.02);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* .data-table-responsive: modificador opt-in — se añade JUNTO a .data-table
   (p.ej. class="data-table doc-entity-table data-table-responsive") en
   cualquier tabla que quiera pasar a "tarjeta por fila" en tablet/móvil en
   vez de forzar scroll horizontal. Aditivo: las tablas que no la lleven no
   se ven afectadas. El comportamiento real vive en el @media de
   apps/shared/css/responsive.css (único punto de @media compartidos del
   proyecto, ver la cabecera de ese archivo) — aquí solo se documenta.
   Requiere data-label="<texto del th>" en cada <td> (la etiqueta que se
   muestra en modo tarjeta); ver documents/partials/workers-level-content.php
   para el patrón de referencia (un único array PHP de columnas alimenta el
   <thead> y los data-label, para que no puedan desincronizarse).
   NO confundir con .table-responsive (más abajo en este archivo): esa es
   solo el wrapper con scroll horizontal, un concepto distinto. */

.table-actions {
    /* display: flex;
    gap: 6px;
    justify-content: flex-end; */
}

/* --- Tables within tabs --- */

.tab-card-body .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tab-card-body .table th {
    text-align: left;
    padding: 8px 8px 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--color-border-soft);
}

.tab-card-body .table td {
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    vertical-align: middle;
}

.tab-card-body .table tr:last-child td {
    border-bottom: none;
}

.table-responsive {
    overflow-x: auto;
    /* Ver comentario en .table-container: mismo fix, mismo motivo (rompía
       el sticky de .table-sticky-header en "Sesiones activas"). */
    overflow-y: visible;
}

/* Cabecera de tabla fija al hacer scroll — clase genérica, aplicable a
   cualquier .data-table/.table larga (usada primero en Registro de sesiones).
   Fondo/borde propios (más marcados que el .data-table thead th normal, que
   usa el mismo var(--color-bg) que la página y apenas se distingue del
   cuerpo): al quedar "flotando" sobre filas mientras se hace scroll necesita
   separarse visualmente, no solo funcionalmente. */
.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-strong);
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(7, 20, 38, 0.06);
}