/* ================================================
   UNES SHOPPING — Design Tokens + Animaciones
   Centralized CSS Custom Properties
   ================================================ */

/* ── MODO CLARO — Neumorphism Soft UI ── */
:root {
  /* Brand */
  --primary:          #5a7ab5;
  --primary-dark:     #3d5a8a;
  --primary-light:    #7a9fd4;
  --primary-ghost:    rgba(90,122,181,.12);

  /* Sidebar neumórfico (ya no es gradient) */
  --sidebar-from:     #e6ebf4;
  --sidebar-to:       #e6ebf4;
  --sidebar-w:        228px;
  --sidebar-text:     #3d4b5c;
  --sidebar-text-sub: #8a9ab8;
  --sidebar-active-bg: #e6ebf4;

  /* ════════════════════════════════════════
     BASE NEUMÓRFICA — toda la interfaz
     Color: #e6ebf4  (gris azulado suave)
     Luz:   top-left  → blanco #ffffff
     Sombra: bottom-right → #b8c4d9
  ════════════════════════════════════════ */
  --neu-bg:           #e6ebf4;
  --neu-bg-dark:      #d8e0ef;
  --neu-light:        #ffffff;
  --neu-shadow:       #b8c4d9;

  /* Surfaces — TODAS igual al fondo neumórfico */
  --bg:               #e6ebf4;
  --surface:          #e6ebf4;
  --surface-2:        #dde4f0;
  --surface-3:        #d5dded;
  --surface-glass:    rgba(230,235,244,.85);

  /* Borders — muy sutiles, casi invisibles en neumorfismo */
  --border:           rgba(184,196,217,.35);
  --border-light:     rgba(184,196,217,.20);
  --border-focus:     rgba(90,122,181,.45);

  /* Text — escala azul-gris */
  --text:             #2d3a4e;
  --text-2:           #5a6a85;
  --text-3:           #8a9ab8;
  --text-inv:         #ffffff;

  /* Status chips — adaptadas a fondo #e6ebf4 */
  --pending-bg:       rgba(245,158,11,.12);
  --pending-color:    #92640a;
  --pending-border:   rgba(245,158,11,.25);

  --approved-bg:      rgba(22,163,74,.1);
  --approved-color:   #166534;
  --approved-border:  rgba(22,163,74,.22);

  --review-bg:        rgba(90,122,181,.12);
  --review-color:     #3d5a8a;
  --review-border:    rgba(90,122,181,.25);

  --rejected-bg:      rgba(220,38,38,.10);
  --rejected-color:   #991b1b;
  --rejected-border:  rgba(220,38,38,.22);

  --delivered-bg:     rgba(3,105,161,.10);
  --delivered-color:  #0369a1;
  --delivered-border: rgba(3,105,161,.22);

  /* Shadows neumórficas + Cyan Glow UNES */
  --shadow-xs:
    -2px -2px  5px var(--neu-light),
     2px  2px  5px var(--neu-shadow),
     0 0  6px rgba(0,180,216,.10);
  --shadow-sm:
    -4px -4px  9px var(--neu-light),
     4px  4px  9px var(--neu-shadow),
     0 0 10px rgba(0,180,216,.14);
  --shadow-md:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 16px rgba(0,180,216,.18);
  --shadow-lg:
    -9px -9px 20px var(--neu-light),
     9px  9px 20px var(--neu-shadow),
     0 0 22px rgba(0,180,216,.22);
  --shadow-xl:
    -12px -12px 28px var(--neu-light),
      12px 12px 28px var(--neu-shadow),
     0 0 30px rgba(0,180,216,.26);

  /* Radii */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast:   0.14s ease;
  --t-base:   0.22s ease;
  --t-slow:   0.35s cubic-bezier(.4,0,.2,1);

  /* Z-index layers */
  --z-base:    1;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-topbar:  300;
  --z-sidebar: 400;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;

  color-scheme: light;

  /* ── Aliases de compatibilidad ── */
  --text-primary:    var(--text);
  --text-secondary:  var(--text-2);
  --text-tertiary:   var(--text-3);
  --bg-primary:      var(--bg);
  --bg-secondary:    var(--surface-2);
  --border-color:    var(--border);
  --border-light-color: var(--border-light);

  /* ══ NEUMORFISMO — variables completas ══ */

  /* Raised — con glow cyan permanente */
  --neu-raised:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 14px rgba(0,180,216,.16);

  /* Raised hover — pronunciado + cyan más intenso */
  --neu-raised-hover:
    -8px -8px 18px var(--neu-light),
     8px  8px 18px var(--neu-shadow),
     0 0 22px rgba(0,180,216,.28);

  /* Raised active / pressed — plano + cyan tenue */
  --neu-raised-active:
    -2px -2px  5px var(--neu-light),
     2px  2px  5px var(--neu-shadow),
     0 0  8px rgba(0,180,216,.12);

  /* Inset — con halo cyan interior */
  --neu-inset:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    inset 0 0 10px rgba(0,180,216,.08);

  /* Inset focus — anillo cyan + halo exterior */
  --neu-inset-focus:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    0 0 0 2px rgba(0,180,216,.55),
    0 0 14px rgba(0,180,216,.30);

  /* Inset deep — más profundo + cyan suave */
  --neu-inset-deep:
    inset -5px -5px 12px var(--neu-light),
    inset  5px  5px 12px var(--neu-shadow),
    inset 0 0 12px rgba(0,180,216,.08);

  /* Flat (sin profundidad) */
  --neu-flat: none;

  /* Border-radius neumórfico */
  --neu-r-sm:   10px;
  --neu-r-md:   16px;
  --neu-r-lg:   22px;
  --neu-r-xl:   32px;
  --neu-r-pill: 9999px;

  /* Accent (acción primaria — azul pizarra) */
  --neu-accent:       #7a91b5;
  --neu-accent-dark:  #5a7ab5;
  --neu-accent-glow:
    -4px -4px 10px var(--neu-light),
     4px  4px 10px rgba(90,122,181,.50);

  /* ═══════════════════════════════════════════
     CYAN GLOW — Acento UNES inspirado en logo
     Color base UNES: #0057BB → cyan derivado: #00b4d8
     Usado en: focus rings, activos sidebar, KPI, topbar
  ═══════════════════════════════════════════ */
  --cyan:             #00b4d8;
  --cyan-light:       #67e8f9;
  --cyan-dark:        #0088a8;
  --cyan-ghost:       rgba(0,180,216,.12);
  --cyan-glow-sm:     0 0  8px rgba(0,180,216,.45);
  --cyan-glow-md:     0 0 16px rgba(0,180,216,.40),
                      0 0  6px rgba(0,180,216,.60);
  --cyan-glow-lg:     0 0 24px rgba(0,180,216,.50),
                      0 0 10px rgba(0,180,216,.70);
  --cyan-glow-ring:   0 0 0 2px rgba(0,180,216,.55),
                      0 0 12px rgba(0,180,216,.35);

  /* Inset focus con anillo CYAN */
  --neu-inset-focus-cyan:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    0 0 0 2px rgba(0,180,216,.55),
    0 0 12px rgba(0,180,216,.30);

  /* Raised con glow cyan (nav activo, KPI cards highlight) */
  --neu-raised-cyan:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 16px rgba(0,180,216,.25);

  /* Progress fill color (azul pizarra del reproductor) */
  --neu-progress-fill: #7a91b5;

  /* Transición neumórfica */
  --neu-t: box-shadow .22s ease, transform .18s ease;
}

