/* ============================================================
   ControlPro v3.0 — styles.css
   Mobile-first · PWA · Fintech profesional
   ============================================================ */

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

/* ══ Variables ══════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:        #080f1e;
  --bg2:       #0d1730;
  --surface:   #111f38;
  --surface2:  #162544;
  --card:      #13213d;
  --card2:     #182a4a;

  /* Borders */
  --line:      rgba(255,255,255,0.07);
  --line2:     rgba(255,255,255,0.14);

  /* Text */
  --text:      #eef2ff;
  --text2:     #8b9dc3;
  --text3:     #4d6490;

  /* Brand */
  --teal:      #00d4aa;
  --teal-d:    #00a882;
  --teal-g:    rgba(0,212,170,0.12);
  --teal-g2:   rgba(0,212,170,0.06);

  /* Semantic */
  --green:     #22c55e;
  --green-s:   rgba(34,197,94,0.13);
  --green-t:   #16a34a;
  --red:       #f43f5e;
  --red-s:     rgba(244,63,94,0.13);
  --amber:     #f59e0b;
  --amber-s:   rgba(245,158,11,0.13);
  --blue:      #3b82f6;
  --blue-s:    rgba(59,130,246,0.13);

  /* Radii */
  --r:    10px;
  --rl:   16px;
  --rxl:  22px;

  /* Typography */
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Shadows */
  --shadow:    0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.65);
  --glow:      0 0 28px rgba(0,212,170,.22);

  /* Touch targets */
  --tap: 48px;
}

/* ══ Reset ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  height: 100%;
  /* Prevent iOS font size bumping */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* Prevent text selection on buttons for app-like feel */
button { -webkit-tap-highlight-color: transparent; user-select: none; }

/* ══ Scrollbar ══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

/* ══ Screens ════════════════════════════════════════════════ */
.screen        { display: none; }
.screen.active { display: block; }
.flex-screen        { display: none !important; }
.flex-screen.active { display: flex !important; }

/* ══════════════════════════════════════════════════════════
   ONBOARDING
══════════════════════════════════════════════════════════ */
#s-onboarding {
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem 2.5rem;
  background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0,212,170,.14) 0%, transparent 55%), var(--bg);
  overflow-y: auto;
}

.ob-logo { text-align: center; margin-bottom: 2rem; }
.ob-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: var(--glow);
}
.ob-icon svg { width: 40px; height: 40px; fill: var(--bg); }
.ob-brand    { font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
.ob-brand span { color: var(--teal); }
.ob-tagline  { font-size: 14px; color: var(--text2); margin-top: 4px; }

.ob-steps { width: 100%; max-width: 420px; margin-bottom: 2rem; }
.ob-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rl);
  animation: fadeUp .4s ease both;
}
.ob-step:nth-child(1) { animation-delay: .05s; }
.ob-step:nth-child(2) { animation-delay: .12s; }
.ob-step:nth-child(3) { animation-delay: .18s; }
.ob-step:nth-child(4) { animation-delay: .24s; }
.ob-step-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--teal-g);
  border: 1px solid rgba(0,212,170,.18);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ob-step-text h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ob-step-text p  { font-size: 12px; color: var(--text2); line-height: 1.5; }

.ob-form { width: 100%; max-width: 420px; }
.ob-form-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.ob-form-sub   { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 20px; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-btn {
  padding: 14px 8px; border-radius: var(--r);
  border: 1.5px solid var(--line2); background: var(--surface);
  color: var(--text2); cursor: pointer; text-align: center;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  min-height: var(--tap); transition: all .18s;
  /* Larger tap area */
  -webkit-tap-highlight-color: transparent;
}
.profile-btn .prof-ico { font-size: 22px; display: block; margin-bottom: 4px; }
.profile-btn.selected {
  border-color: var(--teal); background: var(--teal-g);
  color: var(--teal); box-shadow: 0 0 0 1px var(--teal);
}

/* ══════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════ */
#s-login {
  flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 2rem 1.25rem;
  background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0,212,170,.12) 0%, transparent 55%), var(--bg);
}
.login-box { width: 100%; max-width: 380px; }

.login-brand { text-align: center; margin-bottom: 2rem; }
.brand-mark {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow);
}
.brand-mark svg { width: 32px; height: 32px; fill: var(--bg); }
.login-brand h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.login-brand h1 span { color: var(--teal); }
.login-brand p  { font-size: 13px; color: var(--text2); margin-top: 4px; }

.login-card {
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--rxl); padding: 24px 20px;
  box-shadow: var(--shadow-lg);
}
.login-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.login-card p  { font-size: 13px; color: var(--text2); margin-bottom: 22px; }

.admin-link { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text3); }
.admin-link a { color: var(--teal); text-decoration: none; font-weight: 600; }
.admin-link a:active { opacity: .7; }

/* ══════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════ */
#s-admin { min-height: 100dvh; background: var(--bg); }

