/* ==========================================================
   MICRO-ANIMACIONES CRAI — REVERSIBLE
   Para revertir: eliminar la línea <link href="css/micro-animations.css">
   en front/index.html. No toca JS, backend ni BD.
   Duraciones 120-260ms, ease-out, respeta reduced-motion.
   ========================================================== */

/* 1) Botones — hover lift sutil + active press */
.btn, .icon-btn, .profile-chip {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.btn.primary:hover, .btn:not(.primary):hover { transform: translateY(-1px); }
.btn.primary:active, .btn:active, .icon-btn:active { transform: translateY(0) scale(0.98); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.96); }

/* 2) Sidebar — texto fade al colapsar (ya 260ms en width/grid) */
.sidebar .nav-section,
.sidebar .brand strong,
.sidebar .brand span,
.sidebar .nav button span:last-child {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* 3) Cards / métricas — hover lift (transform deshabilitado en .card para no romper position:fixed del menú historial: transform crea containing-block) */
.card { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.card:hover { transform: none; box-shadow: 0 8px 24px rgba(31,41,55,0.08); border-color: #dfe3e7; }
.metric { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.metric::before { transition: transform 0.22s ease; transform-origin: left; }

/* 4) Modales — fade backdrop + scale contenido */
.modal-backdrop, .aud-modal-backdrop {
  animation: microFadeIn 0.18s ease;
}
.modal, .aud-modal {
  animation: microScaleIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes microFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes microScaleIn { from { opacity: 0; transform: scale(0.98) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* 5) Toast — slide + fade */
#toast-root .toast {
  animation: microToastIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes microToastIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* 6) Filas tabla / carrito POS — hover highlight */
.table-wrap tbody tr { transition: background 0.12s ease, box-shadow 0.12s ease; }
.sale-item { transition: background 0.14s ease, border-color 0.14s ease; }
.sale-item.is-highlight { animation: microHighlight 0.6s ease; }
@keyframes microHighlight { 0% { background: var(--crai-accent-soft); border-color: var(--crai-accent-border); } 100% { background: #fff; } }

/* 7) Panel filtros — despliegue suave */
.filter-panel { animation: microPanelIn 0.18s ease; }
@keyframes microPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Tabs [data-ptab] activo — transición color/borde */
[data-ptab] { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}