/* eStockARG · interfaz interior PC y móvil · versión visual. Sin funciones añadidas. */
html:root {
  --stage-rose:#fff8fc;--stage-neutral:#f5f6f8;--page-stage:#fff9fc;
  --accent:#d53a7e;--accent2:#b51a5d;--accentSoft:#fff0f7;
  --surface:#fff;--surface2:#fff1f7;--bg:#fff8fc;
  --text:#211723;--muted:#796b79;--line:#f0dce6;
  --ui-shadow:0 10px 32px rgba(135,53,95,.075);
  --ui-shadow-elevated:0 20px 48px rgba(119,49,89,.12);
  --shell-side:#fffafd;--shell-side-border:#efdae6;--shell-side-text:#665366;
  --shell-side-active:#b91c62;--shell-side-active-bg:linear-gradient(130deg,#d94285,#b6165b);
  --shell-side-card:linear-gradient(145deg,#ffe5f2,#f9edf7);
  --shell-head:#fffafd;
}
html:root[data-theme="minimal"]{
  --page-stage:#f4f5f7;
  --bg:#f4f5f7;--surface:#fff;--surface2:#f0f2f4;--accent:#17191b;--accent2:#090b0e;--accentSoft:#edeef1;
  --text:#191c20;--muted:#657078;--line:#e3e5e8;
  --ui-shadow:0 9px 28px rgba(23,28,35,.055);
  --ui-shadow-elevated:0 20px 45px rgba(22,29,34,.12);
  --shell-side:#15191c;--shell-side-border:#2c3236;--shell-side-text:#b8c1c7;
  --shell-side-active:#fff;--shell-side-active-bg:linear-gradient(125deg,#424950,#30363d);
  --shell-side-card:linear-gradient(145deg,#252b30,#1a1f23);
  --shell-head:#fff;
}
body:has(>.app),body:has(#app>.app){background:var(--page-stage)}
.app{
  position:relative;min-height:100dvh;min-width:0;
  color:var(--text);background:var(--page-stage);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.app button,.app input,.app select,.app textarea{font-family:inherit}
.app .topbar{
  background:var(--shell-head);border-bottom:1px solid var(--line);
  box-shadow:0 3px 15px rgba(25,18,23,.035);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.app .topbar-inner{
  min-height:70px;max-width:1600px;
  margin:0 auto;padding:12px clamp(15px,2.2vw,37px);
}
.app .brandtext strong{letter-spacing:-.035em;font-size:19px;font-weight:850}
.app .brandtext small{font-size:12px}
.app .brand-logo{background:#fff;border-radius:14px;width:45px;height:45px;padding:3px;border:1px solid var(--line);object-fit:contain}
.app .topbar .icon-btn{
  width:42px;height:42px;border-radius:13px;color:var(--text);
  box-shadow:none;background:var(--surface2);
  border:1px solid color-mix(in srgb,var(--line) 85%,var(--surface));
}
.app .topbar .icon-btn:hover{background:var(--accentSoft)}
.app .container{max-width:1600px;padding:28px clamp(15px,2.1vw,40px) 48px}
.app .page-head{margin:0 0 24px;align-items:center;min-height:80px}
.app .page-head h1,.app .page-head h2{color:var(--text);font-size:clamp(28px,2.4vw,39px);font-weight:850;letter-spacing:-.043em}
.app .page-head .eyebrow{color:var(--accent2);margin:0 0 10px;font-size:11px;letter-spacing:.13em}
.app .page-head .muted{font-size:14px;line-height:1.5;margin-top:9px}
.app .page-head .btn[data-tab="sell"]{min-height:44px;border-radius:12px;padding:10px 21px}
.app .card{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--ui-shadow);border-radius:19px;
}
.app .grid{gap:16px}
.app .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.app .stat{
  position:relative;min-height:157px;padding:70px 18px 18px;
  box-shadow:var(--ui-shadow);overflow:hidden;justify-content:flex-start;
  background:var(--surface);
}
.app .stat::before{
  content:"";position:absolute;top:17px;left:18px;width:44px;height:44px;
  border-radius:13px;border:0;background:linear-gradient(145deg,#fff1f6,#f8e1eb);
}
.app .stat::after{
  content:"";position:absolute;top:26px;left:27px;width:25px;height:25px;
  background-position:center;background-repeat:no-repeat;background-size:contain;
}
.app .stat:nth-child(1)::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20fill%3D%22none%22%20stroke%3D%22%23cd3480%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%202v4M16%202v4M3%2010h18M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Z%22%2F%3E%3C%2Fsvg%3E")}
.app .stat:nth-child(2)::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20fill%3D%22none%22%20stroke%3D%22%23cd3480%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2019V9M10%2019V5M16%2019v-8M22%2019V3%22%2F%3E%3C%2Fsvg%3E")}
.app .stat:nth-child(3)::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20fill%3D%22none%22%20stroke%3D%22%23cd3480%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9v9Z%22%2F%3E%3Cpath%20d%3D%22M12%203v9h9%22%2F%3E%3C%2Fsvg%3E")}
.app .stat:nth-child(4)::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20fill%3D%22none%22%20stroke%3D%22%23cd3480%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l4%203%22%2F%3E%3C%2Fsvg%3E")}
html[data-theme="minimal"] .app .stat::before{background:linear-gradient(145deg,#f4f5f6,#e9ecef)}
html[data-theme="minimal"] .app .stat::after{filter:grayscale(1) brightness(.42)}
.app .stat small:first-of-type{
  position:absolute;top:30px;left:74px;right:12px;
  color:var(--text);font-size:13px;font-weight:750;
}
.app .stat strong{
  font-size:clamp(23px,2.3vw,33px);line-height:1.13;
  letter-spacing:-.038em;font-weight:850;
  font-variant-numeric:tabular-nums;margin:0 0 6px;
  color:var(--text);overflow-wrap:anywhere;
}
.app .stat small:last-child{color:var(--muted);font-size:12px;line-height:1.4}
.app .stat strong.danger-text{color:var(--text)}
.app .section-title{margin:30px 0 15px;font-size:19px;font-weight:840;letter-spacing:-.02em;color:var(--text)}
.app .bar-row{gap:15px;padding:13px 7px;border-bottom:1px solid var(--line);font-size:13px}
.app .bar-row:last-child{border:0}
.app .bar-row strong{font-variant-numeric:tabular-nums}
.app .progress{height:9px;background:var(--surface2);border-radius:50px}
.app .progress>span{border-radius:50px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,white))}
.app .empty{
  min-height:125px;border:0;background:transparent;border-radius:16px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:var(--muted);gap:6px;
}
.app .empty strong{font-size:18px;letter-spacing:-.02em;color:var(--text)}
.app .grid-3>.card.clickable{
  text-align:left;min-height:104px;padding:23px 20px 19px;
  border-radius:19px;cursor:pointer;
}
.app .grid-3>.card.clickable strong{font-size:15px;font-weight:820}
.app .grid-3>.card.clickable .muted{margin:10px 0 0;font-size:12px;line-height:1.3}
.app .grid-3>.card.clickable:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:var(--ui-shadow-elevated)}
.app .toolbar{gap:12px;margin-bottom:17px}
.app .list{gap:13px}
.app .product-card{padding:17px 18px;border-radius:18px;align-items:flex-start}
.app .product-title{font-size:16px;font-weight:800}
.app .photo{width:66px;height:66px;flex-basis:66px;border-radius:13px}
.app .product-meta{margin-top:8px}
.app .product-actions{margin-top:13px}
.app .price-row strong{font-size:17px;letter-spacing:-.02em}
.app .btn{background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:none;font-size:13px;font-weight:760}
.app .btn:hover:not(:disabled){background:var(--accent2);border-color:var(--accent2)}
.app .btn.secondary,.app .btn.ghost{color:var(--text);background:var(--surface);border:1px solid var(--line)}
.app .btn.secondary:hover,.app .btn.ghost:hover{background:var(--surface2);border-color:var(--line);color:var(--text)}
.app .btn.sm{font-size:12px}
.app .input,.app .select,.app .textarea{
  color:var(--text);background:var(--surface);border-color:var(--line);
  border-radius:12px;min-height:45px;
}
.app .input:focus,.app .select:focus,.app .textarea:focus{box-shadow:0 0 0 3px var(--ui-ring);border-color:var(--accent)}
.app .import-card,.app .market-stat,.app .review-card{box-shadow:var(--ui-shadow);border-radius:16px;background:var(--surface)}
.app .import-card strong{font-size:13px}
.app .import-icon{color:var(--accent)}
.app .table-wrap{border:1px solid var(--line);border-radius:17px;box-shadow:var(--ui-shadow);overflow:auto;background:var(--surface)}
.app .table{font-size:13px}
.app .table th{padding:14px 15px;font-weight:760;letter-spacing:.02em;background:var(--surface2)}
.app .table td{padding:14px 15px}
.app .sheet{
  background:var(--surface);border:1px solid var(--line);border-radius:23px 23px 0 0;
  box-shadow:var(--ui-shadow-elevated);
}
.app .sheet-head{background:var(--surface);border-color:var(--line)}
.app .sheet-head h3{color:var(--text);font-weight:820}
.app .sale-total{background:var(--surface2);border-radius:15px}
.app .sale-total .grand{font-size:22px}
.app .callout{background:var(--surface2);border-radius:15px}
.app button:focus-visible,.app input:focus-visible,.app select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 35%,white);
  outline-offset:2px;
}
@media(min-width:1024px){
  .app{
    --desk-sidebar:244px;
    padding:0 0 0 var(--desk-sidebar)!important;
    display:block;
  }
  .app .topbar{height:auto;min-height:78px}
  .app .topbar-inner{min-height:78px}
  .app .container{padding:32px clamp(22px,3.1vw,52px) 55px}
  .app .bottom-nav{
    position:fixed!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;
    width:var(--desk-sidebar)!important;height:100dvh!important;
    padding:101px 14px 180px!important;
    border:0!important;border-right:1px solid var(--shell-side-border)!important;
    background:var(--shell-side)!important;
    box-shadow:4px 0 26px rgba(22,21,26,.035);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    overflow-y:auto;overflow-x:hidden;z-index:26;
  }
  .app .bottom-nav::before{
    position:absolute;top:20px;left:20px;right:12px;
    content:"eStockARG";height:61px;
    display:flex;align-items:center;padding:0 0 0 48px;
    font-size:20px;line-height:1;font-weight:850;letter-spacing:-.04em;
    color:var(--text);
    background-image:url("/estockarg-logo.png");
    background-repeat:no-repeat;background-position:0 center;background-size:41px 41px;
    border-bottom:1px solid var(--shell-side-border);
  }
  html[data-theme="minimal"] .app .bottom-nav::before{color:#fff}
  .app .bottom-nav::after{
    content:"Tu negocio,\\Asiempre bajo control.\\A\\AStock · Ventas · Clientes";
    white-space:pre-line;
    position:fixed;bottom:23px;left:14px;width:calc(var(--desk-sidebar) - 28px);
    min-height:122px;padding:21px 15px;
    background:var(--shell-side-card);
    border:1px solid var(--shell-side-border);border-radius:17px;
    color:var(--shell-side-text);
    font-size:12px;font-weight:670;line-height:1.5;
    pointer-events:none;
  }
  html:not([data-theme="minimal"]) .app .bottom-nav::after{color:#80566c}
  html[data-theme="minimal"] .app .bottom-nav::after{color:#f2f4f7}
  .app .bottom-nav-inner{
    display:flex!important;flex-direction:column!important;gap:7px;
    width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
    height:auto!important;min-height:0!important;
  }
  .app .nav-btn{
    color:var(--shell-side-text)!important;
    display:flex!important;flex-direction:row!important;justify-content:flex-start!important;
    align-items:center!important;gap:12px!important;flex:none!important;
    width:100%!important;min-height:47px!important;padding:0 12px!important;
    border-radius:12px!important;
    font-size:13px!important;font-weight:690!important;text-align:left;
    background:transparent!important;
  }
  .app .nav-btn span:first-child{
    font-size:22px!important;line-height:1!important;width:29px!important;
    min-height:30px!important;min-width:29px!important;padding:0!important;
    color:inherit!important;border-radius:8px!important;background:transparent!important;
  }
  .app .nav-btn span:last-child{font-size:13px!important}
  .app .nav-btn.active{
    background:var(--shell-side-active-bg)!important;color:#fff!important;
    box-shadow:0 5px 15px rgba(77,27,55,.11);
  }
  html[data-theme="minimal"] .app .nav-btn.active{box-shadow:none}
  .app .nav-btn:not(.active):hover{
    background:color-mix(in srgb,var(--shell-side) 82%,var(--shell-side-text))!important;
  }
  html[data-theme="minimal"] .app .nav-btn:not(.active):hover{background:#262c31!important;color:#fff!important}
  .app .grid-3>.card.clickable{min-height:113px}
  .app main.container>.list:has(>article.product-card){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px;
  }
  .app .stat strong{font-size:clamp(22px,2.1vw,32px)}
}
@media(min-width:1024px) and (max-width:1240px){
 .app{--desk-sidebar:213px}
 .app .container{padding:26px 23px 40px}
 .app .grid{gap:11px}
 .app .stat{padding:62px 13px 14px;min-height:150px}
 .app .stat::before{left:13px}
 .app .stat::after{left:22px}
 .app .stat small:first-of-type{left:66px}
 .app .stat strong{font-size:22px}
 .app .bottom-nav::before{font-size:18px}
 .app main.container>.list:has(>article.product-card){grid-template-columns:1fr}
}
@media(max-width:1023px){
  .app{padding:0 0 calc(var(--navh) + env(safe-area-inset-bottom))!important}
  .app .bottom-nav{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:calc(var(--navh) + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
    border:0;border-top:1px solid var(--line);
    padding:0 0 env(safe-area-inset-bottom);
    box-shadow:0 -8px 28px rgba(22,27,32,.05);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .app .bottom-nav-inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;max-width:780px;height:var(--navh);padding:6px 8px}
  .app .nav-btn{min-width:0;border-radius:12px;gap:4px;font-size:10px;font-weight:740}
  .app .nav-btn span:first-child{
    display:grid;place-items:center;min-height:35px;min-width:36px;
    color:var(--muted);font-size:22px;border-radius:12px;
  }
  .app .nav-btn.active span:first-child{color:var(--accent2);background:var(--accentSoft)}
  .app .nav-btn[data-tab="sell"] span:first-child{
    width:42px;height:42px;min-height:42px;color:#fff!important;
    background:var(--accent)!important;border-radius:50%!important;
    font-size:25px;box-shadow:0 5px 17px var(--ui-ring);
  }
  .app .nav-btn[data-tab="sell"].active span:first-child{background:var(--accent2)!important}
  .app .container{padding:21px 18px 35px}
  .app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .stat{min-height:145px;padding:70px 16px 16px}
  .app .stat strong{font-size:clamp(23px,4vw,31px)}
  .app .grid-3>.card.clickable{min-height:112px}
  .app .bottom-nav::before,.app .bottom-nav::after{content:none!important;display:none!important}
}
@media(max-width:600px){
  .app .topbar-inner{min-height:63px;padding:9px 14px}
  .app .brand-logo{width:40px;height:40px}
  .app .brandtext strong{font-size:17px}
  .app .brandtext small{font-size:11px}
  .app .topbar .icon-btn{width:39px;height:39px}
  .app .container{padding:20px 13px 34px}
  .app .page-head{align-items:flex-start;min-height:auto;margin:0 0 18px;gap:10px}
  .app .page-head h1,.app .page-head h2{font-size:clamp(25px,7vw,32px)}
  .app .page-head .btn[data-tab="sell"]{min-height:39px;padding:8px 11px}
  .app .page-head .muted{font-size:12px;margin-top:6px}
  .app .grid{gap:10px}
  .app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .stat{min-height:132px;padding:61px 12px 15px;border-radius:16px}
  .app .stat::before{left:12px;top:13px;width:37px;height:37px;border-radius:10px}
  .app .stat::after{left:19px;top:20px;width:23px;height:23px}
  .app .stat small:first-of-type{top:24px;left:56px;font-size:11px;font-weight:750;right:6px}
  .app .stat strong{font-size:clamp(20px,5.2vw,28px);margin:3px 0 7px}
  .app .stat small:last-child{font-size:11px}
  .app .section-title{font-size:17px;margin:22px 0 12px}
  .app .grid-3>.card.clickable{min-height:102px;padding:16px 12px}
  .app .grid-3>.card.clickable strong{font-size:12px}
  .app .grid-3>.card.clickable .muted{font-size:11px}
  .app .product-card{padding:14px 13px}
  .app .toolbar{gap:8px}
  .app .toolbar .search{flex-basis:100%}
  .app .table-wrap{border-radius:15px}
  .app .sheet{padding:17px 15px calc(22px + env(safe-area-inset-bottom))}
  .app .bottom-nav-inner{padding:5px 4px;gap:1px}
  .app .nav-btn{font-size:10px}
  .app .nav-btn span:first-child{font-size:21px}
}
@media(max-width:420px){
  .app .container{padding:17px 11px 33px}
  .app .grid{gap:8px}
  .app .stat{min-height:122px;padding:56px 10px 12px}
  .app .stat::before{left:10px;top:11px;width:33px;height:33px}
  .app .stat::after{left:15px;top:16px;width:23px;height:23px}
  .app .stat small:first-of-type{top:20px;left:50px;font-size:10px}
  .app .stat strong{font-size:clamp(18px,5.2vw,22px)}
  .app .stat small:last-child{font-size:10px}
  .app .grid-3{grid-template-columns:1fr}
  .app .grid-3>.card.clickable{min-height:74px;padding:14px 16px}
  .app .grid-3>.card.clickable .muted{margin:5px 0 0}
  .app .nav-btn{font-size:9px}
}
html[data-theme="minimal"] .app .topbar{background:#fff}
html[data-theme="minimal"] .app .brand-logo{border-color:#d9dde0}
@media(max-width:600px){
  html[data-theme="minimal"] .app .topbar{background:#171a1d;border-color:#1e2429}
  html[data-theme="minimal"] .app .brandtext strong{color:#fff}
  html[data-theme="minimal"] .app .brandtext small{color:#c7d0d6}
  html[data-theme="minimal"] .app .topbar .icon-btn{background:#252b30;color:#fff;border-color:#363f46}
  html[data-theme="minimal"] .app .brand-logo{background:#fff;border-color:#e5e7e8}
  html:not([data-theme="minimal"]) .app .topbar{background:#fff7fc}
}
@media(prefers-reduced-motion:reduce){
 .app *,.app *::before,.app *::after{transition:none!important;animation:none!important}
}
@media print{
 .app{padding:0!important;background:white!important}
 .app .bottom-nav{display:none!important}
 .app .container{padding:0!important}
 .app .card,.app .table-wrap{box-shadow:none!important;border-color:#ddd!important}
}