:root{--bg:#f6f5f2;--card:#fff;--tx:#1d1d1b;--mut:#77756f;--ac:#d9480f;--bd:#e4e1d9;--ok:#2b8a3e;--bad:#c92a2a}
@media(prefers-color-scheme:dark){:root{--bg:#161614;--card:#1f1f1c;--tx:#eceae4;--mut:#9a978f;--bd:#34332e}}
*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;background:var(--bg);color:var(--tx);display:flex;min-height:100vh}
nav{width:190px;background:var(--card);border-right:1px solid var(--bd);padding:16px 10px;position:sticky;top:0;height:100vh}
nav h1{font-size:18px;margin:0 8px 16px;color:var(--ac)}
nav a{display:block;padding:9px 12px;border-radius:8px;color:var(--tx);text-decoration:none;cursor:pointer;margin-bottom:2px}
nav a.on{background:var(--ac);color:#fff}
main{flex:1;padding:24px;max-width:1100px}
h2{margin:0 0 16px;display:flex;justify-content:space-between;align-items:center}
button,input,select{font:inherit;color:inherit}
button{background:var(--ac);color:#fff;border:0;padding:8px 14px;border-radius:8px;cursor:pointer}
button.sec{background:transparent;color:var(--tx);border:1px solid var(--bd)}
button.del{background:transparent;color:var(--bad);padding:4px 8px}
input,select{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px;width:100%}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--bd)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bd)}th{font-size:12px;text-transform:uppercase;color:var(--mut)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}tr.click{cursor:pointer}tr.click:hover{background:var(--bg)}
.low{color:var(--bad);font-weight:600}.good{color:var(--ok);font-weight:600}.mut{color:var(--mut)}
dialog{border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);padding:20px;width:min(560px,94vw)}
dialog::backdrop{background:#0006}
.f{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.f label{font-size:12px;color:var(--mut);display:block;margin-bottom:3px}.f .w{grid-column:1/-1}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.line{display:grid;grid-template-columns:1fr 90px 90px 30px;gap:6px;margin-bottom:6px}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.tabs button{background:var(--card);color:var(--tx);border:1px solid var(--bd)}.tabs button.on{background:var(--ac);color:#fff}
#plano{position:relative;height:520px;background:var(--card);border:1px dashed var(--bd);border-radius:10px;background-image:radial-gradient(var(--bd) 1px,transparent 1px);background-size:20px 20px;overflow:hidden}
.mesa{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff3e8;color:#1d1d1b;border:2px solid var(--ac);cursor:grab;user-select:none;touch-action:none;font-size:13px}
.mesa.red{border-radius:50%}.mesa.t-rect,.mesa.t-circulo,.mesa.t-linea{background:#cbd5e1;border:0;color:#1d1d1b}
.mesa.t-texto{background:transparent;border:1px dashed var(--bd);color:var(--tx);font-size:15px}.mesa.t-texto.sel{border-color:var(--ac)}
.hnd{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:var(--ac);border-radius:3px;cursor:nwse-resize;z-index:2}.mesa.sel{box-shadow:0 0 0 3px #d9480f55}.mesa small{color:#77756f}
@media(max-width:700px){body{flex-direction:column}nav{width:100%;height:auto;position:static;display:flex;overflow-x:auto}nav h1{display:none}}

/* --- POS --- */
.mesa.pl{cursor:pointer}.mesa.ocu{background:#ffd8a8}.mesa.cta{background:#b2f2bb;border-color:#2b8a3e}.mesa.pl.t-texto,.mesa.pl.t-rect,.mesa.pl.t-linea,.mesa.pl.t-circulo{cursor:default}
#plano.ro{height:auto;overflow:hidden}.pwrap{position:relative;transform-origin:0 0}
.pedgrid{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}@media(max-width:900px){.pedgrid{grid-template-columns:1fr}}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.prods button{background:var(--card);color:var(--tx);border:1px solid var(--bd);padding:14px 8px;text-align:center;line-height:1.3}.prods button small{display:block;color:var(--mut)}
.prods button:active{background:var(--ac);color:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.chips button{background:var(--card);color:var(--tx);border:1px solid var(--bd);padding:7px 12px}.chips button.on{background:var(--ac);color:#fff}
.cuenta{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;position:sticky;top:12px}
.it{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bd);cursor:pointer}
.it .q{display:flex;align-items:center;gap:4px}.it .q button{padding:2px 9px;background:var(--bg);color:var(--tx);border:1px solid var(--bd)}
.it.nuevo{background:#fff9db22}.it.anulado{opacity:.4;text-decoration:line-through}.badge{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--bd);color:var(--tx)}.badge.ok{background:#2b8a3e;color:#fff}.badge.nw{background:var(--ac);color:#fff}
.tot{display:flex;justify-content:space-between;padding:3px 0}.tot.big{font-size:20px;font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.acts .main{flex:1 1 100%;padding:12px;font-size:16px}
.kds{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.kc{background:var(--card);border:2px solid var(--bd);border-radius:12px;padding:12px}.kc.w1{border-color:#f59f00}.kc.w2{border-color:#e03131}
.kc h3{margin:0 0 6px;display:flex;justify-content:space-between}.kc .nt{color:var(--ac);font-weight:600;margin-left:14px}.kc li{margin:4px 0;font-size:17px}.kc li.x{text-decoration:line-through;opacity:.5}
.login{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px}
.login .us{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px}.login .us button{padding:16px 22px;font-size:17px}
.pad{display:grid;grid-template-columns:repeat(3,70px);gap:8px}.pad button{padding:16px;font-size:20px;background:var(--card);color:var(--tx);border:1px solid var(--bd)}
.pin{font-size:28px;letter-spacing:10px;min-height:40px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:10px;z-index:99;max-width:90vw;display:none}#toast.bad{background:#c92a2a}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px}.card h3{margin:0 0 8px}
.kpi{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}.kpi div{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 16px;min-width:140px}.kpi b{display:block;font-size:22px}.kpi span{color:var(--mut);font-size:12px}
.medios{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0}.medios button{padding:14px}
.env{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}.env.w{color:#e67700;font-weight:600}.env.r{color:#e03131;font-weight:700}.env.ok{color:var(--ok)}
.rline{display:grid;grid-template-columns:1fr 90px 34px 90px 28px;gap:6px;margin-bottom:6px;align-items:center}.rline .c{text-align:right;font-variant-numeric:tabular-nums}@media(max-width:600px){.rline{grid-template-columns:1fr 80px 30px 70px 24px}}
.chk{display:flex;gap:8px;flex-wrap:wrap}.chk label{display:flex;align-items:center;gap:6px;border:1px solid var(--bd);border-radius:8px;padding:7px 12px;cursor:pointer;margin:0;font-size:14px;color:var(--tx)}.chk input{width:auto}
.mline{display:grid;grid-template-columns:1fr 110px 80px 44px 28px;gap:6px;margin-bottom:6px;align-items:center}
.opt{display:flex;justify-content:space-between;width:100%;margin-bottom:6px;background:var(--bg);color:var(--tx);border:1px solid var(--bd);padding:12px}.opt.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.optc{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bd)}.optc .q{display:flex;gap:8px;align-items:center}.optc .q button{padding:4px 12px}.optc .q button:disabled{opacity:.35}
.lstp{max-height:170px;overflow:auto;border:1px solid var(--bd);border-radius:8px;padding:6px}.lstp label{display:flex;gap:8px;align-items:center;padding:3px 4px;margin:0;color:var(--tx);font-size:14px}.lstp input{width:auto}
nav .who{margin:14px 8px 0;font-size:12px;color:var(--mut)}nav .who a{padding:4px 0;color:var(--ac)}

/* --- impresión desde el navegador (sin iframes, compatible con CSP) --- */
#print-area { display: none; }
@media print {
  body.imprimiendo > *:not(#print-area) { display: none !important; }
  body.imprimiendo #print-area { display: block; font: 13px monospace; width: 72mm; white-space: pre-wrap; color: #000; background: #fff; }
}

/* --- pantallas de acceso --- */
.auth{position:fixed;inset:0;background:var(--bg);z-index:60;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px}
.auth .caja{width:min(420px,100%);background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:22px;margin-top:5vh}
.auth h1{margin:0 0 4px;color:var(--ac);font-size:24px}.auth p{color:var(--mut);margin:4px 0 14px}
.auth label{display:block;font-size:12px;color:var(--mut);margin:10px 0 3px}.auth .lnk{background:none;border:0;color:var(--ac);padding:6px 0;cursor:pointer;text-decoration:underline;font-size:14px}
.auth .btn{width:100%;padding:12px;margin-top:14px}.auth .msg{font-size:13px;margin-top:10px;color:var(--bad)}.auth .ok{color:var(--ok)}
.auth .dos{display:grid;gap:12px}.auth .op{border:1px solid var(--bd);border-radius:10px;padding:14px;background:var(--bg)}
.plan{margin:12px 8px 0;padding:8px;border-radius:8px;font-size:12px;background:var(--bg);color:var(--mut)}.plan.venc{background:#fff3bf;color:#7a5c00}
.codigo{font:700 24px monospace;letter-spacing:2px;text-align:center;padding:14px;background:var(--bg);border-radius:10px;margin:10px 0;user-select:all}
.tok{font:12px monospace;word-break:break-all;padding:10px;background:var(--bg);border-radius:8px;user-select:all}

body.sin-sesion nav, body.sin-sesion main { display: none; }

#aviso-red { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: #c92a2a; color: #fff; text-align: center; padding: 8px 12px; font-size: 14px; font-weight: 600; }

.archivo { display: inline-block; padding: 8px 14px; border: 1px solid var(--bd); border-radius: 8px; cursor: pointer; background: transparent; color: var(--tx); }
.archivo:hover { border-color: var(--ac); }


/* ===== Ajustes para teléfono y pedido sin saturar la pantalla ===== */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mcard { min-height: 96px; border: 2px solid var(--ac); background: #fff3e8; color: #1d1d1b; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 6px; font-size: 13px; cursor: pointer; }
.mcard b { font-size: 21px; }
.mcard small { color: #5c5a55; font-size: 13px; }
.mcard.ocu { background: #ffd8a8; }
.mcard.cta { background: #b2f2bb; border-color: #2b8a3e; }
#plano.ro { overflow: hidden; }
.buscar { display: flex; gap: 8px; }
.buscar input { flex: 1; font-size: 17px; padding: 13px 12px; }
.mas { width: 54px; padding: 0; font-size: 30px; line-height: 1; border-radius: 12px; flex: none; }
#bres { margin-top: 6px; }
.res { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); color: var(--tx); border: 1px solid var(--bd); padding: 14px; margin-top: 6px; border-radius: 10px; font-size: 16px; }
.res small { display: block; color: var(--mut); font-size: 12px; margin-top: 2px; }
.res:active { background: var(--ac); color: #fff; }
.ayuda { padding: 10px 2px; margin: 0; }
.prods button { min-height: 66px; }
dialog.carta { width: min(920px, 100vw); max-width: 100vw; height: min(90vh, 100dvh); max-height: 100dvh; padding: 0; flex-direction: column; }
dialog.carta[open] { display: flex; }
.cartahead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--bd); font-size: 18px; }
.cartabody { flex: 1; overflow: auto; padding: 12px 14px; -webkit-overflow-scrolling: touch; }
.cartafoot { padding: 10px 14px; border-top: 1px solid var(--bd); }
@media (max-width: 700px) {
  nav { position: sticky; top: 0; z-index: 20; align-items: center; padding: 6px 8px; gap: 2px; }
  nav a { white-space: nowrap; padding: 12px 14px; margin: 0; flex: none; }
  nav .plan { display: none; }
  nav .who { display: flex; align-items: center; gap: 10px; margin: 0 4px 0 8px; white-space: nowrap; flex: none; }
  nav .who br { display: none; }
  main { padding: 14px; }
  input, select, textarea { font-size: 16px; }
  main table { display: block; overflow-x: auto; }
  .cuenta { position: static; }
  .it { padding: 12px 0; }
  .it .q button { padding: 8px 14px; font-size: 18px; }
  .acts button { padding: 12px; }
  .acts .main { position: sticky; bottom: 10px; z-index: 5; font-size: 17px; padding: 16px; box-shadow: 0 6px 18px #0005; }
  dialog.carta { width: 100vw; height: 100dvh; border-radius: 0; margin: 0; border: 0; }
  .medios button { padding: 18px 8px; }
  h2 { font-size: 20px; }
}

/* ===== Menú con iconos (letra más pequeña) ===== */
nav a[data-v] { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 12px; }
nav a[data-v] .ic { flex: none; opacity: .85; }
nav a.on .ic { opacity: 1; }
nav a[data-v]:not(.on):hover { background: var(--bg); }
@media (max-width: 700px) { nav a[data-v] { gap: 7px; padding: 12px 12px; } }

/* ===== Buscador de ingredientes en la receta ===== */
.cb { position: relative; min-width: 0; }
.cb input.cbq { width: 100%; }
.cbl { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 220px; overflow: auto; background: var(--card); border: 1px solid var(--bd); border-radius: 8px; box-shadow: 0 8px 20px #0003; padding: 4px; }
.cbl[hidden] { display: none; }
.cbl button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; color: var(--tx); border: 0; padding: 9px 10px; border-radius: 6px; font-size: 14px; }
.cbl button:hover { background: var(--bg); }
.cbl small { color: var(--mut); white-space: nowrap; }
.cbl span { display: block; padding: 8px 10px; }

/* ===== Avisos de pedidos por QR ===== */
#avisos { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; width: min(460px, calc(100vw - 16px)); }
.aviso { display: flex; align-items: center; gap: 10px; background: #1d1d1b; color: #fff; border-left: 6px solid var(--ac); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 24px #0006; animation: avin .25s ease-out; }
.aviso.llamado { border-left-color: #f59f00; }
.aviso.cuenta { border-left-color: #2b8a3e; }
.aviso .t { flex: 1; font-size: 14px; line-height: 1.3; }
.aviso .t b { font-size: 16px; }
.aviso button { padding: 10px 12px; font-size: 14px; }
@keyframes avin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes avpulso { 0%, 100% { box-shadow: 0 0 0 0 #e03131aa; } 50% { box-shadow: 0 0 0 8px #e0313100; } }
.mcard.av, .mesa.av { animation: avpulso 1.2s infinite; border-color: #e03131; }
/* ===== QR de mesas ===== */
.qrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.qritem { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.qrcard { width: 220px; border: 2px solid #1d1d1b; border-radius: 14px; padding: 12px; background: #fff; color: #111; text-align: center; page-break-inside: avoid; break-inside: avoid; }
.qrtit { font: 700 15px system-ui, sans-serif; }
.qrimg { width: 170px; margin: 6px auto; } .qrimg svg { width: 100%; height: auto; display: block; }
.qrmesa { font: 800 26px system-ui, sans-serif; }
.qrpie { font: 12px system-ui, sans-serif; color: #444; margin-top: 4px; }
@media print {
  body.imprimiendo-qr #print-area { width: auto; font: 13px system-ui; white-space: normal; }
  .qrhoja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; }
}

.mline .rec { display: flex; align-items: center; gap: 2px; color: #f59f00; cursor: pointer; }
.mline .rec input { width: auto; }