/* ===== SISTEMA DE ANIMACIONES — Despensa H&D =====
   Compartido entre todas las páginas (desktop + mobile).
   ================================================ */

:root {
  /* ── Duraciones ── */
  --anim-fast: 120ms;
  --anim-normal: 220ms;
  --anim-slow: 350ms;
  --anim-page: 350ms;
  --anim-modal: 280ms;

  /* ── Funciones de tiempo ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(8px); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── View transitions (fade-slide cross-page) ── */
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

.slide-in-right{animation:slideInRight var(--anim-slow) var(--ease-out) both}
.slide-in-left{animation:slideInLeft var(--anim-slow) var(--ease-out) both}
.slide-out-left{animation:slideOutLeft var(--anim-normal) var(--ease-in-out) both;pointer-events:none}
.slide-out-right{animation:slideOutRight var(--anim-normal) var(--ease-in-out) both;pointer-events:none}

/* ── Page load fallback ── */
.page {
  animation: fadeIn var(--anim-page) var(--ease-out) both;
}

/* ── Interactive elements ── */
button, .btn, [role="button"], a.card {
  transition:
    transform 80ms var(--ease-out),
    background-color 80ms var(--ease-in-out),
    box-shadow 80ms var(--ease-in-out),
    opacity 80ms var(--ease-in-out),
    border-color 80ms var(--ease-in-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

button:active, .btn:active, [role="button"]:active, a.card:active {
  transform: scale(0.97);
}

button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--pr, var(--primary, #2563eb));
  outline-offset: 2px;
}

/* ── Cards & list items ── */
.card, .card-hover {
  transition:
    transform var(--anim-normal) var(--ease-out),
    box-shadow var(--anim-normal) var(--ease-in-out);
}

.card-hover:hover {
  transform: translateY(-2px);
}

.prod-card, .prod-item, .list-item, .metric, .history-item {
  transition:
    transform var(--anim-fast) var(--ease-out),
    background-color var(--anim-fast) var(--ease-in-out);
}

.prod-card:active, .prod-item:active, .list-item:active {
  transform: scale(0.97);
}

/* ── Modals ── */
.modal-overlay {
  transition: opacity var(--anim-modal) var(--ease-in-out), visibility var(--anim-modal) var(--ease-in-out);
}

.modal-overlay.open .modal,
.modal-overlay.open .modal-card,
.modal-card {
  transition: transform var(--anim-modal) var(--ease-out);
}

.modal-overlay.open .modal {
  animation: slideUp var(--anim-modal) var(--ease-out) both;
}

.modal-overlay:not(.open) .modal {
  animation: slideDown var(--anim-modal) var(--ease-in-out) both;
}

/* ── Toast ── */
.toast {
  transition: opacity var(--anim-normal) var(--ease-out), transform var(--anim-normal) var(--ease-out);
}

.toast.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Session modal (desktop style) ── */
#sessionModal, #receiptModal {
  transition: opacity var(--anim-modal) var(--ease-in-out), visibility var(--anim-modal) var(--ease-in-out);
}

#sessionModal.open, #receiptModal.open {
  animation: fadeIn var(--anim-modal) var(--ease-out) both;
}

/* ── Tab bars ── */
.tab-btn, .tab-top, .chip, .period-chip, .cat-chip {
  transition:
    background-color var(--anim-fast) var(--ease-in-out),
    color var(--anim-fast) var(--ease-in-out),
    transform var(--anim-fast) var(--ease-out);
}

.tab-btn:active, .tab-top:active, .chip:active, .period-chip:active, .cat-chip:active {
  transform: scale(0.95);
}

/* ── Search inputs ── */
input, select, textarea {
  transition:
    border-color var(--anim-fast) var(--ease-in-out),
    box-shadow var(--anim-fast) var(--ease-in-out),
    background-color var(--anim-fast) var(--ease-in-out);
}

/* ── Bottom nav ── */
.bottom-nav a {
  transition: color var(--anim-fast) var(--ease-in-out), transform var(--anim-fast) var(--ease-out);
}

.bottom-nav a:active {
  transform: scale(0.92);
}

/* ── Skeleton / loading shimmer ── */
.skeleton {
  background: linear-gradient(90deg, var(--s2, #1f1f23) 25%, var(--s3, #27272a) 50%, var(--s2, #1f1f23) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--rsm, 8px);
}

/* ── Staggered entry (fade-up, 50ms apart) ── */
.stagger > * {
  animation: fadeInUp var(--anim-slow) var(--ease-out) both;
}

.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 50ms; }
.stagger > *:nth-child(3)  { animation-delay: 100ms; }
.stagger > *:nth-child(4)  { animation-delay: 150ms; }
.stagger > *:nth-child(5)  { animation-delay: 200ms; }
.stagger > *:nth-child(6)  { animation-delay: 250ms; }
.stagger > *:nth-child(7)  { animation-delay: 300ms; }
.stagger > *:nth-child(8)  { animation-delay: 350ms; }
.stagger > *:nth-child(9)  { animation-delay: 400ms; }
.stagger > *:nth-child(10) { animation-delay: 450ms; }
.stagger > *:nth-child(11) { animation-delay: 500ms; }
.stagger > *:nth-child(12) { animation-delay: 550ms; }
.stagger > *:nth-child(13) { animation-delay: 600ms; }
.stagger > *:nth-child(14) { animation-delay: 650ms; }
.stagger > *:nth-child(15) { animation-delay: 700ms; }

/* ── Select arrow custom (desktop) ── */
select {
  transition: border-color var(--anim-fast) var(--ease-in-out), box-shadow var(--anim-fast) var(--ease-in-out);
}

/* ── Sidebar nav links (desktop) ── */
.nav-link, .sidebar a {
  transition:
    background-color var(--anim-fast) var(--ease-in-out),
    color var(--anim-fast) var(--ease-in-out),
    padding-left var(--anim-fast) var(--ease-out);
}

/* ── ACCESIBILIDAD: reducir movimiento ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .page, .slide-in-right, .slide-in-left, .slide-out-left, .slide-out-right {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .stagger > * { animation: none !important; opacity: 1 !important; }
  button:active, .btn:active { transform: none !important; }
}