/* ===================================================
   Tablas: tabla moderna, DataTable shell, paginacion.
   =================================================== */

.table {
    --bs-table-color: var(--table-text-primary);
    --bs-table-bg: var(--table-row-bg);
    --bs-table-border-color: var(--grid-border);
    --bs-table-striped-color: var(--table-text-primary);
    --bs-table-striped-bg: var(--table-row-alt-bg);
    --bs-table-hover-color: var(--table-text-primary);
    --bs-table-hover-bg: var(--table-row-hover-bg);
    color: var(--table-text-primary);
    background: var(--table-bg);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table thead th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1rem;
    color: var(--table-text-secondary);
    border-bottom: 2px solid var(--grid-header-border);
    background: var(--grid-header-bg);
}

.table-dark,
.table-light,
.table thead {
    color: var(--table-text-secondary);
    background: var(--grid-header-bg);
}

.table-dark th,
.table-light th,
.table thead th {
    color: var(--table-text-secondary);
    border-bottom: 2px solid var(--grid-header-border);
    background: var(--grid-header-bg);
}

.table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    color: var(--table-text-primary);
    border-color: var(--table-divider);
    background: var(--table-row-bg);
}

.table tbody tr,
.table tbody td {
    transition: color 0.15s ease, background-color 0.15s ease;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--table-row-bg);
    background: var(--table-row-bg);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: var(--table-row-alt-bg);
    background: var(--table-row-alt-bg);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--table-row-hover-bg);
    color: var(--table-text-primary);
    background: var(--table-row-hover-bg);
}

.table > tbody > tr:is(.selected, .is-selected, .table-active) > * {
    background: var(--table-row-selected-bg);
}

.table > tbody > tr:is(.selected, .is-selected, .table-active) > *:first-child {
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.table th[aria-sort]:not([aria-sort="none"]),
.table th.sorted,
.table th.is-sorted,
.table th .sort-icon.active {
    color: var(--accent-text);
}

.table > tbody > tr.table-primary > * { background: color-mix(in srgb, var(--color-primary) 14%, var(--table-row-bg)); }
.table > tbody > tr.table-success > * { background: color-mix(in srgb, var(--color-success) 14%, var(--table-row-bg)); }
.table > tbody > tr.table-warning > * { background: color-mix(in srgb, var(--color-warning) 14%, var(--table-row-bg)); }
.table > tbody > tr.table-danger > * { background: color-mix(in srgb, var(--color-danger) 14%, var(--table-row-bg)); }
.table > tbody > tr.table-info > * { background: color-mix(in srgb, var(--color-info) 14%, var(--table-row-bg)); }
.table > tbody > tr.table-success-subtle > * { background: color-mix(in srgb, var(--color-success) 12%, var(--table-row-bg)); }
.table > tbody > tr.table-danger-subtle > * { background: color-mix(in srgb, var(--color-danger) 12%, var(--table-row-bg)); }

.table tfoot > tr > * {
    color: var(--table-text-primary);
    border-color: var(--table-border);
    background: var(--table-header-bg);
}

.table small,
.table .text-muted { color: var(--table-text-muted) !important; }
.table .text-secondary { color: var(--table-text-secondary) !important; }
.table .text-end { font-variant-numeric: tabular-nums; }

.table td .btn-sm {
    min-width: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
}
.table td .btn-ghost { color: var(--table-icon); }
.table td .btn-ghost:hover:not(:disabled),
.table td .btn-ghost:focus-visible {
    color: var(--table-icon-hover);
    background: var(--table-action-hover-bg);
}
.table td .btn:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}
.table td .btn:disabled { opacity: 0.55; }

/* --- Acciones globales de grillas y listados --- */
.grid-actions {
    white-space: nowrap;
    text-align: right;
}

.table td:has(.grid-action-btn) {
    white-space: nowrap;
    text-align: right;
}

.grid-action-btn {
    --grid-action-color: var(--table-icon);
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-start: 0;
    color: var(--grid-action-color) !important;
    background: color-mix(in srgb, var(--grid-action-color) 8%, var(--table-row-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--grid-action-color) 28%, var(--table-border)) !important;
    border-radius: 0.55rem;
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease,
                border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.grid-action-btn + .grid-action-btn { margin-inline-start: 0.3rem; }
.grid-action-btn i { margin: 0; font-size: 1rem; line-height: 1; }

.grid-action-btn:hover:not(:disabled):not(.disabled) {
    color: #fff !important;
    background: var(--grid-action-color) !important;
    border-color: var(--grid-action-color) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--grid-action-color) 28%, transparent);
    transform: translateY(-1px);
}

.grid-action-btn:focus-visible {
    color: var(--grid-action-color) !important;
    background: color-mix(in srgb, var(--grid-action-color) 14%, var(--table-row-bg)) !important;
    border-color: var(--grid-action-color) !important;
    outline: 2px solid color-mix(in srgb, var(--grid-action-color) 42%, transparent);
    outline-offset: 2px;
}

