/* ============================================================
   base.css — a BASE DE CONTROLE da CodeHill (tela-base.js) e a FAIXA FIXA dos modos só leitura (suporte / empresa suspensa).
   Só tokens (cores em tema.css). Celular primeiro (375 px sem rolagem lateral); no PC o painel vira tabela.
   ============================================================ */
/* a Base é um palco: sem menu, sem a faixa de "nota simulada" */
body[data-rota="base"] #nav,body[data-rota="base"] #lateral,body[data-rota="base"] .proto{display:none}
body[data-rota="base"] #app{padding-bottom:24px;min-height:100%}
body[data-rota="base"] .toast{bottom:24px}
.base{max-width:1100px;margin:0 auto;padding:0 0 24px}
.base-topo{background:linear-gradient(165deg,var(--marca-fundo) 0%,var(--marca) 80%);color:#fff;padding:max(14px,env(safe-area-inset-top)) 16px 18px;display:flex;flex-direction:column;gap:12px}
.base-marca{display:flex;flex-direction:column;gap:6px;min-width:0}
.base-selo{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.16em;border:1.5px dashed rgba(255,255,255,.55);border-radius:8px;padding:4px 10px}
.base-topo h1{font-size:24px;line-height:1.1;color:#fff;overflow-wrap:anywhere}
.base-topo-acoes{display:flex;gap:8px;flex-wrap:wrap}
.base-topo-acoes .botao{flex:1 1 auto;min-width:0}
.base-abas{margin:14px 16px 0;flex-wrap:wrap}
.base-abas button{flex:1 1 auto}
.base-aviso{margin:12px 16px 0}
.base-corpo{margin:14px 16px 0;display:flex;flex-direction:column;gap:12px;position:relative}
.base-resumo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.base-card{display:flex;flex-direction:column;gap:6px;padding:14px}
.base-card .chips{margin-top:2px}
.base-card-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.base-nome{font-size:19px;overflow-wrap:anywhere;min-width:0}
.base-acessos{margin-top:2px}
.base-grade{display:flex;flex-direction:column;gap:12px}
.base-grade>.cartao{min-width:0}
/* o cartão Ambiente e o modal da virada pra produção */
.base-amb-linha{margin:10px 0 4px;font-weight:700;font-size:var(--t-15,15px);line-height:1.4;color:var(--ok-tx);overflow-wrap:anywhere}
.base-viva{margin:12px 0 4px;padding:10px 12px;border-radius:var(--r-s);background:var(--card-2);color:var(--tinta-2);font-size:var(--t-14,14px);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.base-viva.ok{background:var(--ok-bg);color:var(--ok-tx)}
.base-viva.erro{background:var(--problema-bg);color:var(--problema-tx)}
/* a linha do tempo */
.base-eventos{display:flex;flex-direction:column}
.base-evento{display:block;width:100%;text-align:left;min-height:var(--toque-min);padding:10px 4px;border:0;border-bottom:1px solid var(--linha);background:none;font-size:var(--t-13);font-weight:700;color:var(--tinta);cursor:pointer;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.base-evento.on{background:var(--card-2)}
.base-detalhe{padding:8px 6px 12px;background:var(--card-2);border-bottom:1px solid var(--linha)}
.base-pre{margin:4px 0 8px;padding:10px;border-radius:var(--r-s);background:var(--card);border:1px solid var(--linha);font-size:11.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}
.base-trilha{margin:4px 0 0;padding-left:22px;font-size:var(--t-12);color:var(--tinta-2);overflow-wrap:anywhere}
.adm-entrou{color:var(--ok-tx)}.adm-aguarda{color:var(--atencao-tx)}
@media (min-width:1024px){
  body[data-rota="base"] #app{padding:0 0 24px}
  .base{max-width:1280px}
  .base .tabela .chip{padding:4px 8px;font-size:12px;gap:4px}
  .base .tabela{font-size:12px}.base .tabela td,.base .tabela th{padding:8px 4px}.base .tabela td:first-child{min-width:120px}
  .base-topo{flex-direction:row;align-items:center;justify-content:space-between;margin:20px 20px 0;border-radius:var(--r-xg);padding:22px 28px}
  .base-topo h1{font-size:30px}
  .base-topo-acoes .botao{flex:0 0 auto}
  .base-abas{margin:16px 20px 0;flex-wrap:nowrap}.base-abas button{flex:0 0 auto}
  .base-aviso{margin:12px 20px 0}
  .base-corpo{margin:16px 20px 0}
  .base-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .base-grade>.cheio{grid-column:1/-1}
  .base .rodape{margin:28px 20px 0}
}
/* a faixa fixa: modo suporte e empresa suspensa (só leitura) */
.faixa-modo{position:sticky;top:var(--h-proto);z-index:68;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:40px;padding:6px 14px;background:var(--problema-bg);color:var(--problema-tx);font-size:var(--t-13);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.faixa-modo[hidden]{display:none}
.faixa-modo .fm-txt{min-width:0;overflow-wrap:anywhere}
body[data-suporte] .faixa-modo{background:var(--info-bg);color:var(--info-tx)}
body[data-leitura] .lateral{top:calc(var(--h-proto) + 42px)}
/* em só leitura os botões que gravam, emitem ou editam somem (o código também recusa) */
body[data-leitura] [data-a="nova-venda"],body[data-leitura] .nova-lat,body[data-leitura] [data-a="v-emitir"],body[data-leitura] [data-a="v-confirmar"],
body[data-leitura] [data-a^="nota-emitir"],body[data-leitura] [data-a^="nota-consultar"],body[data-leitura] [data-a^="nota-cancelar"],
body[data-leitura] [data-a="fin-novo"],body[data-leitura] [data-a="fin-transferir"],body[data-leitura] [data-a="fin-prevista"],body[data-leitura] [data-a="fin-estornar"],body[data-leitura] [data-a="fin-arquivar"],body[data-leitura] [data-a="fin-desfazer"],
body[data-leitura] [data-a="emit-editar"],body[data-leitura] [data-a="faz-editar"],body[data-leitura] [data-a="prod-novo"],body[data-leitura] [data-a="prod-editar"],body[data-leitura] [data-a="prod-arquivar"],body[data-leitura] [data-a="conta-nova"],
body[data-leitura] [data-a="bkp-confirmar"],body[data-leitura] [data-a="bkp-exemplo"],body[data-leitura] [data-a="bkp-exemplo-ok"],body[data-leitura] #emit-foc-admin,body[data-leitura] #mais-convite,body[data-leitura] [data-a="v-novo-comp"],body[data-leitura] [data-a="v-comp-completar"]{display:none!important}
body[data-leitura] #a1{pointer-events:none;opacity:.6}

/* NF nao liberada: a faixa fixa do topo vira o aviso (mais alta, quebra linha) e a opcao "Com NF-e" da Nova venda fica apagada */
html.nf-bloq{--h-proto:48px}
@media (min-width:700px){html.nf-bloq{--h-proto:30px}}
.proto.nf-bloq{display:flex;align-items:center;justify-content:center;height:var(--h-proto);line-height:14px;padding:3px 12px;white-space:normal;text-transform:none;letter-spacing:0;font-size:11px;background:#8A5A00;color:#fff}
.v-tipo button[disabled]{opacity:.45;cursor:not-allowed}
.v-nf-aviso{margin:8px 2px 0;font-size:12px;line-height:1.35;font-weight:600;color:#8A5A00}
html.sem-proto{--h-proto:0px}
.proto[hidden]{display:none}