/**
 * DentalOS — Interacciones y microanimaciones
 * -----------------------------------------------------------------------------
 * Capa global ADITIVA. No modifica la lógica ni el layout existente.
 *
 *   · Estado :active en todos los botones y elementos accionables.
 *   · Efecto ripple al presionar (feedback inmediato).
 *   · Hover más dinámico y fluido (elevación + movimiento de iconos).
 *   · Foco visible accesible por teclado.
 *   · Respeta prefers-reduced-motion.
 *
 * Las clases .ui-interactive / .ui-lift / .ui-ripple-host las agrega
 * automáticamente app/assets/js/interactions.js a cada elemento.
 */

:root {
    --ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ui-primary: #0ea5e9;
}

/* ─────────────────────────────────────────────────────────────
   1. Base de elementos interactivos
   ───────────────────────────────────────────────────────────── */

.ui-interactive {
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.2s var(--ui-ease-spring),
        box-shadow 0.25s var(--ui-ease-out),
        background-color 0.2s var(--ui-ease-out),
        border-color 0.2s var(--ui-ease-out),
        color 0.2s var(--ui-ease-out),
        opacity 0.2s var(--ui-ease-out);
}

/* Pulsación: todo botón responde visualmente */
.ui-interactive:active {
    transform: translateY(0) scale(0.96) !important;
}

/* El icono "reacciona" al pasar el cursor */
.ui-interactive svg {
    transition: transform 0.25s var(--ui-ease-spring);
}

.ui-interactive:hover svg {
    transform: scale(1.12);
}

/* Elevación en hover para botones y tarjetas accionables */
.ui-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(2, 132, 199, 0.65);
}

/* ─────────────────────────────────────────────────────────────
   2. Efecto ripple
   ───────────────────────────────────────────────────────────── */

.ui-ripple-host {
    overflow: hidden;
}

.ui-ripple {
    position: absolute;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.3;
    transform: scale(0);
    pointer-events: none;
    animation: ui-ripple 0.6s var(--ui-ease-out) forwards;
}

@keyframes ui-ripple {
    to {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   3. Foco visible accesible (teclado)
   ───────────────────────────────────────────────────────────── */

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.ui-interactive:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   4. Refuerzos de hover específicos
   ───────────────────────────────────────────────────────────── */

/* Botones de icono (tablas, tarjetas): escala + giro sutil */
.badge-animate.badge-animate:hover {
    transform: scale(1.14) rotate(-4deg);
}

/* Enlaces con flecha final: la flecha se desliza */
.ui-arrow-link svg:last-child {
    transition: transform 0.25s var(--ui-ease-spring);
}

.ui-arrow-link:hover svg:last-child {
    transform: translateX(4px);
}

/* Filas de tabla: transición de fondo más fluida */
tbody tr {
    transition: background-color 0.2s var(--ui-ease-out);
}

/* Tarjetas con hover: elevación fluida */
.card-hover.card-hover {
    transition:
        transform 0.3s var(--ui-ease-spring),
        box-shadow 0.3s var(--ui-ease-out),
        border-color 0.3s var(--ui-ease-out),
        background-color 0.3s var(--ui-ease-out);
}

/* ─────────────────────────────────────────────────────────────
   5. Accesibilidad: movimiento reducido
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ui-interactive,
    .ui-interactive svg,
    .card-hover.card-hover,
    tbody tr {
        transition: none !important;
    }

    .ui-lift:hover,
    .badge-animate.badge-animate:hover {
        transform: none !important;
    }

    .ui-ripple {
        display: none !important;
    }
}