.admin-top {
  background: var(--bg2); border-bottom: 1px solid var(--line);
  padding: 0 16px; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.admin-brand { display: flex; align-items: center; gap: 10px; }
.admin-brand .bmark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-brand .bmark svg { width: 18px; height: 18px; fill: var(--bg); }
.admin-brand h2 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.admin-brand h2 span { color: var(--teal); }

.admin-body { padding: 16px; max-width: 960px; margin: 0 auto; }

.admin-hero {
  padding: 22px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--surface), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--rxl);
  position: relative; overflow: hidden;
}
.admin-hero::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,.1) 0%, transparent 70%);
  pointer-events: none;
}
.admin-hero h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.admin-hero p  { font-size: 13px; color: var(--text2); }
.admin-hero-stats { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.hero-stat-val { font-size: 22px; font-weight: 700; font-family: var(--mono); color: var(--teal); }
.hero-stat-lbl { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

.section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.section-hdr h3 { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }

.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.biz-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 16px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  /* Tap feedback */
  -webkit-tap-highlight-color: transparent;
}
.biz-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line2); }
.biz-card:active { transform: scale(.98); }
.biz-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--rl) var(--rl) 0 0;
}
.biz-card.c0::after { background: var(--teal); }
.biz-card.c1::after { background: var(--blue); }
.biz-card.c2::after { background: var(--red); }
.biz-card.c3::after { background: var(--amber); }
.biz-card.c4::after { background: #a78bfa; }
.biz-card.c5::after { background: #38bdf8; }
.biz-card.c6::after { background: #fb923c; }
.biz-card.c7::after { background: var(--green); }

.biz-del {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.biz-del:hover  { background: var(--red-s); color: var(--red); }
.biz-del:active { transform: scale(.9); }

.biz-emoji { font-size: 24px; margin-bottom: 8px; }
.biz-name  { font-size: 15px; font-weight: 600; margin-bottom: 2px; padding-right: 28px; }
.biz-meta  { font-size: 11px; color: var(--text3); margin-bottom: 12px; }
.biz-meta code {
  font-family: var(--mono); background: var(--bg2);
  padding: 1px 5px; border-radius: 4px; color: var(--teal); font-size: 10px;
}
.biz-stats { display: flex; border-top: 1px solid var(--line); padding-top: 10px; }
.biz-stat  { flex: 1; text-align: center; }
.biz-stat + .biz-stat { border-left: 1px solid var(--line); }
.biz-stat-val { font-size: 12px; font-weight: 600; font-family: var(--mono); }
.biz-stat-val.g { color: var(--green); }
.biz-stat-val.r { color: var(--red); }
.biz-stat-val.t { color: var(--teal); }
.biz-stat-lbl { font-size: 10px; color: var(--text3); margin-top: 1px; text-transform: uppercase; letter-spacing: .3px; }

.add-card {
  border: 1.5px dashed var(--line2); background: transparent;
  border-radius: var(--rl); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; min-height: 140px;
  transition: border-color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.add-card:hover  { border-color: var(--teal); background: var(--teal-g2); }
.add-card:active { transform: scale(.98); }
.add-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text3); transition: all .18s;
}
.add-card:hover .add-card-icon { background: var(--teal-g); color: var(--teal); border-color: rgba(0,212,170,.3); }
.add-card span { font-size: 13px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════
   APP — PANTALLA NEGOCIO
══════════════════════════════════════════════════════════ */
#s-app {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
}
#s-app.active { display: flex; }

/* Header */
.app-hdr {
  background: var(--bg2); border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  height: 56px; padding: 0 8px 0 0;
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
}
.hdr-back {
  width: var(--tap); height: 56px; flex-shrink: 0;
  border: none; background: none; cursor: pointer;
  color: var(--text2); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.hdr-back:active { color: var(--text); }
.hdr-accent { width: 3px; height: 26px; border-radius: 3px; margin-right: 10px; flex-shrink: 0; }
.hdr-info { flex: 1; min-width: 0; }
.hdr-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sub  { font-size: 11px; color: var(--text2); margin-top: 1px; }
.hdr-actions { display: flex; gap: 4px; }
.hdr-btn {
  width: 38px; height: 38px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--surface);
  color: var(--text2); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.hdr-btn:hover  { border-color: var(--teal); color: var(--teal); background: var(--teal-g); }
.hdr-btn:active { transform: scale(.92); }

/* App body — safe area para bottom nav */
.app-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(80px + env(safe-area-inset-bottom));
  max-width: 700px; margin: 0 auto; width: 100%;
}

/* Tabs contenido */
.tab-content { display: none; animation: fadeIn .2s ease; }
.tab-content.active { display: block; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg2); border-top: 1px solid var(--line);
  display: flex; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  /* Blur para efecto glass */
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.bnav-btn {
  flex: 1; min-height: var(--tap); padding: 8px 4px;
  border: none; background: none; color: var(--text3);
  cursor: pointer; font-family: var(--font);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.bnav-btn svg { width: 22px; height: 22px; transition: transform .18s; }
.bnav-btn.active { color: var(--teal); }
.bnav-btn.active svg { transform: scale(1.1); }
.bnav-btn:active { opacity: .7; }

.bnav-center-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; }
.bnav-center {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--bg); font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,212,170,.42);
  transition: transform .14s, box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-center:active { transform: scale(.9); box-shadow: 0 2px 8px rgba(0,212,170,.3); }

/* ══════════════════════════════════════════════════════════
   MÉTRICAS / BALANCE HERO
══════════════════════════════════════════════════════════ */
.balance-hero {
  background: linear-gradient(135deg, var(--surface), var(--card));
  border: 1px solid var(--line); border-radius: var(--rxl);
  padding: 20px 18px 16px; margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.balance-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,.08) 0%, transparent 70%);
  pointer-events: none;
}
.balance-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.balance-val   { font-size: 30px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; line-height: 1.1; }
.balance-val.g { color: var(--green); }
.balance-val.r { color: var(--red); }
.balance-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 500;
}
.chip-g { background: var(--green-s); color: var(--green); }
.chip-r { background: var(--red-s);   color: var(--red); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip-g .chip-dot { background: var(--green); }
.chip-r .chip-dot { background: var(--red); }
.chip-val { font-family: var(--mono); }

.insight-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r); margin-bottom: 12px;
  font-size: 13px; font-weight: 500; animation: fadeUp .3s ease;
}
.insight-banner.warn { background: var(--amber-s); color: var(--amber); border: 1px solid rgba(245,158,11,.18); }
.insight-banner.good { background: var(--green-s); color: var(--green); border: 1px solid rgba(34,197,94,.18); }
.insight-banner.info { background: var(--blue-s);  color: var(--blue);  border: 1px solid rgba(59,130,246,.18); }

