/* ============================================================
   PUNTOSTOCK — Design System v2
   Tema oscuro (default) + tema claro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TEMA OSCURO (default) ── */
:root,
[data-theme="dark"] {
  --bg-primary:    #0D1117;
  --bg-secondary:  #161B22;
  --bg-card:       #1C2333;
  --bg-hover:      #21273A;

  --green-primary: #7ED321;
  --green-bright:  #96F026;
  --green-dark:    #5FA518;
  --green-glow:    rgba(126,211,33,0.15);
  --green-muted:   rgba(126,211,33,0.08);

  --text-primary:  #F0F6FC;
  --text-secondary:#8B949E;
  --text-muted:    #484F58;

  --border:        rgba(255,255,255,0.06);
  --border-green:  rgba(126,211,33,0.3);

  --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-green:  0 0 20px rgba(126,211,33,0.2), 0 4px 12px rgba(0,0,0,0.4);

  --theme-icon: '☀';
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --bg-primary:    #F4F6F9;
  --bg-secondary:  #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-hover:      #F0F2F5;

  --green-primary: #5FA518;
  --green-bright:  #7ED321;
  --green-dark:    #4A8010;
  --green-glow:    rgba(95,165,24,0.12);
  --green-muted:   rgba(95,165,24,0.08);

  --text-primary:  #0D1117;
  --text-secondary:#5A6478;
  --text-muted:    #9BA3B0;

  --border:        rgba(0,0,0,0.08);
  --border-green:  rgba(95,165,24,0.3);

  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-green:  0 0 20px rgba(95,165,24,0.15), 0 4px 12px rgba(0,0,0,0.1);

  --theme-icon: '☾';
}

/* ── Shared tokens ── */
:root {
  --red:    #F85149;
  --orange: #F0A500;
  --blue:   #58A6FF;
  --purple: #8B5CF6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w:  240px;
  --topbar-h:   60px;
  --font:       'Outfit', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dark); }

/* ── Logo según tema ── */
[data-theme="light"] .ps-logo { content: url('../logo-light.png'); }
[data-theme="dark"]  .ps-logo { content: url('../logo-dark.png'); }

/* Para la landing (sin ../) */
.landing-logo[data-theme="light"] { content: url('logo-light.png'); }
.theme-btn {
  width: 34px; height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--green-primary); background: var(--bg-hover); }
.theme-btn svg { color: var(--text-secondary); transition: var(--transition); }
.theme-btn:hover svg { color: var(--green-primary); }

/* ─────────────────────────────────────────────
   AUTH
───────────────────────────────────────────── */
#auth-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
  position: relative; overflow: hidden;
}

#auth-screen::before {
  content: '';
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(126,211,33,0.06) 0%, transparent 70%);
  top: -100px; left: -100px; pointer-events: none;
}

.auth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  width: 100%; max-width: 420px;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-card);
  animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1);
}

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

.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:32px; }
.auth-logo .logo-icon {
  width:40px; height:40px; background:var(--green-primary);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; color:#0D1117;
}
.auth-logo span { font-size:22px; font-weight:800; color:var(--text-primary); }
.auth-logo span em { color:var(--green-primary); font-style:normal; }
.auth-title { font-size:24px; font-weight:700; margin-bottom:6px; }
.auth-subtitle { color:var(--text-secondary); font-size:13px; margin-bottom:32px; }

/* ── Forms ── */
.form-group { margin-bottom:16px; }

label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:6px;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  width:100%; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-primary);
  font-family:var(--font); font-size:14px; padding:10px 14px;
  outline:none; transition:var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color:var(--green-primary);
  box-shadow:0 0 0 3px var(--green-muted);
}

input::placeholder { color:var(--text-muted); }
select { cursor:pointer; }
select option { background:var(--bg-card); color:var(--text-primary); }
textarea { resize:vertical; min-height:80px; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 20px; border:none; border-radius:var(--radius-md);
  font-family:var(--font); font-size:14px; font-weight:600;
  cursor:pointer; transition:var(--transition); white-space:nowrap; text-decoration:none;
}

.btn-primary { background:var(--green-primary); color:#0D1117; width:100%; padding:12px; font-size:15px; font-weight:700; }
.btn-primary:hover { background:var(--green-bright); box-shadow:var(--shadow-green); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--bg-hover); border-color:var(--green-primary); color:var(--green-primary); }

.btn-danger { background:rgba(248,81,73,0.1); color:var(--red); border:1px solid rgba(248,81,73,0.2); }
.btn-danger:hover { background:rgba(248,81,73,0.2); }

