
/* Layout: la línea de las cartillas de Angelito. Yeso blanco, títulos negros centrados, plato a la derecha; rojo del gorro y dorado del halo como acentos. Tema único y deliberado. */
:root{
  /* Espacio de las barras del sistema (hora, batería, botones). En el navegador lo da env(); dentro de la app
     Android lo reserva la parte nativa, así que .in-app lo pone en 0 para no reservarlo dos veces. */
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --bg:#EEEEEA;--surface:#FFFFFF;--surface2:#E3E3DE;--ink:#121212;--muted:#565650;--line:#CDCDC6;
  --pri:#121212;--on-pri:#FFFFFF;--yolk:#F3B21B;--on-yolk:#1F1600;--red:#C92A21;
  --danger:#C92A21;--on-danger:#FFFFFF;--danger-soft:#F8E1DE;--warn:#7D5200;--warn-soft:#F9EDCB;--ok:#1C6B40;--ok-soft:#DCEEE2;
  --ticket:#FFFFFF;--ticket-ink:#121212;
  --display:"Londrina Solid",Impact,"Arial Narrow",sans-serif;--hand:"Patrick Hand","Trebuchet MS",sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hdr:84px;color-scheme:light;
}
.in-app{--sat:0px;--sab:0px;--sal:0px;--sar:0px}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg) url("data:image/jpeg;base64,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") repeat;color:var(--ink);font:400 15px/1.45 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:var(--sat);z-index:10;background:var(--bg)}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2.d{font-family:var(--display);font-weight:900;letter-spacing:.015em;line-height:1;text-transform:uppercase}
h2{font-size:19px;font-weight:700}h3{font-size:15px;font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--yolk);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}
.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:13px}.mono{font-family:var(--mono)}
.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}

/* Cabecera */
.top{position:sticky;top:var(--sat);z-index:9;background:var(--surface);color:var(--ink);border-bottom:2px solid var(--ink)}
.demo{background:var(--yolk);color:var(--on-yolk);font-size:12.5px;font-weight:600}
.demo .wrap{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:center;padding-block:5px}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;font-weight:600;color:inherit}
.bar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding-block:8px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;font-size:25px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.brand img{width:40px;height:40px}
.seg{display:inline-flex;background:var(--surface2);border-radius:8px;padding:3px;gap:2px}
.seg button{border:0;background:none;color:var(--ink);padding:5px 11px;border-radius:6px;font-weight:600;font-size:13.5px}
.seg button.on{background:var(--ink);color:var(--surface)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-block:8px}
.subnav{position:sticky;top:calc(var(--sat) + var(--hdr));z-index:8;background:var(--bg);border-bottom:1px solid var(--line)}
.tab{flex:0 0 auto;border:1px solid transparent;background:none;padding:7px 12px;border-radius:7px;font-weight:600;font-size:14px;color:var(--muted)}
.tab.on{background:var(--ink);color:var(--bg)}
.tab .count{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--yolk);color:var(--on-yolk);font-size:12px;text-align:center}

/* Botones y campos */
.btn{border:1px solid var(--line);background:var(--surface);padding:8px 13px;border-radius:7px;font-weight:600;min-height:38px}
.btn.pri{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.btn.yolk{background:var(--yolk);color:var(--on-yolk);border-color:var(--yolk)}
.btn.dan{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}
.btn.ghost{background:none}
.btn.big{width:100%;min-height:48px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
label.f{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13.5px;min-width:0}
input.i,select.i,textarea.i{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-weight:400;font-size:16px;min-height:42px}
.hint{font-weight:400;color:var(--muted);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);padding:7px 11px;border-radius:7px;font-weight:600;font-size:14px;min-height:38px}
.chip.on{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.pill{display:inline-block;padding:2px 8px;border-radius:5px;font-size:12px;font-weight:700;background:var(--surface2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.dan{background:var(--danger-soft);color:var(--danger)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px}
.notice{padding:10px 12px;border-radius:8px;background:var(--warn-soft);color:var(--ink);font-size:14px}
.notice.dan{background:var(--danger-soft)}.notice.ok{background:var(--ok-soft)}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);padding:6px 8px;white-space:nowrap}
td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
main{padding-block:16px 110px}

/* Cliente */
.hero{text-align:center;padding-block:20px 8px}
.hero .logo{width:128px;height:128px;display:block;margin:0 auto 10px}
.hero h1{font-size:clamp(60px,17vw,104px)}
.hero p{margin:8px auto 0;max-width:34ch;font:400 19px/1.25 var(--hand)}
.promo{display:flex;gap:12px;align-items:center;background:var(--yolk);color:var(--on-yolk);border:0;width:100%;max-width:560px;margin:16px auto 0;text-align:left;border-radius:6px;padding:10px 12px}
.promo img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none;background:#fff}
.promo b{font-family:var(--display);font-size:26px;font-weight:900;line-height:1.05;display:block;text-transform:uppercase}
.promo .small{font:400 16px/1.2 var(--hand)}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:18px 34px}
.prod{position:relative;display:flex;gap:12px;align-items:center;justify-content:space-between;text-align:left;background:none;border:0;padding:4px 0;width:100%;color:var(--ink)}
.prod .name{font-family:var(--display);font-size:33px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.prod .desc{font:400 18px/1.15 var(--hand);margin-top:3px}
.prod .prices{font:400 17px/1.2 var(--hand);text-transform:uppercase;margin-top:4px;word-spacing:.08em}
.prod img{width:112px;height:112px;object-fit:cover;flex:none;-webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent);mask-image:radial-gradient(closest-side,#000 88%,transparent)}
.plus{position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:700 20px/30px var(--body);text-align:center}
.prod.out{opacity:.55}
.rowprod{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 2px;text-align:left;font:400 19px/1.2 var(--hand);color:var(--ink)}
.take .rowprod{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:600 15px/1.3 var(--body)}
.section-h{font-family:var(--display);font-size:clamp(44px,11vw,66px);font-weight:900;text-transform:uppercase;text-align:center;line-height:1;letter-spacing:.015em;margin:34px 0 16px;scroll-margin-top:150px;text-wrap:balance}
.cfoot{text-align:center;font:400 17px/1.25 var(--hand);text-transform:uppercase;margin-top:36px;padding-top:14px;border-top:2px solid var(--ink)}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--ink);color:var(--bg);padding-bottom:var(--sab)}
.cartbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:10px}

/* Hoja y modal */
.ov{position:fixed;inset:0;z-index:20;background:rgba(8,14,10,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:560px;max-height:92%;overflow-y:auto;border-radius:14px 14px 0 0;padding:16px max(16px,var(--sar)) calc(16px + var(--sab)) max(16px,var(--sal));display:flex;flex-direction:column;gap:14px}
@media (min-width:640px){.ov{align-items:center}.sheet{border-radius:14px}}
.sheet h2.d{font-size:30px}
.qty{display:inline-flex;align-items:center;gap:10px}
.qty button{width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:20px;font-weight:700}
.qty b{min-width:26px;text-align:center;font-size:18px}
.cmd{font-family:var(--mono);font-weight:700;background:var(--ticket);color:var(--ticket-ink);padding:8px 10px;border-radius:6px;border:1px dashed #A7A28C;overflow-wrap:anywhere}

/* Tickets */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px;align-items:start}
.kcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.two-k{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.two-k{grid-template-columns:minmax(0,1fr)}}
.kcol h2{display:flex;justify-content:space-between}
.ticket{background:var(--ticket);color:var(--ticket-ink);border-radius:3px;padding:11px 12px;box-shadow:0 1px 3px #0003;border-top:5px solid var(--ink);display:flex;flex-direction:column;gap:7px}
.ticket.t-warn{border-top-color:var(--yolk)}.ticket.t-dan{border-top-color:var(--red)}
.ticket .h{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-weight:700;font-size:13.5px}
.ticket ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-weight:700;font-size:17px;line-height:1.3}
.ticket li{padding:2px 0;overflow-wrap:anywhere}
.ticket .chg{font-family:var(--mono);font-size:14px;font-weight:700;background:var(--warn-soft);padding:6px 8px;border-left:4px solid var(--yolk);overflow-wrap:anywhere}
.ticket .note{font-family:var(--mono);font-size:13px;border-top:1px dashed #A7A28C;padding-top:5px}
.ticket .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Pedidos en cuadrícula: hasta 3 columnas en pantalla grande, 2 en tablet, 1 en teléfono */
.olist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(280px,calc((100% - 28px)/3))),1fr));gap:14px;align-items:stretch}
.olist>p{grid-column:1/-1}
.order{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.order .lines{font-family:var(--mono);font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi span{font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.receipt{font-family:var(--mono);background:var(--ticket);color:var(--ticket-ink);padding:14px;border-radius:4px;font-size:13.5px;font-weight:500}
.receipt .rr{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.receipt .t{font-weight:700;border-top:1px dashed #A7A28C;margin-top:6px;padding-top:6px}
.denoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.steps{display:flex;gap:6px;flex-wrap:wrap}.steps span{padding:4px 9px;border-radius:5px;background:var(--surface2);font-size:13px;font-weight:600;color:var(--muted)}.steps span.on{background:var(--pri);color:var(--on-pri)}

/* Login */
.login{max-width:440px;margin:0 auto}
.ucards{display:grid;gap:8px}
.ucard{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:left}
.ucard.on{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pad button{height:54px;font-size:20px;font-weight:700;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.dots{display:flex;justify-content:center;gap:10px;height:24px;align-items:center}.dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--muted)}.dots i.f{background:var(--ink);border-color:var(--ink)}
.take{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:14px;align-items:start}
.onlyphone{display:none}
.take-cart{position:sticky;top:calc(var(--sat) + var(--hdr) + 64px);max-height:calc(100vh - var(--hdr) - 80px);overflow-y:auto}
.take-who{max-width:680px;margin:0 auto}
.whoq{font-size:clamp(38px,9vw,56px)}
.whogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.whogrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.whobtn{min-height:76px;padding:8px;background:var(--surface);border:2px solid var(--ink);border-radius:8px;font:900 25px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.whobtn.on{background:var(--ink);color:var(--surface)}
.whoname{font:900 34px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.rplus{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font:700 19px/32px var(--body);text-align:center}
.take .rowprod{text-align:left}
.tline{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.tprice{min-width:46px;text-align:right}
.qty.mini{gap:4px}.qty.mini button{width:34px;height:34px;font-size:17px}.qty.mini b{min-width:20px;font-size:15px}
.barcart{flex:1;min-width:0;background:none;border:0;color:inherit;text-align:left;padding:0;display:flex;flex-direction:column;gap:3px}
.barlines{display:flex;flex-direction:column;font-size:12.5px;font-weight:700;line-height:1.3}.barlines span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.barmore{font-weight:500;opacity:.8}
.barsum{font-size:14px}
main:has(.onlyphone){padding-bottom:140px}
@media (max-width:760px){.take{grid-template-columns:minmax(0,1fr)}.onlyphone{display:block}.take-cart{display:none}}
@media (max-width:640px){.top{position:static}.subnav{top:var(--sat)}body::before{background:var(--bg)}.section-h{scroll-margin-top:64px}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--sab));z-index:30;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:600;max-width:min(92vw,520px);width:max-content}
.toast.err{background:var(--danger);color:var(--on-danger)}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .16s ease-out}@keyframes up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}}
/* Pedidos: tarjeta compacta que abre el detalle */
.ocard{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .12s}
.ocard:hover,.ocard:focus-visible{border-color:var(--ink)}
.ocard .lines>span{display:block}
.ocard .lines .pill{display:inline-block;width:auto}
.emark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--yolk);color:var(--on-yolk);font-weight:800;font-size:13px;line-height:1}
.olines{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px}
.olines .ototal{border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.oacts{display:flex;flex-wrap:wrap;gap:8px}.oacts .btn{flex:1 1 150px}
.hist{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:8px}
.hist li{display:flex;gap:10px;font-size:14px}.hist li.w b{color:var(--warn)}
/* Contador en círculo de las pestañas de pedidos: amarillo = por confirmar, verde = listos */
.cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--surface2);color:var(--ink);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;vertical-align:middle}
.cnt.warn{background:var(--yolk);color:var(--on-yolk)}.cnt.ok{background:var(--ok);color:#fff}
.chip.on .cnt:not(.warn):not(.ok){background:rgba(255,255,255,.22);color:var(--on-pri)}
/* Adicionales: títulos de ronda en el detalle y líneas ya pedidas bloqueadas */
.rtitle{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.tline.done{opacity:.6}
/* Cobro por partes: platos ya pagados atenuados */
.pdone{opacity:.55}
/* Para llevar a nivel de plato */
.pill.togo{background:var(--pri);color:var(--on-pri);font-family:var(--body);vertical-align:1px}
.tgl{border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:5px;padding:1px 7px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;margin-left:2px}
.tgl.on{border-style:solid;color:var(--ink)}
/* "Lo que lleva" en mesa: columna Llevar con casilla */
.tline.wt{grid-template-columns:minmax(0,1fr) auto auto 48px}
.tchk{display:grid;place-items:center}
.tchk input{width:22px;height:22px;margin:0;accent-color:var(--pri);cursor:pointer}
.tline.thead{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:-4px}
/* Tarjeta de pedido compacta */
.ocard{padding:14px 16px 12px;border-radius:12px;gap:10px;min-height:190px}
.ohead,.ofoot{display:flex;align-items:center;gap:8px;width:100%}
.osp{flex:1}
.onum{font-family:var(--display);font-weight:900;font-size:24px;line-height:1}
.owhere{font-size:16px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orows{display:flex;flex-direction:column;gap:6px;width:100%;border-top:1px dashed var(--line);padding-top:10px}
.orow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center}
.oq{font-family:var(--mono);font-weight:700;font-size:14px}
.oname{font-size:15px;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.opt{color:var(--muted);font-weight:400}
.ofoot{font-size:13px;color:var(--muted)}
.odue{color:var(--warn)}.ototal{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.orow2{font-size:15px;line-height:1.3}
/* Ingreso: lista desplegable de perfiles */
.lsel{font-size:17px;font-weight:600;min-height:52px}