.mtr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mtr {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 14px;
}
.mtr-lbl { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.mtr-val { font-size: 17px; font-weight: 700; font-family: var(--mono); }
.mtr-val.g { color: var(--green); }
.mtr-val.r { color: var(--red); }
.mtr-val.t { color: var(--teal); }

/* ══════════════════════════════════════════════════════════
   FORMULARIO — Mobile-first
══════════════════════════════════════════════════════════ */
.fcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rxl); padding: 18px; margin-bottom: 12px;
}
.fcard-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.fcard-sub   { font-size: 12px; color: var(--text3); margin-bottom: 16px; }

/* Tipo toggle — botones grandes y táctiles */
.type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.type-btn {
  min-height: 52px; border-radius: var(--r);
  border: 2px solid var(--line2); background: var(--surface);
  color: var(--text2); cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .18s; -webkit-tap-highlight-color: transparent;
}
.type-btn:active { transform: scale(.97); }
.type-btn.active-ing { border-color: var(--green); background: var(--green-s); color: var(--green); }
.type-btn.active-egr { border-color: var(--red);   background: var(--red-s);   color: var(--red); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }

/* Inputs — táctiles, height mínima 48px */
input[type=text],
input[type=number],
input[type=date],
input[type=password],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  font-size: 16px; /* 16px evita zoom en iOS */
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line2);
  border-radius: var(--r);
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(0,212,170,.13);
}
input::placeholder { color: var(--text3); }
select option { background: var(--card); color: var(--text); }

/* Forzar teclado numérico en monto */
input[inputmode="decimal"],
input[type="number"] {
  font-family: var(--mono);
  letter-spacing: .5px;
}

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ══════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 18px;
  border-radius: var(--r); border: 1.5px solid var(--line2);
  background: var(--surface); color: var(--text2);
  cursor: pointer; font-family: var(--font);
  font-size: 14px; font-weight: 600;
  transition: all .16s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { background: var(--card2); color: var(--text); border-color: var(--line2); }
.btn:active { transform: scale(.96); opacity: .88; }

.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  color: var(--bg); border-color: transparent;
  box-shadow: 0 4px 18px rgba(0,212,170,.3);
}
.btn-primary:hover  { box-shadow: 0 6px 24px rgba(0,212,170,.42); }
.btn-primary:active { transform: scale(.96); }

.btn-danger  { border-color: var(--red); color: var(--red); background: transparent; }
.btn-danger:hover { background: var(--red-s); }

.btn-ghost  { border-color: transparent; background: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--surface); }

.btn-sm   { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-full { width: 100%; }
.btn-row  { display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════
   LISTA / HISTORIAL — Mobile cards en lugar de tabla
══════════════════════════════════════════════════════════ */
.list-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rxl); overflow: hidden; margin-bottom: 12px;
}
.list-hdr {
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.list-hdr-title { font-size: 14px; font-weight: 600; }

/* Filtros compactos */
.filter-bar {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.filter-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Movimiento card (mobile-friendly) ── */
.mov-list { padding: 0 4px; }
.mov-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.mov-item:last-child { border-bottom: none; }
.mov-item:active { background: var(--surface); }

.mov-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
.mov-dot.g { background: var(--green); }
.mov-dot.r { background: var(--red); }

.mov-info { flex: 1; min-width: 0; }
.mov-desc { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

.mov-right { text-align: right; flex-shrink: 0; }
.mov-monto { font-size: 15px; font-weight: 700; font-family: var(--mono); }
.mov-monto.g { color: var(--green); }
.mov-monto.r { color: var(--red); }
.mov-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }

/* Edit row inline */
.mov-edit-panel {
  padding: 12px 14px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
  display: none;
}
.mov-edit-panel.open { display: block; animation: fadeUp .2s ease; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* Botones icon small */
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line2); background: transparent;
  cursor: pointer; color: var(--text3); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s; -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-g); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-s); }
.icon-btn:active { transform: scale(.88); }

/* Badge */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 100px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.badge-g { background: var(--green-s); color: var(--green); }
.badge-r { background: var(--red-s);   color: var(--red); }
.badge-y { background: var(--amber-s); color: var(--amber); }
.badge-warn { background: var(--red-s); color: var(--red); }

.empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--text3);
}
.empty-icon { font-size: 36px; margin-bottom: 10px; }
.empty p    { font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   RESUMEN
══════════════════════════════════════════════════════════ */
.chart-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rxl); padding: 16px; margin-bottom: 12px;
}
.chart-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.chart-card p  { font-size: 12px; color: var(--text3); margin-bottom: 14px; }
.chart-legend  { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text2); }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.period-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.period-tab {
  flex: 1; padding: 8px 4px; border-radius: 100px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line2); background: transparent;
  color: var(--text3); cursor: pointer; font-family: var(--font);
  transition: all .15s; -webkit-tap-highlight-color: transparent;
  min-height: 38px;
}
.period-tab.active { background: var(--teal-g); border-color: var(--teal); color: var(--teal); }
.period-tab:active { transform: scale(.96); }

.bar-item { margin-bottom: 12px; }
.bar-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.bar-head .cat { color: var(--text2); font-weight: 500; }
.bar-head .val { color: var(--text); font-family: var(--mono); font-size: 12px; }
.bar-track { background: var(--surface); border-radius: 4px; height: 8px; overflow: hidden; }
.bar-fill  { height: 8px; border-radius: 4px; transition: width .6s cubic-bezier(.34,1.2,.64,1); }
.bar-pct   { font-size: 10px; color: var(--text3); text-align: right; margin-top: 2px; }

.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ══════════════════════════════════════════════════════════
   CONFIGURACIÓN / SETTINGS
