/**
 * data-table.css — Estándar unificado para tablas de datos y listados en App Skeleton
 * Conforme a APP_SKELETON_CODEX.md y sistema de diseño.
 */

.data-table-container,
.settings-data-container {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface);
    overflow: hidden;
    margin-bottom: var(--space-4, 16px);
}

/* Toolbar superior */
.data-table-toolbar,
.settings-data-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.data-table-search,
.settings-data-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.data-table-search-icon,
.settings-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
}

.data-table-search-input,
.settings-data-search-input {
    width: 100%;
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-3) !important;
    height: 34px !important;
    font-size: var(--font-size-sm) !important;
    border-radius: var(--radius-md) !important;
}

.data-table-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.data-table-count,
.settings-data-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* Envoltorio con scroll horizontal responsivo */
.data-table-wrap,
.roles-table-wrap,
.claves-tabla-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabla estándar */
.data-table,
.settings-data-container .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 13px);
    text-align: left;
}

.data-table th,
.data-table td,
.settings-data-container .table th,
.settings-data-container .table td {
    padding: var(--space-2) var(--space-3) !important;
    vertical-align: middle;
    line-height: 1.35;
    border-bottom: 1px solid var(--color-border);
}

.data-table thead th,
.settings-data-container .table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr:hover,
.settings-data-container .table tbody tr:hover {
    background: color-mix(in srgb, currentColor 3%, transparent);
}

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

.data-table tr[hidden],
.settings-data-container .table tr[hidden] {
    display: none !important;
}

/* Estado vacío */
.data-table-empty,
.settings-data-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.data-table-empty-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-2);
    opacity: 0.6;
}

.data-table-empty-text {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Barra de paginación estándar */
.data-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.data-table-pagination-info {
    color: var(--color-text-secondary);
}

.data-table-pagination-nav {
    display: flex;
    gap: var(--space-1);
}

/* Columna de nombre vertical (.user-name-col) conforme al Codex */
.data-table-name-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.data-table-name-title {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table-name-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Adaptación móvil — Transformación responsiva estándar de tablas a tarjetas verticales */
@media (max-width: 768px) {
    /* Toolbar adaptada a columna */
    .data-table-toolbar,
    .settings-data-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .data-table-search,
    .settings-data-search {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .data-table-toolbar-actions {
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }

    /* Contenedores con contención estricta horizontal */
    .data-table-container,
    .settings-data-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .data-table-wrap,
    .roles-table-wrap,
    .claves-tabla-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Tabla convertida en flujo vertical de tarjetas */
    .data-table,
    .settings-data-container .table,
    .settings-data-container table.table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: none !important;
        table-layout: auto !important;
    }

    /* Ocultar encabezados de columna en móvil (se muestran data-label por celda) */
    .data-table thead,
    .settings-data-container .table thead,
    .settings-data-container table.table thead {
        display: none !important;
    }

    .data-table tbody,
    .settings-data-container .table tbody,
    .settings-data-container table.table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: var(--space-3) !important;
    }

    /* Cada fila es una tarjeta autocontenida */
    .data-table tbody tr,
    .settings-data-container .table tbody tr,
    .settings-data-container table.table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: color-mix(in srgb, currentColor 2%, var(--color-surface)) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        padding: var(--space-3) !important;
        gap: var(--space-2) !important;
        position: relative !important;
    }

    .data-table tbody tr:hover,
    .settings-data-container .table tbody tr:hover,
    .settings-data-container table.table tbody tr:hover {
        background: color-mix(in srgb, currentColor 5%, var(--color-surface)) !important;
        border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)) !important;
    }

    .data-table tr[hidden],
    .settings-data-container .table tr[hidden],
    .settings-data-container table.table tr[hidden] {
        display: none !important;
    }

    /* Cada celda muestra su valor alineado y su etiqueta a la izquierda */
    .data-table tbody td,
    .settings-data-container .table tbody td,
    .settings-data-container table.table tbody td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: var(--space-1) 0 !important;
        border: none !important;
        border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 40%, transparent) !important;
        box-sizing: border-box !important;
        font-size: var(--font-size-xs) !important;
        gap: var(--space-2) !important;
        text-align: right !important;
        white-space: normal !important;
    }

    /* Etiqueta semántica generada desde data-label */
    .data-table tbody td[data-label]::before,
    .settings-data-container .table tbody td[data-label]::before,
    .settings-data-container table.table tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        margin-right: auto;
        flex-shrink: 0;
    }

    /* Primera celda: Cabecera destacada de la tarjeta */
    .data-table tbody td:first-child,
    .settings-data-container .table tbody td:first-child,
    .settings-data-container table.table tbody td:first-child {
        padding-top: 0 !important;
        padding-bottom: var(--space-2) !important;
        border-bottom: 1px solid var(--color-border) !important;
        margin-bottom: var(--space-1) !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .data-table tbody td:first-child::before,
    .settings-data-container .table tbody td:first-child::before,
    .settings-data-container table.table tbody td:first-child::before {
        display: none !important;
    }

    /* Última celda: Barra de acciones al pie de la tarjeta */
    .data-table tbody td:last-child,
    .settings-data-container .table tbody td:last-child,
    .settings-data-container table.table tbody td:last-child {
        padding-top: var(--space-2) !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent) !important;
        margin-top: var(--space-1) !important;
        justify-content: flex-end !important;
        gap: var(--space-2) !important;
    }

    .data-table tbody td:last-child::before,
    .settings-data-container .table tbody td:last-child::before,
    .settings-data-container table.table tbody td:last-child::before {
        display: none !important;
    }

    /* Asegurar que columnas de nombres y correos no desborden */
    .data-table-name-col {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 !important;
    }

    .data-table-name-title,
    .data-table-name-subtitle {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Paginación en móvil */
    .data-table-pagination {
        flex-direction: column;
        gap: var(--space-2);
        align-items: center;
        text-align: center;
        padding: var(--space-3);
    }
}