/* Painel NotaNF (antes Nota Delivery). Organizado por: 1 tokens, 2 base, 3 estrutura (menu, topo), 4 componentes, 5 paginas, 6 celular.
   Sem nada de fora (a letra Archivo vai embutida em /static): o painel abre inteiro so com o servidor. */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* cores do manual de marca da Spazio (amarelo, preto, branco, marrom) + neutros e avisos aprovados em 10/11/2026 */
  --fundo: #F6F5F2; --papel: #FFFFFF; --papel-2: #F6F5F2; --texto: #231F20; --suave: #5C5859; --linha: #DAD6CF; --trilho: #E8E5DF;
  --marca: #FFD201; --marca-forte: #FFD201; --marca-texto: #231F20; --laranja: #FFD201; --link: #231F20;
  --atencao: #5B300E; --atencao-fundo: #FFF1C2;
  --menu-fundo: #FFFFFF; --menu-texto: #231F20; --menu-suave: #5C5859; --menu-ativo: #F6F5F2;
  --teste-fundo: #FFF1C2; --teste-texto: #5B300E; --teste-borda: #5B300E; --prod-fundo: #A3261B; --prod-texto: #FFFFFF;
  --ok: #1E6B3A; --ok-fundo: #E6F4EA; --info: #231F20; --info-fundo: #E8E5DF;
  --amarelo: #5B300E; --amarelo-fundo: #FFF1C2; --laranja-t: #5B300E; --laranja-fundo: #FFF1C2;
  --erro: #A3261B; --erro-fundo: #FDECEA; --roxo: #5B300E; --roxo-fundo: #FFF1C2;
  --cinza: #5C5859; --cinza-fundo: #E8E5DF; --escuro: #FFFFFF; --escuro-fundo: #231F20;
  --g-pront: #DAD6CF;
  --raio: 14px; --raio-g: 18px; --sombra: none;
  --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;
  --foco: 0 0 0 2px #FFFFFF, 0 0 0 5px #231F20;
}

/* ---------------------------------------------------------------- 2. base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 17px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: var(--link); }
h1 { font-size: 1.45rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 var(--e3); }
p { margin: 0 0 var(--e3); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }
.ico { flex: none; display: block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- 3. estrutura */
.faixa { padding: .5rem 16px; text-align: center; font-size: 1rem; }
.faixa-teste { background: var(--teste-fundo); color: var(--teste-texto); border-bottom: 3px solid var(--teste-borda); }
.faixa-cert-atencao { background: var(--teste-fundo); color: var(--teste-texto); border-bottom: 3px solid var(--teste-borda); font-weight: 600; }
.faixa-cert-perigo { background: var(--prod-fundo); color: var(--prod-texto); font-weight: 600; }
.faixa-producao { background: var(--prod-fundo); color: var(--prod-texto); font-weight: 600; }

.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 38px); }
.com-menu .app { grid-template-columns: 248px minmax(0, 1fr); }
.coluna { min-width: 0; display: flex; flex-direction: column; }

.sidebar { background: var(--menu-fundo); color: var(--menu-texto); position: sticky; top: 0; height: 100vh; align-self: start; display: flex; flex-direction: column; overflow-y: auto; z-index: 40; }
.logo { display: flex; align-items: center; gap: var(--e3); padding: 18px 16px 14px; }
.logo-marca { width: 38px; height: 38px; border-radius: 10px; background: var(--laranja); color: #fff; display: grid; place-items: center; flex: none; }
.logo-nome { font-weight: 700; color: #fff; line-height: 1.15; flex: 1; }
.logo-nome small { display: block; font-weight: 400; color: var(--menu-suave); font-size: .875rem; }
.menu { padding: 4px 10px 16px; flex: 1; }
.menu-grupo { text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; font-weight: 700; color: var(--menu-suave); padding: 16px 10px 6px; }
.menu-item { position: relative; display: flex; align-items: center; gap: var(--e3); padding: 9px 10px; border-radius: var(--raio); color: var(--menu-texto); text-decoration: none; font-weight: 500; transition: background .15s; }
.menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-item[aria-current="page"] { background: var(--menu-ativo); color: #fff; }
.menu-item[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0; background: var(--laranja); }
.menu-item[aria-current="page"] .ico { color: var(--laranja); }
.menu-rodape { padding: 12px 18px; font-size: .875rem; color: var(--menu-suave); border-top: 1px solid rgba(255, 255, 255, .08); }
.btn-icone.menu-fechar, .btn-icone.menu-abrir, .menu-fundo { display: none; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3); min-height: 60px; padding: 8px 20px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topbar-marca { font-weight: 700; }
.topbar-espaco { flex: 1; }
.empresa { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.empresa-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--papel-2); display: grid; place-items: center; color: var(--suave); flex: none; }
.empresa-texto { display: grid; line-height: 1.2; min-width: 0; }
.empresa-texto strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empresa-texto small { color: var(--suave); font-size: .875rem; }
.amb { font-weight: 800; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.amb-teste { background: var(--teste-fundo); color: var(--teste-texto); border: 2px solid var(--teste-borda); }
.amb-producao { background: var(--prod-fundo); color: var(--prod-texto); border: 2px solid var(--prod-fundo); }
.usuario { display: flex; align-items: center; gap: var(--e2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--laranja); color: #1a0f06; font-weight: 700; display: grid; place-items: center; }
.usuario-nome { font-weight: 600; font-size: 1rem; }
.perfil-leitura { display: none; font-size: .875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.sair { margin: 0; }

main { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--e5) 20px var(--e6); flex: 1; min-width: 0; }
.rodape { text-align: center; color: var(--suave); font-size: .875rem; padding: var(--e4); }
.sem-menu main { max-width: 480px; }

/* ---------------------------------------------------------------- 4. componentes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; padding: 0 var(--e4); min-height: 44px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel); color: var(--texto); transition: background .15s, border-color .15s; }
.btn:hover { background: var(--papel-2); }
.btn-primary { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.btn-primary:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.btn-sutil { border-color: transparent; background: transparent; color: var(--suave); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio); border: 1px solid transparent; background: transparent; color: var(--suave); cursor: pointer; padding: 0; }
.btn-icone:hover { background: var(--papel-2); color: var(--texto); }

.card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); padding: var(--e4); }
.caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); padding: var(--e5); }
.estreita { margin: var(--e5) auto; }
.estreita h1 { margin-bottom: var(--e4); }

label { display: grid; gap: 4px; font-size: .875rem; font-weight: 600; color: var(--suave); min-width: 0; }
input, select { font: inherit; font-weight: 400; color: var(--texto); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 .7rem; min-height: 42px; }
input:not([type="checkbox"]), select { width: 100%; min-width: 0; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--marca); }
input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--foco); border-color: var(--laranja); }
.formulario { display: grid; gap: var(--e4); }

.pagina-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4); margin-bottom: var(--e5); }
.pagina-topo p { margin: 2px 0 0; color: var(--suave); }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--e3); align-items: end; margin-bottom: var(--e4); }
.filters .btn { width: 100%; }

.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e3); border-radius: 7px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 1rem; }
.chip:hover { background: var(--papel-2); }
.chip[aria-current="true"] { background: var(--marca); color: var(--marca-texto); }

.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--cinza-fundo); color: var(--cinza); }
.pill.est-pendente { background: var(--info-fundo); color: var(--info); }
.pill.est-emitida { background: var(--ok-fundo); color: var(--ok); }
.pill.est-aguardando_cpf { background: var(--amarelo-fundo); color: var(--amarelo); }
.pill.est-aguardando_catalogo { background: var(--laranja-fundo); color: var(--laranja-t); }
.pill.est-cancelada { background: var(--escuro-fundo); color: var(--escuro); }
.pill.est-rejeitada, .pill.est-divergente { background: var(--erro-fundo); color: var(--erro); }
.pill.est-consultar { background: var(--roxo-fundo); color: var(--roxo); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.kpis-auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); padding: var(--e4); color: var(--texto); text-decoration: none; min-width: 0; }
a.kpi:hover { border-color: var(--laranja); }
.kpi-texto { display: grid; gap: 2px; min-width: 0; }
.kpi-nome { font-size: .875rem; font-weight: 600; color: var(--suave); }
.kpi-valor { font-size: 1.55rem; font-weight: 750; line-height: 1.15; letter-spacing: -.01em; }
.kpi-sub { font-size: .875rem; color: var(--suave); }
.kpi-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--cinza-fundo); color: var(--cinza); }
.kpi-icone.est-pendente { background: var(--info-fundo); color: var(--info); }
.kpi-icone.est-emitida { background: var(--ok-fundo); color: var(--ok); }
.kpi-icone.est-aguardando_cpf { background: var(--amarelo-fundo); color: var(--amarelo); }
.kpi-icone.est-aguardando_catalogo { background: var(--laranja-fundo); color: var(--laranja-t); }
.kpi-icone.est-rejeitada, .kpi-icone.est-divergente { background: var(--erro-fundo); color: var(--erro); }
.kpi-icone.est-consultar { background: var(--roxo-fundo); color: var(--roxo); }
.kpi-icone.est-cancelada { background: var(--escuro-fundo); color: var(--escuro); }

.tabela-card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: clip; }
.tabela-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); }
.busca { position: relative; flex: 1 1 260px; max-width: 420px; }
.busca .ico { position: absolute; left: 12px; top: 11px; color: var(--suave); pointer-events: none; }
.busca input { padding-left: 38px; }
.soma { margin-left: auto; color: var(--suave); font-size: 1rem; }
.tabela-rolagem { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; white-space: nowrap; }
.table th { background: var(--papel-2); font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 700; }
.table tbody tr:hover td { background: var(--papel-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table .col-marca { width: 44px; padding-right: 0; }
.table td.quebra { white-space: normal; max-width: 26rem; overflow-wrap: anywhere; }
.table .acoes { text-align: right; white-space: nowrap; position: sticky; right: 0; background: var(--papel); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18); }
.table th.acoes { background: var(--papel-2); }
.table tbody tr:hover td.acoes { background: var(--papel-2); }
.table tr.espera td.acoes { background: var(--laranja-fundo); }
.table tr.espera td { background: var(--laranja-fundo); }
.motivo { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; color: var(--suave); font-size: 1rem; }
.chave { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .875rem; }
.chave-txt { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.table tr.detalhe td { background: var(--papel-2); white-space: normal; color: var(--suave); }
tr[hidden] { display: none; }
.icone { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--suave); cursor: pointer; text-decoration: none; padding: 0; }
.icone:hover { background: var(--papel-2); color: var(--texto); }
.icone-marca { color: var(--marca); }
.icone .ico { width: 18px; height: 18px; }
/* botao da linha que leva palavra (CPF, De novo, Dispensar, Voltar): largura pelo texto, nunca encavala */
.icone-texto { width: auto; padding: 0 9px; font-size: .875rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.plat { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; margin-right: 8px; border-radius: 6px; font-size: .875rem; font-weight: 800; color: #fff; background: #5d657a; vertical-align: middle; }
.plat-ifood { background: #d7263d; }
.plat-deeliv { background: #2f6fed; }
.plat-cardapio { background: #0c7a54; }
.plat-pedzap { background: #1a8a4c; }

.barra-selecao { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--papel); border-top: 2px solid var(--laranja); box-shadow: 0 -6px 18px rgba(0, 0, 0, .1); }
.barra-selecao strong { margin-right: auto; }
.js .barra-selecao { display: none; }
.js .barra-selecao.com-selecao { display: flex; }

.aviso { padding: .7rem .9rem; border-radius: var(--raio); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-info { background: var(--info-fundo); color: var(--info); }
.dica, .vazio { color: var(--suave); }
.vazio { padding: var(--e5); text-align: center; }
.texto { margin: 0; padding: var(--e4); overflow-x: auto; font: .875rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------------------------------------------------------------- 5. paginas */
.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.atalho { display: flex; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); border-radius: var(--raio-g); text-decoration: none; font-weight: 700; font-size: 1.05rem; background: var(--papel); color: var(--texto); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.atalho small { display: block; font-weight: 400; font-size: 1rem; color: var(--suave); }
.atalho .ico { width: 28px; height: 28px; }
.atalho-principal { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.atalho-principal small { color: inherit; opacity: .9; }
.atalho:hover { border-color: var(--laranja); }
.atalho-principal:hover { background: var(--marca-forte); }

.grafico-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2) var(--e4); margin-bottom: var(--e2); }
.grafico-cab h2 { margin: 0; }
.legenda { display: flex; gap: var(--e4); color: var(--suave); font-size: .875rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.grafico { width: 100%; height: auto; display: block; }
.g-linha { stroke: var(--linha); stroke-width: 1; }
.g-emit { fill: var(--laranja); }
.g-pront { fill: var(--g-pront); }
.g-rotulo { fill: var(--suave); font-size: 12px; text-anchor: middle; }
.g-valor { fill: var(--texto); font-size: 12px; font-weight: 700; text-anchor: middle; }
.g-sel .g-rotulo { fill: var(--texto); font-weight: 700; }

.ajuda-lista { display: grid; }
.ajuda-item { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--e4); align-items: start; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.ajuda-item:last-child { border-bottom: 0; }
.ajuda-item p { margin: 0; }

.login-marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); font-weight: 700; font-size: 1.15rem; }
.login-marca .logo-marca { width: 46px; height: 46px; }

/* ---------------------------------------------------------------- 6. celular */
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .com-menu .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; }  /* sem JavaScript o menu vira um bloco no alto da pagina */
  .js .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 280px; max-width: 86vw; transform: translateX(-102%); transition: transform .2s; }
  .js.menu-aberto .sidebar { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .35); }
  .js.menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; background: rgba(8, 10, 16, .55); z-index: 35; }
  .js .btn-icone.menu-abrir, .js.menu-aberto .btn-icone.menu-fechar { display: inline-grid; }
  .menu-fechar { margin-left: auto; color: var(--menu-texto); }
  .menu-item { min-height: 44px; }
  .table .acoes, .table th.acoes { position: static; box-shadow: none; }
}
@media (max-width: 640px) {
  main { padding: var(--e4) 16px var(--e5); }
  .topbar { padding: 8px 12px; gap: var(--e2); }
  .empresa-texto small, .usuario-nome, .so-largo, .empresa-icone { display: none; }
  .perfil-leitura { display: inline-block; }
  .kpis-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--e3); }
  .kpi-valor { font-size: 1.25rem; }
  .kpi-icone { width: 34px; height: 34px; border-radius: 10px; }
  .atalhos { grid-template-columns: minmax(0, 1fr); }
  .atalho { min-height: 64px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters > :last-child { grid-column: 1 / -1; }
  .ajuda-item { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .barra-selecao .btn { flex: 1 1 100%; }
  .soma { margin-left: 0; width: 100%; }
  .busca { max-width: none; }
  .caixa { padding: var(--e4); }
  .chips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip { justify-content: center; white-space: nowrap; padding: 0 var(--e2); }
  .chips input[type="date"] { grid-column: 1 / 3; }
}

/* ---------------------------------------------------------------- 7. ajustes finais */
.filters-topo { margin: 0; min-width: min(100%, 360px); grid-template-columns: minmax(0, 1fr) auto; }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.espaco-cima { margin-top: var(--e4); }
.barra-confirma { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e4) 0; }
.chips input[type="date"] { width: auto; min-height: 36px; border-color: transparent; background: transparent; }
.chips button.chip { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; }
.chips button.chip[aria-current="true"] { background: var(--marca); color: var(--marca-texto); }
.g-emit-cor { background: var(--laranja); }
.g-pront-cor { background: var(--g-pront); }
@media (max-width: 640px) { .filters-topo { grid-template-columns: minmax(0, 1fr); width: 100%; } .kpis-2 { max-width: none; } }

/* ---------------------------------------------------------------- 8. Inicio (modelo A) */
.kpi.tom-pendente .kpi-valor { color: var(--info); }
.kpi.tom-emitida .kpi-valor { color: var(--ok); }
.kpi.tom-amarelo .kpi-valor { color: var(--amarelo); }
.kpi.tom-problema .kpi-valor { color: var(--erro); }
.kpi-sub-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-linha { margin: var(--e2) 0 0; color: var(--suave); font-size: .875rem; }
.legenda-linha i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 6px 0 0; }
.legenda-linha i + i, .legenda-linha .g-emit-cor { margin-left: var(--e3); }
.g-hoje .g-rotulo { fill: var(--texto); font-weight: 800; }
.g-hoje .g-valor { font-weight: 800; }

/* botao Atualizar do Sischef */
.atualizar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.atualizar-form { margin: 0; }
.atualizar .btn { border-color: var(--linha); color: inherit; }
.atualizar-hora { font-size: 1rem; color: var(--suave); }

/* tarefa L: botao Cancelar dentro da celula de acoes e campo da justificativa */
.form-linha { display: inline; margin: 0; }
.barra-confirma label { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.barra-confirma textarea { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; padding: 8px;
  border: 1px solid var(--borda, #ccc); border-radius: 6px; background: var(--fundo-campo, transparent); color: inherit; resize: vertical; }

/* aviso forte (Carimbo: nota ja emitida pelo Sischef para pedido que sairia pelo app) */
.card.alerta { border-left: 4px solid #c0392b; background: #fdecea; color: #611a15; }

/* conforto V2: pagina Relatorios (blocos empilhados, linha de total) e historico da nota */
.tabela-card + .tabela-card, .aviso + .tabela-card { margin-top: var(--e4); }
.tabela-barra h2 { margin: 0; font-size: 1rem; }
.tabela-barra .btn { margin-left: auto; }
.table tfoot th { background: var(--papel-2); color: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0; border-top: 2px solid var(--linha); }
.historico { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.historico li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.historico-quando { color: var(--suave); min-width: 9.5rem; }

.historico-fixo { position: sticky; left: 12px; display: inline-block; max-width: calc(100vw - 80px); }

/* ---------------------------------------------------------------- 9. marca NotaNF (padrao visual aprovado em 10/11/2026)
   Cores do manual da Spazio, letra Archivo embutida, botoes grandes, cartoes de canto 18, barra preta em bico. */
@font-face { font-family: "Archivo"; src: url("/static/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: 0; }
h2 { font-size: 1.1875rem; font-weight: 700; }
a { text-underline-offset: 2px; }
a:hover { color: var(--atencao); }
:focus-visible { border-radius: 8px; }
.simbolo, .nome-marca { display: block; height: auto; flex: none; }

/* barra de cima: preta, terminando em bico, como o selo da Spazio */
.topbar { position: static; background: var(--texto); color: #fff; border-bottom: 0; min-height: 64px; padding: 10px 20px 24px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); }
.topbar :focus-visible { box-shadow: 0 0 0 3px var(--marca); }
.topbar .btn-icone, .topbar .btn-sutil { color: #fff; text-decoration: none; }
.topbar .btn-icone:hover, .topbar .btn-sutil:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.marca-topo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca-topo:hover { color: #fff; }
.marca-topo .simbolo { width: 34px; }
.marca-topo .nome-marca { width: 112px; }
.empresa { margin-left: var(--e3); padding-left: var(--e4); border-left: 1px solid rgba(255, 255, 255, .25); }
.empresa-icone { display: none; }
.empresa-texto small { color: var(--linha); }
.avatar { background: var(--marca); color: var(--texto); font-weight: 800; }
.amb { font-size: .875rem; letter-spacing: 0; text-transform: none; padding: 6px 14px; }
.amb-teste { border-color: var(--teste-fundo); }
.faixa { font-size: 1rem; font-weight: 600; }
.faixa-teste, .faixa-cert-atencao { border-bottom: 0; }

/* menu ao lado: branco, destino atual com faixa amarela */
.sidebar { background: var(--papel); color: var(--texto); border-right: 1px solid var(--linha); }
.logo { display: none; }
.logo-nome { color: var(--texto); font-weight: 800; }
.menu { padding-top: 12px; }
.menu-grupo { color: var(--suave); font-size: .875rem; letter-spacing: .04em; }
.menu-item { color: var(--texto); font-weight: 600; font-size: 1.0625rem; min-height: 48px; border-radius: 12px; border-left: 6px solid transparent; }
.menu-item:hover { background: var(--fundo); color: var(--texto); }
.menu-item[aria-current="page"] { background: var(--fundo); color: var(--texto); font-weight: 800; border-left-color: var(--marca); }
.menu-item[aria-current="page"]::before { display: none; }
.menu-item[aria-current="page"] .ico { color: var(--texto); }
.menu-rodape { color: var(--suave); border-top: 1px solid var(--linha); font-size: .875rem; }
.menu-fechar { color: var(--texto); }

/* botoes: principal amarelo com texto preto; secundario branco com borda preta; acao leve sublinhada */
.btn { min-height: 60px; padding: 0 1.25rem; border-radius: 14px; border: 2px solid var(--texto); background: var(--papel); color: var(--texto); font-weight: 700; font-size: 1.0625rem; }
.btn:hover { background: var(--fundo); }
.btn-primary { background: var(--marca); border-color: var(--marca); color: var(--texto); font-weight: 800; }
.btn-primary:hover { background: var(--marca); border-color: var(--texto); }
.btn-sutil { min-height: 44px; border-color: transparent; background: transparent; color: var(--texto); text-decoration: underline; }
.atualizar .btn { border-color: var(--texto); text-decoration: none; min-height: 52px; }
.btn-icone { width: 44px; height: 44px; border-radius: 12px; }
.icone { width: 44px; height: 44px; border-radius: 12px; color: var(--texto); }
.icone-texto { width: auto; font-size: .9375rem; text-decoration: underline; }
.icone-marca, .icone-marca:hover { background: var(--marca); color: var(--texto); }

label { font-size: .9375rem; }
input, select { min-height: 52px; border: 2px solid var(--linha); border-radius: 14px; font-size: 1.0625rem; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--texto); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--texto); }
.busca .ico { top: 50%; transform: translateY(-50%); }
.busca input { padding-left: 42px; }
.barra-confirma textarea, textarea { font: inherit; font-size: 1.0625rem; font-weight: 400; color: var(--texto); background: var(--papel); border: 2px solid var(--linha); border-radius: 14px; padding: 12px; }

/* cartoes brancos de canto 18 sobre o fundo da pagina, sem sombra */
.card, .caixa, .tabela-card { border-color: transparent; box-shadow: none; border-radius: 18px; }
.kpi, .atalho { border: 2px solid transparent; box-shadow: none; border-radius: 18px; }
a.kpi:hover, .atalho:hover { border-color: var(--texto); }
.kpi-nome { font-size: 1rem; }
.kpi-valor { font-size: 2.125rem; font-weight: 800; font-stretch: 108%; line-height: 1.1; letter-spacing: 0; overflow-wrap: anywhere; }
.kpi.tom-pendente .kpi-valor, .kpi.tom-emitida .kpi-valor, .kpi.tom-amarelo .kpi-valor, .kpi.tom-problema .kpi-valor { color: var(--texto); }
.kpi-sub { font-size: 1rem; }
.atalho-principal { min-height: 68px; border-radius: 16px; background: var(--marca); border-color: var(--marca); color: var(--texto); font-weight: 800; font-size: 1.25rem; }
.atalho-principal:hover { background: var(--marca); border-color: var(--texto); }

/* selos de situacao: pronto = verde, emitida = neutro, espera = marrom, problema = vermelho */
.pill { padding: 4px 12px; font-size: .875rem; letter-spacing: 0; }
.pill.est-pendente, .kpi-icone.est-pendente { background: var(--ok-fundo); color: var(--ok); }
.pill.est-emitida, .kpi-icone.est-emitida { background: var(--trilho); color: var(--texto); }
.plat, .plat-ifood, .plat-deeliv, .plat-cardapio, .plat-pedzap { background: var(--texto); color: #fff; font-size: .8125rem; height: 24px; }
.card.alerta { border-left: 0; background: var(--erro-fundo); color: var(--erro); }

.chips { border: 0; background: transparent; padding: 0; gap: 8px; }
.chip, .chips button.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 2px solid var(--texto); background: var(--papel); color: var(--texto); font-size: 1rem; font-weight: 700; }
.chip:hover { background: var(--fundo); }
.chip[aria-current="true"], .chips button.chip[aria-current="true"] { background: var(--texto); color: #fff; }
.chips input[type="date"] { min-height: 44px; border: 2px solid var(--linha); border-radius: 22px; background: var(--papel); }

.table { font-size: 1rem; }
.table th { font-size: .875rem; letter-spacing: .03em; }
.barra-selecao { border-top: 3px solid var(--texto); box-shadow: none; }
.g-emit { fill: var(--marca); stroke: var(--texto); stroke-width: 1.5; }
.g-emit-cor { background: var(--marca); outline: 1.5px solid var(--texto); }
.g-rotulo, .g-valor { font-size: 14px; }
.rodape { font-size: .875rem; }

/* tela de entrar = tela de abertura: fundo amarelo, simbolo e nome em preto, faixa preta em bico */
.sem-menu { background: var(--marca); }
.sem-menu .topbar { display: none; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.app { flex: 1; min-height: 0; }
.sidebar { height: auto; max-height: 100vh; }
.abertura { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 0 4px; color: var(--texto); }
.abertura .simbolo { width: 120px; }
.abertura .nome-marca { width: 220px; }
.sem-menu .rodape { background: var(--texto); color: #fff; font-size: 1rem; font-weight: 600; padding: 44px 24px 28px; clip-path: polygon(0 22px, 50% 0, 100% 22px, 100% 100%, 0 100%); }
.sem-menu .rodape small { display: block; margin-top: 6px; font-weight: 400; color: var(--linha); }

/* pagina Instalar o app */
.instalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e4); }
.instalar h2 { display: flex; align-items: center; gap: var(--e2); }
.passos { margin: 0; padding-left: 1.5rem; display: grid; gap: 10px; font-size: 1.0625rem; }
.instalar-icone { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.instalar-icone img { width: 72px; height: 72px; }

@media (max-width: 900px) {
  .topbar { position: sticky; top: 0; }
  .js .logo { display: flex; justify-content: space-between; }
  .js .sidebar { border-right: 0; height: 100vh; }
}
@media (max-width: 640px) {
  .topbar { padding: 8px 12px 22px; }
  .marca-topo .nome-marca, .empresa { display: none; }
  .kpi-valor { font-size: 1.5rem; font-stretch: 100%; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip, .chips button.chip { padding: 0 8px; }
  .chips input[type="date"] { grid-column: 1 / 2; width: 100%; }
  .btn { padding: 0 1rem; }
}

/* ---------------------------------------------------------------- 10. etapa B (telas): selos com desenho, loja pelo nome, barra de baixo, cartoes */
.pill { gap: 6px; min-height: 30px; }
.pill .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.loja { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 15px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.loja-spazio { background: var(--marca); color: var(--texto); }
.loja-kukan { background: #F6EAD7; color: #AC090C; }
.barra-baixo { display: none; }
@media (max-width: 900px) {
  .js .barra-baixo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; height: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--papel); border-top: 1px solid var(--linha); }
  .js body.com-menu { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .barra-baixo a, .barra-baixo button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; border: 0; border-top: 4px solid transparent; background: transparent; color: var(--texto); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: none; cursor: pointer; padding: 0; }
  .barra-baixo [aria-current="page"] { border-top-color: var(--marca); font-weight: 800; }
  .barra-baixo .ico { width: 26px; height: 26px; stroke-width: 2.2; }
  .js .barra-selecao.com-selecao { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .js .btn-icone.menu-abrir { display: none; }
  .js.menu-aberto .btn-icone.menu-fechar { display: inline-grid; }
}
@media (max-width: 640px) {
  .table-cartoes thead { display: none; }
  .table-cartoes, .table-cartoes tbody { display: block; }
  .table-cartoes tbody tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 10px solid var(--fundo); }
  .table-cartoes tbody tr[hidden] { display: none; }
  .table-cartoes td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; white-space: normal; text-align: right; }
  .table-cartoes td::before { content: attr(data-label); flex: none; font-weight: 600; color: var(--suave); text-align: left; }
  .table-cartoes td:empty { display: none; }
  .table-cartoes td.col-marca::before, .table-cartoes td.acoes::before { display: none; }
  .table-cartoes td.col-marca { justify-content: flex-start; }
  .table-cartoes td.acoes { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 8px; position: static; background: transparent; box-shadow: none; }
  .table-cartoes td.motivo { max-width: none; overflow: visible; text-overflow: clip; }
  .table-cartoes td .chave-txt { max-width: 9rem; }
  .table-cartoes tr.detalhe td { display: block; text-align: left; }
  .table-cartoes tr.detalhe td::before { display: none; }
  .table-cartoes tr.detalhe td:empty { display: none; }
}

/* tabela larga: selos e loja menores e colunas mais justas para caber em 1280 sem esconder a situacao */
.table th, .table td { padding: 10px 8px; }
.table .pill, .table .loja { min-height: 26px; padding: 0 10px; }
.table .pill .ico { width: 14px; height: 14px; }
.table td.motivo { max-width: 9rem; }
.table .plat { margin-right: 6px; }

/* ---------------------------------------------------------------- 11. grupos do menu que abrem e fecham */
button.menu-grupo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--menu-suave); font-family: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer; padding: 0 10px; }
button.menu-grupo:hover { background: var(--fundo); color: var(--texto); }
button.menu-grupo .ico { width: 18px; height: 18px; stroke-width: 2.6; transition: transform .15s; }
button.menu-grupo[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.menu-bloco { margin: 0; padding: 0; }
.js .menu-bloco:not(.aberto) .menu-itens { display: none; }  /* sem JavaScript o menu fica inteiro aberto */
button.menu-grupo.atual { color: var(--texto); box-shadow: inset 6px 0 0 var(--marca); }

/* ---------------------------------------------------------------- 12. tour de primeira vez */
button.menu-item { width: 100%; border: 0; border-left: 6px solid transparent; background: transparent; font: inherit; font-size: 1.0625rem; font-weight: 600; text-align: left; cursor: pointer; color: var(--texto); }
.tour { border: 0; border-radius: 18px; padding: 24px; width: min(520px, calc(100vw - 32px)); background: var(--papel); color: var(--texto); }
.tour::backdrop { background: rgba(35, 31, 32, .62); }
.tour h2 { margin: 0 0 var(--e3); font-size: 1.375rem; font-weight: 800; }
.tour p { margin: 0 0 var(--e3); font-size: 1.0625rem; line-height: 1.5; }
.tour .tour-contador { margin: 0 0 var(--e3); font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.tour-botoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }
.tour [hidden] { display: none !important; }
@media (max-width: 640px) { .tour-botoes .btn { flex: 1 1 100%; } }