/* ============================================================================
   SPURA HUB v3 — Mobile / native table cards (visibility + a11y)
   Loaded after table-cards-and-nav.css. Converts list tables to labeled cards
   at ≤768px; wide operational tables keep horizontal scroll.
   ============================================================================ */

@media (max-width: 768px) {
    .data-table-scroll:not(.table-mobile-scroll),
    .table-responsive:not(.table-mobile-scroll) {
        overflow-x: visible;
        -webkit-overflow-scrolling: auto;
    }

    .data-table-scroll.table-mobile-scroll,
    .table-responsive.table-mobile-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: max(0.75rem, var(--safe-area-left)) max(0.75rem, var(--safe-area-right));
    }

    .table-mobile-scroll-hint {
        display: block;
        margin: 0 0 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius-md);
        font-size: 0.8125rem;
        line-height: 1.35;
        color: var(--text-secondary, var(--sp-text-2));
        background: var(--bg-secondary, var(--sp-bg-2));
        border: 1px solid var(--border-color, var(--sp-border-1));
    }

    .table-mobile-scroll-hint:focus-visible {
        outline: 2px solid var(--brand-500, var(--brand-500));
        outline-offset: 2px;
    }

    .data-table-scroll:not(.table-mobile-scroll) > .ui-mobile-table-cards,
    .table-responsive:not(.table-mobile-scroll) > .ui-mobile-table-cards,
    .card-body > .ui-mobile-table-cards,
    .ui-card-body-flush > .ui-mobile-table-cards {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-collapse: collapse;
    }

    .ui-mobile-table-cards thead,
    .premium-table.ui-mobile-table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ui-mobile-table-cards tbody,
    .premium-table.ui-mobile-table-cards tbody {
        display: block;
        width: 100%;
    }

    .ui-mobile-table-cards tbody tr,
    .premium-table.ui-mobile-table-cards tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 0.75rem;
        padding: 0.875rem 1rem;
        border: 1px solid var(--glass-panel-border, var(--border-color));
        border-radius: var(--radius-xl, var(--sp-radius-md));
        background: var(--glass-panel-bg, var(--bg-surface));
        box-shadow: var(--glass-panel-shadow, var(--shadow-sm));
        backdrop-filter: var(--glass-filter-panel, none);
        -webkit-backdrop-filter: var(--glass-filter-panel, none);
        box-sizing: border-box;
    }

    .ui-mobile-table-cards tbody tr:last-child,
    .premium-table.ui-mobile-table-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    .ui-mobile-table-cards tbody tr:hover td,
    .premium-table.ui-mobile-table-cards tbody tr:hover td {
        background: transparent;
    }

    .ui-mobile-table-cards tbody td,
    .premium-table.ui-mobile-table-cards tbody td {
        display: grid;
        grid-template-columns: minmax(5.75rem, 38%) minmax(0, 1fr);
        align-items: start;
        gap: 0.375rem 0.75rem;
        width: 100%;
        max-width: 100%;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--border-color, var(--sp-border-1));
        text-align: left;
        font-size: 0.9375rem;
        line-height: 1.4;
        color: var(--text-primary, var(--sp-text-1));
        box-sizing: border-box;
    }

    .ui-mobile-table-cards tbody td:last-child,
    .premium-table.ui-mobile-table-cards tbody td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .ui-mobile-table-cards tbody td[data-label]::before,
    .premium-table.ui-mobile-table-cards tbody td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        min-width: 0;
        font-size: 0.75rem;
        font-weight: 650;
        line-height: 1.35;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted, var(--sp-text-3));
        overflow-wrap: anywhere;
    }

    .ui-mobile-table-cards tbody td:not([data-label])::before,
    .premium-table.ui-mobile-table-cards tbody td:not([data-label])::before {
        content: none;
    }

    .ui-mobile-table-cards tbody td:not([data-label]),
    .premium-table.ui-mobile-table-cards tbody td:not([data-label]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-mobile-table-cards tbody td[data-label] > *,
    .premium-table.ui-mobile-table-cards tbody td[data-label] > * {
        grid-column: 2;
        min-width: 0;
    }

    .ui-mobile-table-cards tbody td[data-label] > .flex,
    .ui-mobile-table-cards tbody td[data-label] > .ui-action-row,
    .ui-mobile-table-cards tbody td[data-label] > .ui-button-group,
    .premium-table.ui-mobile-table-cards tbody td[data-label] > .flex,
    .premium-table.ui-mobile-table-cards tbody td[data-label] > .ui-action-row,
    .premium-table.ui-mobile-table-cards tbody td[data-label] > .ui-button-group {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .ui-mobile-table-cards tbody td[data-label=""]::before,
    .ui-mobile-table-cards tbody td[data-label="Acciones"]::before,
    .ui-mobile-table-cards tbody td[data-label="acciones"]::before,
    .premium-table.ui-mobile-table-cards tbody td[data-label=""]::before,
    .premium-table.ui-mobile-table-cards tbody td[data-label="Acciones"]::before {
        content: none;
    }

    .ui-mobile-table-cards tbody td[data-label=""],
    .ui-mobile-table-cards tbody td[data-label="Acciones"],
    .ui-mobile-table-cards tbody td[data-label="acciones"],
    .premium-table.ui-mobile-table-cards tbody td[data-label=""],
    .premium-table.ui-mobile-table-cards tbody td[data-label="Acciones"] {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 0.625rem;
        border-top: 1px solid var(--border-color, var(--sp-border-1));
    }

    .ui-mobile-table-cards tbody td[data-label=""] > *,
    .ui-mobile-table-cards tbody td[data-label="Acciones"] > *,
    .premium-table.ui-mobile-table-cards tbody td[data-label=""] > *,
    .premium-table.ui-mobile-table-cards tbody td[data-label="Acciones"] > * {
        grid-column: 1;
    }

    .ui-mobile-table-cards .btn,
    .ui-mobile-table-cards .btn-sm,
    .premium-table.ui-mobile-table-cards .btn,
    .premium-table.ui-mobile-table-cards .btn-sm {
        min-height: var(--touch-target-min, 44px);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ui-mobile-table-cards tbody tr:focus-within,
    .premium-table.ui-mobile-table-cards tbody tr:focus-within {
        outline: 2px solid color-mix(in srgb, var(--brand-500) 55%, transparent);
        outline-offset: 2px;
    }

    .ui-mobile-table-cards tbody td a:focus-visible,
    .ui-mobile-table-cards tbody td .btn:focus-visible,
    .premium-table.ui-mobile-table-cards tbody td a:focus-visible,
    .premium-table.ui-mobile-table-cards tbody td .btn:focus-visible {
        outline: 2px solid var(--brand-500, var(--brand-500));
        outline-offset: 2px;
    }

    .ui-mobile-table-cards tbody td.text-right,
    .premium-table.ui-mobile-table-cards tbody td.text-right {
        text-align: left;
    }

    .premium-table__progress {
        width: 100%;
        justify-content: flex-start;
    }

    body.native-capacitor .ui-mobile-table-cards tbody tr,
    body.native-capacitor .premium-table.ui-mobile-table-cards tbody tr {
        margin-bottom: 0.875rem;
        padding: 1rem;
    }

    body.native-capacitor .ui-mobile-table-cards tbody td,
    body.native-capacitor .premium-table.ui-mobile-table-cards tbody td {
        font-size: 1rem;
    }

    body.native-capacitor .ui-mobile-table-cards tbody td[data-label]::before,
    body.native-capacitor .premium-table.ui-mobile-table-cards tbody td[data-label]::before {
        font-size: 0.8125rem;
    }

    .ui-card-body-flush > .data-table-scroll:not(.table-mobile-scroll),
    .card-body.ui-card-body-flush > .data-table-scroll:not(.table-mobile-scroll) {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .ui-card-body-flush .ui-mobile-table-cards tbody tr:first-child,
    .card-body.ui-card-body-flush .ui-mobile-table-cards tbody tr:first-child {
        margin-top: 0;
    }

    .ui-card-body-flush .ui-mobile-table-cards tbody tr:last-child,
    .card-body.ui-card-body-flush .ui-mobile-table-cards tbody tr:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .ui-mobile-table-cards tbody tr,
    .premium-table.ui-mobile-table-cards tbody tr {
        transition: none;
    }
}

@media (max-width: 768px) {
    :root[data-theme='dark'] .ui-mobile-table-cards tbody tr,
    :root[data-theme='dark'] .premium-table.ui-mobile-table-cards tbody tr {
        background: var(--glass-panel-bg);
        border-color: var(--glass-panel-border);
        box-shadow: var(--glass-panel-shadow);
        backdrop-filter: var(--glass-filter-panel);
        -webkit-backdrop-filter: var(--glass-filter-panel);
    }

    :root[data-theme='dark'] .ui-mobile-table-cards tbody td,
    :root[data-theme='dark'] .premium-table.ui-mobile-table-cards tbody td {
        border-bottom-color: var(--glass-white-08, var(--sp-border-1));
        color: var(--text-primary, var(--sp-text-1));
    }

    :root[data-theme='dark'] .ui-mobile-table-cards tbody td[data-label]::before,
    :root[data-theme='dark'] .premium-table.ui-mobile-table-cards tbody td[data-label]::before {
        color: var(--sp-text-3, var(--text-muted));
    }
}