/* eStockARG · sistema visual interior 2026, sin modificaciones funcionales */
html:root {
  --bg:#fff7fb;
  --surface:#ffffff;
  --surface2:#fff1f7;
  --text:#291822;
  --muted:#796471;
  --line:#f0dce5;
  --accent:#d63f80;
  --accent2:#b91c61;
  --accentSoft:#fff0f6;
  --shadow:0 10px 28px rgba(104,38,72,.065);
  --ui-shadow-soft:0 3px 12px rgba(91,32,65,.045);
  --ui-shadow:0 12px 34px rgba(100,39,76,.085);
  --ui-shadow-elevated:0 24px 58px rgba(93,33,72,.13);
  --ui-radius:22px;
  --ui-inner:14px;
  --ui-ring:rgba(214,63,128,.16);
  --ui-tint:rgba(214,63,128,.075);
}
html:root[data-theme="minimal"] {
  --bg:#f5f6f7;
  --surface:#ffffff;
  --surface2:#eff1f3;
  --text:#15171a;
  --muted:#636b72;
  --line:#dfe3e7;
  --accent:#17191c;
  --accent2:#08090a;
  --accentSoft:#f0f1f3;
  --shadow:0 9px 27px rgba(20,24,28,.055);
  --ui-shadow-soft:0 3px 11px rgba(20,24,28,.035);
  --ui-shadow:0 13px 32px rgba(20,24,28,.075);
  --ui-shadow-elevated:0 22px 58px rgba(20,24,28,.12);
  --ui-ring:rgba(22,25,28,.15);
  --ui-tint:rgba(35,39,44,.06);
}
body:has(.app){background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app{
  min-width:0;
  background:radial-gradient(ellipse 62% 26% at 0% 0%,rgba(249,199,224,.29),transparent 80%),
             radial-gradient(ellipse 40% 35% at 100% 25%,rgba(255,232,243,.45),transparent 75%),
             var(--bg);
}
html[data-theme="minimal"] .app {
  background:radial-gradient(ellipse 60% 30% at 0% 0%,rgba(207,215,223,.20),transparent 80%),
             radial-gradient(ellipse 35% 35% at 100% 28%,rgba(228,232,235,.23),transparent 75%),
             var(--bg);
}
.app .container{max-width:1180px;padding:27px 22px 40px}
.app .topbar{
  border-bottom:1px solid color-mix(in srgb,var(--line) 80%,white);
  background:color-mix(in srgb,var(--surface) 87%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 3px 22px rgba(34,23,35,.035);
}
.app .topbar-inner{max-width:1180px;padding:14px 22px;min-height:68px}
.app .brand{gap:12px}
.app .brandmark{
  width:43px;height:43px;border-radius:15px;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 6px 14px var(--ui-ring);
}
.app .brand-logo{border:1px solid var(--line);border-radius:14px;width:45px;height:45px;object-fit:contain}
.app .brandtext strong{font-size:18px;font-weight:850;letter-spacing:-.032em;color:var(--text)}
.app .brandtext small{font-size:12px;line-height:1.5;color:var(--muted)}
.app .page-head{align-items:center;gap:16px;margin:7px 0 22px;min-height:80px}
.app .page-head h1,.app .page-head h2{
  font-weight:850;letter-spacing:-.042em;line-height:1.13;
  font-size:clamp(27px,2.65vw,38px);color:var(--text);
}
.app .page-head p{line-height:1.45}
.app .eyebrow{
  margin-bottom:8px;color:var(--accent2);
  letter-spacing:.125em;font-size:11px;font-weight:860;
}
.app .muted{color:var(--muted)}
.app .grid{gap:15px}
.app .card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--ui-radius);padding:19px;
  box-shadow:var(--ui-shadow-soft);
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .app .card:hover{box-shadow:var(--ui-shadow);border-color:color-mix(in srgb,var(--accent) 21%,var(--line))}
}
.app .stat{
  min-height:120px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;position:relative;
}
.app .stat:before{
  content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 36%,transparent) 65%,transparent);
}
.app .stat small{font-size:12px;line-height:1.3;letter-spacing:.01em;color:var(--muted)}
.app .stat strong{
  display:block;margin:7px 0 5px;
  font-weight:860;letter-spacing:-.05em;line-height:1.07;
  font-size:clamp(23px,2.35vw,33px);color:var(--text);
  font-variant-numeric:tabular-nums;
}
.app .section-title{
  margin:25px 0 12px;color:var(--text);
  letter-spacing:-.025em;font-size:clamp(16px,1.45vw,20px);font-weight:820;
}
.app .btn{
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--ui-inner);
  min-height:45px;padding:10px 16px;font-size:13px;font-weight:790;
  line-height:1.25;box-shadow:var(--ui-shadow-soft);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.app .btn:not(:disabled):hover{
  background:var(--accent2);border-color:var(--accent2);box-shadow:0 7px 16px var(--ui-ring);
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .app .btn:not(:disabled):hover{transform:translateY(-1px)}
}
.app .btn:active:not(:disabled){transform:translateY(0)}
.app .btn.sm{min-height:36px;padding:8px 12px;font-size:12px;border-radius:11px}
.app .btn.secondary{
  background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--ui-shadow-soft);
}
.app .btn.secondary:hover,.app .btn.ghost:hover{
  background:var(--surface2);color:var(--text);border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
}
.app .btn.ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none}
.app .btn.danger{background:#fff0ee;color:#aa2820;border-color:#f5d1cd}
.app .btn.danger:hover{background:#fde0dc;color:#922017;border-color:#edada6}
.app .btn.ok{background:#e6f7ef;color:#116b49;border-color:#b9e7ce}
.app .btn.ok:hover{background:#d9f0e5;color:#0d593b;border-color:#9ad7b7}
.app button:disabled{cursor:not-allowed;opacity:.50}
.app .icon-btn{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  color:var(--text);background:var(--surface);box-shadow:var(--ui-shadow-soft);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.app .icon-btn:hover{background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}
.app .input,.app .select,.app .textarea {
  width:100%;min-width:0;min-height:49px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  border-radius:14px;padding:12px 14px;
  line-height:1.4;box-shadow:inset 0 1px 2px rgba(22,17,23,.017);
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.app .textarea{min-height:100px;resize:vertical}
.app .input:focus,.app .select:focus,.app .textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ui-ring);
}
.app .input::placeholder,.app .textarea::placeholder{color:color-mix(in srgb,var(--muted) 73%,white)}
.app .field{gap:8px;min-width:0}
.app .field label,.app .label{font-size:13px;color:var(--text);font-weight:740}
.app .field-help{font-size:12px;line-height:1.45;color:var(--muted)}
.app .form{gap:16px}
.app .form-row,.app .form-row-3{gap:13px}
.app .toolbar{gap:11px;margin:0 0 17px}
.app .toolbar .search{min-width:min(100%,210px)}
.app .actions{gap:10px}
.app .badge{
  display:inline-flex;align-items:center;gap:5px;min-height:27px;
  border-radius:99px;padding:5px 10px;
  font-size:11px;font-weight:760;line-height:1;
  background:var(--surface2);border:1px solid var(--line);color:var(--muted)
}
.app .badge.accent{color:var(--accent2);background:var(--accentSoft)}
.app .badge.ok{background:#e8f7ef;color:#146e4b;border-color:#c6e9d6}
.app .badge.warn{background:#fff5e2;color:#955d05;border-color:#efdcba}
.app .badge.danger{background:#ffeded;color:#aa2a26;border-color:#f2c9c7}
.app .list{gap:12px}
.app .product-card{
  align-items:center;gap:17px;min-width:0;
}
.app .photo{width:74px;height:74px;flex-basis:74px;border-radius:17px;border:1px solid var(--line)}
.app .photo.placeholder{font-size:22px;background:var(--surface2)}
.app .product-title{font-size:15px;font-weight:840;letter-spacing:-.015em;line-height:1.35}
.app .product-meta{margin-top:8px;gap:7px}
.app .product-actions{gap:8px;margin-top:14px}
.app .price-row{padding-top:11px;border-top:1px solid var(--line);margin-top:13px;align-items:center}
.app .price-row strong{font-variant-numeric:tabular-nums;letter-spacing:-.018em;font-size:18px}
.app .import-grid{gap:12px;margin-bottom:18px}
.app .import-card{
  padding:17px 12px;border-radius:19px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--ui-shadow-soft);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.app .import-card:hover{background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:var(--ui-shadow)}
.app .import-card strong{font-weight:780;letter-spacing:-.012em}
.app .import-icon{font-size:23px;height:37px;color:var(--accent)}
.app .client-card{align-items:center;gap:14px}
.app .client-card strong{font-weight:830}
.app .callout{
  padding:15px 17px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface2);line-height:1.5;
}
.app .empty{
  border:1px dashed color-mix(in srgb,var(--line) 72%,var(--muted));
  border-radius:19px;background:var(--surface);padding:38px 20px;
  color:var(--muted);line-height:1.5;
}
.app .empty strong{font-size:18px;font-weight:780;margin-bottom:8px}
.app .sale-total{gap:10px;padding:17px;border:1px solid var(--line);border-radius:17px;background:var(--surface2)}
.app .sale-total .grand{font-size:21px;font-weight:860;letter-spacing:-.03em;padding-top:12px}
.app .cart-item{padding:14px 0;gap:12px}
.app .qty button{width:38px;height:38px;border-radius:12px;background:var(--surface);border-color:var(--line)}
.app .qty button:hover{background:var(--surface2)}
.app .table-wrap{
  border:1px solid var(--line);border-radius:18px;overflow:auto;background:var(--surface);
  box-shadow:var(--ui-shadow-soft);
}
.app .table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.app .table th{
  font-size:11px;font-weight:770;letter-spacing:.055em;text-transform:uppercase;
  color:var(--muted);background:var(--surface2);
  padding:13px 15px;white-space:nowrap;
}
.app .table td{padding:14px 15px;border-bottom:1px solid var(--line);line-height:1.4}
.app .table tr:last-child td{border-bottom:0}
.app .table tbody tr:hover td{background:color-mix(in srgb,var(--surface2) 36%,var(--surface))}
.app .table td,.app .table th{font-variant-numeric:tabular-nums}
.app .progress{background:var(--surface2);height:9px;border-radius:99px}
.app .progress>span{background:var(--accent);border-radius:99px}
.app .market-grid{gap:12px}
.app .market-stat{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);box-shadow:var(--ui-shadow-soft)}
.app .market-stat strong{letter-spacing:-.03em;font-size:18px}
.app .review-card,.app .similar-item{border-color:var(--line);border-radius:17px;background:var(--surface);padding:14px}
.app .divider{background:var(--line);margin:8px 0}
.app .bottom-nav{
  height:calc(var(--navh) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 -6px 25px rgba(25,20,25,.04);
}
.app .bottom-nav-inner{max-width:760px;gap:3px;padding:7px 8px}
.app .nav-btn{
  border-radius:14px;color:var(--muted);font-size:11px;font-weight:730;gap:2px;
  transition:background .18s,color .18s;
}
.app .nav-btn span:first-child{
  font-size:23px;line-height:1.2;min-height:30px;
  min-width:38px;display:grid;place-items:center;border-radius:12px;
}
.app .nav-btn.active{color:var(--accent2)}
.app .nav-btn.active span:first-child{background:var(--ui-tint);color:var(--accent)}
.app .nav-btn:hover{background:var(--surface2)}
.app .overlay{
  z-index:60;background:rgba(18,19,25,.38);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0;
}
.app .sheet{
  background:var(--surface);border:1px solid var(--line);
  border-radius:25px 25px 0 0;padding:20px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:var(--ui-shadow-elevated);max-height:94dvh;
  overscroll-behavior:contain;
}
.app .sheet-head{background:var(--surface);border-bottom-color:var(--line);padding:10px 0 16px}
.app .sheet-head h3{font-size:21px;letter-spacing:-.03em;font-weight:820}
.app .photo-preview{border-radius:20px;border-color:var(--line)}
.app .photo-option{border-radius:15px}
.app .photo-option.selected{border-color:var(--accent)}
.app .clickable:focus-visible,.app button:focus-visible,.app input:focus-visible,.app select:focus-visible,
.app textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 46%,white);outline-offset:2px}
@media(min-width:761px){
 .app .sheet{border-radius:25px;max-height:min(89dvh,1000px);padding:23px 26px}
 .app .overlay{padding:24px}
 .app .sheet-head{top:-23px}
}
@media(max-width:900px){
 .app .container{padding:20px 16px 30px}
 .app .topbar-inner{padding:11px 16px}
 .app .page-head{margin:3px 0 20px;min-height:auto}
 .app .grid{gap:12px}
 .app .card{padding:16px;border-radius:19px}
 .app .stat{min-height:113px}
 .app .stat strong{font-size:clamp(22px,4vw,29px)}
 .app .photo{width:67px;height:67px;flex-basis:67px}
}
@media(max-width:760px){
 .app .topbar-inner{padding:10px 13px}
 .app .container{padding:18px 13px 28px}
 .app .page-head{align-items:flex-start;gap:12px;margin:0 0 19px}
 .app .page-head h1,.app .page-head h2{font-size:clamp(26px,7vw,34px)}
 .app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app .stat{padding:15px;min-height:105px}
 .app .stat strong{font-size:clamp(21px,6vw,30px)}
 .app .toolbar .search{min-width:0;flex-basis:100%}
 .app .import-grid,.app .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app .form-row,.app .form-row-3{grid-template-columns:1fr}
 .app .bottom-nav-inner{padding:5px 4px;gap:0}
 .app .nav-btn{font-size:10px;border-radius:12px;min-width:0}
 .app .nav-btn span:first-child{font-size:22px}
 .app .sheet{padding:17px 16px calc(22px + env(safe-area-inset-bottom));border-radius:23px 23px 0 0}
 .app .table{min-width:520px}
 .app .table th,.app .table td{padding:12px 13px}
 .app .product-card{gap:11px}
 .app .product-actions{gap:6px}
 .app .card .btn.sm{min-height:36px}
}
@media(max-width:400px){
 .app .container{padding:15px 11px 26px}
 .app .grid{gap:9px}
 .app .card{padding:13px;border-radius:17px}
 .app .stat{min-height:102px}
 .app .stat strong{font-size:clamp(18px,5.7vw,23px)}
 .app .stat small{font-size:11px}
 .app .page-head h1,.app .page-head h2{font-size:27px}
 .app .import-card{padding:13px 8px}
 .app .photo{width:59px;height:59px;flex-basis:59px;border-radius:13px}
 .app .nav-btn{font-size:9px}
 .app .nav-btn span:first-child{font-size:21px}
 .app .product-card{flex-wrap:wrap}
 .app .product-main{flex-basis:calc(100% - 75px)}
 .app .btn{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
 .app *, .app *:before, .app *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
 .app{background:white!important}
 .app .card,.app .table-wrap{border-color:#ddd!important;box-shadow:none!important}
 .app .topbar,.app .bottom-nav{display:none!important}
 .app .container{max-width:none;padding:0}
}