/* {1: estilos.weft:32} */

/* =============================================================================
   app.css — Weenjoy Admin (Tailwind CDN + HTMX + Alpine)
   Solo lo que Tailwind no cubre.
   ============================================================================= */

/* ── Transiciones de swap HTMX ──────────────────────────────────────────────── */
.htmx-swapping { opacity: 0; transition: opacity 200ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 200ms ease-in; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

/* ── Barra de carga superior ────────────────────────────────────────────────── */
#htmx-indicator {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, #2563eb 30%, #60a5fa 60%, transparent 100%);
    background-size: 300% 100%;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s;
    animation: htmx-slide 1.8s linear infinite;
}
#htmx-indicator.active { opacity: 1; }

@keyframes htmx-slide {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Numeros tabulares (columnas de montos alineadas) ───────────────────────── */
.number-format {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Scrollbar fino ─────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Modal nativo <dialog> ──────────────────────────────────────────────────── */
/* El elemento <dialog> abierto con showModal() lleva chrome del navegador; lo
   neutralizamos y dejamos que la card Tailwind interior aporte el aspecto.     */
dialog.dp-modal {
    border: none;
    background: transparent;
    padding: 0;
    width: 92%;
    max-width: 32rem;
    color: inherit;
}
dialog.dp-modal::backdrop { background: rgba(0, 0, 0, .5); }
/* {:1} */