:root{
  --bg:#f6f3ee;        /* papel */
  --ink:#1d1d1b;
  --muted:#6a665f;
  --line:#ddd7cd;
  --card:#ffffff;
  --soft:#ece8e1;
  --acc:#1d1d1b;       /* botones principales */
  --acc-ink:#f6f3ee;
  --sale:#b23a2e;
  --go:#2f6b45;
  --bad:#a63d32;
  --warn:#a8691a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181816; --ink:#eeebe5; --muted:#a6a199; --line:#36352f; --card:#22221f; --soft:#2b2a26; --acc:#eeebe5; --acc-ink:#181816; --sale:#e48a7d; --go:#8fc49a; --bad:#e08a7f;
  }
}
:root[data-theme="dark"]{ --bg:#181816; --ink:#eeebe5; --muted:#a6a199; --line:#36352f; --card:#22221f; --soft:#2b2a26; --acc:#eeebe5; --acc-ink:#181816; --sale:#e48a7d; --go:#8fc49a; --bad:#e08a7f; }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 100;font-size:16.5px;line-height:1.55}
a{color:inherit}
:focus-visible{outline:3px solid #c9a46a;outline-offset:2px}
.muted{color:var(--muted)}
h1,h2,h3,.mark,.serif{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.01em}

.modo{background:#e9d9b8;color:#1d1d1b;font-size:14px;text-align:center;padding:7px 16px}
.modo a{font-weight:700;color:#1d1d1b}

/* Encabezado */
header.top{position:sticky;top:0;z-index:8;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .in{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:20px}
.mark{font-size:24px;text-decoration:none;line-height:1}
header.top .links{display:flex;gap:20px;margin-left:auto;font-size:15px}
header.top .links a{text-decoration:none;opacity:.8}
header.top .links a:hover{opacity:1}
.cartb{position:relative;background:none;border:0;color:var(--ink);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.cartb:hover{background:var(--soft)}
.cartb svg{width:24px;height:24px}
.cn{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--acc);color:var(--acc-ink);font-size:12px;font-weight:700;display:grid;place-items:center}
/* Botón de filtros del encabezado y su pie: solo en el celular */
.filtb,.optfoot{display:none}
@media (max-width:620px){header.top .links{display:none} header.top .links.keep{display:flex;margin-left:auto} .filtb{display:grid;margin-left:auto} header.top .in{gap:6px}}

.hero{padding:56px 16px 40px}
.hero .in{max-width:1240px;margin:0 auto}
.hero h1{margin:0;font-size:clamp(44px,11vw,128px);line-height:.95;overflow-wrap:anywhere}
.hero p{max-width:560px;margin:14px 0 0;font-size:19px;color:var(--muted)}
.hero .btn{margin-top:24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:650;text-decoration:none;border:1.5px solid transparent;font-size:16px;cursor:pointer;font-family:inherit;line-height:1.2}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.dark{background:var(--acc);color:var(--acc-ink)}
.btn.line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.wa{background:#25a65a;color:#fff}
.btn.mp{background:#009ee3;color:#fff}
.btn.ghost{border-color:#f6f3ee;color:#f6f3ee;background:transparent}
.btn.amber{background:#e9d9b8;color:#1d1d1b}
.btn svg{width:18px;height:18px;flex:none}
.sbtn{font-family:inherit;font-size:14px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.sbtn:hover{border-color:var(--ink)}
.sbtn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}

main{max-width:1240px;margin:0 auto;padding:0 16px}
section{padding:24px 0 48px}
h2{font-size:clamp(28px,4vw,42px);line-height:1.05;margin:0 0 10px}
.lede{color:var(--muted);max-width:620px;margin:0 0 22px}
.shead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}

/* Filtros */
.toolbar{position:sticky;top:69px;z-index:4;background:var(--bg);padding:10px 0 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.chip{font-family:inherit;font-size:15px;padding:7px 15px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.opts{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.opts input,.opts select{padding:8px 10px;font-size:15px;background:var(--card);border-radius:999px}
.opts #q{flex:1 1 180px}
.opts #pMin,.opts #pMax{width:110px}

/* Grilla de productos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:26px 18px}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:20px 12px}}
a.prod{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ph{position:relative;aspect-ratio:3/4;background:var(--soft);overflow:hidden;border-radius:6px}
.ph img,.ph svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
a.prod:hover .ph img{transform:scale(1.03)}
a.prod.off .ph img,a.prod.off .ph svg{opacity:.55}
.badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:3px;background:var(--card);color:var(--ink);line-height:1.3}
.badge.rojo{background:var(--sale);color:#fff}
.badge.gris{background:#5f5c56;color:#fff}
.badge.amber{background:#e9d9b8;color:#1d1d1b}
.prod .body{padding:10px 2px 0;display:grid;gap:3px}
.prod h3{margin:0;font-family:"Archivo",system-ui,sans-serif;font-weight:550;font-size:16px;line-height:1.3}
.prod .row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-weight:700;font-size:17px}
.antes{color:var(--muted);font-size:14px}
.sw{display:flex;gap:4px;margin-top:3px}
.sw i{width:14px;height:14px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.2)}
.empty{grid-column:1/-1;background:var(--card);border-radius:6px;padding:32px;display:grid;gap:8px;justify-items:start}
.sk{border-radius:6px;aspect-ratio:3/4.4;background:var(--soft);animation:pulso 1.2s ease-in-out infinite alternate}
@keyframes pulso{from{opacity:.55}to{opacity:1}}

/* Cómo comprar */
.steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px}
.steps li{counter-increment:s;background:var(--card);border-radius:6px;padding:18px 18px 18px 62px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-weight:700;font-size:15px}
.steps b{display:block}
.steps span{color:var(--muted);font-size:15px}

footer{border-top:1px solid var(--line);padding:28px 16px;font-size:15px;color:var(--muted)}
footer .in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}

/* Diálogos */
dialog{border:0;padding:0;background:var(--bg);color:var(--ink);width:calc(100% - 24px);max-width:1100px;max-height:calc(100% - 24px);border-radius:10px;overflow:auto}
dialog::backdrop{background:rgba(20,18,15,.6)}
.dwrap{position:relative}
.x{position:absolute;top:10px;right:10px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.dt{display:grid;grid-template-columns:1.15fr 1fr}
@media (max-width:860px){.dt{grid-template-columns:1fr}}
.gal{background:var(--soft);min-width:0}
.gal .main{position:relative;aspect-ratio:3/4;max-height:82vh;margin:0 auto}
.gal .main img{width:100%;height:100%;object-fit:cover;display:block}
.gal .main svg{width:100%;height:100%;display:block}
.navb{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:26px;cursor:pointer;line-height:1}
.navb.prev{left:10px}.navb.next{right:10px}
.cnt{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:3px 9px;border-radius:3px}
.thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}
.thumbs button{flex:0 0 60px;height:80px;padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;cursor:pointer;background:var(--card);opacity:.7}
.thumbs button[aria-current="true"]{border-color:var(--ink);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ficha{padding:30px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ficha .badges{position:static}
.brand{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:650}
.dtitle{margin:-6px 0 0;font-size:clamp(28px,3.4vw,40px);line-height:1.05}
.dprice{margin:0;display:flex;gap:10px;align-items:baseline}
.dprice .price{font-size:26px}
.dprice .antes{font-size:17px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
legend{font-size:14px;color:var(--muted);padding:0;margin-bottom:8px}
legend b{color:var(--ink);font-weight:600}
legend .link{margin-left:10px}
.colores,.talles{display:flex;gap:8px;flex-wrap:wrap}
.col{width:38px;height:38px;border-radius:50%;background:var(--c);border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--line);cursor:pointer;position:relative;padding:0}
.col[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.col.sin::after{content:"";position:absolute;inset:-2px;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--ink) calc(50% - 1px),var(--ink) calc(50% + 1px),transparent calc(50% + 1px));border-radius:50%;opacity:.55}
.tal{min-width:52px;height:44px;padding:0 12px;border-radius:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.tal[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tal:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.poco{color:var(--warn);font-weight:600;font-size:14.5px;margin:0}
.aviso{color:var(--bad);font-weight:600;margin:0}
.desc{margin:4px 0;white-space:pre-line;color:var(--muted)}
.dctas{display:grid;gap:8px}
.ficha > .link{align-self:flex-start}
@media (max-width:520px){.ficha{padding:22px 16px}}
#guia{max-width:560px}
.gwrap{padding:22px;display:grid;gap:12px}
.gwrap h3{margin:0;font-size:24px}
.gwrap pre{font-family:inherit;white-space:pre-wrap;margin:0;background:var(--card);padding:14px;border-radius:6px;overflow-x:auto}
.gwrap .sbtn{justify-self:end}

/* Carrito lateral */
dialog.drawer{margin:0 0 0 auto;height:100%;max-height:none;width:min(440px,100%);max-width:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
dialog.drawer:not([open]){display:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.dhead h2{font-size:26px;margin:0}
.dhead .x{position:static;background:var(--soft);color:var(--ink)}
.dbody{flex:1;overflow:auto;padding:14px 18px;display:grid;gap:12px;align-content:start}
.dfoot{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:8px}
.dfoot:empty{display:none}
.tot{display:flex;justify-content:space-between;align-items:baseline;font-size:18px}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:start}
.cimg{display:block;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--soft)}
.cimg img,.cimg svg{width:100%;height:100%;object-fit:cover;display:block}
.ctx{display:grid;gap:3px;font-size:15px}
.ctx a{text-decoration:none}
.ctx .muted{font-size:14px}
.ctx .poco{font-size:13px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;justify-self:start;margin-top:4px}
.qty button{width:34px;height:32px;border:0;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{min-width:22px;text-align:center;font-weight:600}
.cpr{display:grid;justify-items:end;gap:6px}
.cvacio{display:grid;gap:10px;justify-items:start;padding:20px 0}
.note{background:var(--card);border-left:4px solid #c9a46a;padding:12px 16px;border-radius:4px;font-size:15px}
.note.bad{border-color:var(--bad)}
.note.ok{border-color:var(--go)}

/* Checkout */
.ck{max-width:1080px;margin:0 auto;padding:28px 16px 70px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:860px){.ck{grid-template-columns:1fr}}
.ck h1{font-size:clamp(30px,4vw,42px);margin:0 0 6px}
.ck form{display:grid;gap:16px}
.box{background:var(--card);border-radius:8px;padding:20px;display:grid;gap:14px}
.box h2{font-size:22px;margin:0}
.res{position:sticky;top:90px}
@media (max-width:860px){.res{position:static;order:-1}}
.rl{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:15px}
.rl .cimg{width:54px}
.rl small{display:block;color:var(--muted)}
.rt{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.rt div{display:flex;justify-content:space-between;gap:10px}
.rt .grande{font-size:20px;font-weight:700}
.envs{display:grid;gap:8px}
.env{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;color:var(--ink);font-size:15.5px}
.env:has(input:checked){border-color:var(--ink)}
.env input{width:20px;height:20px;margin:0}
.env small{display:block;color:var(--muted);font-size:13.5px}
.seguro{font-size:13.5px;color:var(--muted);margin:0}

/* Gracias */
.gr{max-width:640px;margin:0 auto;padding:48px 16px 80px;display:grid;gap:18px}
.gr h1{font-size:clamp(32px,5vw,48px);margin:0;line-height:1.05}
.gr .ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:32px;color:#fff;background:var(--muted)}
.gr .ico.ok{background:var(--go)}
.gr .ico.bad{background:var(--bad)}
.gr .ico.wait{background:var(--warn)}
.spin{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--ink);animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Términos y condiciones */
.legal{max-width:760px;margin:0 auto;padding:32px 16px 64px}
.legal h1{font-size:clamp(30px,5vw,44px);line-height:1.05;margin:0 0 14px}
.legal h2{font-size:22px;margin:28px 0 6px}
.legal p,.legal ul{margin:0 0 10px;color:var(--muted)}
.legal ol{margin:0 0 10px;color:var(--muted)}
.legal hr{border:0;border-top:1px solid var(--line,#ddd);margin:24px 0}
.acepta{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;line-height:1.35}
.acepta input{width:auto;flex:none;margin-top:2px}

/* Formularios */
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:620px){.f3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
label{font-size:14px;color:var(--muted);display:grid;gap:5px;align-content:start}
input,select,textarea{font-family:inherit;font-size:16px;padding:11px 12px;border-radius:6px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);min-width:0}
textarea{resize:vertical}
input[type="color"]{padding:4px;height:44px;width:100%;cursor:pointer}
form small{color:var(--muted);font-size:13.5px}
.err{color:var(--bad);font-size:14.5px;margin:0}
.ok{color:var(--go);font-size:14.5px;margin:0}

/* Celular: filtros en una fila deslizable y sin barra fija, diálogos a pantalla completa */
@media (max-width:620px){
  .toolbar{position:static}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .opts>*{flex:1 1 40%}
  .opts #q{flex-basis:100%}
  .opts #pMin,.opts #pMax{width:auto}
  /* Filtros plegados: se abren con el botón del encabezado */
  .toolbar{padding:4px 0 10px;margin-bottom:16px}
  .opts{display:none}
  .toolbar.abierta .opts{display:flex}
  .optfoot{display:flex;flex:1 1 100%;justify-content:space-between;align-items:center;gap:12px}
  .optfoot .btn{padding:10px 18px}
  /* Portada: el nombre ya está en el encabezado; queda solo la bajada si hay */
  .hero h1,.hero .btn{display:none}
  /* El nombre de la tienda es lo más grande del encabezado: los títulos van por debajo */
  header.top .mark{font-size:32px}
  h2{font-size:24px}
  .ck h1,.gr h1{font-size:28px}
  footer .in{flex-direction:column}
  .hero{padding:18px 16px 0}
  .hero p{margin:0;font-size:17px}
  .hero:not(:has(#bajada:not([hidden]))){display:none}
  #catalogo{padding-top:18px;scroll-margin-top:68px}
  #detalle{width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0}
  .gal .main{max-height:none}
}

/* ---------- Panel ---------- */
.atop{background:#1d1d1b;color:#f6f3ee;padding:12px 16px;position:sticky;top:0;z-index:6}
.atop .in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.atop .mark{font-size:22px}
.atop .mark small{font-family:"Archivo",system-ui,sans-serif;font-size:14px;opacity:.7;margin-left:10px;letter-spacing:0}
.atop .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.atop .btn{padding:9px 14px;font-size:15px}
.atop .quien{font-size:14px;color:#bdbbb4}
.atop .link{color:#bdbbb4}
.tabs{max-width:1240px;margin:0 auto;padding:14px 16px 0;display:flex;gap:6px;flex-wrap:wrap}
.tab{font-family:inherit;font-size:15px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.tab[aria-selected="true"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tab .n{margin-left:6px;background:var(--sale);color:#fff;border-radius:10px;padding:0 7px;font-size:12.5px}
.adm{max-width:1240px;margin:0 auto;padding:18px 16px 90px;display:grid;gap:20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--card);padding:14px 16px;border-radius:8px}
.kpi b{display:block;font-size:28px;font-weight:750;line-height:1.1}
.kpi span{color:var(--muted);font-size:14px}
.panel{background:var(--card);border-radius:8px;padding:20px;min-width:0}
.panel h2{font-size:26px;margin:0}
.panel > p{margin:6px 0 14px;color:var(--muted);font-size:15px}
.abar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.abar h2{flex:1 1 200px}
.abar input,.abar select{padding:8px 10px;font-size:15px;background:var(--card)}
.prow{display:grid;grid-template-columns:60px minmax(0,1fr) 120px 110px auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.pthumb{width:60px;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--soft);cursor:pointer;border:0;padding:0}
.pthumb img,.pthumb svg{width:100%;height:100%;object-fit:cover;display:block}
.pt b{display:block;line-height:1.25}
.pt span{color:var(--muted);font-size:14px;display:block}
.pt .warn{color:var(--bad);font-size:13px}
.pprice{font-weight:700}
.pprice s{display:block;color:var(--muted);font-weight:400;font-size:13px}
.pstock{font-size:14px}
.pacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sbtn.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.sbtn.star[aria-pressed="true"]{background:#e9d9b8;border-color:#e9d9b8;color:#1d1d1b}
@media (max-width:760px){
  .prow{grid-template-columns:60px minmax(0,1fr);row-gap:8px}
  .pprice,.pstock,.pacts{grid-column:2}
  .pacts{justify-content:flex-start}
}
.orow{display:grid;grid-template-columns:110px minmax(0,1fr) 110px 130px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.orow:hover{background:var(--bg)}
.orow b{display:block}
.orow span{color:var(--muted);font-size:14px}
.orow .monto{font-weight:700}
@media (max-width:760px){.orow{grid-template-columns:minmax(0,1fr) auto}.orow > :nth-child(2){grid-column:1/-1;grid-row:2}}
.est{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap}
.est[data-e="pagado"],.est[data-e="preparando"]{background:#dcebd9;color:#1f4d2e}
.est[data-e="enviado"],.est[data-e="entregado"]{background:#dde6ee;color:#23415c}
.est[data-e="revisar"]{background:var(--sale);color:#fff}
.est[data-e="pendiente"]{background:#f1e3c4;color:#5c3f0b}
.alerta{background:var(--sale);color:#fff;border-radius:8px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.alerta .sbtn{border-color:#fff;color:#fff}
.catrow,.envrow{display:grid;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.catrow{grid-template-columns:minmax(0,1fr) 140px 120px auto}
.envrow{grid-template-columns:minmax(0,1fr) 110px 150px 90px auto}
.catrow input,.catrow select,.envrow input{padding:8px 10px;font-size:15px;background:var(--card)}
.catrow span{font-size:14px}
.envrow .chk{font-size:14px}
@media (max-width:760px){.catrow,.envrow{grid-template-columns:1fr 1fr}}
.backup{display:flex;gap:8px;flex-wrap:wrap}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:#1d1d1b}
.login form{background:var(--bg);border-radius:10px;padding:28px;width:100%;max-width:400px;display:grid;gap:14px}
.login .mark{font-size:30px}
.login h1{margin:0;font-family:"Archivo",system-ui,sans-serif;font-size:17px;font-weight:600;color:var(--muted)}
.login input{background:var(--card)}

/* Editor de producto */
#editor{max-width:900px}
#pedido{max-width:760px}
.ef{padding:22px 22px 8px;display:grid;gap:14px}
.ef h3{margin:0;font-size:28px}
.ef input,.ef select,.ef textarea{background:var(--card)}
.chk{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink)}
.chk input{width:20px;height:20px;margin:0}
.chk.abajo{align-self:end;padding-bottom:12px}
.drop{border:2px dashed var(--line);border-radius:8px;padding:20px;text-align:center;color:var(--muted);cursor:pointer;display:grid;gap:4px;background:var(--card)}
.drop b{color:var(--ink)}
.drop.over{border-color:#c9a46a;background:rgba(201,164,106,.12)}
.drop small{font-size:13.5px}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.ft{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:#222}
.ft img{width:100%;height:100%;object-fit:cover;display:block}
.ft .badge{position:absolute;top:6px;left:6px;font-size:11px}
.ft .tb{position:absolute;bottom:5px;right:5px;left:5px;display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.ft .tb button{width:30px;height:30px;border:0;border-radius:3px;background:rgba(0,0,0,.72);color:#fff;cursor:pointer;font-size:14px}
.tchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tchips .sbtn{padding:6px 11px}
.tchips input{width:110px;padding:7px 10px;font-size:14px}
.cchip{display:inline-flex;gap:6px;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:4px 6px 4px 4px;font-size:14px}
.cchip i{width:22px;height:22px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.2)}
.cchip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 4px}
.cadd{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cadd input[type="color"]{width:44px;height:38px}
.cadd input:not([type]){width:130px;padding:7px 10px;font-size:14px}
.vgrid{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.vgrid table{border-collapse:collapse;width:100%;font-size:14px}
.vgrid th,.vgrid td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.vgrid th:first-child,.vgrid td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
.vgrid thead th{font-weight:600;color:var(--muted)}
.vgrid thead i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.2);margin-right:5px;vertical-align:-1px}
.vgrid input{width:64px;padding:6px;font-size:15px;text-align:center}
.vgrid input.cero{color:var(--bad)}
.vgrid input.cambio{border-color:#c9a46a}
.efoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;position:sticky;bottom:0;background:var(--bg);padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.efoot .del{margin-right:auto;color:var(--bad);border-color:var(--bad)}
.efoot .btn{padding:9px 18px}
.efoot .estado{font-size:14px;color:var(--muted)}
.efoot .estado:empty{display:none}
.pd{padding:22px;display:grid;gap:16px}
.pd h3{margin:0;font-size:26px}
.pd dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px 14px;margin:0;font-size:15px}
.pd dt{color:var(--muted)}
.pd dd{margin:0;overflow-wrap:anywhere}
.pd table{width:100%;border-collapse:collapse;font-size:15px}
.pd td,.pd th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:left}
.pd td:last-child,.pd th:last-child{text-align:right}
.pd .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:520px){.pd dl{grid-template-columns:1fr}.pd dt{margin-top:6px}}
@media (max-width:620px){
  .atop{position:static}
  .atop .acts{width:100%}
  .atop .acts .btn{flex:1}
  #editor,#pedido{width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0}
  .ef{padding:18px 16px 8px}
  .efoot{padding:12px 16px}
  .efoot .estado{flex-basis:100%;order:-1}
}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1d1d1b;color:#f6f3ee;padding:11px 18px;border-radius:6px;z-index:50;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:calc(100% - 32px)}