══════════════════════════════════════════════════════════ */
.settings-section { margin-bottom: 20px; }
.settings-section h3 {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 0 4px; margin-bottom: 8px;
}
.settings-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); gap: 12px;
  min-height: var(--tap);
}
.setting-row:last-child { border-bottom: none; }
.setting-row.clickable { cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.setting-row.clickable:hover  { background: var(--surface); }
.setting-row.clickable:active { background: var(--surface2); }
.setting-info { flex: 1; }
.setting-name { font-size: 14px; font-weight: 500; }
.setting-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
.setting-action { flex-shrink: 0; color: var(--text3); font-size: 16px; }

/* About hero */
.about-hero {
  text-align: center; padding: 28px 16px;
  background: linear-gradient(135deg, var(--surface), var(--card));
  border: 1px solid var(--line); border-radius: var(--rxl); margin-bottom: 14px;
}
.about-logo {
  width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; box-shadow: var(--glow);
}
.about-logo svg { width: 34px; height: 34px; fill: var(--bg); }
.about-hero h2  { font-size: 22px; font-weight: 700; }
.about-hero h2 span { color: var(--teal); }
.about-version { font-size: 12px; color: var(--text3); margin-top: 4px; }
.about-desc { font-size: 14px; color: var(--text2); line-height: 1.6; margin-top: 12px; }

.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.feature-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 14px; text-align: center;
}
.feature-card .feat-ico { font-size: 22px; margin-bottom: 6px; }
.feature-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.feature-card p  { font-size: 11px; color: var(--text3); line-height: 1.4; }

.contact-card {
  background: linear-gradient(135deg, rgba(0,212,170,.09), rgba(0,212,170,.04));
  border: 1px solid rgba(0,212,170,.2); border-radius: var(--rl);
  padding: 20px; text-align: center; margin-bottom: 14px;
}
.contact-card h3 { font-size: 16px; font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.contact-card p  { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
.wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r);
  background: #25D366; color: white; font-weight: 700; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--font); transition: opacity .15s;
  box-shadow: 0 4px 16px rgba(37,211,102,.3);
  -webkit-tap-highlight-color: transparent;
}
.wa-btn:hover  { opacity: .92; }
.wa-btn:active { transform: scale(.97); }
.wa-btn svg    { width: 18px; height: 18px; fill: white; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
══════════════════════════════════════════════════════════ */
.wa-fab {
  position: fixed;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom) + 10px);
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,211,102,.5);
  text-decoration: none; z-index: 49;
  transition: transform .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  animation: scaleIn .4s ease .5s both;
}
.wa-fab:hover  { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.6); }
.wa-fab:active { transform: scale(.93); }
.wa-fab svg    { width: 28px; height: 28px; fill: white; }
/* Tooltip */
.wa-fab::before {
  content: 'Contactar';
  position: absolute; right: 58px;
  background: rgba(0,0,0,.75); color: white;
  font-size: 11px; font-weight: 600; font-family: var(--font);
  padding: 4px 10px; border-radius: 20px;
  white-space: nowrap; opacity: 0;
  transition: opacity .18s; pointer-events: none;
}
.wa-fab:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.72);
  display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open       { display: flex; animation: fadeIn .18s ease; }
.modal-overlay.center     { align-items: center; padding: 16px; }

.modal {
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--rxl) var(--rxl) 0 0;
  padding: 20px; width: 100%; max-width: 480px;
  max-height: 90dvh; overflow-y: auto;
  animation: slideUp .22s ease;
}
.modal-overlay.center .modal {
  border-radius: var(--rxl);
  animation: scaleIn .2s ease;
}
.modal-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line2); margin: -6px auto 14px;
}
.modal-title  { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.modal-sub    { font-size: 13px; color: var(--text2); margin-bottom: 18px; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }

/* Color picker */
.color-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .14s, border-color .14s;
  -webkit-tap-highlight-color: transparent;
}
.color-swatch.sel { border-color: white; transform: scale(1.18); box-shadow: 0 0 0 2px var(--bg); }

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom) + 8px);
  left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--card2); border: 1px solid var(--line2);
  color: var(--text); padding: 11px 20px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  white-space: nowrap; z-index: 200;
  box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(34,197,94,.35); }
.toast.error   { border-color: rgba(244,63,94,.35); }

/* ══════════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════════ */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fade-in  { animation: fadeIn  .25s ease both; }
.slide-up { animation: fadeUp  .3s  ease both; }

/* Stagger children */
.stagger > * { opacity: 0; animation: fadeUp .35s ease both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .09s; }
.stagger > *:nth-child(3) { animation-delay: .14s; }
.stagger > *:nth-child(4) { animation-delay: .19s; }
.stagger > *:nth-child(5) { animation-delay: .24s; }
.stagger > *:nth-child(6) { animation-delay: .29s; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .frow      { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: 1fr; }
  .res-grid  { grid-template-columns: 1fr; }
  .mtr-val   { font-size: 15px; }
  .balance-val { font-size: 26px; }
  .type-btn  { font-size: 14px; }
}

@media (min-width: 600px) {
  .modal-overlay        { align-items: center; padding: 20px; }
  .modal                { border-radius: var(--rxl); }
  .app-body             { padding-bottom: calc(80px + 20px); }
}

@media (min-width: 768px) {
  .biz-grid  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .frow      { grid-template-columns: 1fr 1fr; }
  .res-grid  { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ERP MODULES — Inventario, Ventas, Proveedores
══════════════════════════════════════════════════════════ */

/* ── Bottom nav extendida (más tabs) ── */
.bnav-btn { font-size: 9px; }
.bnav-btn svg { width: 20px; height: 20px; }

/* ── Tarjetas de productos ── */
.prod-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 14px; margin-bottom: 10px;
  transition: border-color .18s;
}
.prod-card.bajo-stock { border-color: rgba(244,63,94,.35); }
.prod-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.prod-nombre { font-size: 15px; font-weight: 600; }
.prod-cat    { font-size: 11px; color: var(--text3); margin-top: 2px; }
.prod-actions { display: flex; gap: 4px; flex-shrink: 0; }
.prod-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.prod-stat   { text-align: center; background: var(--surface); border-radius: var(--r); padding: 8px 4px; }
.prod-stat-val { font-size: 12px; font-weight: 700; font-family: var(--mono); }
.prod-stat-val.g { color: var(--green); }
.prod-stat-val.r { color: var(--red); }
.prod-stat-val.t { color: var(--teal); }
.prod-stat-lbl { font-size: 9px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }

/* ── Métricas ERP (3 columnas) ── */
.mtr-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }

/* ── Filtros inventario ── */
.inv-filtros { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.inv-filtros input, .inv-filtros select { flex: 1; min-width: 120px; }

/* ── Carrito de ventas ── */
.carrito-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rxl); padding: 16px; margin-bottom: 12px;
}
.carrito-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.carrito-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line); gap: 8px;
}
.carrito-item:last-child { border-bottom: none; }
.carrito-info { flex: 1; min-width: 0; }
.carrito-nombre { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrito-meta   { font-size: 11px; color: var(--text3); margin-top: 1px; }
.carrito-right  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.carrito-subtotal { font-size: 14px; font-weight: 700; font-family: var(--mono); color: var(--green); }

.carrito-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px;
  flex-wrap: wrap; gap: 8px;
}
.carrito-total-lbl { font-size: 13px; color: var(--text2); }
.carrito-total-val { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--teal); }

.precio-preview {
  font-size: 12px; color: var(--teal); margin-top: 4px;
  min-height: 16px; font-style: italic;
}

/* ── Ventas historial ── */
.venta-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 12px 14px; margin-bottom: 8px;
}
.venta-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.venta-fecha  { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.venta-items  { font-size: 11px; color: var(--text3); }
.venta-right  { text-align: right; flex-shrink: 0; }
.venta-total  { font-size: 15px; font-weight: 700; font-family: var(--mono); color: var(--green); }
.venta-metodo { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── Proveedores ── */
.prov-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 14px; margin-bottom: 10px;
}
.prov-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prov-nombre { font-size: 15px; font-weight: 600; }
.prov-meta   { font-size: 12px; color: var(--text3); margin-top: 3px; }
.prov-prods  { font-size: 11px; color: var(--teal); margin-top: 4px; }

/* ── Sección header con botón ── */
.mod-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px; flex-wrap: wrap;
}
.mod-header h3 { font-size: 15px; font-weight: 600; }

/* ── Divider ── */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.section-title {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}

/* ── Botones agregar al carrito ── */
.add-carrito-row { display: grid; grid-template-columns: 1fr 80px auto; gap: 8px; margin-bottom: 8px; align-items: end; position: relative; overflow: visible; }

/* ── Stock badge ── */
.stock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 100px; font-size: 10px; font-weight: 700;
}
.stock-ok   { background: var(--green-s); color: var(--green); }
.stock-bajo { background: var(--red-s); color: var(--red); }

/* ── Responsive ERP ── */
@media (max-width: 400px) {
  .prod-grid { grid-template-columns: repeat(2,1fr); }
  .mtr-grid-3 { grid-template-columns: 1fr 1fr; }
  .add-carrito-row { grid-template-columns: 1fr 70px auto; }
}

/* ══════════════════════════════════════════════════════════
   AUTH — Pantalla de licencia y activación
   © Todos los derechos reservados - Víctor Medrano Arce
══════════════════════════════════════════════════════════ */

/* ── Pantalla de autenticación ── */
#s-auth {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0,212,170,.16) 0%, transparent 55%),
    var(--bg);
}
.auth-box { width: 100%; max-width: 400px; }

.auth-brand { text-align: center; margin-bottom: 2rem; }
.auth-brand-mark {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow);
  animation: scaleIn .4s ease both;
}
.auth-brand-mark svg { width: 36px; height: 36px; fill: var(--bg); }
.auth-brand h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.auth-brand h1 span { color: var(--teal); }
.auth-brand p  { font-size: 13px; color: var(--text2); margin-top: 4px; }

.auth-card {
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--rxl); padding: 26px 22px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .35s ease .1s both;
}
#auth-title    { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
#auth-subtitle { font-size: 13px; color: var(--text2); margin-bottom: 20px; }

.auth-msg {
  padding: 11px 14px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  margin-bottom: 14px; display: none;
}
.auth-msg.error   { background: var(--red-s);   color: var(--red);   border: 1px solid rgba(244,63,94,.25); }
.auth-msg.success { background: var(--green-s); color: var(--green); border: 1px solid rgba(34,197,94,.25); }

.auth-install { text-align: center; margin-top: 14px; }
.auth-install-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.auth-install-id {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--teal); letter-spacing: 2px;
  background: var(--teal-g); padding: 8px 16px; border-radius: 8px;
  border: 1px solid rgba(0,212,170,.2); display: inline-block;
}

.auth-expiry-info { display: none; margin-bottom: 14px; }
.auth-expiry-info p { font-size: 12px; color: var(--text3); text-align: center; line-height: 1.5; }

.auth-wa-btn {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; border-radius: var(--r);
  background: #25D366; color: white; font-weight: 700; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--font); margin-top: 10px;
  box-shadow: 0 4px 16px rgba(37,211,102,.3);
  -webkit-tap-highlight-color: transparent;
}
.auth-wa-btn svg { width: 18px; height: 18px; fill: white; }
.auth-wa-btn:active { opacity: .88; }

/* Animación shake para contraseña incorrecta */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.shake { animation: shake .45s ease; }

/* ── Pantalla SETUP — primera configuración ── */
#s-setup {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0,212,170,.12) 0%, transparent 55%), var(--bg);
}
.setup-box { width: 100%; max-width: 420px; }
.setup-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.setup-sub   { font-size: 14px; color: var(--text2); text-align: center; margin-bottom: 24px; }

.setup-perfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.setup-perfil-btn {
  padding: 14px 8px; border-radius: var(--r);
  border: 1.5px solid var(--line2); background: var(--surface);
  color: var(--text2); cursor: pointer; text-align: center;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  min-height: var(--tap); transition: all .18s;
  -webkit-tap-highlight-color: transparent;
}
.setup-perfil-btn .prof-ico { font-size: 22px; display: block; margin-bottom: 4px; }
.setup-perfil-btn.selected {
  border-color: var(--teal); background: var(--teal-g);
  color: var(--teal); box-shadow: 0 0 0 1px var(--teal);
}

/* ── Licencia info en config ── */
.lic-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rl); padding: 14px 16px; margin-bottom: 12px;
}
.lic-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.lic-row:last-child { border-bottom: none; }
.lic-row .lbl { color: var(--text3); font-size: 12px; }
.lic-row .val { font-weight: 500; font-family: var(--mono); font-size: 13px; }
.lic-id-display {
  font-family: var(--mono); color: var(--teal); font-size: 14px;
  letter-spacing: 1px; font-weight: 600;
}

/* ── Footer de derechos de autor ── */
.app-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  line-height: 1.6;
}
.app-footer a {
  color: var(--teal); text-decoration: none;
}

/* ── Password input con toggle ── */
.pass-wrap {
  position: relative; display: flex; align-items: center;
}
.pass-wrap input { padding-right: 48px; }
.pass-toggle {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 44px; border: none; background: none; cursor: pointer;
  color: var(--text3); font-size: 16px; display: flex;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pass-toggle:hover { color: var(--text); }

/* ── Responsive fix para auth en mobile ── */
@media (max-width: 380px) {
  .auth-brand h1 { font-size: 24px; }
  .auth-card { padding: 20px 16px; }
  .auth-install-id { font-size: 14px; letter-spacing: 1px; }
}

/* ══════════════════════════════════════════════════════════
   v6 — Imágenes de productos y proveedores
   © Todos los derechos reservados - Víctor Medrano Arce
══════════════════════════════════════════════════════════ */

/* ── Miniaturas en tarjetas ── */
.prod-thumb, .prov-thumb {
  width: 52px; height: 52px; border-radius: var(--r);
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--line2);
}
.prod-thumb-ph, .prov-thumb-ph {
  width: 52px; height: 52px; border-radius: var(--r);
  background: var(--surface2); border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--teal);
  flex-shrink: 0; text-transform: uppercase;
}

/* ── Layout de tarjeta producto ── */
.prod-card { padding: 14px; }
.prod-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.prod-info  { flex: 1; min-width: 0; }
.prod-nombre { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-cat    { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── Layout proveedor ── */
.prov-card { padding: 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); }
.prov-header { display: flex; align-items: center; gap: 12px; }
.prov-info   { flex: 1; min-width: 0; }
.prov-nombre { font-size: 15px; font-weight: 600; }
.prov-meta   { font-size: 12px; color: var(--text3); margin-top: 3px; }
.prov-prods  { font-size: 11px; color: var(--teal); margin-top: 4px; }

/* ── Uploader de imagen ── */
.img-upload-wrap { margin-bottom: 12px; }
.img-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r);
  border: 1.5px dashed var(--line2); background: var(--surface);
  color: var(--text2); cursor: pointer; font-size: 14px; font-weight: 500;
  font-family: var(--font); transition: all .18s; width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.img-upload-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-g); }
.img-upload-btn:active { transform: scale(.97); }
.img-preview-wrap { margin-top: 8px; }
.img-preview-wrap img {
  width: 80px; height: 80px; border-radius: var(--r);
  object-fit: cover; border: 1px solid var(--line2); display: none;
}

/* ── Error fallback global ── */
#err-fallback { font-family: var(--font, sans-serif); }

/* ── Prod/Prov thumb en lista responsive ── */
@media (max-width: 360px) {
  .prod-thumb, .prov-thumb, .prod-thumb-ph, .prov-thumb-ph {
    width: 40px; height: 40px; font-size: 17px;
  }
}

/* ══ ControlPro v7 — Nuevos estilos ════════════════════════ */

/* Tarjetas de usuario */
.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  gap: 10px;
}
.user-card.inactivo { opacity: 0.5; }
.user-info { flex: 1; min-width: 0; }
.user-nombre { font-weight: 600; font-size: 14px; color: var(--text); display:flex; align-items:center; gap:6px; }
.user-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
.user-status { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Badges de vencimiento */
.venc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  vertical-align: middle;
}
.venc-badge.vencido { background: var(--red-s); color: var(--red); }
.venc-badge.por-vencer { background: var(--amber-s); color: var(--amber); }

/* Producto vencido */
.prod-card.prod-vencido {
  border-color: rgba(244,63,94,0.3);
  background: linear-gradient(135deg, var(--card), rgba(244,63,94,0.05));
}

/* Checkbox en modal */
input[type="checkbox"] {
  accent-color: var(--teal);
}

/* Rol badge en prod-actions */
.badge-rol {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--teal-g);
  color: var(--teal);
  font-weight: 600;
}

/* ══ ControlPro v8 — Código de barras ══════════════════════ */

/* Scanner video wrapper */
#scanner-video-wrap video {
  display: block;
  width: 100%;
  border-radius: 12px;
}

/* Barcode preview in product modal */
#prod-barcode-preview {
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
}

/* Inventory scan button layout */
.mod-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mod-header h3 { flex: 1; }

/* Manual input in scanner */
#scanner-manual-input {
  font-family: var(--mono);
  letter-spacing: 0.05em;
}

/* Barcode teal icon in prod-cat */
.prod-cat span[title="Ver código"] {
  font-size: 14px;
  vertical-align: middle;
  transition: transform 0.15s;
}
.prod-cat span[title="Ver código"]:hover {
  transform: scale(1.2);
}

/* ══════════════════════════════════════════════════════════
   MODO CLARO — light-mode
   ══════════════════════════════════════════════════════════ */
