/* ==========================================================================
   PULIDO DE INTERACCIONES
   Capa final: movimiento con propósito y respuesta al presionar. Los
   contenedores (tarjetas, filas) ya no se mueven al pasar el mouse; lo que
   se puede presionar responde al presionar.
   ========================================================================== */

/* Contenedores: no son botones, no se mueven */
.stat-card:hover,
.dashboard-card:hover,
.toner-color-card:hover,
.profile-avatar:hover,
.brand-icon:hover,
.premium-table tbody tr:hover,
.mini-table tbody tr:hover {
    transform: none;
}

.dashboard-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-premium);
}

/* Botones: sin elevarse al pasar el mouse, sin brillo de neón */
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-action:hover,
.nav-item:hover,
.theme-toggle:hover {
    transform: none;
}

.btn-primary {
    background: var(--primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 4px 10px -4px rgba(79, 70, 229, 0.45);
}

.btn-primary:hover {
    background: #4338ca;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 6px 14px -6px rgba(79, 70, 229, 0.55);
}

.btn-danger {
    background: var(--danger);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 4px 10px -4px rgba(239, 68, 68, 0.45);
}

.btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 6px 14px -6px rgba(239, 68, 68, 0.55);
}

.btn-action:hover {
    box-shadow: none;
}

/* Respuesta al presionar: todo lo presionable se hunde apenas */
.btn,
.btn-action,
.stock-chip,
.rp-segmented button,
.rp-codigo,
.theme-toggle,
.nav-item {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, transform 160ms var(--ease-out);
}

.btn:active:not(:disabled),
.btn-action:active,
.stock-chip:active,
.rp-segmented button:active,
.rp-codigo:active,
.theme-toggle:active {
    transform: scale(0.97);
}

.nav-item:active {
    transform: scale(0.98);
}

/* Buscador del encabezado: solo el anillo de enfoque, sin crecer */
.header-search:focus-within {
    width: 320px;
    transform: none;
}

/* Cambio de sección: rápido y sutil (se ve decenas de veces al día) */
.content-view {
    animation: entradaVista 180ms var(--ease-out);
}

@keyframes entradaVista {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* Modal: el fondo solo aparece; la caja crece apenas desde su centro */
.modal-overlay {
    animation: aparecer 150ms ease-out;
}

.modal-box {
    animation: entradaModal 200ms var(--ease-out);
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes entradaModal {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* Avisos: entran sin rebote */
.toast {
    transition: right 240ms var(--ease-out);
}

.toast.active {
    animation: entradaAviso 240ms var(--ease-out);
}

@keyframes entradaAviso {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

/* En pantallas táctiles el "hover" se queda pegado tras tocar: sin efectos */
@media (hover: none) {
    .btn:hover::before { opacity: 0; }
    .nav-item:hover:not(.active) {
        background: transparent;
        color: var(--text-secondary);
    }
    .btn-action:hover {
        background: var(--glass-bg);
        border: var(--glass-border);
        color: var(--text-secondary);
    }
    .stock-chip:hover:not(.active) {
        border-color: var(--border-color);
        color: var(--text-secondary);
    }
}

/* Quien pide menos movimiento en su sistema: solo cambios de opacidad/color */
@media (prefers-reduced-motion: reduce) {
    .content-view,
    .modal-box,
    .toast.active {
        animation: aparecer 150ms ease-out;
    }
    .btn:active:not(:disabled),
    .btn-action:active,
    .stock-chip:active,
    .rp-segmented button:active,
    .rp-codigo:active,
    .theme-toggle:active,
    .nav-item:active {
        transform: none;
    }
    .status-dot.online,
    .login-logo {
        animation: none;
    }
}