/* ── MODO OSCURO — Neumorphism Dark ── */
[data-theme="dark"] {
  /* Base dark neumórfica */
  --neu-bg:           #1e2433;
  --neu-bg-dark:      #161c2a;
  --neu-light:        rgba(255,255,255,.055);
  --neu-shadow:       rgba(0,0,0,.55);

  --bg:               #1e2433;
  --surface:          #1e2433;
  --surface-2:        #242b3d;
  --surface-3:        #2a3248;
  --surface-glass:    rgba(30,36,51,.88);

  --border:           rgba(255,255,255,.07);
  --border-light:     rgba(255,255,255,.04);
  --border-focus:     rgba(122,145,181,.5);

  --text:             #d8e3f4;
  --text-2:           #8a9ab8;
  --text-3:           #5a6a85;

  --primary:          #7a91b5;
  --primary-dark:     #5a7ab5;
  --primary-light:    #9ab5d4;
  --primary-ghost:    rgba(122,145,181,.14);
  --sidebar-text:     #c8d8f0;
  --sidebar-text-sub: #5a6a85;
  --sidebar-active-bg:#1e2433;

  --pending-bg:       rgba(245,158,11,.14);
  --pending-color:    #fbbf24;
  --pending-border:   rgba(245,158,11,.28);

  --approved-bg:      rgba(74,222,128,.10);
  --approved-color:   #4ade80;
  --approved-border:  rgba(74,222,128,.22);

  --review-bg:        rgba(122,145,181,.14);
  --review-color:     #93b5e0;
  --review-border:    rgba(122,145,181,.28);

  --rejected-bg:      rgba(248,113,113,.10);
  --rejected-color:   #f87171;
  --rejected-border:  rgba(248,113,113,.22);

  --delivered-bg:     rgba(56,189,248,.10);
  --delivered-color:  #38bdf8;
  --delivered-border: rgba(56,189,248,.22);

  --shadow-xs:
    -2px -2px  5px var(--neu-light),
     2px  2px  5px var(--neu-shadow),
     0 0  6px rgba(34,211,238,.10);
  --shadow-sm:
    -4px -4px  9px var(--neu-light),
     4px  4px  9px var(--neu-shadow),
     0 0 10px rgba(34,211,238,.14);
  --shadow-md:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 16px rgba(34,211,238,.18);
  --shadow-lg:
    -9px -9px 20px var(--neu-light),
     9px  9px 20px var(--neu-shadow),
     0 0 22px rgba(34,211,238,.22);
  --shadow-xl:
    -12px -12px 28px var(--neu-light),
      12px 12px 28px var(--neu-shadow),
     0 0 30px rgba(34,211,238,.26);

  color-scheme: dark;

  /* ── Aliases dark ── */
  --text-primary:    var(--text);
  --text-secondary:  var(--text-2);
  --text-tertiary:   var(--text-3);
  --bg-primary:      var(--bg);
  --bg-secondary:    var(--surface-2);
  --border-color:    var(--border);
  --border-light-color: var(--border-light);

  /* ── Neumorfismo dark + Cyan Glow ── */
  --neu-raised:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 14px rgba(34,211,238,.14);
  --neu-raised-hover:
    -8px -8px 18px var(--neu-light),
     8px  8px 18px var(--neu-shadow),
     0 0 22px rgba(34,211,238,.26);
  --neu-raised-active:
    -2px -2px  5px var(--neu-light),
     2px  2px  5px var(--neu-shadow),
     0 0  8px rgba(34,211,238,.10);
  --neu-inset:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    inset 0 0 10px rgba(34,211,238,.07);
  --neu-inset-focus:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    0 0 0 2px rgba(34,211,238,.52),
    0 0 14px rgba(34,211,238,.28);
  --neu-inset-deep:
    inset -5px -5px 12px var(--neu-light),
    inset  5px  5px 12px var(--neu-shadow),
    inset 0 0 12px rgba(34,211,238,.07);
  --neu-accent:       #7a91b5;
  --neu-accent-dark:  #9ab5d4;
  --neu-accent-glow:
    -4px -4px 10px var(--neu-light),
     4px  4px 10px rgba(122,145,181,.5);
  --neu-progress-fill: #7a91b5;
  --sidebar-from:     #1e2433;
  --sidebar-to:       #1e2433;

  /* Cyan dark — glows más sutiles en modo oscuro */
  --cyan:             #22d3ee;
  --cyan-light:       #67e8f9;
  --cyan-dark:        #0891b2;
  --cyan-ghost:       rgba(34,211,238,.12);
  --cyan-glow-sm:     0 0  8px rgba(34,211,238,.40);
  --cyan-glow-md:     0 0 16px rgba(34,211,238,.35),
                      0 0  6px rgba(34,211,238,.55);
  --cyan-glow-lg:     0 0 24px rgba(34,211,238,.45),
                      0 0 10px rgba(34,211,238,.65);
  --cyan-glow-ring:   0 0 0 2px rgba(34,211,238,.50),
                      0 0 12px rgba(34,211,238,.30);
  --neu-inset-focus-cyan:
    inset -4px -4px  9px var(--neu-light),
    inset  4px  4px  9px var(--neu-shadow),
    0 0 0 2px rgba(34,211,238,.50),
    0 0 12px rgba(34,211,238,.25);
  --neu-raised-cyan:
    -6px -6px 14px var(--neu-light),
     6px  6px 14px var(--neu-shadow),
     0 0 16px rgba(34,211,238,.20);
}

