/* ---------------------------------------------------------------------------
   CuadraFlow · capa de movimiento compartida
   La usan erp.php (ERP), saas.php (panel SaaS) y demo.php, para que las tres
   superficies se muevan igual. Aquí solo hay movimiento: ni color ni layout.

   Reglas que respeta este archivo:
   - Las entradas usan ease-out (arranca rápido, responde en el frame que el
     usuario está mirando). El movimiento en pantalla usa ease-in-out.
   - Nada aparece desde scale(0): un modal entra desde scale(.96) + opacidad,
     que es lo que hace un objeto real al acercarse.
   - El modal está exento de "scale desde su disparador": aparece centrado.
   - El foco de teclado y el hover no se animan con desplazamiento, solo las
     capas que entran o salen.
   - Todo cuelga de prefers-reduced-motion: con "reducir movimiento" se
     conserva la opacidad (que ayuda a entender el cambio) y se quita el viaje.
--------------------------------------------------------------------------- */

:root {
    --cf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --cf-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
    --cf-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --cf-dur-tap: 120ms;
    --cf-dur-ui: 170ms;
    --cf-dur-capa: 200ms;
    --cf-dur-caja: 230ms;
}

/* ---------- entrada de capas: velo + caja ---------- */
/* erp.php llama .overlay a sus 39 capas y saas.php recibe cf-capa; demo.php
   ya usaba .capa con el mismo sentido. Un solo keyframe sirve para las tres. */
.overlay,
.capa,
.cf-capa {
    animation: cf-velo-in var(--cf-dur-capa) var(--cf-ease-out) both;
}

.modal,
.cf-caja {
    animation: cf-caja-in var(--cf-dur-caja) var(--cf-ease-out) both;
}

@keyframes cf-velo-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cf-caja-in {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- aviso de resultado (toast) ---------- */
.cf-toast {
    animation: cf-toast-in var(--cf-dur-ui) var(--cf-ease-out) both;
}

@keyframes cf-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- pulsación: el sistema confirma que oyó el clic ---------- */
button:not(:disabled):active,
.btn:not(:disabled):active,
a.btn:active {
    animation: cf-tap var(--cf-dur-tap) var(--cf-ease-out);
}

@keyframes cf-tap {
    from { transform: scale(0.985); }
    to   { transform: none; }
}

/* ---------- filas de tabla: el resaltado no debe saltar ---------- */
tbody > tr {
    transition: background-color 90ms linear;
}

/* ---------- cajón lateral del móvil: curva de iOS, no la de Tailwind ---------- */
aside.cf-drawer {
    transition-timing-function: var(--cf-ease-drawer);
}

/* ---------- con movimiento reducido: opacidad sí, viaje no ---------- */
@media (prefers-reduced-motion: reduce) {
    .overlay,
    .capa,
    .cf-capa {
        animation: cf-velo-in 120ms linear both;
    }

    .modal,
    .cf-caja {
        animation: cf-velo-in 120ms linear both;
    }

    .cf-toast {
        animation: cf-velo-in 120ms linear both;
    }

    button:not(:disabled):active,
    .btn:not(:disabled):active,
    a.btn:active {
        animation: none;
    }

    tbody > tr {
        transition: none;
    }

    aside.cf-drawer {
        transition-duration: 1ms;
    }
}