.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid transparent; }
.btn-ghost:hover { background:var(--bg-card); color:var(--text-primary); }

.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
#app { display:flex; min-height:100vh; }

#sidebar {
  width:var(--sidebar-w); background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  z-index:100; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.sidebar-logo {
  padding:20px 20px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-logo .logo-icon {
  width:34px; height:34px; background:var(--green-primary);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; color:#0D1117; flex-shrink:0;
}
.sidebar-logo .logo-text { font-size:16px; font-weight:800; }
.sidebar-logo .logo-text em { color:var(--green-primary); font-style:normal; }

.sidebar-business { padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.sidebar-business .biz-name { font-weight:700; font-size:13px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-business .biz-plan { font-size:11px; color:var(--green-primary); font-weight:600; margin-top:2px; }

.sidebar-nav { flex:1; overflow-y:auto; padding:12px 8px; }
.nav-section { margin-bottom:20px; }
.nav-section-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; padding:0 8px; margin-bottom:6px; }

.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--radius-md); cursor:pointer; transition:var(--transition);
  color:var(--text-secondary); font-size:13.5px; font-weight:500;
  border:1px solid transparent; margin-bottom:2px;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { background:var(--green-muted); color:var(--green-primary); border-color:var(--border-green); font-weight:600; }
.nav-icon { width:18px; height:18px; flex-shrink:0; opacity:0.7; }
.nav-item.active .nav-icon { opacity:1; }
.nav-badge { margin-left:auto; background:var(--red); color:white; font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; }

.sidebar-footer { padding:12px 8px; border-top:1px solid var(--border); }

/* Main content */
#main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

#topbar {
  height:var(--topbar-h); background:var(--bg-secondary); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 24px; gap:12px;
  position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:17px; font-weight:700; flex:1; }
.topbar-date { font-size:12px; color:var(--text-secondary); font-family:var(--font-mono); }

.topbar-user {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 10px; border-radius:var(--radius-md); transition:var(--transition);
}
.topbar-user:hover { background:var(--bg-card); }
.user-avatar {
  width:32px; height:32px; background:var(--green-primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#0D1117;
}

/* Pages */
.page { display:none; padding:28px 24px; flex:1; animation:fadeIn 0.25s ease; }
.page.active { display:block; }

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

/* ─────────────────────────────────────────────
   CARDS & STATS
───────────────────────────────────────────── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-card);
}
.card-title {
  font-size:12px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
}

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }

.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
  position:relative; overflow:hidden; transition:var(--transition);
}
.stat-card:hover { border-color:var(--border-green); transform:translateY(-2px); box-shadow:var(--shadow-green); }
.stat-card::after {
  content:''; position:absolute; top:0; right:0; width:80px; height:80px;
  background:var(--green-glow); border-radius:50%;
  transform:translate(30px,-30px); pointer-events:none;
}
.stat-label { font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.stat-value { font-size:26px; font-weight:800; font-family:var(--font-mono); color:var(--text-primary); line-height:1.1; }
.stat-value.green { color:var(--green-primary); }
.stat-change { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; margin-top:6px; padding:2px 6px; border-radius:4px; }
.stat-change.up { background:rgba(126,211,33,0.1); color:var(--green-primary); }
.stat-change.down { background:rgba(248,81,73,0.1); color:var(--red); }
.stat-icon { position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; z-index:1; }
.stat-icon.green  { background:var(--green-muted); }
.stat-icon.blue   { background:rgba(88,166,255,0.1); }
.stat-icon.orange { background:rgba(240,165,0,0.1); }
.stat-icon.purple { background:rgba(139,92,246,0.1); }

/* ── Tables ── */
.table-wrapper { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; background:var(--bg-card); }
thead tr { background:var(--bg-secondary); border-bottom:1px solid var(--border); }
th { padding:10px 16px; text-align:left; font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
td { padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--bg-hover); }
.td-mono { font-family:var(--font-mono); font-size:13px; }
.td-green { color:var(--green-primary); font-weight:600; }
.td-red   { color:var(--red); font-weight:600; }
.td-muted { color:var(--text-secondary); }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.badge-green  { background:rgba(126,211,33,0.12); color:var(--green-primary); }
.badge-red    { background:rgba(248,81,73,0.12);  color:var(--red); }
.badge-orange { background:rgba(240,165,0,0.12);  color:var(--orange); }
.badge-blue   { background:rgba(88,166,255,0.12); color:var(--blue); }
.badge-muted  { background:var(--bg-hover); color:var(--text-secondary); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px; animation:fadeIn 0.2s ease;
}
.modal {
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:28px; width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.6); animation:slideUp 0.25s cubic-bezier(0.4,0,0.2,1);
}
.modal-lg { max-width:760px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-title { font-size:18px; font-weight:700; }
.modal-close {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:none; background:var(--bg-card); color:var(--text-secondary);
  border-radius:var(--radius-sm); cursor:pointer; font-size:18px; transition:var(--transition);
}
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }

/* ── POS Layout ── */
.pos-layout { display:grid; grid-template-columns:1fr 360px; gap:20px; height:calc(100vh - var(--topbar-h) - 56px); }
.pos-left { display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.pos-right { display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }

.pos-search-bar { position:relative; }
.pos-search-bar input { padding-left:42px; font-size:15px; height:48px; background:var(--bg-card); border-color:var(--border-green); }
.pos-search-bar .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }

.pos-products { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; align-content:start; padding:4px 2px; }

.product-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 12px; cursor:pointer; transition:var(--transition); text-align:center; }
.product-card:hover { border-color:var(--green-primary); background:var(--bg-hover); transform:translateY(-2px); }
.product-card:active { transform:scale(0.97); }
.product-card.no-stock { opacity:0.4; cursor:not-allowed; }
.product-icon { width:40px; height:40px; background:var(--green-muted); border-radius:8px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.product-icon svg { color:var(--green-primary); }
.product-name { font-size:12px; font-weight:600; color:var(--text-primary); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-price { font-size:14px; font-weight:700; color:var(--green-primary); font-family:var(--font-mono); }
.product-stock-label { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* Cart */
.cart-header { padding:16px; border-bottom:1px solid var(--border); }
.cart-title { font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between; }
.cart-count { background:var(--green-primary); color:#0D1117; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; }
.cart-items { flex:1; overflow-y:auto; padding:8px; }
.cart-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-md); border:1px solid var(--border); margin-bottom:6px; background:var(--bg-secondary); transition:var(--transition); }
.cart-item:hover { border-color:var(--border-green); }
.cart-item-name { flex:1; font-size:13px; font-weight:500; }
.cart-item-price { font-size:12px; color:var(--text-secondary); font-family:var(--font-mono); }
.qty-control { display:flex; align-items:center; gap:6px; }
.qty-btn { width:24px; height:24px; background:var(--bg-card); border:1px solid var(--border); border-radius:5px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; color:var(--text-primary); transition:var(--transition); }
.qty-btn:hover { background:var(--green-muted); border-color:var(--green-primary); color:var(--green-primary); }
.qty-value { font-size:14px; font-weight:700; font-family:var(--font-mono); min-width:20px; text-align:center; }
.cart-remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:2px 4px; border-radius:4px; transition:var(--transition); }
.cart-remove:hover { color:var(--red); background:rgba(248,81,73,0.1); }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--text-muted); gap:10px; font-size:13px; }

/* Cart totals */
.cart-totals { padding:16px; border-top:1px solid var(--border); background:var(--bg-secondary); }
.total-row { display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; color:var(--text-secondary); }
.total-row.main { font-size:20px; font-weight:800; color:var(--text-primary); font-family:var(--font-mono); margin:10px 0; padding-top:10px; border-top:1px solid var(--border); }
.total-row.main span:last-child { color:var(--green-primary); }
.cobrar-btn { width:100%; padding:16px; background:var(--green-primary); color:#0D1117; border:none; border-radius:var(--radius-md); font-family:var(--font); font-size:16px; font-weight:800; cursor:pointer; transition:var(--transition); margin-top:12px; }
.cobrar-btn:hover { background:var(--green-bright); box-shadow:var(--shadow-green); transform:translateY(-1px); }
.cobrar-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

/* ── Page header ── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.page-header-title { font-size:20px; font-weight:800; }
.search-input-wrapper { position:relative; flex:1; max-width:320px; }
.search-input-wrapper svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.search-input-wrapper input { padding-left:38px; }

/* ── Cierre de caja ── */
.cierre-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cierre-metodo { display:flex; align-items:center; justify-content:space-between; padding:14px; background:var(--bg-secondary); border-radius:var(--radius-md); border:1px solid var(--border); margin-bottom:8px; }
.cierre-metodo-label { font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; }
.cierre-metodo-value { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--green-primary); }

/* ── Admin badge & toggle ── */
.admin-badge { background:rgba(240,165,0,0.1); border:1px solid rgba(240,165,0,0.3); color:var(--orange); font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:0.5px; }
.toggle { position:relative; display:inline-block; width:40px; height:22px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--bg-hover); border-radius:999px; transition:var(--transition); border:1px solid var(--border); }
.toggle-slider:before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--text-muted); border-radius:50%; transition:var(--transition); }
.toggle input:checked + .toggle-slider { background:var(--green-muted); border-color:var(--green-primary); }
.toggle input:checked + .toggle-slider:before { background:var(--green-primary); transform:translateX(18px); }

