/* ============================================
   NexPOS - Elegant Restaurant & Bar Design
   ============================================ */

:root {
  --bg-dark: #1a1412;
  --bg-card: #241e1a;
  --bg-card-hover: #2e2622;
  --bg-sidebar: #15100d;
  --border: #3a302a;
  --border-light: #4a3e36;
  --text-primary: #f5ede6;
  --text-secondary: #b8a99a;
  --text-muted: #887a6e;
  --accent-gold: #c9a96e;
  --accent-gold-light: #dfc28e;
  --accent-wine: #8b2e4a;
  --accent-wine-light: #a8425f;
  --accent-cream: #e8ddd0;
  --accent-green: #6b9e7a;
  --accent-green-light: #8cb89a;
  --accent-amber: #c08b4a;
  --accent-red: #b34040;
  --accent-copper: #b8734a;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --radius: 10px;
  --radius-sm: 6px;
  --transition: all 0.3s ease;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg-dark);
  overscroll-behavior: none;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 100vw;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}

.app-wrapper {
  display: flex;
  min-height: 100vh;
}

.app-wrapper.hidden { display: none; }

/* ============ WELCOME SCREEN ============ */
.welcome-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.welcome-screen.hidden { display: none; }

.welcome-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139,46,74,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(201,169,110,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(232,221,208,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.welcome-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: 100%;
  padding: 48px 32px;
  text-align: center;
  animation: welcomeFade 0.8s ease;
}

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

.welcome-logo {
  margin-bottom: 48px;
}

.welcome-logo-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(145deg, var(--accent-wine), var(--accent-gold));
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(139,46,74,0.25);
}

.welcome-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--accent-cream);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.welcome-title strong { font-weight: 800; color: var(--accent-gold); }

.welcome-tagline {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.welcome-question {
  margin-bottom: 40px;
}

.welcome-question h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--accent-cream);
  margin-bottom: 8px;
}

.welcome-hint {
  font-size: 14px;
  color: var(--text-muted);
}

.welcome-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.welcome-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px 24px;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-wine), var(--accent-gold));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,169,110,0.1);
}

.welcome-card:hover::before { opacity: 1; }

.welcome-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  background: rgba(201,169,110,0.1);
  color: var(--accent-gold);
  transition: var(--transition);
}

.welcome-card:hover .welcome-card-icon {
  background: linear-gradient(145deg, var(--accent-wine), var(--accent-gold));
  color: var(--accent-cream);
}

.welcome-card h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-cream);
  margin-bottom: 10px;
}

.welcome-card > p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

.welcome-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  flex: 1;
}

.welcome-features li {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome-features li i {
  color: var(--accent-green-light);
  font-size: 14px;
}

.welcome-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.welcome-card:hover .welcome-card-cta { gap: 10px; }

/* Mode indicator in topbar */
.topbar-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(201,169,110,0.1);
  color: var(--accent-gold);
  border: 1px solid rgba(201,169,110,0.15);
  cursor: pointer;
  transition: var(--transition);
}

.topbar-mode:hover { background: rgba(201,169,110,0.18); }
.topbar-mode i { font-size: 13px; }

@media (max-width: 768px) {
  .welcome-options { grid-template-columns: 1fr; }
  .welcome-title { font-size: 36px; }
  .welcome-question h2 { font-size: 20px; }
  .welcome-content { padding: 32px 16px; }
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============ SIDEBAR ============ */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  transition: var(--transition);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  border-bottom: 1px solid var(--border);
}

.logo-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(145deg, var(--accent-wine), var(--accent-gold));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--accent-cream);
}
.logo-text strong { font-weight: 700; color: var(--accent-gold); }

.sidebar-nav {
  flex: 1;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.2px;
}

.nav-item:hover {
  background: rgba(201,169,110,0.08);
  color: var(--accent-cream);
}

.nav-item.active {
  background: rgba(201,169,110,0.12);
  color: var(--accent-gold);
  border-left: 3px solid var(--accent-gold);
}

.nav-item i { font-size: 17px; width: 20px; text-align: center; }

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.connection-status.online {
  background: rgba(107,158,122,0.12);
  color: var(--accent-green-light);
  border: 1px solid rgba(107,158,122,0.2);
}

.connection-status.offline {
  background: rgba(179,64,64,0.12);
  color: var(--accent-red);
  border: 1px solid rgba(179,64,64,0.25);
  animation: pulse-border 2.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(179,64,64,0.2); }
  50% { border-color: rgba(179,64,64,0.5); }
}

.btn-offline {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.btn-offline:hover { background: rgba(255,255,255,0.08); color: var(--text-secondary); }

/* ============ MAIN CONTENT ============ */
.main-content {
  flex: 1;
  margin-left: 240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(26,20,18,0.85);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }

.topbar-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-cream);
  letter-spacing: 0.3px;
}

.topbar-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
}

.topbar-right { display: flex; align-items: center; gap: 20px; }

.topbar-clock {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-wine), var(--accent-copper));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cream);
  letter-spacing: 0.5px;
}

/* ============ VIEWS ============ */
.view {
  display: none;
  padding: 28px 32px;
  flex: 1;
  animation: fadeIn 0.35s ease;
}
.view.active { display: block; }

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

/* ============ STATS GRID ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-light); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-primary .stat-icon { background: rgba(139,46,74,0.18); color: var(--accent-wine-light); }
.stat-cyan .stat-icon { background: rgba(201,169,110,0.15); color: var(--accent-gold); }
.stat-yellow .stat-icon { background: rgba(192,139,74,0.15); color: var(--accent-amber); }
.stat-green .stat-icon { background: rgba(107,158,122,0.15); color: var(--accent-green-light); }

.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.stat-value { font-family: var(--font-heading); font-size: 26px; font-weight: 700; margin: 2px 0; color: var(--accent-cream); }
.stat-change { font-size: 11.5px; font-weight: 500; }
.stat-change.up { color: var(--accent-green-light); }
.stat-change.down { color: var(--accent-green-light); }

/* ============ CARDS ============ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-cream);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}

.card-chart { grid-row: 1 / 3; }
.chart-area { height: 300px; position: relative; }

/* Sales chart (CSS bars) */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  padding-top: 20px;
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--accent-gold), rgba(201,169,110,0.25));
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 4px;
  position: relative;
  cursor: pointer;
}

.chart-bar:hover {
  background: linear-gradient(180deg, var(--accent-wine-light), rgba(139,46,74,0.3));
}

.chart-bar-label { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.chart-bar-val { font-size: 10px; color: var(--text-secondary); font-weight: 600; }

.badge { padding: 4px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; }
.badge-live { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }
.pulse { animation: pulseDot 2s ease-in-out infinite; font-size: 8px; vertical-align: middle; margin-right: 4px; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.text-muted { color: var(--text-muted); font-size: 12px; }

/* Popular items */
.popular-list { display: flex; flex-direction: column; gap: 12px; }
.popular-item { display: flex; align-items: center; gap: 12px; }

.popular-rank {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(201,169,110,0.12);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.popular-info { flex: 1; }
.popular-name { font-size: 13px; font-weight: 500; display: block; margin-bottom: 4px; }
.popular-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }

.popular-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-wine), var(--accent-gold));
  transition: width 1.2s ease;
}
.popular-fill.cyan { background: linear-gradient(90deg, var(--accent-gold), var(--accent-amber)); }
.popular-fill.yellow { background: linear-gradient(90deg, var(--accent-amber), var(--accent-copper)); }
.popular-fill.green { background: linear-gradient(90deg, var(--accent-green), var(--accent-gold)); }
.popular-fill.purple { background: linear-gradient(90deg, var(--accent-copper), var(--accent-wine)); }

.popular-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* Channels */
.channels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.channel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.channel-item:hover { border-color: var(--border-light); background: rgba(255,255,255,0.03); }

.channel-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.channel-salon { background: rgba(201,169,110,0.12); color: var(--accent-gold); }
.channel-rappi { background: rgba(192,139,74,0.12); color: var(--accent-amber); }
.channel-uber { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }
.channel-whatsapp { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }

.channel-name { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.channel-amount { font-size: 14px; font-weight: 700; color: var(--accent-cream); }
.channel-pct { font-size: 11px; color: var(--text-muted); }

/* ============ MESAS ============ */
.mesas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.mesas-legend { display: flex; gap: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.libre { background: var(--accent-green); }
.legend-dot.ocupada { background: var(--accent-gold); }
.legend-dot.cuenta { background: var(--accent-amber); }
.legend-dot.reservada { background: var(--text-muted); }

.mesas-zones { display: flex; gap: 6px; }
.zone-btn {
  padding: 7px 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.zone-btn.active, .zone-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
  border-color: var(--accent-gold);
}

.mesas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.mesa-card {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.mesa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.mesa-card.libre { border-color: rgba(107,158,122,0.3); }
.mesa-card.libre:hover { border-color: var(--accent-green); }

.mesa-card.ocupada { border-color: rgba(201,169,110,0.3); background: rgba(201,169,110,0.04); }
.mesa-card.ocupada:hover { border-color: var(--accent-gold); }

.mesa-card.cuenta { border-color: rgba(192,139,74,0.3); background: rgba(192,139,74,0.04); }
.mesa-card.cuenta:hover { border-color: var(--accent-amber); }
.mesa-card.cuenta::after {
  content: '$';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-amber);
  color: var(--bg-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  animation: pulseDot 2s ease-in-out infinite;
}

.mesa-card.reservada { border-color: rgba(136,122,110,0.25); opacity: 0.55; }

.mesa-num { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--accent-cream); }
.mesa-info { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.mesa-amount { font-size: 14px; font-weight: 700; color: var(--accent-gold); }
.mesa-time { font-size: 10px; color: var(--text-muted); }
.mesa-zone { position: absolute; top: 8px; left: 8px; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }

/* ============ POS ============ */
.pos-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  height: calc(100vh - 120px);
}

.pos-menu { display: flex; flex-direction: column; overflow: hidden; }

.pos-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.cat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.cat-btn.active, .cat-btn:hover {
  background: var(--accent-wine);
  color: var(--accent-cream);
  border-color: var(--accent-wine);
}

.pos-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.pos-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.pos-item:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pos-item:active { transform: scale(0.97); }

.pos-item-emoji { font-size: 30px; }
.pos-item-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--accent-cream); }
.pos-item-price { font-size: 13px; font-weight: 700; color: var(--accent-gold); }

/* Ticket */
.pos-ticket {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ticket-mesa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-cream);
}

.ticket-mesa select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-body);
}

.ticket-waiter { font-size: 11px; color: var(--text-muted); }

.ticket-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.ticket-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 8px;
}
.ticket-empty i { font-size: 36px; opacity: 0.5; }
.ticket-empty p { font-size: 13px; }

.ticket-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.ticket-line-info { display: flex; flex-direction: column; flex: 1; }
.ticket-line-name { font-size: 13px; font-weight: 500; }
.ticket-line-detail { font-size: 11px; color: var(--text-muted); }

.ticket-line-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.qty-btn:hover { background: var(--accent-wine); color: var(--accent-cream); border-color: var(--accent-wine); }

.ticket-line-price { font-size: 13px; font-weight: 700; min-width: 70px; text-align: right; color: var(--accent-cream); }

.ticket-summary {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 3px 0;
}

.summary-row.total {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-gold);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

.ticket-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
}
.btn:active { transform: scale(0.97); }

.btn-split { background: rgba(184,115,74,0.15); color: var(--accent-copper); }
.btn-split:hover { background: rgba(184,115,74,0.25); }

.btn-send { background: rgba(192,139,74,0.15); color: var(--accent-amber); }
.btn-send:hover { background: rgba(192,139,74,0.25); }

.btn-pay { background: linear-gradient(135deg, var(--accent-wine), var(--accent-wine-light)); color: var(--accent-cream); }
.btn-pay:hover { filter: brightness(1.15); }

.full-width { width: 100%; }

/* ============ KDS ============ */
.kds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.kds-stats { display: flex; gap: 28px; }
.kds-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kds-stat-val { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--accent-cream); }
.kds-stat span:last-child { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.kds-stat.urgent .kds-stat-val { color: var(--accent-red); }

.kds-filters { display: flex; gap: 6px; }
.kds-filter {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.kds-filter.active { background: var(--accent-gold); color: var(--bg-dark); border-color: var(--accent-gold); font-weight: 600; }

.kds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.kds-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.kds-card.urgent {
  border-color: var(--accent-red);
  animation: urgentPulse 3s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,64,64,0.2); }
  50% { box-shadow: 0 0 16px 2px rgba(179,64,64,0.12); }
}

.kds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}

.kds-mesa { font-weight: 700; font-size: 14px; color: var(--accent-cream); }
.kds-time { font-family: var(--font-heading); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-cream); }
.kds-time.urgent-time { color: var(--accent-red); }

.kds-card-items { padding: 12px 16px; }

.kds-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
}

.kds-item-qty {
  width: 26px;
  height: 26px;
  background: rgba(201,169,110,0.12);
  color: var(--accent-gold);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.kds-item-name { flex: 1; font-weight: 500; }

.kds-item-mod {
  font-size: 11px;
  color: var(--accent-amber);
  font-style: italic;
}

.kds-card-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.kds-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}

.kds-btn-done { background: var(--accent-green); color: var(--bg-dark); }
.kds-btn-done:hover { filter: brightness(1.1); }
.kds-btn-bump { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.kds-btn-bump:hover { background: rgba(255,255,255,0.1); }

/* ============ INVENTORY ============ */
.inv-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  width: fit-content;
}

.inv-tab {
  padding: 9px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inv-tab.active { background: var(--accent-gold); color: var(--bg-dark); font-weight: 600; }

.badge-count {
  background: var(--accent-red);
  color: white;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.inv-panel { display: none; }
.inv-panel.active { display: block; }

.inv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 16px;
  max-width: 400px;
}

.inv-search i { color: var(--text-muted); }
.inv-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
}
.inv-search input::placeholder { color: var(--text-muted); }

.inv-table-wrap { overflow-x: auto; }

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.inv-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.inv-table td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  color: var(--text-secondary);
}

.inv-table td strong { color: var(--accent-cream); }

.inv-table tbody tr { transition: var(--transition); }
.inv-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.stock-badge {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.stock-ok { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }
.stock-low { background: rgba(192,139,74,0.15); color: var(--accent-amber); }
.stock-critical { background: rgba(179,64,64,0.15); color: var(--accent-red); }

/* Recetas */
.receta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.receta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.receta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}

.receta-title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--accent-cream); }
.receta-cost { font-size: 13px; font-weight: 600; color: var(--accent-gold); }

.receta-ingredients {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.receta-ing {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-secondary);
}

.receta-ing-name { font-weight: 500; color: var(--text-primary); }

.receta-yield {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(201,169,110,0.06);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--accent-gold-light);
  line-height: 1.4;
}

.receta-yield i {
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.receta-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}

.receta-margin { font-weight: 700; }
.receta-margin.good { color: var(--accent-green-light); }
.receta-margin.warn { color: var(--accent-amber); }

/* Alertas */
.alertas-list { display: flex; flex-direction: column; gap: 12px; }

.alerta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  border-left: 4px solid;
}

.alerta-card.critical { border-left-color: var(--accent-red); }
.alerta-card.warning { border-left-color: var(--accent-amber); }
.alerta-card.info { border-left-color: var(--accent-gold); }

.alerta-icon { font-size: 26px; }
.alerta-info { flex: 1; }
.alerta-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--accent-cream); }
.alerta-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.alerta-action {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.alerta-action:hover { background: rgba(255,255,255,0.05); border-color: var(--accent-gold); color: var(--accent-gold); }

/* ============ FACTURACION ============ */
.fact-header { margin-bottom: 24px; }

.fact-status-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fact-status-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.fact-status-card i {
  font-size: 26px;
  color: var(--accent-gold);
}

.fact-status-val {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  display: block;
  color: var(--accent-cream);
}

.fact-status-val.green { color: var(--accent-green-light); }
.fact-status-val.yellow { color: var(--accent-amber); }

.fact-status-label { font-size: 12px; color: var(--text-muted); }

.fact-table-wrap { overflow-x: auto; }

.dian-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.dian-ok { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }
.dian-pending { background: rgba(192,139,74,0.15); color: var(--accent-amber); }

/* ============ MODALS ============ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.75);
  backdrop-filter: blur(6px);
  z-index: 600;
}

.modal-overlay.active { display: block; }

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 601;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.35s ease;
}

.modal.active { display: block; }

@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-cream);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.modal-close:hover { color: var(--text-primary); }

.modal-body { padding: 24px; }

.pay-items-list {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pay-item-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.pay-item-line:last-child { border-bottom: none; }

.pay-item-line.pay-subtotals {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
}

.pay-split-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pay-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(201,169,110,0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  border: 1px solid rgba(201,169,110,0.15);
}

.pay-total span:first-child { font-size: 14px; color: var(--text-secondary); }
.pay-total-val { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--accent-gold); }

.pay-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.pay-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}

.pay-method i { font-size: 20px; }

.pay-method.active {
  border-color: var(--accent-gold);
  background: rgba(201,169,110,0.08);
  color: var(--accent-gold);
}

.pay-propina { margin-bottom: 20px; }
.pay-propina label { font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 8px; }

.propina-btns { display: flex; gap: 8px; }
.propina-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.propina-btn.active { border-color: var(--accent-green); background: rgba(107,158,122,0.1); color: var(--accent-green-light); }

/* Split Modal */
.split-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.split-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.split-opt i { font-size: 18px; }
.split-opt.active { border-color: var(--accent-copper); background: rgba(184,115,74,0.1); color: var(--accent-copper); }

.split-preview { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.split-person {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.split-person-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
}

.split-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.split-avatar.p2 { background: var(--accent-copper); }

.split-person-total { margin-left: auto; font-weight: 700; color: var(--accent-cream); }

.split-items {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.split-tax { color: var(--text-muted); font-style: italic; }

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-green);
  color: var(--bg-dark);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 700;
  transition: bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.toast.show { bottom: 32px; }

/* ============ OFFLINE BANNER ============ */
.offline-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-wine));
  color: var(--accent-cream);
  padding: 10px 24px;
  font-size: 13px;
  z-index: 300;
  align-items: center;
  gap: 10px;
}

.offline-banner.show {
  display: flex;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ============ ROLE SELECTION ============ */
.role-options {
  grid-template-columns: repeat(3, 1fr);
}

.role-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.role-back:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* ============ BARTENDER SCREEN ============ */
.bartender-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.bartender-screen.hidden { display: none; }

.bt-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
  flex-shrink: 0;
}

.bt-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bt-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-cream);
}

.bt-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.bt-topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.bt-turno-stats {
  display: flex;
  gap: 20px;
}

.bt-turno-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.bt-turno-val {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-gold);
}

.bt-turno-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bt-exit {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.bt-exit:hover { background: rgba(179,64,64,0.15); color: var(--accent-red); border-color: var(--accent-red); }

/* Bartender Layout */
.bt-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

/* Queue */
.bt-queue {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.bt-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bt-queue-header h2 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-cream);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-queue-header h2 i { color: var(--accent-gold); }

.bt-queue-filters { display: flex; gap: 4px; }

.bt-filter {
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.bt-filter.active { background: var(--accent-gold); color: var(--bg-dark); border-color: var(--accent-gold); font-weight: 600; }

.bt-queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Queue Order Card */
.bt-order {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}

.bt-order:hover { border-color: var(--border-light); }

.bt-order.bt-active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px rgba(201,169,110,0.2), var(--shadow);
}

.bt-order.bt-urgent {
  border-color: var(--accent-red);
}

.bt-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.bt-order-mesa {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-cream);
}

.bt-order-time {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.bt-order.bt-urgent .bt-order-time { color: var(--accent-red); }

.bt-order-drinks {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bt-drink-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(201,169,110,0.08);
  color: var(--text-secondary);
  border: 1px solid rgba(201,169,110,0.12);
}

.bt-drink-tag.is-bottle {
  background: rgba(139,46,74,0.12);
  color: var(--accent-wine-light);
  border-color: rgba(139,46,74,0.2);
}

.bt-drink-qty {
  font-weight: 700;
  color: var(--accent-gold);
  min-width: 14px;
  text-align: center;
}

.bt-drink-tag.is-bottle .bt-drink-qty { color: var(--accent-wine-light); }

.bt-order-footer {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255,255,255,0.03);
}

.bt-order-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bt-order-btn.bt-prep {
  background: var(--accent-gold);
  color: var(--bg-dark);
}
.bt-order-btn.bt-prep:hover { filter: brightness(1.1); }

.bt-order-btn.bt-done {
  background: var(--accent-green);
  color: var(--bg-dark);
}
.bt-order-btn.bt-done:hover { filter: brightness(1.1); }

.bt-order-btn.bt-bump-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

.bt-order-mod {
  padding: 0 14px 8px;
  font-size: 11px;
  color: var(--accent-amber);
  font-style: italic;
}

/* Sidebar */
.bt-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bt-current {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bt-current h3, .bt-stock h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-cream);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-current h3 i { color: var(--accent-wine-light); }
.bt-stock h3 i { color: var(--accent-gold); }

.bt-current-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 160px;
}

.bt-current-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  color: var(--text-muted);
  gap: 8px;
}

.bt-current-empty i { font-size: 32px; opacity: 0.4; }
.bt-current-empty p { font-size: 13px; }

/* Active prep card */
.bt-prep-card {
  padding: 16px;
}

.bt-prep-mesa {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.bt-prep-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.bt-prep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.bt-prep-item-qty {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(201,169,110,0.12);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.bt-prep-item-name { font-size: 13px; font-weight: 500; flex: 1; }

.bt-prep-item-check {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}

.bt-prep-item-check:hover { border-color: var(--accent-green); }

.bt-prep-item-check.checked {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: var(--bg-dark);
}

.bt-prep-timer {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.bt-prep-done {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-green);
  color: var(--bg-dark);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
}
.bt-prep-done:hover { filter: brightness(1.1); }

/* Stock */
.bt-stock {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

.bt-stock-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bt-stock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.bt-stock-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
}

.bt-stock-level {
  width: 80px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.bt-stock-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.bt-stock-fill.ok { background: var(--accent-green); }
.bt-stock-fill.low { background: var(--accent-amber); }
.bt-stock-fill.critical { background: var(--accent-red); }

.bt-stock-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 50px;
  text-align: right;
}

/* ============ MESERO SCREEN ============ */
.mesero-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mesero-screen.hidden { display: none; }

.ms-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
  flex-shrink: 0;
  position: relative;
}

/* Notification button */
.ms-notif-btn {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
}

.ms-notif-btn:hover { background: rgba(201,169,110,0.12); color: var(--accent-gold); }

.ms-notif-btn.has-notifs {
  background: rgba(139,46,74,0.2);
  border-color: var(--accent-wine);
  color: var(--accent-wine-light);
  animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,46,74,0); }
  50% { box-shadow: 0 0 12px 2px rgba(139,46,74,0.3); }
}

.ms-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: var(--accent-red);
  color: white;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.ms-notif-badge.visible { display: flex; }

/* Notification Panel */
.ms-notif-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 2px solid var(--accent-gold);
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  animation: slideDown 0.3s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.ms-notif-panel.hidden { display: none; }

.ms-notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
}

.ms-notif-panel-header h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-cream);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-notif-panel-header h3 i { color: var(--accent-gold); }

.ms-notif-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.ms-notif-clear:hover { color: var(--accent-gold); }

.ms-notif-list { padding: 4px 0; }

.ms-notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.ms-notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: slideIn 0.3s ease;
  transition: var(--transition);
}

.ms-notif-item:hover { background: rgba(255,255,255,0.02); }

.ms-notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ms-notif-icon.from-barra, .ms-notif-icon.barra {
  background: rgba(139,46,74,0.15);
  color: var(--accent-wine-light);
}

.ms-notif-icon.from-cocina, .ms-notif-icon.cocina {
  background: rgba(192,139,74,0.15);
  color: var(--accent-amber);
}

.ms-notif-info { flex: 1; }

.ms-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cream);
  margin-bottom: 2px;
}

.ms-notif-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

.ms-notif-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ms-notif-item .ms-notif-action {
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  background: var(--accent-green);
  color: var(--bg-dark);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.ms-notif-item .ms-notif-action:hover { filter: brightness(1.1); }

.ms-notif-item.unread { background: rgba(201,169,110,0.06); }
.ms-notif-item.read { opacity: 0.6; }

.ms-notif-body { flex: 1; }
.ms-notif-detail { font-size: 12px; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }

.ms-notif-new {
  display: inline-block;
  background: var(--accent-wine);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
  animation: notifPulse 2s ease-in-out infinite;
}

.ms-notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.ms-mesa-ready-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent-green);
  color: var(--bg-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: notifPulse 2s ease-in-out infinite;
}

.ms-mesa-card.ms-mesa-ready {
  border-color: var(--accent-green);
  box-shadow: 0 0 12px rgba(107,158,122,0.2);
}

.ms-mesa-zone {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ms-mesa-info {
  font-size: 12px;
  color: var(--text-secondary);
}

@keyframes notifBump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.notif-bump {
  animation: notifBump 0.4s ease;
}

.ms-mesa-card.ocupada { border-left: 3px solid var(--accent-gold); }
.ms-mesa-card.libre { border-left: 3px solid var(--accent-green); opacity: 0.6; }
.ms-mesa-card.cuenta { border-left: 3px solid var(--accent-amber); }
.ms-mesa-card.reservada { border-left: 3px solid var(--accent-wine); opacity: 0.5; }

/* Mesero Layout */
.ms-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  flex: 1;
  overflow: hidden;
}

.ms-mesas-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.ms-pedido-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ms-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ms-section-header h2 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-cream);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-section-header h2 i { color: var(--accent-gold); }

.ms-mesa-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-body);
}

/* Mesero Mesas Grid */
.ms-mesas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.ms-mesa-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.ms-mesa-card:hover { border-color: var(--border-light); }

.ms-mesa-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ms-mesa-num {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-cream);
}

.ms-mesa-status {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ms-mesa-status.s-ocupada { background: rgba(201,169,110,0.12); color: var(--accent-gold); }
.ms-mesa-status.s-cuenta { background: rgba(192,139,74,0.15); color: var(--accent-amber); }
.ms-mesa-status.s-libre { background: rgba(107,158,122,0.12); color: var(--accent-green-light); }

.ms-mesa-detail {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

.ms-mesa-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-gold);
}

