/* ══════════════════════════════════════════════════════════
   ARES GOURMET — Core CSS
   Variables, reset y utilidades base
   ══════════════════════════════════════════════════════════ */

:root {
  /* Paleta principal */
  --verde:#27ae60; --verde-d:#1e8449; --verde-bg:#eafaf1;
  --naranja:#e67e22; --naranja-d:#ca6f1e; --naranja-bg:#fef5e7;
  --rojo:#e74c3c; --rojo-d:#c0392b; --rojo-bg:#fdedec;
  --azul:#1e7fd4; --azul-d:#1560a8; --azul-bg:#ebf5fb;
  --amarillo:#f39c12; --morado:#8e44ad;

  /* Neutros */
  --gris-bg:#EEF2F7; --bg:#EEF2F7;
  --blanco:#ffffff;
  --texto:#2c3e50;
  --suave:#7f8c8d;
  --borde:#dce1e7;

  /* Superficies (tablas, cabeceras, filas) — tokens separados de --blanco
     para poder re-tematizar tablas/toolbars sin tocar cada selector. */
  --superficie-2:#f8f9fa;
  --superficie-3:#f1f5f9;
  --superficie-hover:#fafbfc;
  --borde-suave:#eef2f6;
  --neutral-bg:#f0f4f8;

  /* Panel de énfasis (cabeceras oscuras tipo "resumen"/"cuadrito") — fijo,
     no es lo mismo que --texto aunque hoy comparta el mismo tono. */
  --panel-oscuro:#2c3e50;

  /* Tipografía */
  --font-base:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'Share Tech Mono', 'Courier New', monospace;

  /* Espaciado */
  --space-xs:.3rem;
  --space-sm:.6rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;

  /* Radios */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;

  /* Sombras */
  --shadow-sm:0 2px 6px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:0 12px 32px rgba(0,0,0,.18);

  /* Z-indexes */
  --z-modal:500;
  --z-toast:600;
  --z-mobile-menu:1001;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:var(--font-base);
  color:var(--texto);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utilidades */
.txt-center { text-align:center; }
.txt-right  { text-align:right; }
.txt-suave  { color:var(--suave); }
.flex-row   { display:flex; align-items:center; gap:var(--space-sm); }
.gap-sm { gap:var(--space-sm); }
.gap-md { gap:var(--space-md); }
.hidden { display:none !important; }

/* Animaciones base */
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes popIn   { from { opacity:0; transform:scale(.9) translateY(10px); } to { opacity:1; transform:none; } }
@keyframes slideInLeft { from { transform:translateX(-100%); } to { transform:translateX(0); } }