/* Comportamiento del vivo, bloque C: notificaciones, ventas (POS), membresías, productos, nómina.
   Solo lo escribe el agente de este bloque (TAREA-1-interaccion-c.md).

   Método: transcribir, no interpretar. Cada regla cita de dónde sale el valor.
   · Tailwind v4 (el vivo): `transition-*` = 150 ms · cubic-bezier(.4,0,.2,1); `duration-200` = 200 ms;
     `backdrop-blur-sm/md/xl` = 8/12/24 px; `animate-pulse` = 2 s · cubic-bezier(.4,0,.6,1);
     `animate-spin` = 1 s linear; `animate-shimmer` = 2.5 s linear (globals.css:516).
   · framer-motion (el vivo): resorte {stiffness 300, damping 24} de los `variants` `item`/`listItem`;
     sin `transition` propio: opacidad = 0.3 s · cubic-bezier(.25,.1,.35,1) y `y`/`x` = resorte 500/25;
     con `duration` suelto = easeInOut (cubic-bezier(.42,0,.58,1)). Las curvas `linear()` de abajo salen
     de simular el resorte con el criterio de reposo de framer (scripts/verificar_interaccion_c.py las mide).
   · Todo en mejora progresiva: sin este archivo o sin c.js la pantalla queda como estaba.
   · `prefers-reduced-motion: reduce` apaga animaciones y transiciones (globals.css:738 del vivo hace lo mismo).
   · Cada pantalla se engancha con `data-rrc="…"` en su `.admin-container` (una línea en su plantilla). */

:root {
    --rrc-tw: cubic-bezier(.4, 0, .2, 1);          /* transition-* de Tailwind v4 */
    --rrc-fm: cubic-bezier(.25, .1, .35, 1);       /* opacidad por omisión de framer */
    --rrc-io: cubic-bezier(.42, 0, .58, 1);        /* easeInOut: {duration} sin ease */
    --rrc-liquid: cubic-bezier(.22, 1, .36, 1);    /* modal.tsx:50 */
    --rrc-pulse: cubic-bezier(.4, 0, .6, 1);       /* animate-pulse */
    --rrc-tab: cubic-bezier(.34, 1.2, .64, 1);     /* resorte bounce .2 · .4 s (misma aproximación que el menú) */
    /* Resortes simulados (framer): item 300/24 (15 px) · listItem 300/24 (10 px) · y 500/25 (10 px)
       · contenedor 100/10 (opacidad) · x 500/25 (100 px, toast) */
    --rrc-r-item: linear(0, 0.04, 0.138, 0.267, 0.406, 0.542, 0.665, 0.772, 0.858, 0.926, 0.976, 1.01, 1.032, 1.044, 1.049, 1.048, 1.044, 1.038, 1.031, 1.025, 1.018, 1.013, 1.008, 1.005, 1);
    --rrc-r-lista: linear(0, 0.014, 0.051, 0.105, 0.172, 0.246, 0.325, 0.405, 0.483, 0.559, 0.63, 0.696, 0.756, 0.81, 0.857, 0.898, 0.933, 0.962, 0.986, 1.005, 1.02, 1.032, 1.04, 1.045, 1);
    --rrc-r-y: linear(0, 0.059, 0.2, 0.382, 0.57, 0.742, 0.884, 0.991, 1.063, 1.104, 1.119, 1.117, 1.102, 1.081, 1.059, 1.037, 1);
    --rrc-r-cont: linear(0, 0.059, 0.204, 0.393, 0.592, 0.775, 0.927, 1.04, 1.114, 1.153, 1.163, 1.152, 1.127, 1.096, 1.064, 1.034, 1);
    --rrc-r-x100: linear(0, 0.15, 0.452, 0.751, 0.967, 1.084, 1.12, 1.106, 1.07, 1.034, 1.006, 0.991, 0.986, 0.987, 0.991, 0.995, 1);
    /* Tokens del vivo (globals.css:21-38 oscuro; 88-110 claro, donde `dark-*` se remapea) */
    --rrc-rush-500: #FF6B00;
    --rrc-rush-400: #FF9933;               /* rush-400 */
    --rrc-dark-border: #1A1A1A;
    --rrc-surface: 12, 12, 12;            /* dark-surface #0C0C0C en tripleta, para usarlo con alfa: rgba(var(--rrc-surface), .5) */
    --rrc-card: #111111;                  /* dark-card */
    --rrc-text: #E8E8E8;                  /* dark-text */
    --rrc-muted: #666666;                 /* dark-muted */
    --rrc-muted-rgb: 102, 102, 102;
}
html[data-tema="claro"] {
    --rrc-rush-400: #EA580C;
    --rrc-dark-border: rgba(0, 0, 0, .22);
    --rrc-surface: 255, 255, 255;
    --rrc-card: #FFFFFF;
    --rrc-text: #111827;
    --rrc-muted: #374151;
    --rrc-muted-rgb: 55, 65, 81;
}

@keyframes rrc-item   { from { opacity: 0; transform: translateY(15px); } }
@keyframes rrc-lista  { from { opacity: 0; transform: translateX(-10px); } }
@keyframes rrc-fade   { from { opacity: 0; } }
@keyframes rrc-op     { from { opacity: 0; } }
@keyframes rrc-ty10   { from { transform: translateY(10px); } }
@keyframes rrc-ty8    { from { transform: translateY(8px); } }
@keyframes rrc-ancho  { from { width: 0; } }
@keyframes rrc-y10    { from { opacity: 0; transform: translateY(10px); } }
@keyframes rrc-y8     { from { opacity: 0; transform: translateY(8px); } }
@keyframes rrc-pop    { from { opacity: 0; transform: scale(.95); } }
@keyframes rrc-sc95   { from { transform: scale(.95); } }
@keyframes rrc-xin    { from { opacity: 0; transform: translateX(-8px); } }
@keyframes rrc-rebote { from { transform: scale(0); } }
@keyframes rrc-pulso  { 50% { opacity: .5; } }
@keyframes rrc-giro   { to { transform: rotate(360deg); } }
@keyframes rrc-toast  { from { opacity: 0; transform: translateX(100px) scale(.9); } }

/* ───────── Piezas comunes (button.tsx, skeleton animate-pulse) ───────── */

/* Botón con carga (ui/button.tsx:42): el aro Loader2 (h-4 w-4 animate-spin) ocupa el sitio del icono;
   disabled:opacity-50 disabled:pointer-events-none */
.rrc-cargando > .rrc-spin { width: 16px; height: 16px; flex-shrink: 0; animation: rrc-giro 1s linear infinite; }
.rrc-cargando > svg:not(.rrc-spin) { display: none; }

/* Entrada orquestada: el contenedor aparece y sus hijos suben uno tras otro (variants container/item).
   El índice lo pone c.js en `--rrc-i`; sin JS todos entran a la vez. */
/* 12/10 (auditoría): el menú lateral vive DENTRO del contenedor; animar el contenedor o el
   encabezado lo apagaba en cada cambio de pantalla. Se anima todo menos la rama del menú. */
[data-rrc="nomina"] { --rrc-paso: 50ms; }
[data-rrc="notificaciones"] > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="nomina"] > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="notificaciones"] > :where(:has(.admin-nav)) > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="nomina"] > :where(:has(.admin-nav)) > :where(:not(.admin-nav):not(:has(.admin-nav))) {
    animation: rrc-item 420ms var(--rrc-r-item) backwards;
    animation-delay: calc(var(--rrc-i, 0) * var(--rrc-paso, 60ms));
}
/* memberships/page.tsx:70, products/page.tsx:222, sales/page.tsx:20: la pantalla entera aparece con opacidad */
[data-rrc="planes"] > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="planes"] > :where(:has(.admin-nav)) > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="productos"] > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="productos"] > :where(:has(.admin-nav)) > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="ventas"] > :where(:not(.admin-nav):not(:has(.admin-nav))),
[data-rrc="ventas"] > :where(:has(.admin-nav)) > :where(:not(.admin-nav):not(:has(.admin-nav))) { animation: rrc-fade 300ms var(--rrc-fm) backwards; }

/* Listas con entrada desde la izquierda (variants listItem) */
[data-rrc="notificaciones"] .nt-item,
[data-rrc="notificaciones"] .nt-fila-p {
    animation: rrc-lista 240ms var(--rrc-r-lista) backwards;
    animation-delay: calc(var(--rrc-j, 0) * 60ms);
}

/* Revelar/ocultar con altura (AnimatePresence: height 0↔auto + opacidad) lo hace c.js con
   la Web Animations API; aquí solo se evita que el contenido se vea mientras se anima. */
.rrc-revela { overflow: hidden; }

/* Superposición + ventana (ui/modal.tsx): fondo negro con desenfoque, ventana que sube y crece. */
.rrc-fondo-modal {
    display: none;
    opacity: 0;
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}

/* Esqueleto de carga (products/page.tsx:277, memberships/page.tsx:85): tarjeta con bloques bg-dark-surface/50
   que laten con animate-pulse. Lo arma c.js mientras la página siguiente tarda en llegar. */
