:root{--bg:#0c0e0f;--panel:#181a1b;--panel2:#212426;--ink:#f6f6f4;--muted:#a8abad;--yellow:#ffc400;--line:#4a4c4d;--danger:#ff5c4d;--green:#55c878;--radius-card:12px;--radius-btn:8px;--shadow-card:0 2px 10px rgba(0,0,0,.55);--field:#101213;--field-ink:#f6f6f4;--field-line:#4a4c4d;--field-muted:#8f9295;--soft:#2f3335;--soft-ink:#f0f0ee;--on-accent:#141414;--ok-bg:#173d25;--ok-ink:#8ee5a9;--err-bg:#4b211d;--err-ink:#ffaaa2;--warn-bg:#463a0c;--warn-ink:#ffe88b;--info-bg:#1b2a44;--info-ink:#8fb4f5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px Inter,system-ui,Segoe UI,sans-serif}a{color:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:230px;background:var(--sidebar-bg,#111314);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:900;text-decoration:none;padding:0 12px 24px;line-height:.8;color:var(--sidebar-ink,var(--ink))}.brand small{font-size:11px;font-weight:650;color:var(--muted)}.brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:148px}.brand-icon{display:grid;place-items:center;background:var(--yellow);width:42px;height:42px;border-radius:10px;flex:0 0 auto;overflow:hidden}.brand-icon img{width:100%;height:100%;object-fit:contain}.side-nav{display:grid;gap:5px}.side-nav a,.logout{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:8px;text-decoration:none;color:var(--sidebar-ink,var(--muted));font-weight:600}.side-nav a:hover,.side-nav a.active{background:var(--yellow);color:var(--on-accent)}.side-nav i{width:20px;text-align:center;font-style:normal}.nav-label{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:1.4px;padding:18px 13px 6px}.logout{margin-top:auto}.app-footer{text-align:center;padding:22px 0 4px;color:var(--muted);font-size:11px;letter-spacing:.2px}.login-page{position:relative}.login-footer{position:absolute;left:0;right:0;bottom:16px;padding:0}.table-actions{display:flex;gap:8px;align-items:center}.table-actions form{display:inline-flex;margin:0}.table-actions button:disabled{opacity:.4;cursor:not-allowed}.workspace{width:calc(100% - 230px);margin-left:230px}.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 32px;background:var(--panel);position:sticky;top:0;z-index:5}.topbar>div,.operator{display:flex;align-items:center;gap:11px}.topbar strong,.topbar small,.operator span{display:block}.topbar small,.operator small{color:var(--muted);font-size:11px;margin-top:3px}.avatar{display:grid!important;place-items:center;background:var(--yellow);color:var(--on-accent);width:37px;height:37px;border-radius:50%;font-weight:900}.container{max-width:1450px;margin:auto;padding:32px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--login-bg,none),radial-gradient(circle at top,color-mix(in srgb,var(--yellow) 10%,var(--panel)),var(--bg) 55%);background-size:cover;background-position:center}.login-page::before{content:'';position:fixed;inset:0;background:rgba(10,11,12,.55);z-index:-1;display:none}.login-page[style*="--login-bg"]::before{display:block}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px;box-shadow:var(--shadow-card)}.login-card{width:min(420px,100%);box-shadow:0 20px 70px #0008;text-align:center}.login-card h1{color:var(--yellow);margin:0 0 8px}.login-logo-box{width:84px;height:84px;margin:0 auto 16px;background:#fff;border-radius:18px;display:grid;place-items:center;padding:10px;box-shadow:0 6px 18px #0004}.login-logo{width:100%;height:100%;object-fit:contain}.login-card form{text-align:left}h1{margin:0 0 8px;font-size:29px}h2{font-size:18px}.page-heading,.title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.page-heading p,.title-row p{margin:0;color:var(--muted)}.eyebrow{color:var(--yellow)!important;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:1.3px}.button,button{display:inline-flex;justify-content:center;align-items:center;background:var(--yellow);color:var(--on-accent);border:0;border-radius:var(--radius-btn);padding:12px 18px;font:700 14px inherit;text-decoration:none;cursor:pointer}.secondary{background:var(--soft);color:var(--soft-ink)}.small{padding:7px 10px}.kpi-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:16px}.kpi{min-height:128px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;display:grid;align-content:space-between;box-shadow:var(--shadow-card)}.kpi.featured{background:var(--yellow);color:var(--on-accent)}.kpi i{font-style:normal;font-size:23px}.kpi span{color:var(--muted);font-weight:650}.kpi.featured span,.kpi.featured small{color:var(--on-accent)}.kpi strong{font-size:28px}.kpi.featured strong{font-size:32px}.section-title{margin:30px 0 14px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quick-grid a{background:var(--panel);border:1px solid var(--line);padding:18px;border-radius:var(--radius-card);display:flex;align-items:center;gap:14px;text-decoration:none;box-shadow:var(--shadow-card)}.quick-grid a:hover{border-color:var(--yellow);transform:translateY(-1px)}.quick-grid i{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:var(--panel2);font-style:normal;font-size:20px}.quick-grid span{display:grid;gap:3px;flex:1}.quick-grid small{color:var(--muted)}.quick-grid em{font-style:normal;font-size:25px;color:var(--yellow)}label{display:grid;gap:7px;font-weight:650}input,select,textarea{width:100%;padding:11px;background:var(--field);color:var(--field-ink);border:1px solid var(--field-line);border-radius:var(--radius-btn);font:inherit}input::placeholder,textarea::placeholder{color:var(--field-muted);opacity:1}input:focus,select:focus,textarea:focus{outline:2px solid var(--yellow);outline-offset:1px}.check{display:flex;align-items:center}.check input{width:auto}form{display:grid;gap:15px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.wide{grid-column:1/-1}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.menu{text-decoration:none}.alert{padding:13px;border-radius:8px;margin-bottom:18px}.success{background:var(--ok-bg);color:var(--ok-ink)}.error{background:var(--err-bg);color:var(--err-ink)}.table-wrap{overflow:auto;margin-top:18px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;text-transform:uppercase}td a{color:var(--yellow)}.table-map,.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:18px}.table-card{display:grid;gap:8px;padding:22px;border-radius:var(--radius-card);text-decoration:none;background:var(--panel);border:2px solid;box-shadow:var(--shadow-card)}.table-card.livre{border-color:var(--green)}.table-card.ocupada{border-color:var(--yellow)}.ticket{background:var(--panel);border-radius:var(--radius-card);padding:18px;border-top:7px solid var(--yellow);box-shadow:var(--shadow-card)}.ticket.preparando{border-color:var(--info-ink)}.ticket.pronto{border-color:var(--green)}.ticket header{display:flex;justify-content:space-between}.note{background:var(--warn-bg);color:var(--warn-ink);padding:10px;border-radius:7px}.status{padding:4px 8px;border-radius:20px;background:var(--soft);color:var(--soft-ink)}.actions{display:flex;gap:12px;margin-top:18px}.total{font-size:28px;color:var(--yellow)}.mobile-nav{display:none}
.items-heading{margin-bottom:2px}.producao-linhas{display:grid;gap:10px}.producao-linha{display:grid;grid-template-columns:1.5fr 1fr auto;gap:10px;align-items:center}.producao-linha .remove-linha{padding:11px 14px}#add-linha{margin-top:10px;width:fit-content}.hint{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ink);margin:0}.hint strong{color:var(--yellow,#ffc400)}.tipo-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}.tipo-badge.tipo-producao{background:var(--ok-bg);color:var(--ok-ink)}.tipo-badge.tipo-diarista{background:var(--soft);color:var(--soft-ink)}.digital-order-address{color:var(--muted);font-size:13px;margin:2px 0 8px}
@media(max-width:1050px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.sidebar{display:none}.workspace{width:100%;margin:0}.topbar{height:65px;padding:0 18px}.topbar>div:first-child{display:none}.container{padding:22px 14px 110px;max-width:100%}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;justify-items:stretch;inset:auto 0 0;background:var(--panel);border-top:1px solid var(--line);height:68px;z-index:20}.mobile-nav a,.mobile-nav button{display:grid;place-items:center;align-content:center;justify-items:center;gap:3px;min-width:0;width:100%;height:100%;text-decoration:none;color:var(--muted);background:transparent;border:0;border-radius:0;padding:0;font:inherit;font-weight:400}.mobile-nav small{font-size:10px}.mobile-nav a:active,.mobile-nav button:active{color:var(--yellow)}.page-heading{align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.actions{flex-direction:column}.producao-linha{grid-template-columns:1fr}.product-card h3{font-size:14px;line-height:1.3;word-break:break-word;overflow-wrap:break-word}.product-card p{font-size:12px}.card{padding:16px;word-break:break-word}input,select,textarea{padding:9px;font-size:16px}table{font-size:12px}th,td{padding:8px 6px;font-size:11px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table th{white-space:nowrap}table td{white-space:nowrap}table td.wrap{white-space:normal;word-break:break-word;min-width:140px}.report-filter{margin-bottom:16px}.report-kpis{grid-template-columns:1fr}}
.warning{background:var(--warn-bg);color:var(--warn-ink)}.product-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px;margin-top:20px}.product-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:13px;display:grid;gap:7px;box-shadow:var(--shadow-card)}.product-card.disabled{opacity:.55}.product-photo{height:135px;border-radius:9px;background:var(--panel2);display:grid;place-items:center;overflow:hidden}.product-photo img{width:100%;height:100%;object-fit:cover}.product-photo span{font-size:48px}.product-card h3,.product-card p{margin:0}.product-card small,.product-card p{color:var(--muted)}.product-card strong{color:var(--yellow);font-size:18px}.product-card code{color:var(--muted)}/* Linha inteira pintada vira um bloco de cor quando muitos itens estao
   em alerta, e ai nenhum se destaca. A faixa lateral marca sem cobrir. */
