/*  ╔══════════════════════════════════════════════════════════════╗
    ║  ui-mobile.css — que el Sistema se use bien con una mano      ║
    ║                                                                ║
    ║  1. Tablas como tarjetas en celular (adiós al scroll lateral). ║
    ║  2. Feedback de carga: barra de progreso y botones ocupados.   ║
    ║                                                                ║
    ║  Se carga DESPUÉS de anthropic-theme.css: usa sus tokens       ║
    ║  (--card-bg, --ink-*, --clay) y puede pisarlo donde haga falta.║
    ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   1. TABLAS COMO TARJETAS
   Las marca static/js/ui-tables.js agregando .cards-on-mobile y los
   data-label de cada celda. Sin JS no pasa nada: queda el scroll
   horizontal de siempre, así que no rompe nada si el script falla.
   Para excluir una tabla: data-cards="off" en la tabla o en un padre.
   Para elegir qué columna es el título: data-card-title en su <th>.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* El contenedor deja de necesitar scroll lateral. El tema le pone
       overflow-x:auto a los .card-body con tabla adentro (anthropic-theme.css);
       con la tabla en tarjetas eso sobra y encima corta las sombras. */
    .table-responsive:has(> table.cards-on-mobile),
    .card-body:has(> table.cards-on-mobile),
    .card-body:has(> .table-responsive > table.cards-on-mobile) {
        overflow-x: visible;
    }

    table.cards-on-mobile {
        /* Muchas tablas traen min-width inline (ej. style="min-width:920px") */
        min-width: 0 !important;
        width: 100%;
        display: block;
        border: 0;
        background: transparent;
    }

    table.cards-on-mobile > thead { display: none; }
    table.cards-on-mobile > tbody { display: block; }

    table.cards-on-mobile > tbody > tr {
        display: block;
        background: var(--card-bg, #fff);
        border: 1px solid var(--card-border, #e9e6dc);
        border-radius: var(--radius-md, 10px);
        margin-bottom: .6rem;
        padding: .15rem 0 .2rem;
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(25, 25, 25, .04));
    }
    /* Neutraliza zebra y hover de Bootstrap: en tarjeta no aportan */
    table.cards-on-mobile > tbody > tr:hover,
    table.cards-on-mobile.table-striped > tbody > tr:nth-of-type(odd) {
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
    }

    table.cards-on-mobile > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        width: auto;
        border: 0;
        padding: .3rem .8rem;
        text-align: left !important;
        white-space: normal !important;
        font-size: .85rem;
    }

    /* Etiqueta de la columna, a la izquierda */
    table.cards-on-mobile > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--text-secondary, #5f5e58);
        font-size: .74rem;
        font-weight: 500;
        line-height: 1.5;
    }

    /* Celda que hace de título de la tarjeta */
    table.cards-on-mobile > tbody > tr > td[data-card-title] {
        display: block;
        font-size: .93rem;
        font-weight: 600;
        color: var(--text-primary, #191919);
        padding: .5rem .8rem .4rem;
        border-bottom: 1px solid var(--card-border, #e9e6dc);
        margin-bottom: .2rem;
    }

    /* Columna sin encabezado = botones de acción. Van al pie. */
    table.cards-on-mobile > tbody > tr > td[data-card-actions] {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: .35rem;
        padding: .45rem .8rem .5rem;
        border-top: 1px solid var(--card-border, #e9e6dc);
        margin-top: .25rem;
    }
    table.cards-on-mobile > tbody > tr > td[data-card-actions]::before { content: none; }
    /* Objetivos cómodos para el dedo */
    table.cards-on-mobile > tbody > tr > td[data-card-actions] .btn { min-height: 38px; }

    /* Celdas sin dato: no dejamos la etiqueta huérfana */
    table.cards-on-mobile > tbody > tr > td[data-card-empty] { display: none; }

    /* Filas de "sin resultados" (las que usan colspan): siguen planas */
    table.cards-on-mobile > tbody > tr[data-card-skip] {
        display: block;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    table.cards-on-mobile > tbody > tr[data-card-skip] > td {
        display: block;
        text-align: center !important;
    }

    /* Un pie de tabla (totales) queda como tarjeta destacada */
    table.cards-on-mobile > tfoot {
        display: block;
        background: var(--ink-100, #f1efe7);
        border-radius: var(--radius-md, 10px);
        padding: .2rem 0;
    }
    table.cards-on-mobile > tfoot > tr { display: block; }
    table.cards-on-mobile > tfoot > tr > td,
    table.cards-on-mobile > tfoot > tr > th {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: .3rem .8rem;
        text-align: left !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   2. FEEDBACK DE CARGA
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de progreso superior ──────────────────────────────────
   La maneja static/js/ui-loading.js: aparece al navegar, al enviar
   un formulario y en cada request de HTMX. */
#ui-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--clay, #cc785c);
    box-shadow: 0 0 8px rgba(204, 120, 92, .6);
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: width .2s ease, opacity .25s ease;
}
#ui-progress.on { opacity: 1; }

/* ── Botones ocupados ────────────────────────────────────────────
   ui-loading.js pone .is-busy al enviar. El spinner es un ::after
   para no tocar el contenido del botón. */
.btn.is-busy {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--surface, #fff);
    animation: ui-spin .6s linear infinite;
}
/* En botones claros el spinner tiene que ser oscuro para verse */
.btn.is-busy.btn-outline-secondary::after,
.btn.is-busy.btn-outline-dark::after,
.btn.is-busy.btn-light::after,
.btn.is-busy.btn-ghost::after { color: var(--ink-700, #3c3b37); }

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

/* ── HTMX: cualquier elemento que dispare un request se atenúa ── */
.htmx-request.htmx-fade,
.htmx-request .htmx-fade {
    opacity: .55;
    transition: opacity .15s ease;
}

/* ── Respeto por quien pidió menos movimiento ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    #ui-progress { transition: none; }
    .btn.is-busy::after { animation-duration: 1.6s; }
}