[data-rrc] .rrc-sk-card { border: 1px solid var(--rrc-dark-border); border-radius: 16px; background: var(--rrc-card); padding: 20px; animation: rrc-pulso 2s var(--rrc-pulse) infinite; }
[data-rrc] .rrc-sk { display: block; background: rgba(var(--rrc-surface), .5); }
[data-rrc] .rrc-sk-fila { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
[data-rrc] .rrc-sk-fila2 { display: flex; gap: 8px; }
[data-rrc] .rrc-sk-kpi { display: flex; align-items: center; gap: 10px; padding: 12px; }
[data-rrc] .rrc-sk-col { display: flex; flex-direction: column; gap: 6px; }
[data-rrc] .rrc-sk-plan { padding: 24px; }
[data-rrc] .rrc-sk-plan .rrc-sk-col { gap: 8px; }
[data-rrc] .rrc-sk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { [data-rrc] .rrc-sk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────── /notifications ───────── */

/* Pestañas (ui/tabs.tsx): hover:text-dark-text + transition-colors; pastilla activa que se desliza */
[data-rrc="notificaciones"] .nt-tab { position: relative; transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
[data-rrc="notificaciones"] .nt-tab:not(.active):hover { color: var(--rrc-text); }
[data-rrc="notificaciones"] .nt-tab > *:not(.rrc-pastilla) { position: relative; z-index: 1; }
[data-rrc="notificaciones"] .nt-tabs.rrc-pastilla-ok .nt-tab.active { background: transparent; border-color: transparent; }
[data-rrc="notificaciones"] .rrc-pastilla {                                      /* absolute inset-0 rounded-lg bg-rush-500/20 border border-rush-500/30 */
    position: absolute; inset: 0; z-index: 0; border-radius: 8px;
    background: rgba(255, 107, 0, .2); border: 1px solid rgba(255, 107, 0, .3);
    pointer-events: none;
}

/* Campos del formulario de componer y del buscador de suscriptores: transition-colors,
   foco = borde rush-500/40 (oscuro) o orange-300 (claro) — notifications/page.tsx:1043 */
[data-rrc="notificaciones"] .nt-input,
[data-rrc="notificaciones"] .nt-select,
[data-rrc="notificaciones"] .nt-area { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
[data-rrc="notificaciones"] .nt-input::placeholder,
[data-rrc="notificaciones"] .nt-area::placeholder { color: rgba(var(--rrc-muted-rgb), .5); }
[data-rrc="notificaciones"] .nt-input:focus,
[data-rrc="notificaciones"] .nt-select:focus,
[data-rrc="notificaciones"] .nt-area:focus { border-color: rgba(255, 107, 0, .4); }
html[data-tema="claro"] [data-rrc="notificaciones"] .nt-input::placeholder,
html[data-tema="claro"] [data-rrc="notificaciones"] .nt-area::placeholder { color: #9ca3af; }
html[data-tema="claro"] [data-rrc="notificaciones"] .nt-input:focus,
html[data-tema="claro"] [data-rrc="notificaciones"] .nt-select:focus,
html[data-tema="claro"] [data-rrc="notificaciones"] .nt-area:focus { border-color: #fdba74; }
/* Buscador del historial (page.tsx:1437): focus:border-rush-500/30 + ring-2 rush-500/10, sin transición */
[data-rrc="notificaciones"] .nt-busca .nt-input { transition: none; }
[data-rrc="notificaciones"] .nt-busca .nt-input:focus { border-color: rgba(255, 107, 0, .3); box-shadow: 0 0 0 2px rgba(255, 107, 0, .1); }
/* Cuadros de fecha/hora de programar (page.tsx:1303): mismo foco que los demás campos */
#nt-caja-fecha .nt-input { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }

/* Botonera de audiencia y de cuándo sale (page.tsx:1114, 1262): transition-all */
[data-rrc="notificaciones"] .nt-seg button { transition: all 150ms var(--rrc-tw); }

/* Botones del historial (page.tsx:1442, 1524, 1532): transition-colors */
[data-rrc="notificaciones"] .nt-btn { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw), opacity 150ms var(--rrc-tw); }
#nt-borrar-historial { background: rgba(239, 68, 68, .06); border-color: rgba(239, 68, 68, .2); color: #f87171; }
#nt-borrar-historial:hover { background: rgba(239, 68, 68, .1); }
html[data-tema="claro"] #nt-borrar-historial { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
[data-rrc="notificaciones"] .nt-btn--suave[data-accion="reintentar"]:hover { color: rgba(255, 107, 0, .8); }
[data-rrc="notificaciones"] .nt-btn--suave[data-accion="cancelar"]:hover { color: #fca5a5; }
[data-rrc="notificaciones"] .nt-btn--primario:hover:not(:disabled) { background: var(--rrc-rush-400); }
[data-rrc="notificaciones"] .nt-btn:disabled { opacity: .5; pointer-events: none; }

/* «Enviar» / «Guardar borrador» y los dos botones de la ventana son `Button` del vivo: transition-all 200 ms y
   escala 1,02 al pasar / .98 al tocar (150 ms); el resto de los botones de la pantalla son botones comunes */
[data-rrc="notificaciones"] #nt-enviar, [data-rrc="notificaciones"] #nt-borrador, #nt-overlay #nt-modal-no, #nt-overlay #nt-modal-si {
    transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io);
}
[data-rrc="notificaciones"] #nt-enviar:hover:not(:disabled), [data-rrc="notificaciones"] #nt-borrador:hover:not(:disabled),
#nt-overlay #nt-modal-no:hover, #nt-overlay #nt-modal-si:hover { transform: scale(1.02); }
[data-rrc="notificaciones"] #nt-enviar:active:not(:disabled), [data-rrc="notificaciones"] #nt-borrador:active:not(:disabled),
#nt-overlay #nt-modal-no:active, #nt-overlay #nt-modal-si:active { transform: scale(.98); }
/* «Limpiar» de la selección (page.tsx:1189): hover:text-dark-text transition-colors */
[data-rrc="notificaciones"] .nt-limpiar { transition: color 150ms var(--rrc-tw); }
[data-rrc="notificaciones"] .nt-limpiar:hover { color: var(--rrc-text); }
/* Punto de «enviando» (page.tsx:1473): bg-yellow-400 animate-pulse */
[data-rrc="notificaciones"] .nt-punto.p-sending { animation: rrc-pulso 2s var(--rrc-pulse) infinite; }

/* Paginación (page.tsx:1558): hover:bg-dark-surface/60 · disabled:opacity-30 cursor-not-allowed · transition-colors */
[data-rrc="notificaciones"] .nt-pag a,
[data-rrc="notificaciones"] .nt-pag span.off { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
[data-rrc="notificaciones"] .nt-pag a:hover { background: rgba(var(--rrc-surface), .6); }
[data-rrc="notificaciones"] .nt-pag span.off { opacity: .3; cursor: not-allowed; }

/* Chips de filtro de suscriptores (page.tsx:1702): transition-colors + hover:text-dark-text */
[data-rrc="notificaciones"] .nt-filtro { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
[data-rrc="notificaciones"] .nt-filtro:not(.active):hover { color: var(--rrc-text); }

/* Lista de personas (page.tsx:1204-1235): max-h-48 · overflow-y-auto · fila transition-colors ·
   casilla de 20 px con borde y relleno naranja al marcar */
[data-rrc="notificaciones"] .nt-lista { max-height: 12rem; overflow-y: auto; gap: 0; border: 1px solid var(--rrc-dark-border); border-radius: 12px; }
[data-rrc="notificaciones"] .nt-persona + .nt-persona { border-top: 1px solid var(--rrc-dark-border); }
[data-rrc="notificaciones"] .nt-persona { transition: background-color 150ms var(--rrc-tw); padding: 10px 12px; gap: 12px; border-radius: 0; }
[data-rrc="notificaciones"] .nt-persona:hover { background: rgba(var(--rrc-surface), .5); }
[data-rrc="notificaciones"] .nt-persona:has(input:checked) { background: rgba(255, 107, 0, .06); }
[data-rrc="notificaciones"] .nt-persona input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid var(--rrc-dark-border); background-color: transparent;
    transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw);
    display: grid; place-items: center; cursor: pointer; margin: 0;
}
[data-rrc="notificaciones"] .nt-persona input[type="checkbox"]:checked {
    background-color: var(--rrc-rush-500); border-color: var(--rrc-rush-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}

/* Barras de desglose (page.tsx:783-835): ancho de 0 al valor en .8 s easeOut; retrasos 0, .1, .2 s */
[data-rrc="notificaciones"] .nt-barra-fill { animation: rrc-ancho 800ms cubic-bezier(0, 0, .58, 1) backwards; animation-delay: calc(var(--rrc-j, 0) * 100ms); }
[data-rrc="notificaciones"] .nt-sus-barra i { transition: width 500ms var(--rrc-tw); }     /* page.tsx:1664 duration-500 transition-all */

/* Ventana de confirmación (page.tsx:453-510): fondo negro/60 con blur-sm; ventana opacidad + escala .9→1.
   Entra y sale con transiciones (display discreto), así el cierre también se anima como el AnimatePresence. */
#nt-overlay {
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#nt-overlay.abierta { opacity: 1; }
@starting-style { #nt-overlay.abierta { opacity: 0; } }
#nt-overlay .nt-modal {
    max-width: 384px; border-radius: 16px; padding: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    opacity: 0; transform: scale(.9);
    transition: opacity 300ms var(--rrc-fm), transform 150ms var(--rrc-liquid);
}
#nt-overlay.abierta .nt-modal { opacity: 1; transform: none; }
@starting-style { #nt-overlay.abierta .nt-modal { opacity: 0; transform: scale(.9); } }

/* Avisos (providers/toast-provider.tsx): arriba a la derecha, entran desde la derecha */
.rrc-toasts { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.rrc-toast {
    display: flex; align-items: center; gap: 12px; pointer-events: auto;
    border-radius: 12px; border: 1px solid; padding: 12px 16px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    animation: rrc-toast 443ms var(--rrc-r-x100) backwards;
    font-size: 14px; font-weight: 500; max-width: min(92vw, 420px);
}
.rrc-toast svg { width: 20px; height: 20px; flex-shrink: 0; }
.rrc-toast p { margin: 0; overflow-wrap: anywhere; }
.rrc-toast b { display: block; font-weight: 600; }
.rrc-toast button { margin-left: 8px; opacity: .6; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; display: inline-flex; transition: opacity 150ms var(--rrc-tw); }
.rrc-toast button:hover { opacity: 1; }
.rrc-toast button svg { width: 16px; height: 16px; }
.rrc-toast--success { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .1); color: #4ade80; }
.rrc-toast--error   { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .1); color: #f87171; }
.rrc-toast--warning { border-color: rgba(234, 179, 8, .3); background: rgba(234, 179, 8, .1); color: #facc15; }
.rrc-toast--info    { border-color: rgba(59, 130, 246, .3); background: rgba(59, 130, 246, .1); color: #60a5fa; }
.rrc-toast.rrc-sale { opacity: 0; transform: translateX(100px) scale(.9); transition: opacity 300ms var(--rrc-fm), transform 443ms var(--rrc-r-x100); }
html[data-tema="claro"] .rrc-toast--success { border-color: #86efac; background: #f0fdf4; color: #16a34a; }
html[data-tema="claro"] .rrc-toast--error   { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }
html[data-tema="claro"] .rrc-toast--warning { border-color: #fde047; background: #fefce8; color: #a16207; }
html[data-tema="claro"] .rrc-toast--info    { border-color: #93c5fd; background: #eff6ff; color: #2563eb; }

/* ───────── /products ───────── */

/* La pantalla entera aparece (page.tsx:222) y cada tarjeta sube 10 px con retraso i·50 ms (page.tsx:304):
   opacidad = 0,3 s en la curva por omisión de framer, y = resorte 500/25 */
[data-rrc="productos"] .pr-card {
    animation: rrc-op 300ms var(--rrc-fm) backwards, rrc-ty10 263ms var(--rrc-r-y) backwards;
    animation-delay: calc(var(--rrc-j, 0) * 50ms);
    /* Card hover (ui/card.tsx): transition-all duration-200 + whileHover {y:-2, scale:1.01, duration .2} */
    transition: transform 200ms var(--rrc-io), border-color 200ms var(--rrc-tw), box-shadow 200ms var(--rrc-tw), background-color 200ms var(--rrc-tw), opacity 200ms var(--rrc-tw);
    cursor: pointer;
}
[data-rrc="productos"] .pr-card:hover { transform: translateY(-2px) scale(1.01); border-color: rgba(255, 107, 0, .3); }

/* Pastillas de categoría (page.tsx:261): transition-all duration-200; inactiva en hover = surface/50 + dark-text */
[data-rrc="productos"] .chip { transition: all 200ms var(--rrc-tw); }
[data-rrc="productos"] .chip:not(.chip--active):hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }

/* Botones de la tarjeta (ui/button.tsx, size sm): transition-all duration-200, whileHover 1.02 / whileTap .98 (.15 s) */
[data-rrc="productos"] .pr-btn { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
[data-rrc="productos"] .pr-btn:hover { transform: scale(1.02); }
[data-rrc="productos"] .pr-btn:active { transform: scale(.98); }
[data-rrc="productos"] .pr-btn:not(.pr-btn--danger):not(.pr-btn--toggle):hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }
[data-rrc="productos"] .pr-btn--danger { background: rgba(239, 68, 68, .08); color: #f87171; border-color: rgba(239, 68, 68, .15); }
html[data-tema="claro"] [data-rrc="productos"] .pr-btn--danger { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
html[data-tema="claro"] [data-rrc="productos"] .pr-btn--danger:hover { background: rgba(239, 68, 68, .15); color: #dc2626; border-color: #f87171; }
[data-rrc="productos"] .pr-btn--danger:hover { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .3); color: #f87171; }

/* Ventana de producto (ui/modal.tsx): fondo negro/70 con blur-md; ventana opacidad 0→1, escala .92→1, y 12→0
   en .3 s con la curva [.22,1,.36,1]. Entra y sale con transiciones (display discreto). */
#productModal {
    opacity: 0; background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#productModal.show { opacity: 1; }
@starting-style { #productModal.show { opacity: 0; } }
#productModal .pr-modal {
    opacity: 0; transform: translateY(12px) scale(.92);
    transition: opacity 300ms var(--rrc-liquid), transform 300ms var(--rrc-liquid);
    backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
}
#productModal.show .pr-modal { opacity: 1; transform: none; }
@starting-style { #productModal.show .pr-modal { opacity: 0; transform: translateY(12px) scale(.92); } }
#productModal .pr-modal__x { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#productModal .pr-modal__x:hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }

/* Cuadro de la foto (page.tsx:421): h-20 w-20 rounded-2xl border-2 dashed, hover borde rush-500/40 + fondo rush-500/4 */
#productModal .zona-archivo {
    width: 80px; height: 80px; border-radius: 16px; border: 2px dashed var(--rrc-dark-border);
    background: rgba(var(--rrc-surface), .3); cursor: pointer;
    transition: all 150ms var(--rrc-tw);
}
#productModal .zona-archivo:hover { border-color: rgba(255, 107, 0, .4); background: rgba(255, 107, 0, .04); }

/* Campos, pastillas e interruptor del formulario (ui/input.tsx, page.tsx:485, 546) */
#productModal .pr-field input, #productModal .pr-field textarea { transition: all 200ms var(--rrc-tw); }
#productModal .pr-pill { transition: all 200ms var(--rrc-tw); }
#productModal .pr-pill:not(.on):hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }
#productModal .pr-switch { background: rgba(255, 255, 255, .1); transition: color 200ms var(--rrc-tw), background-color 200ms var(--rrc-tw), border-color 200ms var(--rrc-tw); }
#productModal .pr-switch-row.on .pr-switch { background: rgba(34, 197, 94, .3); }
#productModal .pr-switch span { transition: transform 200ms var(--rrc-tw); }
#productModal .pr-switch-row.on .pr-switch span { transform: translateX(20px); }

/* ───────── /payroll ───────── */

/* Periodo (page.tsx:384): transition-all; inactivo en hover = dark-text + surface/50; activo con resplandor */
[data-rrc="nomina"] .py-pill { transition: all 150ms var(--rrc-tw); }
[data-rrc="nomina"] .py-pill:not(.active):hover { color: var(--rrc-text); background: rgba(var(--rrc-surface), .5); }
[data-rrc="nomina"] .py-pill.active { box-shadow: 0 0 10px rgba(255, 107, 0, .15); }
/* «Aplicar» (page.tsx:470): bg-rush-500, hover:bg-rush-600, transition-all, disabled:opacity-40 + not-allowed */
[data-rrc="nomina"] .py-go { background: #FF6B00; color: #fff; font-weight: 600; transition: all 150ms var(--rrc-tw); }
[data-rrc="nomina"] .py-go:hover { background: #E65F00; }
[data-rrc="nomina"] .py-go:disabled { opacity: .4; cursor: not-allowed; }
/* Cuadros de fecha y mes (page.tsx:435): focus:border-rush-500/50 focus:outline-none */
[data-rrc="nomina"] .py-fecha:focus, [data-rrc="nomina"] .py-select:focus { border-color: rgba(255, 107, 0, .5); outline: none; }
/* Botón CSV (ui/button.tsx ghost sm): transition-all 200 ms, escala 1,02 al pasar y .98 al tocar */
[data-rrc="nomina"] .py-csv { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
[data-rrc="nomina"] .py-csv:hover { transform: scale(1.02); background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }
[data-rrc="nomina"] .py-csv:active { transform: scale(.98); }

/* Fila de coach (page.tsx:93): cursor-pointer hover:bg-dark-surface/20 transition-colors */
[data-rrc="nomina"] .py-cab { transition: background-color 150ms var(--rrc-tw); }
[data-rrc="nomina"] .py-cab:hover { background: rgba(var(--rrc-surface), .2); }
/* Editar tarifa (page.tsx:150): hover:text-rush-500 hover:bg-rush-500/10 transition-colors, rounded-lg */
[data-rrc="nomina"] .py-tarifa-btn { border-radius: 8px; transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
[data-rrc="nomina"] .py-tarifa-btn:hover { color: #FF6B00; background: rgba(255, 107, 0, .1); }
/* Chevrón (page.tsx:159): transition-transform, rotate-180 */
[data-rrc="nomina"] .py-chev { transition: transform 150ms var(--rrc-tw); }
#pyTarifaBg .py-plegar svg { transition: transform 150ms var(--rrc-tw); }
#pyTarifaBg .py-plegar { transition: color 150ms var(--rrc-tw); }
/* Detalle clase por clase: max-h-48 / max-h-32 con scroll, fila con hover:bg-dark-surface/20 (page.tsx:184-244) */
[data-rrc="nomina"] .py-clases { max-height: 12rem; overflow-y: auto; }
[data-rrc="nomina"] .py-cls:hover { background: rgba(var(--rrc-surface), .2); }
[data-rrc="nomina"] .py-noasist ul { max-height: 8rem; overflow-y: auto; }
#pyTarifaBg .py-hist { max-height: 8rem; overflow-y: auto; }

/* Ventana de tarifa (ui/modal.tsx): fondo negro/70 con blur-md; ventana opacidad 0→1, escala .92→1, y 12→0, .3 s */
#pyTarifaBg {
    opacity: 0; background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#pyTarifaBg.show { opacity: 1; }
@starting-style { #pyTarifaBg.show { opacity: 0; } }
#pyTarifaBg .py-modal {
    opacity: 0; transform: translateY(12px) scale(.92);
    transition: opacity 300ms var(--rrc-liquid), transform 300ms var(--rrc-liquid);
    backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
}
#pyTarifaBg.show .py-modal { opacity: 1; transform: none; }
@starting-style { #pyTarifaBg.show .py-modal { opacity: 0; transform: translateY(12px) scale(.92); } }
/* Campos de la ventana (coach-rate-modal.tsx:127): focus:border-rush-500/50 focus:outline-none, sin transición */
#pyTarifaBg .py-campo input:focus, #pyTarifaBg .py-campo textarea:focus { border-color: rgba(255, 107, 0, .5); outline: none; }
/* Cancelar / Guardar tarifa (ui/button.tsx): transition-all 200 ms, escala 1,02 al pasar y .98 al tocar */
#pyTarifaBg .py-modal__acc button { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
#pyTarifaBg .py-modal__acc button:hover:not(:disabled) { transform: scale(1.02); }
#pyTarifaBg .py-modal__acc button:active:not(:disabled) { transform: scale(.98); }
#pyTarifaBg .py-modal__acc button:disabled { opacity: .5; pointer-events: none; }
#pyTarifaBg .py-modal__acc button.rrc-cargando { gap: 8px; display: inline-flex; align-items: center; justify-content: center; }

/* ───────── /memberships ───────── */

/* Tarjetas (page.tsx:109): opacidad 0,3 s + subida de 10 px con resorte, retraso i·60 ms */
[data-rrc="planes"] .plan-card {
    animation: rrc-op 300ms var(--rrc-fm) backwards, rrc-ty10 263ms var(--rrc-r-y) backwards;
    animation-delay: calc(var(--rrc-j, 0) * 60ms);
}
/* «Nuevo Plan» (ui/button.tsx primary): transition-all 200 ms, escala 1,02 al pasar / .98 al tocar (.15 s),
   sombra 0 0 20px .35 + 0 0 60px .1 → al pasar 0 0 30px .5 + 0 0 80px .15 */
[data-rrc="planes"] .btn-create {
    box-shadow: 0 0 20px rgba(255, 107, 0, .35), 0 0 60px rgba(255, 107, 0, .1);
    transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io);
}
[data-rrc="planes"] .btn-create:hover { transform: scale(1.02); box-shadow: 0 0 30px rgba(255, 107, 0, .5), 0 0 80px rgba(255, 107, 0, .15); }
[data-rrc="planes"] .btn-create:active { transform: scale(.98); }
/* Estado vacío (page.tsx:246): aparece con opacidad */
[data-rrc="planes"] .empty-state { animation: rrc-fade 300ms var(--rrc-fm) backwards; }
/* Botones de icono de la tarjeta (page.tsx:135-157): rounded-lg p-1.5, transition-colors, disabled:opacity-40 */
[data-rrc="planes"] .icon-btn { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
[data-rrc="planes"] .icon-btn:hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }
[data-rrc="planes"] .icon-btn--hist:hover { color: var(--rrc-rush-400); }
[data-rrc="planes"] .icon-btn--del:hover { background: rgba(239, 68, 68, .1); color: #f87171; }
[data-rrc="planes"] .icon-btn:disabled { opacity: .4; }
/* «Desactivar / Activar» (page.tsx:228): hover:text-dark-text transition-colors */
[data-rrc="planes"] .btn-link-estado { transition: color 150ms var(--rrc-tw); }
[data-rrc="planes"] .btn-link-estado:hover { color: var(--rrc-text); }

/* Las tres ventanas (ui/modal.tsx): fondo negro/70 con blur-md; ventana opacidad 0→1, escala .92→1, y 12→0, .3 s.
   Entran y salen con transiciones (display discreto); la animación `modalSlide` vieja se apaga. */
#planModal, #historyModal, #deleteModal {
    opacity: 0; background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#planModal.active, #historyModal.active, #deleteModal.active { opacity: 1; }
@starting-style { #planModal.active, #historyModal.active, #deleteModal.active { opacity: 0; } }
#planModal .modal, #historyModal .modal, #deleteModal .modal {
    animation: none; opacity: 0; transform: translateY(12px) scale(.92);
    transition: opacity 300ms var(--rrc-liquid), transform 300ms var(--rrc-liquid);
    backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
}
#planModal.active .modal, #historyModal.active .modal, #deleteModal.active .modal { opacity: 1; transform: none; }
@starting-style {
    #planModal.active .modal, #historyModal.active .modal, #deleteModal.active .modal { opacity: 0; transform: translateY(12px) scale(.92); }
}
#planModal .modal__close, #historyModal .modal__close, #deleteModal .modal__close {
    border-radius: 8px; padding: 4px; transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw);
}
#planModal .modal__close:hover, #historyModal .modal__close:hover, #deleteModal .modal__close:hover { background: rgba(var(--rrc-surface), .5); color: var(--rrc-text); }

/* Pestañas del formulario (plan-form-modal.tsx:314): transition-all; inactiva en hover = dark-text + surface/50 */
#planModal .tabs__btn { transition: all 150ms var(--rrc-tw); }
#planModal .tabs__btn:not(.active):hover { color: var(--rrc-text); background: rgba(var(--rrc-surface), .5); }
/* Campos (ui/input.tsx): transition-all 200 ms, foco = borde rush-500/50 + anillo de 2 px rush-500/20 */
#planModal .form-control { transition: all 200ms var(--rrc-tw); }
#planModal .form-control:focus { border-color: rgba(255, 107, 0, .5); box-shadow: 0 0 0 2px rgba(255, 107, 0, .2); outline: none; }
/* Campos de beneficios y add-ons (page.tsx:753, 873): foco = borde rush-500/40, sin anillo ni transición */
#planModal .benefit-row .form-control, #planModal .addon-card .form-control { transition: none; }
#planModal .benefit-row .form-control:focus, #planModal .addon-card .form-control:focus { border-color: rgba(255, 107, 0, .4); box-shadow: none; }
#planModal .benefit-row .form-control::placeholder, #planModal .addon-card .form-control::placeholder { color: rgba(var(--rrc-muted-rgb), .4); }
/* Botones de elección (tipo, disciplina, días, unidad, add-on): transition-all / colors de 150 ms */
#planModal .pick, #planModal .addon-tipo { transition: all 150ms var(--rrc-tw); }
#historyModal .pick { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
#historyModal .pick:not(.on):hover { color: var(--rrc-text); }
/* Interruptores (page.tsx:455-470, 824-840): pista transition-colors, bolita transition-all, brillo al encender */
#planModal .switch { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
#planModal .switch::after { transition: all 150ms var(--rrc-tw); }
#planModal .switch { background: rgba(var(--rrc-surface), .5); border-color: var(--rrc-dark-border); }
#planModal .switch::after { background: rgba(var(--rrc-muted-rgb), .6); }
#planModal .switch-row.on .switch { background: rgba(255, 107, 0, .3); border-color: rgba(255, 107, 0, .4); }
#planModal .switch-row.on .switch::after { background: var(--rrc-rush-500); box-shadow: 0 0 8px rgba(255, 107, 0, .4); }
#planModal .switch-row--verde.on .switch { background: rgba(34, 197, 94, .3); border-color: rgba(34, 197, 94, .4); }
#planModal .switch-row--verde.on .switch::after { background: #4ade80; }
#planModal .switch-row--verde.on .switch::after { box-shadow: 0 0 8px rgba(34, 197, 94, .4); }
#planModal .addon-switch { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
#planModal .addon-switch__bola { background: rgba(var(--rrc-muted-rgb), .6); transition: all 150ms var(--rrc-tw); }
#planModal .addon-card.is-on .addon-switch__bola { background: #4ade80; }
/* Beneficios y add-ons (page.tsx:732, 806): max-h-[280px] / max-h-[320px] con scroll */
#planModal #listaBeneficios { max-height: 280px; overflow-y: auto; padding-right: 4px; }
#planModal #listaAddons { max-height: 320px; overflow-y: auto; padding-right: 4px; }
/* «Agregar» (page.tsx:708): rush-500/10 + borde rush-500/20, texto rush-400, hover rush-500/20, transition-colors */
#planModal .btn-add {
    border: 1px solid rgba(255, 107, 0, .2); border-radius: 8px; background: rgba(255, 107, 0, .1);
    color: var(--rrc-rush-400); font-weight: 500; transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw);
}
#planModal .btn-add:hover { background: rgba(255, 107, 0, .2); color: var(--rrc-rush-400); border-color: rgba(255, 107, 0, .2); }
/* Quitar beneficio / add-on (page.tsx:745, 843): hover:bg-red-500/10 hover:text-red-400, transition-colors;
   el de beneficios solo aparece al pasar sobre la fila (group-hover), y solo con ratón: en un teléfono no hay hover */
#planModal .benefit-row__del, #planModal .addon-card__del {
    border-radius: 8px; background: transparent; color: var(--rrc-muted);
    transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), opacity 150ms var(--rrc-tw);
}
#planModal .benefit-row__del:hover, #planModal .addon-card__del:hover { background: rgba(239, 68, 68, .1); color: #f87171; }
@media (hover: hover) {
    #planModal .benefit-row__del { opacity: 0; }
    #planModal .benefit-row:hover .benefit-row__del, #planModal .benefit-row:focus-within .benefit-row__del { opacity: 1; }
}
/* Pie de la ventana (ui/button.tsx): transition-all 200 ms, escala 1,02 / .98 */
#planModal .btn-modal { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
#planModal .btn-modal:hover:not(:disabled) { transform: scale(1.02); }
#planModal .btn-modal:active:not(:disabled) { transform: scale(.98); }
#planModal .btn-modal:disabled { opacity: .5; pointer-events: none; }
#planModal .btn-modal.rrc-cargando { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Confirmar borrado (page.tsx:293-307): transition-colors; Cancelar hover bg dark-surface */
#deleteModal .btn-borrar-cancel, #deleteModal .btn-borrar-ok { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#deleteModal .btn-borrar-cancel:hover { background: rgb(var(--rrc-surface)); }
/* Historial (plan-history-modal.tsx): tabla con max-h-[45vh], fila con hover:bg-dark-surface/30, descarga transition-colors */
#historyModal .hist-tabla-wrap { max-height: 45vh; overflow-y: auto; }
#historyModal #histBusqueda::placeholder { color: var(--rrc-muted); }
#historyModal .hist-tabla tbody tr:hover td { background: rgba(var(--rrc-surface), .3); }
#historyModal .btn-descargar { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
/* Cargando el historial: el vivo pone solo un aro Loader2 (h-6 w-6, rush-500, animate-spin) centrado, py-10 */
#historyModal .hist-vacio--carga { display: flex; justify-content: center; padding: 40px 0; font-size: 0; color: transparent; }
#historyModal .hist-vacio--carga::before {
    content: ''; width: 24px; height: 24px; flex-shrink: 0; animation: rrc-giro 1s linear infinite;
    background: no-repeat center / 24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
}

/* ───────── /sales (punto de venta) ───────── */

/* «Historial» (ui/button.tsx secondary): transition-all 200 ms, escala 1,02 / .98, hover surface/80 + borde rush-500/20 */
[data-rrc="ventas"] .pos-historial { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
[data-rrc="ventas"] .pos-historial:hover { transform: scale(1.02); background: rgba(var(--rrc-surface), .8); border-color: rgba(255, 107, 0, .2); }
[data-rrc="ventas"] .pos-historial:active { transform: scale(.98); }

/* Pestañas del catálogo (ui/tabs.tsx): transition-colors, hover:text-dark-text y pastilla que se desliza */
[data-rrc="ventas"] .pos-tab { position: relative; transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw), border-color 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-tab:not(.active):hover { color: var(--rrc-text); }
[data-rrc="ventas"] .pos-tab > *:not(.rrc-pastilla) { position: relative; z-index: 1; }
[data-rrc="ventas"] .pos-tabs.rrc-pastilla-ok .pos-tab.active { background: transparent; border-color: transparent; }
[data-rrc="ventas"] .rrc-pastilla { position: absolute; inset: 0; z-index: 0; border-radius: 8px; background: rgba(255, 107, 0, .2); border: 1px solid rgba(255, 107, 0, .3); pointer-events: none; }

/* Fichas del catálogo (product-catalog.tsx:369): entran con opacidad + escala .95 en .25 s [.22,1,.36,1], retraso i·40 ms;
   transition-all duration-300 y whileHover 1,03 / whileTap .97; la foto sube a 30 % con transition-opacity */
[data-rrc="ventas"] .pos-card {
    animation: rrc-pop 250ms var(--rrc-liquid) backwards;
    animation-delay: calc(var(--rrc-j, 0) * 40ms);
    transition: all 300ms var(--rrc-tw), transform 120ms var(--rrc-liquid);
}
[data-rrc="ventas"] .pos-card__foto img { transition: opacity 150ms var(--rrc-tw); }

/* Carrito (cart.tsx): backdrop-blur-sm, fila nueva desde la izquierda (x −8, .2 s), hover:bg-dark-surface/40 transition-colors,
   quitar con transition-all, cantidades con transition-colors */
[data-rrc="ventas"] .pos-panel { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-rrc="ventas"] .pos-item { transition: background-color 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-item.rrc-entra { animation: rrc-xin 200ms var(--rrc-liquid) backwards; }
[data-rrc="ventas"] .pos-item__quitar { transition: all 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-item__qty-btn { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }

/* Buscador de miembro (ui/input.tsx + member-search.tsx): transition-all 200 ms, foco = borde rush-500/50 + anillo 2 px rush-500/20;
   lista: max-h-56, borde, rounded-xl, sombra, blur-xl, y −4 → 0 en .15 s; fila con transition-colors */
[data-rrc="ventas"] .pos-buscador input { transition: all 200ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-buscador input:focus { outline: none; border-color: rgba(255, 107, 0, .5); box-shadow: 0 0 0 2px rgba(255, 107, 0, .2); }
[data-rrc="ventas"] .pos-buscador__lista {
    max-height: 14rem; overflow-y: auto; background: rgb(var(--rrc-surface)); border: 1px solid var(--rrc-dark-border); border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
[data-rrc="ventas"] .pos-resultado { transition: background-color 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-resultado:hover, [data-rrc="ventas"] .pos-resultado:focus-visible { background: rgba(var(--rrc-surface), .5); }
/* «Buscando…» (member-search.tsx:134): aro h-4 w-4 con borde de 2 px rush-500/30 y arriba rush-500, animate-spin */
[data-rrc="ventas"] .pos-buscador__estado--busca { display: flex; align-items: center; justify-content: center; gap: 8px; }
[data-rrc="ventas"] .pos-buscador__estado--busca::before {
    content: ''; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid rgba(255, 107, 0, .3); border-top-color: #FF6B00; animation: rrc-giro 1s linear infinite;
}
/* Cliente elegido (member-search.tsx:89): aparece con opacidad + escala .95 */
[data-rrc="ventas"] .pos-cliente:not([hidden]) { animation: rrc-op 300ms var(--rrc-fm) backwards, rrc-sc95 120ms var(--rrc-liquid) backwards; }
[data-rrc="ventas"] .pos-cliente__quitar { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }

/* Métodos de pago (payment-method-selector.tsx:82): transition-all 200 ms; whileHover 1,04 / whileTap .96;
   pastilla interior que se desliza entre métodos (layoutId) con el tinte de cada método */
[data-rrc="ventas"] .pos-metodo { position: relative; transition: all 200ms var(--rrc-tw), transform 120ms var(--rrc-liquid); }
[data-rrc="ventas"] .pos-metodo:hover:not(.is-disabled) { transform: scale(1.04); }
[data-rrc="ventas"] .pos-metodo:active:not(.is-disabled) { transform: scale(.96); }
[data-rrc="ventas"] .pos-metodo > *:not(.rrc-pastilla-m) { position: relative; z-index: 1; }
[data-rrc="ventas"] .rrc-pastilla-m { position: absolute; inset: 0; z-index: 0; border-radius: 12px; border: 1px solid rgba(255, 107, 0, .3); background: rgba(255, 107, 0, .06); pointer-events: none; }
[data-rrc="ventas"] .pos-metodo[data-metodo="yappy"] .rrc-pastilla-m { border-color: rgba(22, 119, 216, .3); background: rgba(22, 119, 216, .06); }
[data-rrc="ventas"] .pos-metodo[data-metodo="efectivo"] .rrc-pastilla-m { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .06); }
[data-rrc="ventas"] .pos-metodo[data-metodo="billetera"] .rrc-pastilla-m { border-color: rgba(168, 85, 247, .3); background: rgba(168, 85, 247, .06); }
/* Campos del método y de la nota (payment-method-selector.tsx:177, 226; checkout-panel.tsx:596, 639) */
[data-rrc="ventas"] .pos-campo input, [data-rrc="ventas"] .pos-campo textarea { transition: all 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-nota textarea { transition: all 200ms var(--rrc-tw); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-rrc="ventas"] .pos-fecha { transition: none; }
[data-rrc="ventas"] .pos-fecha:focus { outline: none; border-color: rgba(255, 107, 0, .3); box-shadow: 0 0 0 2px rgba(255, 107, 0, .1); }
/* Programar cobro (checkout-panel.tsx:564, 604): transition-all */
[data-rrc="ventas"] .pos-prog-btn, [data-rrc="ventas"] .pos-act-btn { transition: all 150ms var(--rrc-tw); }
[data-rrc="ventas"] .pos-prog-btn:not(.is-on):hover { color: var(--rrc-text); }
/* Error de pago (checkout-panel.tsx:423, 668): altura 0 ↔ auto y opacidad, .3 s en la curva por omisión de framer */
[data-rrc="ventas"] .pos-error {
    display: none; height: 0; opacity: 0; overflow: hidden; interpolate-size: allow-keywords;
    transition: height 300ms var(--rrc-fm), opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
[data-rrc="ventas"] .pos-error.is-visible { display: block; height: auto; opacity: 1; }
@starting-style { [data-rrc="ventas"] .pos-error.is-visible { height: 0; opacity: 0; } }
/* Procesar Venta (ui/button.tsx lg): transition-all 200 ms, escala 1,02 / .98, apagado = opacity .5 sin eventos */
[data-rrc="ventas"] .pos-procesar { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
[data-rrc="ventas"] .pos-procesar:hover:not(:disabled) { transform: scale(1.02); }
[data-rrc="ventas"] .pos-procesar:active:not(:disabled) { transform: scale(.98); }
[data-rrc="ventas"] .pos-procesar:disabled { opacity: .5; pointer-events: none; }
/* «Solicitud Enviada» (checkout-panel.tsx:389-470): el icono salta con rebote (spring bounce .4), el texto sube 8 px a los .2 s,
   los botones aparecen a los .4 s */
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-solicitud__icono { animation: rrc-rebote 778ms linear(0, 0.089, 0.29, 0.52, 0.731, 0.895, 1.006, 1.068, 1.093, 1.092, 1.076, 1.055, 1.033, 1.016, 1.003, 0.995, 0.992, 0.991, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1) backwards; }
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-solicitud__titulo,
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-solicitud__sub,
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-solicitud__nota {
    animation: rrc-op 300ms var(--rrc-fm) 200ms backwards, rrc-ty8 245ms var(--rrc-r-y) 200ms backwards;
}
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-procesar,
[data-rrc="ventas"] .pos-solicitud:not([hidden]) .pos-solicitud__cancelar { animation: rrc-op 300ms var(--rrc-fm) 400ms backwards; }
[data-rrc="ventas"] .pos-solicitud__cancelar { transition: all 200ms var(--rrc-tw), transform 150ms var(--rrc-io); }
[data-rrc="ventas"] .pos-solicitud__cancelar:hover:not(:disabled) { transform: scale(1.02); }
[data-rrc="ventas"] .pos-solicitud__cancelar:active:not(:disabled) { transform: scale(.98); }

/* Ventana de complementos (product-catalog.tsx:233): fondo negro/60 con blur-sm; ventana opacidad + escala .95 + y 10 */
#addonModal {
    opacity: 0; background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#addonModal.active { opacity: 1; }
@starting-style { #addonModal.active { opacity: 0; } }
#addonModal .modal-content {
    opacity: 0; transform: translateY(10px) scale(.95);
    transition: opacity 300ms var(--rrc-fm), transform 263ms var(--rrc-r-y);
}
#addonModal.active .modal-content { opacity: 1; transform: none; }
@starting-style { #addonModal.active .modal-content { opacity: 0; transform: translateY(10px) scale(.95); } }
/* Descuento y recibo (ui/modal.tsx): fondo negro/70 con blur-md; ventana opacidad 0→1, escala .92→1, y 12→0, .3 s */
#descuentoModal, #receiptModal {
    opacity: 0; background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: opacity 300ms var(--rrc-fm), display 300ms allow-discrete;
}
#descuentoModal.active, #receiptModal.active { opacity: 1; }
@starting-style { #descuentoModal.active, #receiptModal.active { opacity: 0; } }
#descuentoModal .modal-content, #receiptModal .modal-content {
    opacity: 0; transform: translateY(12px) scale(.92);
    transition: opacity 300ms var(--rrc-liquid), transform 300ms var(--rrc-liquid);
    backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
}
#descuentoModal.active .modal-content, #receiptModal.active .modal-content { opacity: 1; transform: none; }
@starting-style { #descuentoModal.active .modal-content, #receiptModal.active .modal-content { opacity: 0; transform: translateY(12px) scale(.92); } }
/* Dentro de las ventanas: cerrar, opciones de complemento, «Sin extras», «Agregar al carrito» (product-catalog.tsx:255-322) */
#addonModal .addon-pop__cerrar, #descuentoModal .addon-pop__cerrar, #receiptModal .modal-close { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#addonModal .addon-pop__cerrar:hover, #descuentoModal .addon-pop__cerrar:hover { background: rgba(var(--rrc-surface), .6); color: var(--rrc-text); }
#addonModal .addon-op { transition: all 150ms var(--rrc-tw); }
#addonModal .addon-op__icono { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#addonModal .addon-op__circulo { transition: all 150ms var(--rrc-tw); }
#addonModal .addon-pop__sin, #descuentoModal .addon-pop__sin { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#addonModal .addon-pop__sin:hover, #descuentoModal .addon-pop__sin:hover { background: rgba(var(--rrc-surface), .6); color: var(--rrc-text); }
#addonModal .addon-pop__agregar, #descuentoModal .addon-pop__agregar { transition: color 150ms var(--rrc-tw), background-color 150ms var(--rrc-tw); }
#addonModal .addon-pop__agregar:hover, #descuentoModal .addon-pop__agregar:hover { background: #E65F00; }

@media (prefers-reduced-motion: reduce) {
    [data-rrc], [data-rrc] *, .rrc-toast, #nt-overlay, #nt-overlay .nt-modal, #productModal, #productModal .pr-modal, #pyTarifaBg, #pyTarifaBg .py-modal, #addonModal, #addonModal .modal-content, #descuentoModal, #descuentoModal .modal-content, #receiptModal, #receiptModal .modal-content, #planModal, #planModal .modal, #historyModal, #historyModal .modal, #deleteModal, #deleteModal .modal, .hist-vacio--carga::before, .rrc-spin {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
        transition-duration: .01ms !important; transition-delay: 0s !important;
    }
}