.grid-action-btn:disabled,
.grid-action-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.grid-action-view { --grid-action-color: #2563eb !important; }
.grid-action-edit,
.grid-action-process { --grid-action-color: #7c3aed !important; }
.grid-action-refresh { --grid-action-color: #ea580c !important; }
.grid-action-download { --grid-action-color: #15803d !important; }
.grid-action-delete { --grid-action-color: #dc2626 !important; }
.grid-action-neutral { --grid-action-color: #64748b !important; }

.ds-status-badge-custom {
    color: color-mix(in srgb, var(--status-color) 72%, var(--table-text-primary));
    border: 1px solid color-mix(in srgb, var(--status-color) 44%, transparent);
    background: color-mix(in srgb, var(--status-color) 18%, var(--table-row-bg));
}
.table .badge.bg-success {
    color: var(--color-success-contrast) !important;
    border: 1px solid color-mix(in srgb, var(--color-success) 42%, transparent);
    background: color-mix(in srgb, var(--color-success) 16%, var(--table-row-bg)) !important;
}
.table .badge.bg-warning {
    color: var(--color-warning-contrast) !important;
    border: 1px solid color-mix(in srgb, var(--color-warning) 44%, transparent);
    background: color-mix(in srgb, var(--color-warning) 17%, var(--table-row-bg)) !important;
}
.table .badge.bg-danger {
    color: var(--color-danger-contrast) !important;
    border: 1px solid color-mix(in srgb, var(--color-danger) 42%, transparent);
    background: color-mix(in srgb, var(--color-danger) 16%, var(--table-row-bg)) !important;
}
.table .badge.bg-info,
.table .badge.bg-primary {
    color: var(--color-info-contrast) !important;
    border: 1px solid color-mix(in srgb, var(--color-info) 42%, transparent);
    background: color-mix(in srgb, var(--color-info) 16%, var(--table-row-bg)) !important;
}
.table .badge.bg-secondary,
.table .badge.bg-light {
    color: var(--table-text-secondary) !important;
    border: 1px solid var(--table-border);
    background: var(--table-header-bg) !important;
}

.table-responsive {
    scrollbar-color: var(--accent-primary) transparent;
}

/* --- DataTable.razor (shell) --- */
.ds-data-table-card {
    background: var(--table-bg);
    border: 1px solid var(--grid-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ds-data-table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.ds-data-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--grid-border);
    background: var(--grid-header-bg);
}

/* --- Paginacion (Pagination.razor) --- */
.ds-pagination-info {
    font-size: 0.8rem;
    color: var(--table-text-muted);
}

.ds-pagination {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-pagination-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--table-border);
    background: var(--table-bg);
    color: var(--table-text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.ds-pagination-btn:hover:not(:disabled):not(.ds-pagination-btn-active) {
    background: var(--table-row-hover-bg);
    color: var(--accent-text);
    border-color: var(--accent-border);
}

.ds-pagination-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ds-pagination-btn-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

.ds-pagination-ellipsis {
    color: var(--table-text-muted);
    padding: 0 0.25rem;
    font-size: 0.8rem;
}

/* Paginación Bootstrap heredada. */
.pagination .page-link {
    color: var(--table-text-secondary);
    border-color: var(--table-border);
    background: var(--table-bg);
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--accent-text);
    border-color: var(--accent-border);
    background: var(--table-row-hover-bg);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.pagination .page-item.active .page-link {
    color: var(--control-primary-text);
    border-color: var(--control-primary-bg);
    background: var(--control-primary-bg);
}
.pagination .page-item.disabled .page-link,
.pagination .page-link:disabled {
    color: var(--table-text-muted);
    border-color: var(--table-border);
    background: var(--table-header-bg);
    opacity: 0.65;
}

/* --- Adaptacion mobile: filas de tabla como cards --- */
@media (max-width: 767.98px) {
    .table-responsive > .table,
    .ds-data-table-scroll > .table {
        width: max-content;
        min-width: 100%;
    }

    .table-responsive > .table:not(.table-sm),
    .ds-data-table-scroll > .table:not(.table-sm) {
        min-width: 640px;
    }

    .table thead th,
    .table tbody td {
        padding: 0.7rem 0.75rem;
    }

    .grid-action-btn {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
    }

    .ds-data-table-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 0.8rem;
    }

    .ds-pagination {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .ds-table-responsive-cards thead {
        display: none;
    }

    .ds-table-responsive-cards tbody tr {
        display: block;
        border: 1px solid var(--table-border);
        border-radius: var(--radius);
        margin: 0.75rem;
        box-shadow: var(--shadow-sm);
    }

    .ds-table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        text-align: right;
        border-bottom: 1px solid var(--table-divider);
    }

    .ds-table-responsive-cards tbody td:last-child {
        border-bottom: none;
    }

    .ds-table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--table-text-muted);
        text-align: left;
    }
}