body.light-mode {
  --bg:        #f0f4f8;
  --bg2:       #e2eaf4;
  --surface:   #ffffff;
  --surface2:  #f5f8ff;
  --card:      #ffffff;
  --card2:     #f0f5ff;

  --line:      rgba(0,0,0,0.08);
  --line2:     rgba(0,0,0,0.14);

  --text:      #0f172a;
  --text2:     #475569;
  --text3:     #94a3b8;

  --teal:      #00a882;
  --teal-d:    #007a60;
  --teal-g:    rgba(0,168,130,0.12);
  --teal-g2:   rgba(0,168,130,0.06);

  --green:     #16a34a;
  --green-s:   rgba(22,163,74,0.12);
  --red:       #dc2626;
  --red-s:     rgba(220,38,38,0.10);
  --amber:     #d97706;
  --amber-s:   rgba(217,119,6,0.12);
  --blue:      #2563eb;
  --blue-s:    rgba(37,99,235,0.12);

  --shadow:    0 2px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 6px 32px rgba(0,0,0,0.14);
  --glow:      0 0 20px rgba(0,168,130,0.15);
}

/* Ajustes específicos modo claro */
body.light-mode .screen       { background: var(--bg); }
body.light-mode .auth-card    { box-shadow: 0 4px 32px rgba(0,0,0,0.10); }
body.light-mode .modal        { box-shadow: 0 8px 40px rgba(0,0,0,0.18); }
body.light-mode input,
body.light-mode select,
body.light-mode textarea      { border-color: var(--line2); }
body.light-mode input:focus,
body.light-mode select:focus  { border-color: var(--teal-d); }
body.light-mode .nav-bar      { border-top: 1px solid var(--line2); background: rgba(255,255,255,0.95); }
body.light-mode .hdr          { background: rgba(240,244,248,0.97); border-bottom: 1px solid var(--line2); }
body.light-mode .prod-card    { border-color: var(--line2); }
body.light-mode .venta-card   { border-color: var(--line2); }
body.light-mode .lic-item     { border-color: var(--line2); }
body.light-mode .insight-banner { border-color: var(--line2); }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* Botón del tema en header */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
  border-radius: 8px;
  transition: background .15s;
  line-height: 1;
}
.theme-toggle-btn:hover { background: var(--teal-g); }

/* Transición suave al cambiar tema */
body { transition: background .25s, color .25s; }

/* ══════════════════════════════════════════════════════════
   ControlPro v12 — RESPONSIVE MOBILE COMPLETO
   Móvil primero, sin romper PC
   ══════════════════════════════════════════════════════════ */

/* ── Mejoras base globales (todos los tamaños) ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

input, select, textarea, button {
  min-height: 44px;
  font-size: 16px !important; /* evita zoom en iOS */
  touch-action: manipulation;
}
select { font-size: 15px !important; }
label  { font-size: 13px; }

/* Scrollbar thin en móvil */
* { scrollbar-width: thin; }

/* ── Contenedor principal más seguro ── */
.app-body {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* ── Modal a pantalla completa en móvil ── */
@media (max-width: 599px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding: 20px 16px 32px !important;
  }
  /* Modal factura ocupa pantalla completa */
  #modal-factura .modal {
    border-radius: 0 !important;
    max-height: 100vh;
  }
  /* Modal scanner */
  #modal-scanner .modal {
    max-height: 95vh;
  }
}

/* ── Header en móvil más compacto ── */
@media (max-width: 599px) {
  .hdr { padding: 8px 12px; min-height: 52px; }
  .hdr-name { font-size: 15px; }
  .hdr-sub  { display: none; } /* ocultar subtítulo en pantallas pequeñas */
  #hdr-user { display: none; } /* ocultar en móvil, ya está en config */
  .hdr-btn  { padding: 6px; font-size: 16px; min-height: 36px; width: 36px; }
  .theme-toggle-btn { padding: 4px; }
}

/* ── Nav bar más grande y visible en móvil ── */
@media (max-width: 599px) {
  .nav-bar, .bnav { height: 62px !important; }
  .bnav-btn { font-size: 9px !important; padding: 4px 2px !important; min-width: 0; }
  .bnav-btn svg { width: 22px !important; height: 22px !important; }
  .app-body { padding-bottom: 72px !important; }
}

/* ── Tabs de contenido (ventas, inventario, etc.) ── */
@media (max-width: 599px) {
  .tab-content { padding: 12px !important; }
  .fcard { padding: 14px 12px !important; }
  .fcard-title { font-size: 14px !important; }
}