/* ================================================
   KEYFRAMES — Biblioteca de animaciones
   ================================================ */

/* Fade */
@keyframes fadeIn        { from{opacity:0}                         to{opacity:1} }
@keyframes fadeOut       { from{opacity:1}                         to{opacity:0} }

/* Slide */
@keyframes slideUp       { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown     { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft     { from{opacity:0;transform:translateX(32px)}  to{opacity:1;transform:translateX(0)} }
@keyframes slideRight    { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:translateX(0)} }

/* Scale */
@keyframes scaleIn       { from{opacity:0;transform:scale(.9)}     to{opacity:1;transform:scale(1)} }
@keyframes scaleOut      { from{opacity:1;transform:scale(1)}      to{opacity:0;transform:scale(.9)} }
@keyframes popIn         { 0%{opacity:0;transform:scale(.85)} 70%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }

/* Spin */
@keyframes spin          { to{transform:rotate(360deg)} }
@keyframes spinReverse   { to{transform:rotate(-360deg)} }

/* Pulse */
@keyframes pulse         { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes pulseOpacity  { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes badgePulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* Shimmer (skeleton) */
@keyframes shimmer {
  0%   { background-position: -468px 0 }
  100% { background-position: 468px 0 }
}

/* Toast */
@keyframes toastIn  { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-8px) scale(.95)} }

/* Notification panel */
@keyframes panelSlideIn  { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes panelSlideOut { from{transform:translateX(0)}     to{transform:translateX(100%)} }

/* Sidebar mobile */
@keyframes sidebarIn  { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* Number count-up (handled via JS) */

/* Wave loading */
@keyframes wave {
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}

/* Gradient shift */
@keyframes gradShift {
  0%  {background-position:0%   50%}
  50% {background-position:100% 50%}
  100%{background-position:0%   50%}
}

/* ================================================
   UTILITY ANIMATION CLASSES
   ================================================ */
.anim-fade-in        { animation: fadeIn   var(--t-base) both }
.anim-slide-up       { animation: slideUp  .28s cubic-bezier(.4,0,.2,1) both }
.anim-slide-down     { animation: slideDown .28s cubic-bezier(.4,0,.2,1) both }
.anim-slide-left     { animation: slideLeft .28s cubic-bezier(.4,0,.2,1) both }
.anim-scale-in       { animation: scaleIn  .22s cubic-bezier(.4,0,.2,1) both }
.anim-pop-in         { animation: popIn    .32s cubic-bezier(.4,0,.2,1) both }

/* Stagger delays */
.anim-d1  { animation-delay:.05s }
.anim-d2  { animation-delay:.10s }
.anim-d3  { animation-delay:.15s }
.anim-d4  { animation-delay:.20s }
.anim-d5  { animation-delay:.25s }
.anim-d6  { animation-delay:.30s }

/* Hover micro-interactions */
.hover-lift  { transition: transform var(--t-base), box-shadow var(--t-base); }
.hover-lift:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

.hover-scale { transition: transform var(--t-fast); }
.hover-scale:hover { transform: scale(1.04); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 25%,
    var(--surface-3) 37%,
    var(--surface-2) 63%
  );
  background-size: 936px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}