.low-stock td:first-child{box-shadow:inset 3px 0 0 var(--err-ink)}
.low-stock{background:color-mix(in srgb,var(--err-bg) 45%,transparent)}.alert-status{background:var(--err-bg);color:var(--err-ink)}.ok-status{background:var(--ok-bg);color:var(--ok-ink)}@media(max-width:480px){.page-heading{display:grid}.page-heading .button{width:100%}.kpi-grid{grid-template-columns:1fr 1fr}.kpi{min-height:112px;padding:16px}.kpi.featured{grid-column:1/-1}.kpi strong{font-size:23px}.title-row{align-items:flex-start}.product-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.product-photo{height:110px}}
@media(max-width:780px){button[style*="bottom:18px"][style*="position:fixed"]{bottom:82px!important;right:10px!important;max-width:calc(100vw - 20px);padding:9px 12px;font-size:12px}button[style*="bottom:72px"][style*="position:fixed"]{bottom:128px!important;right:10px!important;max-width:calc(100vw - 20px);padding:9px 12px;font-size:12px}}
@media(display-mode:standalone){#installPwa{display:none!important}}
@media(max-width:780px){button:disabled[style*="bottom:72px"][style*="position:fixed"]{display:none!important}button[style*="bottom:18px"][style*="position:fixed"]{bottom:80px!important;right:10px!important;max-width:72vw!important;min-height:42px;padding:8px 11px!important;font-size:12px!important;border-radius:10px!important}button[style*="bottom:72px"][style*="position:fixed"]:not(:disabled){bottom:128px!important;right:10px!important;max-width:72vw!important;padding:8px 11px!important;font-size:12px!important}}
.payment-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.link-btn{background:none;border:0;color:var(--yellow);padding:0;font:600 12px inherit;text-decoration:underline;cursor:pointer}.inline-form{display:flex;flex-direction:row;gap:8px;align-items:center;width:100%}.inline-form select{width:auto}.debt-modal-backdrop[hidden]{display:none}.debt-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:50;padding:16px}.debt-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:24px}.debt-modal h2{margin-top:0}.debt-modal .close-btn{float:right}.debt-item-list{margin:0 0 14px;padding-left:18px;color:var(--muted);font-size:13px}.debt-account{border-top:1px solid var(--line);padding:10px 0}.client-actions{display:flex;gap:8px;flex-wrap:wrap}

.whatsapp-debt{border-color:var(--ok-ink)!important}.client-actions .whatsapp-debt{font-weight:700}.debt-modal .whatsapp-debt{display:inline-flex;align-items:center;justify-content:center}

.whatsapp-debt.is-disabled{opacity:.55;cursor:not-allowed}

/* V4.2 — Clientes responsivo: preserva a tabela no desktop e transforma cada cliente em card no mobile. */
@media(max-width:780px){
  .client-list{overflow:visible;padding:12px;}
  .client-list table,.client-list tbody{display:block;width:100%;}
  .client-list thead{display:none;}
  .client-list tr{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:12px;}
  .client-list td{display:block;border:0;padding:7px 4px;white-space:normal;font-size:13px;overflow-wrap:anywhere;}
  .client-list td::before{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px;}
  .client-list td:nth-child(1)::before{content:'Cliente';}
  .client-list td:nth-child(2)::before{content:'Contato';}
  .client-list td:nth-child(3)::before{content:'Fiado';}
  .client-list td:nth-child(4)::before{content:'Saldo aberto';}
  .client-list td:nth-child(5)::before{content:'Ações';}
  .client-list td:nth-child(1) strong{font-size:15px;}
  .client-list td:nth-child(4){font-size:16px;font-weight:800;color:var(--yellow);}
  .client-list .client-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .client-list .client-actions .button{width:100%;min-height:42px;padding:10px 8px;text-align:center;}
  .client-list .client-actions .whatsapp-debt{grid-column:1/-1;}
  .client-list small{overflow-wrap:anywhere;}
  .debt-modal-backdrop{padding:8px;align-items:end;}
  .debt-modal{width:100%;max-width:none;max-height:92vh;border-radius:14px;padding:16px;}
  .debt-modal .form-grid{grid-template-columns:1fr;}
  .debt-modal .wide{grid-column:auto;}
  .debt-modal .button,.debt-modal button{width:100%;min-height:44px;}
  .debt-account{padding:12px 0;}
  .debt-account p{overflow-wrap:anywhere;line-height:1.45;}
  .debt-item-list{padding-left:18px;overflow-wrap:anywhere;}
  .debt-modal .whatsapp-debt{width:100%;min-height:44px;}
}
@media(max-width:480px){
  .client-list{padding:10px;}
  .client-list .client-actions{grid-template-columns:1fr;}
  .client-list .client-actions .whatsapp-debt{grid-column:auto;}
  .debt-modal{padding:14px;}
}

/* V4.2.1 — contadores mobile: evita compressão e quebra de palavras. */
@media(max-width:780px){
  .quick-grid{grid-template-columns:1fr!important;gap:12px;}
  .quick-grid a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding:14px 15px;overflow:hidden;}
  .quick-grid a i{width:48px;height:48px;flex:0 0 48px;}
  .quick-grid a span{min-width:0;display:grid;gap:4px;}
  .quick-grid a span strong,.quick-grid a span small{min-width:0;overflow-wrap:normal;word-break:normal;white-space:normal;}
  .quick-grid a em{min-width:58px;justify-self:end;display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 10px;border-radius:10px;background:var(--panel2);white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:22px;}
}
@media(max-width:390px){
  .quick-grid a{grid-template-columns:42px minmax(0,1fr);min-height:68px;}
  .quick-grid a i{width:42px;height:42px;flex-basis:42px;}
  .quick-grid a em{grid-column:1/-1;justify-self:stretch;min-height:38px;font-size:18px;}
}

/* ===========================================================
   V4.9 — Barra lateral em grupos.
   -----------------------------------------------------------
   O menu do administrador tinha 41 itens numa lista unica, com
   um separador no meio — dai a rolagem na propria lateral.
   Agora sao seis grupos que abrem e fecham, e a lateral inteira
   encolhe para a faixa de icones.
   =========================================================== */

.nav-grupo{display:block}
.nav-grupo>summary{
 list-style:none;
 cursor:pointer;
 display:flex;
 align-items:center;
 gap:7px;
 padding:15px 13px 6px;
 color:var(--muted);
 text-transform:uppercase;
 font-size:10px;
 letter-spacing:1.4px;
 font-weight:700;
 user-select:none;
}
.nav-grupo>summary::-webkit-details-marker{display:none}
/* A seta gira ao abrir. E o unico aviso de que o titulo e clicavel, entao
   precisa estar sempre visivel — mas discreta, para nao competir com os
   itens de verdade. */
.nav-grupo>summary::after{
 content:'\203a';
 margin-left:auto;
 font-size:15px;
 line-height:1;
 transform:rotate(90deg);
 transition:transform .15s;
}
.nav-grupo[open]>summary::after{transform:rotate(-90deg)}
.nav-grupo>summary:hover{color:var(--sidebar-ink,var(--muted))}
.nav-grupo-itens{display:grid;gap:5px}

/* O botao de encolher fica no alto, junto da marca. */
.nav-encolher{
 align-self:flex-end;
 margin:-6px -4px 6px 0;
 width:28px;height:28px;
 display:grid;place-items:center;
 border:1px solid var(--line);
 border-radius:8px;
 background:transparent;
 color:var(--muted);
 font:inherit;
 font-size:14px;
 line-height:1;
 cursor:pointer;
}
.nav-encolher:hover{color:var(--sidebar-ink,var(--muted));border-color:var(--line)}

/* ---- modo so-icones ---- */
body.menu-mini .sidebar{width:62px;padding:24px 8px}
body.menu-mini .workspace{margin-left:62px;width:calc(100% - 62px)}
body.menu-mini .sidebar .brand span:last-child,
body.menu-mini .nav-grupo>summary,
body.menu-mini .logout{font-size:0}
body.menu-mini .side-nav a{justify-content:center;padding:11px 0;gap:0}
/* O texto do item vira zero, mas o icone continua inteiro. */
body.menu-mini .side-nav a{font-size:0}
body.menu-mini .side-nav a i{font-size:17px}
body.menu-mini .logout{justify-content:center;padding:11px 0}
body.menu-mini .logout::before{content:'\21aa';font-size:17px}
body.menu-mini .nav-encolher{align-self:center;margin:0 0 8px}
/* No modo icone o grupo vira um icone so. Antes eu deixava todos abertos a
   forca, e a faixa passava de vinte simbolos empilhados — o contrario do
   que o modo icone existe para fazer. Fechado, o grupo ocupa uma linha;
   clicado, abre os itens dele ali mesmo. */
body.menu-mini .nav-grupo>summary{
 justify-content:center;
 padding:11px 0;
 font-size:0;
 letter-spacing:0;
}
body.menu-mini .nav-grupo>summary i{font-size:17px}
body.menu-mini .nav-grupo>summary span{display:none}
body.menu-mini .nav-grupo>summary::after{display:none}
body.menu-mini .nav-grupo[open]>summary{color:var(--yellow)}
body.menu-mini .sidebar .brand{justify-content:center;gap:0}

@media(max-width:780px){.nav-encolher{display:none}body.menu-mini .workspace{margin-left:0;width:100%}}

/* O icone do grupo so aparece no modo compacto; no menu aberto o titulo
   basta, e um icone ali competiria com os itens de verdade. A segunda regra
   e obrigatoria: sem ela, o "display:none" daqui vale tambem no compacto, e
   o icone — unica coisa que sobra la — some junto. */
.nav-grupo>summary i{display:none}
body.menu-mini .nav-grupo>summary i{display:block;font-size:17px}

/* ===========================================================
   V5.0 — Ajustes em coluna propria.
   -----------------------------------------------------------
   Onze telas de configuracao empilhadas dentro do menu faziam
   a lateral crescer e o resto sumir da vista. Aqui elas viram
   uma segunda coluna, que continua visivel enquanto a pessoa
   anda entre as telas de ajuste.
   =========================================================== */

.com-ajustes{display:flex;align-items:flex-start;gap:0}
.com-ajustes>.container{flex:1 1 auto;min-width:0}

.ajustes-nav{
 flex:0 0 268px;
 align-self:stretch;
 /* Sem isto a coluna termina no ultimo item e abre um degrau no meio da
    tela, como se tivesse acabado por engano. */
 min-height:calc(100vh - 56px);
 border-right:1px solid var(--line);
 padding:26px 14px 26px 22px;
 background:var(--panel);
}
.ajustes-nav-topo{padding:0 8px 6px}
.ajustes-nav-topo h2{margin:2px 0 3px;font-size:1.15rem}
.ajustes-nav-topo small{color:var(--muted)}
.ajustes-nav-secao{
 margin:20px 8px 7px;
 color:var(--muted);
 text-transform:uppercase;
 font-size:10px;
 letter-spacing:1.4px;
 font-weight:700;
}
.ajustes-nav a{
 display:flex;
 align-items:flex-start;
 gap:11px;
 padding:10px 11px;
 border-radius:10px;
 text-decoration:none;
 color:var(--ink);
 margin-bottom:2px;
}
.ajustes-nav a i{font-style:normal;font-size:15px;line-height:1.35;opacity:.75}
.ajustes-nav a span{display:grid;gap:2px;min-width:0}
.ajustes-nav a strong{font-weight:600;font-size:.94rem}
/* A linha de explicacao e o que faz a diferenca numa area em que se entra
   uma vez por mes: "Empresa" sozinho nao diz se e onde se troca o logo, o
   horario ou o CNPJ. */
.ajustes-nav a small{color:var(--muted);font-size:.78rem;line-height:1.35}
.ajustes-nav a:hover{background:var(--panel2)}
.ajustes-nav a.ativo{background:var(--panel2)}
.ajustes-nav a.ativo strong{color:var(--yellow)}
.ajustes-nav a.ativo i{opacity:1}

@media(max-width:980px){
 /* Em tela estreita duas colunas viram duas colunas espremidas. A coluna
    de ajustes passa a ser uma faixa que rola na horizontal, em cima. */
 .com-ajustes{flex-direction:column}
 .ajustes-nav{
  flex:0 0 auto;
  width:100%;
  /* A altura minima da coluna nao pode sobreviver aqui: virando faixa, ela
     empurraria o conteudo uma tela inteira para baixo. */
  min-height:0;
  align-self:auto;
  border-right:0;
  border-bottom:1px solid var(--line);
  padding:14px;
  display:flex;
  gap:8px;
  overflow-x:auto;
 }
 .ajustes-nav-topo,.ajustes-nav-secao{display:none}
 .ajustes-nav a{flex:0 0 auto;margin:0}
 .ajustes-nav a small{display:none}
}

/* ===========================================================
   V5.1 — Visao do salao.
   -----------------------------------------------------------
   A tela de Mesas respondia "onde esta o QR code desta mesa",
   que e pergunta de instalacao. No movimento, a pergunta e
   outra: quais estao ocupadas, ha quanto tempo, e quanto ja
   consumiram.
   =========================================================== */

.salao-resumo{
 display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
 padding:13px 16px;margin:0 0 16px;
 background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
 font-size:.92rem;color:var(--muted);
}
.salao-resumo b{color:var(--ink);font-size:1.05rem}
.salao-resumo .livre b{color:var(--ok-ink)}
.salao-resumo .ocupada b{color:var(--err-ink)}
.salao-resumo .aberto{margin-left:auto;color:var(--yellow);font-weight:700}