/* ── Grid de métricas: 2 columnas en móvil ── */
@media (max-width: 480px) {
  .mtr-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .mtr-grid-3   { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .mtr          { padding: 10px 8px !important; }
  .mtr-val      { font-size: 14px !important; }
  .mtr-lbl      { font-size: 10px !important; }
}

/* ── frow: siempre columna en móvil pequeño ── */
@media (max-width: 480px) {
  .frow { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* ── Accesos rápidos dashboard: 4 columnas en móvil ── */
@media (max-width: 399px) {
  /* Si no caben 4, hacer 2x2 */
  .accesos-rapidos { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Tarjetas de producto más compactas en móvil ── */
@media (max-width: 599px) {
  .prod-card { padding: 10px 12px !important; margin-bottom: 8px !important; }
  .prod-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  .prod-stat { padding: 6px 2px !important; }
  .prod-stat-val { font-size: 11px !important; }
  .prod-stat-lbl { font-size: 8px !important; }
  .prod-thumb, .prov-thumb,
  .prod-thumb-ph, .prov-thumb-ph { width: 42px !important; height: 42px !important; font-size: 18px !important; }
  .prod-nombre { font-size: 14px !important; }
}

/* ── Ventas: carrito más cómodo ── */
@media (max-width: 599px) {
  .carrito-wrap { padding: 12px !important; }
  .carrito-item { padding: 10px 0 !important; font-size: 13px !important; }
  .carrito-info { gap: 2px !important; }
  .carrito-nombre { font-size: 13px !important; }
}

/* ── Inventario: filtros en columna en móvil ── */
@media (max-width: 480px) {
  .inv-filtros { flex-direction: column !important; gap: 6px !important; }
  .inv-filtros input,
  .inv-filtros select { min-width: unset !important; width: 100% !important; }
  /* Botón escanear junto a búsqueda */
  .mod-header { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ── Historial de ventas/compras más legible en móvil ── */
@media (max-width: 599px) {
  .venta-card   { padding: 10px 12px !important; }
  .venta-fecha  { font-size: 11px !important; }
  .venta-items  { font-size: 11px !important; }
  .venta-total  { font-size: 14px !important; }
  .venta-metodo { font-size: 10px !important; }
  .venta-header { gap: 6px !important; }
}

/* ── Botones: siempre mínimo 44px de alto ── */
.btn         { min-height: 44px; }
.btn-sm      { min-height: 36px !important; font-size: 12px !important; }
.icon-btn    { min-height: 36px; min-width: 36px; }

/* ── Proveedores: cards full width en móvil ── */
@media (max-width: 599px) {
  .prov-card { padding: 10px 12px !important; }
  .prov-nombre { font-size: 14px !important; }
  .prov-meta   { font-size: 11px !important; }
}

/* ── Finanzas: historial movimientos ── */
@media (max-width: 599px) {
  .mov-item    { padding: 10px 0 !important; }
  .mov-desc    { font-size: 13px !important; }
  .mov-meta    { font-size: 10px !important; }
  .mov-monto   { font-size: 13px !important; }
}

/* ── Tabla de factura responsive ── */
@media (max-width: 480px) {
  #factura-contenido { padding: 14px !important; }
  #factura-contenido table { font-size: 11px !important; }
  #factura-contenido th,
  #factura-contenido td { padding: 5px 4px !important; }
  .no-print { flex-wrap: wrap !important; gap: 6px !important; }
  .no-print .btn { flex: 1 1 calc(50% - 6px) !important; font-size: 12px !important; min-height: 40px !important; }
}

/* ── Configuración: setting rows más grandes ── */
@media (max-width: 599px) {
  .setting-row { padding: 14px 0 !important; }
  .setting-name { font-size: 14px !important; }
  .setting-desc { font-size: 11px !important; }
  .settings-section h3 { font-size: 14px !important; }
}

/* ── Auth screen: clave textarea más grande ── */
@media (max-width: 599px) {
  .auth-card { padding: 20px 16px 28px !important; }
  #auth-lickey { font-size: 13px !important; min-height: 80px !important; }
  .auth-install-id { font-size: 11px !important; letter-spacing: 1px !important; }
}

/* ── Dashboard ranking barras ── */
@media (max-width: 480px) {
  #dash-ranking-prods { font-size: 12px; }
}

/* ── Inputs en modales: full width siempre ── */
.modal input,
.modal select,
.modal textarea { width: 100% !important; }

/* ── Scroll suave en listas ── */
.mov-list,
#ventas-historial,
#compras-historial,
#prov-lista,
#inv-lista { -webkit-overflow-scrolling: touch; }

/* ── Evitar overflow horizontal global ── */
body, .screen, .app-body, .tab-content {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Touch feedback mejorado ── */
.btn:active,
.icon-btn:active,
.bnav-btn:active,
.setting-row.clickable:active {
  opacity: 0.75;
  transform: scale(0.97);
  transition: transform 0.08s, opacity 0.08s;
}

/* ── Espaciado extra en celulares con notch (iPhone) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .nav-bar, .bnav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .app-body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── PC: restaurar lo que se ajustó para móvil ── */
@media (min-width: 600px) {
  input, select, textarea { font-size: 14px !important; }
  .modal-overlay { align-items: center !important; padding: 20px !important; }
  .modal {
    border-radius: var(--rxl) !important;
    max-height: 90vh;
    width: auto !important;
    max-width: 520px !important;
  }
  #modal-factura .modal { max-width: 460px !important; border-radius: var(--rxl) !important; }
  .hdr-sub  { display: block; }
  #hdr-user { display: block; }
  .frow { grid-template-columns: 1fr 1fr; }
  .mtr-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 769px) {
  .app-body { padding: 0 24px 80px; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  .mtr-grid  { grid-template-columns: repeat(6, 1fr); }
}

/* ══ Fix escáner html5-qrcode — evitar pantalla negra ══════ */
#scanner-qr-region {
  background: #000 !important;
}
#scanner-qr-region video {
  width: 100% !important;
  display: block !important;
  border-radius: 0 !important;
}
#scanner-qr-region img {
  display: none !important; /* ocultar el ícono de QR que muestra la librería */
}
/* Ocultar botones internos de la librería que no queremos */
#scanner-qr-region > div > div:last-child {
  display: none !important;
}
#html5-qrcode-button-camera-stop,
#html5-qrcode-button-camera-start,
#html5-qrcode-select-camera {
  display: none !important;
}
#html5qr-code-full-region__dashboard {
  display: none !important;
}

/* ── Restricciones visuales por rol (control de acceso) ───── */
/* Cajero: no ve precios de compra ni utilidades */
body.rol-sin-costos [data-costo],
body.rol-sin-costos .precio-compra-display,
body.rol-sin-costos #prod-precio-compra,
body.rol-sin-costos .ganancia-display {
  display: none !important;
}

/* No-admin: oculta botones de eliminar en tarjetas */
body.rol-sin-eliminar .btn-eliminar-item,
body.rol-sin-eliminar .icon-btn[title="Eliminar"] {
  display: none !important;
}

/* Sin permiso de inventario: oculta acciones de edición de productos */
body.rol-sin-inventario #seccion-combos,
body.rol-sin-inventario #seccion-promos,
body.rol-sin-inventario .prod-actions {
  display: none !important;
}