/* POSCOPISTERIA — theme variables (amber palette per spec 14) */
:root {
  --color-primary: #F5A623;
  --color-primary-dark: #D97706;
  --color-primary-light: #FFF8E8;
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #6B7280;
  --color-success: #22C55E;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;
  --color-border: #E5E7EB;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

.brand-amber { background: var(--color-primary); }
.text-amber { color: var(--color-primary); }

/* Generic helpers used outside Tailwind utility classes */
.hidden { display: none !important; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.toast {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  padding: 12px 16px; border-radius: 12px; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  animation: slideInRight .2s ease;
}
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-danger); }
.toast.info { background: var(--color-primary); }
@keyframes slideInRight { from { transform: translateX(110%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

/* POS keypad button press feedback */
.keypad-btn:active { transform: scale(.95); }

/* Navigation drawer (menu icon -> slide-in panel), used on every page */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 9998; opacity: 0; transition: opacity .15s ease;
}
.drawer-overlay.open { opacity: 1; }
.drawer-panel {
  position: fixed; top: 0; left: 0; height: 100%; width: 260px; max-width: 80vw;
  background: #fff; box-shadow: 2px 0 24px rgba(0,0,0,.18);
  transform: translateX(-100%); transition: transform .18s ease;
  display: flex; flex-direction: column; z-index: 9999;
}
.drawer-overlay.open .drawer-panel { transform: translateX(0); }

/* Collapsed rail: icons only, labels hidden. State persists across pages. */
.drawer-panel.collapsed { width: 72px; }
.drawer-panel.collapsed .drawer-label { display: none; }
.drawer-panel.collapsed #drawer-items button { justify-content: center; padding-left: 0; padding-right: 0; }

/* Persistent sidebar (panel): in-flow, sticky, collapses to an icon rail.
   It occupies its own column so it never overlaps the main content. */
.sidebar {
  flex-shrink: 0; width: 240px;
  background: #fff; border-right: 1px solid #e5e7eb;
  align-self: stretch; position: sticky; top: 64px;
  height: calc(100vh - 64px); overflow-y: auto;
  transition: width .18s ease;
}
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; }

/* Variante para layouts de pantalla completa (POS): la barra es un hijo flex
   normal que ocupa toda la altura disponible, sin posicionamiento sticky. */
.sidebar.sidebar-static { position: static; top: auto; height: auto; align-self: stretch; }