.table-map.salao{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:12px;
}
.salao-card{
 display:flex;flex-direction:column;align-items:center;gap:3px;
 padding:14px 12px 16px;
 border-radius:var(--radius-card);
 border:1px solid var(--line);
 background:var(--panel);
 text-decoration:none;color:var(--ink);
 min-height:132px;
}
.salao-card-topo{display:flex;width:100%;align-items:center;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px}
.salao-situacao{font-weight:800}
.salao-tempo{color:var(--muted);letter-spacing:0;text-transform:none;font-size:.8rem}
/* O numero grande e o que permite ler a tela de longe, de pe. */
.salao-numero{font-size:2.6rem;line-height:1.05;font-weight:800;margin:2px 0}
.salao-valor{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.salao-cliente,.salao-livre{color:var(--muted);font-size:.8rem;text-align:center;line-height:1.25}
.salao-premio{
 margin-top:6px;font-size:.74rem;font-weight:700;
 padding:3px 8px;border-radius:20px;
 background:rgba(255,196,0,.16);color:var(--yellow);
 text-align:center;
}

/* Cor no cartao inteiro: e assim que se conta mesa livre de relance. */
.salao-card.livre{background:rgba(85,200,120,.07);border-color:rgba(85,200,120,.3)}
.salao-card.livre .salao-situacao{color:var(--ok-ink)}
.salao-card.ocupada{background:rgba(255,120,100,.09);border-color:rgba(255,120,100,.35)}
.salao-card.ocupada .salao-situacao{color:var(--err-ink)}
.salao-card:hover{border-color:var(--yellow)}

/* Os QR codes continuam disponiveis, mas fechados: sao de instalacao, e
   estavam ocupando o lugar da informacao do dia. */
.salao-qrs{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);padding:14px 16px}
.salao-qrs>summary{cursor:pointer;font-weight:700}
.salao-qr-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:14px}
.salao-qr{text-align:center;padding:12px;border:1px solid var(--line);border-radius:10px}
.salao-qr b{display:block;margin-bottom:8px}
.salao-qr .table-qr{display:flex;justify-content:center;margin-bottom:8px}

@media(max-width:600px){
 .table-map.salao{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
 .salao-numero{font-size:2.1rem}
 .salao-resumo .aberto{margin-left:0;width:100%}
}

/* A barra de topo do salao: titulo e contagens de um lado, filtros e acoes
   do outro, tudo numa linha so. As contagens viram pilulas porque sao lidas
   de relance, nao decoradas. */
.salao-barra{
 display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
 padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.salao-barra-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.salao-barra-titulo h1{margin:0;font-size:1.35rem}
.salao-barra .pill{
 padding:4px 11px;border-radius:20px;font-size:.8rem;font-weight:700;
 background:var(--panel2,#202324);color:var(--muted);
}
.salao-barra .pill.verde{background:rgba(85,200,120,.14);color:var(--ok-ink)}
.salao-barra .pill.vermelha{background:rgba(255,120,100,.14);color:var(--err-ink)}
.salao-barra .pill.ouro{background:rgba(255,196,0,.14);color:var(--yellow)}
.salao-barra-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* O width:auto e obrigatorio: a regra geral de formulario estica todo
   select para 100%, e aqui isso jogava os botoes para a linha de baixo. */
.salao-barra-acoes select{padding:8px 11px;font-size:.88rem;width:auto;min-width:150px}
.salao-icone{
 flex:0 0 auto;width:38px;height:38px;
 display:grid;place-items:center;
 border:1px solid var(--line);border-radius:10px;
 background:var(--panel);color:var(--muted);
 text-decoration:none;font:inherit;font-size:17px;cursor:pointer;
}
.salao-icone:hover{color:var(--yellow);border-color:var(--yellow)}
.salao-card-fim{display:flex;align-items:center;gap:7px}
.salao-lugares{color:var(--muted);letter-spacing:0;text-transform:none;font-size:.78rem}
.salao-vazio{margin-top:18px}

@media(max-width:700px){
 .salao-barra-acoes{width:100%}
 .salao-barra-acoes select{flex:1 1 auto;min-width:0}
}

/* ===========================================================
   V5.2 — Plaquinhas de QR code das mesas.
   -----------------------------------------------------------
   Antes os QR codes saiam como quadradinhos soltos, sem nome
   da casa e sem como imprimir direito. Aqui eles viram
   plaquinhas prontas, em dois temas e dois formatos, e a
   impressao do navegador gera o PDF.
   =========================================================== */

.qr-cabecalho{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.qr-opcoes .qr-grupo{padding:14px 0;border-top:1px solid var(--line)}
.qr-opcoes .qr-grupo:first-of-type{border-top:0;padding-top:4px}
.qr-rotulo{display:block;margin-bottom:9px;font-weight:700;font-size:.9rem}
.qr-rotulo small{font-weight:400;color:var(--muted)}
.qr-botoes{display:flex;gap:8px;flex-wrap:wrap}
.qr-botoes button{
 padding:11px 16px;border:1px solid var(--line);border-radius:10px;
 background:var(--panel2,#202324);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;
}
.qr-botoes button.on{background:var(--yellow);color:var(--on-accent);border-color:var(--yellow)}
.qr-checks{display:flex;gap:16px;flex-wrap:wrap}
.qr-checks label{display:flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.qr-frase{max-width:420px}
.qr-mesas{display:flex;gap:7px;flex-wrap:wrap}
.qr-mesa-chip{position:relative;cursor:pointer}
.qr-mesa-chip input{position:absolute;opacity:0;width:0;height:0}
.qr-mesa-chip span{
 display:grid;place-items:center;min-width:44px;padding:9px 12px;
 border:1px solid var(--line);border-radius:9px;background:var(--panel2,#202324);font-weight:700;
}
.qr-mesa-chip.on span{background:var(--yellow);color:var(--on-accent);border-color:var(--yellow)}
.qr-acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.qr-acoes button{padding:14px 22px;font-weight:800}

/* ---- as plaquinhas ---- */
.qr-folha{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
.qr-plaquinha{
 display:flex;flex-direction:column;align-items:center;gap:8px;
 padding:22px 16px;border-radius:14px;text-align:center;
 background:#fff;color:var(--on-accent);border:1px solid var(--line);
}
.qr-folha[data-tema="escuro"] .qr-plaquinha{background:#141414;color:#f4f2ef}
.qr-folha[data-formato="etiqueta"] .qr-plaquinha{padding:14px 10px;gap:5px}
.qr-logo{max-height:46px;max-width:60%;object-fit:contain}
.qr-casa{font-weight:800;font-size:1.05rem;line-height:1.2}
/* O QR nasce em 512px e e reduzido aqui: na impressao vale a resolucao da
   imagem, nao o tamanho na tela. */
.qr-imagem img,.qr-imagem canvas{width:100%;max-width:170px;height:auto;display:block;background:#fff;padding:7px;border-radius:6px}
.qr-folha[data-formato="etiqueta"] .qr-imagem img,
.qr-folha[data-formato="etiqueta"] .qr-imagem canvas{max-width:130px}
.qr-numero{font-weight:800;font-size:1.15rem}
.qr-chamada{font-size:.82rem;opacity:.75;line-height:1.3}
.qr-baixar{
 margin-top:4px;padding:5px 11px;border:1px solid currentColor;border-radius:7px;
 background:transparent;color:inherit;font:inherit;font-size:.76rem;opacity:.6;cursor:pointer;
}
.qr-baixar:hover{opacity:1}
.qr-folha.sem-logo .qr-logo,
.qr-folha.sem-nome .qr-casa,
.qr-folha.sem-numero .qr-numero,
.qr-folha.sem-chamada .qr-chamada{display:none}

/* ---- impressao ---- */
@media print{
 /* A FOLHA PADRAO DO SISTEMA E A4.
    Aqui havia @page{size:10cm 15cm}, escrito para a plaquinha de mesa. So que
    @page nao se limita a uma tela: vale para a pagina inteira, em qualquer
    lugar do sistema. Relatorio, pre-conta e conferencia de caixa saiam
    impressos num cartao de 10 por 15 centimetros, cortados — o que o dono
    descreve como "sai parecendo print de tela".
    Agora o cartao e uma pagina NOMEADA, pedida so por quem e cartao. */
 @page{size:A4 portrait;margin:14mm 12mm}
 @page cartao{size:10cm 15cm;margin:6mm}
 .sidebar,.topbar,.app-footer,.no-print,.ajustes-nav,.qr-baixar,.mobile-nav{display:none!important}
 /* O cabecalho FICA: e ele que diz o que e aquele papel. Escondido, a
    folha saia sem titulo, sem loja e sem periodo. */
 .page-heading{display:block!important;margin:0 0 10mm;padding-bottom:4mm;border-bottom:1.5pt solid #333}
 .page-heading h1{font-size:17pt;margin:0 0 2mm;color:#000}
 .page-heading p{color:#444;margin:0;font-size:9.5pt}
 .page-heading .eyebrow{color:#666;font-size:8pt;letter-spacing:1.2px}
 .page-heading button,.page-heading .button,.page-heading a.button{display:none!important}
 .workspace,.app-shell,.container,.com-ajustes{margin:0!important;padding:0!important;width:100%!important;display:block!important}
 body{background:#fff}
 .qr-folha{display:block;margin:0}
 /* Uma plaquinha por folha no totem; na etiqueta elas se acomodam juntas. */
 .qr-plaquinha{
  page:cartao;
  border:0;border-radius:0;
  page-break-after:always;break-after:page;
  height:calc(15cm - 12mm);justify-content:center;
 }
 .qr-plaquinha[hidden]{display:none!important}
 .qr-imagem img,.qr-imagem canvas{max-width:7cm}
 .qr-folha[data-formato="etiqueta"] .qr-plaquinha{
  height:auto;page-break-after:auto;break-after:auto;
  display:inline-flex;width:6cm;vertical-align:top;
 }
 .qr-folha[data-formato="etiqueta"] .qr-imagem img,
 .qr-folha[data-formato="etiqueta"] .qr-imagem canvas{max-width:4cm}
}

/* ===========================================================
   V5.3 — Modulo de gestao de estoque.
   =========================================================== */

.epro-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.epro-selo{
 padding:6px 13px;border-radius:20px;font-size:.8rem;font-weight:700;white-space:nowrap;
 background:rgba(85,200,120,.14);color:var(--ok-ink);
}
.epro-selo.inativo{background:rgba(255,120,100,.14);color:var(--err-ink)}

.epro-abas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.epro-abas a,.epro-abas span{
 padding:11px 15px;border-bottom:2px solid transparent;margin-bottom:-1px;
 color:var(--muted);text-decoration:none;font-weight:600;font-size:.93rem;white-space:nowrap;
}
.epro-abas a:hover{color:var(--ink)}
.epro-abas .ativa{color:var(--yellow);border-bottom-color:var(--yellow)}
.epro-abas.apagadas span{opacity:.45;cursor:default}

.epro-numeros{margin-bottom:18px}
.epro-numeros .kpi.alerta strong{color:var(--warn-ink)}
.epro-numeros .kpi.ruim strong{color:var(--err-ink)}

.epro-colunas{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.epro-filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0}
.epro-filtros input[name=q]{flex:1 1 240px;width:auto}
.epro-filtros select{width:auto;min-width:180px}

.epro-tipo{padding:3px 9px;border-radius:14px;font-size:.76rem;font-weight:700;white-space:nowrap}
.epro-tipo.entrada{background:rgba(85,200,120,.15);color:var(--ok-ink)}
.epro-tipo.saida{background:rgba(255,196,0,.15);color:var(--yellow)}
.epro-tipo.perda{background:rgba(255,120,100,.15);color:var(--err-ink)}
.epro-tipo.ajuste{background:var(--panel2,#202324);color:var(--muted)}

/* O dialogo nativo do navegador: nao precisa de biblioteca, ja vem com
   fundo escurecido, foco preso dentro e fechar no Esc. */
.epro-dialogo{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:22px;max-width:440px;width:92%}
.epro-dialogo::backdrop{background:#000b}
.epro-dialogo h2{margin:0 0 14px;font-size:1.15rem}
.epro-dialogo label{display:block;margin-bottom:12px;font-weight:600;font-size:.9rem}
.epro-dialogo input,.epro-dialogo select{margin-top:5px}
.epro-dialogo small{display:block;font-weight:400;color:var(--muted);margin-top:4px}
.epro-dialogo-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

/* ---- vitrine ---- */
/* Os blocos que abrem e fecham dentro de um cartao: cadastro em lote e
   criar insumo na hora. Ficam fechados porque sao atalho, nao o caminho
   comum — mas precisam ser vistos por quem esta com trabalho pela frente. */
.epro-rapido{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin-top:16px}
.epro-rapido>summary{cursor:pointer;font-weight:700;font-size:.92rem}
.epro-rapido>p{margin:10px 0}
.epro-dica{padding:11px 14px;margin:0 0 14px;border-radius:10px;line-height:1.5;font-size:.9rem;
 background:rgba(255,196,0,.09);border:1px solid rgba(255,196,0,.28);color:var(--muted)}

/* O resumo da receita: custo, preco e margem lado a lado. E a linha que o
   dono le primeiro ao abrir uma ficha. */
.ficha-resumo{display:flex;gap:26px;flex-wrap:wrap;padding:14px 16px;margin-top:14px;
 background:var(--panel2,#202324);border-radius:var(--radius-card);color:var(--muted);font-size:.92rem}
.ficha-resumo strong{display:block;font-size:1.25rem;color:var(--ink);margin-top:2px}
.ficha-resumo .ok{color:var(--ok-ink)}
.ficha-resumo .aviso,b.aviso{color:var(--warn-ink)}
.ficha-resumo .alert{color:var(--err-ink)}

.epro-vitrine-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:14px 0 4px}
.epro-vitrine-grade h3{margin:0 0 6px;font-size:1rem;color:var(--yellow)}
.epro-vitrine-grade p{margin:0;color:var(--muted);line-height:1.55;font-size:.92rem}
.epro-vitrine-nota{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);line-height:1.6}

@media(max-width:900px){
 .epro-colunas{grid-template-columns:1fr}
 .epro-abas{overflow-x:auto;flex-wrap:nowrap}
}

/* ===========================================================
   V5.4 — Modulo Pizza.
   =========================================================== */

/* A grade de precos e a tabela que esta pendurada na parede da pizzaria:
   uma coluna por tamanho, e celula vazia querendo dizer "nao vendo assim". */
.pizza-precos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.pizza-precos label{display:block;margin:0;font-size:.88rem;font-weight:600}
.pizza-precos input{margin-top:5px;font-variant-numeric:tabular-nums}

.pizza-regra{
 display:flex;gap:12px;align-items:flex-start;
 padding:14px 16px;margin-bottom:10px;
 border:1px solid var(--line);border-radius:12px;cursor:pointer;
}
.pizza-regra.on{border-color:var(--yellow);background:rgba(255,196,0,.07)}
.pizza-regra input{margin-top:3px;width:20px;height:20px;accent-color:var(--yellow)}
.pizza-regra span{display:grid;gap:4px}
.pizza-regra strong{font-size:1rem}
.pizza-regra small{color:var(--muted);line-height:1.5}

/* ---- montador de pizza ---- */
.montar-pizza{
 display:inline-flex;align-items:center;gap:7px;
 padding:11px 16px;margin-right:9px;border-radius:11px;
 background:var(--panel2,#202324);border:1px solid var(--line);
 color:var(--ink);text-decoration:none;font-weight:700;
}
.montar-pizza:hover{border-color:var(--yellow);color:var(--yellow)}

.pz-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.pz-op{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);
 border-radius:12px;cursor:pointer;margin:0}
.pz-op.on{border-color:var(--yellow);background:rgba(255,196,0,.08)}
.pz-op input{margin-top:3px;width:18px;height:18px;accent-color:var(--yellow)}
.pz-op span{display:grid;gap:3px;min-width:0}
.pz-op small{color:var(--muted);font-size:.8rem}

.pz-sabores{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;margin-bottom:14px}
.pz-sabor{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
 border-radius:12px;cursor:pointer;margin:0}
.pz-sabor.on{border-color:var(--yellow);background:rgba(255,196,0,.08)}
/* Sabor que nao sai naquele tamanho fica visivel e apagado: sumir com ele
   faria o atendente procurar por um sabor que "desapareceu". */
.pz-sabor.indisponivel{opacity:.4;cursor:not-allowed}
.pz-sabor input{margin-top:3px;width:19px;height:19px;accent-color:var(--yellow)}
.pz-sabor span{display:grid;gap:3px;min-width:0}
.pz-sabor small{color:var(--muted);font-size:.79rem;line-height:1.35}
.pz-sabor .pz-preco{color:var(--yellow);font-size:.86rem;font-variant-numeric:tabular-nums}

.pz-total{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:16px 18px;margin-top:16px;border-radius:12px;
 background:var(--panel2,#202324);border:1px solid var(--line)}
.pz-total strong{font-size:1.8rem;color:var(--yellow);font-variant-numeric:tabular-nums}

@media(max-width:600px){
 .pz-sabores{grid-template-columns:1fr}
 .pz-total strong{font-size:1.5rem}
}

/* O card do tamanho nao adiciona item: ele abre o montador. Por isso e um
   link, e precisa parecer com os outros cards mesmo sem ser um <form>. */
.pizza-card{display:block;text-decoration:none;color:inherit}
.pizza-card .sale-product-info strong{color:var(--yellow)}

.pz-sem-preco{margin:0 0 14px;padding:13px 15px;border-radius:11px;
 background:rgba(255,196,0,.09);border:1px solid var(--yellow);line-height:1.5}
.pz-sem-preco a{color:var(--yellow)}

/* Aviso do combo na comanda: aparece só quando o combo já vale para aquela
   conta, então precisa chamar atenção sem competir com o botão da pizza. */
.combo-aviso{display:inline-block;padding:6px 11px;border-radius:9px;background:var(--soft);
 color:var(--soft-ink);font-size:12.5px;font-weight:600;line-height:1.3}

/* ===========================================================
   CELULAR — o que fazia a tela vazar para o lado.
   -----------------------------------------------------------
   Duas causas, encontradas medindo as telas a 375px de largura
   (o tamanho de um celular comum), uma por uma.

   1. TABELA MAIS LARGA QUE A TELA. Relatórios e Inventário têm
      colunas que não cabem. Antes elas esticavam a página
      inteira e o resto do conteúdo saía da vista. Agora a
      tabela rola sozinha, na horizontal, e a página fica
      parada — é o comportamento que a pessoa espera de uma
      tabela grande no telefone.

   2. ITEM DE GRADE QUE NÃO ENCOLHE. Por padrão um item de
      grid ou flex nunca fica menor que o conteúdo dele, então
      uma palavra comprida ou um campo largo empurra a coluna
      inteira para fora. min-width:0 devolve a permissão de
      encolher.

   Nada disso vale na impressão nem no computador.
   =========================================================== */
@media(max-width:780px){
 /* Quem rola e o CARD, nao a tabela nem a pagina.
    Transformar a tabela em bloco foi erro meu duas vezes: com largura de
    100% ela espreme as colunas, e com largura natural ela estica a pagina.
    Deixando a tabela como tabela, no tamanho que ela precisa, e dando a
    rolagem ao card em volta, a pagina fica parada e as colunas inteiras. */
 /* A folha do inventario nao e um .card: ela tem classe propria. */
 .card:has(table),.table-wrap,.inv-folha{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .card table,.table-wrap table,.inv-tabela{min-width:max-content}
 .settings-grid,.kpi-grid,.quick-grid,.cash-operation-grid,.form-grid,.identity-fields,
 .settings-grid>*,.kpi-grid>*,.quick-grid>*,.cash-operation-grid>*,.form-grid>*,.identity-fields>*{
  min-width:0;
 }
}
@media(max-width:780px){
 /* O card do produto: a coluna interna ficava 10px mais larga que o card,
    porque o nome do produto não tem onde quebrar. */
 .product-card,.product-card>*{min-width:0}
 .product-card h3,.product-card .product-meta{overflow-wrap:anywhere}
 /* O cabeçalho de Vendas: título e legenda lado a lado não cabem em 375px
    e não tinham permissão de passar para a linha de baixo. */
 .sales-hub-header{flex-wrap:wrap}
 .sales-hub-header>*{min-width:0}
}
@media(max-width:780px){
 /* Inteligência: o formulário de período (duas datas e o botão) fica numa
    linha só e passa 38px da tela. Quebrando a linha, os campos continuam
    do mesmo tamanho e o botão desce. */
 .intel-periodo,.intel-datas{flex-wrap:wrap}
 .intel-datas>*{min-width:0}
}


/* ===========================================================
   Faixa de pedido novo do cardápio digital.
   -----------------------------------------------------------
   Fica por cima do conteúdo, nunca empurrando a tela: quem
   está no meio de uma venda não pode ver os campos pularem de
   lugar porque entrou um pedido. No celular ela senta acima da
   barra de baixo, para não tapar os botões de navegação.
   =========================================================== */
.pedido-digital-aviso {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-accent, #111);
  font: 700 15px inherit;
  cursor: pointer;
  box-shadow: 0 10px 30px #0006;
  animation: pedido-digital-pulso 1.6s ease-in-out infinite;
}
.pedido-digital-aviso small { font-weight: 400; opacity: .75; }
.pedido-digital-aviso span { font-weight: 400; }
@keyframes pedido-digital-pulso {
  0%, 100% { box-shadow: 0 10px 30px #0006; }
  50%      { box-shadow: 0 10px 30px #0006, 0 0 0 6px color-mix(in srgb, var(--yellow) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pedido-digital-aviso { animation: none; }
}
@media (max-width: 860px) {
  /* A barra de baixo do celular tem 56px; a faixa senta acima dela. */
  .pedido-digital-aviso { bottom: 70px; font-size: 14px; padding: 10px 16px; }
}
@media print { .pedido-digital-aviso { display: none !important; } }

/* A bolinha com o número de pedidos esperando, no item do menu. */
.menu-conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-accent, #111);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


/* ===========================================================
   Bebida que sai de graça no combo com pizza.
   -----------------------------------------------------------
   O selo fica no card, e não só no aviso do alto: é no card
   que a pessoa clica. Apagado quando a cota da conta já foi
   usada, porque ali o preço cheio volta a valer e card
   dizendo "grátis" com a conta cobrando é pior do que selo
   nenhum.
   =========================================================== */
.sale-product-card .selo-combo {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  color: var(--yellow);
}
.sale-product-card .selo-combo.usado { color: var(--muted); font-weight: 400; }
.sale-product-card .preco-gratis { color: var(--yellow); letter-spacing: .5px; }

/* O botão da faixa do combo: lança a bebida de graça com um toque. */
.combo-botao {
  margin: 0 2px;
  padding: 3px 10px;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: transparent;
  color: var(--yellow);
  font: 700 12px inherit;
  cursor: pointer;
}
.combo-botao:hover { background: var(--yellow); color: var(--on-accent, #111); }


/* ===========================================================
   Atendente IA — a conversa e a folha de fatos.
   -----------------------------------------------------------
   O balão do cliente fica à esquerda e o do atendente à
   direita, como em qualquer aplicativo de mensagem: a pessoa
   lê sem precisar aprender nada.
   =========================================================== */
.atendente-chat { display: flex; flex-direction: column; gap: 14px; }
.chat-linha {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 460px; overflow-y: auto; padding: 4px;
}
.balao {
  max-width: 76%; padding: 11px 14px; border-radius: 14px;
  line-height: 1.5; font-size: 15px; position: relative;
}
.balao.de-cliente {
  align-self: flex-start; background: var(--bg); border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.balao.de-robo {
  align-self: flex-end; background: var(--yellow); color: var(--on-accent, #111);
  border-bottom-right-radius: 4px;
}
.balao .quando { display: block; margin-top: 5px; font-size: 11px; opacity: .65; }
/* O selo de "chamou uma pessoa" é o sinal mais importante da tela: é onde o
   atendente não soube, e é o que deve ser corrigido na configuração. */
.balao .marca-humano {
  display: inline-block; margin-top: 7px; padding: 2px 9px; border-radius: 999px;
  background: #0003; font-size: 11px; font-weight: 700;
}
.chat-envio { display: flex; gap: 10px; }
.chat-envio input { flex: 1; min-width: 0; }
.chat-limpar { align-self: flex-end; }

/* A folha de fatos aparece como texto puro de propósito: é exatamente o que a
   IA recebe, sem enfeite. Enfeitar aqui esconderia o que importa conferir. */
.atendente-fatos {
  margin: 0; padding: 16px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); font: 12.5px/1.6 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; max-height: 420px; overflow: auto;
}
@media (max-width: 700px) { .balao { max-width: 88%; } }