/* ── Toasts ── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,0.4); animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1); min-width:260px; max-width:360px; }
.toast.success { border-left:3px solid var(--green-primary); }
.toast.error   { border-left:3px solid var(--red); }
.toast.warning { border-left:3px solid var(--orange); }
.toast.info    { border-left:3px solid var(--blue); }
.toast-icon { width:18px; height:18px; flex-shrink:0; }

/* ── Empty states ── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--text-muted); gap:12px; }
.empty-state-icon { opacity:0.35; }
.empty-state h3 { font-size:16px; font-weight:600; color:var(--text-secondary); }
.empty-state p  { font-size:13px; text-align:center; max-width:300px; }

/* ── Loader ── */
.loader { display:inline-block; width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--green-primary); border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.page-loader { display:flex; align-items:center; justify-content:center; height:200px; gap:12px; color:var(--text-secondary); font-size:13px; }

/* ══════════════════════════════════════════
   MOBILE — Bottom navigation bar
══════════════════════════════════════════ */

/* Barra inferior mobile */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 8px 4px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.mobile-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--font);
}

.mobile-nav-item svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
}

.mobile-nav-item span {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

.mobile-nav-item.active {
  color: var(--green-primary);
}

.mobile-nav-item.active svg {
  filter: drop-shadow(0 0 6px rgba(126,211,33,0.4));
}

/* Botón "más" que abre un drawer con el resto de opciones */
#mobile-more-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
}

#mobile-more-drawer.open { display: block; }

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.drawer-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-top: 1px solid var(--border);
  padding: 16px 16px calc(80px + env(safe-area-inset-bottom));
  animation: drawerUp 0.3s cubic-bezier(0.4,0,0.2,1);
}

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

.drawer-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.drawer-title {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 12px;
  padding: 0 4px;
}

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.drawer-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 14px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
  color: var(--text-secondary);
  text-align: center;
}

.drawer-item:hover, .drawer-item.active {
  background: var(--green-muted);
  border-color: var(--border-green);
  color: var(--green-primary);
}

.drawer-item svg { width: 24px; height: 24px; }

.drawer-item span {
  font-size: 11px; font-weight: 600;
  line-height: 1.2;
}

.drawer-logout {
  margin-top: 12px;
  width: 100%; padding: 12px;
  background: rgba(248,81,73,0.08);
  border: 1px solid rgba(248,81,73,0.15);
  border-radius: var(--radius-md);
  color: var(--red); font-family: var(--font);
  font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 8px;
  transition: var(--transition);
}

.drawer-logout:hover { background: rgba(248,81,73,0.15); }

/* ── Responsive breakpoints ── */
@media (max-width: 900px) {
  /* Esconder sidebar en mobile */
  #sidebar { display: none !important; }

  /* Sin margen izquierdo */
  #main-content { margin-left: 0; }

  /* Padding inferior para no tapar contenido con la bottom nav */
  .page { padding-bottom: 90px !important; }

  /* Mostrar bottom nav */
  #mobile-bottom-nav { display: block; }

  /* Topbar ajustado */
  #topbar { padding: 0 16px; }
  .topbar-title { font-size: 15px; }
  #topbar-user-name { display: none; }

  /* Grids */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cierre-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }

  /* POS en mobile: columna unica */
  .pos-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* Tabla scroll horizontal */
  .table-wrapper { border-radius: var(--radius-md); }
  th, td { padding: 10px 12px; font-size: 12px; }

  /* Modal full width */
  .modal { padding: 20px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Page header wrap */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > div { width: 100%; }
  .search-input-wrapper { max-width: 100%; }
}

@media (max-width: 500px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .page { padding: 16px 12px 90px !important; }
  .stat-value { font-size: 20px; }
  .pos-products { grid-template-columns: repeat(2, 1fr); }
}

/* ── Utils ── */
.flex { display:flex; } .flex-1 { flex:1; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; } .mb-16 { margin-bottom:16px; } .mb-20 { margin-bottom:20px; }
.text-right { text-align:right; } .text-center { text-align:center; }
.text-green { color:var(--green-primary); } .text-red { color:var(--red); } .text-muted { color:var(--text-secondary); }
.font-mono { font-family:var(--font-mono); } .font-bold { font-weight:700; }
.hidden { display:none !important; } .w-full { width:100%; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }