/* Sistema de diseño Panel Gastronomía — Grupo Broda.
   Paleta tomada del logo real (logobroda.jpg): navy #222149, naranja #EC5D23.
   Enlazado desde todas las paginas; cada pagina puede seguir definiendo sus
   propias clases especificas en su <style>, esto solo fija la base comun. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:wght@600;700&display=swap');

:root {
  --navy: #222149;
  --navy-2: #2E2C6B;
  --navy-ink: #17162E;
  --orange: #EC5D23;
  --orange-dark: #D14A15;
  --orange-light: #F0703A;
  --orange-tint: #FFF3EC;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --border: #E2E2EA;
  --border-soft: #EEEEF3;
  --text: #17162E;
  --text-2: #2C2B52;
  --muted: #6E6E82;
  --success: #15803D;
  --danger: #DC2626;
  --warning: #B45309;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(23,22,46,.06);
  --shadow: 0 4px 16px rgba(23,22,46,.07);
  --shadow-lg: 0 12px 36px rgba(23,22,46,.12);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Lora", Georgia, serif;
}

/* modo oscuro: mismos acentos de marca (navy/naranja), neutros invertidos.
   Se activa con [data-theme="dark"] en <html> (ver theme.js, boton .theme-toggle). */
:root[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --border: #334155;
  --border-soft: #293548;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --success: #4ade80;
  --danger: #f87171;
  --warning: #facc15;
  --orange-tint: #3a2a20;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow: 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body { font-family: var(--font); }

::selection { background: var(--orange-tint); color: var(--orange-dark); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DADAE3; border-radius: 999px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #C3C3D0; }

a { transition: color .12s; }

button, select, input {
  font-family: var(--font);
  transition: border-color .12s, box-shadow .12s, background-color .12s, color .12s, transform .08s;
}
button:hover { border-color: var(--orange); }
button:active { transform: translateY(1px); }
button.primario:hover, a.btn-menu:hover { filter: brightness(1.06); }
select:focus, input:focus, button:focus-visible {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint);
}

/* marca compartida: usada en header de cada modulo en vez del icono generico */
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-mark img { height: 26px; display: block; }
.brand-mark .sep { width: 1px; height: 22px; background: var(--border); }

/* spinner chico inline (junto a "cargando..."): tenedor+cuchillo, inyectado
   por theme.js dentro de cada <span class="spin"></span> */
@keyframes cubiertos-bamboleo { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  color: currentColor; transform-origin: 50% 85%;
  animation: cubiertos-bamboleo .9s ease-in-out infinite;
}
.spin svg { width: 100%; height: 100%; display: block; }

/* overlay de carga a pantalla completa: se muestra cada vez que #estado
   pasa a "cargando" (carga inicial y cualquier actualizacion despues,
   ej. cambiar de fecha/sucursal) -- grande y centrado a proposito, para
   que quede clarisimo que el tablero esta trayendo datos nuevos. */
#loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s;
}
:root[data-theme="dark"] #loading-overlay { background: rgba(15,23,42,.9); }
#loading-overlay.mostrar { opacity: 1; pointer-events: auto; }
#loading-overlay .lo-box {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  padding: 52px 64px; box-shadow: var(--shadow-lg);
}
#loading-overlay .lo-icon { width: 84px; height: 84px; transform-origin: 50% 85%; animation: cubiertos-bamboleo .9s ease-in-out infinite; }
#loading-overlay .lo-text { color: var(--text-2); font-size: 20px; font-weight: 700; letter-spacing: .01em; font-family: var(--font-display); }

/* boton de modo oscuro/claro, se inserta antes de "☰ Módulos" en el header */
button.theme-toggle {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
button.theme-toggle svg { width: 18px; height: 18px; }
button.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }