@charset "utf-8";

/* ─── DESIGN TOKENS ─── */
:root { 
  --bg: #080b0d; 
  --surface: #0f1419; 
  --card: #141a20; 
  --card2: #1a2028; 
  --border: #1e2832; 
  --border2: #243040; 
  --accent: #00e5a0; 
  --accent-dim: rgba(0,229,160,0.12); 
  --accent2: #ff7043;
  --accent3: #4fc3f7; 
  --text: #e2eaf4; 
  --muted: #5a6d80; 
  --danger: #ff4757; 
  --warning: #ffd43b; 
  --green: #00e5a0; 
  --radius: 14px; 
  --radius-sm: 9px; 
  --nav-h: 60px; 
  --tab-h: 58px;
}

*, ::before, ::after { 
  margin: 0px; 
  padding: 0px; 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
}

html, body { 
  font-family: "DM Sans", sans-serif;
  background: var(--bg); 
  color: var(--text); 
  min-height: 100dvh; 
  overscroll-behavior: none; 
  -webkit-font-smoothing: antialiased; 
}

body::before { 
  content: ""; 
  position: fixed; 
  inset: 0px;
  background: radial-gradient(90% 50% at 5% 10%, rgba(0, 229, 160, 0.035) 0%, transparent 55%), radial-gradient(60% 70% at 95% 90%, rgba(79, 195, 247, 0.024) 0%, transparent 55%);
  pointer-events: none; 
  z-index: 0; 
}

/* ── TOP NAV ── */
.top-nav { 
  position: fixed; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  height: var(--nav-h);
  background: rgba(8, 11, 13, 0.96); 
  backdrop-filter: blur(20px); 
  border-bottom: 1px solid var(--border); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0px 16px;
  z-index: 200; 
  gap: 12px; 
}

.logo { 
  font-family: "Bebas Neue", sans-serif; 
  font-size: 22px; 
  letter-spacing: 3px; 
  color: var(--accent); 
  display: flex; 
  align-items: center;
  gap: 8px; 
  flex-shrink: 0; 
}

.logo em { color: var(--text); font-style: normal; }

.logo-dot { 
  width: 7px; 
  height: 7px; 
  background: var(--accent);
  border-radius: 50%; 
  animation: 2s ease 0s infinite normal none running pulse;
}

@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}

.nav-clock { 
  font-family: "JetBrains Mono", monospace; 
  font-size: 12px; 
  color: var(--muted); 
  background: var(--surface); 
  padding: 5px 10px; 
  border-radius: 7px;
  border: 1px solid var(--border); 
  white-space: nowrap; 
}

.btn-close-nav { 
  padding: 6px 14px; 
  background: transparent; 
  border: 1.5px solid var(--danger); 
  color: var(--danger);
  border-radius: 8px; 
  font-family: "DM Sans", sans-serif; 
  font-size: 12px; 
  font-weight: 700; 
  cursor: pointer; 
  transition: 0.2s; 
  white-space: nowrap; 
  flex-shrink: 0;
}

.btn-close-nav:hover, .btn-close-nav:active { 
  background: var(--danger); 
  color: rgb(255, 255, 255); 
}

/* ── BOTTOM TAB BAR ── */
.tab-bar { 
  position: fixed; 
  bottom: 0px; 
  left: 0px; 
  right: 0px;
  height: var(--tab-h); 
  background: rgba(8, 11, 13, 0.97); 
  backdrop-filter: blur(20px); 
  border-top: 1px solid var(--border); 
  display: flex; 
  align-items: stretch; 
  z-index: 200;
}

.tab-item { 
  flex: 1 1 0%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 3px; 
  border-width: medium; 
  border-style: none;
  border-color: currentcolor; 
  border-image: initial; 
  background: transparent; 
  cursor: pointer; 
  color: var(--muted); 
  transition: 0.2s; 
  font-family: "DM Sans", sans-serif; 
  font-size: 10px; 
  font-weight: 600;
  letter-spacing: 0.3px; 
  padding: 8px 4px; 
  position: relative; 
}

.tab-item .tab-icon { font-size: 18px; line-height: 1; }

.tab-item.active { color: var(--accent); }

.tab-item.active::before { 
  content: ""; 
  position: absolute; 
  top: 0px; 
  left: 20%; 
  right: 20%; 
  height: 2px; 
  background: var(--accent);
  border-radius: 0px 0px 4px 4px; 
}