.ms-mesa-ready {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-green);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  animation: notifPulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(107,158,122,0.4);
}

/* Mesero quick menu */
.ms-menu-cats {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.ms-menu-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 16px;
  overflow-y: auto;
  flex: 1;
}

.ms-menu-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.ms-menu-item:hover { border-color: var(--accent-gold); }
.ms-menu-item:active { transform: scale(0.97); }

.ms-menu-emoji { font-size: 22px; }
.ms-menu-info { flex: 1; }
.ms-menu-name { font-size: 12px; font-weight: 500; display: block; line-height: 1.2; }
.ms-menu-price { font-size: 12px; font-weight: 700; color: var(--accent-gold); }

/* Mesero ticket */
.ms-ticket {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.ms-ticket-items {
  max-height: 120px;
  overflow-y: auto;
  padding: 8px 16px;
}

.ms-ticket-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-gold);
  border-top: 1px solid var(--border);
}

.ms-ticket-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
}

/* ============ RESPONSIVE ============ */

/* -- TABLET (1024px) -- */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .card-chart { grid-row: auto; }
  .pos-layout { grid-template-columns: 1fr; }
  .pos-ticket { max-height: 400px; }
  .fact-status-cards { grid-template-columns: 1fr; }

  /* Bartender */
  .bt-layout { grid-template-columns: 1fr 300px; }
  .bt-turno-stats { gap: 12px; }
  .bt-turno-val { font-size: 18px; }
  .bt-topbar-right { gap: 14px; }

  /* Mesero */
  .ms-layout { grid-template-columns: 1fr 360px; }

  /* Role cards */
  .role-options { grid-template-columns: repeat(2, 1fr) !important; }
}

