/* Layout: app móvil de una columna (máx. 720px), tarjetas suaves sobre fondo frío y barra de pestañas flotante abajo.
   Tokens: bg / surface / field (campos) / fg / muted / line / accent (verde petróleo, único acento) + semánticos warn, bad, ok. */
:root{
  --fs:1;
  --bg:#f3f5f4; --surface:#ffffff; --field:rgba(100,115,108,.13); --fg:#0b0f0e; --muted:#58645f; --line:#e2e6e4;
  --accent:#15803d; --accent-fg:#ffffff; --accent-soft:#dcefe3; --accent-2:#0f5f2e;
  --warn:#94570a; --warn-soft:#fdf0d6; --bad:#b3261e; --bad-soft:#fde6e3; --ok:#1a7a3f; --ok-soft:#dcf3e4;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px -14px rgba(0,0,0,.16);
  --shadow-up:0 -1px 0 rgba(0,0,0,.04),0 14px 34px -10px rgba(0,0,0,.28);
  --scrim:rgba(10,15,12,.13);
  --gk:1; --glass:rgba(255,255,255,min(1,max(.1,calc(.56*var(--gk))))); --glass-strong:rgba(255,255,255,min(1,max(.4,calc(.72*var(--gk))))); --glass-edge:rgba(255,255,255,.85);
  --glass-hi:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 14px rgba(255,255,255,.28);
  --glass-drop:0 1px 2px rgba(0,0,0,.06),0 14px 34px -12px rgba(0,0,0,.20);
  --blur:blur(22px) saturate(1.9); --lens:rgba(255,255,255,.34);
  --blob1:rgba(255,255,255,.95); --blob2:rgba(255,255,255,.75); --blob3:rgba(255,255,255,.6);
  --ga1:rgba(255,255,255,.95); --ga2:rgba(255,255,255,.7); --ga3:rgba(255,255,255,.55);
  --f-display:'DM Sans','Segoe UI',system-ui,sans-serif;
  --f-body:'DM Sans','Segoe UI',system-ui,sans-serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#111111; --ga1:color-mix(in srgb,var(--accent) 30%,transparent); --ga2:color-mix(in srgb,var(--accent) 17%,transparent); --ga3:color-mix(in srgb,var(--accent) 11%,transparent); --field:rgba(140,160,150,.14); --fg:#eef2f0; --muted:#95a39d; --line:#222a27;
  --accent:#22b358; --accent-fg:#04140a; --accent-soft:#0f2a1a; --accent-2:#4ade80;
  --warn:#f2b862; --warn-soft:#3a2c12; --bad:#ff9088; --bad-soft:#3e1b19; --ok:#72d996; --ok-soft:#153522;
  --shadow:0 0 0 1px rgba(255,255,255,.04);
  --shadow-up:0 0 0 1px rgba(255,255,255,.07),0 14px 34px -10px rgba(0,0,0,.6);
  --scrim:rgba(0,4,2,.55);
  --glass:rgba(22,29,26,min(1,max(.1,calc(.55*var(--gk))))); --glass-strong:rgba(26,34,31,min(1,max(.4,calc(.70*var(--gk))))); --glass-edge:rgba(255,255,255,.16);
  --glass-hi:inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 14px rgba(255,255,255,.04);
  --glass-drop:0 1px 2px rgba(0,0,0,.3),0 16px 36px -12px rgba(0,0,0,.55);
  --lens:rgba(255,255,255,.13);
  --blob1:rgba(34,197,94,.20); --blob2:rgba(90,110,100,.18); --blob3:rgba(21,128,61,.14);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#111111; --ga1:color-mix(in srgb,var(--accent) 30%,transparent); --ga2:color-mix(in srgb,var(--accent) 17%,transparent); --ga3:color-mix(in srgb,var(--accent) 11%,transparent); --field:rgba(140,160,150,.14); --fg:#eef2f0; --muted:#95a39d; --line:#222a27;
  --accent:#22b358; --accent-fg:#04140a; --accent-soft:#0f2a1a; --accent-2:#4ade80;
  --warn:#f2b862; --warn-soft:#3a2c12; --bad:#ff9088; --bad-soft:#3e1b19; --ok:#72d996; --ok-soft:#153522;
  --shadow:0 0 0 1px rgba(255,255,255,.04);
  --shadow-up:0 0 0 1px rgba(255,255,255,.07),0 14px 34px -10px rgba(0,0,0,.6);
  --scrim:rgba(0,4,2,.55);
  --glass:rgba(22,29,26,min(1,max(.1,calc(.55*var(--gk))))); --glass-strong:rgba(26,34,31,min(1,max(.4,calc(.70*var(--gk))))); --glass-edge:rgba(255,255,255,.16);
  --glass-hi:inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 14px rgba(255,255,255,.04);
  --glass-drop:0 1px 2px rgba(0,0,0,.3),0 16px 36px -12px rgba(0,0,0,.55);
  --lens:rgba(255,255,255,.13);
  --blob1:rgba(34,197,94,.20); --blob2:rgba(90,110,100,.18); --blob3:rgba(21,128,61,.14);
  color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 38% at 12% 0%,var(--blob1),transparent 70%),radial-gradient(55% 40% at 100% 22%,var(--blob2),transparent 70%),radial-gradient(70% 45% at 25% 100%,var(--blob3),transparent 70%)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:.9rem;line-height:1.45;padding-inline:16px;padding-block:0 108px;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin-inline:auto;min-width:0}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.015em}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:600;letter-spacing:-.01em}

/* encabezado */
header.top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"biz out";position:relative;align-items:center;column-gap:12px;row-gap:6px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 6px}
.bizlabel{grid-area:biz}.head-r{grid-area:out}
header.top h1{font-size:1.2rem}
.bizlabel{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0;line-height:1.15}
.head-r{position:relative}
.head-r .pill{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);color:var(--muted);box-shadow:var(--glass-hi);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bizname{background:var(--field);border:0;border-radius:var(--r-sm);font-family:var(--f-display);font-weight:700;font-size:1.2rem;width:100%;min-width:0;padding:6px 10px;color:var(--fg)}
.note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-md);padding:10px 12px;font-size:.9rem;margin-block:8px}
.note button{margin-left:8px}

/* tarjetas y secciones */
.card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;margin-block:14px;box-shadow:var(--glass-hi),var(--glass-drop)}
.card h2{font-size:1rem;font-weight:700}
.item .card{box-shadow:none;background:var(--field);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r-md);padding:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1 1 140px;min-width:0}
.hint{color:var(--muted);font-size:.9rem}
.sep{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.empty{color:var(--muted);text-align:center;padding:22px 8px;background:var(--field);border-radius:var(--r-md);font-size:.9rem}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}

/* campos */
label.f,div.f{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.01em}
/* Campos lado a lado: si un título se parte en dos líneas, las cajas siguen alineadas abajo (el título queda arriba) */
.row>label.f,.row>div.f{align-self:stretch}
.row>label.f>input:not([type=checkbox]):not([type=radio]),.row>label.f>select,.row>label.f>textarea{margin-top:auto}
input,select,textarea{background:var(--field);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);border-radius:var(--r-md);padding:12px 14px;width:100%;min-width:0;color:var(--fg);transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--muted);opacity:.75}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);background:var(--glass-strong);box-shadow:0 0 0 4px var(--accent-soft)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=search]{-webkit-appearance:none;appearance:none}

/* botones */
.btn{border:1px solid var(--glass-edge);background:var(--glass-strong);box-shadow:var(--glass-hi),0 2px 8px -2px rgba(0,0,0,.14);border-radius:var(--r-md);padding:11px 16px;cursor:pointer;font-weight:700;min-height:46px;transition:transform .12s,filter .15s,background .15s}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:scale(.975)}
.btn.primary{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--accent);color:var(--accent-fg);border-color:rgba(255,255,255,.35);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 10px 20px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn.danger{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.btn.small{padding:7px 12px;min-height:36px;font-size:.9rem;border-radius:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:var(--surface);--glass-strong:var(--surface)}}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:inherit}
a.btn.primary{color:var(--accent-fg)}

/* listas */
.list{display:flex;flex-direction:column}
.item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);min-width:0}
.item:first-child{border-top:0}
.item .main{min-width:0;flex:1}
.item .t{font-weight:700;overflow-wrap:break-word}
.item .s{color:var(--muted);font-size:.9rem}
.pill{display:inline-block;border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pill.low{background:var(--warn-soft);color:var(--warn)}
.pill.out{background:var(--bad-soft);color:var(--bad)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.qty{display:flex;align-items:center;gap:2px;background:var(--field);border:1px solid var(--glass-edge);border-radius:99px;padding:3px}
.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-edge);background:var(--glass-strong);cursor:pointer;font-weight:800;font-size:1rem;box-shadow:var(--glass-hi),0 2px 6px -2px rgba(0,0,0,.2);line-height:1}
.qty span{min-width:26px;text-align:center}
.totals{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.totals .r{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.totals .r .num{color:var(--fg)}
.totals .big{align-items:baseline;color:var(--fg)}
.totals .big span:first-child{font-size:.9rem;font-weight:700;line-height:1.25}
.totals .big .num{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* indicadores */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:16px;box-shadow:var(--glass-hi),var(--glass-drop);min-width:0}
.tile .k{color:var(--muted);font-size:.8rem;font-weight:600}
.tile .v{font-family:var(--f-display);font-size:1.5rem;font-weight:800;overflow-wrap:anywhere;letter-spacing:-.02em;margin-top:2px}
.tile .v.num{font-weight:800}
.tile .hint{margin-top:4px}
.tiles .tile:first-child{grid-column:1/-1;background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-fg);border-color:rgba(255,255,255,.35)}
.tiles .tile:first-child .k,.tiles .tile:first-child .hint{color:inherit;opacity:.85}
.tiles .tile:first-child .v{font-size:2rem}

/* comprobante */
.receipt{white-space:pre-wrap;background:var(--field);border-radius:var(--r-md);padding:14px;font-family:var(--f-body);font-size:.8rem;line-height:1.5;overflow-wrap:anywhere;border:1.5px dashed var(--line)}

/* barra de pestañas de cristal con cápsula que se desliza */
nav.tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:696px;margin-inline:auto;background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(2.1);backdrop-filter:blur(30px) saturate(2.1);border:1px solid var(--glass-edge);border-radius:32px;box-shadow:var(--glass-hi),0 18px 40px -12px rgba(0,0,0,.32);display:flex;justify-content:space-between;padding:6px;gap:0;z-index:10}
nav.tabs .ind{position:absolute;left:0;top:6px;height:52px;width:0;border-radius:26px;background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),0 6px 16px -6px rgba(0,0,0,.35);pointer-events:none;opacity:0}
nav.tabs .ind.on{opacity:1}
nav.tabs button{position:relative;z-index:1;flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:26px;padding:8px 2px 7px;font-weight:700;font-size:.7rem;letter-spacing:.005em;color:var(--muted);cursor:pointer;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:color .2s}
nav.tabs button svg{width:22px;height:22px;fill:currentColor;stroke:none;flex-shrink:0}
nav.tabs button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.tabs button[aria-selected="true"]{color:var(--accent)}
nav.tabs.many{padding:5px}nav.tabs.many button{font-size:.7rem;letter-spacing:0;padding-inline:0}

/* avisos */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--fg) 86%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);color:var(--bg);padding:11px 18px;border-radius:16px;font-weight:600;font-size:.9rem;z-index:60;max-width:calc(100vw - 32px);box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:pop .2s ease-out}@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}
  section[role=tabpanel]:not([hidden]){animation:fade .24s ease-out}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
  section[role=tabpanel][data-dir="r"]:not([hidden]){animation:inr .34s cubic-bezier(.2,.8,.2,1)}
  section[role=tabpanel][data-dir="l"]:not([hidden]){animation:inl .34s cubic-bezier(.2,.8,.2,1)}
  @keyframes inr{from{opacity:0;transform:translateX(38px)}}@keyframes inl{from{opacity:0;transform:translateX(-38px)}}
  nav.tabs .ind{transition:translate .5s cubic-bezier(.3,1.3,.5,1),scale .4s cubic-bezier(.3,1.4,.5,1),width .45s cubic-bezier(.3,1.25,.5,1),opacity .2s,background .25s,box-shadow .25s}
  nav.tabs .ind.drag{transition:translate 0s,scale .3s cubic-bezier(.3,1.5,.5,1),width .15s,background .25s,box-shadow .25s}
  nav.tabs button{transition:color .2s,transform .28s cubic-bezier(.3,1.5,.5,1)}
  .modal{animation:scrim .18s ease-out}.dlg{animation:sheet .22s cubic-bezier(.2,.8,.2,1)}
  @keyframes scrim{from{opacity:0}}@keyframes sheet{from{opacity:0;transform:translateY(16px)}}
}

/* acceso */
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding-block:24px;background:radial-gradient(120% 60% at 50% 0%,var(--accent-soft),transparent 70%)}
.auth .card{width:100%;max-width:390px;margin:0;padding:24px;gap:16px}
.auth h1{font-size:1.5rem;font-weight:800}
.pinbox{letter-spacing:.5em;text-align:center;font-family:var(--f-display);font-size:1.5rem;font-weight:700}

/* fotos */
.thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--field);flex-shrink:0;display:block}
.thumb.big{width:76px;height:76px;border-radius:16px}
.thumb.big[alt="Logo"]{object-fit:contain;background:transparent}
.thumb.ph{display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:1.2rem;background:var(--accent-soft)}
.thumb.big.ph{font-size:1.5rem}

/* ventanas emergentes: hoja inferior en el celular */
.modal{position:fixed;inset:0;z-index:50;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:var(--glass-strong);-webkit-backdrop-filter:blur(34px) saturate(2);backdrop-filter:blur(34px) saturate(2);border:1px solid var(--glass-edge);color:var(--fg);border-radius:30px;padding:22px;width:min(100%,400px);display:flex;flex-direction:column;gap:12px;box-shadow:var(--glass-hi),0 24px 60px -12px rgba(0,0,0,.45)}
.dlg h2{margin:0;font-size:1.2rem;font-weight:800}
.dlg.scan{width:min(100%,440px)}
.scanwrap{position:relative;border-radius:var(--r-md);overflow:hidden;background:#000}
.scanwrap video{display:block}
.scanframe{position:absolute;left:12%;right:12%;top:26%;bottom:26%;border:3px dashed #fff;border-radius:14px;box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 0 9999px rgba(0,0,0,.28);pointer-events:none}
.scancount{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.7);color:#fff;font-weight:700;font-size:.9rem;padding:4px 10px;border-radius:99px;text-shadow:0 1px 2px #000}
.scantorch{position:absolute;right:10px;bottom:10px;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.65);color:#fff;font-weight:700;font-size:.9rem;padding:7px 12px;border-radius:99px;cursor:pointer}
.scantorch[aria-pressed="true"]{background:#FFCC00;color:#111;border-color:#FFCC00}
.dlg.scan.scanok{box-shadow:0 0 0 4px #34C759,var(--glass-hi),0 24px 60px -12px rgba(0,0,0,.45)}
.dlg.scan.scanerr{box-shadow:0 0 0 4px #FF3B30,var(--glass-hi),0 24px 60px -12px rgba(0,0,0,.45)}
.dlg.scan.scanwarn{box-shadow:0 0 0 4px #FFCC00,var(--glass-hi),0 24px 60px -12px rgba(0,0,0,.45)}
.dlg.scan video{width:100%;aspect-ratio:4/3;max-width:100%;object-fit:cover;background:#000;border-radius:var(--r-md)}
@media (max-width:520px){
  .modal{align-items:flex-end;padding:0}
  .dlg,.dlg.scan{width:100%;border-radius:30px 30px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px))}
}

.btn.small.x{min-width:36px;padding-inline:0;font-size:.8rem}
#vdone a.btn.primary{flex:1 1 100%}
.pinbox{font-size:1.2rem}

body{overflow-x:hidden}

/* arrastrar la barra: la cápsula se levanta como una lente de cristal */
nav.tabs{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
nav.tabs .ind{translate:0 0;scale:1}
nav.tabs .ind.drag{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 55%),var(--lens);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:brightness(1.22) saturate(2.4);backdrop-filter:brightness(1.22) saturate(2.4);box-shadow:var(--glass-hi),0 0 0 1px rgba(255,255,255,.35),0 18px 34px -8px rgba(0,0,0,.45)}
nav.tabs.lift{cursor:grabbing}
nav.tabs.lift button.hot{color:var(--accent);transform:scale(1.13)}

/* personalización */
textarea{resize:vertical;min-height:72px}
.bizlabel{display:flex;align-items:center;gap:10px}
.logo{height:36px;width:auto;max-width:96px;object-fit:contain;border-radius:9px;background:transparent;flex:none}
.logo.big{height:64px;max-width:200px;align-self:center;margin-bottom:4px}
/* Logo oscuro en modo oscuro: se invierte igual que el crédito "Diseñado por" (la marca html[data-logo-dark] la pone app.js al medir el logo) */
@media (prefers-color-scheme:dark){html[data-logo-dark]:not([data-theme="light"]) .logo{filter:invert(1) hue-rotate(180deg)}}
html[data-theme="dark"][data-logo-dark] .logo{filter:invert(1) hue-rotate(180deg)}
label.chk{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;color:var(--fg);padding:6px 2px;cursor:pointer}
label.chk input{width:20px;height:20px;flex:none;padding:0;accent-color:var(--accent)}
.swatches{display:flex;gap:12px;flex-wrap:wrap;padding:4px 0}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--glass-edge);background:var(--sw);cursor:pointer;padding:0;box-shadow:var(--glass-drop)}
.swatch[aria-pressed="true"]{outline:3px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}

/* pantalla de carga y crédito */
#splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(90% 55% at 50% 30%,var(--accent-soft),transparent 70%),var(--bg);transition:opacity .3s ease;opacity:1}
#splash.off{opacity:0;pointer-events:none}
.orb{position:relative;width:74px;height:74px;display:grid;place-items:center}
.orb i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);animation:orbspin 1.1s linear infinite}
.orb i:nth-child(2){inset:10px;border-top-color:var(--accent-2);animation-duration:1.5s;animation-direction:reverse;opacity:.8}
.orb-logo{position:absolute;inset:19px;width:36px;height:36px;border-radius:11px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);animation:logopulse 1.6s ease-in-out infinite}
.splash-t{font-family:var(--f-display);font-weight:700;color:var(--muted);letter-spacing:.02em}
@keyframes orbspin{to{transform:rotate(360deg)}}
@keyframes orbpulse{50%{transform:scale(.7);opacity:.7}}
@keyframes logopulse{50%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.orb i:not(:nth-child(3)){animation:none;border-color:var(--accent-soft)}}
.credit{text-align:center;font-size:.7rem;color:var(--muted);opacity:.85;letter-spacing:.03em;padding:14px 0 4px}
.auth{flex-direction:column;gap:6px}
.auth>.card{width:100%}

.dlg.ticketdlg{width:min(100%,440px);align-items:stretch}.tprev{background:#e7e7e2;border-radius:var(--r-md,16px);padding:12px;display:flex;justify-content:center;max-height:60dvh;overflow:auto}.tprev iframe{background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.25);flex:none}

.item.inv{flex-wrap:wrap;align-items:flex-start;row-gap:10px}
.item.inv>.row{flex:1 1 100%}
.item.inv .t{font-size:1rem;line-height:1.25}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.chip{border:1px solid var(--line);background:var(--field);color:var(--fg);border-radius:8px;padding:2px 8px;font-size:.8rem;font-weight:600}
.item.inv>.row{gap:8px}.item.inv>.row .btn{flex:1 1 40%;padding-inline:8px}
h3.sub{margin:18px 0 4px;font-size:.9rem}

/* ---- interfaz más despejada ---- */
.card{padding:20px;gap:16px;margin-block:16px}
label.f,div.f{gap:7px}
.hint{line-height:1.5}
.seg{display:flex;gap:4px;padding:4px;margin-block:14px 0;background:var(--field);border-radius:14px}
.seg button{flex:1;min-width:0;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;padding:10px 6px;border-radius:11px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 4px rgba(20,30,50,.12)}
.card.fold>h2{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none;margin:-4px 0}
.card.fold>h2::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.card.fold.closed>h2::after{transform:rotate(-45deg)}
.card.fold.closed:not(.sf-open)>*:not(h2){display:none}
.card.fold.closed:not(.sf-open){gap:0}
.card[hidden]{display:none}
.item.inv{padding-block:16px}

.credit .by{display:inline-flex;align-items:center;gap:6px}
.credit img{height:60px;width:auto;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .credit img{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme="dark"] .credit img{filter:invert(1) hue-rotate(180deg)}

.sbar{position:static;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:10px 0;margin-top:10px}
.sbar .f{margin:0;min-width:0}.sbar .grow{flex:1 1 220px}

details.more{margin-top:2px}
details.more>summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.9rem;padding:6px 0;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:'+ ';font-weight:800}
details.more[open]>summary::before{content:'– '}
details.more>.row,details.more>.f{margin-top:8px}

#vpick{max-height:min(46vh,400px);overflow-y:auto;overscroll-behavior:contain;margin-inline:-4px;padding-inline:4px}
#tab-vender{padding-bottom:84px}
.vbar{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:696px;margin-inline:auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(10,20,40,.35)}
.vbar[hidden]{display:none}
.vbar .vbi{display:flex;flex-direction:column;min-width:0}
.vbar .vbi b{font-size:1.2rem}
.vbar .btn{flex:none;min-width:120px}

.qpick{max-height:min(40vh,320px);overflow-y:auto;overscroll-behavior:contain}
.qedit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.qedit label{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--muted)}
.qedit input{width:92px;min-width:0;padding:6px 8px}
.qedit label:first-child input{width:52px}

.psearch{margin-bottom:6px}
.pshint{display:block;margin-top:4px;min-height:0}
.pshint:empty{display:none}
label.f>select[size]{height:auto;padding:4px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-block:12px}
.kpis>div{background:var(--field);border-radius:var(--r-md);padding:10px 12px;min-width:0}
.kpis b{display:block;font-size:1rem;overflow-wrap:anywhere}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbl{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.hbn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbt{height:8px;border-radius:6px;background:var(--field);margin-top:4px;overflow:hidden}
.hbf{height:100%;background:var(--accent);border-radius:6px}

.linkbtn{background:none;border:0;color:var(--accent-2);font:inherit;font-size:.9rem;font-weight:600;padding:8px;cursor:pointer;text-decoration:underline}
.reccode{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border-radius:var(--r-md);padding:12px 14px;font-size:1.2rem;letter-spacing:.06em}
.warn{color:#b45309;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .warn{color:#fbbf24}}
:root[data-theme="dark"] .warn{color:#fbbf24}

.pedit{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.pe{width:7.5em;min-width:0;padding:6px 8px;border-radius:10px;font-variant-numeric:tabular-nums}

/* Botón flotante de nueva venta */
.fab{position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:15;width:54px;height:54px;border-radius:50%;border:1px solid var(--glass-edge);background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink,#fff);box-shadow:0 12px 26px -8px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fab b{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--bg,#fff);color:var(--accent);border:2px solid var(--accent);font-size:.7rem;display:flex;align-items:center;justify-content:center;padding:0 4px}
.fab[hidden]{display:none}
/* Inicio */
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.quick .btn{min-height:48px}
/* Tablet horizontal: productos a la izquierda y carrito a la derecha */
@media (min-width:900px){
  #app[data-tab="vender"] .wrap{max-width:1180px}
  #app[data-tab="vender"] #tab-vender:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
  #app[data-tab="vender"] #tab-vender>.card:nth-of-type(2){position:sticky;top:12px;max-height:calc(100vh - 100px);overflow:hidden;display:flex;flex-direction:column;gap:12px}
  #app[data-tab="vender"] .cart-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:4px}
  #app[data-tab="vender"] .cart-foot{flex:none;border-top:1px solid var(--line);padding-top:12px}
  #app[data-tab="vender"] #tab-vender>.card:first-of-type{position:sticky;top:12px}
  #app[data-tab="vender"] #tab-vender>#vdone{grid-column:1/-1}
  #app[data-tab="vender"] #vpick{max-height:calc(100vh - 290px);overflow-y:auto}
  #app[data-tab="vender"] .vbar{display:none!important}
  #app[data-tab="vender"] .fab{display:none}
}

.moregrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.morebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 4px;border-radius:22px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--fg);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer}
.morebtn svg{width:26px;height:26px;fill:currentColor;stroke:none}
.morebtn svg.ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.morebtn.on{color:var(--accent);border-color:var(--accent)}

.gsbar{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:0 16px;min-height:52px;border-radius:26px;border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi);color:var(--muted);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.gsbar svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gsbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsbar kbd{font:inherit;font-size:.7rem;padding:2px 7px;border-radius:8px;border:1px solid var(--glass-edge);color:var(--muted)}
@media (hover:none){.gsbar kbd{display:none}}
#gsmodal{align-items:flex-start;padding-top:max(16px,env(safe-area-inset-top,0px))}
#gsmodal .dlg{width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:10px;overflow:hidden}
#gsres{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px}
#gsres h3{margin:8px 0 2px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.gsrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:16px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--fg);font:inherit;cursor:pointer}
.gsrow:hover,.gsrow:focus-visible{border-color:var(--accent)}
.gsrow .gt{font-weight:700;overflow-wrap:anywhere}.gsrow .gs{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.gsrow .gr{font-weight:700;white-space:nowrap}

.toast.undo{display:flex;align-items:center;gap:14px;pointer-events:auto;max-width:min(92vw,460px)}
.toast .undobtn{flex:none;border:0;border-radius:12px;padding:7px 14px;font:inherit;font-weight:800;background:var(--accent);color:var(--accent-fg);cursor:pointer;min-height:36px}

html{font-size:calc(100% * var(--fs,1))}
.seg{display:flex;gap:8px;flex-wrap:wrap}.seg .btn{flex:1 1 0}
html[data-big] .btn{min-height:52px;padding-inline:18px}
html[data-big] .btn.small{min-height:46px}
html[data-big] input,html[data-big] select,html[data-big] textarea{min-height:52px}
html[data-big] .chk{min-height:44px}
html[data-big] nav.tabs button{min-height:60px}
html[data-hc]{--muted:#3d4a60;--line:#8a97ad;--glass-edge:rgba(40,60,100,.38)}
@media (prefers-color-scheme:dark){html[data-hc]:not([data-theme="light"]){--muted:#c3cee0;--line:#52647f;--glass-edge:rgba(200,215,245,.4)}}
html[data-hc] .hint,html[data-hc] .tile .k,html[data-hc] .s{color:var(--muted)}

.logo.hero{height:auto;max-height:120px;max-width:min(260px,80%);align-self:center;margin-bottom:6px;object-fit:contain}
.welcome{margin:-4px 0 2px;text-align:center;color:var(--muted);font-size:1rem;text-wrap:balance}
.swatch.custom{position:relative;overflow:hidden;display:inline-block}
.swatch.custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.swatch.custom[data-pressed="true"]{outline:3px solid var(--fg);outline-offset:2px}

.goal{display:flex;flex-direction:column;gap:6px;padding:6px 0}
.goalt{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:600}
.bar{height:12px;border-radius:99px;background:var(--accent-soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}

.vgroup .vopt{cursor:pointer;min-height:36px;padding:4px 10px}
.vgroup .vopt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.vgroup .vopt:disabled{opacity:.45;cursor:not-allowed}

.asearch{display:flex;align-items:center;gap:10px;margin-top:12px;padding:0 12px 0 16px;min-height:50px;border-radius:26px;border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.asearch svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.asearch input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--fg);padding:12px 0;outline:none;box-shadow:none}
#ascount{margin:8px 4px 0}
.card.fold.sf-off{display:none}
.sf-hit{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;background:var(--accent-soft)}

/* ===== Estilos de pantalla: "mostrador" (oscuro, números tipo máquina) y "color" (bloques y colores vivos). "clasico" = el vidrio de siempre. ===== */
html:root[data-style="mostrador"]{--blur:none;--lens:transparent;--blob1:transparent;--blob2:transparent;--blob3:transparent;--glass-hi:none;--shadow:none}
html:root[data-style="mostrador"]{--r-lg:16px;--r-md:12px;--r-sm:8px}
html:root[data-style="mostrador"]:not([data-theme="light"]){--bg:#000000;--surface:#111111;--field:#1f232c;--fg:#eceef2;--muted:#9aa3b2;--line:#2a2f3a;--glass:#171a21;--glass-strong:#1f232c;--glass-edge:#2a2f3a;--glass-drop:none;--shadow-up:0 0 0 1px #2a2f3a,0 14px 34px -10px rgba(0,0,0,.7);--scrim:rgba(0,0,0,.6);--warn:#f2b862;--warn-soft:#3a2c12;--bad:#ff9a85;--bad-soft:#3b1d17;--ok:#72d996;--ok-soft:#153522;color-scheme:dark}
html:root[data-style="mostrador"][data-theme="light"]{--bg:#f3f4f6;--surface:#fff;--field:#e9ebf0;--fg:#14161c;--muted:#5a6372;--line:#d9dde5;--glass:#fff;--glass-strong:#fff;--glass-edge:#d9dde5;--glass-drop:none;color-scheme:light}
/* piezas comunes: planas, sin brillos de vidrio */
html[data-style="mostrador"] .btn{box-shadow:none;background:var(--glass-strong)}
html[data-style="mostrador"] .btn.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent;box-shadow:none}
html[data-style="mostrador"] .card,html[data-style="mostrador"] .tile{border-color:var(--line)}
html[data-style="mostrador"] .num,html[data-style="mostrador"] .tile .v{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* tarjeta principal de Inicio */
html[data-style="mostrador"] .tiles .tile:first-child{background:var(--surface);color:var(--fg);border-color:var(--line)}
html[data-style="mostrador"] .tiles .tile:first-child .v{color:var(--accent);font-size:2.6rem}
html[data-style="mostrador"] .tiles .tile:first-child .k{letter-spacing:.08em;font-size:.7rem;font-weight:700}
/* barra de pestañas */
html[data-style="mostrador"] nav.tabs{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-up);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-style="mostrador"] nav.tabs .ind{background:var(--accent-soft);border-color:transparent;box-shadow:none;border-radius:16px}
/* barra de cobro y campos */
html[data-style="mostrador"] .vbar{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-style="mostrador"] .vbar{background:var(--accent);color:var(--accent-fg);border-color:transparent;border-radius:20px}
html[data-style="mostrador"] .vbar .btn{background:#fff;color:var(--accent);border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){html[data-style="mostrador"]:not([data-theme="light"]) .vbar .btn{color:var(--accent-fg)}}
html[data-style="mostrador"][data-theme="dark"] .vbar .btn{color:var(--accent-fg)}
html[data-style="mostrador"] .seg button.on{background:var(--accent);color:var(--accent-fg)}
html[data-style="mostrador"] body{background:var(--bg)}
html[data-style="mostrador"] body::before{display:none}
html[data-style="mostrador"] .vbar .vbi,html[data-style="mostrador"] .vbar .vbi *{color:inherit}

/* cuenta: círculo con la inicial y menú */
.avatar{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);font-family:var(--f-display);font-weight:800;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.avatar:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.umenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:200px;max-width:80vw;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-up);padding:6px;display:flex;flex-direction:column;gap:2px}
.umenu[hidden]{display:none}
.uwho{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
.uwho b{display:block;font-size:1rem}.uwho span{display:block;font-size:.8rem;color:var(--muted);font-weight:600}
.uitem{border:0;background:none;text-align:left;padding:12px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;min-height:44px;color:var(--fg)}
.uitem:hover,.uitem:focus-visible{background:var(--accent-soft)}.uitem.out{color:var(--bad)}

/* Entrada con teclado numérico y puntos del PIN */
.auth.pad .card{display:flex;flex-direction:column;gap:14px}
.auth.pad .ahero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.auth.pad .ahero h1,.auth.pad .ahero p{margin:0}
.auth.pad .asheet{display:flex;flex-direction:column;gap:14px}
.auth.pad .asheet>.credit{padding-top:4px}
.pinfield{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;pointer-events:none;margin:0;padding:0}
.pindots{display:flex;gap:14px;justify-content:center;align-items:center;min-height:26px}
.pindots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:transparent;transition:background .12s,border-color .12s}
.pindots i.on{background:var(--accent);border-color:var(--accent)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.padk{height:60px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--field);color:var(--fg);font-family:var(--f-display);font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.padk:active{background:var(--accent-soft)}
.padk:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.padk.del{border-color:transparent;background:none;color:var(--muted)}
.padk.pkk.pk-wait,.padk.pkk.pk-ok{opacity:1;cursor:default}
.padk.pkk.pk-wait{color:var(--accent)}
.padk.pkk.pk-wait svg{animation:pkpulse 1.1s ease-in-out infinite}
.padk.pkk.pk-ok{color:var(--ok)}
.padk.pkk.pk-ok svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:pkdraw .3s ease-out forwards}
@keyframes pkpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.5}}
@keyframes pkdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.padk.pkk.pk-wait svg{animation:pkpulse 2.4s ease-in-out infinite}.padk.pkk.pk-ok svg path{animation:none;stroke-dashoffset:0}}
.auth.pad #abtn{min-height:56px;font-size:1.2rem}
/* Mostrador */
html[data-style="mostrador"] .pindots i{border-radius:5px;width:18px;height:18px}
html[data-style="mostrador"] .padk{border-radius:16px}
html[data-style="mostrador"] .auth.pad .ahero h1{font-size:2rem}
html[data-style="mostrador"]:not([data-theme="light"]) .credit img{filter:invert(1) hue-rotate(180deg)}

/* revisión: cifras que no se parten, títulos plegables fáciles de tocar y contraste del texto gris */
.tile .v.num,.kpis b,.kpis .num{white-space:nowrap;overflow:hidden;overflow-wrap:normal;text-overflow:clip}
.card.fold>h2{min-height:44px;margin:-8px 0}
html:root[data-style="mostrador"][data-theme="light"]{--muted:#4f5868}
html:root[data-style="mostrador"][data-theme="light"] .pill{color:var(--fg)}
/* entrada: sin el espacio extra de la barra inferior y ajustada a celulares pequeños */
body:has(#auth:not([hidden])){padding-bottom:0}
@media (max-height:720px){
  .padk{height:48px;font-size:1.2rem}.pinpad{gap:8px}
  .auth.pad .card,.auth.pad .asheet{gap:8px}
  .auth.pad .logo.hero{max-height:56px}
  .auth.pad .ahero h1{font-size:1.5rem}
  .auth.pad .asheet>.credit{padding-top:0}.auth.pad .credit img{height:40px}
  .auth.pad #abtn{min-height:48px}
}
@media (max-height:620px){.auth.pad .credit img{height:30px}.auth.pad .asheet>.credit{font-size:.7rem}.auth.pad .ahero h1{font-size:1.2rem}.padk{height:44px}}

/* Auditoría v87: el botón flotante ya no tapa el final de las listas; etiquetas mínimas legibles */
#app:not([data-tab="vender"]) .wrap{padding-bottom:calc(148px + env(safe-area-inset-bottom,0px))}
html[data-style="mostrador"] .tiles .tile:first-child .k{font-size:.8rem}
nav.tabs.many button{font-size:.7rem}

/* Pantalla de carga por pasos */
#splash{gap:14px}
.sp-logo{width:60px;height:60px;border-radius:17px;box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 38%,transparent);animation:logopulse 1.8s ease-in-out infinite}
.sp-name{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:.01em;margin-bottom:6px}
.sp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;width:min(260px,70vw);font-size:.9rem}
.sp-steps li{display:flex;align-items:center;gap:11px;color:var(--muted);opacity:.5;transition:opacity .25s,color .25s}
.sp-steps li.on,.sp-steps li.done{opacity:1}
.sp-steps li.on{color:var(--fg)}
.sp-steps li.done{color:var(--muted)}
.sp-steps b{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--muted) 45%,transparent);flex:none;position:relative;box-sizing:border-box;transition:background .2s,border-color .2s}
.sp-steps li.on b{border-color:var(--accent-soft,#ccc);border-top-color:var(--accent);animation:orbspin .8s linear infinite}
.sp-steps li.done b{background:var(--accent);border-color:var(--accent)}
.sp-steps li.done b::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:8px;border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)}
#splash .splash-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sp-steps li.on b{animation:none;border-color:var(--accent)}.sp-logo{animation:none}}

/* Personalizar barra e Inicio */
.homeoff{display:none!important}
.persrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line,rgba(128,128,128,.25))}
.persrow:last-child{border-bottom:0}
.persrow .pn{flex:1;min-width:0;font-weight:600}
.persrow .btn.small{min-width:40px;min-height:40px;padding:0}
.persrow .pchk{margin:0;flex:none;white-space:nowrap}

.sp-logo.img{object-fit:contain;background:#fff;padding:6px;box-sizing:border-box}
.sp-by{font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-top:6px}

/* Limpieza: menú «Más» por producto, filtro y subpestañas de Inventario */
.pmenu{display:inline-block;position:relative;max-width:100%}
.pmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.pmenu>summary::-webkit-details-marker{display:none}
.pmenu[open]>summary{background:var(--accent-soft,rgba(128,128,128,.15))}
.pmlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;flex-basis:100%;max-width:100%}
.item .row:has(.pmenu){align-items:flex-start}
.item .row:has(.pmenu[open]) .pmenu{flex-basis:100%}
#invseg{overflow-x:auto;scrollbar-width:none}
#invseg::-webkit-scrollbar{display:none}
#invseg button{white-space:nowrap;flex:1 0 auto;padding-inline:9px;font-size:.9rem}
#isbar .f[hidden]{display:none}

/* Limpieza de Inicio */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gchk{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);vertical-align:-3px;margin-right:9px;box-sizing:border-box;position:relative}
.gchk.done{background:var(--accent);border-color:var(--accent)}
.gchk.done::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:8px;border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tiles .tile:last-child:nth-child(even){grid-column:1/-1}
.quick .btn:last-child:nth-child(odd){grid-column:1/-1}

/* Ajustes en secciones */
.sec-off{display:none!important}
.ajhub{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ajrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface,var(--field));color:var(--fg);font:inherit;cursor:pointer;min-height:64px}
.ajrow[hidden]{display:none}
.ajic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft,rgba(128,128,128,.15));color:var(--accent);display:grid;place-items:center;flex:none}
.ajic svg{width:20px;height:20px;fill:currentColor;stroke:none}
.ajtx{flex:1;min-width:0}.ajtx b{display:block;font-size:1rem}.ajtx span{display:block;color:var(--muted);font-size:.9rem;line-height:1.35;margin-top:2px}
.ajchev{color:var(--muted);font-size:1.2rem;flex:none}
.ajbar{display:flex;align-items:center;gap:12px;margin-top:12px}
.ajbar[hidden]{display:none}
.ajbar h2{margin:0;font-size:1.2rem}
.ajbar .btn{min-height:40px}
.ajhub[hidden]{display:none}

#cntstart{margin-top:12px}

/* Escritorio: menú lateral, contenido ancho y listas en dos columnas */
@media (min-width:1100px){
  body{padding-inline:24px 24px;padding-left:260px;padding-block:0 32px}
  nav.tabs{left:16px;right:auto;top:16px;bottom:16px;width:208px;max-width:none;margin:0;flex-direction:column;justify-content:flex-start;gap:4px;padding:10px;border-radius:26px}
  nav.tabs button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 14px;min-height:48px;font-size:.9rem;border-radius:18px}
  nav.tabs button svg{width:22px;height:22px}
  nav.tabs .ind{border-radius:18px}
  nav.tabs.many{padding:10px}nav.tabs.many button{font-size:.9rem;padding:0 14px}
  nav.tabs{overflow-y:auto}
  .wrap,#app[data-tab="vender"] .wrap{max-width:1240px;margin-inline:0 auto}
  #app:not([data-tab="vender"]) .wrap{padding-bottom:32px}
  .toast{bottom:32px}
  .vbar{display:none!important}
  .fab{right:32px;bottom:32px}
  #hlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  #hlist>.empty{grid-column:1/-1}
  #tab-inicio:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
  #tab-inicio>.gsbar,#tab-inicio>#iguide,#tab-inicio>#isumcard,#tab-inicio>.empty{grid-column:1/-1}
  #tab-inicio>.card{margin-top:0}
  #tab-caja:not([hidden]),#tab-agenda:not([hidden]),#tab-fiado:not([hidden]),#tab-cotizar:not([hidden]),#tab-servicio:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start;padding-top:12px}
  #tab-caja>:not(.card),#tab-agenda>:not(.card),#tab-fiado>:not(.card),#tab-cotizar>:not(.card),#tab-servicio>:not(.card){grid-column:1/-1}
  #tab-caja>.card,#tab-agenda>.card,#tab-fiado>.card,#tab-cotizar>.card,#tab-servicio>.card{margin-block:0 16px}
  #tab-servicio:not([hidden]){grid-template-rows:auto 1fr}
  #tab-servicio>#svform{grid-column:1;grid-row:1/span 2}
  #tab-servicio>#svseg{grid-column:2;grid-row:1;margin-bottom:12px}
  #tab-servicio>.card:not(#svform){grid-column:2;grid-row:2}
  .moregrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ajhub:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ajhub .ajrow{margin:0}
  .dlg{max-width:560px}
}
@media (min-width:1500px){
  .wrap,#app[data-tab="vender"] .wrap{max-width:1400px}
  #hlist{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Celular: las celdas nuevas se ven como siempre */
.thead,.pkd{display:none}
.item.srow{align-items:flex-start;flex-direction:column}
.srow-r{width:100%;justify-content:space-between;flex-wrap:nowrap}
#istock{margin:2px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#istock .chip{cursor:pointer;border:1px solid var(--line);background:var(--field);border-radius:12px;min-height:46px;padding:0 14px;font-size:1rem;display:flex;align-items:center;justify-content:space-between;text-align:left}
#istock .chip i{font-style:normal;font-size:.9rem;color:var(--muted);font-weight:700}
#istock .chip[hidden]{display:none}
#istock .chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
#istock .chip.on i{color:var(--accent-fg)}
@media (min-width:1100px){#istock{grid-template-columns:repeat(5,1fr)}}
/* Botón Filtros y su panel */
.fbtn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;white-space:nowrap}
.fbtn[hidden],.fpanel[hidden]{display:none}
.fbtn.on{border-color:var(--accent)}
.fcount{background:var(--accent);color:var(--accent-fg);border-radius:999px;min-width:20px;padding:0 6px;font-size:.7rem;line-height:20px;text-align:center}
.fpanel{margin:8px 0 12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.sbar .fpanel{flex:1 1 100%;margin:0}
.fpanel .fl{display:block;font-size:.8rem;color:var(--muted);font-weight:600}
.fpanel .f{margin-top:0}
#ifilt{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin:12px 0 8px}
#ifilt>.f{margin:0;min-width:0}#ifilt>.f>span{font-size:.8rem;color:var(--muted);font-weight:600}
#ifilt .msort{margin:0}
#ifilt .f[hidden]{display:none}
@media (min-width:1100px){#ifilt{grid-template-columns:1fr}}
/* Escritorio: Inventario y Ventas como tabla */
@media (min-width:1100px){
  .sep{display:none}
  .thead{display:grid;align-items:center;column-gap:16px;padding:6px 0 8px;border-bottom:1px solid var(--line);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .thead .r{text-align:right}
  .thead .th{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;padding:4px 0}
  .thead .th:hover,.thead .th:focus-visible{color:var(--fg)}
  .inv-h,#ilist .item.inv{grid-template-columns:48px minmax(0,1fr) 170px 150px 190px}
  #ilist .item.inv{display:grid;align-items:center;column-gap:16px;padding:12px 0;border-top:0;border-bottom:1px solid var(--line)}
  #ilist .item.inv:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
  #ilist .item.inv .main{display:contents}
  #ilist .item.inv>.thumb{grid-column:1;grid-row:1}
  #ilist .item.inv .iid{grid-column:2;grid-row:1;min-width:0}
  #ilist .item.inv .pl{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:2px}
  #ilist .item.inv .pp{font-size:1rem;font-weight:700;color:var(--fg)}
  #ilist .item.inv .pcost{visibility:hidden;font-size:.8rem;display:flex;flex-wrap:wrap;column-gap:10px}
  #ilist .item.inv:hover .pcost,#ilist .item.inv:focus-within .pcost{visibility:visible}
  #ilist .item.inv .pk{display:none}
  #ilist .item.inv .pkd{display:block}
  #ilist .item.inv .ist{grid-column:4;grid-row:1}
  #ilist .item.inv>.row{grid-column:5;grid-row:1;justify-content:flex-end;flex-wrap:nowrap}
  #ilist .item.inv .main>details,#ilist .item.inv>.costpanel,#ilist .item.inv>div:not(.main):not(.row):not(.thumb){grid-column:1/-1}
  #ilist .item.inv .main>details{grid-row:2}
  /* ventas */
  .sales-h,.item.srow{grid-template-columns:78px minmax(0,1.4fr) 190px 110px 130px 120px 130px}
  .item.srow{display:grid;align-items:center;column-gap:16px;padding:10px 0;border-top:0;border-bottom:1px solid var(--line)}
  .item.srow:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
  .item.srow .srow-r,.item.srow .srow-r .main,.item.srow .srow-r .t,.item.srow .srow-r .s{display:contents}
  .item.srow .cn{grid-column:1;grid-row:1;font-weight:700}
  .item.srow .ccol{grid-column:2;grid-row:1;min-width:0}
  .item.srow .cd{grid-column:3;grid-row:1}
  .item.srow .cm{grid-column:4;grid-row:1}
  .item.srow .cs{grid-column:5;grid-row:1}
  .item.srow .csd{display:none}
  .item.srow .ctot{grid-column:6;grid-row:1;text-align:right}
  .item.srow>[data-open]{grid-column:7;grid-row:1;justify-self:end}
  .item.srow>:not(.srow-r):not([data-open]){grid-column:1/-1;grid-row:auto}
}

.cart-scroll,.cart-foot{display:flex;flex-direction:column;gap:16px}
.cart-foot .totals{margin:0}
.cart-scroll>*{flex:none}
@media (min-width:1100px){
  /* tablas genéricas: Clientes, Fiado, Compras */
  .item.trow{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:16px;padding:10px 0;border-top:0;border-bottom:1px solid var(--line)}
  .item.trow:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
  .thead.tcols{grid-template-columns:var(--cols)}
  .item.trow .main,.item.trow .trow-r{display:contents}
  .item.fia .main .s:not(details),.item.pur .main .s:not(details){display:contents}
  .item.trow>:not(.main):not(.trow-r):not(.row):not(.tact):not(.pacts){grid-column:1/-1}
  .cli,.thead.cli-h{--cols:minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr) 170px}
  #clist .thead{--cols:minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr) 170px}
  .item.cli .main>.s:empty{display:block}
  .item.cli>.row{justify-content:flex-end;flex-wrap:nowrap}
  .item.fia,#flist .thead{--cols:minmax(0,1.4fr) minmax(0,1fr) 110px 120px 280px}
  .item.fia{flex-direction:row!important;align-items:center!important}
  .item.fia .tr{text-align:right}
  .item.fia>.tact{justify-content:flex-end;flex-wrap:nowrap}
  .item.fia>.card,.item.fia>.payform{grid-column:1/-1}
  .item.pur,#plist .thead{--cols:minmax(0,1.4fr) 190px 130px minmax(0,1.1fr) 200px}
  #plist .item.pur .pacts{order:1;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
  .item.pur .main>details{order:2;grid-column:1/-1}
  #plist .item.pur .pacts>.row{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}
}

/* celular: Compras y tablas se ven como siempre */
.item.inv .pacts{display:contents}
.item.inv .pacts>.row{flex:1 1 100%;gap:8px}
.item.inv .pacts>.row .btn{flex:1 1 40%;padding-inline:8px}

/* ---------- escritorio: acceso en dos paneles + carga ampliada ---------- */
.amark,.atag,.sp-bar{display:none}
@media (min-width:1100px){
  .auth.pad .pinpad{gap:8px}
    .padk{height:52px;font-size:1.5rem;transition:background .12s,transform .06s}
  .padk:hover{background:var(--accent-soft)}
  .padk:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .auth.pad #abtn{min-height:50px}
  .pindots i{width:18px;height:18px}
  .auth.pad .asheet>.credit{padding:0}
  .auth.pad .credit img{height:40px}
  .auth.pad .asheet .linkbtn{padding:4px}

  #splash{gap:20px}
  .sp-logo{width:104px;height:104px;border-radius:28px}
  .sp-name{font-size:2.6rem;margin-bottom:4px}
  .sp-steps{width:300px;font-size:1rem;gap:13px}
  .sp-steps b{width:22px;height:22px}
  .sp-steps li.done b::after{left:5px;top:2px;width:6px;height:10px}
  .sp-bar{display:block;width:300px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden}
  .sp-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px}
  .sp-by{font-size:.9rem;margin-top:10px}
}

/* ---------- escritorio: botón Nueva venta, atajos y ventanas ---------- */
.newsale,.kbhint{display:none}
/* El cuadro de atajos solo cabe en pantallas altas; en pantallas bajas tapa el menú */
@media (min-width:1100px) and (min-height:1000px){
  .kbhint{display:flex;flex-direction:column;gap:7px;position:fixed;z-index:16;left:34px;width:176px;bottom:30px;font-size:.8rem;color:var(--muted)}
  .kbhint div{display:flex;justify-content:space-between;align-items:center}
}
@media (min-width:1100px){
  .fab{display:none!important}
  .head-r{display:flex;align-items:center;gap:12px}
  .newsale{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;font-size:.9rem}
  #app[data-tab="vender"] .newsale{display:none}
  .newsale kbd,.kbhint kbd{font:600 .7rem/1 var(--f-display,inherit);padding:3px 6px;border-radius:6px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);opacity:.8}
  .dlg{width:min(100%,480px)}
  .dlg.scan{width:min(100%,520px)}
}

/* ---------- escritorio: Inicio compacto ---------- */
@media (min-width:1100px){
  #isumcard .tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
  #isumcard .tiles .tile:first-child{grid-column:span 2}
  #isumcard .tiles .tile:last-child:nth-child(even){grid-column:auto}
  #isumcard .tiles .tile:first-child .v{font-size:2.6rem}
  #isumcard .quick{grid-template-columns:repeat(5,minmax(0,1fr))}
  #isumcard .quick .btn:last-child:nth-child(odd){grid-column:auto}
  /* Inicio en pantalla grande: avance y siguiente paso a la izquierda, lista de pasos a la derecha (sin huecos) */
  #iguide:not([hidden]){display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;column-gap:48px;row-gap:16px;align-items:start}
  #iguide>h2{grid-column:1;grid-row:1;margin:0}
  #iguidebody{display:contents}
  #iguidebody>.ajfh{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:14px}
  #iguidebody .ajring{width:96px;height:96px}
  #iguidebody .ajring i{width:78px;height:78px;font-size:1.35rem}
  #iguidebody .ajfh b{font-size:1.3rem}
  #iguidebody .ajfh div span{font-size:.9rem;margin-top:4px}
  #iguidebody>.ignext{grid-column:1;grid-row:3;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  #iguidebody>.ignext>span{color:var(--muted);font-size:.8rem;font-weight:600}
  #iguidebody>.ajchips{grid-column:2;grid-row:1/-1;align-self:center}
  #iguide>#iguidehide{grid-column:1;grid-row:4;justify-self:start;margin:0}
  #iguide>#idemo{grid-column:1;grid-row:5;justify-self:start;margin:0}
}

/* ---------- escritorio: efectos al pasar el mouse ---------- */
@media (min-width:1100px) and (hover:hover){
  nav.tabs button{transition:color .2s,background .22s,transform .22s cubic-bezier(.3,1.4,.5,1),box-shadow .22s}
  nav.tabs button::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:0;border-radius:3px;background:var(--accent);transform:translateY(-50%);transition:height .22s cubic-bezier(.3,1.4,.5,1),opacity .2s;opacity:0}
  nav.tabs button svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1),color .2s}
  nav.tabs button:hover:not([aria-selected="true"]){background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--fg);transform:translateX(4px)}
  nav.tabs button:hover:not([aria-selected="true"])::before{height:22px;opacity:1}
  nav.tabs button:hover svg{transform:scale(1.18) rotate(-6deg);color:var(--accent)}
  nav.tabs button:active{transform:scale(.97)}
  nav.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .newsale,.quick .btn,.avatar{transition:transform .18s cubic-bezier(.3,1.5,.5,1),box-shadow .2s,filter .2s}
  .newsale:hover,.quick .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 60%,transparent);filter:brightness(1.05)}
  .avatar:hover{transform:scale(1.08)}
}

/* ---------- escritorio: Cotizar y Servicio, lista más ancha y filas tipo tabla ---------- */
@media (min-width:1100px){
  #tab-cotizar:not([hidden]),#tab-servicio:not([hidden]){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .item.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  .item.qrow>.row{grid-column:1;min-width:0}
  .item.qrow>[data-qopen]{grid-column:2;grid-row:1;justify-self:end}
  .item.qrow>:not(.row):not([data-qopen]){grid-column:1/-1}
  .item.qrow .num{min-width:110px;text-align:right}
  .item.svrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  .item.svrow>.main{grid-column:1;min-width:0}
  .item.svrow>[data-svopen]{grid-column:2;grid-row:1;justify-self:end}
  .item.svrow>:not(.main):not([data-svopen]){grid-column:1/-1}
  #qlist .item,#svlist .item{transition:background .18s}
  #qlist .item:hover,#svlist .item:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
}

@media (min-width:1100px){
  .thead .expbtn{justify-self:end;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:700;padding:4px 10px;min-height:30px}
  .thead .th.r{text-align:right}
  .thead .th{transition:color .15s}
}

/* ---------- escritorio: Ajustes con lista a la izquierda y detalle a la derecha ---------- */
@media (min-width:1100px){
  #tab-ajustes:not([hidden]){display:grid;grid-template-columns:280px minmax(0,1fr);gap:0 20px;align-items:start}
  #tab-ajustes>:not(.card):not(.ajhub){grid-column:1/-1}
  #tab-ajustes>.card{grid-column:2;margin-block:12px 4px}
  #tab-ajustes>.ajhub:not([hidden]){grid-column:1;grid-row:span 60;display:flex;flex-direction:column;gap:6px;position:sticky;top:16px;margin-top:12px}
  #tab-ajustes.searching>.card{grid-column:1/-1}
  .ajhub .ajrow{min-height:56px;padding:10px 12px;border-radius:14px;border-color:transparent;background:transparent;transition:background .18s,border-color .18s,transform .18s}
  .ajhub .ajrow .ajtx span{display:none}
  .ajhub .ajrow .ajchev{display:none}
  .ajhub .ajrow:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);transform:translateX(3px)}
  .ajhub .ajrow.on{background:var(--accent-soft,rgba(128,128,128,.15));border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
  .ajhub .ajrow.on .ajtx b{color:var(--accent)}
}

/* ---------- celular: ordenar listas y efecto al tocar ---------- */
.msort{display:flex;align-items:flex-end;gap:10px;margin:2px 0 10px}
.msort .f{flex:1;min-width:0;margin:0}
.msort .f span{font-size:.8rem;color:var(--muted);font-weight:600}
.msort .expbtn{flex:none;min-height:44px;white-space:nowrap}
#ilist>.msort .expbtn{display:none}
@media (min-width:1100px){.msort{display:none}}
@media (max-width:1099px){
  nav.tabs button svg{transition:transform .22s cubic-bezier(.3,1.7,.5,1)}
  nav.tabs button:active svg{transform:translateY(-3px) scale(1.18)}
  .quick .btn,.btn.small,.ajrow,.padk{transition:transform .14s ease,background .15s}
  .quick .btn:active,.btn.small:active,.ajrow:active{transform:scale(.96)}
  .moregrid button:active{transform:scale(.95)}
}
@media (prefers-reduced-motion:reduce){nav.tabs button:active svg,.quick .btn:active,.btn.small:active,.ajrow:active{transform:none}}

/* celular: los campos con letra menor de 16px hacen que el iPhone acerque la pantalla al escribir */
@media (max-width:1099px){input,select,textarea,#asearch{font-size:max(16px,1rem)}}

/* código de autorización */
.codebox{text-align:center;letter-spacing:.5em;font-size:max(1.4rem,16px)!important;font-weight:800;font-family:var(--f-display)}
.bigcode{font-family:var(--f-display);font-weight:800;font-size:2.6rem;letter-spacing:.12em;text-align:center;padding:18px 8px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);font-variant-numeric:tabular-nums}
.bigcode.old{opacity:.4;text-decoration:line-through}

/* Menú inferior "Liquid Glass" en celular: vidrio casi transparente y cápsula que amplía lo que hay debajo */
@media (max-width:1099px){
  nav.tabs{
    background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 9%,transparent),color-mix(in srgb,var(--fg) 2%,transparent) 55%,color-mix(in srgb,var(--fg) 6%,transparent)),color-mix(in srgb,var(--bg) 30%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.9) brightness(1.04);backdrop-filter:blur(12px) saturate(1.9) brightness(1.04);
    border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);border-radius:34px;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1.5px 0 color-mix(in srgb,var(--fg) 10%,transparent),inset 0 0 22px rgba(255,255,255,.07),0 16px 34px -14px rgba(0,0,0,.45)}
  nav.tabs button{text-shadow:0 0 10px color-mix(in srgb,var(--bg) 70%,transparent)}
  nav.tabs .ind{overflow:hidden;background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;
    border:1px solid rgba(255,255,255,.7);border-radius:28px;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(255,255,255,.35),inset 0 0 0 1px color-mix(in srgb,var(--fg) 6%,transparent),0 10px 20px -8px rgba(0,0,0,.5)}
  nav.tabs .ind::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 48%,rgba(255,255,255,.1))}
  html nav.tabs .ind.drag,html[data-style] nav.tabs .ind.drag{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%),color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
  nav.tabs .ind.drag{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 2px 0 0 rgba(255,60,110,.45),inset -2px 0 0 rgba(40,170,255,.45),inset 0 -2px 3px rgba(255,255,255,.4),0 18px 30px -10px rgba(0,0,0,.55)}
  nav.tabs .mag{position:absolute;left:0;top:0;display:flex;padding:6px;pointer-events:none;color:var(--accent)}
  nav.tabs.many .mag{padding:5px}
  nav.tabs .mag button{position:relative;flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:26px;padding:8px 2px 7px;font-weight:700;font-size:.7rem;color:var(--accent);min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-shadow:none;transform:scale(1.05)}
  nav.tabs.many .mag button{font-size:.7rem;padding-inline:0}
  nav.tabs .mag button svg{width:22px;height:22px;fill:currentColor;stroke:none;flex-shrink:0}
  nav.tabs .mag button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav.tabs button{color:color-mix(in srgb,var(--fg) 84%,transparent)}
  html nav.tabs:not(.travel) button.under,nav.tabs:not(.travel) button.under{color:transparent!important;text-shadow:none;transform:none}
  nav.tabs:not(.travel) button.under svg{opacity:0}
  html nav.tabs .mag button,nav.tabs .mag button{color:var(--accent)!important;text-shadow:none}
  @media (prefers-reduced-motion:no-preference){
    nav.tabs .mag{transition:translate .5s cubic-bezier(.3,1.3,.5,1)}
    nav.tabs .ind.drag .mag{transition:translate 0s}
  }
}
@media (min-width:1100px){nav.tabs .mag{display:none}}

/* Pulido Liquid Glass (v223): vidrio más firme, borde fino, brillo superior, íconos y texto más marcados.
   La lupa (.mag) lleva los mismos tamaños que los botones para que siga alineada. */
@media (max-width:1099px){
  nav.tabs{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8);border:.5px solid rgba(255,255,255,.5);
    box-shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.04);padding:8px 6px}
  :root[data-theme="dark"] nav.tabs{border-color:rgba(255,255,255,.10);box-shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.tabs{border-color:rgba(255,255,255,.10);box-shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15)}}
  nav.tabs::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);pointer-events:none}
  nav.tabs button,nav.tabs .mag button{font-weight:700;font-size:.7rem;letter-spacing:-.01em;gap:2px}
  nav.tabs.many button,nav.tabs.many .mag button{font-size:.7rem}
  nav.tabs button svg,nav.tabs .mag button svg{width:25px;height:25px;stroke-width:2}
  nav.tabs button[aria-selected="true"] svg,nav.tabs .mag button svg{fill:currentColor;fill-opacity:1}
  nav.tabs .ind{background:color-mix(in srgb,var(--accent) 14%,transparent)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){@media (max-width:1099px){nav.tabs{background:color-mix(in srgb,var(--bg) 95%,transparent)}}}

/* Ventas en espera: ocupa todo el ancho y no cuenta como tarjeta cuando está vacía */
#vholds:empty{display:none}
@media (min-width:900px){#app[data-tab="vender"] #tab-vender>#vholds{grid-column:1/-1}}

/* Cantidad a pedir editable en stock bajo */
.lowq{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.lowq input{width:64px;min-height:40px;text-align:center;font-variant-numeric:tabular-nums}

/* Buscador de producto: caja de búsqueda + resultados tocables (el select queda oculto solo como respaldo del valor) */
.psel-h{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.pslist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pslist:empty{display:none}
.psopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:8px 14px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.psopt.on{border-color:var(--accent)}
.psopt .num{color:var(--muted);font-size:.9em;white-space:nowrap}
.pshint.psok{color:var(--accent);font-weight:600}

/* El buscador de producto ocupa todo el ancho; cantidad y demás campos pasan a la línea de abajo, alineados */
.row>.psfield{flex:1 1 100%}

#saparr,#stexts{margin:6px 0 10px}
textarea.autogrow{resize:none;overflow:hidden;min-height:2.6em}
#helpmodal .dlg{width:100%;max-width:560px;height:min(760px,calc(100dvh - 48px));overflow:hidden}
#helpmodal #hhelp{overflow-y:auto;min-height:0;flex:1 1 auto;-webkit-overflow-scrolling:touch}
#helpmodal .hitem{align-items:flex-start}
#helpmodal .hitem .btn{flex:none;align-self:center}
#helpmodal #hcats{flex-wrap:nowrap!important;overflow-x:auto;flex:none;padding-bottom:4px}#helpmodal #hcats .btn{flex:none}
@media (min-width:700px){#helpmodal #hcats{flex-wrap:wrap!important;overflow:visible}}
html[data-style="mostrador"]:not([data-theme="light"]) .auth .linkbtn{color:#4ade80}
/* vidrio solo en la barra de abajo y las ventanas (Mostrador y Color); el resto queda plano y nítido */
html[data-style="mostrador"] nav.tabs{background:color-mix(in srgb,var(--surface) 22%,transparent);-webkit-backdrop-filter:blur(5px) saturate(1.8);backdrop-filter:blur(5px) saturate(1.8)}
html[data-style="mostrador"] .dlg{background:color-mix(in srgb,var(--glass-strong) 30%,transparent);-webkit-backdrop-filter:blur(6px) saturate(1.8);backdrop-filter:blur(6px) saturate(1.8)}
html[data-style="mostrador"] .modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ventana abierta: el fondo no se desplaza (también en iPhone) */
html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
.modal{overscroll-behavior:contain;touch-action:none}
.modal .dlg{touch-action:pan-y;overscroll-behavior:contain}

/* Pantalla de carga: tarjeta de vidrio difuminado sobre resplandores de color */
#splash{background:radial-gradient(65% 42% at 18% 14%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%),radial-gradient(60% 40% at 88% 84%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%),radial-gradient(40% 28% at 80% 22%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%),var(--bg)}
.sp-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 28px 26px;border-radius:30px;background:color-mix(in srgb,var(--surface) 42%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 18px 44px -18px rgba(0,0,0,.35)}

/* Pantalla de carga: un paso a la vez, centrado, con puntos de avance */
.sp-card{width:min(280px,78vw);box-sizing:border-box}
.sp-steps{display:grid;justify-items:center;width:100%;height:28px;margin:6px 0 0;font-size:.9rem}
.sp-steps li{grid-area:1/1;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s,color .25s;white-space:nowrap}
.sp-steps li.cur{opacity:1;transform:none;color:var(--fg)}
.sp-dots{display:flex;gap:7px;justify-content:center;padding-top:2px}
.sp-dots i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--muted) 35%,transparent);transition:background .25s,transform .25s}
.sp-dots i.on{background:var(--accent);transform:scale(1.15)}
.sp-steps li:not(.cur),.sp-steps li.done:not(.cur),.sp-steps li.on:not(.cur){opacity:0}
.sp-steps li.cur,.sp-steps li.done.cur,.sp-steps li.on.cur{opacity:1}
/* Entrada con PIN / correo: tarjeta de vidrio difuminado sobre resplandores verdes */
@media all{
  body:has(#auth:not([hidden])){background:radial-gradient(65% 36% at 16% 8%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%) fixed,radial-gradient(60% 34% at 90% 92%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%) fixed,radial-gradient(40% 24% at 84% 20%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%) fixed,var(--bg)}
  #auth .auth{background:none}
  #auth .auth .card{background:color-mix(in srgb,var(--surface) 42%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);border-radius:30px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 18px 44px -18px rgba(0,0,0,.35)}
  #auth .auth .padk{background:color-mix(in srgb,var(--field) 55%,transparent);border-color:color-mix(in srgb,var(--fg) 10%,transparent)}
}

/* ===== Superficies "Sólido": colores planos, sin transparencias ni difuminado (opción en Ajustes) ===== */
html:root[data-surface="solido"]{--glass:var(--surface);--glass-strong:var(--surface);--glass-edge:var(--line);--glass-hi:none;--glass-drop:none;--blur:none;--lens:transparent;--blob1:transparent;--blob2:transparent;--blob3:transparent}
html[data-surface="solido"] nav.tabs{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--line)!important}
html[data-surface="solido"] .dlg{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-surface="solido"] .modal{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-surface="solido"] #splash{background:var(--bg)!important}
html[data-surface="solido"] .sp-card{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-surface="solido"] body:has(#auth:not([hidden])){background:var(--bg)!important}
html[data-surface="solido"] #auth .auth .card{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-surface="solido"] #auth .auth .padk{background:var(--field)!important;border-color:transparent!important}
html[data-surface="solido"] .card,html[data-surface="solido"] .tile,html[data-surface="solido"] .head-r .pill{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* El tipo de letra elegido se respeta también en Mostrador y Color */
.rcfold>summary{cursor:pointer;color:var(--mut);font-size:.9rem;margin:6px 0 8px}
/* Accesorios más vendidos (Vender) */
.qhead{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.qhead svg{width:20px;height:20px;fill:var(--accent);flex:none}
.qhead b{font-family:var(--f-display);font-size:1rem}
.qhead span{color:var(--muted);font-size:.8rem;margin-left:auto}
.qstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.qstrip::-webkit-scrollbar{display:none}
.qcard{position:relative;flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:3px;text-align:left;padding:8px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .15s,box-shadow .15s}
.qcard:active{transform:scale(.96)}
.qcard .thumb{width:100%;height:100px;border-radius:10px;margin-bottom:4px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:4px;box-sizing:border-box}
.qcard .thumb.ph{font-size:2rem}
.qadd{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;line-height:1;box-shadow:0 3px 10px -2px rgba(21,128,61,.55);transition:transform .15s}
.qcard:active .qadd{transform:scale(1.15)}
.qcard.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.qn{font-size:.9rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.75em}
.qp{color:var(--accent);font-weight:800;font-size:.9rem}
.qs{font-size:.7rem;color:var(--muted)}
.qcard:disabled{opacity:.5;cursor:default}
.qcard:disabled .qadd{background:var(--muted)}
.qcard .thumb.ph{background:var(--accent-soft);color:var(--accent);padding:0}
.qrk{position:absolute;top:14px;left:14px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}
.qcard:first-child .qrk{background:var(--accent);color:var(--accent-fg)}
/* Pedido sugerido: resumen, pedir a todos los agotados y filas compactas */
.lowsum{background:var(--accent-soft);color:var(--fg);border-radius:var(--r-md);padding:10px 14px;font-size:.9rem}
.lowbulk{display:flex;flex-direction:column;gap:8px}
.lowrow{padding-block:8px}
.lowrow .t{font-size:.9rem}
#lowseg{margin-block:0}
#lowseg button{font-size:.8rem;padding-inline:4px}
#isbar:has(.fpanel:not([hidden])){position:static}
@media (max-width:480px){#ifilt{grid-template-columns:1fr}}

.seg.segw{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:0 0 auto;align-content:start}.seg.segw button{flex:none}
.hasava{position:relative;padding-left:52px;min-height:44px}
.ava{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:1rem;line-height:1;user-select:none}
.ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar.hasphoto{padding:0;overflow:hidden}
nav.tabs .navwho i.hasphoto{overflow:hidden;padding:0}
nav.tabs .navwho i img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.photoprev{width:96px;height:96px}.photoprev .ava{position:static;width:96px;height:96px;font-size:2.6rem;overflow:hidden}
.t.tava{display:flex;align-items:center;gap:10px}.t.tava>span:not(.ava){min-width:0;overflow-wrap:anywhere}.t.tava>.ava{position:static;width:32px;height:32px;font-size:.9rem;flex:none}
.supitem .main[data-sview]{cursor:pointer}.supitem .main[data-sview]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.supitem{flex-wrap:wrap}.supitem .main{flex:1 1 100%}.supitem .sacts{display:flex;gap:8px;flex-wrap:wrap}
.supprof .row{flex-wrap:wrap}
.seg.segw4{grid-template-columns:repeat(4,1fr)}
.chip.auto{border-style:dashed;opacity:.85}
.item.off .t{opacity:.6}
.cptabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cptabs button{white-space:nowrap}
.cpdates{flex-wrap:nowrap}.cpdates input{min-width:0;width:100%}
.cpdates .f{min-width:0}
.cpact{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:10px 0 8px}
.cpact .btn{min-height:46px;font-size:1rem}
.cpact3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cpact3 .btn{justify-content:center;text-align:center}
.cpfoot{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:center}

.odot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

/* Animaciones reducidas (Pantalla y accesibilidad): se aplica además del ajuste del sistema */
html[data-calm] *,html[data-calm] *::before,html[data-calm] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}

/* Ventanas inferiores en celular: barrita de agarre (el gesto de cerrar arrastrando está en app.js) */
.dlg>.grab{display:none}
@media (max-width:520px){
  .dlg,.dlg.scan{position:relative;padding-top:30px}
  .dlg>.grab{display:block;position:absolute;top:0;left:0;right:0;height:30px;touch-action:none;cursor:grab;z-index:2}
  .dlg>.grab::before{content:"";position:absolute;top:9px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:99px;background:color-mix(in srgb,var(--muted) 55%,transparent)}
}

/* Descuento rápido y check de venta registrada */
.dchips{display:flex;gap:8px;flex-wrap:wrap}
.dchips[hidden]{display:none}
.dchips button{flex:1 1 0;min-width:52px;min-height:44px;padding:0 6px;border-radius:99px;border:1px solid var(--glass-edge);background:var(--field);color:var(--fg);font-weight:700;cursor:pointer}
.dchips button.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.okmark{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent);display:inline-grid;place-items:center}
.okmark svg{width:18px;height:18px;fill:none;stroke:var(--accent-fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#vdone .row:has(>.okmark){flex-wrap:nowrap;align-items:center;gap:10px}
@media (prefers-reduced-motion:no-preference){
  html:not([data-calm]) .okmark{animation:okpop .38s cubic-bezier(.3,1.6,.5,1)}
  html:not([data-calm]) .okmark svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:okdraw .32s .16s ease-out forwards}
  @keyframes okpop{from{transform:scale(.3);opacity:0}}
  @keyframes okdraw{to{stroke-dashoffset:0}}
}

/* Aviso de conexión */
.netbar{position:sticky;top:calc(6px + env(safe-area-inset-top,0px));z-index:45;max-width:720px;margin:6px auto 0;padding:10px 14px;border-radius:16px;font-weight:700;font-size:.9rem;text-align:center;line-height:1.3;box-shadow:0 8px 24px -10px rgba(0,0,0,.35)}
.netbar[hidden]{display:none}
.netbar.off{background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.netbar.ok{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}

/* Accesibilidad móvil: zonas de toque de al menos 44px en pantallas táctiles (el escritorio no cambia) */
@media (pointer:coarse){
  .btn.small{min-height:44px}
  .btn.small.x{min-width:44px}
  label.chk{min-height:44px}
  details.more>summary,.card.fold>h2{min-height:44px;display:flex;align-items:center}
  details.more>summary{padding-block:0}
  #invseg button,.seg button{min-height:44px}
  .linkbtn{min-height:44px;display:inline-flex;align-items:center}
  .vgroup .vopt{min-height:44px}
  .chip.vopt{min-height:44px}
  details:not(.more)>summary:not(.btn){padding-block:11px}
}

/* Cantidad escribible en el carrito */
.qty input.qin{width:46px;min-width:0;min-height:34px;padding:0;text-align:center;background:transparent;border:0;box-shadow:none;border-radius:8px;font-weight:600}
.qty input.qin:focus{background:var(--glass-strong);box-shadow:0 0 0 2px var(--accent)}

/* Cápsula ovalada tipo iOS en la barra inferior (celular) */
@media (max-width:1099px){html nav.tabs .ind,html[data-style] nav.tabs .ind,nav.tabs .ind::after{border-radius:999px}}

/* Margen lateral para que la cápsula ovalada quepa centrada también en la primera y la última pestaña */
@media (max-width:1099px){nav.tabs,nav.tabs.many{padding-inline:16px}nav.tabs .mag,nav.tabs.many .mag{padding-inline:16px}}
@media (max-width:1099px){nav.tabs .mag button{transform:none}}
@media (max-width:1099px){nav.tabs .mag button{opacity:0;transition:opacity .15s}nav.tabs .mag button.on{opacity:1}}

/* Cambio de pestaña suave: el icono que sale se desvanece mientras entra el siguiente dentro de la gota */
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){
  html:not([data-calm]) nav.tabs .mag{transition:translate .5s cubic-bezier(.3,1.3,.5,1),scale .45s cubic-bezier(.3,1.1,.5,1),transform-origin .5s cubic-bezier(.3,1.3,.5,1)}
  html:not([data-calm]) nav.tabs .ind.drag .mag{transition:translate 0s,scale .3s cubic-bezier(.3,1.1,.5,1),transform-origin 0s}
  html:not([data-calm]) nav.tabs .mag button{transition:opacity .42s ease-in-out}
  html:not([data-calm]) nav.tabs>button{transition:color .42s ease-in-out,transform .25s ease}
  html:not([data-calm]) nav.tabs>button svg{transition:opacity .42s ease-in-out}
}
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){html:not([data-calm]) nav.tabs .ind{transition:translate .55s cubic-bezier(.25,1.15,.4,1),scale .5s cubic-bezier(.3,1.1,.5,1),width .5s cubic-bezier(.25,1.1,.4,1),opacity .2s,background .25s,box-shadow .25s}}
/* Mientras la gota viaja se ven los iconos reales (sin copia dentro del lente) y al llegar se funden */
@media (max-width:1099px){nav.tabs.travel .mag button,nav.tabs.travel .mag button.on{opacity:0}nav.tabs.lift button[aria-selected="true"]:not(.hot){color:var(--muted)}}
/* Al arrastrar, la gota sigue el dedo sin retraso */
@media (max-width:1099px){html:not([data-calm]) nav.tabs .ind.drag{transition:translate 0s,scale .3s cubic-bezier(.3,1.5,.5,1),width 0s,opacity .2s,background .25s,box-shadow .25s}}

/* Aviso de «trabajando» con ruedita */
.toast.working{display:flex;align-items:center;gap:10px}
.toast .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;flex:none;animation:tspin .8s linear infinite}
@keyframes tspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.toast .spin{animation-duration:2.4s}}

/* Aviso en vivo en los campos */
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-soft)!important}
.fielderr{display:block;color:var(--bad);font-size:.8rem;font-weight:600;margin-top:4px}

/* Sugerencias de clientes en Vender */
.sugwrap{position:relative}
.sug{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 14px 30px -12px rgba(0,0,0,.35);overflow:hidden}
.sug button{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 12px;border:0;background:transparent;color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.sug button+button{border-top:1px solid var(--line)}
.sug button:hover,.sug button:focus-visible{background:var(--accent-soft)}
.sug .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.sug .sn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sug .sp{flex:none;color:var(--muted);font-size:.8rem}

/* Foto en grande */
#ilist img.thumb,#pphoto img.thumb,#pcatgal img.thumb{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);overflow:auto}
.lbx img{max-width:100%;max-height:82dvh;object-fit:contain;border-radius:12px;background:#fff;touch-action:pinch-zoom;transition:transform .25s ease}
.lbx img.zoom{transform:scale(2.4);cursor:zoom-out}
.lbx-x{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lbx img{transition:none}}

/* Rebote del total al agregar un producto */
@media (prefers-reduced-motion:no-preference){html:not([data-calm]) .bump{animation:numbump .34s cubic-bezier(.3,1.5,.5,1)}}
@keyframes numbump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
/* Mini ilustraciones en los estados vacíos (rellenas) */
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;background:var(--accent);opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 9.5 4.8 4.6A1 1 0 0 1 5.8 4h12.4a1 1 0 0 1 1 .6l1.3 4.9a2.8 2.8 0 0 1-1.4 2.6V20a1 1 0 0 1-1 1H5.9a1 1 0 0 1-1-1v-7.9a2.8 2.8 0 0 1-1.4-2.6ZM10 21v-5h4v5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 9.5 4.8 4.6A1 1 0 0 1 5.8 4h12.4a1 1 0 0 1 1 .6l1.3 4.9a2.8 2.8 0 0 1-1.4 2.6V20a1 1 0 0 1-1 1H5.9a1 1 0 0 1-1-1v-7.9a2.8 2.8 0 0 1-1.4-2.6ZM10 21v-5h4v5Z'/%3E%3C/svg%3E") center/contain no-repeat}
#ilist .empty::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5 3.5 7.2 12 12l8.5-4.8L12 2.5ZM3.5 8.8v8L11 21v-8.1L3.5 8.8ZM20.5 8.8 13 12.9V21l7.5-4.2v-8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5 3.5 7.2 12 12l8.5-4.8L12 2.5ZM3.5 8.8v8L11 21v-8.1L3.5 8.8ZM20.5 8.8 13 12.9V21l7.5-4.2v-8Z'/%3E%3C/svg%3E")}
#slist .empty::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2.5h12a1 1 0 0 1 1 1v18.2l-3-2-3 2-3-2-3 2V3.5a1 1 0 0 1 1-1ZM9 7.2h6v1.6H9ZM9 11.2h6v1.6H9Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2.5h12a1 1 0 0 1 1 1v18.2l-3-2-3 2-3-2-3 2V3.5a1 1 0 0 1 1-1ZM9 7.2h6v1.6H9ZM9 11.2h6v1.6H9Z'/%3E%3C/svg%3E")}
#clist .empty::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.6 8a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0ZM2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6v.3a.7.7 0 0 1-.7.7H3.2a.7.7 0 0 1-.7-.7ZM14.4 9a2.6 2.6 0 1 0 5.2 0 2.6 2.6 0 0 0-5.2 0ZM16.5 14.2c2.6.2 5 1.8 5 4.8v.3a.7.7 0 0 1-.7.7h-3.3c.4-.7.5-1.5.5-2.4 0-1.2-.4-2.4-1.5-3.4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.6 8a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0ZM2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6v.3a.7.7 0 0 1-.7.7H3.2a.7.7 0 0 1-.7-.7ZM14.4 9a2.6 2.6 0 1 0 5.2 0 2.6 2.6 0 0 0-5.2 0ZM16.5 14.2c2.6.2 5 1.8 5 4.8v.3a.7.7 0 0 1-.7.7h-3.3c.4-.7.5-1.5.5-2.4 0-1.2-.4-2.4-1.5-3.4Z'/%3E%3C/svg%3E")}
/* Deslizar para actualizar */
#ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:90;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px -8px rgba(0,0,0,.4);display:grid;place-items:center;opacity:0;transform:translate(-50%,-60px);pointer-events:none;transition:opacity .15s}
#ptr .ptr-i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--muted);border-right-color:transparent;transition:border-color .15s}
#ptr.go .ptr-i,#ptr.spin .ptr-i{border-color:var(--accent);border-right-color:transparent}
#ptr.spin .ptr-i{animation:tspin .8s linear infinite}
@media (display-mode:standalone){html{overscroll-behavior-y:contain}}
.empty.more::before{display:none}
.sug{right:auto;min-width:min(300px,calc(100vw - 32px))}
.sug .sn{min-width:70px}

.supfirst{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:14px;margin:8px 0;border:1px dashed var(--accent);border-radius:var(--r-md);background:var(--accent-soft)}
.supfirst span{color:var(--muted);font-size:.9rem}

/* ===== Ajustes (celular): cabecera, guía y grupos de vidrio. En escritorio no cambia nada ===== */
.ajh1,.ajid,.ajfirst,.ajlbl{display:none}
.ajgw,.ajgrp{display:contents}
@media (max-width:1099px){
  #tab-ajustes .ajhub:not([hidden]){display:flex;flex-direction:column;gap:14px;margin-top:8px;position:relative;isolation:isolate}
  #tab-ajustes .ajhub::before{content:"";position:absolute;inset:0 0 auto 0;height:380px;z-index:-1;pointer-events:none;
    background:radial-gradient(circle 150px at 38% 16%,color-mix(in srgb,var(--accent) 30%,transparent),transparent),radial-gradient(circle 100px at 70% 42%,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}
  .ajh1:not([hidden]){display:block;font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:-.02em;margin:4px 4px 0}
  .ajid,.ajfirst,.ajgrp{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-hi),var(--glass-drop)}
  .ajid:not([hidden]){display:flex;align-items:center;gap:14px;padding:14px}
  .ajlogo{flex:none;width:54px;height:54px;border-radius:18px;object-fit:cover;background:var(--surface)}
  .ajlogo.ini{display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.2rem;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 80%,#fff),color-mix(in srgb,var(--accent) 70%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
  .ajidt{min-width:0}.ajidt b{display:block;font-size:1rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ajidt span{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
  .ajfirst:not([hidden]){display:flex;flex-direction:column;gap:12px;padding:16px}
  .ajfh{display:flex;align-items:center;gap:14px}
  .ajfh b{display:block;font-size:1rem;font-weight:700}.ajfh div span{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
  .ajring{flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--accent) var(--p,0%),var(--field) 0);display:grid;place-items:center}
  .ajring i{font-style:normal;width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:.9rem}
  .ajchips{display:flex;flex-direction:column;gap:8px}
  .ajchip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:999px;background:var(--field);color:var(--fg);font:inherit;font-weight:600;text-align:left;min-height:44px}
  button.ajchip{cursor:pointer}
  .ajchip .o{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;border:2px solid var(--muted)}
  .ajchip.ok{color:var(--muted)}.ajchip.ok .o{background:var(--accent);border-color:var(--accent);color:#fff}
  .ajchip em{margin-left:auto;font-style:normal;color:var(--accent);font-weight:700}
.ignext{display:none}
  .ajhide{align-self:flex-start;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;padding:4px 2px;cursor:pointer}
  .ajlbl{display:block;font-weight:700;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:2px 8px 6px}
  .ajgw{display:block}.ajgw[hidden]{display:none}
  .ajgrp{display:block;padding:4px 0;overflow:hidden}
  #tab-ajustes .ajgrp .ajrow{position:relative;border:0;border-radius:18px;background:transparent;margin:0 6px;width:calc(100% - 12px);padding:11px 8px;min-height:64px;transition:background .15s}
  #tab-ajustes .ajgrp .ajrow:active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  #tab-ajustes .ajgrp .ajrow+.ajrow::before{content:"";position:absolute;top:0;left:56px;right:8px;border-top:1px solid var(--glass-edge)}
  /* Íconos como los de la barra inferior: rellenos y neutros; solo se tiñen al seleccionar */
  .ajgrp .ajic{width:32px;height:32px;border-radius:0;background:transparent;box-shadow:none;color:color-mix(in srgb,var(--fg) 70%,transparent);transition:color .18s}
  .ajgrp .ajic svg{width:27px;height:27px}
  #tab-ajustes .ajgrp .ajrow:active .ajic,#tab-ajustes .ajgrp .ajrow:focus-visible .ajic,#tab-ajustes .ajgrp .ajrow.on .ajic{color:var(--accent)}
  .ajgrp .ajtx b{font-weight:700}
  #tab-ajustes .ajgrp .ajrow[data-ajs="cuid"]:active .ajic,#tab-ajustes .ajgrp .ajrow[data-ajs="cuid"]:focus-visible .ajic{color:#e5484d}
  .ajgrp .ajrow[data-ajs="cuid"] .ajtx b{color:#e5484d}
}

/* En Ajustes (celular) el botón de perfil sobra: todo lo de la cuenta está en Ajustes */
@media (max-width:1099px){#app[data-tab="ajustes"] #avatar{display:none}}

/* ===== Liquid Glass: botón de perfil, su menú, «Más secciones» y la guía de Inicio ===== */
.avatar{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);color:var(--accent);box-shadow:var(--glass-hi),var(--glass-drop)}
.umenu{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:22px;box-shadow:var(--glass-hi),var(--glass-drop);padding:6px;min-width:240px}
.uwho{border-bottom:1px solid var(--glass-edge)}
.uitem{display:flex;align-items:center;gap:12px;border-radius:14px;transition:background .15s}
.uitem svg.ui{flex:none;width:22px;height:22px;fill:currentColor;color:color-mix(in srgb,var(--fg) 70%,transparent);transition:color .18s}
.uitem:hover,.uitem:focus-visible,.uitem:active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.uitem:hover svg.ui,.uitem:focus-visible svg.ui,.uitem:active svg.ui{color:var(--accent)}
.uitem.out:hover svg.ui,.uitem.out:focus-visible svg.ui,.uitem.out:active svg.ui{color:var(--bad)}
.morebtn{box-shadow:var(--glass-hi),var(--glass-drop);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.morebtn svg{color:color-mix(in srgb,var(--fg) 70%,transparent);transition:color .18s}
.morebtn:active svg,.morebtn:focus-visible svg,.morebtn.on svg{color:var(--accent)}
.morebtn.on{color:var(--fg);border-color:var(--glass-edge);background:color-mix(in srgb,var(--accent) 12%,var(--glass))}
/* Anillo y cápsulas (también en «Empieza por aquí» de Inicio) */
.ajfh{display:flex;align-items:center;gap:14px}
.ajfh b{display:block;font-size:1rem;font-weight:700}.ajfh div span{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.ajring{flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--accent) var(--p,0%),var(--field) 0);display:grid;place-items:center}
.ajring i{font-style:normal;width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.ajchips{display:flex;flex-direction:column;gap:8px}
.ajchip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:999px;background:var(--field);color:var(--fg);font:inherit;font-weight:600;text-align:left;min-height:44px}
button.ajchip{cursor:pointer}
.ajchip .o{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;border:2px solid var(--muted)}
.ajchip.ok{color:var(--muted)}.ajchip.ok .o{background:var(--accent);border-color:var(--accent);color:#fff}
.ajchip em{margin-left:auto;font-style:normal;color:var(--accent);font-weight:700}
@media (max-width:1099px){
  #iguide{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-hi),var(--glass-drop);padding:16px}
  #iguide>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #iguidebody{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
}

/* Botón de perfil: vidrio claro estilo iOS (translúcido, borde fino, sombra suave) */
.avatar{position:relative;overflow:visible;
  background:rgba(255,255,255,min(1,max(.1,calc(.62*var(--gk)))));
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  border:1px solid rgba(0,0,0,.11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 6px rgba(255,255,255,.9),0 6px 18px -4px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.06);
  text-shadow:none}
.avatar::before{display:none}
.avatar:active{transform:scale(.94)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .avatar{background:rgba(255,255,255,min(1,max(.1,calc(.10*var(--gk)))));border-color:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 6px rgba(255,255,255,.12),0 6px 18px -4px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}}
:root[data-theme="dark"] .avatar{background:rgba(255,255,255,min(1,max(.1,calc(.10*var(--gk)))));border-color:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 6px rgba(255,255,255,.12),0 6px 18px -4px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}
.seg.rper button{white-space:normal;line-height:1.15;font-size:.8rem;padding:8px 2px}

/* ===== Liquid Glass en todo el sistema =====
   El estilo «Mostrador» ya no apaga el vidrio: lo controla solo Ajustes → Superficies (Vidrio / Sólido).
   El estilo «Color» conserva su identidad plana. */
html:root[data-style="mostrador"]:not([data-surface="solido"]){--blur:blur(22px) saturate(1.8);--lens:rgba(255,255,255,.12);--blob1:rgba(34,197,94,.16);--blob2:rgba(120,135,128,.12);--blob3:rgba(21,128,61,.10)}
html:root[data-style="mostrador"]:not([data-theme="light"]):not([data-surface="solido"]){--glass:rgba(30,37,34,min(1,max(.1,calc(.58*var(--gk)))));--glass-strong:rgba(36,44,41,min(1,max(.4,calc(.74*var(--gk)))));--glass-edge:rgba(255,255,255,.15);--glass-hi:inset 0 1.5px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 14px rgba(255,255,255,.04);--glass-drop:0 1px 2px rgba(0,0,0,.3),0 14px 30px -12px rgba(0,0,0,.55);--shadow:0 10px 30px -12px rgba(0,0,0,.55)}
html:root[data-style="mostrador"][data-theme="light"]:not([data-surface="solido"]){--glass:rgba(255,255,255,min(1,max(.1,calc(.66*var(--gk)))));--glass-strong:rgba(255,255,255,min(1,max(.4,calc(.82*var(--gk)))));--glass-edge:rgba(0,0,0,.09);--glass-hi:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1.5px 6px rgba(255,255,255,.95);--glass-drop:0 1px 2px rgba(0,0,0,.05),0 12px 28px -12px rgba(0,0,0,.18);--shadow:0 10px 28px -12px rgba(0,0,0,.16)}
html:root[data-style="mostrador"]:not([data-surface="solido"]) .card,html:root[data-style="mostrador"]:not([data-surface="solido"]) .tile{border-color:var(--glass-edge)}
html:root[data-style="mostrador"]:not([data-surface="solido"]) .btn{background:var(--glass-strong);box-shadow:var(--glass-hi),0 2px 8px -2px rgba(0,0,0,.14)}
html:root[data-style="mostrador"]:not([data-surface="solido"]) .btn.primary{background:var(--accent);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
html:root[data-style="mostrador"]:not([data-surface="solido"]) nav.tabs{background:var(--glass-strong);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi),var(--glass-drop)}

/* Botones secundarios: cápsula de vidrio */
html:not([data-surface="solido"]):not([data-style="ninguno"]) .btn:not(.primary):not(.danger):not(.x){border-radius:999px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html:not([data-surface="solido"]):not([data-style="ninguno"]) .btn:not(.primary):not(.danger):active{transform:scale(.96)}

/* Botón flotante «+»: vidrio claro como el botón de perfil, con el + en verde */
html:not([data-surface="solido"]):not([data-style="ninguno"]) .fab{background:rgba(255,255,255,min(1,max(.1,calc(.62*var(--gk)))));-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);border:1px solid rgba(0,0,0,.11);color:var(--accent);text-shadow:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 6px rgba(255,255,255,.9),0 8px 22px -6px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]):not([data-surface="solido"]):not([data-style="ninguno"]) .fab{background:rgba(255,255,255,min(1,max(.1,calc(.10*var(--gk)))));border-color:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 6px rgba(255,255,255,.12),0 8px 22px -6px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}}
html:root[data-theme="dark"]:not([data-surface="solido"]):not([data-style="ninguno"]) .fab{background:rgba(255,255,255,min(1,max(.1,calc(.10*var(--gk)))));border-color:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 6px rgba(255,255,255,.12),0 8px 22px -6px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}
html:not([data-surface="solido"]):not([data-style="ninguno"]) .fab:active{transform:scale(.94)}

/* Campos: fondo translúcido y borde fino */
html:not([data-surface="solido"]):not([data-style="ninguno"]) input:not([type=checkbox]):not([type=radio]):not([type=range]),html:not([data-surface="solido"]):not([data-style="ninguno"]) select,html:not([data-surface="solido"]):not([data-style="ninguno"]) textarea{background:color-mix(in srgb,var(--field) 55%,transparent);border-color:var(--glass-edge);box-shadow:inset 0 1px 3px rgba(0,0,0,.10),0 1px 0 rgba(255,255,255,.04)}

/* Botón de perfil: solo con vidrio activo */
html[data-surface="solido"] .avatar{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);box-shadow:none}

/* Botones verdes y rojos: también cápsula, igual que los de vidrio */
html:not([data-surface="solido"]):not([data-style="ninguno"]) .btn.primary,html:not([data-surface="solido"]):not([data-style="ninguno"]) .btn.danger{border-radius:999px}

/* Deslizador de transparencia del vidrio (Ajustes → Superficies) */
.gslide{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);font-weight:700}
.gslide input[type=range]{flex:1;min-width:0;width:auto;padding:0;height:28px;background:transparent;border:0;box-shadow:none;accent-color:var(--accent)}
.gslide span{white-space:nowrap}

/* Barra verde del carrito: el botón Cobrar siempre blanco y legible sobre el verde */
html:not([data-style="ninguno"]) .vbar .btn{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important;box-shadow:0 1px 3px rgba(0,0,0,.22)!important}

/* Teclado en pantalla: las ventanas se levantan sobre el teclado y se pueden desplazar */
.modal{bottom:var(--kb,0px)}
.modal .dlg{max-height:calc(100% - 12px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:520px){.modal .dlg{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}html.kb-open .modal .dlg{padding-bottom:16px;border-radius:30px 30px 0 0}}

/* Campo enfocado dentro de una ventana: la ventana sube y se limita a la mitad de arriba para que el teclado no la tape */
@media (max-width:520px){
  html.mfocus:not(.kb-open) .modal{align-items:flex-start;padding:8px 8px 0}
  html.mfocus:not(.kb-open) .modal .dlg{max-height:44%;border-radius:26px;padding-bottom:16px}
}

/* Pantalla de carga (celular): texto sin encimarse, barra de avance de vidrio, fondo más tranquilo */
.sp-pbar{display:none}
@media (max-width:1099px){
  #splash{background:radial-gradient(65% 42% at 18% 14%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%),radial-gradient(60% 40% at 88% 84%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%),radial-gradient(40% 28% at 80% 22%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 70%),var(--bg)}
  .sp-steps li{transition:opacity .12s ease,transform .12s ease,color .2s}
  .sp-steps li.cur,.sp-steps li.done.cur,.sp-steps li.on.cur{transition:opacity .22s ease .14s,transform .22s ease .14s,color .2s}
  .sp-dots{display:none}
  .sp-pbar{display:block;width:100%;height:8px;border-radius:999px;margin-top:8px;overflow:hidden;background:color-mix(in srgb,var(--fg) 9%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.35)}
  .sp-pbar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
  #splash.ok .sp-logo{animation:none}
}

/* Logo del negocio más grande en la pantalla de carga */
@media (max-width:1099px){
  .sp-card{width:min(300px,82vw)}
  .sp-logo.img{width:148px;height:124px;border-radius:32px;padding:12px;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 0 0 1px rgba(0,0,0,.05)}
}

/* Logo de la carga: solo el logo, sin recuadro blanco (se invierte en oscuro si el logo es oscuro) */
.sp-logo.img{background:transparent;padding:0;box-shadow:none;border-radius:0}
@media (max-width:1099px){.sp-logo.img{width:190px;height:136px;padding:0;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent))}}
@media (prefers-color-scheme:dark){html[data-logo-dark]:not([data-theme="light"]) .sp-logo.img{filter:invert(1) hue-rotate(180deg) drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent))}}
html[data-theme="dark"][data-logo-dark] .sp-logo.img{filter:invert(1) hue-rotate(180deg) drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent))}

/* Pantalla de PIN (celular): teclas de vidrio redondas, todo en una pantalla, puntos siempre visibles */
.pindots.shake{animation:pinshake .38s ease}
@keyframes pinshake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.pindots.shake{animation:none}}
@media (max-width:1099px){
  #auth .auth.pad{padding-block:10px}
  #auth .auth.pad .card{padding:18px 18px 12px;gap:8px}
  #auth .auth.pad .asheet{gap:10px}
  #auth .auth.pad .ahero{gap:4px}
  #auth .auth.pad .logo.hero{max-height:84px}
  #auth .auth.pad .ahero h1{font-size:1.5rem}
  .pindots{min-height:22px;gap:12px}
  .pindots i{width:14px;height:14px}
  .auth.pad .pinpad{grid-template-columns:repeat(3,72px);justify-content:space-between;max-width:300px;margin-inline:auto;gap:16px 0}
  #auth .auth .padk{width:72px;height:72px;border-radius:50%;padding:0;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),0 4px 12px -4px rgba(0,0,0,.18);font-size:1.5rem}
  #auth .auth .padk:active{transform:scale(.92);background:color-mix(in srgb,var(--accent) 22%,var(--glass))}
  #auth .auth .padk.del{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #auth .auth.pad #abtn{min-height:52px}
  #auth .auth.pad .linkbtn{display:block;margin:0 auto;text-decoration:none;padding:5px 8px;font-size:.8rem;color:var(--muted)}
  #auth .auth.pad #amail{color:var(--accent-2)}
  #auth .auth.pad .asheet>.credit{padding-top:0}
}
html[data-surface="solido"] #auth .auth .padk{border:1px solid var(--line)!important;box-shadow:none!important}

/* Estilo Mostrador: conserva sus formas (teclas y puntos cuadrados con esquina suave), con vidrio */
@media (max-width:1099px){
  html[data-style="mostrador"] .auth.pad .pinpad{grid-template-columns:repeat(3,82px);max-width:274px;gap:10px 0}
  .auth.pad .pinpad,html[data-style="mostrador"] .auth.pad .pinpad{grid-template-columns:repeat(3,max-content);justify-content:center;max-width:300px;margin-inline:auto;column-gap:18px;row-gap:16px}
  html[data-style="mostrador"] #auth .auth .padk{width:82px;height:58px;border-radius:16px;font-size:1.5rem}
  html[data-style="mostrador"] .pindots i{width:16px;height:16px;border-radius:5px}
}

/* ===== Escritorio: menú lateral con grupos, tarjeta de persona y pie ===== */
nav.tabs .navwho,nav.tabs .navft{display:none}
@media (min-width:1100px){
  body{padding-left:288px}
  nav.tabs{width:240px;padding:12px}
  nav.tabs .navwho{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:6px;border-radius:18px;cursor:pointer;border:1px solid var(--glass-edge);background:var(--glass-strong);flex:none}
  nav.tabs .navwho i{font-style:normal;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-weight:800;flex:none}
  nav.tabs .navwho span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  nav.tabs .navwho b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  nav.tabs .navwho em{font-style:normal;font-size:.8rem;color:var(--muted)}
  nav.tabs button[data-grp]{margin-top:26px}
  nav.tabs button[data-grp]::after{content:attr(data-grp);position:absolute;left:6px;top:-21px;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);pointer-events:none}
  nav.tabs button[data-grp]:first-of-type{margin-top:26px}
  nav.tabs button[aria-selected="true"]{color:var(--accent);font-weight:800}
  nav.tabs .ind{background:var(--accent-soft);box-shadow:var(--glass-hi)}
  nav.tabs .ind::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
  nav.tabs .navft{display:block;margin-top:auto;padding:14px 8px 2px;font-size:.7rem;color:var(--muted);text-align:center}
  .card{padding:22px;gap:16px}
}
@media (min-width:1500px){.card{padding:24px;gap:18px}}
@media (min-width:1100px){
  .kbhint{bottom:56px;left:36px;width:172px}
  nav.tabs{padding-bottom:12px}
}
@media (min-width:1100px) and (max-height:899px){.kbhint{display:none}}

/* ===== Escritorio — Bloque 4: tablas ===== */
@media (min-width:1100px){
  .thead{position:sticky;top:0;z-index:3;background:var(--surface);padding:12px 10px 10px;border-radius:12px 12px 0 0;box-shadow:0 1px 0 var(--line),0 6px 10px -8px rgba(0,0,0,.28)}
  #ilist .item.inv,.item.srow,.item.trow{min-height:56px;padding-inline:10px;border-radius:0;transition:background .18s ease}
  #ilist .item.inv{padding-block:10px}
  #ilist .item.inv:hover,.item.srow:hover,.item.trow:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
  #ilist .item.inv .pp,.item.srow .ctot,.item.trow .tr,.item.fia .tr,.item.pur .tr,.thead .r{font-variant-numeric:tabular-nums}
  #ilist .item.inv>.row,.item.srow>[data-open],.item.trow>.row,.item.trow>.tact,.item.trow .pacts{opacity:.88;transition:opacity .18s ease}
  #ilist .item.inv:hover>.row,#ilist .item.inv:focus-within>.row,.item.srow:hover>[data-open],.item.trow:hover>.row,.item.trow:hover>.tact,.item.trow:hover .pacts,.item.trow:focus-within>.tact,.item.trow:focus-within .pacts{opacity:1}
}
@media (min-width:1100px){#ilist .thead{top:86px}}
@media (min-width:1100px){
  .cli,.thead.cli-h,#clist .thead{--cols:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) 230px}
  .item.cli>.row{flex-wrap:wrap;justify-content:flex-end;gap:6px}
}

/* ===== Escritorio — Bloques 2 y 5: encabezado plano y panel de Inicio ===== */
.ptitle{display:none}
@media (min-width:1100px){
  .ptitle{display:flex;flex-direction:column;gap:2px;grid-area:biz;min-width:0}
  header.top .ptitle h1{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:-.025em;line-height:1.1;margin:0}
  .ptitle span{font-size:.9rem;color:var(--muted);text-transform:capitalize;text-transform:none}
  .bizlabel{display:none}
  header.top{padding-block:22px 10px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .head-r .avatar{display:none}
  #isumcard .tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  #isumcard .quick{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  #isumcard .tiles .tile:first-child .v{font-size:2.6rem}
  #isumcard .tiles .tile .v{font-variant-numeric:tabular-nums}
}

/* ===== Escritorio — Bloques 6, 7, 9, 10, 11, 12, 13, 14 ===== */
@media (min-width:1100px){
  /* 6 y 14: formularios con campos de ancho legible; Ajustes con íconos más grandes */
  #tab-ajustes .card label.f>input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=search]):not([type=color]){max-width:560px}
  .ajhub .ajrow .ajic{width:44px;height:44px;border-radius:14px}
  .ajhub .ajrow .ajic svg{width:24px;height:24px}
  /* 7: ventanas más anchas cuando tienen varios campos */
  .dlg:has(label.f:nth-of-type(3)),.dlg:has(table),.dlg:has(.tiles){max-width:680px}
  .dlg:has(label.f:nth-of-type(6)){max-width:800px}
  /* 9: estados vacíos con más presencia */
  .empty{padding:34px 16px;font-size:1rem;border:1px dashed color-mix(in srgb,var(--fg) 14%,transparent);background:color-mix(in srgb,var(--field) 70%,transparent)}
  /* 10: tipografía */
  body{line-height:1.55;font-size:.9rem}
  .card h2{font-size:1.2rem;letter-spacing:-.01em}
  .card.fold>h2{font-size:1.2rem}
  /* 11.2: sombras más sutiles (el vidrio se mantiene) */
  .card{box-shadow:var(--glass-hi),0 6px 18px -14px rgba(0,0,0,.28)}
  /* 12: transiciones más elegantes */
  .btn,.chip,.seg button,.item,.tile,.ajrow{transition:background-color .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1),filter .22s,opacity .2s,color .2s,border-color .2s}
  .btn:hover:not(:disabled){transform:translateY(-1px)}
  .btn:active:not(:disabled){transform:none}
  section[role="tabpanel"]:not([hidden]){animation:pcfade .28s cubic-bezier(.2,.7,.2,1)}
}
@keyframes pcfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){section[role="tabpanel"]:not([hidden]){animation:none}}
/* 13: pantallas grandes */
@media (min-width:1900px){
  .wrap,#app[data-tab="vender"] .wrap{max-width:1560px}
  #hlist{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:26px}
}
@media (min-width:2400px){
  .wrap,#app[data-tab="vender"] .wrap{max-width:1900px}
  html{font-size:112%}
}
@media (min-width:900px){
  #app[data-tab="vender"] #tab-vender>#vexch{grid-column:1}
  #app[data-tab="vender"] #tab-vender>#vexch:empty{display:none}
  #app[data-tab="vender"] #tab-vender>.cartcard{grid-column:2;grid-row:1/span 2}
}
@media (min-width:1100px){#tab-inicio>.card.pcwide,#tab-caja>.card.pcwide,#tab-agenda>.card.pcwide,#tab-fiado>.card.pcwide,#tab-cotizar>.card.pcwide,#tab-servicio>.card.pcwide{grid-column:1/-1}}

/* Selección múltiple en Inventario (solo PC) */
.isel,.isel-h,.iselbar{display:none}
@media (min-width:1100px){
  .isel-h{display:flex;align-items:center;padding-left:2px}
  #ilist .item.inv{position:relative}
  .isel{display:block;width:18px;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}
  #ilist .item.inv>.isel{position:absolute;left:-2px;top:50%;translate:0 -50%;z-index:2;opacity:0;transition:opacity .15s}
  #ilist .item.inv:hover>.isel,#ilist .item.inv>.isel:checked,#ilist .item.inv:focus-within>.isel,#ilist:has(.isel:checked) .item.inv>.isel{opacity:1}
  #ilist .item.inv.picked{background:color-mix(in srgb,var(--accent) 11%,transparent)}
  .iselbar:not([hidden]){display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:fixed;z-index:30;bottom:24px;left:calc(288px + (100vw - 288px)/2);transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),0 14px 34px -10px rgba(0,0,0,.4);max-width:calc(100vw - 340px)}
  .iselbar b{font-size:.9rem;padding:0 6px}
}
@media (min-width:1100px){
  .inv-h,#ilist .item.inv{grid-template-columns:76px minmax(0,1fr) 170px 150px 190px}
  #ilist .item.inv>.thumb{margin-left:28px}
  #ilist .item.inv>.isel{left:10px}
  .iselbar:not([hidden]){width:max-content;flex-wrap:nowrap;white-space:nowrap}
}
@media (min-width:1100px){.iselbar:not([hidden]){background:color-mix(in srgb,var(--surface) 92%,transparent)}}

/* Filas fantasma (carga) */
.skel{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.skrow{display:flex;align-items:center;gap:12px}
.skrow>span{flex:1;display:flex;flex-direction:column;gap:8px}
.skc{width:44px;height:44px;border-radius:12px;flex:none}
.skl{display:block;height:12px;border-radius:6px}.skl.s{height:9px}
.skc,.skl{background:linear-gradient(90deg,var(--field) 25%,color-mix(in srgb,var(--fg) 12%,var(--field)) 50%,var(--field) 75%);background-size:200% 100%;animation:skshine 1.3s ease-in-out infinite}
@keyframes skshine{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skc,.skl{animation:none}}

/* Distintivos del menú lateral (PC) */
nav.tabs .nbadge{display:none}
@media (min-width:1100px){
  nav.tabs button .nbadge{display:inline-block;margin-left:auto;font-style:normal;font-size:.7rem;font-weight:800;line-height:1;padding:5px 8px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-variant-numeric:tabular-nums;white-space:nowrap}
  nav.tabs button[aria-selected="true"] .nbadge{background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
  nav.tabs button[data-tab="caja"] .nbadge{background:var(--accent-soft);color:var(--accent)}
}

.sclist{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.sclist h3{margin:12px 0 2px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.scrow kbd{font:600 .78rem/1 var(--f-display,inherit);padding:4px 8px;border-radius:7px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);white-space:nowrap}

/* Vista compacta de tablas (PC) */
.dens{display:none}
@media (min-width:1100px){
  .head-r .dens:not([hidden]){display:inline-flex;align-items:center;min-height:38px;margin-right:10px}
  html[data-dens="compact"] #ilist .item.inv,html[data-dens="compact"] .item.srow,html[data-dens="compact"] .item.trow{min-height:40px;padding-block:4px}
  html[data-dens="compact"] #ilist .item.inv>.thumb{width:32px;height:32px;font-size:.8rem;border-radius:9px}
  html[data-dens="compact"] #ilist .item.inv .pcost{display:none}
  html[data-dens="compact"] #ilist .item.inv .s{font-size:.8rem;line-height:1.3}
  html[data-dens="compact"] .item.srow,html[data-dens="compact"] .item.trow{font-size:.9rem}
  html[data-dens="compact"] .thead{padding-block:8px 6px}
  html[data-dens="compact"] .item .btn.small{min-height:30px;padding-block:3px}
}

/* ---------- celular y tableta: fila de cliente con los botones debajo del nombre (el nombre no se aplasta) ---------- */
@media (max-width:1099px){
  .item.cli{flex-wrap:wrap;row-gap:10px}
  .item.cli>.main{flex:1 1 100%}
  .item.cli>.row{flex:1 1 100%;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .item.cli>.row .btn{flex:1 1 30%;justify-content:center;padding-inline:8px}
}

/* ===== Liquid Glass en subsecciones de Ajustes, pestañas, ventanas y catálogo interno (celular) =====
   Mismo lenguaje del menú de Ajustes: resplandor de fondo, título grande, vidrio con brillo superior,
   campos de vidrio, casillas tipo interruptor, segmentos en cápsula. En «Sólido» y en estilo «Color» no cambia el fondo. */
@media (max-width:1099px){
  /* Resplandor ambiente detrás de todas las pantallas (lo que el vidrio difumina) */
  html:not([data-surface="solido"]):not([data-style="ninguno"]) body::before{
    background:
      radial-gradient(circle 220px at 28% 6%,var(--ga1),transparent),
      radial-gradient(circle 150px at 88% 26%,var(--ga2),transparent),
      radial-gradient(circle 190px at 12% 62%,var(--ga3),transparent),
      radial-gradient(60% 38% at 12% 0%,var(--blob1),transparent 70%),radial-gradient(55% 40% at 100% 22%,var(--blob2),transparent 70%),radial-gradient(70% 45% at 25% 100%,var(--blob3),transparent 70%)}

  /* Tarjetas: brillo superior (luz reflejada) */
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .card:not(.item .card),
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .tile{
    background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%)}
  html:not([data-surface="solido"]) .card{border-radius:24px}
  .card>h2{font-weight:750;letter-spacing:-.01em}

  /* Barra de búsqueda y de filtros pegada arriba: vidrio en vez de fondo sólido */

  /* Ajustes → subsección: botón de volver en cápsula y título grande, como el menú */
  #ajbar:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:10px}
  #ajbar #ajback{display:inline-flex;align-items:center;gap:2px;min-height:38px;padding:6px 14px 6px 10px;border-radius:999px;font-weight:700}
  #ajbar #ajtitle{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:-.02em;line-height:1.1;margin:2px 4px 4px}
  .asearch input,.asearch input:focus{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0}
  .asearch{box-shadow:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

  /* Campos: vidrio hundido */
  .card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(#asearch),.card select,.card textarea,.dlg input:not([type=checkbox]):not([type=radio]):not([type=range]),.dlg select,.dlg textarea{
    border-radius:14px;border:1px solid var(--glass-edge);box-shadow:inset 0 1px 3px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.06)}

  /* Casillas → interruptor tipo iOS */
  label.chk{justify-content:space-between;gap:14px;flex-direction:row-reverse;padding:8px 2px;line-height:1.3}
  label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:50px;height:30px;margin:0;border-radius:999px;cursor:pointer;
    background:var(--field);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:background .2s,border-color .2s}
  label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18);transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
  label.chk input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
  label.chk input[type=checkbox]:checked::after{transform:translateX(20px)}
  label.chk input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  label.chk input[type=checkbox]:disabled{opacity:.5}

  /* Segmentos (Productos / Compras / Herramientas, periodos, etc.): cápsula de vidrio */
  html:not([data-surface="solido"]) .seg{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi);border-radius:999px;padding:4px}
  html:not([data-surface="solido"]) .seg button{border-radius:999px}
  html:not([data-surface="solido"]) .seg button.on{box-shadow:var(--glass-hi),0 2px 8px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
  html:not([data-surface="solido"]) .seg.rper,html:not([data-surface="solido"]) .seg.segw{border-radius:22px}
  html:not([data-surface="solido"]) .seg.rper button,html:not([data-surface="solido"]) .seg.segw button{border-radius:18px}

  /* Ventanas y hojas: más desenfoque detrás, brillo superior y asa */
  html:not([data-surface="solido"]) .modal{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .dlg{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);box-shadow:var(--glass-hi),0 -10px 40px -14px rgba(0,0,0,.35),0 24px 60px -12px rgba(0,0,0,.45)}
  .dlg::before{content:"";align-self:center;flex:none;width:38px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--fg) 22%,transparent);margin:-10px 0 4px}
  .dlg.scan::before,.dlg.ticketdlg::before{display:none}

  /* Filas de lista (productos, clientes, ventas) dentro de tarjetas: separadores finos de vidrio */
  .card .item{border-color:var(--glass-edge)}
}

/* ===== Liquid Glass en el escritorio (≥1100px): mismo lenguaje que el celular ===== */
@media (min-width:1100px){
  html:not([data-surface="solido"]):not([data-style="ninguno"]) body::before{
    background:
      radial-gradient(circle 420px at 24% 4%,var(--ga1),transparent),
      radial-gradient(circle 360px at 92% 22%,var(--ga2),transparent),
      radial-gradient(circle 440px at 40% 96%,var(--ga3),transparent),
      radial-gradient(60% 38% at 12% 0%,var(--blob1),transparent 70%),radial-gradient(55% 40% at 100% 22%,var(--blob2),transparent 70%),radial-gradient(70% 45% at 25% 100%,var(--blob3),transparent 70%)}
  /* Tarjetas y cifras: brillo superior */
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .card:not(.item .card),
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .tile{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%)}
  .card>h2{font-weight:750;letter-spacing:-.01em}
  /* Menú de Ajustes: panel de vidrio */
  html:not([data-surface="solido"]) #tab-ajustes .ajhub:not([hidden]){background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-hi),var(--glass-drop);padding:8px}
  /* Buscadores y barras pegadas arriba */
  .asearch{box-shadow:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .asearch input,.asearch input:focus{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0}
  html:not([data-surface="solido"]) #ilist .thead,html:not([data-surface="solido"]) .thead{-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
  /* Campos de vidrio hundido */
  .card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(#asearch),.card select,.card textarea,.dlg input:not([type=checkbox]):not([type=radio]):not([type=range]),.dlg select,.dlg textarea{
    border-radius:12px;border:1px solid var(--glass-edge);box-shadow:inset 0 1px 3px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.06)}
  /* Casillas → interruptor */
  label.chk{justify-content:space-between;gap:14px;flex-direction:row-reverse;padding:7px 2px;line-height:1.3;max-width:640px}
  label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:999px;cursor:pointer;
    background:var(--field);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:background .2s,border-color .2s}
  label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18);transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
  label.chk input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
  label.chk input[type=checkbox]:checked::after{transform:translateX(18px)}
  label.chk input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  label.chk input[type=checkbox]:disabled{opacity:.5}
  /* Segmentos en cápsula de vidrio */
  html:not([data-surface="solido"]) .seg{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi);border-radius:999px;padding:4px}
  html:not([data-surface="solido"]) .seg button{border-radius:999px}
  html:not([data-surface="solido"]) .seg button.on{box-shadow:var(--glass-hi),0 2px 8px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
  html:not([data-surface="solido"]) .seg.rper,html:not([data-surface="solido"]) .seg.segw{border-radius:22px}
  html:not([data-surface="solido"]) .seg.rper button,html:not([data-surface="solido"]) .seg.segw button{border-radius:18px}
  /* Ventanas */
  html:not([data-surface="solido"]) .modal{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
  html:not([data-surface="solido"]):not([data-style="ninguno"]) .dlg{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%)}
  .card .item{border-color:var(--glass-edge)}
  /* Menú lateral: brillo superior */
  html:not([data-surface="solido"]):not([data-style="ninguno"]) nav.tabs{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%)}
}

/* Comprobante en pantalla (detalle de la venta): tarjeta de vidrio. El ticket impreso, el PDF y el WhatsApp siguen planos. */
html:not([data-surface="solido"]):not([data-style="ninguno"]) .receipt{background-color:var(--glass);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:22px;box-shadow:var(--glass-hi),var(--glass-drop);padding:18px}

/* Pantalla de carga sin marca guardada: el logo y el nombre de Cuadra no se muestran hasta saber el negocio */
#splash.nobrand .sp-logo,#splash.nobrand .sp-name,#splash.nobrand .sp-by{opacity:0}
#splash .sp-logo,#splash .sp-name,#splash .sp-by{transition:opacity .25s ease}

/* Detalle del proveedor: tarjetas parejas (sin la tarjeta principal grande) y botones de contacto en una fila */
.sptiles .tile:first-child,.sptiles .tile:last-child:nth-child(even){grid-column:auto}
html:not([data-style="mostrador"]):not([data-style="ninguno"]) .sptiles .tile:first-child{background-color:var(--glass);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);color:var(--fg);border-color:var(--glass-edge)}
html[data-style="mostrador"] .sptiles .tile:first-child .v{color:inherit;font-size:1.5rem}
html:not([data-style="mostrador"]):not([data-style="ninguno"]) .sptiles .tile:first-child .k{color:var(--muted);opacity:1}
.sptiles .tile:first-child .v{font-size:1.5rem}
.cpact3.sp3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px}
#spbody label.f{margin-top:10px}
#spbody .sptabs{grid-template-columns:repeat(3,minmax(0,1fr))}

.vimei{border-top:1px solid var(--line);padding:8px 0}.vimeirow{align-items:center;gap:8px;flex-wrap:nowrap;margin-top:4px}.vimeirow .num{word-break:break-all}

/* Face ID o huella */
.uitem svg.ui.stroke{fill:none;stroke:currentColor}
.pkbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%}
.pkbtn[hidden]{display:none}
.pkbtn svg{flex:none}
.pkhero{display:flex;justify-content:center;color:var(--accent);margin-bottom:4px}
.pkhero svg{width:52px;height:52px}
.pkacts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pkacts .linkbtn{align-self:center}
.pkstate{display:flex;align-items:center;gap:10px;font-weight:700;padding:10px 0}
.pkstate.on{color:var(--ok)}
.pkhere{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pkwarn{color:var(--fg);font-weight:600}
.pkh{font-size:1rem;margin:14px 0 4px}

/* ===================== REPORTES (rediseño) ===================== */
:root{--g1:#0f5f2e;--g2:#15803d;--g3:#33a05c;--g4:#5fb582;--prev:#8a9690;--d1:#15803d;--d2:#2563eb;--d3:#d97706;--d4:#7c3aed;--d5:#0891b2;--d6:#db2777}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--g1:#4ade80;--g2:#22b358;--g3:#198a45;--g4:#12703a;--prev:#6d7b74;--d1:#16a34a;--d2:#3b82f6;--d3:#d97706;--d4:#a855f7;--d5:#0891b2;--d6:#db2777}}
:root[data-theme="dark"]{--g1:#4ade80;--g2:#22b358;--g3:#198a45;--g4:#12703a;--prev:#6d7b74;--d1:#16a34a;--d2:#3b82f6;--d3:#d97706;--d4:#a855f7;--d5:#0891b2;--d6:#db2777}
#tab-reportes{container:rp/inline-size}
.rp svg{display:block}
.r-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.r-head h2{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0}
.r-head .hint{margin-top:4px}
.r-ha{display:flex;gap:8px;flex:none}
.r-ha .btn{display:inline-flex;align-items:center;gap:7px;padding-inline:12px;position:relative}
.r-ha svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-ha .dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font-size:.7rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.r-exp{position:relative}
@media(max-width:520px){.r-ha .btn{padding:0;width:44px;justify-content:center}.r-ha .btn .t{display:none}.r-ha svg{width:19px;height:19px}}
.r-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:230px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(30px) saturate(2);backdrop-filter:blur(30px) saturate(2);border:1px solid var(--glass-edge);border-radius:18px;padding:6px;box-shadow:var(--glass-hi),0 18px 40px -12px rgba(0,0,0,.4)}
.r-menu[hidden]{display:none}
.r-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;border:0;background:transparent;color:var(--fg);border-radius:12px;padding:11px 12px;font-weight:600;cursor:pointer;text-align:left}
.r-menu button:hover{background:var(--field)}
.r-menu small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}
.r-chips{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;margin:16px -16px 0;padding:4px 16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%)}
.r-chips::-webkit-scrollbar{display:none}
.r-chip{flex:none;scroll-snap-align:start;border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi);color:var(--muted);border-radius:99px;padding:9px 15px;font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap}
.r-chip.on{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--accent);color:var(--accent-fg);border-color:rgba(255,255,255,.35);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 8px 18px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.r-filt{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.rg{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
.rg>*{min-width:0}
.rg>.card{margin:0}
@container rp (min-width:760px){
  .rg{grid-template-columns:repeat(12,minmax(0,1fr))}
  .a-hero{grid-column:span 5}.a-alert{grid-column:span 7}
  .a-hero:last-child,.a-hero+.a-kpi{grid-column:1/-1}
  .a-kpi,.a-trend,.a-more,.a-full{grid-column:1/-1}
  .a-pay{grid-column:span 5}.a-prod{grid-column:span 7}
  .a-half{grid-column:span 6}
}
.r-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:20px 20px 0;color:var(--accent-fg);border:1px solid rgba(255,255,255,.35);background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:var(--glass-hi),0 18px 36px -14px color-mix(in srgb,var(--accent) 70%,transparent);display:flex;flex-direction:column;min-height:236px}
.r-hero .k{font-size:.9rem;font-weight:700;opacity:.88}
.r-hero .big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.3rem,9vw,3rem);letter-spacing:-.035em;line-height:1.05;margin-top:6px;white-space:nowrap}
.r-delta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;align-self:flex-start;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:5px 11px;font-weight:700;font-size:.8rem}
.r-delta b{font-weight:800}
.r-hero .spark{margin:auto -20px 0;height:78px;position:relative}
.r-hero .spark svg{position:absolute;inset:0}
.r-alerts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.r-al{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i v" "l l";align-items:center;gap:6px 8px;text-align:left;border:1px solid var(--glass-edge);background:var(--field);border-radius:16px;padding:12px;cursor:pointer;min-height:76px;color:var(--fg)}
.r-al svg{grid-area:i;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-al.bad svg{color:var(--bad)}.r-al.warn svg{color:var(--warn)}
.r-al span{grid-area:l;font-weight:600;font-size:.8rem;line-height:1.2;color:var(--muted)}
.r-al b{grid-area:v;justify-self:end;font-family:var(--f-display);font-size:1.2rem;font-weight:800;white-space:nowrap}
.r-ok{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600}
.r-ok svg{width:22px;height:22px;fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.r-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@container rp (min-width:700px){.r-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.r-kpi{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:15px 15px 12px;box-shadow:var(--glass-hi),var(--glass-drop);display:flex;flex-direction:column;gap:2px;min-width:0}
.r-kpi .k{color:var(--muted);font-size:.8rem;font-weight:600}
.r-kpi .v{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.025em;margin-top:3px;white-space:nowrap}
.r-kpi .d{font-size:.8rem;font-weight:700;margin:2px 0 8px}
.r-kpi .d.up{color:var(--ok)}.r-kpi .d.dn{color:var(--bad)}
.r-kpi .d span{color:var(--muted);font-weight:500}
.r-kpi .spark{height:34px;margin-top:auto;position:relative}
.r-kpi .spark svg{position:absolute;inset:0}
.r-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.r-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);font-weight:600}
.r-leg i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.r-plotbox{position:relative;border-radius:18px;background:var(--field);border:1px solid var(--line);box-shadow:none;padding:8px 4px 2px;touch-action:pan-y}
.r-plotbox svg{width:100%;overflow:visible}
.r-tip{position:absolute;pointer-events:none;z-index:5;min-width:158px;background:var(--glass-strong);-webkit-backdrop-filter:blur(24px) saturate(2);backdrop-filter:blur(24px) saturate(2);border:1px solid var(--glass-edge);border-radius:14px;padding:10px 12px;box-shadow:var(--glass-hi),0 14px 30px -10px rgba(0,0,0,.4);font-size:.8rem;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.r-tip.on{opacity:1;transform:none}
.r-tip .t{font-weight:800;margin-bottom:6px}
.r-tip .l{display:flex;align-items:center;gap:8px;justify-content:space-between;color:var(--muted)}
.r-tip .l b{color:var(--fg)}
.r-tip .l i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.r-tip .dl{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-weight:700}
.r-pay{display:flex;flex-direction:column;align-items:center;gap:14px}
.r-donut{position:relative;width:172px;height:172px;flex:none}
.r-donut svg{width:100%;height:100%}
.r-donut circle.seg{fill:none;stroke-width:22;transition:opacity .15s,stroke-width .15s;cursor:pointer;outline:none}
.r-donut.hov circle.seg{opacity:.35}.r-donut.hov circle.seg.on{opacity:1;stroke-width:25}
.r-dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 30px}
.r-dc small{font-size:.7rem;color:var(--muted);font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.r-dc b{font-family:var(--f-display);font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.r-lg{display:flex;flex-direction:column;gap:2px;width:100%}
.r-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:12px}
.r-li.on{background:var(--field)}
.r-li i{width:12px;height:12px;border-radius:50%}
.r-li .n{font-weight:600;font-size:.9rem}
.r-li .p{font-size:.7rem;color:var(--muted)}
.r-li b{font-size:.8rem;white-space:nowrap}
.r-seg{display:flex;gap:4px;padding:4px;background:var(--field);border-radius:14px}
.r-seg button{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.8rem;padding:8px 6px;border-radius:11px;cursor:pointer}
.r-seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 4px rgba(20,30,50,.14)}
.r-rows{display:flex;flex-direction:column;gap:14px}
.r-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.r-rk{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--field);color:var(--muted);font-weight:800;font-size:.8rem;margin-top:1px}
.r-row:first-child .r-rk{background:var(--accent);color:var(--accent-fg)}
.r-av2{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:.9rem}
.r-l{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.r-n{font-weight:700;font-size:.9rem;overflow-wrap:anywhere;min-width:0}
.r-l b{white-space:nowrap;font-size:.9rem}
.r-t{height:10px;border-radius:5px;background:var(--field);margin-top:6px;overflow:hidden}
.r-t i{display:block;height:100%;border-radius:0 5px 5px 0;background:color-mix(in srgb,var(--accent) 52%,var(--surface))}
.r-row:first-child .r-t i{background:var(--accent)}
.r-s{color:var(--muted);font-size:.8rem;margin-top:5px}
.r-acc{border-top:1px solid var(--line)}
.r-acc:first-of-type{border-top:0}
.r-acc summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "v c";gap:2px 10px;align-items:center;padding:14px 2px;cursor:pointer;list-style:none;font-weight:700}
.r-acc summary>span:first-child{grid-area:t}.r-acc summary svg{grid-area:c}
@container rp (min-width:700px){.r-acc summary{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t v c"}.r-acc summary span.v{text-align:right}}
.r-acc summary::-webkit-details-marker{display:none}
.r-acc summary span.v{grid-area:v;color:var(--muted);font-weight:600;font-size:.8rem}
.r-acc summary svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.r-acc[open] summary svg{transform:rotate(180deg)}
.r-accb{padding:0 2px 16px;display:flex;flex-direction:column;gap:12px}
@media(min-width:1100px){.r-head h2{display:none}}
.a-kpi .hint{margin-top:10px}

/* Clásico: el indicador del menú inferior usa la misma gota plana que Mostrador */
html:not([data-style="mostrador"]) nav.tabs .ind:not(.drag){background:var(--accent-soft);border:0;border-radius:999px;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not([data-style="mostrador"]) nav.tabs .ind:not(.drag)::after,html:not([data-style="mostrador"]) nav.tabs .ind:not(.drag)::before{display:none}
/* Clásico: el cuadro de ventas del día no muestra el fondo verde en todos los casos, así que su texto usa el color normal del tema para verse siempre */
html:not([data-style="mostrador"]) .tiles .tile:first-child{color:var(--fg)}

/* Clásico: el botón Cobrar de la barra del carrito conserva el verde y su texto blanco */
html:not([data-style="mostrador"]):not([data-style="ninguno"]) .vbar .btn.primary{background:var(--accent)!important;color:var(--accent-fg)!important;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 60%,transparent)!important}

/* Clásico: fondo sólido, sin resplandor verde ni degradado (blanco en claro, negro en oscuro) */
html:not([data-style="mostrador"]) body::before{display:none}
html:not([data-style="mostrador"]) body{background:#ffffff}
@media (prefers-color-scheme:dark){html:not([data-style="mostrador"]):not([data-theme="light"]) body{background:#000000}}
html:not([data-style="mostrador"])[data-theme="dark"] body{background:#000000}
/* Clásico: pantalla de carga e inicio de sesión con el mismo fondo sólido */
html:not([data-style="mostrador"]) #splash,html:not([data-style="mostrador"]) body:has(#auth:not([hidden])){background:#ffffff}
@media (prefers-color-scheme:dark){html:not([data-style="mostrador"]):not([data-theme="light"]) #splash,html:not([data-style="mostrador"]):not([data-theme="light"]) body:has(#auth:not([hidden])){background:#000000}}
html:not([data-style="mostrador"])[data-theme="dark"] #splash,html:not([data-style="mostrador"])[data-theme="dark"] body:has(#auth:not([hidden])){background:#000000}

/* Clásico en oscuro: sin brillo de vidrio en tarjetas, botones y cifras; la barra de navegación lo conserva */
@media (prefers-color-scheme:dark){html:not([data-style="mostrador"]):not([data-theme="light"]){--glass-hi:none}}
html:not([data-style="mostrador"]):not([data-theme="light"]) :is(.card,.tile,.dlg,.btn,.fab,.receipt,.sptiles .tile:first-child,.r-hero,.r-kpi,.r-plotbox,.card .card){background-image:none!important;box-shadow:var(--glass-drop,none)!important}{background-image:none!important;box-shadow:var(--glass-drop,none)!important}
html:not([data-style="mostrador"])[data-theme="dark"]{--glass-hi:none}
html:not([data-style="mostrador"])[data-theme="dark"] :is(.card,.tile,.dlg,.btn,.fab,.receipt,.sptiles .tile:first-child,.r-hero,.r-kpi,.r-plotbox,.card .card){background-image:none!important;box-shadow:var(--glass-drop,none)!important}

/* Mostrador en oscuro: sin brillo de vidrio en tarjetas, botones y cifras; la barra de navegación lo conserva */
@media (prefers-color-scheme:dark){html[data-style="mostrador"]:not([data-theme="light"]){--glass-hi:none}}
@media (prefers-color-scheme:dark){html[data-style="mostrador"]:not([data-theme="light"]) :is(.card,.tile,.dlg,.btn,.fab,.receipt,.sptiles .tile:first-child,.r-hero,.r-kpi,.r-plotbox,.card .card){background-image:none!important;box-shadow:var(--glass-drop,none)!important}}
html[data-style="mostrador"][data-theme="dark"]{--glass-hi:none}
html[data-style="mostrador"][data-theme="dark"] :is(.card,.tile,.dlg,.btn,.fab,.receipt,.sptiles .tile:first-child,.r-hero,.r-kpi,.r-plotbox,.card .card){background-image:none!important;box-shadow:var(--glass-drop,none)!important}

/* El estilo fija la superficie: Mostrador siempre sólido, Clásico siempre vidrio; por eso el selector Vidrio/Sólido se oculta */
.f:has(#ssurf){display:none}

/* Clásico: barra de navegación casi transparente (vidrio muy suave) */
html:not([data-style="mostrador"]) nav.tabs{background:var(--surface)!important;background-image:none!important;border:1px solid var(--line)!important}
/* Mostrador siempre es sólido: el deslizador de transparencia no aplica y se oculta */
html[data-style="mostrador"] #sglassrow{display:none}

/* Caja de funciones del plan Pro (Ajustes → Funciones del sistema) */
.pro-box{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line,#e3e6ea);border-radius:var(--r-md,12px);padding:14px;background:rgba(127,127,127,.06)}
.pro-box .pro-h{font-weight:700}
.pro-box .btn{align-self:flex-start}

/* Formulario de órdenes de servicio: bloques con título y campos alineados por abajo */
#svform .fsec{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line,rgba(127,127,127,.25))}
#svform .fsec>h3{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,var(--muted))}
#svform .row>label.f{justify-content:flex-end}

/* Orden abierta: botones agrupados por lo que hacen */
.svgrp{display:flex;flex-direction:column;gap:6px}
.svgrp>.gt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.svgrp>.row{display:flex;flex-wrap:wrap;gap:8px}

/* Campos de una misma fila: misma altura (el select del navegador sale más bajo que el input) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select){height:50px}

/* Filas que son solo botones: todos del mismo ancho en cada línea; el que queda solo ocupa la línea completa */
.row:not(:has(>:not(.btn))):not([style*="nowrap"])>.btn:not(.x):not(.icon),.svgrp>.row>.btn{flex:1 1 9.5rem;text-align:center}

/* Calendario para elegir fechas */
.dlg.cal{gap:12px}
.calpre{display:flex;flex-wrap:wrap;gap:6px}
.calpre .btn{flex:1 1 auto}
.calnav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.calnav b{font-size:1rem}
.calnav .btn{min-width:44px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calh{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);padding:4px 0}
.calday{aspect-ratio:1;min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--fg);font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.calday:hover{background:var(--accent-soft)}
.calday.mid{background:var(--accent-soft);border-radius:6px}
.calday.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.calday.on{background:var(--accent);color:var(--accent-fg)}

/* Menú lateral (PC): filas más compactas y discretas, sin botones tipo píldora */
@media (min-width:1100px){
  nav.tabs{gap:2px}
  nav.tabs button{min-height:40px;gap:12px;padding:0 12px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--muted)}
  nav.tabs button svg{width:19px;height:19px;opacity:.85}
  nav.tabs button:hover{background:color-mix(in srgb,var(--fg,currentColor) 6%,transparent);color:var(--fg,inherit)}
  nav.tabs button[aria-selected="true"],nav.tabs button.on,nav.tabs button.active{color:var(--accent);background:transparent}
  nav.tabs .ind{border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;box-shadow:none!important}
}

/* Formularios largos en dos columnas (PC ancho) */
@media (min-width:1400px){
  #pform,#cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start}
  #pform>h2,#pform>.hint,#pform>details,#pform>#pcatbox,#pform>#plosshint,#pform>#pphoto+*,#pform>.row:has(#pphoto),#pform>.row:has(#pprice),#pform>.row:has(#pram),#pform>.row:has(#pbrand),#pform>.row:has(#pstock),#pform>.row:last-of-type,#pform>[id$="err"],#pform>[id$="Err"],#pform>.err,#pform>.sub,#pform>#pcatnewrow,
  #cform>h2,#cform>.hint,#cform>#cbdayrow,#cform>#cpd,#cform>#cxf,#cform>.err,#cform>.row:last-of-type,#cform>.row:has(#cpdexp){grid-column:1/-1}
  #pform>label.f:has(#pname),#cform>label.f:has(#caddr){grid-column:1/-1}
  #pform>*,#cform>*{margin:0}
}
/* Ventanas arrastrables en PC: se mueven tomando el título */
@media (min-width:1100px) and (hover:hover){
  .modal .dlg:not(.scan)>h2:first-child{cursor:grab;user-select:none;touch-action:none}
  .modal .dlg.dragging>h2:first-child{cursor:grabbing}
}

/* Menú lateral plano (PC): sin cápsula, pegado al borde, con línea divisoria */
@media (min-width:1100px){
  nav.tabs{left:0!important;top:0!important;bottom:0!important;width:240px!important;border-radius:0!important;padding:14px 10px!important;
    background:var(--surface,var(--bg))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border:0!important;border-right:1px solid var(--line,rgba(128,128,128,.22))!important;box-shadow:none!important}
  nav.tabs::before,nav.tabs::after{display:none!important}
  nav.tabs .ind{border-radius:8px!important;background:color-mix(in srgb,var(--accent) 11%,transparent)!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  nav.tabs .ind::after,nav.tabs .ind::before{display:none!important}
  nav.tabs button{border-radius:8px!important}
  nav.tabs button:hover{border-radius:8px}
}
@media (min-width:1100px){
  nav.tabs .navwho{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line,rgba(128,128,128,.22))!important;padding:6px 6px 14px!important;margin-bottom:6px}
}

.navbrand{display:none}
@media (min-width:1100px){
  nav.tabs .navbrand{display:flex;align-items:center;gap:10px;padding:2px 8px 12px;min-width:0}
  nav.tabs .navbrand img{width:34px;height:34px;object-fit:contain;border-radius:8px;flex:none}
  nav.tabs .navbrand i{width:34px;height:34px;border-radius:8px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;flex:none}
  nav.tabs .navbrand b{font-size:1rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:1100px) and (hover:hover){
  .thead .rz{position:absolute;top:2px;bottom:2px;right:-10px;width:10px;cursor:col-resize;z-index:2;touch-action:none}
  .thead .rz::after{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .15s}
  .thead:hover .rz::after,.thead .rz:hover::after{opacity:1}
  .thead .rz:hover::after,html.rzing .thead .rz::after{background:var(--accent);opacity:1}
  html.rzing,html.rzing *{cursor:col-resize!important;user-select:none!important}
}

/* Lista de secciones de Ajustes (PC): filas planas, sin cápsulas ni círculos en los íconos */
@media (min-width:1100px){
  #tab-ajustes>.ajhub:not([hidden]){gap:2px;padding:8px;border-radius:14px}
  .ajhub .ajrow{min-height:42px;padding:0 12px;gap:12px;border-radius:8px;border:0!important;position:relative;transform:none!important}
  .ajhub .ajrow:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
  .ajhub .ajrow .ajic{width:22px!important;height:22px!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;border:0!important;flex:none;color:var(--muted)}
  .ajhub .ajrow .ajic svg{width:20px!important;height:20px!important}
  .ajhub .ajrow .ajtx b{font-size:.9rem;font-weight:600;color:var(--fg)}
  .ajhub .ajrow.on{background:color-mix(in srgb,var(--accent) 11%,transparent)!important}
  .ajhub .ajrow.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
  .ajhub .ajrow.on .ajic{color:var(--accent)}
  .ajhub .ajrow.on .ajtx b{color:var(--accent);font-weight:700}
}


/* Ajustes en celular: mismas filas planas que en PC (ícono simple, nombre, barrita verde al tocar) */
@media (max-width:1099px){
  #tab-ajustes .ajgrp{padding:6px}
  #tab-ajustes .ajgrp .ajrow{min-height:46px;padding:0 12px;gap:12px;border-radius:8px;margin:0;width:100%}
  #tab-ajustes .ajgrp .ajrow+.ajrow::before{display:none}
  #tab-ajustes .ajgrp .ajic{width:22px;height:22px}
  #tab-ajustes .ajgrp .ajic svg{width:20px;height:20px}
  #tab-ajustes .ajgrp .ajtx b{font-size:.92rem;font-weight:600}
  #tab-ajustes .ajgrp .ajtx span{display:none}
  #tab-ajustes .ajgrp .ajchev{display:none}
  #tab-ajustes .ajgrp .ajrow:active{background:color-mix(in srgb,var(--accent) 11%,transparent)}
  #tab-ajustes .ajgrp .ajrow:active::after{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
  #tab-ajustes .ajgrp .ajrow:active .ajtx b{color:var(--accent)}
}

/* Subsecciones (selectores de pestañas): mismo estilo plano que Ajustes, sin cápsula ni brillo */
html .seg{background:transparent!important;border-radius:0!important;padding:0!important;gap:0!important;box-shadow:none!important;border:0;border-bottom:1px solid var(--line,rgba(128,128,128,.25))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html .seg button,html .seg .btn{border-radius:8px 8px 0 0!important;background:transparent!important;box-shadow:none!important;border:0!important;border-bottom:3px solid transparent!important;color:var(--muted)!important;font-weight:600;min-height:44px;position:relative;transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html .seg button:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)!important}
html .seg button.on,html .seg button[aria-pressed="true"],html .seg button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 11%,transparent)!important;color:var(--accent)!important;border-bottom-color:var(--accent)!important;font-weight:700}
html[data-style="mostrador"] .seg button.on{color:var(--accent)!important}

/* Subsecciones de Ajustes: mismo diseño plano que la lista (sin vidrio, sin cápsulas, barra verde) */
html #tab-ajustes #ajback,html #ajbar #ajback{border-radius:8px!important;border:0!important;background:transparent!important;color:var(--accent)!important}
/* Secciones plegables (todo el programa): lista plana, íconos sencillos, sin flecha, barra verde en la abierta */
html .card.fold{background:transparent!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0 12px 10px!important;margin:0!important;position:relative}
html .card.fold::before{display:none}
html .card.fold:not(.closed)::before{display:block;content:"";position:absolute;left:0;top:12px;height:26px;width:3px;border-radius:2px;background:var(--accent)}
html .card.fold>h2{min-height:50px!important;margin:0 -12px!important;padding:0 12px!important;font-size:.95rem!important;font-weight:600!important;gap:12px;justify-content:flex-start!important;color:var(--fg);border-radius:8px}
html .card.fold>h2::after{display:none!important}
html .card.fold>h2:active{background:color-mix(in srgb,var(--accent) 11%,transparent)}
html .card.fold:not(.closed)>h2{color:var(--accent);font-weight:700!important}
html .card.fold[data-ic]>h2::before{content:"";width:22px;height:22px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
html .card.fold .btn,html .card.fold .btn.small{border-radius:8px!important}
html .card.fold input,html .card.fold select,html .card.fold textarea{border-radius:8px!important}
html .card.fold .btn:not(.small):not(.ghost):not(.danger){box-shadow:none!important}


/* Reportes: filtros de periodo planos (sin cápsula) */
html .r-chips{gap:2px;border-bottom:1px solid var(--line)}
html .r-chip{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--muted);padding:10px 14px;border-bottom:2px solid transparent!important;margin-bottom:-1px}
html .r-chip.on{background:color-mix(in srgb,var(--accent) 11%,transparent)!important;color:var(--accent)!important;border-bottom-color:var(--accent)!important;font-weight:700}

/* Acciones rápidas al deslizar */
@media (max-width:1099px){
  .item.swopen{position:relative}
  .swact{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:stretch;z-index:5;border-radius:0 10px 10px 0;overflow:hidden;animation:swin .16s ease-out}
  .swact button{min-width:76px;padding:0 14px;border:0;border-left:1px solid color-mix(in srgb,var(--fg) 12%,transparent);background:var(--surface,#161616);color:var(--accent);font-weight:700;font-size:.85rem}
  .swact button:first-child{background:var(--accent);color:var(--accent-fg,#fff);border-left:0}
  @keyframes swin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
}

/* Búsquedas recientes */
.recents{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 4px}
.recents .rl{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.recents button{border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:8px;padding:5px 10px;font-size:.85rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recents .rx{border-color:transparent;color:var(--muted);font-weight:500}

/* Índice A–Z */
.azbar{position:fixed;right:2px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;padding:4px 3px;border-radius:8px;background:color-mix(in srgb,var(--bg,#000) 70%,transparent);font-size:.72rem;font-weight:700;line-height:1.2;color:var(--accent);touch-action:none;user-select:none;-webkit-user-select:none}
.azbar span{padding:0 3px;min-width:16px;text-align:center}
.azbar[hidden]{display:none}
@media (min-width:1100px){.azbar{display:none!important}}

/* Secciones plegables: mismo diseño que la lista de Ajustes en celular (grupo de vidrio, filas de 46 px, íconos rellenos, barra verde al abrir) */
html .card.fold{background:var(--glass)!important;-webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;border:0!important;border-left:1px solid var(--glass-edge)!important;border-right:1px solid var(--glass-edge)!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:0 12px 8px!important}
html .card.fold.fg-first{border-top:1px solid var(--glass-edge)!important;border-radius:24px 24px 0 0!important;padding-top:6px!important;box-shadow:var(--glass-hi)!important}
html .card.fold.fg-last{border-bottom:1px solid var(--glass-edge)!important;border-radius:0 0 24px 24px!important;margin-bottom:14px!important;padding-bottom:6px!important}
html .card.fold.fg-first.fg-last{border-radius:24px!important}
html .card.fold::before{left:6px!important;top:12px!important;height:22px!important}
html .card.fold:not(.closed)::before{left:6px;top:12px;height:22px}
html .card.fold>h2{min-height:46px!important;margin:0 -6px!important;padding:0 12px!important;font-size:.92rem!important;font-weight:600!important;color:var(--fg)}
html .card.fold:not(.closed)>h2{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
html .card.fold[data-ic]>h2::before{width:22px!important;height:22px!important;color:color-mix(in srgb,var(--fg) 70%,transparent)}
html .card.fold:not(.closed)[data-ic]>h2::before{color:var(--accent)}
html .card.fold>*:not(h2){margin-top:6px}
html .card.fold[data-ic="box"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z'/></svg>")}
html .card.fold[data-ic="tag"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/></svg>")}
html .card.fold[data-ic="sl"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/></svg>")}
html .card.fold[data-ic="bar"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 5h2v14H3zM7 5h1v14H7zM10 5h2v14h-2zM14 5h1v14h-1zM17 5h2v14h-2zM20.5 5h.5v14h-.5z'/></svg>")}
html .card.fold[data-ic="money"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z'/></svg>")}
html .card.fold[data-ic="list"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/></svg>")}
html .card.fold[data-ic="user"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>")}
html .card.fold[data-ic="gear"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/></svg>")}
html .card.fold[data-ic="phone"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17 1.01 7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/></svg>")}
html .card.fold[data-ic="bell"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/></svg>")}
html .card.fold[data-ic="lock"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>")}
html .card.fold[data-ic="file"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/></svg>")}
html .card.fold[data-ic="wrench"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>")}
html .card.fold[data-ic="chart"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'/></svg>")}
html .card.fold[data-ic="info"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>")}
html .card.fold[data-ic="trash"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/></svg>")}
html .card.fold[data-ic="cal"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10z'/></svg>")}
html .card.fold.closed{padding-bottom:0!important}
html .card.fold.closed.fg-last{padding-bottom:6px!important}
html .card.fold{gap:0!important}

/* Grupo de vidrio: sombra y brillo como la lista de Ajustes, sin costuras entre filas */
html .card.fold{box-shadow:var(--glass-drop)!important;clip-path:inset(0 -48px 0 -48px)}
html .card.fold.fg-first{box-shadow:var(--glass-hi),var(--glass-drop)!important;clip-path:inset(-48px -48px 0 -48px)}
html .card.fold.fg-last{clip-path:inset(0 -48px -48px -48px)}
html .card.fold.fg-first.fg-last{clip-path:none}
html .card.fold{box-shadow:0 14px 34px -12px color-mix(in srgb,#000 24%,transparent)!important}
html .card.fold.fg-first{box-shadow:var(--glass-hi),0 14px 34px -12px color-mix(in srgb,#000 24%,transparent)!important}
html .card.fold.fg-first{box-shadow:inset 0 1.5px 0 var(--glass-edge),0 14px 34px -12px color-mix(in srgb,#000 24%,transparent)!important}
/* sin costuras: sin sombras ni recortes por fila */
html .card.fold,html .card.fold.fg-last,html .card.fold.fg-first.fg-last{box-shadow:none!important;clip-path:none!important}
html .card.fold.fg-first{box-shadow:inset 0 1.5px 0 var(--glass-edge)!important;clip-path:none!important}
/* Grupo sin sombras por fila en Clásico (vidrio) y Mostrador (sólido); gana a las reglas de vidrio del tema oscuro */
html:not(#_) .card.fold,html:not(#_) .card.fold.fg-last,html:not(#_) .card.fold.fg-first.fg-last{box-shadow:none!important;clip-path:none!important;background-image:none!important}
html:not(#_) .card.fold.fg-first{box-shadow:inset 0 1.5px 0 var(--glass-edge)!important;clip-path:none!important}
/* Sombra suave del grupo (solo en Clásico/vidrio): mitad lateral en cada fila, arriba en la primera y abajo en la última */
html:not([data-surface="solido"]):not(#_) .card.fold{box-shadow:0 0 26px -10px color-mix(in srgb,#000 26%,transparent)!important;clip-path:inset(0 -40px 0 -40px)!important}
html:not([data-surface="solido"]):not(#_) .card.fold.fg-first{box-shadow:inset 0 1.5px 0 var(--glass-edge),0 0 26px -10px color-mix(in srgb,#000 26%,transparent)!important;clip-path:inset(-40px -40px 0 -40px)!important}
html:not([data-surface="solido"]):not(#_) .card.fold.fg-last{clip-path:inset(0 -40px -40px -40px)!important}
html:not([data-surface="solido"]):not(#_) .card.fold.fg-first.fg-last{clip-path:none!important}

/* Etiquetas de categoría dentro de una pantalla */
.fglbl{display:block;grid-column:1/-1;font-weight:700;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 8px 6px}
.fglbl[hidden]{display:none}

/* ---- Vista de productos (celular): detalle, lista, mosaico ---- */
.vsw{display:none}
@media (max-width:1099px){
  .vsw{display:inline-flex;gap:0;margin-left:auto;align-self:flex-end;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .vsw button{width:44px;height:44px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0}
  .vsw button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .vsw button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
  .vsw button+button{border-left:1px solid var(--line)}
  #ilist .thead{display:none}

  /* Detalle (mejorado): foto, nombre, precio y acciones en pocas líneas */
  #ilist.v-detalle .item.inv{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:start;padding:12px 2px}
  #ilist.v-detalle .item.inv>.isel{display:none}
  #ilist.v-detalle .item.inv>.thumb{grid-column:1;grid-row:1/4;width:52px;height:52px}
  #ilist.v-detalle .item.inv .main{display:contents}
  #ilist.v-detalle .item.inv .iid{grid-column:2;grid-row:1;min-width:0}
  #ilist.v-detalle .item.inv .pl{grid-column:3;grid-row:1;text-align:right}
  #ilist.v-detalle .item.inv .pp{font-size:1.05rem;font-weight:800;color:var(--fg)}
  #ilist.v-detalle .item.inv .pw,#ilist.v-detalle .item.inv .pcost,#ilist.v-detalle .item.inv .pk{display:none}
  #ilist.v-detalle .item.inv .ist{grid-column:2/4;grid-row:2}
  #ilist.v-detalle .item.inv .main>details{grid-column:2/4}
  #ilist.v-detalle .item.inv>.row{grid-column:2/4;grid-row:3;justify-content:flex-end;flex:none;margin-top:2px}
  #ilist.v-detalle .item.inv>.row .btn{flex:0 0 auto;min-height:44px;padding:6px 16px}
  #ilist.v-detalle .item.inv>.costpanel,#ilist.v-detalle .item.inv>div:not(.main):not(.row):not(.thumb){grid-column:1/-1}

  /* Lista: una línea por producto; toca para editar, ⋯ para más acciones */
  #ilist.v-lista .item.inv{display:grid;grid-template-columns:40px minmax(0,1fr) auto 36px;column-gap:10px;row-gap:0;align-items:center;padding:8px 2px;min-height:60px}
  #ilist.v-lista .item.inv>.isel{display:none}
  #ilist.v-lista .item.inv>.thumb{grid-column:1;grid-row:1/3;width:40px;height:40px;border-radius:10px;font-size:1rem}
  #ilist.v-lista .item.inv .main{display:contents}
  #ilist.v-lista .item.inv .iid{grid-column:2;grid-row:1/3;min-width:0}
  #ilist.v-lista .item.inv .iid .t{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #ilist.v-lista .item.inv .iid .s{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #ilist.v-lista .item.inv .iid .pkd{display:none}
  #ilist.v-lista .item.inv .pl{grid-column:3;grid-row:1;text-align:right}
  #ilist.v-lista .item.inv .pp{font-size:.98rem;font-weight:800;color:var(--fg)}
  #ilist.v-lista .item.inv .pw,#ilist.v-lista .item.inv .pcost,#ilist.v-lista .item.inv .pk{display:none}
  #ilist.v-lista .item.inv .ist{grid-column:3;grid-row:2;text-align:right;font-size:.75rem}
  #ilist.v-lista .item.inv .ist .pimei{display:none}
  #ilist.v-lista .item.inv .main>details{display:none}
  #ilist.v-lista .item.inv>.row{grid-column:4;grid-row:1/3;position:relative;justify-content:center;flex:none}
  #ilist.v-lista .item.inv>.costpanel,#ilist.v-lista .item.inv>div:not(.main):not(.row):not(.thumb){grid-column:1/-1}

  /* Mosaico: dos columnas con foto grande */
  #ilist.v-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #ilist.v-mosaico>*:not(.item){grid-column:1/-1}
  #ilist.v-mosaico .item.inv{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px;border:1px solid var(--line);border-radius:14px;position:relative;min-height:0;min-width:0}
  #ilist.v-mosaico .item.inv>.isel{display:none}
  #ilist.v-mosaico .item.inv>.thumb{width:100%;height:96px;border-radius:10px;font-size:2rem}
  #ilist.v-mosaico .item.inv .main{display:flex;flex-direction:column;gap:2px;min-width:0}
  #ilist.v-mosaico .item.inv .iid .t{font-size:.9rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #ilist.v-mosaico .item.inv .iid .s{font-size:.75rem}
  #ilist.v-mosaico .item.inv .iid .pkd,#ilist.v-mosaico .item.inv .main>details{display:none}
  #ilist.v-mosaico .item.inv .pp{font-size:1rem;font-weight:800;color:var(--fg)}
  #ilist.v-mosaico .item.inv .pw,#ilist.v-mosaico .item.inv .pcost,#ilist.v-mosaico .item.inv .pk{display:none}
  #ilist.v-mosaico .item.inv .ist{font-size:.75rem}
  #ilist.v-mosaico .item.inv .ist .pimei{display:none}
  #ilist.v-mosaico .item.inv>.row{position:absolute;top:12px;right:12px;flex:none}
  #ilist.v-mosaico .item.inv>.costpanel{grid-column:1/-1}

  /* ⋯ en lista y mosaico */
  #ilist.v-lista .item.inv>.row .btn[data-edit],#ilist.v-mosaico .item.inv>.row .btn[data-edit]{display:none}
  #ilist.v-lista .pmenu,#ilist.v-mosaico .pmenu{position:relative}
  #ilist.v-lista .pmenu>summary,#ilist.v-mosaico .pmenu>summary{width:34px;height:34px;min-height:0;padding:0;justify-content:center;font-size:0;border-radius:50%;background:color-mix(in srgb,var(--surface) 85%,transparent)}
  #ilist.v-lista .pmenu>summary::after,#ilist.v-mosaico .pmenu>summary::after{content:"\22EF";font-size:1.3rem;line-height:1;color:var(--fg)}
  #ilist.v-lista .pmlist,#ilist.v-mosaico .pmlist{position:absolute;right:0;top:100%;z-index:8;flex-direction:column;flex-wrap:nowrap;min-width:150px;margin-top:4px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px -8px rgba(0,0,0,.3)}
  #ilist.v-lista .pmlist .btn,#ilist.v-mosaico .pmlist .btn{width:100%;justify-content:flex-start}
  #ilist.v-lista .row:has(.pmenu[open]) .pmenu,#ilist.v-mosaico .row:has(.pmenu[open]) .pmenu{flex-basis:auto}
}

/* Lista y mosaico: las variantes (RAM, almacenamiento, color) se ven en una sola línea para distinguir modelos iguales */
@media (max-width:1099px){
  #ilist.v-lista .item.inv .iid .chips,#ilist.v-mosaico .item.inv .iid .chips{display:flex;flex-wrap:nowrap;gap:4px;margin:3px 0 0;overflow:hidden}
  #ilist.v-lista .item.inv .iid .chip,#ilist.v-mosaico .item.inv .iid .chip{flex:none;padding:1px 6px;font-size:.7rem;border-radius:6px}
  #ilist.v-mosaico .item.inv .iid .chips{flex-wrap:wrap}
}

html .card.fold[data-ic="doc"]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.5 3.5 18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2v14H3v3c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V2l-1.5 1.5zM15 20H6c-.55 0-1-.45-1-1v-1h10v2zm4-1c0 .55-.45 1-1 1s-1-.45-1-1v-3H8V5h11v14z'/><path fill='black' d='M9 7h6v2H9zm0 3h6v2H9z'/></svg>")}

/* Clientes y ventas: lista y mosaico (celular) */
@media (max-width:1099px){
  #clist .thead,#slist .thead{display:none}
  /* Clientes · lista */
  #clist.v-lista .item.cli{display:flex;align-items:center;gap:8px;padding:10px 2px;min-height:58px}
  #clist.v-lista .item.cli .main{flex:1;min-width:0}
  #clist.v-lista .item.cli .main>.s{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #clist.v-lista .item.cli .main>.s:nth-child(3),#clist.v-lista .item.cli .main>.s:nth-child(5){display:none}
  #clist.v-lista .item.cli>.row{display:none}
  #clist.v-lista .item.cli .t{font-weight:700;font-size:.97rem}
  /* Clientes · mosaico */
  #clist.v-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #clist.v-mosaico>*:not(.item){grid-column:1/-1}
  #clist.v-mosaico .item.cli{display:flex;flex-direction:column;align-items:stretch;padding:12px 10px;border:1px solid var(--line);border-radius:14px;min-width:0;gap:4px;text-align:center}
  #clist.v-mosaico .item.cli .t.tava{flex-direction:column;gap:6px;font-weight:700;font-size:.92rem}
  #clist.v-mosaico .item.cli .t.tava>.ava{width:48px;height:48px;font-size:1.2rem}
  #clist.v-mosaico .item.cli .main>.s{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #clist.v-mosaico .item.cli .main>.s:nth-child(3),#clist.v-mosaico .item.cli .main>.s:nth-child(5){display:none}
  #clist.v-mosaico .item.cli>.row{display:none}
  /* Ventas · lista */
  #slist.v-lista .item.srow{padding:8px 2px}
  #slist.v-lista .item.srow>[data-open]{display:none}
  #slist.v-lista .item.srow:has(.receipt)>[data-open]{display:inline-flex}
  #slist.v-lista .item.srow .s{font-size:.76rem}
  /* Ventas · mosaico */
  #slist.v-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #slist.v-mosaico>*:not(.item){grid-column:1/-1}
  #slist.v-mosaico .item.srow{display:flex;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line);border-radius:14px;min-width:0;gap:4px}
  #slist.v-mosaico .item.srow:has(.receipt){grid-column:1/-1}
  #slist.v-mosaico .item.srow .srow-r{flex-direction:column;align-items:stretch;gap:2px}
  #slist.v-mosaico .item.srow .ctot{font-size:1.05rem;text-align:left}
  #slist.v-mosaico .item.srow .s{font-size:.74rem}
  #slist.v-mosaico .item.srow>[data-open]{display:none}
  #slist.v-mosaico .item.srow:has(.receipt)>[data-open]{display:inline-flex}
  .frow .srow-r{align-items:flex-start}
}

/* Facturas: resultado de búsqueda */
.frow{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.frow .frtop{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.frow .frtop .main{flex:1;min-width:0}
.frow .frtop .ctot{flex:none;white-space:nowrap}
.frow .fbtns{display:flex;flex-wrap:wrap;gap:8px}
.frow .fbtns .btn{flex:1 1 auto;min-width:0;width:auto}

/* Proveedores, órdenes de servicio y cotizaciones: lista y mosaico (celular) */
@media (max-width:1099px){
  #suplist .seg+.row .vsw,#svlist~* .vsw{margin-left:0}
  #suplist .row>.vsw,#tab-servicio .row>.vsw{align-self:flex-end}
  /* lista */
  #suplist.v-lista .item.supitem .sacts,#svlist.v-lista .item.svrow>[data-svopen],#qlist.v-lista .item.qrow>[data-qopen]{display:none}
  #svlist.v-lista .item.svrow:has([aria-expanded="true"])>[data-svopen],#qlist.v-lista .item.qrow:has([aria-expanded="true"])>[data-qopen]{display:inline-flex}
  #suplist.v-lista .item.supitem .main>.s:nth-of-type(n+3),#svlist.v-lista .item.svrow .main>.s:nth-of-type(n+3){display:none}
  #suplist.v-lista .item.supitem{padding:8px 2px}
  #suplist.v-lista .item.supitem .main>.s,#svlist.v-lista .item.svrow .main>.s,#qlist.v-lista .item.qrow .s{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* mosaico */
  #suplist.v-mosaico,#svlist.v-mosaico,#qlist.v-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #suplist.v-mosaico>*:not(.item),#svlist.v-mosaico>*:not(.item),#qlist.v-mosaico>*:not(.item){grid-column:1/-1}
  #suplist.v-mosaico .item.supitem,#svlist.v-mosaico .item.svrow,#qlist.v-mosaico .item.qrow{display:flex;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line);border-radius:14px;min-width:0;gap:4px}
  #svlist.v-mosaico .item.svrow:has([aria-expanded="true"]),#qlist.v-mosaico .item.qrow:has([aria-expanded="true"]){grid-column:1/-1}
  #suplist.v-mosaico .item.supitem .sacts,#svlist.v-mosaico .item.svrow>[data-svopen],#qlist.v-mosaico .item.qrow>[data-qopen]{display:none}
  #svlist.v-mosaico .item.svrow:has([aria-expanded="true"])>[data-svopen],#qlist.v-mosaico .item.qrow:has([aria-expanded="true"])>[data-qopen]{display:inline-flex}
  #suplist.v-mosaico .item.supitem .main>.s:nth-of-type(n+3),#svlist.v-mosaico .item.svrow .main>.s:nth-of-type(n+3){display:none}
  #suplist.v-mosaico .item .s,#svlist.v-mosaico .item .s,#qlist.v-mosaico .item .s{font-size:.74rem}
  #qlist.v-mosaico .item.qrow>.row:first-child{flex-direction:column;align-items:stretch;gap:2px}
  #qlist.v-mosaico .item.qrow>.row:first-child .num{text-align:left}
}

/* Variantes agrupadas por modelo (lista y mosaico) */
@media (max-width:1099px){
  #ilist .grp-sub{display:none!important}
  #ilist .grp-sub.grp-show{display:grid!important}
  #ilist.v-mosaico .grp-sub.grp-show{display:flex!important}
  #ilist .grp-sub.grp-show{background:color-mix(in srgb,var(--accent) 6%,transparent)}
  #ilist .grp-head .iid .chips,#ilist .grp-head .ist,#ilist .grp-head .iid .s{display:none!important}
  #ilist .grp-head .gcnt{font-size:.78rem;color:var(--accent);font-weight:700;margin-top:2px}
  #ilist .grp-head .gar{display:inline-block;width:1em}
  #ilist .grp-head>.row{display:none}
}

/* Campos de fecha: no se salen de la pantalla (iPhone) y llevan icono de calendario */
input[type="date"],input[type="month"],input[type="time"],input[type="datetime-local"]{
  -webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;text-align:left;
  padding-right:40px;background-repeat:no-repeat;background-position:right 12px center;background-size:20px 20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a35a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
}
html:root input[type="date"],html:root input[type="month"],html:root input[type="time"],html:root input[type="datetime-local"]{background-image:var(--cal-ico,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a35a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"))}
input[type="date"]::-webkit-calendar-picker-indicator{display:none!important;pointer-events:none}
input[type="date"]::-webkit-date-and-time-value,input[type="month"]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
.f,.row>*{min-width:0}
html,body{overflow-x:clip;max-width:100%}

/* Separación entre un grupo de secciones y lo que está arriba */
html .card.fold.fg-first:not(:first-child):not(.fglbl + *){margin-top:14px!important}

/* Sin barra indicadora en las secciones abiertas; la fila abierta ya se distingue por su fondo */
html .card.fold::before,html .card.fold:not(.closed)::before{display:none!important;content:none!important}
/* En pantallas táctiles el toque en un campo de fecha lo recibe Cuadra, no el selector del teléfono */
@media (pointer:coarse){label input[type="date"]{pointer-events:none}}

/* Clásico (vidrio): luz de color detrás de todo el contenido para que el vidrio se note también en las subsecciones */
html:not([data-style]) body{
  background-image:
    radial-gradient(60% 34% at 88% 6%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%),
    radial-gradient(70% 38% at 8% 38%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 74%),
    radial-gradient(70% 40% at 92% 78%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 74%)!important;
  background-attachment:fixed!important;background-repeat:no-repeat!important}
html .card.fold.closed:not(.sf-open)>*:not(h2){display:none!important}

@media (min-width:1100px){
  .factbar{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:end}
  .factbar .f{margin:0}
  #factlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
  #factlist .frow{border:1px solid var(--line);border-radius:14px;padding:12px}
  #factlist>*:not(.item){grid-column:1/-1}
}

/* PC: Detalle (la tabla de siempre) o Mosaico en Inventario y Clientes */
@media (min-width:1100px){
  #ivsw,.vsw[data-vk="cli"]{display:inline-flex;gap:0;margin-left:auto;align-self:flex-end;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  #ivsw button,.vsw[data-vk="cli"] button{width:44px;height:44px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  #ivsw button svg,.vsw[data-vk="cli"] button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #ivsw button[aria-pressed="true"],.vsw[data-vk="cli"] button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
  #ivsw button+button,.vsw[data-vk="cli"] button+button{border-left:1px solid var(--line)}
  #ivsw [data-iv="lista"],.vsw[data-vk="cli"] [data-vw="lista"]{display:none}
  /* Inventario · mosaico */
  #ilist.v-mosaico,#clist.v-mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
  #ilist.v-mosaico>*:not(.item),#clist.v-mosaico>*:not(.item){grid-column:1/-1}
  #ilist.v-mosaico .thead,#clist.v-mosaico .thead{display:none}
  #ilist.v-mosaico .item.inv{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:12px;border:1px solid var(--line);border-radius:16px;position:relative;min-width:0}
  #ilist.v-mosaico .item.inv>.isel{position:absolute;top:18px;left:18px;z-index:2}
  #ilist.v-mosaico .item.inv>.thumb{width:100%;height:120px;border-radius:12px;font-size:2.4rem}
  #ilist.v-mosaico .item.inv .main{display:flex;flex-direction:column;gap:4px;min-width:0}
  #ilist.v-mosaico .item.inv .pl{text-align:left}
  #ilist.v-mosaico .item.inv .pp{font-size:1.1rem;font-weight:800;color:var(--fg)}
  #ilist.v-mosaico .item.inv>.row{display:flex;gap:8px;margin-top:auto}
  /* Clientes · mosaico */
  #clist.v-mosaico .item.cli{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;min-width:0}
  #clist.v-mosaico .item.cli .main>.s:nth-child(3){display:none}
  #clist.v-mosaico .item.cli>.row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
}
@media (min-width:1100px){
  html #ilist.v-mosaico .item.inv{flex-wrap:nowrap}
  html #ilist.v-mosaico .item.inv>.thumb{margin:0!important;width:100%;box-sizing:border-box;flex:none}
  html #ilist.v-mosaico .item.inv>.row{width:100%;justify-content:flex-start;flex-wrap:wrap;margin-left:0}
}
@media (min-width:1100px){
  html #clist.v-mosaico .item.cli>.row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  html #clist.v-mosaico .item.cli>.row .btn{width:100%;min-width:0;flex:none}
}

/* Código de recuperación */
.reccode{font-size:26px;font-weight:800;letter-spacing:.08em;text-align:center;padding:16px 10px;margin:10px 0;border-radius:14px;background:var(--card2,rgba(127,127,127,.12));border:1px dashed var(--line,rgba(127,127,127,.4));user-select:all;-webkit-user-select:all;word-break:break-all}

/* Estilo Vidrio v2 (propuesta 2): resplandor verde arriba a la derecha, tarjetas translúcidas con borde fino,
   total en degradé del color del negocio y botón de cobrar claro. Solo Clásico (vidrio); Mostrador sigue sólido.
   Todo sale de --accent, así que el color que elija el negocio también cambia el resplandor y el degradé. */
:root{--gv1:color-mix(in srgb,var(--accent) 30%,transparent);--gv2:color-mix(in srgb,var(--accent) 12%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gv1:color-mix(in srgb,var(--accent) 46%,transparent);--gv2:color-mix(in srgb,var(--accent) 18%,transparent)}}
:root[data-theme="dark"]{--gv1:color-mix(in srgb,var(--accent) 46%,transparent);--gv2:color-mix(in srgb,var(--accent) 18%,transparent)}
html:root:not([data-surface="solido"]):not([data-style="ninguno"]) body::before{
  background:radial-gradient(80% 46% at 92% -4%,var(--gv1),transparent 72%),radial-gradient(60% 38% at 0% 102%,var(--gv2),transparent 70%)}
html:not([data-surface="solido"]) .card{border-color:color-mix(in srgb,var(--accent) 14%,var(--glass-edge))}
html:not([data-surface="solido"]) .card h2{font-size:1.05rem;letter-spacing:-.02em}
/* barra de total: degradé verde con texto oscuro, botón claro (en modo claro, botón negro) */
html:not([data-surface="solido"]):not([data-style="ninguno"]) .vbar{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent-2) 70%,var(--accent)));color:var(--accent-fg);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 16px 34px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
html:not([data-surface="solido"]):not([data-style="ninguno"]) .vbar .vbi,html:not([data-surface="solido"]):not([data-style="ninguno"]) .vbar .vbi *{color:inherit}
html:not([data-surface="solido"]):not([data-style="ninguno"]) .vbar .vbi b{font-size:1.45rem;letter-spacing:-.02em}
html:root:not([data-style="ninguno"]) .vbar .btn,html:root:not([data-style="ninguno"]) .vbar .btn.primary{background:#fff!important;background-image:none!important;color:#0a0a0a!important;border-color:transparent!important}
/* opción elegida en los segmentos: píldora clara (oscuro) o negra (claro), como en la maqueta */
html:not([data-surface="solido"]) .seg button.on{background:var(--fg);color:var(--bg);box-shadow:none}

/* ===== Ajuste de diseño (v380) ===== */
/* 1) Selectores en píldora: reemplazan las pestañas con subrayado (Hoy/Ayer…, Normal/Grande…, Automático/Claro/Oscuro…).
      Opción elegida: píldora clara en oscuro y negra en claro. */
html .seg{background:var(--glass)!important;border:1px solid var(--glass-edge)!important;border-radius:22px!important;padding:4px!important;gap:4px!important;-webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;box-shadow:var(--glass-hi)!important}
html .seg button,html .seg .btn{border-radius:18px!important;border:0!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;font-weight:700;min-height:44px}
html .seg button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)!important}
html .seg button.on,html .seg button[aria-pressed="true"],html .seg button[aria-selected="true"],html .seg .btn.on,html[data-style="mostrador"] .seg button.on{background:var(--accent)!important;color:var(--accent-fg)!important;font-weight:800}
html .r-chips{gap:8px;border-bottom:0;padding:4px 16px}
html .r-chip{border:1px solid var(--glass-edge)!important;border-radius:999px!important;background:var(--glass)!important;color:var(--muted)!important;padding:9px 16px;margin-bottom:0;-webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important}
html .r-chip.on{background:var(--accent)!important;color:var(--accent-fg)!important;border-color:transparent!important;font-weight:800}

/* 2) Tarjetas destacadas (Vendido en Reportes) en oscuro: se había quitado todo el fondo y el texto oscuro
      quedaba sobre negro. Vuelven con el degradé del color del negocio. */
html:not([data-style="mostrador"]):not([data-theme="light"]) :is(.r-hero.r-hero.r-hero,.r-hero.r-hero .zz){background-image:linear-gradient(135deg,var(--accent-2),var(--accent))!important;box-shadow:var(--glass-drop,none)!important}
html[data-style="mostrador"]:not([data-theme="light"]):not([data-q]) .r-hero.r-hero{background-image:none!important;background-color:var(--accent)!important}

/* 3) Inventario, vista Detalle: fila ordenada en cuatro renglones
      [foto] nombre · marca ........ precio / etiquetas (RAM, memoria, color) / estado ........ [Editar][⋯] */
@media (max-width:1099px){
  #ilist.v-detalle .item.inv{grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:center;padding:14px 4px}
  #ilist.v-detalle .item.inv>.thumb{grid-column:1;grid-row:1/3;width:44px;height:44px;border-radius:12px;font-size:1rem;align-self:start}
  #ilist.v-detalle .item.inv .main,#ilist.v-detalle .item.inv .iid{display:contents}
  #ilist.v-detalle .item.inv .iid>.t{grid-column:2;grid-row:1;align-self:end;font-size:1rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
  #ilist.v-detalle .item.inv .pl{grid-column:3;grid-row:1;align-self:end;text-align:right;margin:0}
  #ilist.v-detalle .item.inv .iid>.s{grid-column:2/4;grid-row:auto;margin:0;font-size:.82rem;line-height:1.25}
  #ilist.v-detalle .item.inv .iid>.chips{grid-column:1/-1;grid-row:auto;margin:2px 0 0;gap:4px}
  #ilist.v-detalle .item.inv .iid>.chips .chip{padding:1px 8px;font-size:.72rem;border-radius:7px;font-weight:600}
  #ilist.v-detalle .item.inv .ist{grid-column:1/3;grid-row:auto;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  #ilist.v-detalle .item.inv>.row{grid-column:3;grid-row:auto;flex-wrap:nowrap;gap:6px;margin:0;justify-content:flex-end}
  #ilist.v-detalle .item.inv>.row [data-edit]{font-size:0;width:44px;min-height:44px;padding:0;position:relative}
  #ilist.v-detalle .item.inv>.row [data-edit]::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat}
  #ilist.v-detalle .item.inv>.row .btn:not([data-edit]){min-height:44px}
  #ilist.v-detalle .item.inv .pmenu>summary{font-size:0;width:44px;padding:0;display:flex;align-items:center;justify-content:center}
  #ilist.v-detalle .item.inv .pmenu>summary::after{content:"\22EF";font-size:1.5rem;line-height:1}
  #ilist.v-detalle .item.inv .main>details{grid-column:1/-1}
}

/* Selectores del cuadro «Pantalla y accesibilidad»: opciones del mismo ancho; si son cuatro, dos por renglón */
html #dispmodal .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
html #dispmodal .seg:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
html #dispmodal .seg button{white-space:normal;line-height:1.15;padding:8px 6px}

/* Facturas (sección propia) */
.factbar{display:flex;flex-direction:column;gap:12px}
.factbar .f{margin:0}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips .r-chip{padding:8px 14px}
.fsum{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fsum>div{display:flex;flex-direction:column;gap:2px;background:var(--field);border-radius:var(--r-md);padding:10px 14px}
.fsum b{font-size:1.25rem}
@media (min-width:1100px){
  .factbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
}
.fhead{margin:16px 2px 0}
.fhead h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.fhead .hint{margin-top:2px}
#factfrom,#factto{font-size:.88rem;padding-right:40px}
@media (min-width:1100px){.fhead{display:none}}
/* La primera cifra de Inicio y de Ventas es de vidrio con texto normal en Clásico (en claro quedaba un degradé oscuro con texto oscuro) */
html:not([data-style="mostrador"]):not([data-style="ninguno"]) .tiles .tile:first-child{background-color:var(--glass)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%)!important;border-color:var(--glass-edge)!important;color:var(--fg)!important}

/* Ajustes · Tu negocio y el comprobante (v383): todo a la vista, en grupos */
.sgrp{display:flex;flex-direction:column;gap:12px;padding:16px 0 4px;margin-top:6px;border-top:1px solid var(--glass-edge,rgba(128,128,128,.25))}
.sgrp:first-of-type{border-top:0;padding-top:4px;margin-top:0}
.sgrp>h3{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sgrp>.hint{margin-top:-6px}
.sgrp>.f,.sgrp>.row{margin:0}
#saparr>.row:first-of-type{align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-edge)}
#saparr #slogo{flex:0 0 64px;min-height:64px;display:grid;place-items:center}
#saparr #scolors{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:10px;margin-top:8px}
#saparr #sstyle{margin-top:8px}
#ssave{margin-top:16px}
#saparr #slogobtn{width:auto;align-self:flex-start}
#saparr>.row:first-of-type .grow{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#stexts textarea{min-height:72px}
#stexts textarea{field-sizing:content;max-height:none}

/* v482: cliente arriba de las formas de pago */
.vcliw{display:flex;flex-direction:column;gap:12px}
.vclibtn{display:none}
.vclibox{display:flex;flex-direction:column;gap:12px}
@media (max-width:899px){
  #tab-vender.sheetm .vclibtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border-radius:16px;border:1px solid var(--line);background:var(--field);color:var(--fg,inherit);text-align:left;cursor:pointer;font:inherit}
  #tab-vender.sheetm .vcli-av{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);font-weight:800}
  #tab-vender.sheetm .vcli-av svg{width:18px;height:18px}
  #tab-vender.sheetm .vcli-av.on{background:var(--accent);color:var(--accent-fg)}
  #tab-vender.sheetm .vcli-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
  #tab-vender.sheetm .vcli-t small{color:var(--muted);font-size:.78rem;font-weight:600}
  #tab-vender.sheetm .vcli-t b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #tab-vender.sheetm .vcli-go{flex:none;color:var(--accent);font-weight:800;font-size:.9rem}
  #tab-vender.sheetm .vcliw.need .vclibtn{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
  #tab-vender.sheetm .vcliw.need .vcli-go{color:var(--warn)}
  #tab-vender.sheetm .vclibox{display:none}
  #tab-vender.sheetm.cli-open .vclibox{display:flex}
}
/* ===== Carrito en hoja (celular) · v277 ===== */
.vpayw,.vextrabtn,.shd #vclose,#vsheetbg{display:none}
.vextra{display:flex;flex-direction:column;gap:16px}
@media (max-width:899px){
  #tab-vender.sheetm>.cartcard{display:none}
  #tab-vender.sheetm.sheet-open>.cartcard{display:flex;flex-direction:column;gap:12px;position:fixed;left:0;right:0;bottom:0;max-height:92dvh;z-index:45;margin:0;border-radius:24px 24px 0 0;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-bottom:0;box-shadow:0 -18px 40px -14px rgba(0,0,0,.45);overflow:hidden;animation:vsheetup .22s ease-out}
  @keyframes vsheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  #tab-vender.sheetm.sheet-open #vsheetbg{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5)}
  #tab-vender.sheetm .cartcard .shd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
  #tab-vender.sheetm .cartcard .shd h2{margin:0}
  #tab-vender.sheetm .shd #vclose{display:inline-flex}
  #tab-vender.sheetm .cart-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:2px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #tab-vender.sheetm .cart-foot{flex:none;border-top:1px solid var(--line);padding-top:12px}
  /* líneas compactas */
  #tab-vender.sheetm #vcart{overflow:hidden;position:relative;border-radius:12px}
  #tab-vender.sheetm .item.cl{padding:10px 0;gap:10px;background:var(--surface);position:relative;transition:transform .18s ease;touch-action:pan-y}
  #tab-vender.sheetm .item.cl .main{display:flex;flex-direction:column;gap:2px}
  #tab-vender.sheetm .item.cl .t{font-size:.95rem;line-height:1.25}
  #tab-vender.sheetm .item.cl .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
  #tab-vender.sheetm .item.cl .lt{font-size:.95rem}
  #tab-vender.sheetm .item.cl .qty button{width:30px;height:30px}
  #tab-vender.sheetm #vcart.swiping::before{content:"Quitar";position:absolute;left:0;right:0;top:var(--ry,0);height:var(--rh,0);background:#d33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") no-repeat right 78px center/22px;color:#fff;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:flex-end;padding-right:16px;border-radius:12px}
  #tab-vender.sheetm #vcart.swgo::before{background-color:#b71c1c}
  @media (pointer:coarse){#tab-vender.sheetm .item.cl [data-rm]{display:none}}
  #tab-vender.sheetm .vswipe{text-align:center}
  /* cómo paga */
  #tab-vender.sheetm .vpayw{display:flex;flex-direction:column;gap:8px}
  #tab-vender.sheetm .vpay{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
  #tab-vender.sheetm .vpay::-webkit-scrollbar{display:none}
  #tab-vender.sheetm .vpill{flex:none;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--glass-edge);background:var(--field);color:var(--fg,inherit);font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap}
  #tab-vender.sheetm .vpill.on{background:var(--accent)!important;color:var(--accent-fg)!important;border-color:transparent}
  #tab-vender.sheetm .vpay.shake{animation:vshake .4s}
  @keyframes vshake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  #tab-vender.sheetm #vmethodw{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
  /* cliente, descuento y notas plegado */
  #tab-vender.sheetm .vextrabtn{display:flex;width:100%;justify-content:center}
  #tab-vender.sheetm .vextra{display:none}
  #tab-vender.sheetm.extra-open .vextra{display:flex}
}

/* v280: pantalla de venta registrada */
.sdlg{display:flex;flex-direction:column;gap:14px;max-width:380px;width:100%}
.sdrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--muted)}
.sdrow b{color:var(--fg);font-size:1.05rem}
.sdrow .sdtot{font-size:1.7rem;font-family:var(--f-display)}
.sdchg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 12px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-fg)}
.sdchg span{font-weight:700;font-size:.95rem}
.sdchg b{font-size:2.6rem;font-family:var(--f-display);line-height:1.1}
.sdchg.sdzero{background:var(--field);color:var(--muted)}
.sdchg.sdzero b{font-size:1.6rem}

/* v281: aviso de «Deshacer» ancho, con cuenta regresiva */
.toast.undo{display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;max-width:520px;margin-inline:auto;width:auto;padding:12px 12px 15px;border-radius:16px;overflow:hidden;text-align:left;white-space:normal;transform:none;background:#141b17;color:#f2f5f3;border:1px solid #2a3a31;font-weight:400;font-size:.92rem;animation:upop .2s ease-out}
@keyframes upop{from{opacity:0;transform:translateY(8px)}}
.toast.undo .uck{width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.toast.undo .uck svg{width:14px;height:14px;fill:none;stroke:var(--accent-fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.toast.undo .utx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.toast.undo .utx b{font-weight:700}
.toast.undo .utx small{font-size:.8rem;opacity:.75}
.toast.undo .undobtn{flex:none;min-height:40px;padding:0 14px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-fg);font-weight:800;cursor:pointer;white-space:nowrap}
.toast.undo .ubar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform-origin:left;animation:ubar var(--ums,6s) linear forwards}
@keyframes ubar{to{transform:scaleX(0)}}
.sdundo svg{stroke-width:2.4}

/* v282: mientras se registra la venta no se puede tocar el carrito */
#tab-vender.selling .cartcard .cart-scroll{pointer-events:none;opacity:.6}

/* v288 · ventas cruzadas */
.xsell{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 8px}
.xsell .xs-t{font-size:.75rem;color:var(--muted);font-weight:700;flex-basis:100%}
.xsell .chip{cursor:pointer;min-height:32px;padding:4px 10px}

/* v289 · pantalla de carga: logo dentro de un anillo que gira (sin barra); el anillo toma el color del negocio y se cierra al terminar */
.sp-ring{position:relative;width:112px;height:112px;display:grid;place-items:center;flex:none}
.sp-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--fg) 10%,transparent);border-top-color:var(--accent);animation:orbspin 1.1s linear infinite;transition:border-color .3s}
#splash.ok .sp-ring::before{animation:none;border-color:var(--accent)}
.sp-ring .sp-logo{animation:none!important;box-shadow:none}
.sp-ring .sp-logo:not(.img){width:52px;height:52px;border-radius:14px}
.sp-ring .sp-logo.img{width:76px!important;height:60px!important;padding:0!important;object-fit:contain;filter:none}
@media (prefers-color-scheme:dark){html[data-logo-dark]:not([data-theme="light"]) .sp-ring .sp-logo.img{filter:invert(1) hue-rotate(180deg)}}
html[data-theme="dark"][data-logo-dark] .sp-ring .sp-logo.img{filter:invert(1) hue-rotate(180deg)}
#splash .sp-bar,#splash .sp-dots{display:none!important}
#splash .sp-pbar{display:block!important;width:100%;height:6px;border-radius:999px;margin-top:10px;overflow:hidden;background:color-mix(in srgb,var(--fg) 10%,transparent);box-shadow:none}
#splash .sp-pbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);box-shadow:none}
@media (prefers-reduced-motion:reduce){.sp-ring::before{animation:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent)}}
@media (min-width:1100px){.sp-ring{width:136px;height:136px}.sp-ring .sp-logo.img{width:92px!important;height:72px!important}.sp-ring .sp-logo:not(.img){width:64px;height:64px}}
#splash .sp-steps b{display:none}
#splash .sp-steps li{gap:0}

/* v291 · pantalla de carga: logo que se llena de color + porcentaje (sin tarjeta, sin anillo, sin barra) */
html #splash .sp-card{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;width:auto!important;gap:10px}
#splash .sp-pbar,#splash .sp-bar,#splash .sp-dots{display:none!important}
.sp-ring{display:grid;place-items:center;width:auto;height:auto}
.sp-ring::before{display:none}
.sp-ring>.sp-logo{grid-area:1/1}
.sp-ring .sp-logo:not(.img){width:84px;height:84px;border-radius:22px}
.sp-ring .sp-logo.img{width:170px!important;height:118px!important;object-fit:contain}
.sp-ring .sp-logo:not(.sp-fill){filter:grayscale(1) opacity(.26)!important}
.sp-ring .sp-fill{clip-path:inset(calc(100% - var(--sp,0%)) 0 0 0);animation:none}
@media (prefers-color-scheme:dark){html[data-logo-dark]:not([data-theme="light"]) .sp-ring .sp-logo.img:not(.sp-fill){filter:invert(1) hue-rotate(180deg) grayscale(1) opacity(.3)!important}}
html[data-theme="dark"][data-logo-dark] .sp-ring .sp-logo.img:not(.sp-fill){filter:invert(1) hue-rotate(180deg) grayscale(1) opacity(.3)!important}
.sp-pct{display:flex;align-items:baseline;justify-content:center;gap:1px;font-family:var(--f-display);font-variant-numeric:tabular-nums;line-height:1}
.sp-pct b{font-size:1.7rem;font-weight:700;letter-spacing:-.03em}
.sp-pct span{font-size:.85rem;font-weight:700;color:var(--accent)}
#splash.nobrand .sp-pct{opacity:1}
@media (min-width:1100px){.sp-ring .sp-logo.img{width:220px!important;height:150px!important}.sp-ring .sp-logo:not(.img){width:104px;height:104px}.sp-pct b{font-size:2.1rem}}

/* v292 · entrada con PIN: puntos siempre visibles (6 espacios, crecen hasta 8), crédito discreto y enlaces con más aire */
.auth.pad .pindots{min-height:30px;gap:12px}
.auth.pad .pindots i{width:15px;height:15px;border-width:2px;border-color:color-mix(in srgb,var(--fg) 30%,transparent)}
.auth.pad .pindots i.on{border-color:var(--accent)}
#auth .auth.pad .asheet>.credit{padding-top:6px}
#auth .auth.pad .credit img{height:26px}
#auth .auth.pad .asheet .linkbtn{font-size:.92rem;padding:9px 10px}
#auth .auth.pad #amail{font-weight:700;text-decoration:underline}
#auth .auth.pad #aforgot{color:var(--muted);text-decoration:none;font-weight:600}
html[data-style="mostrador"]:not([data-theme="light"]) #auth .auth.pad #amail{color:color-mix(in srgb,var(--accent) 55%,#fff)}
.sp-pct,.sp-pct b,.sp-pct span{color:var(--accent)}

/* v294 · pantalla de venta registrada: total primero, detalle plegado, acciones con íconos */
#vdone .dn{display:flex;flex-direction:column;gap:12px}
.dn-tot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0}
.dn-tot span{font-size:.8rem;color:var(--muted);font-weight:600}
.dn-tot b{font-family:var(--f-display);font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.dn-tot small{font-size:.82rem;color:var(--muted)}
.dn-lines{background:var(--field);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.dn-lines .r{display:flex;justify-content:space-between;gap:10px}
.dn-profit b{white-space:nowrap}
.dn-profit{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:12px;padding:10px 12px;background:var(--ok-soft,color-mix(in srgb,var(--ok,#15803d) 14%,transparent));color:var(--ok,#15803d);font-size:.88rem;font-weight:700}
.dn-profit small{font-weight:600;opacity:.85}
.dn-more{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;padding:6px;cursor:pointer}
.dn-fold{display:flex;flex-direction:column;gap:10px}
.dn-fold[hidden]{display:none}
.dn-ics{display:flex;justify-content:center;gap:18px}
.dn-ic{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:.8rem;font-weight:700;color:var(--fg);cursor:pointer;min-width:72px;padding:0}
.dn-ic svg{width:54px;height:54px;padding:15px;box-sizing:border-box;border-radius:18px;background:var(--field);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.dn-ic.p svg{background:var(--accent);color:var(--accent-fg,#fff)}
.dn-ic:active svg{transform:scale(.92)}
.dn-new{min-height:52px;font-size:1.05rem}

/* v295 · carrito en hoja con el mismo diseño de «Venta registrada»: total primero, productos en recuadro, enlaces discretos y un solo botón grande */
#vcpill,#vsumtop{display:none}
#tab-vender.sheetm .cartcard .shd h2{display:flex;align-items:center;gap:10px}
#tab-vender.sheetm #vcpill{display:inline-flex}
#tab-vender.sheetm #vsumtop{display:flex;flex:none}
#tab-vender.sheetm #vsumtop b{font-size:2rem}
#tab-vender.sheetm #vcart{background:var(--field);padding:0 12px}
#tab-vender.sheetm .item.cl{background:transparent;padding:10px 0}
#tab-vender.sheetm .item.cl+.item.cl{border-top:1px dashed color-mix(in srgb,var(--fg) 14%,transparent)}
#tab-vender.sheetm .vswipe{font-size:.78rem}
#tab-vender.sheetm .vextrabtn{border:0!important;background:none!important;box-shadow:none!important;color:var(--muted);font-weight:700;font-size:.88rem;min-height:36px}
#tab-vender.sheetm .cart-foot{display:flex;flex-direction:column;gap:8px;border-top:0;padding-top:4px}
#tab-vender.sheetm .cart-foot .rtot,#tab-vender.sheetm .cart-foot .riva{display:none}
#tab-vender.sheetm .cart-foot>.row{display:flex;flex-direction:column-reverse;gap:6px}
#tab-vender.sheetm #vconfirm{width:100%;min-height:54px;font-size:1.1rem}
#tab-vender.sheetm #vhold{border:0;background:none;box-shadow:none;color:var(--muted);font-weight:700;min-height:36px;width:100%}
#tab-vender.sheetm .cart-foot>.row>*{flex:none!important}

/* v296 · formas de pago en cuadrícula de 3 columnas con ícono arriba */
#tab-vender.sheetm .vpay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:2px 0 4px}
#tab-vender.sheetm .vpill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:5px 4px;border-radius:14px;font-size:.8rem;line-height:1.15;text-align:center;white-space:normal;min-width:0}
#tab-vender.sheetm .vpill svg{width:24px;height:24px;flex:none}
#tab-vender.sheetm .vpill span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* v297 · cierre de caja y gastos con el diseño nuevo */
.cj-tot{padding:10px 0 14px}
.cj-rows{border-top:0;padding-top:0;gap:0}
.cj-rows .r{align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.cj-rows .r:last-child{border-bottom:0}
.cj-rows .r>span:not(.num){flex:1}
.cj-rows .r .ci,.cj-rows .r .ci svg{width:20px;height:20px;display:block}
.cj-rows .r .ci{color:var(--accent-2);flex:none}
.cj-rows .r.sub{padding-left:30px;font-size:.9rem}
.cj-rows .r.sub svg{width:16px;height:16px;margin-right:2px;color:var(--accent-2);flex:none}
.cj-rows .r.neg .ci{color:#f87171}
#cdiff{text-align:center}
.cchip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:5px 14px;font-size:.85rem;background:var(--accent-soft);color:var(--accent-2)}
.cchip.warn{background:rgba(245,158,11,.16);color:#f59e0b}
#gcard .gamt input{font-size:2rem;text-align:center;font-weight:800;font-family:var(--f-display);padding:12px}
#gcard .glbl{font-size:.8rem;color:var(--muted);font-weight:600;margin:12px 0 6px}
#gcard .gpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#gcard .gpk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--muted);font-size:.75rem;font-weight:600;line-height:1.15;text-align:center;cursor:pointer}
#gcard .gpk svg{width:22px;height:22px;flex:none}
#gcard .gpk.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}

/* v298 · formas de pago con ícono y motivos rápidos en el resto de pantallas */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1 1 100%;width:100%;margin-top:4px}
.mgrid[hidden]{display:none}
.mgrid .gpk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--muted);font-size:.75rem;font-weight:600;line-height:1.15;text-align:center;cursor:pointer}
.mgrid .gpk svg{width:22px;height:22px;flex:none}
.mgrid .gpk.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.pd-tot{padding:6px 0 10px}
.mchips{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin-top:2px}
.mchip{border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:99px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer}
.mchip:active{background:var(--accent-soft);color:var(--accent-2)}

.quick{grid-template-columns:repeat(3,minmax(0,1fr))}
.quick .btn.qk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:68px;padding:10px 4px;font-size:.75rem;line-height:1.15;text-align:center}
.quick .btn.qk svg{width:22px;height:22px;flex:none}
.quick .btn:last-child:nth-child(odd){grid-column:auto}
#qtot{border-top:0;padding-top:0}

/* v299 · Fiados con el diseño nuevo (en la tabla de escritorio se conserva igual) */
#ftiles{display:block}
.fi-tot{padding:6px 0 4px}
.fi-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.fi-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px;width:100%}
.fi-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.fi-bart{margin-top:4px}
.item.fia .fi-acts .btn svg{width:18px;height:18px;flex:none}
@media (max-width:1099px){
  .item.fia .fi-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
  .item.fia .fi-acts .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:8px 2px;font-size:.72rem;line-height:1.15;text-align:center}
  .item.fia .fi-acts .btn:not(.primary) svg{color:var(--accent-2)}
}
@media (min-width:1100px){
  .item.fia .fi-acts .btn svg,.item.fia .fi-bar,.item.fia .fi-bart{display:none}
}

/* v300 · Servicio técnico: pasos de la orden con ícono */
.sv-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:10px;width:100%}
.sv-steps div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;color:var(--muted);text-align:center;line-height:1.1}
.sv-steps svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--field);border:1px solid var(--line);flex:none;box-sizing:border-box}
.sv-steps .d{color:var(--accent-2)}
.sv-steps .d svg{background:var(--accent-soft);border-color:var(--accent)}
.sv-steps .n{color:var(--fg);font-weight:700}
.sv-steps .n svg{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.svrow .btn svg{width:18px;height:18px;flex:none;margin-right:6px;vertical-align:-4px}
.svrow .btn{display:inline-flex;align-items:center;justify-content:center}

/* v301 · Ventas y Cotizaciones: ícono de la forma de pago, chip frente a ayer y acciones con ícono */
.vs-chip{margin-top:8px}
.tiles .tile:first-child .vs-chip .cchip{background:rgba(255,255,255,.2);color:inherit}
.spi{display:inline-block;vertical-align:-4px;margin-right:6px;color:var(--accent-2)}
.spi svg{width:18px;height:18px;display:block}
.spi.x{color:var(--bad)}
.srow .row .btn svg,.qrow .row .btn svg{width:16px;height:16px;flex:none;margin-right:5px;vertical-align:-3px}
.srow .row .btn,.qrow .row .btn{display:inline-flex;align-items:center;justify-content:center}

/* v302 · Compras, Reportes, Agenda y Ajustes con el diseño nuevo */
.pur .btn svg,#aglist .row .btn svg{width:16px;height:16px;flex:none;margin-right:5px;vertical-align:-3px}
.pur .btn,#aglist .row .btn{display:inline-flex;align-items:center;justify-content:center}
.rk{display:flex;align-items:center;gap:5px}
.rk svg{width:16px;height:16px;flex:none;color:var(--accent-2)}
.cchip.rpd{padding:2px 9px;font-size:.75rem;font-weight:700}
.cchip.bad{background:var(--bad-soft);color:var(--bad)}
#apsum .dn-tot{padding:4px 0}
#tab-ajustes label.chk{justify-content:space-between;flex-direction:row-reverse;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line)}
#tab-ajustes label.chk:last-child{border-bottom:0}
#tab-ajustes label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;width:46px;height:28px;border-radius:99px;background:var(--field);border:1px solid var(--line);position:relative;flex:none;cursor:pointer;transition:background .18s,border-color .18s;padding:0}
#tab-ajustes label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
#tab-ajustes label.chk input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
#tab-ajustes label.chk input[type=checkbox]:checked::after{transform:translateX(18px);background:var(--accent-fg)}
#tab-ajustes label.chk input[type=checkbox]:disabled{opacity:.45}
#tab-ajustes label.chk input[type=checkbox]:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
/* v303 · Servicio: acciones en cuadrícula icono arriba / texto abajo */
.svgrp>.row.sv-ag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.svgrp>.row.sv-ag>.btn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:12px;font-size:.75rem;font-weight:600;line-height:1.15;text-align:center;white-space:normal;min-width:0}
.svgrp>.row.sv-ag>.btn svg{width:22px;height:22px}
.svgrp>.row.sv-ag>.btn.danger{color:var(--bad,#b3261e)}
.svgrp>.row:not(.sv-ag)>.btn.primary{flex:1 1 100%}
.svgrp>.row.sv-ag{align-items:stretch}
.svgrp>.row.sv-ag>.btn{align-self:stretch;height:auto;min-height:72px;margin:0}
.svgrp>.row.sv-ag>.btn.primary{grid-column:1/-1;flex-direction:row;min-height:52px;font-size:.95rem;gap:8px}
.svgrp>.row.sv-ag>a.btn[href*="wa.me"]{color:var(--accent-ink,var(--accent,#16a34a))}
/* v306 · Ventas: detalle sin texto de ticket */
.vs-det{display:flex;flex-direction:column;gap:8px}
#slist .svgrp{margin-top:4px}
/* v308 · Inventario */
#isummary .dn-tot{padding:2px 0 6px}
.inv-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:4px 0 8px}
.inv-chips .cchip svg{width:16px;height:16px;flex:none}
.inv-chips .cchip{white-space:nowrap;padding:5px 12px}
.inv-low{display:flex;justify-content:center;margin-bottom:6px}
.inv-low .btn svg,#ilist .row .btn svg{width:16px;height:16px;flex:none;margin-right:5px;vertical-align:-3px}
#invquick{margin:6px 0 10px}
@media(min-width:1100px){#invquick>.row.sv-ag{grid-template-columns:repeat(6,minmax(0,1fr))}}
#isummary .dn-tot b{color:var(--fg)}
/* v309 · Facturas */
#factsum .fa-tot{padding:2px 0 6px}
#factsum .fa-tot b{color:var(--fg)}
#factlist .frow .fbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#factlist .frow .fbtns .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:8px 4px;border-radius:12px;font-size:.75rem;font-weight:600;line-height:1.15;text-align:center;flex:none}
#factlist .frow .fbtns .btn svg{width:20px;height:20px}
#factlist .frow .fbtns .btn.primary{grid-column:1/-1;flex-direction:row;min-height:48px;font-size:.9rem;gap:8px}
#factlist .frow .t .spi svg{width:18px;height:18px}
/* v310 · Plan Separe */
#fapsum .fa-tot{padding:2px 0 6px}
#fapsum .fa-tot b{color:var(--fg)}
.apcard .ap-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;width:100%}
.apcard .ap-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.apcard .spi svg{width:18px;height:18px}
.apcard .svgrp{margin-top:4px}
/* v311 · Vender: búsqueda */
.vcats{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.vcats[hidden]{display:none}
.vscanb svg{width:18px;height:18px;margin-right:6px;vertical-align:-4px}
#vpick .item>.btn svg{width:16px;height:16px;flex:none;margin-right:4px;vertical-align:-3px}
.vcats .mchip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* v312 · Ajustes (celular): cada fila vuelve a mostrar su descripción */
@media (max-width:1099px){
  #tab-ajustes .ajgrp .ajtx span{display:block;font-size:.8rem;line-height:1.3;margin-top:2px;color:var(--muted)}
  #tab-ajustes .ajgrp .ajrow{align-items:center;padding-block:12px}
}
/* v314 · Ajustes: módulos con interruptor y acciones de datos */
.ajtog .ajsw{flex:none;width:46px;height:28px;border-radius:99px;background:var(--line);position:relative;transition:background .18s}
.ajtog .ajsw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s}
.ajtog .ajsw.on{background:var(--accent)}
.ajtog .ajsw.on i{transform:translateX(18px)}
.ajtog .ajic svg{width:20px;height:20px}
#ajdata{margin-top:4px}
@media(min-width:1100px){#ajdataw{display:none}}
/* v316 · Catálogo */
.cat-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.cat-chips[hidden]{display:none}
.cat-chips .mchip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
#tab-catalogo .svgrp>.row.sv-ag>a.btn{text-decoration:none}
#catpdf svg{width:18px;height:18px;margin-right:6px;vertical-align:-4px}
/* v318 · Abono: formulario en una columna y cuotas que se pueden cobrar */
.payform .abf{width:100%}
.payform .qpct-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.payform .qpct-row .btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;padding:6px 4px}
.payform .qpct-row .btn small{font-size:.72rem;color:var(--muted);font-weight:600}
.payform .mgrid{width:100%}
.cuota-row.tap{cursor:pointer;border-radius:12px;padding:8px 10px;margin:2px -10px;border:1px solid transparent;align-items:center}
.cuota-row.tap:hover,.cuota-row.tap:focus-visible{border-color:var(--line);background:var(--field);outline:none}
.cuota-row.tap.sel{border-color:var(--accent);background:var(--accent-soft)}
.cuota-row .cobr{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:.75rem;font-weight:700;color:var(--accent-2);margin-left:6px}
.cuota-row .cobr svg{width:14px;height:14px}
.cuota-row.done{opacity:.7}
.cuota-row.tap.sel{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--fg)}
/* v319: iconos de WhatsApp y trazo en filas de Ajustes */
.ajic svg[fill="none"]{fill:none!important;stroke:currentColor!important;stroke-width:1.8}
.btn>svg{width:16px;height:16px;flex:none;margin-right:5px;vertical-align:-3px}

/* v321: la barra inferior deja desplazar la página en vertical; solo el arrastre horizontal mueve la cápsula */
nav.tabs{touch-action:pan-y}

/* v322: Cotizar con el diseño nuevo (secciones con ícono, buscador con lupa, chips de «más datos») */
.qsec{display:flex;align-items:center;gap:8px;margin:14px 0 4px;color:var(--mute,var(--fg))}
.qsec:first-of-type{margin-top:2px}
.qsec svg{width:18px;height:18px;flex:none;color:var(--accent)}
.qsec b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.sinp-w{position:relative;display:block}
.sinp-w>svg{position:absolute;left:12px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--mute,var(--fg));pointer-events:none}
.sinp-w>input{padding-left:38px;width:100%}
#qform details.more>summary{display:inline-flex;align-items:center;gap:6px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;padding:8px 14px;min-height:0;font-size:.85rem}
#qform details.more[open]>summary{border-style:solid}
#qpick .item>.btn svg,#qlines .btn svg,#qadd svg,#qsave svg{width:16px;height:16px;flex:none;margin-right:5px;vertical-align:-3px}
#qlines .btn.x svg{margin:0}
#qsave{display:flex;align-items:center;justify-content:center}
#gcard .gpk-add{border-style:dashed;color:var(--accent)}
/* v327: marca de selección sin relleno — barra lateral de color (listas) y subrayado (pestañas) */
html .card.fold:not(.closed)>h2{background:linear-gradient(var(--accent),var(--accent)) no-repeat 3px center/3px 18px!important;color:var(--accent);box-shadow:none;border-radius:0}
html .ajhub .ajrow.on{background:transparent!important;border-color:transparent!important;background-image:linear-gradient(var(--accent),var(--accent))!important;background-repeat:no-repeat!important;background-position:7px center!important;background-size:3px 22px!important;border-radius:12px}
html #invseg{background:transparent!important;box-shadow:none!important;border-radius:0!important;border-bottom:1px solid var(--line);padding:0!important;gap:2px}
html #invseg button{background:transparent!important;box-shadow:none!important;border-radius:0!important;color:var(--muted)!important;border-bottom:2px solid transparent!important;font-weight:600}
html #invseg button.on,html #invseg button[aria-selected="true"]{color:var(--accent)!important;border-bottom:2px solid var(--accent)!important;font-weight:700}
/* v330: formularios largos en ventana que sube desde abajo (Entrada de mercancía, Producto) */
.sheetdlg{width:100%;max-width:560px;max-height:92dvh;max-height:92vh;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;border-radius:26px 26px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom,0px));gap:6px}
@media (min-width:700px){.sheetdlg{border-radius:26px}}
.sheetdlg .sheethd{position:sticky;top:-6px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 8px;margin:0 -16px;padding-inline:16px;background:var(--glass-strong,var(--surface,#fff));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sheetdlg .sheethd .grab{position:absolute;top:6px;left:50%;translate:-50% 0;width:40px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--fg,#000) 25%,transparent)}
.sheetdlg .sheethd h2{margin:0;font-size:1.15rem}
.sheetdlg .sheetx{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:color-mix(in srgb,var(--fg,#000) 10%,transparent);color:var(--fg);font:inherit;font-size:1rem;line-height:34px;padding:0;cursor:pointer}
html body .sheetdlg>.card.card.fold{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;margin:0!important;border-radius:0!important}
.sheetdlg>.card>h2{display:none!important}
.sheetdlg>.card.closed:not(.sf-open)>*:not(h2){display:revert!important}
html .card.fold[data-sheet]>h2::after{display:inline-block!important;content:"+ Nueva";width:auto;height:auto;border:0;transform:none;margin-left:auto;color:var(--accent);font-weight:700;font-size:.85rem}

html .card.fold[data-sheet][data-sl]>h2::after{content:attr(data-sl)}

/* v331: filas de búsqueda + filtros + vistas: en pantallas angostas la búsqueda ocupa su línea y los botones de vista no se aplastan */
@media (max-width:480px){
  html body .row:has(>.vsw){flex-wrap:wrap!important}
  html body .row:has(>.vsw)>label.grow{flex:1 1 100%!important;min-width:0}
}
html body .vsw button{min-width:36px;flex:0 0 auto}

/* v331b: barra inferior sin nombres cortados en celulares angostos; botones/selectores chicos */
@media (max-width:380px){
  html body nav.tabs button{font-size:10px!important;padding-left:3px!important;padding-right:3px!important;letter-spacing:-.01em}
  html body #csup,html body .row>label.f select{font-size:.9rem;padding-left:10px}
}
html body #ajfirsthide{min-height:36px;padding:8px 14px}

/* v331c: Cobrar: la caja «Con cuánto paga» no se pega a los montos rápidos */
html body #vcash #vchips{margin-top:10px;gap:10px}
html body #vpay .vpill:last-child:nth-child(3n+1){grid-column:1/-1}
html body #vpay .vpill:last-child:nth-child(3n+2){grid-column:span 2}

/* v331d: montos rápidos de Cobrar en una sola fila deslizable */
html body #vcash #vchips{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
html body #vcash #vchips::-webkit-scrollbar{display:none}
html body #vcash #vchips>.btn{flex:0 0 auto;white-space:nowrap;min-width:84px}

/* v331d: animación de impresora al registrar una venta */
.prn{position:relative;width:132px;height:104px;margin:2px auto 12px}
.prn-body{position:absolute;left:0;right:0;top:0;height:46px;border-radius:14px;background:var(--fg,#111);box-shadow:0 6px 14px rgba(0,0,0,.18);z-index:2}
.prn-slot{position:absolute;left:14px;right:14px;bottom:9px;height:6px;border-radius:4px;background:var(--bg,#fff);opacity:.9}
.prn-led{position:absolute;right:16px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prn-out{position:absolute;left:50%;top:38px;width:84px;height:64px;margin-left:-42px;overflow:hidden;z-index:1}
.prn-paper{position:absolute;left:0;right:0;top:0;height:92px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.14);border-radius:0 0 4px 4px;padding:14px 9px 0;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 6px rgba(0,0,0,.12);
  background-image:linear-gradient(-45deg,transparent 4px,#fff 0),linear-gradient(45deg,transparent 4px,#fff 0)}
.prn-paper u{display:block;height:3px;border-radius:2px;background:var(--accent);width:40%;margin:0 auto 2px;text-decoration:none}
.prn-paper i{display:block;height:3px;border-radius:2px;background:#cfd5d1}
.prn-paper i.s{width:55%}
.prn-paper em{font-style:normal;font-weight:800;font-size:.7rem;text-align:center;margin-top:2px;color:#111}
@media (prefers-reduced-motion:no-preference){
  html:not([data-calm]) .prn.play .prn-paper{animation:prnout 1.5s cubic-bezier(.3,.7,.3,1) both}
  html:not([data-calm]) .prn.play .prn-led{animation:prnled .3s steps(2) 5}
  html:not([data-calm]) .prn.play .prn-body{animation:prnshake .12s linear 6}
  @keyframes prnout{0%{transform:translateY(-92px)}18%{transform:translateY(-92px)}100%{transform:translateY(-28px)}}
  @keyframes prnled{50%{opacity:.2}}
  @keyframes prnshake{25%{transform:translateY(1px)}75%{transform:translateY(-1px)}}
}

/* v331e: Ayuda con el mismo diseño de las ventanas desde abajo: categorías en una fila deslizable y respuestas en tarjetas */
#helpmodal .hcats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 6px;padding:2px 16px 6px;-webkit-overflow-scrolling:touch}
#helpmodal .hcats::-webkit-scrollbar{display:none}
#helpmodal .hcats .btn{flex:0 0 auto;white-space:nowrap;border-radius:999px}
@media (min-width:700px){#helpmodal .hcats{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
#helpmodal .sheetdlg{max-height:88dvh;max-height:88vh}
#helpmodal #hhelp{display:flex;flex-direction:column;gap:10px}
html body #helpmodal .hitem{border:1px solid var(--glass-edge,var(--line,rgba(128,128,128,.25)));border-radius:16px;padding:14px;background:color-mix(in srgb,var(--fg,#000) 4%,transparent);gap:12px}
html body #helpmodal .hitem .t{font-size:.98rem}
#helpmodal h3.sub{margin:14px 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* v331f: la ayuda mantiene siempre la misma altura: al cambiar de categoría la ventana ya no se encoge ni «se baja» */
html body #helpmodal .sheetdlg{height:88vh;height:88dvh;max-height:88dvh}

/* v331g: lista de chequeo del equipo (recibir y entregar) */
.chk{display:flex;flex-direction:column;gap:8px}
.chk .chkbar{display:flex;gap:8px;justify-content:flex-end}
.chk .chkrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border:1px solid var(--glass-edge,rgba(128,128,128,.25));border-radius:14px;background:color-mix(in srgb,var(--fg,#000) 4%,transparent)}
.chk .chkn{flex:1 1 auto;min-width:0;font-weight:600;font-size:.93rem;line-height:1.25}
.chk .chkseg{flex:none;display:inline-flex;border:1px solid var(--glass-edge,rgba(128,128,128,.3));border-radius:12px;overflow:hidden}
.chk .chkseg button{min-width:40px;min-height:38px;padding:0 6px;border:0;border-left:1px solid var(--glass-edge,rgba(128,128,128,.3));background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.chk .chkseg button:first-child{border-left:0}
.chk .chkseg.wide button{padding:0 12px;font-size:.85rem;white-space:nowrap}
.chk .chkseg button[aria-pressed=true][data-st=ok]{background:var(--accent);color:var(--accent-fg,#fff)}
.chk .chkseg button[aria-pressed=true][data-st=fail]{background:var(--bad,#c0392b);color:#fff}
.chk .chkseg button[aria-pressed=true][data-st=na],.chk .chkseg button[aria-pressed=true][data-lock]{background:color-mix(in srgb,var(--fg,#000) 22%,transparent);color:var(--fg)}
.chk .chkrow.st-fail{border-color:color-mix(in srgb,var(--bad,#c0392b) 55%,transparent)}
.chk .chklock{flex-wrap:wrap}
details.chkd{margin:2px 0}
details.chkd>summary{cursor:pointer;line-height:1.35}
.chkl{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--fg,#000) 5%,transparent)}
.chkli{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.chkli b{font-weight:700;text-align:right}
.chkli.st-fail b{color:var(--bad,#c0392b)}.chkli.st-ok b{color:var(--accent)}

/* v331 fotos del equipo */
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0}
.phgrid:empty{display:none}
.phi{position:relative;border-radius:10px;overflow:hidden;background:var(--bg2,#f1f5f9);aspect-ratio:1/1;min-width:0}
.phi img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.phi.big{grid-column:1/-1;aspect-ratio:auto}.phi.big img{height:auto;max-height:70dvh;object-fit:contain;cursor:zoom-out}
.phx{position:absolute;top:4px;right:4px;width:32px;height:32px;min-height:0;padding:0;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.phbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phbar .hint{margin:0}

/* v448: botón del ojo junto al valor del inventario */
.dn-tot .eyebtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-14px 0 -14px 2px;padding:0;vertical-align:middle;background:transparent;border:0;color:var(--muted);cursor:pointer;border-radius:12px}
.dn-tot .eyebtn svg{width:20px;height:20px}

/* v448: paneles de Anular venta y Devolución ordenados (un campo por fila, botones grandes) */
.retpanel{display:grid;gap:12px;padding:14px;border-radius:18px;text-align:left}
.retpanel .f{margin:0}
.rp-hd{display:flex;gap:10px;align-items:flex-start}
.rp-hd b{display:block;font-size:1.02rem;line-height:1.25}
.rp-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.rp-ic.bad{background:var(--bad-soft);color:var(--bad)}
.rp-ic svg{width:20px;height:20px}
.rp-items{display:grid;gap:8px}
.rp-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.rp-item.col{flex-direction:column;align-items:flex-start;gap:6px}
.rp-n{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.rp-n .hint{display:block;margin:0;font-weight:400}
.rp-item input[data-rqi]{width:84px;flex:none;text-align:center;font-size:1.05rem;font-weight:700;min-height:44px}
.rp-exch{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.rp-exch>span{display:grid;gap:2px;min-width:0}
.rp-exch .hint{margin:0}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-act.one{grid-template-columns:1fr}
.rp-act .btn{min-height:48px;justify-content:center;font-weight:700}
@media (max-width:360px){.rp-two,.rp-act{grid-template-columns:1fr}}

/* v449: pedido sugerido más corto (acciones arriba, lista por páginas, ayuda y bloque plegados) y barra de Ventas ordenada */
.lowact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.lowact .btn{min-height:44px;justify-content:center}
.lowact[hidden],#lowtools[hidden]{display:none}
#lowcard .lowrow{padding-block:6px;gap:8px}
#lowcard .lowrow .t{font-size:.88rem;line-height:1.25}
#lowcard .lowrow .s{font-size:.8rem}
#lowcard .lowq{display:flex;align-items:center;gap:6px;flex:none}
#lowcard .lowq input{width:56px;min-height:40px;text-align:center}
#lowcard details.more{margin-top:10px}
#sfrowb{margin:8px 0}
#sfrowc{align-items:center;margin:2px 0 6px}
/* sin vidrio: la cápsula de la barra inferior también es plana al arrastrar */
html nav.tabs .ind,html nav.tabs .ind.drag{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--accent-soft)!important;border-color:transparent!important;box-shadow:none!important}
html nav.tabs{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

header.top{padding-block-start:16px}
.auth{min-height:70dvh}
/* sin vidrio: fondo liso, sin manchas de color detrás de las tarjetas */
html body::before,html body::after{background:none!important;background-image:none!important}
html:not([data-style]) body,html[data-style] body,html:root body{background-image:none!important}
/* Mi negocio: bloques que se abren y cierran */
.sacc{padding:0!important;margin-top:8px!important;border:1px solid var(--line)!important;border-radius:16px;background:var(--surface);overflow:hidden}
.sacc details>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;min-height:60px}
.sacc details>summary::-webkit-details-marker{display:none}
.sacc details>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex:none}
.sacc details[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.sai{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;font-style:normal}
.sai svg{width:20px;height:20px}
.sat{display:flex;flex-direction:column;min-width:0}
.sat h3{margin:0!important;font-size:1rem!important;text-transform:none!important;letter-spacing:0!important;color:var(--fg)!important}
.sat small{color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sab{display:flex;flex-direction:column;gap:12px;padding:4px 14px 16px;border-top:1px solid var(--line)}
#ssave{width:100%;margin-top:12px}
/* Escritorio: en Ventas el buscador y Filtros van en la misma fila */
@media (min-width:900px){#sfbar{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}#sfbar>*{grid-column:1/-1}#sfbar>label.f{grid-column:1;margin:0}#sfbar>#sfrowb{grid-column:2;margin:0}}

/* v462 · Aprobaciones, verificación en dos pasos y dispositivos */
.apwait{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.apwait .orb{width:44px;height:44px}
.apitem .apact{margin-top:8px;flex-wrap:nowrap}
.apitem .appin{width:7.5em;flex:0 1 auto;min-height:36px;padding:6px 10px}
#iapprcard{border-color:var(--accent)}
.seci{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.seci:first-child{border-top:0}
.seci .o{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;border:2px solid var(--muted)}
.seci.ok{color:var(--muted)}.seci.ok .o{background:var(--accent);border-color:var(--accent);color:#fff}
.tfaqr{width:180px;margin:6px auto;background:#fff;padding:8px;border-radius:12px}
.tfaqr svg{width:100%;height:auto;display:block}
@media (min-width:1100px){#tab-inicio>#iapprcard,#tab-inicio>#iseccard{grid-column:1/-1}}

/* Diseño común de formularios (v464; nació en Entrada de mercancía v463): bloque para agregar, pasos numerados,
   cantidad con − y +, botón «+ Agregar», escanear solo ícono, aviso de lista vacía y listas viejas plegadas */
.stepbox{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r-md,14px);background:var(--field);margin-top:2px}
.stepttl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--fg)}
.stepttl>b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-size:.75rem}
.stepcount{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--muted);text-align:right}
.row.scanrow,.row.qrow{flex-wrap:nowrap}
.row.scanrow{align-items:flex-start}
.row.scanrow>.f{min-width:0}
.row.qrow{align-items:flex-end}
.stepbox .pshint:not(.psok){display:none}
html body .btn.scanbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;width:52px;min-width:52px;min-height:50px;align-self:flex-end}
.btn.scanbtn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn.scanbtn svg{width:24px;height:24px}
.row.scanrow>.btn.scanbtn{align-self:flex-start;margin-top:26px}
.btn.small.scanbtn,label .btn.scanbtn{min-height:44px;width:48px;min-width:48px}
.qstep{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,14px);height:46px;overflow:hidden;width:max-content}
.qstep button{width:42px;height:100%;border:0;background:transparent;color:var(--fg);font:inherit;font-size:1.2rem;font-weight:700;cursor:pointer}
.qstep button:active{background:var(--accent-soft)}
html body .qstep input{width:52px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:center;padding:0;font-weight:700;font-variant-numeric:tabular-nums;min-height:0;height:100%}
.qstepf{flex:none}
html body .btn.addbtn{border:1px solid var(--accent);color:var(--accent);background:var(--surface);white-space:nowrap;box-shadow:none}
html body .btn.addbtn:disabled{border-color:var(--line);color:var(--muted)}
.list:empty{display:none}
.emptyline{color:var(--muted);font-size:.85rem;text-align:center;padding:14px 10px;border:1.5px dashed var(--line);border-radius:var(--r-md,14px)}
details.foldlist{border-top:1px solid var(--line);padding-top:8px}
details.foldlist>summary{cursor:pointer;font-weight:700;padding:8px 0;list-style:none;display:flex;justify-content:space-between;color:var(--fg)}
details.foldlist>summary::-webkit-details-marker{display:none}
details.foldlist>summary::after{content:'Ver';color:var(--accent);font-weight:700}
details.foldlist[open]>summary::after{content:'Ocultar'}
/* Ventanas que suben desde abajo: dejan libre la parte de arriba (en la app de Claude ahí van sus botones de cerrar y menú) */
@media (max-width:699px){.sheetdlg{max-height:calc(100dvh - 96px)}}
.stepbox input:not([type=checkbox]):not([type=radio]),.stepbox select,.stepbox textarea{background:var(--surface)}
.row.qrow>.btn.addbtn{min-width:0;padding-inline:10px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){.row.qrow{flex-wrap:wrap}.row.qrow>.btn.addbtn{flex:1 1 100%}}

/* v465 — correcciones de diseño (sin cambiar lógica ni datos) */
/* Títulos de sección: texto normal (no mayúsculas), 18 px, peso 700 */
html body .ajlbl,html body .fglbl,html body .svgrp>.gt,html body .sgrp>h3,html body #svform .fsec>h3,html body .sclist h3,html body #helpmodal h3.sub,html body #gsres h3{
  text-transform:none;letter-spacing:0;font-size:18px;font-weight:700;color:var(--fg);line-height:1.3}
html body .ajlbl,html body .fglbl{margin:18px 4px 8px}
/* Vender: categorías en una sola fila que se desliza */
.vcats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-inline:-2px;padding-inline:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.vcats::-webkit-scrollbar{display:none}
.vcats>*{flex:none;white-space:nowrap}
/* Ventas: «+ Nueva venta» dentro del contenido (en PC ya está arriba a la derecha) */
.vnewrow{margin-top:12px}
@media (min-width:1100px){.vnewrow{display:none}}
/* Celular: botones de acción de al menos 44 px de alto */
@media (max-width:1099px){
  html body .btn,html body .btn.small,html body a.btn{min-height:44px}
  html body .linkbtn{min-height:44px}
}
@media (max-width:1099px){
  html body .vcats .mchip,html body .r-chip,html body .r-seg button,html body #ajfirsthide{min-height:44px}
  html body .vcats .mchip{display:inline-flex;align-items:center}
}
@media (max-width:1099px){
  html body .qty button,html body #tab-vender.sheetm .item.cl .qty button{width:38px;min-width:38px;height:44px;border-radius:14px}
  html body #tab-vender.sheetm .vextrabtn,html body #tab-vender.sheetm #vhold,html body .vextrabtn,html body #vhold{min-height:44px}
}

/* El separador dentro del texto (i.sep) no lleva la línea de .sep (que es para las divisiones) */
i.sep{border:0;margin:0;width:auto}
@media (max-width:1099px){i.sep{display:inline}}
/* Inventario (v466): buscador a lo ancho con escanear; debajo Filtros a la izquierda y la vista a la derecha */
@media (max-width:1099px){
  #isbar{align-items:flex-end;column-gap:10px;row-gap:10px}
  #isbar>label.grow{flex:1 1 calc(100% - 64px)}
  #isbar>.fbtn{flex:none;margin:0}
  #isbar>.vsw{margin-left:auto}
}
/* Acciones rápidas de Inventario: la última fila se reparte el ancho (sin huecos) */
#invquick>.row.sv-ag{display:flex;flex-wrap:wrap}
#invquick>.row.sv-ag>.btn{flex:1 1 calc(33.333% - 8px);min-width:0}
/* «Agregar producto nuevo»: sin el «+ Nueva» repetido; se ve como los demás botones de agregar */
html .card.fold[data-sheet]#pform>h2::after{display:none!important}
html body #tab-inventario #pform.card.fold.closed{border:1px solid var(--accent)!important}
html body #tab-inventario #pform.card.fold.closed>h2{color:var(--accent)}
#tab-inventario #invquick{margin-top:16px}
/* Impresora en las ventanas de comprobante: no se encoge (el papel no se monta sobre el texto) */
.dlg .prn{flex:none}
/* Una sola rayita de arrastre: si la ventana ya trae la de arrastrar (.grab), no se dibuja la decorativa */
.dlg:has(>.grab)::before{display:none}
/* Comprobante: el recuadro grande en rojo cuando es una diferencia en contra (faltan) */
.sdchg.sdbad{background:var(--bad);color:#fff}
/* Cierres guardados (v469): los botones solo en el cierre vigente, en una rejilla ordenada; el reabierto queda atenuado y sin botones */
#closelist .item.clitem{display:block}
#closelist .clvoid{opacity:.6}
.clacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.clacts>.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;min-width:0}
.clacts>.btn svg{width:18px;height:18px;flex:none}
@media (min-width:700px){.clacts{grid-template-columns:repeat(4,max-content)}}
/* Número del carrito en el botón «Vender» (v470; reemplaza al + flotante). En celular, burbuja sobre el ícono */
nav.tabs button .nbadge.ncart{display:inline-block}
@media (max-width:1099px){
  nav.tabs button .nbadge.ncart{position:absolute;top:4px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-style:normal;font-size:.68rem;font-weight:800;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
}

/* v471: entrada con Face ID o huella primero (si este equipo la tiene) y enlaces en una línea */
.apktop{display:flex;flex-direction:column;gap:8px}.apktop[hidden],#auth .padk.pkk[hidden],#auth #abtn[hidden]{display:none!important}
.auth.pad #apk{min-height:56px;font-size:1.1rem}
.aor{text-align:center;color:var(--muted);font-size:.85rem}
.ahi{margin:0;color:var(--muted);font-size:1rem;font-weight:600}.ahi[hidden]{display:none}
/* v476 · datos privados del cliente ocultos al vendedor */
.privoff{display:none!important}
/* v476 · Entrada con persona + PIN: lista para elegir quién entra */
.wholist{display:grid;gap:8px;margin:4px 0}
.whobtn{display:flex;align-items:center;gap:12px;justify-content:flex-start;min-height:56px;padding:8px 14px;text-align:left;font-weight:600;font-size:1rem}
.whoini{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-2);font-weight:800}
html[data-style="mostrador"] .whobtn{border-radius:16px}
.whonm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
img.whoini{object-fit:cover;padding:0;background:var(--field)}
.ahiph{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:var(--accent-soft);color:var(--accent-2);font-weight:800;font-size:1.6rem;margin:2px auto 0;flex:none}
@media (max-height:720px){.ahiph{width:48px;height:48px;font-size:1.2rem}}
#auth .ahi .ahichg{display:inline;margin:0 0 0 6px;font-size:.85rem;font-weight:600;padding:0;min-height:0}
.pkslot{display:flex;justify-content:center;align-items:center}
#auth .padk.pkk{color:var(--accent)}#auth .padk.pkk svg{width:28px;height:28px}
.alinks{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2px;color:var(--muted)}
#auth .auth .alinks .linkbtn{display:inline-flex;margin:0}

/* v471 · pantalla de carga «ticket que se imprime» (elegida por Juan): logo del negocio a todo color, de él sale un ticket
   que crece con la carga real y termina con un chulito verde. Sin porcentaje. Verde fijo (no el color del negocio). */
#splash .sp-pct{display:none!important}
.sp-ring .sp-fill{display:none!important}
.sp-ring .sp-logo:not(.sp-fill){filter:none!important}
@media (prefers-color-scheme:dark){html[data-logo-dark]:not([data-theme="light"]) .sp-ring .sp-logo.img:not(.sp-fill){filter:invert(1) hue-rotate(180deg)!important}}
html[data-theme="dark"][data-logo-dark] .sp-ring .sp-logo.img:not(.sp-fill){filter:invert(1) hue-rotate(180deg)!important}
.sp-tk{display:flex;flex-direction:column;align-items:center;margin-top:2px;min-height:84px}
.sp-slot{width:112px;height:6px;border-radius:3px;background:var(--fg);position:relative;z-index:2}
.sp-paper{width:88px;height:calc(var(--spn,0) * .78px);max-height:78px;margin-top:-3px;box-sizing:border-box;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;transition:height .12s linear}
.sp-paper i{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--fg) 18%,transparent);flex:none}
.sp-paper i:nth-child(1){width:60px}.sp-paper i:nth-child(2){width:46px}.sp-paper i:nth-child(3){width:60px}.sp-paper i:nth-child(4){width:34px}
.sp-ok{width:22px;height:22px;flex:none;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s}
.sp-ok path{fill:none;stroke:#16a34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#splash.ok .sp-ok{opacity:1;transform:none}
#splash.nobrand .sp-tk{opacity:1}
#splash .sp-steps li.cur{color:var(--fg)}
@media (min-width:1100px){.sp-slot{width:140px}.sp-paper{width:110px}}
@media (prefers-reduced-motion:reduce){.sp-paper,.sp-ok{transition:none}}

/* v472 · barra de navegación del celular: mismo alto, más angosta a los lados (32 px) y en forma de cápsula, como iOS o WhatsApp (Juan) */
@media (max-width:1099px){
  html body nav.tabs{left:clamp(16px,calc((100vw - 326px)/2),32px)!important;right:clamp(16px,calc((100vw - 326px)/2),32px)!important;border-radius:999px!important} /* 32 px a los lados; en celulares angostos (360 px) unos 17 px para que «Inventario» quepa */
  html body nav.tabs button span{font-size:10.5px!important;letter-spacing:-.01em}
}

/* v473 · íconos como WhatsApp (Juan): pestaña sin elegir de contorno; la elegida, rellena en verde */
nav.tabs button[role=tab] svg.ic-f{display:none}
nav.tabs button[role=tab][aria-selected="true"] svg.ic-f{display:block}
nav.tabs button[role=tab][aria-selected="true"] svg.ic-l{display:none}
html nav.tabs svg.ic-l,.morebtn svg.ln{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
html nav.tabs svg.ic-l .f,.morebtn svg.ln .f{fill:currentColor!important;stroke:none!important}

/* v474 · al deslizar la gota los íconos se van rellenando: el relleno se superpone al contorno con la opacidad --fl */
nav.tabs button .icw{display:block;position:relative;font-style:normal;line-height:0;flex:none}
nav.tabs button .icw svg.ic-f{position:absolute;inset:0}
html nav.tabs.lift button[role=tab] svg.ic-f{display:block!important;opacity:var(--fl,0);transition:opacity .08s linear}
html nav.tabs.lift button[role=tab] svg.ic-l{display:block!important;opacity:calc(1 - var(--fl,0));transition:opacity .08s linear}
html nav.tabs.lift button[role=tab]{color:color-mix(in srgb,var(--accent) calc(var(--fl,0) * 100%),var(--muted))!important}
html nav.tabs button[role=tab][aria-selected="true"] svg.ic-l{display:block!important;visibility:hidden}
html nav.tabs.lift button[role=tab] svg.ic-l{visibility:visible}

/* v475 · fondo sólido (Juan): sin las manchas verdes degradadas detrás de Ajustes */
#tab-ajustes .ajhub::before{display:none!important;background:none!important}
/* v475 · cuadro de iniciales en Ajustes (sin logo): blanco con borde gris y letras verdes, sin degradado (Juan, opción B) */
html .ajlogo.ini{background:var(--surface)!important;color:var(--accent)!important;border:1.5px solid var(--line)!important;box-shadow:none!important}

/* v480 · Ícono oficial de WhatsApp en los botones: verde de WhatsApp (#25D366) y blanco sobre botones verdes. No se recolorea con el tema. */
svg.ic-wa,svg.ic-wa path{fill:#25d366!important;stroke:none!important}
.btn.primary svg.ic-wa,.btn.primary svg.ic-wa path,.dn-ic.p svg.ic-wa,.dn-ic.p svg.ic-wa path,html[data-style="mostrador"] .vbar svg.ic-wa path{fill:var(--accent-fg,#fff)!important}

/* v491: aviso de Plan Separe pagado: hay que entregar lo apartado */
.sepready{border:2px solid var(--accent);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--field)}
.sepready .sr-ttl{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.sepready .sr-ttl svg{width:22px;height:22px;color:var(--accent);flex:none}
.sepready ul{margin:0;padding-left:20px}
.fa-sep{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.fa-sep svg{width:16px;height:16px;flex:none}

/* v492b: la tarjeta del total toma el color que el negocio escogió en Ajustes (Juan); se toma en html, antes de que Reportes cambie --accent */
html{--rp-brand:var(--accent);--rp-brand-fg:var(--accent-fg)}
/* ===== v492 · Reportes, diseño A (Juan): panel con colores propios; sigue el modo claro/oscuro del cliente ===== */
#tab-reportes{--rp-bg:#f4f6fb;--rp-card:#ffffff;--rp-line:#e8ebf3;--rp-muted:#6b7280;--rp-fg:#111827;--rp-track:#eef0f6;
  --rp-hero:linear-gradient(135deg,color-mix(in srgb,var(--rp-brand) 45%,#000),var(--rp-brand));--rp-hero-line:var(--rp-brand-fg);
  --rp-v:#6366f1;--rp-n:#06b6d4;--rp-t:#8b5cf6;--rp-g:#22c55e;--rp-gn:#f59e0b;--rp-bar:linear-gradient(90deg,#6366f1,#22d3ee);
  --accent:#6366f1;--accent-2:#22d3ee;--accent-fg:#fff;--prev:#a5b4fc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #tab-reportes{--rp-bg:#0b1020;--rp-card:#131a2e;--rp-line:#1f2842;--rp-muted:#8b95b5;--rp-fg:#e6e9f2;--rp-track:#1f2842;--rp-n:#22d3ee;--rp-t:#a78bfa;--rp-g:#4ade80;--rp-gn:#fbbf24;--prev:#475094}}
:root[data-theme="dark"] #tab-reportes{--rp-bg:#0b1020;--rp-card:#131a2e;--rp-line:#1f2842;--rp-muted:#8b95b5;--rp-fg:#e6e9f2;--rp-track:#1f2842;--rp-n:#22d3ee;--rp-t:#a78bfa;--rp-g:#4ade80;--rp-gn:#fbbf24;--prev:#475094}
/* En Mostrador la app es oscura salvo que el cliente elija claro: Reportes sigue lo mismo que el resto de la app */
html[data-style="mostrador"]:not([data-theme="light"]) #tab-reportes{--rp-bg:#0b1020;--rp-card:#131a2e;--rp-line:#1f2842;--rp-muted:#8b95b5;--rp-fg:#e6e9f2;--rp-track:#1f2842;--rp-n:#22d3ee;--rp-t:#a78bfa;--rp-g:#4ade80;--rp-gn:#fbbf24;--prev:#475094}
html[data-style="mostrador"]:not([data-theme="light"]):has(#app[data-tab="reportes"]){--rp-page:#0b1020}
html:has(#app[data-tab="reportes"]) body,html:has(#app[data-tab="reportes"]) #app{background:var(--rp-page,#f4f6fb)!important}
html:has(#app[data-tab="reportes"]){--rp-page:#f4f6fb}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]):has(#app[data-tab="reportes"]){--rp-page:#0b1020}}
html[data-theme="dark"]:has(#app[data-tab="reportes"]){--rp-page:#0b1020}
#tab-reportes{color:var(--rp-fg)}
html #tab-reportes :is(.card,.r-kpi,.r-plotbox){background:var(--rp-card)!important;border:1px solid var(--rp-line)!important;box-shadow:0 1px 2px rgba(16,24,40,.05)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--rp-fg)}
html #tab-reportes :is(.hint,.r-kpi .k,.r-kpi .d span,.r-al span){color:var(--rp-muted)!important}
html #tab-reportes .r-kpi{border-radius:18px}
html #tab-reportes .r-kpi .v{color:var(--rp-fg)}
html #tab-reportes .r-hero.r-hero.r-hero{background:var(--rp-hero)!important;background-image:var(--rp-hero)!important;background-color:var(--rp-brand)!important;color:var(--rp-brand-fg)!important;border:0!important;box-shadow:0 14px 34px -16px color-mix(in srgb,var(--rp-brand) 60%,transparent)!important;border-radius:22px}
html #tab-reportes .r-hero :is(.big,.k){color:var(--rp-brand-fg)!important}
html #tab-reportes .r-hero .k{opacity:.82}
html #tab-reportes .r-hero .r-delta{background:color-mix(in srgb,var(--rp-brand-fg) 18%,transparent);border:0;color:var(--rp-brand-fg)}
html #tab-reportes .r-chip.on{background:#6366f1!important;color:#fff!important}
html #tab-reportes .r-chip:not(.on){background:var(--rp-card)!important;border-color:var(--rp-line)!important;color:var(--rp-muted)!important}
html #tab-reportes .r-t{background:var(--rp-track)}
html #tab-reportes .r-t i{background:var(--rp-bar)!important}
html #tab-reportes .r-rk{background:color-mix(in srgb,#6366f1 14%,transparent);color:#6366f1}
html #tab-reportes .r-al{background:transparent;border-radius:14px}
html #tab-reportes .r-al.bad{background:color-mix(in srgb,#ef4444 12%,var(--rp-card));border-color:transparent}
html #tab-reportes .r-al.warn{background:color-mix(in srgb,#f59e0b 13%,var(--rp-card));border-color:transparent}
html #tab-reportes .r-al.bad b,html #tab-reportes .r-al.bad svg{color:#ef4444}
html #tab-reportes .r-al.warn b,html #tab-reportes .r-al.warn svg{color:#d97706}
html #tab-reportes .r-seg{background:var(--rp-track)}
html #tab-reportes .r-seg button.on{background:var(--rp-card);color:var(--rp-fg)}
@media (max-width:899px){#tab-reportes .rg>.a-alert{order:40}#tab-reportes .rg>.a-more{order:50}}

/* ===== v493 · Crédito (cartera) y Plan Separe (por estado) · v494d: todo con el color que el cliente escoge en Ajustes (--accent) ===== */
#fiapane .fseg{margin-top:12px}
.fsegn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--line);color:var(--fg);font-size:.72rem;font-weight:800;margin-left:4px}
.fsegn.rdy{background:var(--accent);color:var(--accent-fg)}
.fcart{background:var(--accent);color:var(--accent-fg);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:2px}
.fcart .fc-k{color:color-mix(in srgb,var(--accent-fg) 72%,transparent);font-size:.85rem;font-weight:700}.fcart .fc-v{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}.fcart .fc-s{color:color-mix(in srgb,var(--accent-fg) 72%,transparent);font-size:.82rem}
.fcart .fc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.fcart .fc-grid>div{background:color-mix(in srgb,var(--accent-fg) 12%,transparent);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fcart .fc-grid small{color:color-mix(in srgb,var(--accent-fg) 72%,transparent);font-size:.72rem;font-weight:700}.fcart .fc-grid b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fcart .fc-grid b.g{color:var(--accent-fg);font-weight:900}
#fstchips{margin-top:10px}#fstchips .mchip b{margin-left:4px}
.item.fia .trow-r{gap:10px;align-items:flex-start!important}
.item.fia .fav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.fstate{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;order:2;margin-top:2px}
.item.fia .main{display:flex;flex-direction:column}.item.fia .main .t{order:1}.item.fia .main .fstate{order:2}.item.fia .main>*:not(.t):not(.fstate){order:3}
.fstate .pill{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:99px}
.fstate.late .pill{background:#0b0b0b;color:#fff}.fstate.today .pill{background:var(--accent);color:var(--accent-fg)}.fstate.ok .pill{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fstate.late .pill{background:#fff;color:#0b0b0b}}
html[data-style="mostrador"]:not([data-theme="light"]) .fstate.late .pill{background:#fff;color:#0b0b0b}
.fap-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}
.fap-t{border-radius:18px;padding:14px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.fap-t small{font-size:.78rem;font-weight:700;color:var(--muted)}.fap-t b{font-size:1.4rem;font-weight:800}.fap-t span{font-size:.75rem;color:var(--muted)}
.fap-t.g{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.fap-t.g small,.fap-t.g span{color:color-mix(in srgb,var(--accent-fg) 80%,transparent)}
.fap-h{font-size:1rem;font-weight:800;margin:14px 2px 8px}
.apcard{position:relative}
.apcard.rdy{border:2px solid var(--accent)!important}
.fap-ok{position:absolute;top:14px;right:14px}
.fap-ok + .row{padding-right:78px}
.fap-ring{position:absolute;top:12px;right:12px;width:46px;height:46px}
.fap-ring + .row{padding-right:58px}
.fap-ring svg{width:46px;height:46px}.fap-ring circle{fill:none;stroke:var(--line);stroke-width:4}.fap-ring circle.v{stroke:var(--accent);stroke-linecap:round}
.fap-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.68rem;font-weight:800}

/* ===== v494 · Servicio, Compras y Cotizaciones con el diseño de Crédito ===== */
.stsum{margin:12px 0 4px}.stsum .stchips{margin-top:10px}.stchips .mchip b{margin-left:4px}
#svseg .segn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--line);font-size:.7rem;font-weight:800;margin-left:4px}
#svseg .segn:empty{display:none}#svseg .segn.rdy{background:var(--accent);color:var(--accent-fg)}
.item.strdy{border:2px solid var(--accent)!important;border-radius:16px;padding:12px!important;margin:6px 0}
.stacts{gap:8px;flex-wrap:wrap}
/* v494b · Botones de estado (Avisar / Recordar) en una sola fila, debajo de la información */
.item .stacts{display:flex;flex-direction:row;flex-wrap:nowrap}
.item .stacts>.btn{width:auto}
.item .stacts:has(>a.btn){flex:1 1 100%;width:100%;margin-top:8px}
.item .stacts:has(>a.btn)>.btn{flex:1 1 0;min-width:0}
/* v494c · Juan: sin raya al lado y botones del detalle de cotización del mismo tamaño (los principales siguen el color del negocio) */
.qacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}
.qacts>.btn{width:100%;height:100%;min-height:48px;margin:0;white-space:normal;text-align:center;justify-content:center}
.qacts>.qvoid{grid-column:1/-1;display:flex;gap:8px;justify-content:center}
.qacts>.qvoid>.btn{flex:0 1 auto}
/* ===== v495 · Botón ocupado: sólido, ruedita, ✓ al guardar y sacudida si falla ===== */
.btn.is-busy,.btn.is-done{opacity:1!important;cursor:progress}.btn.bpos{position:relative}
.btn.is-busy:disabled{opacity:1!important}
.btn.is-busy>*:not(.bover),.btn.is-done>*:not(.bover){visibility:hidden}
.btn.is-busy,.btn.is-done{color:transparent!important}
.btn .bover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--bcol,currentColor);font:inherit;pointer-events:none;white-space:nowrap;overflow:hidden;padding:0 8px;border-radius:inherit}
.btn .bover .bspin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;flex:none;animation:bspin .7s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
.btn.is-busy .bover .btxt{animation:bfade 1.2s ease-in-out infinite alternate}
@keyframes bfade{from{opacity:1}to{opacity:.65}}
.btn.is-done{pointer-events:none;animation:bpop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes bpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn.is-done .bover{animation:bin .2s ease-out}
@keyframes bin{from{opacity:0;transform:translateY(4px)}}
.btn .bchk{width:20px;height:20px;flex:none}
.btn .bchk path{stroke-dasharray:24;stroke-dashoffset:24;animation:bdraw .35s .08s ease-out forwards}
@keyframes bdraw{to{stroke-dashoffset:0}}
.btn.is-fail{animation:bshake .45s ease-in-out}
@keyframes bshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.btn.is-done,.btn.is-fail,.btn.is-done .bover{animation:none}.btn .bchk path{animation:none;stroke-dashoffset:0}.btn .bover .bspin{animation-duration:2s}.btn.is-busy .bover .btxt{animation:none}}
.toast.hi{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
/* v498 · Pago combinado (Juan): cada fila alineada, del mismo alto, con espacio; «Resto» dentro del campo del valor para que se lea la forma de pago */
#vmix .mixrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(136px,.85fr);gap:8px;align-items:stretch;margin:0 0 8px}
#vmix .mixrow.rm{grid-template-columns:minmax(0,1fr) minmax(132px,.85fr) 36px;gap:6px}
#vmix .mixrow>select,#vmix .mixamt>input,#vmix .mixrow>.btn{height:48px;min-height:48px;margin:0;box-sizing:border-box;width:100%}
#vmix .mixrow>select{padding-left:12px;padding-right:28px;text-overflow:ellipsis}
#vmix .mixamt{position:relative;display:block;min-width:0}
#vmix .mixamt>input{padding-left:12px;padding-right:74px}
#vmix .mixfill{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 10px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
#vmix .mixfill:active{transform:translateY(-50%) scale(.96)}
#vmix .mixrow>.btn.x{padding:0;border-radius:14px;display:flex;align-items:center;justify-content:center}
#vmix .mixadd{width:100%;min-height:44px;margin:2px 0 6px;border-style:dashed}
/* v483 modo oscuro: barra inferior plana, sin brillo (sin línea blanca arriba, sin reflejo interior ni degradado) */
html nav.tabs::before,html nav.tabs .ind::after{display:none!important;content:none!important}
:root[data-theme="dark"] nav.tabs,:root[data-theme="dark"] nav.tabs .ind{background-image:none!important;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)!important;border-color:var(--line)!important}
:root[data-theme="dark"] nav.tabs .ind{box-shadow:none!important;border-color:transparent!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.tabs,:root:not([data-theme="light"]) nav.tabs .ind{background-image:none!important;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)!important;border-color:var(--line)!important}:root:not([data-theme="light"]) nav.tabs .ind{box-shadow:none!important;border-color:transparent!important}}
/* v495: barra «Ver carrito» separada de la barra inferior; logo del negocio visible en modo oscuro */
html .vbar{bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}
:root[data-theme="dark"] #slogo img.thumb{background:#fff;border-radius:14px;padding:4px;box-sizing:border-box}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #slogo img.thumb{background:#fff;border-radius:14px;padding:4px;box-sizing:border-box}}