/**
 * ═══════════════════════════════════════════════════════════════
 * TABLE RESPONSIVE - Sistema global de tablas con contenedores DIV
 * ═══════════════════════════════════════════════════════════════
 *
 * Estructura:
 * .table-container          - Contenedor principal con scroll y bordes
 *   .table-header (opcional)  - Encabezado fijo (búsqueda, filtros)
 *   .table-content           - Contenido scrollable
 *     .table-head (opcional)   - Cabecera de columnas
 *       .table-row
 *         .table-cell
 *     .table-body            - Cuerpo de la tabla
 *       .table-row           - Fila (desktop) / Card (mobile)
 *         .table-cell        - Celda
 *
 * Responsive:
 * - Desktop: Filas horizontales estilo tabla
 * - Mobile: Cards verticales
 */

/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR PRINCIPAL
   ═══════════════════════════════════════════════════════════════ */

.table-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER (búsqueda, filtros, acciones)
   ═══════════════════════════════════════════════════════════════ */

.table-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cl-br-in, rgba(0, 0, 0, 0.1));
    background: var(--cl-bg-sf, #ffffff);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.table-header-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cl-tx-tt, #1a1a1a);
    flex: 1;
}

.table-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT (área scrollable)
   ═══════════════════════════════════════════════════════════════ */

.table-content {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE HEAD (encabezados de columnas - solo desktop)
   ═══════════════════════════════════════════════════════════════ */

.table-head {
    background: var(--surface-raised);
    border-bottom: 2px solid var(--cl-br-in, rgba(0, 0, 0, 0.1));
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-head .table-row {
    display: grid;
    padding: var(--pd-0875);
    font-weight: 600;
    color: var(--cl-tx-stt, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
}

.table-head .table-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE BODY
   ═══════════════════════════════════════════════════════════════ */

.table-body {
    min-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE ROW (desktop: fila, mobile: card)
   ═══════════════════════════════════════════════════════════════ */

.table-row {
    display: grid;
    border-bottom: 1px solid var(--cl-br-in, rgba(0, 0, 0, 0.1));
    transition: var(--transition-smooth, all 0.2s ease);
    cursor: pointer;
}

.table-body .table-row:hover {
    background: var(--cl-bg-sf-alt, #f8f9fa);
}

.table-body .table-row:active {
    background: var(--cl-wt-tpr-10, rgba(0, 0, 0, 0.05));
}

.table-body .table-row:last-child {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE CELL
   ═══════════════════════════════════════════════════════════════ */

.table-cell {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cell-label {
    display: none; /* Solo visible en mobile */
    font-weight: 600;
    color: var(--cl-tx-stt, #666);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   ESTADOS Y VARIANTES
   ═══════════════════════════════════════════════════════════════ */

/* Estado vacío */
.table-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--cl-tx-stt, #666);
    font-size: 0.9375rem;
}

.table-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* Loading state */
.table-loading {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--cl-tx-stt, #666);
}

.table-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cl-br-in, rgba(0, 0, 0, 0.1));
    border-top-color: var(--cl-main, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   BADGES Y ELEMENTOS COMUNES
   ═══════════════════════════════════════════════════════════════ */

.table-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

.table-badge-success {
    background: #d1fae5;
    color: #065f46;
}

.table-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.table-badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.table-badge-info {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 8px; 
    font-weight:600;
    letter-spacing:.4px;
    border-radius:999px;

    color:#1d4ed8;

    background:rgba(37,99,235,.08);
    border:1px solid rgba(37,99,235,.25);

    box-shadow:none; /* 👈 importante */
    backdrop-filter:none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Ocultar encabezados de columnas en mobile */
    .table-head {
        display: none;
    }

    /* Convertir filas en cards */
    .table-body .table-row {
        display: block;
        padding: 1rem;
        margin: 0.75rem;
        border: 1px solid var(--cl-br-in, rgba(0, 0, 0, 0.1));
        border-radius: 8px;
        background: var(--cl-bg-sf, #ffffff);
        box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05));
    }

    .table-body .table-row:hover {
        box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.1));
        transform: translateY(-2px);
    }

    /* Mostrar celdas en vertical */
    .table-cell {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--cl-br-in, rgba(0, 0, 0, 0.05));
    }

    .table-cell:last-child {
        border-bottom: none;
    }

    /* Mostrar labels en mobile */
    .table-cell-label {
        display: block;
    }

    /* Header responsive */
    .table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .table-header-title {
        text-align: center;
    }

    .table-header-actions {
        justify-content: center;
    }

    .col-resize-handle {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UTILIDADES PARA TABLAS
   ═══════════════════════════════════════════════════════════════ */

/* Alineación */
.table-cell-center {
    justify-content: center;
    text-align: center;
}

.table-cell-right {
    justify-content: flex-end;
    text-align: right;
}

/* Truncar texto en celda (inline) */
.cell-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Truncar texto (legacy) */
.table-cell-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   COLUMNAS REDIMENSIONABLES
   ═══════════════════════════════════════════════════════════════ */

.resizable-cell {
    position: relative;
}

.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
    z-index: 5;
}

.col-resize-handle:hover,
.col-resize-handle.active {
    background: var(--accent-base, #5b4cc4);
}

.col-resize-line {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-base, #5b4cc4);
    z-index: 9999;
    pointer-events: none;
}

.resizing {
    user-select: none;
    cursor: col-resize !important;
}
.resizing * {
    cursor: col-resize !important;
}

/* Iconos en celdas */
.table-cell-icon {
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: var(--cl-main, #3b82f6);
}

/* Acciones en fila */
.table-cell-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.table-cell-actions button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}