/* Sistema Fiuzpan — interface de balcão e produção: botões grandes, leitura rápida, celular primeiro */
:root{
  --bg:#FBF7F0; --surface:#FFFFFF; --crust:#F6EBD5; --fg:#2A1A14; --muted:#75625A; --line:#E7D9C3;
  --red:#DD101F; --red-ink:#B30D1A; --gold:#F2B92B;
  --good:#1F7A3D; --good-bg:#E3F3E7; --warn:#8A5A00; --warn-bg:#FDF0D2; --bad:#A3271B; --bad-bg:#FBE4E0;
  --font:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#18110E; --surface:#231915; --crust:#2E2119; --fg:#F4EADF; --muted:#BFAA9B; --line:#3B2B23;
  --red:#FF4A53; --red-ink:#FF6B72; --gold:#F5C24A;
  --good:#7FD69A; --good-bg:#1D3226; --warn:#F5C24A; --warn-bg:#3A2D12; --bad:#FF9C8C; --bad-bg:#3A221D; color-scheme:dark}}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--red-ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
h1{font-size:1.6rem;line-height:1.2;margin:.2rem 0 .6rem;text-wrap:balance}
h2{font-size:1.15rem;margin:1.4rem 0 .6rem}
h3{font-size:1rem;margin:1rem 0 .4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mudo{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.92em}

/* topo e menu */
.topo{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--red);color:#fff}
.marca{color:#fff;text-decoration:none;font-weight:800;font-size:1.05rem;white-space:nowrap}
.marca span{background:#fff;color:var(--red);padding:2px 8px;border-radius:6px;margin-right:4px}
.loja-sel{flex:1;min-width:160px}
.loja-sel select{width:100%;max-width:300px;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);padding:8px 10px;border-radius:8px;font:inherit;font-weight:700}
.loja-sel option{color:#111}
.sair{color:#fff;font-size:.9rem;white-space:nowrap}
.menu{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);scrollbar-width:none}
.menu a{flex:none;text-decoration:none;color:var(--fg);font-weight:700;padding:8px 14px;border-radius:999px}
.menu a.on{background:var(--crust);color:var(--red-ink)}
.conteudo{max-width:1100px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0px))}

/* blocos */
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.cartao h2:first-child{margin-top:0}
.grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.grade-etiqueta{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px}
@media (max-width:760px){.grade2,.grade-etiqueta{grid-template-columns:1fr}}
.titulo-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.numero{font-size:2rem;font-weight:800;margin:0;font-variant-numeric:tabular-nums}
.numero small{font-size:.9rem;font-weight:600;color:var(--muted)}
.atalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.atalhos{grid-template-columns:1fr}}
.atalho{display:grid;gap:2px;padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.atalho strong{font-size:1.05rem}
.atalho span{color:var(--muted);font-size:.9rem}
.atalho.principal{background:var(--red);border-color:var(--red);color:#fff}
.atalho.principal span{color:rgba(255,255,255,.85)}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.inativo{opacity:.55}

/* formulários */
.form label,.filtros label{display:block;font-weight:700;font-size:.9rem;margin:10px 0 4px}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-height:46px}
textarea{min-height:90px}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset[disabled] input,fieldset[disabled] select{opacity:.75}
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 14px}
.campos .largo{grid-column:span 2}
@media (max-width:480px){.campos .largo{grid-column:auto}}
.com-unidade{display:flex;align-items:center;gap:8px}
.com-unidade span{font-weight:700;color:var(--muted)}
.check{display:flex!important;align-items:center;gap:8px;font-weight:600!important}
.check input{width:auto;min-height:0}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filtros input{flex:2 1 220px}.filtros select{flex:1 1 150px;width:auto}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.acoes-linha{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.acoes-linha form{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg);font:700 1rem var(--font);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--gold)}
.btn.principal{background:var(--red);border-color:var(--red);color:#fff}
.btn.principal:hover{background:var(--red-ink)}
.btn.leve{background:transparent}
.btn.pequeno{min-height:36px;padding:6px 12px;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.itens{display:grid;gap:8px}
.item{display:grid;grid-template-columns:minmax(0,1fr) 110px 46px;gap:8px}
.tamanhos{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.chip:has(input:checked){background:var(--red);border-color:var(--red);color:#fff}
.chip input{width:auto;min-height:0;margin:0;accent-color:var(--red)}
details{width:100%;margin-top:6px}
summary{cursor:pointer;font-weight:700;color:var(--red-ink);padding:6px 0}

/* tabelas */
.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tabela{width:100%;border-collapse:collapse;font-size:.95rem}
.tabela th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.dir{text-align:right}
.neg{color:var(--bad)}.pos{color:var(--good)}

/* estados */
.pilula{display:inline-block;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pilula.bom{background:var(--good-bg);color:var(--good)}
.pilula.atencao{background:var(--warn-bg);color:var(--warn)}
.pilula.ruim{background:var(--bad-bg);color:var(--bad)}
.flash{padding:12px 14px;border-radius:10px;margin:0 0 14px;font-weight:600}
.flash.ok{background:var(--good-bg);color:var(--good)}
.flash.erro{background:var(--bad-bg);color:var(--bad)}
.aviso{padding:14px;border-radius:10px;background:var(--warn-bg);color:var(--warn)}

/* etiqueta */
.previa{overflow:auto}
.etiqueta-previa{padding:16px;background:repeating-conic-gradient(var(--crust) 0 25%,transparent 0 50%) 0 0/16px 16px;border-radius:10px;overflow-x:auto}
.etiqueta-previa svg{display:block;max-width:100%;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.18);border-radius:4px}

/* login */
.login{max-width:380px;margin:8vh auto 0;display:grid;gap:16px}
.login-marca{text-align:center;font-weight:800;font-size:1.3rem;color:var(--red)}
.login-marca span{background:var(--red);color:#fff;padding:3px 10px;border-radius:8px;margin-right:6px}
.login .btn{width:100%;margin-top:16px}

/* usuários: módulos, perfis e dias */
.perfis{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.modulos{display:grid;gap:6px}
.modulo{align-items:flex-start!important;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:0!important}
.modulo input{margin-top:4px}
.modulo span{display:grid}
.modulo small{font-weight:400}
.modulo:has(input:checked){border-color:var(--red);background:var(--crust)}
.dias{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.lista.usuarios li{display:grid;gap:2px}
.bloco{display:block}

/* painel ao vivo */
.painel-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.painel-status{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.ao-vivo{width:12px;height:12px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 var(--good);animation:pulso 2s infinite}
.ao-vivo.off{background:var(--bad);animation:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(31,122,61,.5)}70%{box-shadow:0 0 0 10px rgba(31,122,61,0)}100%{box-shadow:0 0 0 0 rgba(31,122,61,0)}}
@media (prefers-reduced-motion:reduce){.ao-vivo{animation:none}}
.vendas-faixa{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:var(--r);border:1px dashed var(--line);margin:8px 0 16px;background:var(--surface)}
.vendas-faixa div{display:grid;gap:2px}
.painel-lojas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.loja-painel header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.loja-painel header h2{min-width:0}
.loja-painel h2{margin:0}
.loja-painel h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 4px}
.contador{white-space:nowrap;font-size:1.8rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--red)}
.contador small{font-size:.8rem;color:var(--muted);font-weight:700}
.alertas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.loja-painel .lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.loja-painel .lista li small{grid-column:1/-1}
.pessoa{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bolinha{width:9px;height:9px;border-radius:50%;background:var(--good);flex:none}
.bolinha.parado{background:var(--gold)}
.feed{list-style:none;margin:0;padding:0;display:grid}
.feed li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.feed li.alerta{color:var(--bad)}
:fullscreen .menu,:fullscreen .topo{display:none}
:fullscreen body,:fullscreen .conteudo{max-width:none}

/* notas */
.soltar{display:grid;gap:10px;justify-items:center;text-align:center;padding:24px 16px;border:2px dashed var(--line);border-radius:var(--r);background:var(--bg)}
.soltar input[type=file]{max-width:100%;min-height:0;padding:10px;background:var(--surface);cursor:pointer}
.soltar input[type=file]::file-selector-button{font:700 1rem var(--font);background:var(--red);color:#fff;border:0;border-radius:8px;padding:10px 16px;margin-right:10px;cursor:pointer}
.soltar.sobre{border-color:var(--red);background:var(--crust)}
.soltar strong{color:var(--red-ink)}
#escolhidos{font-size:.85rem;word-break:break-all}
.chave{word-break:break-all;color:var(--muted)}
.resumo-nota{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.resumo-nota div{display:grid}
.resumo-nota .total strong{color:var(--red-ink);font-size:1.2rem}
.itens-nota{display:grid;gap:10px}
.item-nota{border:1px solid var(--line)!important;border-left:5px solid var(--gold)!important;border-radius:var(--r);padding:12px 14px!important;background:var(--surface)}
.item-nota.ok{border-left-color:var(--good)!important}
.item-nota.ignorado{opacity:.6;border-left-color:var(--muted)!important}
.item-cab{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.item-cab > div:first-child{min-width:0;flex:1}
.item-liga{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 12px;align-items:end}
@media (max-width:640px){.item-liga{grid-template-columns:1fr}}
.item-liga .resultado{grid-column:1/-1;margin-top:6px;font-weight:600}
.novo-produto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
@media (max-width:640px){.novo-produto{grid-template-columns:1fr}}
.novo-produto label:nth-of-type(1){grid-column:1}.novo-produto select{min-width:0}

/* contas a pagar */
.resumo-fin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
@media (max-width:760px){.resumo-fin{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.tile span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tile strong{font-size:1.3rem;font-variant-numeric:tabular-nums}
.tile small{color:var(--muted)}
.tile.ruim{border-left:5px solid var(--bad)}.tile.ruim strong{color:var(--bad)}
.tile.atencao{border-left:5px solid var(--gold)}
details.pagar{display:inline-block;text-align:left}
details.pagar summary{list-style:none}
details.pagar summary::-webkit-details-marker{display:none}
details.pagar[open] .mini{position:absolute;right:16px;z-index:3;width:min(280px,80vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.tabela td.dir form{display:inline-block;margin:2px 0}
.mini .btn{margin-top:10px;width:100%}

/* painel: financeiro */
.painel-fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}