.tab-badge { 
  position: absolute; 
  top: 6px; 
  right: calc(50% - 18px); 
  background: var(--danger);
  color: rgb(255, 255, 255); 
  font-size: 9px; 
  font-weight: 700; 
  min-width: 16px; 
  height: 16px; 
  border-radius: 8px; 
  align-items: center; 
  justify-content: center;
  padding: 0px 4px; 
  display: none; 
}

.tab-badge.show { display: flex; }

/* ── MAIN SCROLL AREA ── */
.main { 
  position: relative; 
  z-index: 1;
  padding: calc(var(--nav-h) + 16px) 12px calc(var(--tab-h) + 16px); 
  max-width: 900px; 
  margin: 0px auto; 
}

.page { 
  display: none;
  animation: 0.3s ease 0s 1 normal none running fadeUp; 
}

.page.active { display: block; }

@keyframes fadeUp { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.s-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }

.s-title { 
  font-family: "Bebas Neue", sans-serif; 
  font-size: 28px;
  letter-spacing: 2px; 
  line-height: 1; 
}

.s-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.stats-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr;
  gap: 10px; 
  margin-bottom: 14px; 
}

.stat-card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 14px 16px; 
  position: relative;
  overflow: hidden; 
}

.stat-card::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 2px; }

.sc-green::after { background: var(--accent); }
.sc-red::after { background: var(--danger); }
.sc-blue::after { background: var(--accent3); }
.sc-orange::after { background: var(--accent2); }

.stat-label { 
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase;
  letter-spacing: 1px; 
  color: var(--muted); 
  margin-bottom: 6px; 
}

.stat-val { 
  font-family: "JetBrains Mono", monospace; 
  font-size: 24px; 
  font-weight: 600; 
  line-height: 1;
}

.sv-green { color: var(--accent); }
.sv-red { color: var(--danger); }
.sv-blue { color: var(--accent3); }
.sv-orange { color: var(--accent2); }

.controls-bar { 
  background: var(--card);
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 14px; 
  margin-bottom: 14px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.ctrl-row { 
  display: flex;
  align-items: center; 
  gap: 10px; 
  flex-wrap: wrap; 
}

.ctrl-label { 
  font-size: 11px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  color: var(--muted); 
  white-space: nowrap;
  min-width: 70px; 
}

.ctrl-input { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  color: var(--text); 
  padding: 8px 12px; 
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace; 
  font-size: 14px; 
  flex: 1 1 0%; 
  min-width: 0px; 
  transition: border-color 0.2s; 
  appearance: none;
}

.ctrl-input:focus { outline: none; border-color: var(--accent); }

/* ── BUTTONS ── */
.btn { 
  padding: 9px 16px; 
  border-radius: var(--radius-sm); 
  border-width: medium; 
  border-style: none; 
  border-color: currentcolor;
  border-image: initial; 
  font-family: "DM Sans", sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  cursor: pointer; 
  transition: 0.18s; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: 6px; 
  letter-spacing: 0.2px; 
  user-select: none; 
}

.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: rgb(0, 0, 0); }
.btn-primary:hover { background: rgb(0, 204, 142); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: var(--danger); color: rgb(255, 255, 255); }
.btn-danger:hover { background: rgb(224, 62, 77); }
.btn-warning { background: var(--warning); color: rgb(0, 0, 0); }
.btn-full { width: 100%; padding: 13px; font-size: 14px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ── MESAS GRID ── */
.mesas-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 480px) {
  .mesas-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .mesas-grid { grid-template-columns: repeat(3, 1fr); }
}

.mesa-card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius);
  overflow: hidden; 
  transition: 0.25s; 
  animation: 0.35s ease 0s 1 normal both running slideUp; 
  position: relative;
}

