/* Plataforma: panel del restaurante, admin, registro y página de venta.
   Layout: contenedor centrado de 980px, tarjetas por función, barra de guardar pegada abajo en formularios largos */
:root{
  --bg:#f3f1ec; --surface:#ffffff; --fg:#17150f; --muted:#6c665c; --line:#e3ded4; --chip:#ebe7de;
  --brand:#ffc21a; --brand-ink:#17150f; --asphalt:#16130f; --asphalt-ink:#f6f2ea;
  --ok:#23804a; --warn:#a86a00; --bad:#c8321e; --shadow:0 10px 30px rgba(30,20,0,.10);
  --display:"Anton","Impact","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12110e; --surface:#1c1a16; --fg:#f3efe7; --muted:#a39c90; --line:#322e27; --chip:#29261f;
  --ok:#5cc187; --warn:#e3a53a; --bad:#ff6a52; --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pwrap{max-width:980px;margin:0 auto;padding-inline:16px}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .nowrap{white-space:nowrap}
.row{display:flex;gap:10px;align-items:center} .row.wrap{flex-wrap:wrap} .row.between{justify-content:space-between} .row.tight{gap:4px} .grow{flex:1;min-width:200px}
.stack{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-bottom:14px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ph{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin:18px 0 14px;text-wrap:balance}
.h2{font-size:17px;font-weight:800;margin:0 0 10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0}
.chip{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--chip)}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bad);margin-left:4px}
.empty{padding:24px;border:1.5px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:11px 16px;background:var(--brand);color:var(--brand-ink);font-weight:800;text-decoration:none;white-space:nowrap}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.ghost.onDark{color:var(--asphalt-ink);border-color:rgba(246,242,234,.35)}
.btn.sm{padding:7px 12px;border-radius:11px;font-size:13.5px}
.btn.big{padding:15px 22px;font-size:16px;border-radius:16px}
.linkbtn{border:0;background:none;padding:6px 4px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.danger{color:var(--bad)!important}
.icon{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:800;display:grid;place-items:center}
.icon:disabled{opacity:.35;cursor:default}

label.f{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13.5px;margin-top:12px}
label.f input,label.f select,label.f textarea,.varrow input,.catname,.tbl select{font-weight:400;font-size:16px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);min-width:0}
label.f input[type=color]{padding:4px;height:46px;width:100%}
label.f input[type=file]{padding:9px;font-size:14px}
label.f small{font-weight:500}
.check{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:14.5px;margin-right:16px}
.check input{width:20px;height:20px;accent-color:var(--brand)}
textarea{resize:vertical}

.alert{border-radius:14px;padding:12px 14px;margin:14px 0;font-weight:600;font-size:14.5px;border:1px solid}
.alert.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok)}
.alert.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.alert.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}
.status{font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--chip)}
.status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.status.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.status.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* barra superior del panel */
.asbar{background:var(--brand);color:var(--brand-ink);padding:8px 16px;font-size:14px;text-align:center}
.ptop{background:var(--asphalt);color:var(--asphalt-ink);position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px)}
.ptop-in{display:flex;align-items:center;gap:10px;padding-block:12px}
.ptop .btn.ghost{color:var(--asphalt-ink);border-color:rgba(246,242,234,.3);margin-left:auto}
.ptop .linkbtn{color:rgba(246,242,234,.75)}
.plogo{font-family:var(--display);font-size:24px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:inherit}
.plogo small{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand);margin-left:4px}
.ptop .plogo{color:var(--brand)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 14px;text-decoration:none;font-weight:700;color:rgba(246,242,234,.7);border-bottom:3px solid transparent}
.tabs a[aria-current=page]{color:var(--asphalt-ink);border-bottom-color:var(--brand)}
.pmain{padding-bottom:110px}

/* inicio */
.linkcard .bigurl{font-size:clamp(18px,4.5vw,24px);font-weight:800;margin:4px 0 12px;overflow-wrap:anywhere}
.qrcard{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
#qr{background:#fff;padding:8px;border-radius:12px;line-height:0}
#qr img,#qr canvas{width:128px;height:128px}
.meter{height:8px;background:var(--chip);border-radius:99px;overflow:hidden;margin:4px 0 10px}
.meter span{display:block;height:100%;background:var(--brand)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.steps a{display:flex;gap:10px;align-items:center;padding:9px 6px;border-radius:10px;text-decoration:none;font-weight:600}
.steps a:hover{background:var(--chip)}
.steps .tick{width:24px;height:24px;border-radius:99px;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none}
.steps li.done a{color:var(--muted);text-decoration:line-through}
.steps li.done .tick{background:var(--ok);border-color:var(--ok);color:#fff;text-decoration:none}
.kv{display:grid;gap:8px;margin:0 0 12px}
.kv div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:700;text-align:right}

/* imágenes */
.imgprev{border-radius:16px;background:var(--chip);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-weight:700;border:1px dashed var(--line)}
.imgprev img{width:100%;height:100%;object-fit:cover}
.imgprev.sq{width:150px;max-width:100%;aspect-ratio:1}
.imgprev.wide{width:100%;aspect-ratio:16/9}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.swatch{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 8px;display:flex;gap:0;align-items:center}
.swatch span{width:20px;height:20px;display:block}
.swatch span:first-child{border-radius:6px 0 0 6px} .swatch span:nth-child(2){border-radius:0 6px 6px 0}
.swatch small{margin-left:8px;font-weight:700}
.savebar{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%);z-index:5}

/* menú en el panel */
.addcat{align-items:flex-end;margin-bottom:14px}
.catcard{margin-bottom:14px;padding:12px}
.cathead{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rename{display:flex;gap:6px;align-items:center;flex:1;min-width:200px}
.catname{flex:1;font-weight:800!important;font-size:17px!important;background:transparent!important;border-color:transparent!important;padding:8px!important}
.catname:focus{border-color:var(--line)!important;background:var(--bg)!important}
.savename{opacity:0;pointer-events:none}
.rename:focus-within .savename{opacity:1;pointer-events:auto}
.prow{display:flex;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line)}
.prow.off .pthumb,.prow.off .ptxt{opacity:.5}
.pthumb{width:58px;height:58px;border-radius:12px;overflow:hidden;flex:none;background:var(--chip);display:grid;place-items:center;font-size:10.5px;color:var(--muted);text-decoration:none;text-align:center}
.pthumb img{width:100%;height:100%;object-fit:cover}
.ptxt{flex:1;min-width:0;text-decoration:none;display:flex;flex-direction:column}
.ptxt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptxt small{color:var(--muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toggle{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px}
.toggle small{font-size:11.5px;color:var(--muted);font-weight:600}
.switch{width:46px;height:28px;border-radius:99px;border:0;background:var(--line);position:relative;padding:0}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch[aria-checked=true]{background:var(--ok)}
.switch[aria-checked=true] span{left:21px}
.addprod{display:block;padding:12px 4px 4px;font-weight:800;text-decoration:none;color:var(--fg)}
.addprod:hover{text-decoration:underline}
@media (max-width:560px){.pmove{display:none}}
.back{display:inline-block;margin-top:16px;font-weight:700;text-decoration:none;color:var(--muted)}
.prodgrid{display:grid;grid-template-columns:170px 1fr;gap:18px}
@media (max-width:620px){.prodgrid{grid-template-columns:1fr}}
.varrow{display:grid;grid-template-columns:1fr 130px 34px;gap:8px;margin-top:8px;align-items:center}
.delform{margin:4px 0 30px}

/* admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat small{color:var(--muted);font-weight:700}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:32px;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;padding:0}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tbl select{font-size:14px;padding:6px 8px}

/* registro / login */
.auth .authbox{max-width:440px;margin:0 auto;padding:40px 16px 60px}
.auth .plogo{color:var(--fg)}
.slugbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.slugbox input{border:0!important;flex:1;min-width:0;background:transparent!important}
.slugbox .pre,.slugbox .post{padding:0 10px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
.pausedlogo{width:96px;height:96px;border-radius:24px;object-fit:cover}

/* página de venta */
.landing .lnav{display:flex;align-items:center;justify-content:space-between;padding-block:14px;position:relative;z-index:2;color:var(--asphalt-ink)}
.landing .lnav nav{display:flex;gap:16px;align-items:center}
.landing .lnav nav a:not(.btn){text-decoration:none;font-weight:700;color:rgba(246,242,234,.8)}
.landing .lnav .plogo{color:var(--brand)}
.landing{background:var(--bg)}
.lhero{background:var(--asphalt);color:var(--asphalt-ink);position:relative;margin-top:-1px}
.lhero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding-block:30px 46px}
@media (max-width:820px){.lhero-in{grid-template-columns:1fr}}
.lhero .eyebrow{color:var(--brand)}
.lh1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,68px);line-height:.98;text-transform:uppercase;margin:10px 0 16px;text-wrap:balance}
.lh1 span{color:var(--brand)}
.lead{font-size:18px;max-width:46ch;color:rgba(246,242,234,.85);margin:0 0 20px}
.dim{color:rgba(246,242,234,.6)}
.phone{justify-self:center;width:300px;max-width:100%;aspect-ratio:9/18.5;border-radius:42px;background:#000;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 2px #333}
.phone iframe{width:100%;height:100%;border:0;border-radius:33px;background:#fff}
.lane{height:8px;background:repeating-linear-gradient(90deg,var(--brand) 0 40px,transparent 40px 70px)}
.lsec{padding-block:44px 10px}
.lh2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,44px);text-transform:uppercase;line-height:1;margin:0 0 20px;text-wrap:balance}
.howto{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.howto li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.howto li::before{content:counter(s);font-family:var(--display);font-size:34px;line-height:1;color:var(--brand);-webkit-text-stroke:1px var(--fg)}
.howto b{font-size:17px} .howto span{color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.feats b{font-size:16.5px} .feats p{margin:6px 0 0;color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;max-width:720px}
.plan{display:flex;flex-direction:column;gap:10px;padding:22px}
.plan.featured{border:2px solid var(--brand);box-shadow:var(--shadow)}
.pname{font-size:18px}
.pprice{font-family:var(--display);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.pprice small{font-family:var(--body);font-size:15px;color:var(--muted);margin-left:4px}
.plan ul{margin:0;padding-left:18px;color:var(--muted);display:flex;flex-direction:column;gap:4px;flex:1}
.faq{display:flex;flex-direction:column;gap:8px;max-width:720px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.faq summary{font-weight:800;cursor:pointer}
.faq p{margin:8px 0 0;color:var(--muted)}
.lcta{background:var(--asphalt);color:var(--asphalt-ink);padding-block:50px;margin-top:50px}
.lfoot{padding-block:20px 40px}
.landing .lnav{background:var(--asphalt);max-width:none;padding-inline:max(16px,calc((100% - 948px)/2))}