/* =============================================
   Don Chugo — Design Tokens & Global Styles
   Tokens de diseño y estilos globales compartidos
   por la app de cliente y el panel de staff.
   ============================================= */

/* ---- Variables CSS globales (Custom Properties) ---- */
:root {
  /* Brand — paleta oficial Don Chugo (se conservan los nombres legacy para
     no romper componentes existentes que consumen estas variables). */
  --mm-green:        #C81024;
  --mm-green-light:  #DF3B4D;
  --mm-green-pale:   #FBEAEC;
  --mm-green-dark:   #861714;

  --mm-gold:         #A96B1F;
  --mm-gold-light:   #D8A860;
  --mm-gold-pale:    #FBF2E6;

  --mm-cream:        #F7F4EF;  /* Fondo general de la app */
  --mm-cream-dark:   #EEE6DF;  /* Fondo de elementos secundarios */
  --mm-brown:        #51240C;

  /* Neutrals — textos y bordes */
  --mm-text:         #302923;
  --mm-text-muted:   #776A65;
  --mm-border:       #E5D9D3;
  --mm-white:        #FFFDFC;

  /* Status — colores semánticos para estados de pedido y alertas */
  --mm-success:      #2E7D52;
  --mm-warning:      #C0851A;
  --mm-danger:       #C0392B;
  --mm-info:         #1A6A8A;

  /* KDS semáforo — solo para la pantalla de cocina (kitchen display) */
  --kds-green:       #27AE60;
  --kds-yellow:      #F39C12;
  --kds-red:         #E74C3C;

  /* Typography — fuentes cargadas desde Google Fonts */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'DM Sans', 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Shadows — escala de sombras para elevación de componentes */
  --shadow-sm:       0 2px 7px rgba(81,36,12,.07);
  --shadow-md:       0 7px 20px rgba(81,36,12,.12);
  --shadow-lg:       0 14px 35px rgba(81,36,12,.16);

  /* Radius — escala de radios de borde: sm=card, pill=botones y badges */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-pill:     100px;
}

/* ---- Base — reset de box-sizing y estilos del body ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--mm-cream);
  color: var(--mm-text);
  -webkit-font-smoothing: antialiased;
}

/* ---- Logo / Marca ---- */
/* Contenedor flexible: ícono SVG + wordmark de dos líneas */
.mm-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.mm-logo svg { flex-shrink: 0; display: block; }

/* Tamaños del ícono SVG */
.mm-logo-sm svg { width: 28px; height: 28px; }
.mm-logo-md svg { width: 38px; height: 38px; }
.mm-logo-lg svg { width: 72px; height: 72px; }
.mm-logo-xl svg { width: 96px; height: 96px; }

/* Variante apilada: ícono arriba + texto centrado abajo */
.mm-logo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

/* Wordmark — dos líneas estilizadas */
.mm-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mm-word-mochi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .04em;
}
.mm-word-matcha {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Tamaños del wordmark según contexto */
.mm-logo-sm .mm-word-mochi  { font-size: .68rem; }
.mm-logo-sm .mm-word-matcha { font-size: .88rem; }
.mm-logo-md .mm-word-mochi  { font-size: .8rem; }
.mm-logo-md .mm-word-matcha { font-size: 1.05rem; }
.mm-logo-lg .mm-word-mochi  { font-size: 1.1rem; }
.mm-logo-lg .mm-word-matcha { font-size: 1.5rem; }

/* Paleta oscura (sidebar, ticket, login panel) */
.mm-logo.dark .mm-word-mochi  { color: rgba(255,255,255,.6); }
.mm-logo.dark .mm-word-matcha { color: #fff; }
.mm-logo-stack.dark .mm-word-mochi  { color: rgba(255,255,255,.6); }
.mm-logo-stack.dark .mm-word-matcha { color: #fff; }

/* Paleta clara (header cliente, reportes) */
.mm-logo.light .mm-word-mochi  { color: var(--mm-gold); }
.mm-logo.light .mm-word-matcha { color: var(--mm-green); }

/* ---- Bootstrap overrides — sobreescrituras de componentes Bootstrap con la paleta de marca ---- */
.btn-primary {
  background: var(--mm-green);
  border-color: var(--mm-green);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: .625rem 1.5rem;
  transition: all .2s ease;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--mm-green-dark);
  border-color: var(--mm-green-dark);
}

.btn-outline-primary {
  color: var(--mm-green);
  border-color: var(--mm-green);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: all .2s ease;
}
.btn-outline-primary:hover {
  background: var(--mm-green);
  color: #fff;
}

.btn-gold {
  background: var(--mm-gold);
  border-color: var(--mm-gold);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: .625rem 1.5rem;
  transition: all .2s ease;
}
.btn-gold:hover { background: #a97930; border-color: #a97930; color:#fff; }

.card {
  border: 1px solid var(--mm-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--mm-white);
}

/* Badge de promoción: etiqueta dorada visible en tarjetas de producto y sidebar staff */
.badge-promo {
  background: var(--mm-gold-pale);
  color: var(--mm-gold);
  border: 1px solid var(--mm-gold-light);
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---- Toast — notificaciones flotantes efímeras ---- */
/* Posicionadas en la parte inferior en cliente, superior derecha en staff (override inline) */
.mm-toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.mm-toast {
  background: var(--mm-text);
  color: #fff;
  border-radius: var(--radius-md);
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  pointer-events: all;
}
/* Variantes alineadas a la paleta de la marca (rojo / marrón / dorado).
   El icono ::before diferencia éxito de error, ya que ambos usan tonos rojizos. */
.mm-toast.success { background: var(--mm-green); }
.mm-toast.error   { background: var(--mm-brown); }
.mm-toast.warning { background: var(--mm-gold); }
.mm-toast.info    { background: var(--mm-gold); }

.mm-toast.success::before { content: "✓"; margin-right: .5rem; font-weight: 700; }
.mm-toast.error::before   { content: "✕"; margin-right: .5rem; font-weight: 700; }
.mm-toast.warning::before,
.mm-toast.info::before    { content: "!"; margin-right: .5rem; font-weight: 700; }

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

/* ---- Utility — clases de ayuda reutilizables en toda la app ---- */
.text-green     { color: var(--mm-green) !important; }
.text-gold      { color: var(--mm-gold) !important; }
.text-muted-mm  { color: var(--mm-text-muted) !important; }
.bg-green-pale  { background: var(--mm-green-pale) !important; }
.bg-cream       { background: var(--mm-cream) !important; }
.font-display   { font-family: var(--font-display) !important; }