/* Comportamiento del vivo, bloque A: ficha de socia, historial de ventas, ajustes.
   Solo lo escribe el agente de este bloque (TAREA-1-interaccion-a.md).

   Método: transcribir. Cada valor sale del vivo (Tailwind → px, framer-motion → CSS):
     · transition-colors            150 ms cubic-bezier(.4,0,.2,1)
     · transition-all duration-200  200 ms cubic-bezier(.4,0,.2,1)
     · framer, sin `transition`     opacidad lineal 300 ms · y/x/scale con resorte
       (y: rigidez 500 / amortiguación 25 · scale/height: 550 / 30), pasados a `linear()`
     · transition={{ duration: x }} tween con easeInOut (cubic-bezier(.42,0,.58,1))
     · whileHover 1.02 / whileTap .98, duration .15 (Button)
     · Modal: fondo negro 70 % + blur 12 px, caja .92→1 y 12 px→0 en 300 ms [.22,1,.36,1]
   Mejora progresiva: sin JS, sin :has() o sin @starting-style la pantalla queda como estaba.
   Todo se apaga con prefers-reduced-motion. Colores: los tokens del tema (oscuro y claro). */

:root {
    --a-tw: cubic-bezier(.4, 0, .2, 1);
    --a-io: cubic-bezier(.42, 0, .58, 1);
    --a-modal: cubic-bezier(.22, 1, .36, 1);
    /* resorte 500/25 (y, x) · 0,43 s */
    --a-resorte-y: linear(0, 0.0511, 0.1773, 0.3425, 0.5184, 0.6848, 0.8286, 0.9433, 1.027, 1.0815, 1.1108, 1.1202, 1.1151, 1.1005, 1.0809, 1.0597, 1.0395, 1.022, 1.0079, 0.9975, 0.9906, 0.9869, 0.9856, 0.9861, 0.9877, 0.9901, 0.9926, 0.9951, 1);
    /* resorte 400/28 (filas de actividad) · 0,36 s */
    --a-resorte-fila: linear(0, 0.0296, 0.1043, 0.2063, 0.3216, 0.4397, 0.5532, 0.6572, 0.7487, 0.8264, 0.8902, 0.9408, 0.9793, 1.0072, 1.0263, 1.0381, 1.0442, 1.046, 1.0447, 1.0412, 1.0366, 1.0313, 1.0258, 1.0206, 1.0158, 1.0116, 1.008, 1.0051, 1);
    /* resorte 550/30 (height: auto, el «default» de framer: se abre un panel) · 0,40 s */
    --a-resorte-alto: linear(0, 0.0494, 0.1689, 0.3229, 0.4852, 0.6378, 0.7702, 0.8772, 0.9579, 1.0141, 1.0493, 1.0676, 1.0732, 1.0701, 1.0617, 1.0505, 1.0386, 1.0274, 1.0175, 1.0095, 1.0035, 0.9992, 0.9965, 0.9951, 0.9946, 0.9948, 0.9954, 0.9962, 1);
    /* resorte con rebote .2 (la pastilla de las pestañas) · 0,44 s */
    --a-resorte-tab: linear(0, 0.0305, 0.1057, 0.2059, 0.3166, 0.428, 0.5335, 0.6291, 0.7128, 0.7839, 0.8427, 0.8901, 0.9274, 0.956, 0.9772, 0.9923, 1.0027, 1.0093, 1.0131, 1.0148, 1.0151, 1.0145, 1.0132, 1.0116, 1.0099, 1);
}

@keyframes a-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-sube-8 { from { transform: translateY(8px); } to { transform: none; } }
@keyframes a-sube-5 { from { transform: translateY(5px); } to { transform: none; } }
@keyframes a-sube-15 { from { transform: translateY(15px); } to { transform: none; } }
@keyframes a-entra-fila { from { transform: translateY(-16px) scale(.97); } to { transform: none; } }
@keyframes a-entra-x { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes a-gira { to { transform: rotate(360deg); } }

/* ═══════════════ Ficha de socia (data-a="ficha") ═══════════════ */

/* La página entera aparece (motion.div opacity 0 → 1); el menú no: es del layout.
   Las pestañas (.md-panel) tienen su propia entrada, más abajo. */
[data-a="ficha"] > :not(.admin-nav):not(script):not(style):not(.as-overlay):not(.md-panel) {
    animation: a-aparece .3s linear backwards;
}

/* Volver: hover:text-dark-text transition-colors */
body:has([data-a="ficha"]) .back-link { transition: color .15s var(--a-tw); }
body:has([data-a="ficha"]) .back-link:hover { color: var(--rr-text-primary); }

/* Cada pestaña entra al abrirse: opacity 0, y 8 → 1, 0 */
[data-a="ficha"] .md-panel--active {
    animation: a-aparece .3s linear backwards, a-sube-8 .43s var(--a-resorte-y) backwards;
}

/* Pestañas: transition-colors + hover:text-dark-text; la pastilla se desliza (layoutId, resorte rebote .2, 0,4 s) */
body:has([data-a="ficha"]) .md-tab { transition: color .15s var(--a-tw), background-color .15s var(--a-tw), border-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .md-tab:not(.md-tab--active):hover { color: var(--rr-text-primary); }
[data-a="ficha"] .md-tabs { position: relative; }
[data-a="ficha"] .md-tabs.a-viva .md-tab { position: relative; z-index: 1; }
[data-a="ficha"] .md-tabs.a-viva .md-tab--active { background: transparent; border-color: transparent; }
[data-a="ficha"] .a-tab-pastilla {
    position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
    border-radius: 12px; background: rgba(255, 107, 0, .12); border: 1px solid rgba(255, 107, 0, .4);
    transition: transform .4s var(--a-resorte-tab), width .4s var(--a-resorte-tab), height .4s var(--a-resorte-tab);
}
[data-a="ficha"] .a-tab-pastilla.a-sin-mover { transition: none; }

/* Roles: duration-200 transition-all; hover:bg + hover:text-dark-text */
body:has([data-a="ficha"]) .md-role { transition: all .2s var(--a-tw); }
body:has([data-a="ficha"]) .md-role:not(.md-role--active):hover {
    background: var(--rr-glass-bg-hover); color: var(--rr-text-primary); border-color: var(--rr-glass-border);
}

/* Botones (componente Button): transition-all 200 ms, hover 1.02, tap .98 (.15 s), deshabilitado: 50 % y sin eventos */
body:has([data-a="ficha"]) .as-btn,
body:has([data-a="ficha"]) .carnet__wbtn,
body:has([data-a="ficha"]) .pen-cobro__ok,
body:has([data-a="ficha"]) .pen-charge,
body:has([data-a="ficha"]) .pen-forgive {
    position: relative;
    transition: background-color .2s var(--a-tw), border-color .2s var(--a-tw), color .2s var(--a-tw),
                box-shadow .2s var(--a-tw), opacity .2s var(--a-tw), transform .15s var(--a-io);
}
body:has([data-a="ficha"]) .as-btn:not(:disabled):hover,
body:has([data-a="ficha"]) .carnet__wbtn:not(:disabled):hover,
body:has([data-a="ficha"]) .pen-cobro__ok:not(:disabled):hover { transform: scale(1.02); }
body:has([data-a="ficha"]) .as-btn:not(:disabled):active,
body:has([data-a="ficha"]) .carnet__wbtn:not(:disabled):active,
body:has([data-a="ficha"]) .pen-cobro__ok:not(:disabled):active { transform: scale(.98); }
body:has([data-a="ficha"]) .as-btn:disabled,
body:has([data-a="ficha"]) .carnet__wbtn:disabled,
body:has([data-a="ficha"]) .pen-charge:disabled,
body:has([data-a="ficha"]) .pen-forgive:disabled { opacity: .5; pointer-events: none; }
/* secundario: hover:bg-dark-surface/80 hover:border-rush-500/20 */
body:has([data-a="ficha"]) .as-btn:not(.as-btn--primary):not(.md-danger__del):not(:disabled):hover,
body:has([data-a="ficha"]) .carnet__wbtn--ghost:not(:disabled):hover {
    background: var(--rr-glass-bg-hover); border-color: rgba(255, 107, 0, .2); color: var(--rr-text-primary);
}
/* primario: hover:bg-rush-400 + resplandor 0 0 30px .5 / 0 0 80px .15 */
body:has([data-a="ficha"]) .as-btn--primary:not(:disabled):not([style*="gradient"]):hover {
    background-image: none; background-color: #FF9933;
    box-shadow: 0 0 30px rgba(255, 107, 0, .5), 0 0 80px rgba(255, 107, 0, .15);
}
/* peligro: hover:bg-red-500/15 hover:border-red-500/30 */
body:has([data-a="ficha"]) .md-danger__del:not(:disabled):hover,
body:has([data-a="ficha"]) .fm-btn--peligro:not(:disabled):hover {
    background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .3);
}

/* Cobrar / Perdonar multa: hover:bg-rush-500/20 y hover:bg-emerald-500/20, transition-all */
body:has([data-a="ficha"]) .pen-charge:not(:disabled):hover { background: rgba(255, 107, 0, .2); }
body:has([data-a="ficha"]) .pen-forgive:not(:disabled):hover { background: rgba(16, 185, 129, .2); }

/* Métodos de pago y chips de filtro: hover:bg-dark-surface/50 transition-all */
body:has([data-a="ficha"]) .pen-met,
body:has([data-a="ficha"]) .act-chip,
body:has([data-a="ficha"]) .as-mode,
body:has([data-a="ficha"]) .clk-item,
body:has([data-a="ficha"]) .tagchip,
body:has([data-a="ficha"]) .mg-item { transition: all .2s var(--a-tw); }
body:has([data-a="ficha"]) .pen-met:not(.on):hover,
body:has([data-a="ficha"]) .act-chip:not(.act-chip--active):hover,
body:has([data-a="ficha"]) .as-mode:not(.as-mode--active):hover,
body:has([data-a="ficha"]) .clk-item:not(.on):hover,
body:has([data-a="ficha"]) .mg-item:not(.on):hover { background: var(--rr-glass-bg-hover); }
body:has([data-a="ficha"]) .mg-item { transition: background-color .15s var(--a-tw), border-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .md-card__edit { transition: color .15s var(--a-tw), background-color .15s var(--a-tw), border-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .carnet__dl { transition: background-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .fin-tx__ref { transition: all .15s var(--a-tw); }
body:has([data-a="ficha"]) .aud-chev { transition: transform .15s var(--a-tw); }
body:has([data-a="ficha"]) .act-mg-head { transition: background-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .act-mg-chev { transition: transform .15s var(--a-tw); }

/* Campos: transition-all 200 ms, focus:border-rush-500/50 + anillo de 2 px rush-500/20 */
body:has([data-a="ficha"]) .as-input,
body:has([data-a="ficha"]) .md-pin-form__in,
body:has([data-a="ficha"]) .fm-campo input,
body:has([data-a="ficha"]) .fm-campo select { transition: all .2s var(--a-tw); }
body:has([data-a="ficha"]) .as-input:focus,
body:has([data-a="ficha"]) .md-pin-form__in:focus {
    outline: none; border-color: rgba(255, 107, 0, .5); box-shadow: 0 0 0 2px rgba(255, 107, 0, .2);
}

/* Filas de actividad y de cobros: hover:border-rush-500/30 transition-colors; el detalle se abre en 200 ms */
body:has([data-a="ficha"]) .act-row,
body:has([data-a="ficha"]) .fin-tx__row { transition: border-color .15s var(--a-tw); }
body:has([data-a="ficha"]) .act-row:hover,
body:has([data-a="ficha"]) .fin-tx__row:hover { border-color: rgba(255, 107, 0, .3); }
/* Una fila que reaparece al filtrar entra con el resorte 400/28 (initial y -16, scale .97) */
[data-a="ficha"] .act-row.a-entra {
    animation: a-aparece .36s linear backwards, a-entra-fila .36s var(--a-resorte-fila) backwards;
}
/* El detalle: height 0 → auto + opacity en 200 ms (donde el navegador sabe animar `auto`).
   El display sigue siendo el de la ficha (none / flex); `allow-discrete` lo mantiene mientras se cierra. */
@supports (interpolate-size: allow-keywords) {
    [data-a="ficha"] .act-row .x-det,
    [data-a="ficha"] .fin-tx__row .x-det {
        interpolate-size: allow-keywords;
        height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0; border-top-width: 0;
        transition: height .2s var(--a-io), opacity .2s var(--a-io), margin-top .2s var(--a-io),
                    padding-top .2s var(--a-io), border-top-width .2s var(--a-io), display .2s allow-discrete;
    }
    [data-a="ficha"] .act-row.open .x-det,
    [data-a="ficha"] .fin-tx__row.open .x-det {
        height: auto; opacity: 1; margin-top: .55rem; padding-top: .55rem; border-top-width: 1px;
    }
    @starting-style {
        [data-a="ficha"] .act-row.open .x-det,
        [data-a="ficha"] .fin-tx__row.open .x-det {
            height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top-width: 0;
        }
    }
}

/* Panel «¿Cómo pagó?» de una multa: initial height 0 / opacity 0 → height auto / opacity 1, sin `transition` propia
   (altura con resorte 550/30 en 0,4 s; opacidad lineal 0,3 s). Se abre y se cierra con el atributo `hidden`. */
@supports (interpolate-size: allow-keywords) {
    [data-a="ficha"] .pen-cobro {
        interpolate-size: allow-keywords; overflow: hidden;
        transition: height .4s var(--a-resorte-alto), opacity .3s linear, margin .4s var(--a-resorte-alto),
                    padding .4s var(--a-resorte-alto), border-width .4s var(--a-resorte-alto), display .4s allow-discrete;
    }
    [data-a="ficha"] .pen-cobro[hidden] {
        display: none; height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
    }
    @starting-style {
        [data-a="ficha"] .pen-cobro:not([hidden]) {
            height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
        }
    }
}

/* Estado de carga de un botón: el icono se cambia por el spinner (Loader2 animate-spin, 1 s lineal) y queda en 50 % */
[data-a="ficha"] .a-cargando { pointer-events: none; }
.a-spinner {
    display: inline-block; width: 16px; height: 16px; flex-shrink: 0; margin-right: .5rem;
    animation: a-gira 1s linear infinite;
}

/* Ventanas (componente Modal): fondo negro 70 % con blur 12 px; caja .92 → 1 y 12 px → 0 en 300 ms; alto máx. 90dvh */
body:has([data-a="ficha"]) .as-overlay {
    background: rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .3s linear, display .3s allow-discrete, overlay .3s allow-discrete;
}
body:has([data-a="ficha"]) .as-overlay.active { opacity: 1; }
body:has([data-a="ficha"]) .as-overlay .as-modal {
    max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
    -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
    opacity: 0; transform: translateY(12px) scale(.92);
    transition: opacity .3s var(--a-modal), transform .3s var(--a-modal);
}
body:has([data-a="ficha"]) .as-overlay.active .as-modal { opacity: 1; transform: none; }
@starting-style {
    body:has([data-a="ficha"]) .as-overlay.active { opacity: 0; }
    body:has([data-a="ficha"]) .as-overlay.active .as-modal { opacity: 0; transform: translateY(12px) scale(.92); }
}

/* ═══════════════ Ajustes (data-a="ajustes") ═══════════════ */

/* Entrada escalonada: container staggerChildren .08, cada item opacity 0, y 15 → 1, 0 */
[data-a="ajustes"] .a-item {
    animation: a-aparece .3s linear backwards, a-sube-15 .43s var(--a-resorte-y) backwards;
    animation-delay: calc(var(--a-i, 0) * .08s);
}

/* Campos (Input / textarea del vivo): transition, focus:border-rush-500/50 (textarea /40) y anillo */
body:has([data-a="ajustes"]) .st-field input,
body:has([data-a="ajustes"]) .st-field textarea { transition: all .2s var(--a-tw); }
body:has([data-a="ajustes"]) .st-field textarea { transition: color .15s var(--a-tw), background-color .15s var(--a-tw), border-color .15s var(--a-tw); }
body:has([data-a="ajustes"]) .st-field input:hover:not(:focus) { border-color: rgba(255, 255, 255, .13); }
body:has([data-a="ajustes"]) .st-field input:focus {
    outline: none; border-color: rgba(255, 107, 0, .5); box-shadow: 0 0 0 2px rgba(255, 107, 0, .2);
}
body:has([data-a="ajustes"]) .st-field textarea:focus {
    outline: none; border-color: rgba(255, 107, 0, .4); box-shadow: 0 0 0 1px rgba(255, 107, 0, .2);
}

/* Guardar (Button): hover 1.02, tap .98, resplandor naranja; con "loading" muestra el spinner */
body:has([data-a="ajustes"]) .st-save {
    position: relative;
    transition: box-shadow .2s var(--a-tw), opacity .2s var(--a-tw), transform .15s var(--a-io);
}
body:has([data-a="ajustes"]) .st-save:not(:disabled):hover {
    transform: scale(1.02); box-shadow: 0 0 30px rgba(255, 107, 0, .5), 0 0 80px rgba(255, 107, 0, .15);
}
body:has([data-a="ajustes"]) .st-save:not(:disabled):active { transform: scale(.98); }
body:has([data-a="ajustes"]) .st-save:disabled { opacity: .5; pointer-events: none; }

/* «Guardado ✓»: opacity 0, x -10 → 1, 0 y se va a los 3 s */
[data-a="ajustes"] .st-guardado {
    animation: a-aparece .3s linear backwards, a-entra-x .43s var(--a-resorte-y) backwards;
}
[data-a="ajustes"] .st-guardado.a-fuera { display: none; }

/* ═══════════════ Historial de ventas (Bitácora financiera) ═══════════════ */

/* «Ver ventas más antiguas»: hover:bg-dark-surface/50 hover:text-dark-text transition-colors */
body .log-morebtn { transition: color .15s var(--a-tw), background-color .15s var(--a-tw), border-color .15s var(--a-tw); }
body .log-morebtn:hover { background: var(--rr-glass-bg-hover); color: var(--rr-text-primary); border-color: var(--rr-glass-border); }
/* Filtros: transition-all 200 ms + focus:border-rush-500/50 + anillo de 2 px */
body .fin-filtros select,
body .fin-filtros input,
body .fin-custom input { transition: all .2s var(--a-tw); }
body .fin-filtros select:focus,
body .fin-filtros input:focus,
body .fin-custom input:focus {
    outline: none; border-color: rgba(255, 107, 0, .5); box-shadow: 0 0 0 2px rgba(255, 107, 0, .2);
}

/* Cada movimiento de la lista entra con opacity 0, y 5 → 1, 0 y un retraso de .03 s por fila (delay: i * 0.03) */
body .fin-table .a-fila-venta {
    animation: a-aparece .3s linear backwards, a-sube-5 .43s var(--a-resorte-y) backwards;
    animation-delay: calc(var(--a-i, 0) * .03s);
}

/* ═══════════════ Movimiento reducido: todo quieto ═══════════════ */
@media (prefers-reduced-motion: reduce) {
    [data-a] *, [data-a], .a-tab-pastilla, .a-spinner, body .fin-table .a-fila-venta,
    body:has([data-a]) .as-overlay, body:has([data-a]) .as-overlay * {
        animation: none !important; transition: none !important;
    }
    body:has([data-a]) .as-btn:hover, body:has([data-a]) .carnet__wbtn:hover,
    body:has([data-a]) .st-save:hover, body:has([data-a]) .pen-cobro__ok:hover { transform: none !important; }
}