@keyframes slideUp { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.mesa-card.ocupada { 
  border-color: rgba(255, 71, 87, 0.35); 
  box-shadow: rgba(255, 71, 87, 0.07) 0px 0px 24px;
}

.mesa-card.alerta-1h { 
  border-color: rgba(255, 212, 59, 0.45) !important; 
  box-shadow: rgba(255, 212, 59, 0.1) 0px 0px 24px !important;
  animation: 1.5s ease-in-out 0s infinite normal none running alertBorder !important;
}

@keyframes alertBorder { 
  0%, 100% { box-shadow: rgba(255, 212, 59, 0.08) 0px 0px 12px; }
  50% { box-shadow: rgba(255, 212, 59, 0.22) 0px 0px 28px; }
}

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

.mc-name { 
  font-family: "Bebas Neue", sans-serif; 
  font-size: 19px; 
  letter-spacing: 1.5px;
}

.mc-status { 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  padding: 4px 9px;
  border-radius: 20px; 
}

.mc-status.free { background: rgba(0, 229, 160, 0.1); color: var(--accent); border: 1px solid rgba(0, 229, 160, 0.2); }
.mc-status.occ { background: rgba(255, 71, 87, 0.1); color: var(--danger); border: 1px solid rgba(255, 71, 87, 0.2); }
.mc-status.warn { background: rgba(255, 212, 59, 0.1); color: var(--warning); border: 1px solid rgba(255, 212, 59, 0.2); }

.sdot { width: 5px; height: 5px; border-radius: 50%; background: currentcolor; }
.occ .sdot, .warn .sdot { animation: 1.1s ease 0s infinite normal none running blink; }

@keyframes blink { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ── MESA VISUAL ── */
.mc-visual { padding: 14px; display: flex; justify-content: center; }

.btable { 
  width: 180px; 
  height: 90px; 
  background: linear-gradient(135deg, rgb(13, 102, 51) 0%, rgb(10, 82, 40) 100%);
  border: 5px solid rgb(92, 58, 30); 
  border-radius: 7px; 
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 8px inset, rgba(0, 0, 0, 0.4) 0px 4px 12px; 
  flex-shrink: 0;
}

.btable::before { 
  content: ""; 
  position: absolute; 
  inset: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.06); 
  border-radius: 3px;
}

.pk { 
  position: absolute; 
  width: 12px; 
  height: 12px; 
  background: rgb(5, 8, 8); 
  border-radius: 50%; 
  border: 1.5px solid rgb(58, 37, 16);
}

.pk.tl { top: -1px; left: -1px; }
.pk.tr { top: -1px; right: -1px; }
.pk.bl { bottom: -1px; left: -1px; }
.pk.br { bottom: -1px; right: -1px; }
.pk.ml { top: 50%; left: -2px; transform: translateY(-50%); }
.pk.mr { top: 50%; right: -2px; transform: translateY(-50%); }

.btable-people { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 3px; }

.bperson { 
  width: 14px; 
  height: 14px;
  background: rgba(0, 229, 160, 0.55); 
  border-radius: 50%; 
  font-size: 7px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.mc-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }

.timer-box { 
  font-family: "JetBrains Mono", monospace; 
  font-size: 26px; 
  font-weight: 600; 
  color: var(--warning); 
  text-align: center;
  padding: 9px; 
  background: rgba(255, 212, 59, 0.07); 
  border-radius: 8px; 
  border: 1px solid rgba(255, 212, 59, 0.14); 
  letter-spacing: 3px;
}

.timer-box.alerta { 
  color: var(--danger); 
  background: rgba(255, 71, 87, 0.07); 
  border-color: rgba(255, 71, 87, 0.2);
  animation: 0.9s ease 0s infinite normal none running timerPulse; 
}

@keyframes timerPulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.cost-box { 
  font-family: "JetBrains Mono", monospace; 
  font-size: 18px; 
  font-weight: 600; 
  color: var(--accent); 
  text-align: center;
  padding: 7px; 
  background: rgba(0, 229, 160, 0.05); 
  border-radius: 8px; 
  border: 1px solid rgba(0, 229, 160, 0.1); 
}

.info-row { display: flex; align-items: center; justify-content: space-between; }

.ik { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; }
.iv { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; }

.people-dots { display: flex; gap: 4px; }

.pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
.pdot.on { background: var(--accent3); }

.free-info { text-align: center; padding: 10px 0px; }
.fi-rate { font-size: 18px; font-weight: 600; color: var(--accent); font-family: "JetBrains Mono", monospace; }
.fi-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

.mc-foot { padding: 10px 14px; display: flex; gap: 8px; border-top: 1px solid var(--border); }
.mc-foot .btn { flex: 1 1 0%; }

.btn-icon { padding: 9px 12px; flex: 0 0 auto !important; }

/* ── MODALS ── */
.overlay { 
  position: fixed; 
  inset: 0px;
  background: rgba(0, 0, 0, 0.72); 
  z-index: 500; 
  display: none; 
  align-items: flex-end; 
  justify-content: center; 
  backdrop-filter: blur(6px); 
}

.overlay.open { display: flex; animation: 0.2s ease 0s 1 normal none running fadeIn; }

@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.modal { 
  background: var(--card); 
  border: 1px solid var(--border2); 
  border-radius: 20px 20px 0px 0px;
  padding: 24px 20px; 
  width: 100%; 
  max-width: 520px; 
  animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running slideModal;
  max-height: 90dvh; 
  overflow-y: auto; 
}

@keyframes slideModal { 
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

@media (min-width: 560px) {
  .overlay { align-items: center; }
  .modal { border-radius: 20px; max-height: 85dvh; }
  .modal-handle { display: none; }
}

.modal-handle { width: 40px; height: 4px; background: var(--border2); border-radius: 2px; margin: 0px auto 20px; }
.modal-title { font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: 2px; margin-bottom: 2px; }
.modal-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }

.mfield { margin-bottom: 14px; }
.mfield label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }

.minput { 
  width: 100%; 
  background: var(--surface); 
  border: 1px solid var(--border); 
  color: var(--text); 
  padding: 11px 14px; 
  border-radius: 10px;
  font-family: "DM Sans", sans-serif; 
  font-size: 15px; 
  transition: border-color 0.2s; 
  appearance: none; 
}
.minput:focus { outline: none; border-color: var(--accent); }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1 1 0%; padding: 13px; font-size: 14px; }

.people-picker { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }

.pp-btn { 
  width: 36px; 
  height: 36px; 
  border-radius: 8px; 
  border: 1px solid var(--border); 
  background: var(--card); 
  color: var(--text); 
  font-size: 18px; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: 0.15s; 
  flex-shrink: 0; 
}
.pp-btn:active { background: var(--accent); color: rgb(0, 0, 0); border-color: var(--accent); }

.pp-dots { display: flex; gap: 5px; flex: 1 1 0%; justify-content: center; flex-wrap: wrap; }
.pp-count { font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 600; width: 28px; text-align: center; flex-shrink: 0; }

.ticket { 
  background: var(--surface); 
  border: 1px dashed var(--border2); 
  border-radius: 10px;
  padding: 14px; 
  font-family: "JetBrains Mono", monospace; 
  font-size: 12px; 
  margin: 14px 0px; 
}

.tr { display: flex; justify-content: space-between; padding: 4px 0px; border-bottom: 1px dashed rgba(30, 40, 50, 0.8); }
.tr:last-child { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.tr.tot { font-size: 15px; font-weight: 600; color: var(--accent); margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--border2); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

/* ── CAJA PAGE ── */
.caja-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.htable { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
.htable th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.htable td { padding: 10px 12px; border-bottom: 1px solid rgba(30, 40, 50, 0.5); }
.htable tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.htable tr:hover td { background: rgba(255, 255, 255, 0.016); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.badge-g { background: rgba(0, 229, 160, 0.12); color: var(--accent); }
.badge-b { background: rgba(79, 195, 247, 0.12); color: var(--accent3); }

/* ── DASHBOARD Y GRAFICOS (RESPONSIVE) ── */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .dash-grid { grid-template-columns: 1fr 1fr; } }

.dash-card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 14px; 
  min-width: 0; /* EVITA QUE LA GRÁFICA DESBORDE LA PANTALLA */
  overflow: hidden;
}
.dash-card.full { grid-column: 1 / -1; }

.dc-title { font-family: "Bebas Neue", sans-serif; font-size: 16px; letter-spacing: 1.5px; margin-bottom: 1px; }
.dc-sub { font-size: 11px; color: var(--muted); margin-bottom: 12px; }

.chart-wrap { 
  position: relative; 
  width: 100%; 
  height: 200px; 
}
.chart-wrap.sm { height: 160px; }
.chart-wrap canvas { max-width: 100% !important; width: 100% !important; }

/* ── CONFIG ── */
.config-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.cfg-title { font-family: "Bebas Neue", sans-serif; font-size: 18px; letter-spacing: 1.5px; margin-bottom: 3px; }
.cfg-sub { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.cfg-field { margin-bottom: 12px; }
.cfg-field label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 5px; }

.cfg-input { 
  width: 100%; 
  border: 1px solid var(--border2); 
  background: rgb(17, 24, 32); 
  color: var(--text); 
  padding: 10px 14px; 
  border-radius: 9px;
  font-family: "DM Sans", sans-serif; 
  font-size: 14px; 
  appearance: none; 
  transition: border-color 0.2s; 
}
.cfg-input:focus { outline: none; border-color: var(--accent); }
.cfg-input::placeholder { color: rgb(74, 93, 112); }

/* Flechita para los Selects */
select.cfg-input {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235a6d80%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 50%;
  background-size: 10px auto;
  padding-right: 35px;
}

/* ── TOAST ── */
.toast-wrap { 
  position: fixed; 
  top: calc(var(--nav-h) + 8px); 
  left: 12px; 
  right: 12px; 
  z-index: 400; 
  display: flex; 
  flex-direction: column; 
  gap: 8px;
  pointer-events: none; 
}

.toast { 
  background: var(--card2); 
  border-radius: 10px; 
  padding: 12px 16px;
  font-size: 13px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 28px; 
  pointer-events: all;
  animation: 0.3s ease 0s 1 normal none running tIn; 
  border-left: 3px solid var(--accent); 
}

.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }
.toast.info { border-left-color: var(--accent3); }