/* -- MOBILE (768px) -- */
@media (max-width: 768px) {
  /* Admin sidebar */
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .topbar { padding: 12px 16px; }
  .topbar-right { gap: 10px; }
  .topbar-subtitle { display: none; }
  .topbar-clock { font-size: 12px; }
  .topbar-user { display: none; }
  .view { padding: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .mesas-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .mesa-card { padding: 12px; }
  .offline-banner { left: 0; }

  /* POS */
  .pos-layout { grid-template-columns: 1fr; }
  .pos-ticket { max-height: 350px; }
  .pos-items { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pos-categories { flex-wrap: wrap; gap: 4px; }
  .cat-btn { font-size: 11px; padding: 5px 10px; }

  /* KDS */
  .kds-grid { grid-template-columns: 1fr; }
  .kds-stats { flex-wrap: wrap; gap: 8px; }

  /* Inventory */
  .inv-table { font-size: 12px; }
  .inv-table th, .inv-table td { padding: 8px 10px; }
  .receta-card { padding: 14px; }

  /* Facturacion */
  .fact-status-cards { grid-template-columns: 1fr; }
  .fact-table-wrap { font-size: 11px; }

  /* Modals */
  .modal { width: 95%; max-width: 100%; }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .pay-methods { grid-template-columns: repeat(2, 1fr); }
  .pay-total-val { font-size: 22px !important; }
  .split-options { grid-template-columns: repeat(2, 1fr); }
  .propina-btns { flex-wrap: wrap; }
  .pay-split-actions { flex-direction: column; }

  /* Welcome / Role selection */
  .welcome-screen {
    align-items: flex-start;
  }
  .welcome-options { grid-template-columns: 1fr !important; gap: 12px; }
  .role-options { grid-template-columns: 1fr !important; gap: 12px; }
  .welcome-title { font-size: 28px; }
  .welcome-question h2 { font-size: 17px; }
  .welcome-content { padding: 20px 16px; max-width: 100%; }
  .welcome-logo { margin-bottom: 20px; }
  .welcome-logo-icon { width: 52px; height: 52px; font-size: 24px; }
  .welcome-logo-text { font-size: 28px; }
  .welcome-logo-sub { font-size: 11px; }
  .welcome-card { padding: 18px 16px 16px; }
  .welcome-card h3 { font-size: 17px; }
  .welcome-card-icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 12px; }
  .welcome-card > p { font-size: 12px; margin-bottom: 10px; }
  .welcome-features { margin-bottom: 14px; }
  .welcome-features li { font-size: 13px; }
  .welcome-card .btn { font-size: 13px; padding: 10px 16px; }
  .role-back { font-size: 12px; margin-top: 16px; }

  /* Bartender screen */
  .bt-topbar {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .bt-topbar-left { gap: 8px; flex-shrink: 0; }
  .bt-topbar-left .logo-icon { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
  .bt-title { font-size: 13px; }
  .bt-subtitle { display: none; }
  .bt-topbar-right {
    gap: 6px;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }
  .bt-turno-stats { gap: 6px; }
  .bt-turno-stat { padding: 4px 6px; }
  .bt-turno-val { font-size: 13px; }
  .bt-turno-label { font-size: 7px; }
  .bt-exit { padding: 6px 10px; font-size: 11px; }
  .bt-exit span { display: none; }
  .bt-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .bt-queue { border-right: none; border-bottom: 1px solid var(--border); }
  .bt-queue-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .bt-queue-header h2 { font-size: 14px; }
  .bt-queue-filters { flex-wrap: wrap; }
  .bt-filter { font-size: 10px; padding: 4px 8px; }
  .bt-order { padding: 12px; }
  .bt-drink-tag { font-size: 11px; padding: 3px 6px; }
  .bt-current { max-height: 200px; overflow-y: auto; }
  .bt-stock-list { padding: 10px; }
  .bt-stock-item { font-size: 11px; }

  /* Mesero screen */
  .ms-topbar {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 10px;
    overflow: hidden;
  }
  .ms-topbar .bt-topbar-left { gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
  .ms-topbar .bt-topbar-left .logo-icon { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
  .ms-topbar .bt-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ms-topbar .bt-subtitle { display: none; }
  .ms-topbar .bt-topbar-right {
    gap: 5px;
    flex-shrink: 0;
  }
  .ms-topbar .topbar-clock { font-size: 10px; white-space: nowrap; }
  .ms-notif-btn { width: 30px; height: 30px; font-size: 14px; }
  .ms-topbar .bt-exit { padding: 4px 8px; font-size: 10px; }
  .ms-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .ms-mesas-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 35vh;
    overflow-y: auto;
  }
  .ms-mesas-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 10px 14px; }
  .ms-mesa-card { padding: 12px; }
  .ms-mesa-num { font-size: 16px; }
  .ms-section-header { padding: 10px 14px; }
  .ms-section-header h2 { font-size: 13px; }
  .ms-mesa-select { font-size: 11px; padding: 4px 8px; }
  .ms-menu-cats { padding: 6px 10px; gap: 4px; }
  .ms-menu-items { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px 10px; }
  .ms-ticket-items { max-height: 90px; padding: 6px 10px; }
  .ms-ticket-total { padding: 6px 10px; font-size: 15px; }
  .ms-ticket-actions { padding: 8px 10px; gap: 6px; }
  .ms-ticket-actions .btn { font-size: 12px; padding: 8px 12px; }
  .ms-notif-panel { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 550; border-radius: 0; max-height: 100vh; }

  /* Toast */
  .toast { font-size: 12px; padding: 10px 18px; left: 10px; right: 10px; transform: none; width: auto; }
  .toast.show { bottom: 16px; }

  /* Charts */
  .chart-bars { gap: 4px; }
  .chart-bar-col { min-width: 28px; }
  .chart-bar-label { font-size: 8px; }
  .chart-bar-val { font-size: 8px; }

  /* Channels */
  .channels-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* -- SMALL MOBILE (480px) -- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 10px; }

  .welcome-title { font-size: 24px; }
  .welcome-content { padding: 16px 12px; }
  .welcome-logo-icon { width: 44px; height: 44px; font-size: 20px; }
  .welcome-logo-text { font-size: 24px; }
  .welcome-card { padding: 16px 14px 14px; }
  .welcome-card-icon { width: 38px; height: 38px; font-size: 17px; margin-bottom: 10px; }
  .welcome-card h3 { font-size: 15px; }
  .welcome-card > p { font-size: 11px; }
  .welcome-features li { font-size: 12px; }
  .welcome-card .btn { font-size: 12px; padding: 9px 14px; }

  .pos-items { grid-template-columns: repeat(2, 1fr); }
  .pos-item { padding: 10px 6px; }
  .pos-item-emoji { font-size: 22px; }
  .pos-item-name { font-size: 11px; }
  .pos-item-price { font-size: 11px; }

  .ticket-line { font-size: 12px; }
  .qty-btn { width: 22px; height: 22px; font-size: 12px; }

  .mesas-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .mesa-card { padding: 10px; }
  .mesa-num { font-size: 22px; }

  .ms-mesas-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  .modal { width: 98%; }
  .pay-methods { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pay-method { padding: 10px 6px; font-size: 10px; }
  .pay-method i { font-size: 16px; }
}