/* ============ MAKI — Centro de pedidos omnicanal ============ */
/* Identidad: SaaS cálido con ADN sushi.
   Salmón coral (primario), nori/soya (tinta), arroz/crema (fondo),
   wasabi (éxito). Estados de pedido = paleta semántica propia.    */

:root {
  /* — Fondos y superficies — */
  --bg:        #FBF8F3;   /* arroz / crema */
  --surface:   #FFFFFF;
  --surface-2: #F5F0E8;
  --surface-3: #EFE8DC;
  --line:      #E8E0D3;
  --line-2:    #DBD1C0;

  /* — Tinta (soya / nori) — */
  --ink:    #1E2823;
  --ink-2:  #586059;
  --ink-3:  #8C9189;
  --ink-on: #FFFFFF;

  /* — Marca: salmón — */
  --primary:      #E8694A;
  --primary-600:  #D9542F;
  --primary-700:  #BF441F;
  --primary-soft: #FBE5DC;
  --primary-tint: #FDF0EA;

  /* — Wasabi (éxito) — */
  --wasabi:      #4F9D5B;
  --wasabi-soft: #E2F0E2;

  /* — Estados de pedido — */
  --st-recibido:    #3D7FB8;  --st-recibido-bg:    #E6F0F8;
  --st-confirmado:  #7A66CC;  --st-confirmado-bg:  #ECE7FA;
  --st-preparacion: #D58A1E;  --st-preparacion-bg: #FBEFD6;
  --st-listo:       #1B9E8F;  --st-listo-bg:       #DCF3EF;
  --st-despachado:  #4A5FC0;  --st-despachado-bg:  #E6E9FA;
  --st-entregado:   #4F9D5B;  --st-entregado-bg:   #E2F0E2;
  --st-cancelado:   #C8462F;  --st-cancelado-bg:   #FAE3DD;

  /* — Canales — */
  --ch-whatsapp: #25884F;  --ch-whatsapp-bg: #DEF1E5;
  --ch-web:      #E8694A;  --ch-web-bg:      #FBE5DC;
  --ch-telefono: #5B6470;  --ch-telefono-bg: #E9EBEE;
  --ch-email:    #3D7FB8;  --ch-email-bg:    #E6F0F8;
  --ch-delivery: #E0732B;  --ch-delivery-bg: #FBEAD8;

  /* — Forma — */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* — Sombra — */
  --sh-1: 0 1px 2px rgba(30,40,35,.06), 0 1px 1px rgba(30,40,35,.04);
  --sh-2: 0 4px 14px rgba(30,40,35,.08), 0 1px 3px rgba(30,40,35,.05);
  --sh-3: 0 18px 48px rgba(30,40,35,.16), 0 4px 14px rgba(30,40,35,.08);
  --sh-pop: 0 24px 60px rgba(30,40,35,.22);

  /* — Tipografía — */
  --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
::selection { background: var(--primary-soft); }

/* Scrollbars discretas */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); border: 3px solid transparent; background-clip: padding-box; }

/* Utilidades de animación */
@keyframes maki-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes maki-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes maki-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes maki-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes maki-alert-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } }
@keyframes maki-alert-bg { 0%,100% { background: #FEE2E2; } 50% { background: #FECDD0; } }
@keyframes maki-vip-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }