/*
 * PIMPart CRM - capa visual de animaciones
 *
 * Esta hoja solo modifica transiciones, entradas y estados visuales.
 * Para desactivarla completamente, cambia CRM_MOTION_ENABLED a false en auth.php.
 */
:root {
  --motion-fast: 200ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

button,
a,
.button,
.filter a,
.nav a,
.nav-toggle,
input,
select,
textarea,
.card,
.metric,
.panel,
.table tr,
.tag,
.notice {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}

/* Entrada global de cada vista; no interviene en la lógica ni en los formularios. */
body > .bar,
body > .wrap,
body > .toolbar,
body > .page {
  animation: crm-view-in 720ms var(--motion-ease) both;
}

body > .wrap > .top,
body > .wrap > .notice,
body > .wrap > .metrics,
body > .wrap > .grid,
body > .wrap > .cards,
body > .wrap > .panel {
  animation: crm-fade-up 620ms var(--motion-ease) both;
}

body > .wrap > :nth-child(2) { animation-delay: 80ms; }
body > .wrap > :nth-child(3) { animation-delay: 160ms; }
body > .wrap > :nth-child(4) { animation-delay: 240ms; }

button,
.button,
.filter a,
.nav-toggle {
  cursor: pointer;
}

.button:hover,
.filter a:hover,
.nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.button:active,
.filter a:active,
.nav-toggle:active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

.nav a {
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: #f5c400;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

.metric,
.panel,
.card {
  animation: crm-fade-up var(--motion-slow) var(--motion-ease) both;
}

.metrics > :nth-child(2),
.grid > :nth-child(2),
.cards > :nth-child(2) {
  animation-delay: 60ms;
}

.metrics > :nth-child(3),
.cards > :nth-child(3) {
  animation-delay: 120ms;
}

.metrics > :nth-child(4),
.cards > :nth-child(4) {
  animation-delay: 180ms;
}

.table tbody tr,
.table tr:not(:first-child) {
  animation: crm-fade-in var(--motion-base) var(--motion-ease) both;
}

.table tr:hover td {
  background-color: #fff9dc;
}

.card:hover,
.metric:hover,
.panel:hover {
  border-color: #b7b7b7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.card:active {
  transform: translateY(-1px) scale(.995);
}

.tag {
  transition-duration: var(--motion-fast);
}

.card:hover .tag,
.table tr:hover .tag {
  transform: translateX(3px);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #f5c400;
  box-shadow: 0 0 0 3px rgba(245, 196, 0, .18);
  outline: none;
}

.notice {
  animation: crm-fade-up var(--motion-base) var(--motion-ease) both;
}

.notice.danger {
  animation-name: crm-shake-in;
}

.mobile-nav .nav {
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}

@keyframes crm-fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes crm-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes crm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes crm-shake-in {
  0% { opacity: 0; transform: translateX(-5px); }
  70% { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}