/* Castle Burger — app del personal.
   Layout: barra lateral fija (secciones como las hojas del Excel) + área de trabajo con tablas densas. */
:root {
  /* Oscuro primero: es la identidad de la marca y se usa de noche en cocina */
  --bg: #15110e;
  --panel: #1e1814;
  --panel-2: #2a211b;
  --line: #3b2e26;
  --fg: #f4ebe3;
  --muted: #b3a092;
  --faint: #7f6d61;
  --accent: #ff6b1a;
  --accent-2: #ff8a3d;
  --accent-ink: #1b0e06;
  --accent-soft: rgba(255, 107, 26, 0.14);
  --ok: #5cc27e;
  --ok-soft: rgba(92, 194, 126, 0.15);
  --warn: #f0b443;
  --warn-soft: rgba(240, 180, 67, 0.16);
  --bad: #ef5d52;
  --bad-soft: rgba(239, 93, 82, 0.15);
  --info: #6aa8ff;
  --info-soft: rgba(106, 168, 255, 0.15);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --f-display: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --r: 8px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f0ed; --panel: #ffffff; --panel-2: #f8f4f0; --line: #e2d8cf; --fg: #1f1611; --muted: #6b5a4e; --faint: #9a887b;
    --accent: #d4500e; --accent-2: #b8440b; --accent-ink: #ffffff; --accent-soft: rgba(212, 80, 14, 0.1);
    --ok: #1f8a49; --ok-soft: rgba(31, 138, 73, 0.12); --warn: #a86b00; --warn-soft: rgba(196, 130, 0, 0.14);
    --bad: #c4352b; --bad-soft: rgba(196, 53, 43, 0.1); --info: #2a64c9; --info-soft: rgba(42, 100, 201, 0.1);
    --shadow: 0 10px 30px rgba(60, 35, 20, 0.14); color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f0ed; --panel: #ffffff; --panel-2: #f8f4f0; --line: #e2d8cf; --fg: #1f1611; --muted: #6b5a4e; --faint: #9a887b;
  --accent: #d4500e; --accent-2: #b8440b; --accent-ink: #ffffff; --accent-soft: rgba(212, 80, 14, 0.1);
  --ok: #1f8a49; --ok-soft: rgba(31, 138, 73, 0.12); --warn: #a86b00; --warn-soft: rgba(196, 130, 0, 0.14);
  --bad: #c4352b; --bad-soft: rgba(196, 53, 43, 0.1); --info: #2a64c9; --info-soft: rgba(42, 100, 201, 0.1);
  --shadow: 0 10px 30px rgba(60, 35, 20, 0.14); color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- marca ---------- */
.castle {
  display: inline-block; position: relative; width: 1.6em; height: 1.6em; border-radius: 0.36em; background: var(--accent); flex: none;
}
.castle::after {
  content: ""; position: absolute; inset: 11% 14%; background: #fff;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
:root { --icono: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201325%201705'%3E%3Cpath%20fill-rule='evenodd'%20d='M548%201669C445%201667%20426%201665%20394%201659C387%201657%20368%201654%20354%201651C321%201646%20314%201644%20299%201638C285%201632%20274%201629%20261%201626C243%201623%20232%201619%20222%201612C215%201608%20206%201603%20196%201600C185%201596%20182%201594%20172%201588C168%201585%20160%201580%20153%201578C144%201573%20141%201571%20134%201565C130%201561%20122%201554%20116%201551C103%201542%2095%201536%2088%201526C84%201521%2079%201514%2075%201510C72%201506%2068%201500%2066%201497C64%201491%2058%201469%2056%201457C51%201426%2064%201394%2084%201387C96%201382%20107%201381%20155%201379C168%201378%20190%201377%20204%201376C306%201365%20334%201365%20494%201365L602%201366L647%201369C672%201371%20704%201373%20718%201375C748%201378%20820%201381%20882%201384C1005%201388%201024%201389%201082%201398C1099%201401%201121%201403%201154%201406C1211%201411%201224%201412%201234%201416C1250%201421%201261%201428%201266%201438C1269%201444%201270%201460%201267%201469C1264%201477%201259%201487%201254%201493C1252%201495%201246%201502%201241%201508C1237%201515%201230%201523%201225%201527C1221%201531%201215%201537%201212%201540C1209%201544%201204%201548%201201%201551C1197%201553%201191%201559%201186%201562C1182%201566%201173%201572%201166%201576C1160%201580%201152%201585%201148%201588C1140%201593%201134%201596%201120%201601C1113%201603%201104%201607%201101%201609C1081%201621%201078%201622%201050%201627C1026%201631%201017%201633%201003%201638C980%201645%20969%201647%20893%201654C838%201660%20827%201661%20794%201662C779%201663%20758%201664%20748%201665C736%201666%20718%201667%20707%201668C687%201669%20571%201670%20548%201669ZM598%201336C474%201335%20311%201335%20235%201336C91%201336%2081%201336%2071%201332C65%201329%2047%201312%2044%201304C36%201288%2034%201264%2040%201250C43%201244%2047%201240%2060%201231C75%201222%2077%201221%20100%201215C112%201212%20123%201208%20131%201205C146%201199%20154%201196%20168%201194C191%201190%20207%201189%20222%201189C242%201190%20245%201191%20257%201203C262%201208%20268%201213%20270%201215C275%201218%20298%201242%20305%201251C313%201261%20322%201265%20335%201264C344%201263%20350%201260%20360%201253C369%201246%20376%201242%20389%201237C399%201234%20403%201232%20415%201225C420%201222%20427%201219%20430%201217C441%201213%20447%201210%20454%201205C463%201199%20471%201195%20486%201190C501%201186%20505%201185%20516%201178C527%201171%20530%201170%20549%201165C557%201164%20571%201160%20580%201157C598%201151%20609%201148%20632%201145C658%201141%20664%201140%20684%201133C713%201124%20727%201122%20770%201124C815%201126%20827%201127%20851%201130C923%201141%20934%201142%20964%201144C1012%201148%201034%201151%201068%201158C1081%201161%201103%201165%201118%201168C1146%201172%201154%201174%201167%201179C1178%201184%201188%201186%201206%201190C1228%201193%201231%201194%201246%201206C1263%201217%201268%201222%201274%201232C1283%201247%201286%201257%201284%201276C1282%201295%201278%201305%201266%201321C1261%201329%201256%201332%201246%201335C1241%201336%201230%201337%201031%201337C916%201337%20721%201336%20598%201336ZM1179%201140C1173%201139%201165%201137%201155%201132C1142%201126%201133%201124%201110%201120C1085%201115%201072%201112%201054%201107C1036%201101%201031%201100%201008%201096C987%201092%20975%201090%20960%201084C939%201077%20934%201077%20877%201072C830%201068%20824%201068%20800%201064C758%201056%20749%201056%20698%201054C674%201053%20651%201053%20621%201054C574%201055%20555%201056%20522%201061C475%201067%20457%201069%20411%201072C364%201076%20356%201077%20327%201086C310%201091%20301%201092%20272%201097C250%201100%20238%201102%20212%201110C176%201120%20116%201123%2098%201116C87%201112%2068%201095%2064%201087C59%201074%2057%201049%2060%201022C63%20998%2067%20986%2074%20973C80%20962%2082%20958%2087%20942C92%20925%2094%20920%20101%20910C104%20907%20108%20899%20111%20894C114%20889%20119%20880%20124%20874C128%20868%20134%20859%20137%20854C140%20849%20145%20842%20150%20836C168%20818%20168%20819%20166%20722C165%20613%20163%20400%20163%20392C164%20380%20172%20370%20185%20363C195%20359%20204%20357%20226%20353C248%20349%20255%20347%20269%20341C285%20334%20292%20331%20310%20328C336%20323%20343%20324%20349%20333C352%20337%20355%20348%20355%20357C355%20360%20356%20369%20356%20376C358%20389%20358%20416%20360%20518C360%20577%20360%20577%20359%20583C356%20596%20358%20605%20364%20609C369%20613%20383%20611%20388%20606C392%20603%20390%20601%20383%20594C369%20583%20366%20576%20368%20551C369%20543%20369%20521%20369%20504C368%20466%20370%20411%20371%20402C373%20390%20379%20383%20386%20384C392%20384%20395%20386%20406%20401C421%20422%20422%20427%20422%20469C422%20482%20422%20505%20423%20520C423%20550%20423%20555%20417%20569C411%20585%20414%20589%20427%20589C437%20589%20442%20588%20451%20581C462%20574%20470%20570%20484%20565C491%20563%20499%20560%20502%20559C508%20555%20515%20547%20518%20540L520%20534L520%20414L520%20293L524%20287C527%20280%20533%20276%20548%20268C560%20262%20571%20259%20598%20255C621%20252%20626%20250%20631%20245C638%20237%20639%20232%20640%20131C641%2043%20640%2046%20647%2039C655%2032%20663%2037%20671%2054C674%2059%20677%2064%20678%2065C679%2066%20683%2066%20699%2066C722%2067%20726%2067%20745%2074C760%2080%20771%2083%20790%2086C816%2089%20821%2090%20828%2092C844%2097%20844%20106%20828%20113C819%20118%20787%20127%20768%20131C728%20138%20708%20141%20696%20142C680%20142%20679%20142%20676%20147C672%20154%20671%20165%20670%20190C670%20222%20672%20232%20681%20240C688%20246%20695%20248%20717%20249C745%20250%20796%20257%20809%20261C824%20266%20832%20277%20835%20296C835%20300%20836%20333%20837%20369C838%20515%20838%20526%20841%20531C844%20538%20846%20540%20855%20546C873%20557%20887%20563%20910%20567C926%20571%20928%20572%20935%20578C942%20584%20947%20586%20966%20591C984%20595%20986%20595%20991%20591C996%20585%20998%20572%20993%20564C991%20559%20987%20559%20981%20563C970%20571%20959%20573%20948%20567C941%20564%20939%20560%20936%20544C934%20533%20934%20529%20933%20479C933%20420%20933%20418%20938%20409C948%20394%20958%20381%20960%20379C969%20374%20978%20379%20984%20392C986%20396%20986%20399%20987%20418C988%20429%20988%20441%20989%20443C990%20451%20991%20442%20992%20414C993%20398%20993%20382%20994%20380C995%20377%20996%20364%20998%20352C1001%20326%201002%20323%201006%20318C1010%20311%201020%20309%201036%20313C1041%20315%201051%20317%201057%20319C1064%20321%201080%20324%201094%20326C1123%20330%201132%20332%201145%20337C1151%20339%201161%20343%201168%20346C1184%20352%201187%20355%201191%20362L1193%20367L1194%20397C1194%20504%201196%20642%201198%20706C1199%20729%201199%20764%201200%20783L1201%20817L1207%20830C1215%20846%201219%20852%201228%20861C1233%20867%201237%20872%201241%20880C1244%20886%201249%20894%201253%20898C1260%20907%201263%20912%201267%20921C1269%20926%201273%20935%201276%20941C1286%20964%201290%20983%201289%201018C1289%201050%201286%201070%201277%201083C1272%201093%201258%201111%201255%201113C1250%201117%201229%201129%201222%201133C1210%201139%201191%201142%201179%201140ZM156%201026C170%201019%20170%201006%20156%20999C151%20996%20150%20996%20142%20996C130%20997%20122%201002%20121%201011C119%201025%20140%201034%20156%201026ZM230%20999C244%20994%20247%20980%20237%20972C223%20961%20198%20969%20198%20983C198%20990%20203%20996%20210%20999C215%201000%20226%201000%20230%20999ZM332%20884C336%20882%20338%20881%20340%20877C342%20872%20342%20872%20341%20868C338%20857%20324%20851%20311%20855C291%20861%20292%20882%20312%20887C318%20888%20326%20887%20332%20884ZM430%20834C440%20831%20446%20823%20445%20816C442%20799%20410%20796%20401%20812C399%20817%20399%20817%20400%20821C403%20832%20417%20838%20430%20834Z'/%3E%3C/svg%3E"); }
.brand-lockup { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 19px; letter-spacing: 0.02em; color: var(--fg); line-height: 1; }
.brand-lockup.big { font-size: 30px; }
.boot { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px 16px; }

/* ---------- login ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; box-shadow: var(--shadow); display: grid; gap: 18px; }
.auth-card h1 { margin: 0; font: 600 15px/1.2 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel-2); border-radius: 8px; padding: 3px; }
.auth-tabs button { border: 0; background: transparent; padding: 8px; border-radius: 6px; cursor: pointer; font: 600 15px var(--f-label); letter-spacing: 0.04em; color: var(--muted); }
.auth-tabs button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.demo-note { font-size: 13px; background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 8px; padding: 10px 12px; color: var(--fg); }
.demo-note code { font-size: 12.5px; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100%; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand-lockup { padding: 4px 8px 6px; }
.nav-group { display: grid; gap: 2px; }
.nav-group h2 { margin: 0 0 4px; padding: 0 10px; font: 600 11.5px var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--muted); font: 600 16px/1.2 var(--f-label); letter-spacing: 0.02em; }
.nav-btn:hover { background: var(--panel-2); color: var(--fg); }
.nav-btn[aria-current="page"] { background: var(--accent-soft); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
.badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 12.5px/1.5 var(--f-label); text-align: center; }
.side-foot { margin-top: auto; display: grid; gap: 8px; font-size: 13px; padding: 0 8px; }
.who { display: flex; flex-direction: column; }
.who b { font-weight: 600; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font: 400 24px/1.1 var(--f-display); letter-spacing: 0.01em; text-wrap: balance; }
.topbar .sub { color: var(--muted); font-size: 13.5px; }
.topbar .spacer { flex: 1; }
.menu-btn { display: none; }
.content { padding: 20px 24px 48px; display: grid; gap: 20px; min-width: 0; }
.demo-bar { background: var(--accent-soft); border-bottom: 1px solid var(--accent); padding: 7px 24px; font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); padding: 7px 13px; border-radius: 7px; cursor: pointer; font: 600 15px/1.2 var(--f-label); letter-spacing: 0.03em; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--fg); background: var(--panel-2); }
.btn.sm { padding: 4px 9px; font-size: 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.block { width: 100%; padding: 10px; font-size: 16px; }
label.f { display: grid; gap: 4px; font: 600 13px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
label.f.inline { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font: 500 15px var(--f-body); color: var(--fg); }
.in, select.in, textarea.in { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; color: var(--fg); font: 400 15px var(--f-body); text-transform: none; letter-spacing: 0; }
.in:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.in { resize: vertical; min-height: 64px; }
.in.n { text-align: right; font-variant-numeric: tabular-nums; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.err { color: var(--bad); font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; cursor: pointer; font: 600 14.5px var(--f-label); color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.search { max-width: 260px; }

/* ---------- paneles ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.panel > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel > header h2 { margin: 0; font: 700 17px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; }
.panel > header .spacer { flex: 1; }
.panel .body { padding: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kpi { background: var(--panel); padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.kpi .k { font: 600 12.5px var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font: 700 27px/1.15 var(--f-label); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.kpi .v.accent { color: var(--accent-2); }
.kpi .v.neg { color: var(--bad); }
.kpi .h { font-size: 12.5px; color: var(--faint); }

/* tablas tipo planilla */
.tbl-wrap { overflow-x: auto; }
table.sheet { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.sheet th { position: sticky; top: 0; background: var(--panel-2); text-align: left; font: 600 12.5px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.sheet td { padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); vertical-align: top; }
table.sheet tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
table.sheet tr.click { cursor: pointer; }
table.sheet tfoot td { font-weight: 600; border-top: 1px solid var(--line); background: var(--panel-2); }
table.sheet td.calc { color: var(--muted); }
table.sheet .empty td { text-align: center; color: var(--muted); padding: 28px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font: 600 13px/1.6 var(--f-label); letter-spacing: 0.03em; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.acc { background: var(--accent-soft); color: var(--accent-2); }
.pill.neutral { background: var(--panel-2); color: var(--muted); }
select.estado { border-radius: 999px; padding: 2px 8px; font: 600 13.5px var(--f-label); border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.tag-web { font: 700 11px var(--f-label); letter-spacing: 0.1em; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); vertical-align: 1px; }
tr.nuevo td { background: var(--accent-soft) !important; }

/* barras */
.bar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.progress-big { height: 14px; }

/* ---------- drawer (formularios) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 30; display: flex; justify-content: flex-end; }
.drawer { width: min(640px, 100%); height: 100%; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: slide 0.18s ease-out; }
.drawer.wide { width: min(980px, 100%); }
@keyframes slide { from { transform: translateX(24px); opacity: 0.6; } }
.drawer > header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); }
.drawer > header h2 { margin: 0; font: 400 21px var(--f-display); flex: 1; min-width: 0; }
.drawer .dbody { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 18px; align-content: start; }
.drawer > footer { display: flex; gap: 8px; padding: 12px 18px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-wrap: wrap; }
.drawer > footer .spacer { flex: 1; }
.confirm-box { background: var(--bad-soft); border: 1px solid var(--bad); border-radius: 8px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- pedido: líneas ---------- */
.lines { display: grid; gap: 12px; }
.line { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: var(--panel-2); }
.line-top { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto auto; gap: 10px; align-items: end; }
.stepper { display: inline-grid; grid-template-columns: 34px 1fr 34px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg); }
.stepper button { border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--muted); }
.stepper button:hover { color: var(--fg); background: var(--panel-2); }
.stepper input { border: 0; background: transparent; text-align: center; width: 100%; min-width: 0; padding: 7px 0; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 3px 10px; font: 500 13.5px var(--f-body); cursor: pointer; color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); text-decoration: line-through; }
.chip.extra { display: inline-flex; align-items: center; gap: 6px; cursor: default; background: var(--accent-soft); border-color: transparent; }
.chip.extra button { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 0 2px; font-size: 15px; }
.line-price { font: 700 18px var(--f-label); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.subl { font: 600 12px var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.totals { display: grid; gap: 4px; justify-items: end; font-variant-numeric: tabular-nums; }
.totals .big { font: 700 30px var(--f-label); color: var(--accent-2); }

/* ---------- comanda y boucher ---------- */
.tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.ticket { background: #fffdf9; color: #1a1410; border-radius: 4px; padding: 18px 16px 22px; font: 14px/1.45 "Courier New", ui-monospace, monospace; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), var(--shadow); position: relative; min-width: 0; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px -1px, transparent 6px, #fffdf9 6.5px) 0 0 / 12px 8px repeat-x; }
.ticket h3 { margin: 0 0 4px; font: 700 15px "Courier New", monospace; text-align: center; letter-spacing: 0.08em; }
.ticket .t-head { text-align: center; border-bottom: 1px dashed #888; padding-bottom: 8px; margin-bottom: 8px; }
.ticket .t-row { display: flex; justify-content: space-between; gap: 10px; }
.ticket .t-item { padding: 6px 0; border-bottom: 1px dashed #bbb; }
.ticket .t-item b { font-size: 15px; }
.ticket .sin { font-weight: 700; text-decoration: underline; }
.ticket .ext { font-weight: 700; }
.ticket .t-total { font-weight: 700; font-size: 17px; border-top: 2px solid #1a1410; margin-top: 8px; padding-top: 6px; }
.ticket .warn-t { background: #1a1410; color: #fffdf9; padding: 0 4px; }
.ticket-label { font: 600 12.5px var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* tickets con el formato del Excel (Apps Script) */
.xt { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; border-radius: 4px; box-shadow: var(--shadow); min-width: 0; }
.xt .t { max-width: 300px; margin: 0 auto; padding: 3mm 3mm 6mm; }
.xt .c { text-align: center; }
.xt .marca { font-size: 18px; font-weight: bold; }
.xt .tipo { font-size: 13px; font-weight: bold; letter-spacing: 1px; margin-bottom: 3px; }
.xt .num { text-align: center; font-size: 28px; font-weight: bold; margin: 3px 0; }
.xt .num2 { font-size: 16px; font-weight: bold; margin: 2px 0; }
.xt .hr { border-top: 2px dashed #000; margin: 6px 0; }
.xt .row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: nowrap; gap: 8px; font-size: 13px; margin: 1px 0; }
.xt .row b { text-align: right; }
.xt .prod { font-size: 18px; font-weight: bold; margin: 4px 0 2px; }
.xt .ing { font-size: 13px; line-height: 1.3; margin: 2px 0 3px; }
.xt .extra { font-size: 15px; font-weight: bold; margin: 2px 0; }
.xt .sin { font-size: 15px; font-weight: bold; border: 2px solid #000; padding: 1px 4px; display: inline-block; margin: 2px 0; }
.xt .sep { height: 6px; }
.xt .notas { font-size: 15px; font-weight: bold; }
.xt .horag { text-align: center; margin: 6px 0 2px; }
.xt .horag span { display: block; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.xt .horag b { display: block; font-size: 96px; line-height: 1; font-weight: 900; letter-spacing: -2px; }
.xt .item { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-top: 4px; }
.xt .det { font-size: 12px; padding-left: 10px; }
.xt .total { display: flex; justify-content: space-between; font-size: 20px; font-weight: bold; margin: 4px 0; }
.xt .gracias { font-size: 13px; }
.xt .corte { text-align: center; font-size: 13px; margin: 10px 0; letter-spacing: 1px; }
.xt .logo svg { display: block; width: 38mm; max-width: 60%; height: auto; margin: 0 auto 4px; }
.print-row { padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
#print-area { display: none; }

/* temporizador */
.timer { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font: 600 13.5px var(--f-label); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--panel-2); color: var(--muted); }
.timer b { font-weight: 700; }
.timer.t-ok { background: var(--ok-soft); color: var(--ok); }
.timer.t-warn { background: var(--warn-soft); color: var(--warn); }
.timer.t-bad { background: var(--bad-soft); color: var(--bad); animation: latido 1.6s ease-in-out infinite; }
.timer.t-done { background: var(--panel-2); color: var(--muted); }
.timer.big { font-size: 20px; padding: 3px 12px; }
@keyframes latido { 50% { opacity: 0.55; } }

/* cocina */
.kitchen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; }
.kcard > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.kcard > header b { font: 700 20px var(--f-label); }
.kcard.st-Pendiente > header { box-shadow: inset 4px 0 0 var(--warn); }
.kcard.st-En-Preparación > header { box-shadow: inset 4px 0 0 var(--info); }
.kcard.st-En-Camino > header { box-shadow: inset 4px 0 0 var(--ok); }
.kcard .kbody { padding: 10px 14px; display: grid; gap: 8px; }
.kitem b { font: 700 17px var(--f-label); }
.kitem .ing { color: var(--muted); font-size: 14px; }
.kitem .sin { color: var(--bad); font-weight: 600; }
.sinbox { display: inline-block; border: 2px solid var(--bad); color: var(--bad); font: 700 14px var(--f-label); padding: 0 6px; border-radius: 4px; margin-top: 2px; }
.knotas { font-weight: 700; }
.kitem .ext { color: var(--accent-2); font-weight: 600; }
.kcard footer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* toasts */
#toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; gap: 8px; max-width: min(380px, calc(100% - 32px)); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 14.5px; animation: slide 0.2s ease-out; }
.toast.bad { border-left-color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }

/* gráfico de barras mensual */
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.bars .col { display: grid; align-content: end; justify-items: center; height: 100%; position: relative; }
.bars .col i { width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 1px; }
.bars .col i.neg { background: var(--bad); }
.bars .col span { position: absolute; top: -18px; font: 600 11.5px var(--f-label); color: var(--muted); white-space: nowrap; }
.bars-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; font: 600 12px var(--f-label); color: var(--faint); text-align: center; text-transform: uppercase; padding-top: 4px; }

.pcards { display: none; gap: 10px; }
.pcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 14.5px; }
.pcard.nuevo { border-color: var(--accent); background: var(--accent-soft); }
.pcard b.num { font: 700 19px var(--f-label); }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi .v { font-size: 23px; }
  .ptable { display: none; }
  .pcards { display: grid; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-105%); transition: transform 0.2s; box-shadow: var(--shadow); padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 35; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .topbar h1 { font-size: 20px; }
  .content { padding: 16px 16px 40px; }
  .demo-bar { padding: 7px 16px; }
  .demo-bar > span { display: none; }
  .line-top { grid-template-columns: minmax(0, 1fr) 110px; }
  .line-top .line-price { grid-column: 1; text-align: left; }
}

/* ---------- impresión (comanda + boucher, papel 80 mm) ---------- */
@media print {
  @page { margin: 0; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing #print-area { display: block !important; box-shadow: none; border-radius: 0; }
  body.printing #print-area .t { max-width: none; margin: 0; }
}

/* ---- Pedidos en curso: tarjetas con el tiempo arriba ---- */
.timer.xl { display: flex; justify-content: center; width: 100%; box-sizing: border-box; font-size: 34px; padding: 8px 12px; border-radius: 10px; letter-spacing: 0.02em; }
.timer.xl b { font-weight: 800; }
.vivo-wrap { display: grid; gap: 10px; }
.vivo-t { font: 700 15px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; }
.vivo-t .faint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.vivo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vivo { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.vivo:hover { border-color: var(--accent); }
.vivo.nuevo { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.vivo-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.vivo-h b { font: 800 19px var(--f-label); }
.vivo-i { color: var(--muted); font-size: 14px; line-height: 1.35; }
.vivo-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.vivo-f .num { margin-left: auto; font-size: 15px; }

/* ---- Fotos de productos ---- */
.pimg-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pimg-box.cargando { opacity: 0.55; pointer-events: none; }
.pimg-box.cargando .pimg::after { content: "Subiendo…"; }
.pimg { width: 120px; height: 120px; flex: none; border-radius: 12px; overflow: hidden; border: 1px dashed var(--line); background: var(--panel-2); display: grid; place-items: center; color: var(--faint); font-size: 13px; position: relative; }
.pimg img { width: 100%; height: 100%; object-fit: cover; }
.pimg::after { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-weight: 600; }
.pimg-act { display: grid; gap: 6px; flex: 1; min-width: 200px; }
.pimg-act .faint { font-size: 13px; }
.thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.thumb.vacio { display: grid; place-items: center; background: var(--panel-2); color: var(--faint); }

/* ---- Tarjeta de fidelidad ---- */
.premio-staff { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; font-size: 14.5px; }

/* ---- Mesas ---- */
.mesa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mesa { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; cursor: pointer; min-height: 130px; }
.mesa:hover { border-color: var(--accent); }
.mesa.libre { border-style: dashed; justify-content: center; align-items: center; text-align: center; background: var(--panel-2); }
.mesa-n { font: 800 22px var(--f-label); letter-spacing: 0.02em; }
.mesa-cta { color: var(--accent); font: 700 15px var(--f-label); text-transform: uppercase; letter-spacing: 0.06em; }
.cobro { display: grid; gap: 10px; }
.cobro-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.cobro-row > div:first-child { flex: 1; min-width: 140px; }
.cobro-row .num { font-size: 18px; }
.cobro-row.pagado { justify-content: space-between; background: var(--panel-2); }
.chip-p { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; font: 600 14px var(--f-label); cursor: pointer; color: inherit; }
.chip-p.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.unidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.unidad { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.unidad b { font-variant-numeric: tabular-nums; }
.unidad small { color: var(--muted); }
.unidad.asig { border-color: var(--accent); background: var(--accent-soft); }
.unidad.pagada { opacity: 0.5; cursor: default; text-decoration: line-through; }

/* ---- Pedir desde la mesa ---- */
.mesa.llama { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad) inset; }
.llamado { background: var(--bad-soft); color: var(--bad); font: 700 14px var(--f-label); padding: 4px 10px; border-radius: 8px; animation: latido 1.6s ease-in-out infinite; }
.codigo-mesa { display: grid; justify-items: center; gap: 2px; padding: 12px; border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); }
.codigo-mesa b { font: 800 56px/1 var(--f-label); letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.codigo-mesa.vencido { opacity: 0.45; border-color: var(--line); }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.qr-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; background: #fff; color: #111; display: grid; gap: 6px; justify-items: center; }
.qr-marca { font: 800 14px var(--f-label); letter-spacing: 0.14em; }
.qr-mesa { font: 800 28px var(--f-label); }
.qr-img { width: 170px; height: 170px; }
.qr-img svg { width: 100%; height: 100%; }
.qr-txt { font-size: 13px; line-height: 1.35; }
@media print {
  #print-area.qr-print { display: block; padding: 10mm; }
  #print-area.qr-print .qr-grid { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  #print-area.qr-print .qr-card { break-inside: avoid; border: 1px solid #999; }
}

/* ---- Solicitud especial ---- */
.xt .especial { display: grid; gap: 4px; text-align: center; margin: 4px 0; }
.xt .especial b { display: block; background: #000; color: #fff; font-size: 22px; letter-spacing: 1px; padding: 4px 0; }
.xt .especial span { font-size: 18px; font-weight: 800; line-height: 1.25; }
.especial-staff { display: grid; gap: 2px; border: 2px solid var(--bad); background: var(--bad-soft); border-radius: 10px; padding: 9px 12px; }
.especial-staff b { color: var(--bad); font: 800 15px var(--f-label); letter-spacing: 0.06em; }
.especial-staff span { font-size: 15px; font-weight: 600; }

/* ---- Anuncios y fotos de la carta (configuración) ---- */
.anun-ed { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.carta-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.carta-ed figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-2); display: grid; }
.carta-ed img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.carta-ed figcaption { display: flex; align-items: center; gap: 4px; padding: 6px 8px; }
.carta-ed figcaption span { flex: 1; font-size: 13px; color: var(--muted); }

/* ---- Equipo: marcar entrada, horarios, asistencia, propinas ---- */
.marcar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.marcar-p { display: grid; gap: 2px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--fg); cursor: pointer; font: inherit; }
.marcar-p:hover, .marcar-p:focus-visible { border-color: var(--accent); outline: none; }
.marcar-p b { font: 800 19px var(--f-label); }
.marcar-p span { color: var(--muted); font-size: 13px; }
.marcar-p small { font-size: 12.5px; color: var(--faint); }
.marcar-p small.ok { color: var(--ok); }
.marcar-p small.acc { color: var(--accent); }
.marcar-pin { display: grid; gap: 12px; }
.pin-in { font: 800 34px/1.2 var(--f-label); letter-spacing: 0.4em; text-align: center; max-width: 240px; }
.marcado { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); }
.marcado b { font: 800 30px var(--f-label); }
.marcado span { color: var(--fg); }
.marcado small { color: var(--muted); }
.marcado.tarde { background: var(--warn-soft); color: var(--warn); }
.confirmar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.confirmar.tarde { border-color: var(--warn); background: var(--warn-soft); }
@media (max-width: 760px) { .confirmar { grid-template-columns: minmax(0, 1fr); } }
.horario-wrap { overflow-x: auto; }
table.horario { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 13.5px; }
table.horario th, table.horario td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; text-align: left; }
table.horario thead th { font: 700 12.5px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
table.horario tbody th { min-width: 130px; }
table.horario tbody th span { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
table.horario .hoy { background: var(--accent-soft); }
table.horario td.num, table.horario th.num { text-align: right; white-space: nowrap; }
.hcell { min-width: 104px; }
.turno, .marca, .turno-add { display: block; width: 100%; margin: 0 0 4px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 12.5px; text-align: left; }
button.turno, button.marca, .turno-add { cursor: pointer; }
.turno b { display: block; font-variant-numeric: tabular-nums; }
.turno span { color: var(--muted); }
.turno:disabled { cursor: default; opacity: 1; }
.marca.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.marca.pend { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.marca.tarde { box-shadow: inset 3px 0 0 var(--bad); }
.marca.falta { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.turno-add { text-align: center; color: var(--faint); border-style: dashed; background: transparent; }
.turno-add:hover { color: var(--accent); border-color: var(--accent); }
.reglas { display: grid; gap: 14px; }
.reglas .faint { text-transform: none; letter-spacing: 0; font: 400 12.5px var(--f-body); }
.pct-dia { font-size: 14px; white-space: nowrap; }
.pct-dia b { font-size: 16px; }
table.dia-dia td .pct { display: block; font-size: 12px; color: var(--muted); }
table.dia-dia td .pct.neg { color: var(--bad); }
table.dia-dia tfoot th, table.dia-dia tfoot td { border-top: 2px solid var(--line); }
table.dia-dia { min-width: 560px; }
.revisar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 14px; }
.revisar.falta { background: var(--bad-soft); }
.revisar span { min-width: 0; }
.warn-t { color: var(--warn); }
@media (max-width: 640px) { .revisar { flex-direction: column; align-items: stretch; } }

/* ---- pidamos.app: locales y módulos ---- */
.local-ini { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #fff); display: inline-grid; place-items: center; font: 800 18px var(--f-label); flex: none; }
.brand-lockup.big .local-ini { width: 42px; height: 42px; font-size: 26px; }
.local-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; flex: none; }
.local-sel { display: grid; gap: 4px; padding: 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.local-sel select { text-transform: none; letter-spacing: 0; font-size: 14px; }
.nav-btn.apagado { opacity: 0.6; }
.off-tag { margin-left: 6px; font: 700 10.5px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mod { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.mod:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mod input { margin-top: 3px; }
.mod span { display: grid; gap: 2px; min-width: 0; }
.mod small { color: var(--muted); font-size: 12.5px; }
.links-local { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.links-local > div { display: grid; gap: 4px; font-size: 12.5px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.xt .logo img { max-width: 120px; max-height: 80px; }

/* ---- menús bloqueados: vista previa para desbloquear ---- */
.nav-btn.bloqueado { color: var(--muted); }
.lock-ico { margin-right: 6px; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view.en-preview { filter: blur(2.5px) grayscale(0.35); opacity: 0.75; user-select: none; pointer-events: none; max-height: 1400px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.preview-card { margin: 20px 24px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border: 2px solid var(--accent); border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-soft), var(--panel)); box-shadow: var(--shadow); }
.preview-card .lock-big { font-size: 40px; line-height: 1; }
.preview-card h2 { margin: 0 0 4px; font: 400 24px/1.15 var(--f-display); }
.preview-card p { margin: 0 0 8px; }
.preview-card ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 3px; }
.pv-body { display: grid; gap: 4px; min-width: 0; }
.pv-acc { gap: 12px; align-items: center; flex-wrap: wrap; }
.pv-precio { font: 800 26px var(--f-label); color: var(--accent); }
.pv-precio small { font-size: 14px; color: var(--muted); margin-left: 2px; }
.precios-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .preview-card { margin: 14px 16px 0; grid-template-columns: minmax(0, 1fr); } }
.nav-lbl { display: inline-flex; align-items: center; gap: 0; min-width: 0; }
.mods3 { display: grid; gap: 8px; }
.mod3 { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mod3 > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.mod3 small { color: var(--muted); font-size: 12.5px; }
.mod3[data-est="activo"] { border-color: var(--ok); background: var(--ok-soft); }
.mod3[data-est="venta"] { border-color: var(--accent); background: var(--accent-soft); }
.mod3[data-est="oculto"] { opacity: 0.8; }
.aviso-impl { margin: 20px 24px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--ok); background: var(--ok-soft); }
.aviso-impl .ai-ico { font-size: 30px; }
.aviso-impl p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .aviso-impl { margin: 14px 16px 0; grid-template-columns: minmax(0, 1fr); } }
.aviso-impl.prop { border-color: var(--accent); background: var(--accent-soft); }
.prop-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border: 2px solid var(--accent); border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.prop-card .row { grid-column: 2; }
.prop-card p { margin: 2px 0 0; color: var(--muted); }
.sim-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sim-mods { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.sim-mods li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; }
.sim-mods li.cambia { background: var(--ok-soft); }
.sim-plata { margin: 4px 0 0; font: 700 20px var(--f-label); }
.panel.sim { border-color: var(--accent); }

/* ---------- Barra: pantalla táctil de venta ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 14px; align-items: start; }
.pos-izq { display: grid; gap: 10px; min-width: 0; }
.pos-vend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 600 14px var(--f-label); color: var(--muted); }
.pos-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-cats button { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; padding: 10px 16px; font: 700 16px var(--f-label); letter-spacing: .02em; cursor: pointer; }
.pos-cats button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pos-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.pos-btn { position: relative; min-height: 92px; border: 0; border-radius: 14px; padding: 12px; background: var(--c, var(--accent)); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; box-shadow: inset 0 -4px 0 rgba(0,0,0,.22); touch-action: manipulation; user-select: none; }
.pos-btn b { font: 700 18px/1.1 var(--f-label); letter-spacing: .01em; overflow-wrap: anywhere; }
.pos-btn span { font: 600 15px var(--f-label); opacity: .92; }
.pos-btn i { position: absolute; top: 8px; right: 8px; font-style: normal; background: rgba(0,0,0,.35); border-radius: 999px; min-width: 26px; padding: 2px 8px; font: 700 15px var(--f-label); text-align: center; }
.pos-btn:active { transform: scale(.97); }
.tam-normal .pos-btn { min-height: 70px; }
.tam-grande .pos-btn { min-height: 104px; }
.tam-enorme .pos-btn { min-height: 140px; }
.tam-enorme .pos-btn b { font-size: 23px; }
.tam-enorme .pos-btn span { font-size: 18px; }
.pos-der { position: sticky; top: 10px; display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.pos-tk { display: grid; gap: 6px; max-height: 42vh; overflow: auto; }
.pos-l { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 38px; gap: 6px; align-items: center; font-size: 15px; }
.pos-l button { height: 38px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); border-radius: 9px; font-size: 18px; cursor: pointer; }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 8px; font: 700 18px var(--f-label); }
.pos-total b { font: 400 28px var(--f-display); color: var(--accent); }
.pos-met { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pos-met button { border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); border-radius: 9px; padding: 10px 6px; font: 600 15px var(--f-label); cursor: pointer; }
.pos-met button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.pos-cobrar { border: 0; border-radius: 12px; padding: 16px; background: var(--ok); color: #fff; font: 700 21px var(--f-label); letter-spacing: .03em; cursor: pointer; }
.pos-cobrar:disabled { opacity: .4; cursor: default; }
.pos-ult { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 13.5px; }
.pos-uv { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.pos-uv span { color: var(--muted); min-width: 0; }
body.modo-barra .side, body.modo-barra .topbar, body.modo-barra .demo-bar, body.modo-barra #aviso-impl { display: none !important; }
body.modo-barra .shell { grid-template-columns: minmax(0, 1fr); }
body.modo-barra .content { padding-top: 14px; }
body.modo-barra .pos-der { top: 14px; }
.br-salir { position: fixed; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 50; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 8px 14px; font: 600 13px var(--f-label); cursor: pointer; opacity: .7; }
@media (max-width: 860px) { .pos { grid-template-columns: minmax(0, 1fr); } .pos-der { position: static; } .pos-grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 460px) { .pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-l { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.rec-l select { flex: 1 1 180px; min-width: 0; }
.color-b { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; background: var(--c); color: var(--muted); font: 700 13px var(--f-label); cursor: pointer; }
.color-b.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg) inset; }
.dot-c { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }

/* adicionales y comisiones por horario */
.adic-fila, .tramo-f { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 2fr) 110px 110px auto; gap: 8px; align-items: end; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.tramo-f { grid-template-columns: minmax(140px, 1.4fr) 120px 120px 130px auto auto; }
.dias-c { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.dias-c button { width: 30px; height: 32px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 7px; font: 700 13px var(--f-label); cursor: pointer; }
.dias-c button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) { .adic-fila, .tramo-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .adic-fila > input, .tramo-f > input { grid-column: 1 / -1; } }

/* equipo: menús que ve cada cuenta */
.menus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
.menus-grid fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0; display: grid; gap: 4px; min-width: 0; }
.menus-grid legend { font: 600 12px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0 4px; }
/* perfil del cliente */
.cli-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.cli-datos > div { display: grid; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cli-datos span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cli-datos b { overflow-wrap: anywhere; font-weight: 600; }

/* cocina: comandas de mesa */
.kcard.st-mesa > header { box-shadow: inset 4px 0 0 var(--accent); }
/* cierre de mesa con propinas */
.cierre { display: grid; gap: 8px; }
.cierre-fila { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto auto auto; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
@media (max-width: 760px) { .cierre-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cierre-fila > div:first-child { grid-column: 1 / -1; } }

/* ---------- colores de la página de pedidos ---------- */
.pal-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pal-op { display: grid; gap: 6px; justify-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font: 600 14px var(--f-label); color: var(--fg); text-align: left; }
.pal-op.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pal-op .sw { display: flex; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.pal-op .sw i { width: 26px; height: 22px; display: block; }
.pal-col input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.pal-prev { display: grid; justify-items: center; gap: 10px; padding: 22px 16px; border: 1px solid; border-radius: 14px; max-width: 360px; }
.pal-prev b { font: 400 26px/1 var(--f-display); letter-spacing: 0.01em; }
.pal-prev .pp-logo { width: 52px; height: 52px; border-radius: 14px; position: relative; }
.pal-prev .pp-logo span { position: absolute; inset: 11% 14%; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.pal-prev .pp-card { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid; border-radius: 10px; font-weight: 600; }
.pal-prev .pp-btn { padding: 9px 16px; border-radius: 999px; font: 800 14px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; }