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

:root{
  /* Vendu brand: navy #0D1B2A, green #22C55E, greys #F2F4F7 / #E5E7EB */
  --brand-navy:#0D1B2A; --brand-green:#22C55E;
  --page:#F2F4F7; --surface:#FFFFFF; --surface-2:#E5E7EB; --surface-hover:#EDF0F3;
  --ink:#0D1B2A; --muted:#5B6472; --muted-2:#8A93A3; --line:#E5E7EB;
  --accent:#22C55E; --accent-dim:#16A34A; --accent-ink:#FFFFFF; --accent-soft:#DCFCE7;
  --accent-2:#F0A519; --accent-2-soft:#FCEDCC;
  --danger:#E5484D; --danger-soft:#FBE5E6;
  --shadow-sm:0 1px 2px rgba(13,27,42,.06);
  --shadow:0 1px 2px rgba(13,27,42,.05), 0 14px 34px -16px rgba(13,27,42,.24);
  --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
  /* dataviz categorical slots (validated default palette, unchanged) */
  --v-blue:#2a78d6; --v-orange:#eb6834; --v-aqua:#1baf7a; --v-yellow:#eda100;
  --v-good:#0ca30c; --v-warn:#fab219; --v-crit:#d03b3b;
  --v-grid:#e7e8ee; --v-axis:#c7c9d6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0A121C; --surface:#101B2B; --surface-2:#17263A; --surface-hover:#1C2C43;
    --ink:#EDEFF3; --muted:#9AA6B8; --muted-2:#6C7889; --line:#233247;
    --accent:#2ED874; --accent-dim:#22C55E; --accent-ink:#052014; --accent-soft:#123626;
    --accent-2:#F5B84E; --accent-2-soft:#3A2C11;
    --danger:#F1696D; --danger-soft:#3A1D1F;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -16px rgba(0,0,0,.65);
    --v-blue:#3987e5; --v-orange:#d95926; --v-aqua:#22c58e; --v-yellow:#dc9a1f;
    --v-good:#0ca30c; --v-warn:#fab219; --v-crit:#e66767;
    --v-grid:#1c2938; --v-axis:#2c3c50;
  }
}
:root[data-theme="dark"]{
  --page:#0A121C; --surface:#101B2B; --surface-2:#17263A; --surface-hover:#1C2C43;
  --ink:#EDEFF3; --muted:#9AA6B8; --muted-2:#6C7889; --line:#233247;
  --accent:#2ED874; --accent-dim:#22C55E; --accent-ink:#052014; --accent-soft:#123626;
  --accent-2:#F5B84E; --accent-2-soft:#3A2C11;
  --danger:#F1696D; --danger-soft:#3A1D1F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -16px rgba(0,0,0,.65);
  --v-blue:#3987e5; --v-orange:#d95926; --v-aqua:#22c58e; --v-yellow:#dc9a1f;
  --v-good:#0ca30c; --v-warn:#fab219; --v-crit:#e66767;
  --v-grid:#1c2938; --v-axis:#2c3c50;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Manrope',system-ui,sans-serif; font-weight:800; text-wrap:balance; margin:0; color:var(--ink); letter-spacing:-.01em;}
.mono,.num{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
input,select{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
svg{display:block;}

.logo-mark{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(150deg, var(--accent) 0%, #0C8F6E 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -4px rgba(14,164,107,.55);
}
.logo-mark svg{width:19px; height:19px;}
.brand-word{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink);}
.login-logo{height:42px; width:auto; display:block;}
.brand-chip{
  display:inline-flex; align-items:center; background:#FFFFFF; border-radius:10px;
  padding:9px 14px; box-shadow:0 4px 14px -6px rgba(0,0,0,.35);
}
.brand-chip img{height:22px; width:auto; display:block;}

/* ---------- Login ---------- */
#login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:24px; background:var(--page);
}
#login-screen::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:
    radial-gradient(circle at 25% 15%, rgba(34,197,94,.24), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(13,27,42,.12), transparent 50%);
  filter:blur(10px); pointer-events:none;
}
.login-card{
  position:relative; width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--shadow); padding:38px 34px;
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.login-tag{color:var(--muted); font-size:.9rem; margin:-8px 0 26px; line-height:1.5;}
.tabs{display:flex; gap:4px; background:var(--surface-2); border-radius:12px; padding:4px; margin-bottom:22px;}
.tab-btn{flex:1; border:none; background:transparent; padding:9px 0; border-radius:9px; font-size:.85rem; font-weight:700; font-family:'Manrope',sans-serif; color:var(--muted); cursor:pointer;}
.tab-btn.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:.78rem; color:var(--muted); margin-bottom:6px; font-weight:600;}
.field input, .field select{
  width:100%; padding:11px 13px; border-radius:11px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:.9rem; transition:border-color .15s;
}
.field input:focus, .field select:focus{border-color:var(--accent);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:999px; padding:11px 18px; font-size:.87rem; font-weight:700;
  font-family:'Manrope',sans-serif; cursor:pointer; transition:filter .15s, transform .15s;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent); color:var(--accent-ink); width:100%; margin-top:6px; box-shadow:0 8px 20px -8px rgba(34,197,94,.55);}
.btn-ghost{background:var(--surface-2); color:var(--ink);}
.btn-outline{background:transparent; border:1.5px solid var(--line); color:var(--ink);}
.login-demo-note{font-size:.78rem; color:var(--muted-2); text-align:center; margin-top:20px; line-height:1.5;}

/* ---------- App shell ---------- */
#app-screen{display:none; min-height:100vh; grid-template-columns:250px 1fr;}
#app-screen.active{display:grid;}
.sidebar{
  --sb-ink:#EAF0F5; --sb-muted:#8996A8; --sb-line:rgba(255,255,255,.08); --sb-hover:rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 20% 0%, rgba(34,197,94,.20), transparent 45%),
    linear-gradient(175deg, #0D1B2A 0%, #12233A 55%, #0D1B2A 100%);
  color:var(--sb-ink);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh;
}
.side-brand{display:flex; align-items:center; gap:10px; padding:4px 10px 4px;}
.side-brand .brand-word{color:#fff;}
.empresa-switch{
  margin:18px 0 22px; padding:11px 13px; background:rgba(255,255,255,.06); border:1px solid var(--sb-line);
  border-radius:12px; font-size:.8rem;
}
.empresa-switch .k{color:var(--sb-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:3px;}
.empresa-switch select{width:100%; background:transparent; border:none; font-weight:700; color:#fff; font-size:.85rem; padding:2px 0; font-family:'Manrope',sans-serif;}
.empresa-switch select option{color:#12141B;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px;
  color:var(--sb-muted); font-size:.87rem; font-weight:600; font-family:'Manrope',sans-serif; cursor:pointer; margin-bottom:2px;
  border:none; background:transparent; width:100%; text-align:left; transition:background .15s, color .15s;
}
.nav-item .ic{width:18px; height:18px; flex-shrink:0;}
.nav-item .ic svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.nav-item:hover{background:var(--sb-hover); color:#fff;}
.nav-item.active{background:linear-gradient(90deg, rgba(35,212,136,.22), rgba(35,212,136,.05)); color:#fff; box-shadow:inset 2px 0 0 var(--accent);}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--sb-line);}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px 10px;}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(150deg,var(--accent),var(--accent-dim)); color:#052014; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0; font-family:'Manrope',sans-serif;}
.user-chip .u-name{font-size:.82rem; font-weight:700; color:#fff;}
.user-chip .u-role{font-size:.72rem; color:var(--sb-muted);}
.logout-link{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--sb-muted); padding:9px 10px; cursor:pointer; border-radius:9px;}
.logout-link:hover{color:#fff; background:var(--sb-hover);}
.logout-link svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8;}

main.content{padding:30px 38px 64px; min-width:0;}
.view{display:none;}
.view.active{display:block;}
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.view-head h1{font-size:1.6rem;}
.view-head .sub{color:var(--muted); font-size:.87rem; margin-top:5px;}
.period-pick{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:7px 12px; box-shadow:var(--shadow-sm);}
.period-pick svg{width:15px; height:15px; stroke:var(--muted); fill:none; stroke-width:1.8;}
.period-pick select{border:none; background:transparent; font-size:.85rem; font-weight:700; color:var(--ink); font-family:'Manrope',sans-serif;}

/* ---------- shared bits ---------- */
.grid{display:grid; gap:16px;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-3{grid-template-columns:2fr 1fr 1fr;}
.cols-2{grid-template-columns:1.3fr 1fr;}
@media (max-width:1000px){ .cols-4{grid-template-columns:repeat(2,1fr);} .cols-3,.cols-2{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow);}
.card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.card-head h3{font-size:.96rem; font-weight:700;}
.card-head .hint{font-size:.74rem; color:var(--muted-2);}

.kpi{display:flex; flex-direction:column; gap:2px;}
.kpi .k-top{display:flex; align-items:center; justify-content:space-between;}
.kpi .k-label{font-size:.78rem; color:var(--muted); font-weight:600;}
.kpi .k-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.kpi .k-icon svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.kpi .k-value{font-family:'Manrope',sans-serif; font-size:1.62rem; font-weight:800; margin-top:10px; letter-spacing:-.01em;}
.kpi .k-delta{font-size:.78rem; margin-top:8px; display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-weight:700; width:fit-content;}
.kpi .k-delta svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.5;}
.k-delta.up{background:var(--accent-soft); color:var(--accent-dim);}
.k-delta.down{background:var(--danger-soft); color:var(--danger);}

.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:.79rem; color:var(--muted);}
.legend-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px;}
.badge.ok{background:var(--accent-soft); color:var(--accent-dim);}
.badge.low{background:var(--accent-2-soft); color:var(--accent-2);}
.badge.out{background:var(--danger-soft); color:var(--danger);}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:.86rem;}
th,td{text-align:left; padding:12px 18px; border-bottom:1px solid var(--line); white-space:nowrap;}
th{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; background:var(--surface-2);}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:var(--surface-hover);}
td.num{font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums;}
.tbl-month-header td{background:var(--surface-2); font-weight:700; color:var(--ink); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; padding:9px 18px;}
.tbl-month-header td.num{font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:normal;}
tbody tr.tbl-month-header:hover{background:var(--surface-2);}
.toolbar{display:flex; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; align-items:center;}
.search-box{position:relative;}
.search-box svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--muted-2); fill:none; stroke-width:2;}
.search-box input{padding:10px 13px 10px 36px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface); font-size:.86rem; width:240px; color:var(--ink);}
.search-box input:focus{border-color:var(--accent);}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(8,12,10,.55); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal-overlay.active{display:flex;}
.modal{background:var(--surface); border-radius:22px; padding:28px 30px; width:100%; max-width:440px; box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;}
.modal h3{font-size:1.15rem; margin-bottom:20px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.toast{
  position:fixed; bottom:26px; right:26px; background:var(--ink); color:var(--page);
  padding:13px 20px; border-radius:12px; font-size:.86rem; font-weight:600; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); transition:all .25s; z-index:60; pointer-events:none;
}
.toast.show{opacity:1; transform:translateY(0);}

/* PDV */
.pdv-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:18px;}
@media (max-width:960px){ .pdv-grid{grid-template-columns:1fr;} }
.cat-chips{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 2px;}
.cat-chip{
  border:1.5px solid var(--line); background:var(--surface); color:var(--muted);
  font-size:.78rem; font-weight:600; font-family:'Manrope',sans-serif; padding:6px 13px;
  border-radius:999px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.cat-chip:hover{border-color:var(--accent);}
.cat-chip.active{background:var(--ink); border-color:var(--ink); color:var(--surface);}
.list-meta{display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 6px; font-size:.74rem; color:var(--muted-2);}

.product-list{
  max-height:392px; overflow-y:auto; border:1.5px solid var(--line); border-radius:13px;
  background:var(--surface);
}
.pl-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--line); cursor:pointer; background:var(--surface); transition:background .12s;
}
.pl-row:last-child{border-bottom:none;}
.pl-row:hover{background:var(--surface-hover);}
.pl-row:hover .pl-add{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.pl-row.disabled{cursor:not-allowed; opacity:.42;}
.pl-row.disabled:hover{background:var(--surface);}
.pl-code{font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--muted-2); width:40px; flex-shrink:0;}
.pl-info{flex:1; min-width:0;}
.pl-info .pn{font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pl-info .pu{font-size:.72rem; color:var(--muted-2); margin-top:1px;}
.pl-price{font-family:'IBM Plex Mono'; font-size:.85rem; font-weight:600; color:var(--accent-dim); flex-shrink:0; width:76px; text-align:right;}
.pl-add{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface-2);
  color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; font-weight:700;
  transition:all .12s;
}
.pl-empty{padding:34px 14px; text-align:center; color:var(--muted-2); font-size:.85rem;}
.cart-line{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:.86rem; gap:8px;}
.cart-line .cl-name{flex:1;}
.cart-line .cl-qty{display:flex; align-items:center; gap:7px;}
.cart-line .cl-qty button{width:23px;height:23px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer; font-weight:700; color:var(--ink);}
.cart-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}
.cart-total .ct-label{font-size:.86rem; color:var(--muted);}
.cart-total .ct-value{font-family:'Manrope',sans-serif; font-size:1.5rem; font-weight:800;}
.pay-methods{display:flex; gap:8px; margin:14px 0;}
.pay-methods button{flex:1; padding:10px 0; border-radius:11px; border:1.5px solid var(--line); background:var(--surface); font-size:.82rem; font-weight:600; font-family:'Manrope',sans-serif; cursor:pointer; transition:all .15s;}
.pay-methods button.selected{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700;}

.code-entry{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:6px 6px 6px 14px;}
.code-entry svg{width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; flex-shrink:0;}
.code-entry input{flex:1; border:none; background:transparent; padding:8px 0; font-size:.88rem; color:var(--ink); font-family:'IBM Plex Mono',monospace;}
.code-entry input:focus{outline:none;}

.fee-summary{margin:4px 0 2px; padding:12px 14px; background:var(--accent-2-soft); border-radius:12px; font-size:.82rem;}
.fee-summary .fs-row{display:flex; justify-content:space-between; padding:3px 0; color:var(--ink);}
.fee-summary .fs-row.total{font-weight:700; border-top:1px dashed rgba(0,0,0,.12); margin-top:4px; padding-top:7px;}
.fee-summary .fs-row .fs-val{font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums;}
.fee-summary .fs-row.fee .fs-val{color:var(--danger);}
.spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--accent-soft); border-top-color:var(--accent); animation:vendu-spin .7s linear infinite;}
@keyframes vendu-spin{to{transform:rotate(360deg);}}
.foto-item-row{display:grid; grid-template-columns:1fr 64px 100px 90px 28px; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:.82rem;}
.foto-item-row input{width:100%; padding:6px 8px; font-size:.8rem;}
.foto-item-row .fi-sub{font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums; text-align:right; color:var(--muted);}
.foto-item-remove{background:none; border:none; cursor:pointer; color:var(--muted-2); padding:2px;}
.foto-item-remove:hover{color:var(--danger);}
.empty-cart{color:var(--muted-2); font-size:.85rem; text-align:center; padding:34px 0;}

.svg-chart text{font-family:'IBM Plex Mono',monospace;}

.donut-wrap{display:flex; align-items:center; gap:22px; margin-top:4px;}
.donut{width:132px; height:132px; border-radius:50%; flex-shrink:0; position:relative;}
.donut::after{
  content:""; position:absolute; inset:18px; border-radius:50%; background:var(--surface);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.06);
}
.donut-total{position:absolute; inset:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.donut-total .dt-value{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.05rem;}
.donut-total .dt-label{font-size:.62rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; margin-top:1px;}
.donut-legend{display:flex; flex-direction:column; gap:10px; flex:1;}
.dl-row{display:flex; align-items:center; gap:9px; font-size:.83rem;}
.dl-row .legend-dot{width:10px; height:10px; border-radius:3px;}