/* Tokens del panel. Salen de las 5 imágenes de referencia: fondo azul muy claro, tarjetas blancas,
   azul de acción, y un color por tipo de dato (pedidos azul, confirmados verde, por llamar naranja,
   cancelados rojo, guías morado). Usar siempre estas variables; no escribir colores sueltos. */
:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --bg:#f6f8fc;
  --card:#ffffff;
  --line:#e9edf4;
  --line-strong:#d9dfeb;
  --fg:#111a2e;
  --fg-2:#3b4660;
  --muted:#6b7694;
  --faint:#98a2bb;
  --soft:#f2f5fa;

  --blue:#1f6feb;
  --blue-600:#1b5fd1;
  --blue-50:#e9f1fe;
  --blue-100:#d6e5fd;
  --green:#16a269;
  --green-500:#22b573;
  --green-50:#e5f7ee;
  --orange:#f59e0b;
  --orange-600:#d97706;
  --orange-50:#fff3dc;
  --red:#e5484d;
  --red-600:#d13438;
  --red-50:#fdeaea;
  --purple:#7c5cf0;
  --purple-50:#efeafe;
  --teal:#14b8a6;
  --teal-50:#dff7f3;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(17,26,46,.04),0 2px 8px rgba(17,26,46,.04);
  --shadow-pop:0 12px 32px rgba(17,26,46,.14),0 2px 6px rgba(17,26,46,.06);

  --side-w:236px;
  --top-h:68px;
  --gap:20px;
}

/* Solo tema claro: así son las imágenes de referencia. */
:root{color-scheme:light}