@keyframes tIn { 
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .ei { font-size: 40px; margin-bottom: 12px; }
.empty .et { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty .ed { font-size: 12px; }

/* ── BANNER ── */
.alert-banner { 
  display: none; 
  background: rgba(255, 212, 59, 0.08);
  border: 1px solid rgba(255, 212, 59, 0.3); 
  border-radius: 10px; 
  padding: 10px 14px; 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--warning); 
  margin-bottom: 12px;
  align-items: center; 
  gap: 8px; 
}
.alert-banner.show { display: flex; }

/* ── CAJA ── */
.caja-sum { 
  background: linear-gradient(135deg, rgba(0, 229, 160, 0.08), transparent);
  border: 1px solid rgba(0, 229, 160, 0.18); 
  border-radius: var(--radius); 
  padding: 18px; 
  margin-bottom: 14px; 
}

.cs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.cs-total { font-family: "JetBrains Mono", monospace; font-size: 38px; font-weight: 600; color: var(--accent); line-height: 1; }
.cs-date { font-size: 12px; color: var(--muted); margin-top: 4px; }

.cierre-warn { 
  background: rgba(255, 71, 87, 0.06);
  border: 1px solid rgba(255, 71, 87, 0.18); 
  border-radius: 9px; 
  padding: 12px; 
  font-size: 12px; 
  color: var(--muted); 
  line-height: 1.6; 
  margin-bottom: 14px;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── MODE TOGGLE ── */
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-btn { 
  background: var(--surface); 
  border: 1.5px solid var(--border); 
  border-radius: 10px;
  padding: 12px 10px; 
  cursor: pointer; 
  transition: 0.2s; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 3px; 
  text-align: center; 
  color: var(--muted);
  user-select: none; 
}
.mode-btn:active { transform: scale(0.97); }
.mode-icon { font-size: 22px; line-height: 1; }
.mode-lbl { font-size: 12px; font-weight: 700; color: var(--text); }
.mode-desc { font-size: 10px; color: var(--muted); line-height: 1.3; }
.mode-btn.active { border-color: var(--accent); background: rgba(0, 229, 160, 0.08); color: var(--accent); }
.mode-btn.active .mode-lbl { color: var(--accent); }

.hora-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
  background: rgba(79, 195, 247, 0.12);
  border: 1px solid rgba(79, 195, 247, 0.2); 
  color: var(--accent3); 
  font-size: 10px; 
  font-weight: 700; 
  padding: 3px 8px; 
  border-radius: 20px;
}

/* ── RESPONSIVIDAD PC Y TABLET (Estilo BarberPro) ── */
@media (min-width: 768px) {
  .main { max-width: 1000px; padding: calc(var(--nav-h) + 30px) 30px 30px 110px; }
  .tab-bar { 
    top: var(--nav-h); bottom: 0px; left: 0px; width: 85px;
    height: auto; flex-direction: column; justify-content: flex-start; padding-top: 20px; 
    border-top: none; border-right: 1px solid var(--border);
  }
  .tab-item { flex: 0 0 auto; height: 70px; width: 100%; margin-bottom: 5px; }
  .tab-item.active::before { 
    inset: 15% auto 15% 0px; width: 3px; height: auto; border-radius: 0px 3px 3px 0px;
  }
}

/* ── SPLIT LAYOUT CONFIGURACIÓN ── */
.config-layout { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.config-menu { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.config-menu::-webkit-scrollbar { display: none; }
.config-menu-item { 
  padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; 
  font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; 
  transition: 0.2s; display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid transparent; 
}
.config-menu-item.active { background: rgba(0, 229, 160, 0.1); color: var(--accent); border-color: var(--accent); }
.config-section { display: none; animation: 0.3s ease 0s 1 normal none running fadeIn; }
.config-section.active { display: block; }

@media (min-width: 768px) {
  .config-layout { flex-direction: row; align-items: flex-start; }
  .config-menu { flex-direction: column; width: 220px; border-bottom: none; padding-right: 16px; flex-shrink: 0; }
  .config-content { flex: 1 1 0%; min-width: 0px; }
}