/* ============ TOKENS ============ */
:root {
  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #fafbfb;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e9ec;
  --border-strong: #d4dadf;

  --primary-50:#ecfdf5;
  --primary-100:#d1fae5;
  --primary-500:#10b981;
  --primary-600:#059669;
  --primary-700:#047857;

  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#3b82f6;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.12);

  --radius: 12px;
  --radius-sm: 8px;

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:-.01em; }
.muted{ color:var(--muted); }
.small{ font-size:.8rem; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; }
.t-right{ text-align:right; }
.empty{ padding:2rem; text-align:center; color:var(--muted); }
.section{ font-size:1.35rem; font-weight:700; margin:0 0 .25rem; }
.subtitle{ color:var(--muted); margin:0 0 1rem; font-size:.9rem; }
.row{ display:flex; align-items:center; gap:.5rem; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.grow{ flex:1; }

/* ============ FORM ELEMENTS ============ */
input, select, textarea{
  width:100%; padding:.6rem .75rem;
  border:1px solid var(--border-strong);
  background:#fff; border-radius:var(--radius-sm);
  font:inherit; color:inherit; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--primary-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
label{ display:block; font-size:.8rem; font-weight:500; color:var(--text); }
label > input, label > select, label > textarea{ margin-top:.3rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .95rem; border:1px solid var(--border-strong);
  background:#fff; color:var(--text); border-radius:var(--radius-sm);
  font:inherit; font-weight:500; cursor:pointer;
  transition: all .15s ease;
}
.btn:hover{ border-color:var(--text); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{
  background:var(--primary-600); color:#fff; border-color:var(--primary-600);
  box-shadow: 0 4px 14px rgba(16,185,129,.25);
}
.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-sm{ padding:.35rem .7rem; font-size:.8rem; }
.btn-block{ display:flex; width:100%; }
.icon-btn{
  background:transparent; border:none; cursor:pointer;
  width:36px; height:36px; border-radius:50%;
  font-size:1.1rem; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ background:var(--bg); color:var(--text); }

/* ============ CARDS / TABLE ============ */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:1.25rem; }
.grid{ display:grid; gap:1rem; }
.grid-2{ grid-template-columns: 1.4fr 1fr; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
.tbl{ width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl th{
  text-align:left; padding:.6rem .8rem; font-weight:600; color:var(--muted);
  background:var(--surface-2); border-bottom:1px solid var(--border);
  text-transform:uppercase; font-size:.7rem; letter-spacing:.05em;
}
.tbl td{ padding:.65rem .8rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr:hover td{ background:var(--surface-2); }
.tbl td.low, .st.low{ color:var(--warning); font-weight:600; }

/* ============ BADGES ============ */
.badge{
  display:inline-block; padding:.15rem .55rem; font-size:.7rem;
  border-radius:999px; background:var(--bg); color:var(--muted);
  font-weight:600; letter-spacing:.02em;
}
.badge-ok{ background:var(--primary-50); color:var(--primary-700); }
.badge-muted{ background:#f1f5f9; color:#64748b; }

/* ============ KPI ============ */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:.5rem 0 1rem; }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-sm);
}
.kpi .label{ color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.kpi .value{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; margin-top:.25rem; }

/* ============ CHART ============ */
.bars{ display:flex; align-items:flex-end; gap:.5rem; height:170px; margin-top:1rem; padding:0 .25rem; }
.bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.bar-wrap .b{
  width:100%; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, var(--primary-500), var(--primary-700));
  min-height:4px; transition: height .4s ease;
}
.bar-wrap .lbl{ font-size:.7rem; color:var(--muted); text-transform:capitalize; }

/* ============ AUTH ============ */
.auth-page{
  min-height:100vh;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(16,185,129,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.08), transparent 60%),
    var(--bg);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.auth-shell{ width:100%; max-width:420px; }
.auth-card{
  background:#fff; border-radius:18px; padding:2.25rem 2rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.auth-logo{
  width:56px; height:56px; border-radius:14px;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:0 8px 24px rgba(16,185,129,.4);
  margin:0 auto 1.25rem;
}
.auth-card h1{ text-align:center; font-size:1.75rem; }
.auth-card .subtitle{ text-align:center; margin-bottom:1.5rem; }
.auth-form{ display:grid; gap:1rem; }
.auth-foot{ text-align:center; color:var(--muted); font-size:.78rem; margin-top:1rem; }

/* ============ APP SHELL ============ */
.app-page{ min-height:100vh; }
.sidebar{
  position:fixed; inset:0 auto 0 0; width:240px; z-index:30;
  background:#0b1a16; color:#e6f4ee;
  display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
}
.sidebar .brand{
  padding:1.1rem 1.1rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar .brand .dot{ color:var(--primary-500); font-size:1.4rem; line-height:0; }
.sidebar .nav{ display:flex; flex-direction:column; padding:.75rem .6rem; gap:.15rem; flex:1; overflow-y:auto; }
.sidebar .nav a{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .8rem; border-radius:10px;
  color:#cfe2da; font-weight:500; font-size:.9rem;
  transition: background .12s, color .12s;
}
.sidebar .nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.sidebar .nav a.active{ background:var(--primary-600); color:#fff; box-shadow: 0 4px 12px rgba(16,185,129,.35); }
.sidebar .nav a .ic{ font-size:1rem; width:1.25rem; text-align:center; }
.sidebar .user{
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.sidebar .user .avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--primary-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.sidebar .user .meta{ flex:1; min-width:0; }
.sidebar .user .nm{ font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .user .rl{ font-size:.7rem; color:#86a89a; text-transform:capitalize; }
.sidebar .user .icon-btn{ color:#86a89a; }
.sidebar .user .icon-btn:hover{ color:#fff; background:rgba(255,255,255,.06); }

.main{ margin-left:240px; min-height:100vh; }
.topbar{
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; background:rgba(255,255,255,.7);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.topbar #hamburger{ display:none; }
.view{ padding:1.5rem; max-width:1400px; margin:0 auto; }

.backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.45);
  z-index:25; opacity:0; transition: opacity .2s;
}
body.sidebar-open .backdrop{ display:block; opacity:1; }

@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); transition: transform .2s ease; }
  body.sidebar-open .sidebar{ transform:translateX(0); box-shadow: var(--shadow-lg); }
  .main{ margin-left:0; }
  .topbar #hamburger{ display:inline-flex; }
  .view{ padding:1rem; }
}

/* ============ POS ============ */
.pos{ display:grid; grid-template-columns: 1fr 380px; gap:1rem; align-items:flex-start; }
@media (max-width:1100px){ .pos{ grid-template-columns:1fr; } }
.search-box input{ font-size:1rem; padding:.75rem 1rem; }
.product-grid{
  display:grid; gap:.7rem; margin-top:1rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.prod-card{
  text-align:left; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:.85rem; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
  display:flex; flex-direction:column; gap:.25rem;
}
.prod-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-500); }
.prod-card .nm{ font-weight:600; font-size:.9rem; line-height:1.3; min-height:2.4em; }
.prod-card .pr{ color:var(--primary-700); font-weight:700; font-family:var(--font-display); font-size:1.1rem; }
.prod-card .st{ font-size:.72rem; color:var(--muted); }
.prod-card .st.low{ color:var(--warning); font-weight:600; }

.cart{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: var(--shadow-md); position:sticky; top:80px;
  display:flex; flex-direction:column; max-height: calc(100vh - 100px);
}
.cart-header{ padding:1rem; border-bottom:1px solid var(--border); }
.cart-items{ flex:1; overflow-y:auto; padding:.5rem 1rem; min-height:120px; }
.cart-item{
  display:flex; justify-content:space-between; gap:.5rem;
  padding:.6rem 0; border-bottom:1px solid var(--border);
}
.cart-item:last-child{ border-bottom:none; }
.cart-item .nm{ font-weight:600; font-size:.88rem; margin-bottom:.25rem; }
.cart-item .sub{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--muted); }
.qty-ctrl{ display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
.qty-ctrl button{
  background:#fff; border:none; width:24px; height:24px; cursor:pointer;
  font-weight:700; color:var(--text);
}
.qty-ctrl button:hover{ background:var(--bg); }
.qty-ctrl .v{ display:inline-block; min-width:28px; text-align:center; font-weight:600; font-size:.8rem; }
.cart-totals{ padding:.75rem 1rem; border-top:1px solid var(--border); display:grid; gap:.3rem; }
.cart-totals .row{ display:flex; justify-content:space-between; font-size:.85rem; }
.cart-totals .total{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--primary-700); }
.cart-cta{ padding:1rem; display:grid; gap:.5rem; border-top:1px solid var(--border); background:var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; z-index:50; animation: fadeIn .15s ease;
}
.modal{
  background:#fff; border-radius:var(--radius); width:100%; max-width:560px;
  max-height: calc(100vh - 2rem); overflow:hidden; display:flex; flex-direction:column;
  box-shadow: var(--shadow-lg); animation: slideUp .2s ease;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:1.05rem; font-weight:600; }
.modal-body{ padding:1.25rem; overflow-y:auto; }
.modal-foot{ padding: .85rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; background:var(--surface-2); }

/* ============ TOAST ============ */
.toast-host{ position:fixed; bottom:1.5rem; left:50%; transform: translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.toast{
  padding:.7rem 1.1rem; border-radius:10px;
  background:#0f172a; color:#fff; font-size:.85rem; font-weight:500;
  box-shadow: var(--shadow-lg); animation: toastIn .2s ease;
  max-width: 90vw;
}
.toast.success{ background: var(--primary-700); }
.toast.error{ background: var(--danger); }

/* ============ ANIMATIONS ============ */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{ opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
@keyframes toastIn { from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.fade-in{ animation: slideUp .25s ease; }
/* ============ NOTIFICACIONES ============ */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes ring {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

@keyframes notificacionFlash {
  0%, 100% { background: var(--danger); }
  50% { background: #ff6b6b; }
}

.notificacion-activa {
  animation: notificacionFlash 0.5s ease-in-out 3;
}
/* ============ NOTIFICACIONES ============ */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes ring {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

@keyframes notificacionFlash {
  0%, 100% { background: var(--danger); }
  50% { background: #ff6b6b; }
}

.notificacion-activa {
  animation: notificacionFlash 0.5s ease-in-out 3;
}

/* ============ LOGO EN SIDEBAR ============ */
.sidebar .brand img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
}