/* App das lojas (e telas de conta). Celular primeiro. */
/* cores: ver static/tema.css */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body.app-loja {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--fonte); font-size: 16px; line-height: 1.45;
}
a { color: var(--azul); }
button { font: inherit; }

/* ---------- barra do topo ---------- */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent); backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.barra-dentro { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.barra-dentro.largo { max-width: 1100px; }
.voltar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 12px; color: var(--tinta); text-decoration: none; flex: none; }
.voltar:hover { background: var(--fundo); }
.loja-sel { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--tinta); flex: 1; }
.loja-sel strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-sel small { color: var(--suave); font-size: 0.8rem; }
.loja-sel.troca strong::after { content: " ▾"; color: var(--suave); font-size: .8em; }
.menu-conta { position: relative; flex: none; }
.menu-conta summary { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul-esc); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; }
.menu-conta summary::-webkit-details-marker { display: none; }
.menu-conta .menu { position: absolute; right: 0; top: 46px; background: var(--cor-superficie); border: 1px solid var(--linha);
  border-radius: 14px; box-shadow: var(--sombra-3); min-width: 220px; padding: 6px; z-index: 40; }
.menu-conta .menu .quem { padding: 8px 10px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.menu-conta .menu .quem strong { display: block; }
.menu-conta .menu .quem small { color: var(--suave); }
.menu-conta .menu a, .menu-conta .menu button { display: block; width: 100%; text-align: left; padding: 9px 10px;
  border-radius: 10px; color: var(--tinta); text-decoration: none; background: none; border: 0; cursor: pointer; }
.menu-conta .menu a:hover, .menu-conta .menu button:hover { background: var(--fundo); }
.menu-conta .menu form { margin: 0; }

/* ---------- corpo ---------- */
.corpo { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
.corpo.largo { max-width: var(--largura); padding-left: var(--esp-5); padding-right: var(--esp-5); }
.titulo { font-size: 1.5rem; font-weight: 750; letter-spacing: -.01em; margin: 4px 0 2px; }
.subtitulo { color: var(--suave); margin: 0 0 20px; }
.secao { font-size: 1rem; font-weight: 650; color: var(--cor-texto);
  margin: 26px 0 10px; }

.avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.aviso { padding: 11px 14px; border-radius: 12px; font-size: .94rem; }
.aviso.success { background: var(--verde-claro); color: var(--verde); }
.aviso.error { background: var(--vermelho-claro); color: var(--vermelho); }
.aviso.info { background: var(--azul-claro); color: var(--azul-esc); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px; margin-bottom: 12px; }
.cartao h2 { margin: 0 0 6px; font-size: 1.05rem; }
.nota { color: var(--suave); font-size: .9rem; margin: 0; }

/* ---------- serviços (central) ---------- */
.servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.servico { display: flex; flex-direction: column; gap: 14px; padding: 18px; min-height: 150px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  text-decoration: none; color: var(--tinta); transition: transform .12s, box-shadow .12s, border-color .12s; }
.servico:hover { border-color: var(--cor-borda-forte); box-shadow: var(--sombra-2); }
.servico .icone { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.servico .icone svg { width: 24px; height: 24px; }
.icone.azul { background: var(--azul-claro); color: var(--azul); }
.icone.verde { background: var(--verde-claro); color: var(--verde); }
.icone.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.icone.cinza { background: var(--cor-superficie-3); color: var(--cor-texto-3); }
.servico strong { font-size: 1.05rem; display: block; }
.servico .estado { margin-top: auto; font-size: .86rem; color: var(--suave); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.servico.breve { opacity: .55; pointer-events: none; box-shadow: none; }

.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 650; white-space: nowrap; }
.selo.amarelo, .selo.enviada { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.verde, .selo.incluida, .selo.lancada { background: var(--verde-claro); color: var(--verde); }
.selo.azul, .selo.na_fila { background: var(--azul-claro); color: var(--azul-esc); }
.selo.vermelho, .selo.recusada { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.cinza, .selo.cancelada { background: var(--cor-superficie-3); color: var(--cor-texto-3); }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 20px; border-radius: 14px; border: 0; background: var(--azul); color: var(--cor-superficie);
  font-weight: 650; text-decoration: none; cursor: pointer; }
.botao:hover { background: var(--azul-esc); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.claro { background: var(--cor-superficie); color: var(--azul); border: 1px solid var(--cor-borda-forte); }
.botao.claro:hover { background: var(--azul-claro); }
.botao.perigo { background: var(--cor-superficie); color: var(--vermelho); border: 1px solid color-mix(in srgb, var(--cor-erro) 35%, var(--cor-borda)); }
.botao.cheio { width: 100%; }
.botao.peq { min-height: 38px; padding: 0 14px; border-radius: 11px; font-size: .9rem; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.link-perigo { background: none; border: 0; color: var(--vermelho); cursor: pointer; padding: 0; font-size: .9rem; }

/* ---------- listas ---------- */
.lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden; }
.lista > .item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.lista > .item:last-child { border-bottom: 0; }
.lista .item .meio { flex: 1; min-width: 0; }
.lista .item .meio strong { display: block; }
.lista .item .meio small { color: var(--suave); font-size: .84rem; }
.lista .item .fim { flex: none; text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.vazio { text-align: center; color: var(--suave); padding: 34px 16px; }
.vazio svg { width: 40px; height: 40px; color: var(--cor-texto-3); display: block; margin: 0 auto 10px; }

/* embalagens */
.emb { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.emb:last-child { border-bottom: 0; }
.emb .meio { flex: 1; min-width: 0; }
.emb .meio strong { display: block; font-size: .95rem; }
.emb .meio small { color: var(--suave); font-size: .8rem; }
.emb.tem .meio strong { color: var(--azul); }
.qtd { display: flex; align-items: center; border: 1px solid var(--cor-borda-forte); border-radius: 12px; overflow: hidden; flex: none; background: var(--cor-superficie); }
.emb.tem .qtd { border-color: var(--azul); }
.qtd button { width: 40px; height: 44px; border: 0; background: var(--cor-superficie-2); font-size: 1.25rem; color: var(--azul); cursor: pointer; }
.qtd button:active { background: var(--cor-superficie-3); }
.qtd input { width: 50px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rodape-fixo { position: sticky; bottom: 0; padding: 16px 0 8px; background: linear-gradient(transparent, var(--cor-fundo) 35%); }
.rodape-fixo .resumo { text-align: center; color: var(--suave); font-size: .88rem; margin-bottom: 8px; }

/* formulários */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: .88rem; font-weight: 650; }
.campo input, .campo select, .campo textarea { min-height: 48px; padding: 0 14px; border: 1px solid var(--cor-borda-forte);
  border-radius: 12px; font: inherit; font-weight: 400; background: var(--cor-superficie); color: var(--tinta); }
.campo textarea { padding: 12px 14px; min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .qtd input:focus, .linha-prod input:focus {
  outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; }
.opcao span { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--cor-borda-forte);
  border-radius: 14px; font-weight: 650; cursor: pointer; background: var(--cor-superficie); }
.opcao input:checked + span { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-esc); }
.opcao input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.linha-prod { display: grid; grid-template-columns: 1fr 96px 38px; gap: 8px; margin-bottom: 8px; }
.linha-prod input { min-height: 46px; padding: 0 12px; border: 1px solid var(--cor-borda-forte); border-radius: 12px; font: inherit; min-width: 0; }
.linha-prod .tirar { border: 0; background: none; color: var(--cor-texto-3); cursor: pointer; font-size: 1.3rem; }
.cab-prod { display: grid; grid-template-columns: 1fr 96px 38px; gap: 8px; font-size: .78rem; color: var(--suave); font-weight: 650; margin-bottom: 6px; }

/* escolher loja */
.grade-lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card-loja { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); }
.card-loja:hover { border-color: var(--cor-borda-forte); }
.card-loja .cod { font-size: .8rem; color: var(--suave); font-weight: 650; }
.card-loja strong { font-size: 1.02rem; }
.card-loja .selos { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.busca { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--cor-borda-forte); border-radius: 12px; font: inherit;
  margin-bottom: 14px; background: var(--cor-superficie); }

/* tabelas (contas, histórico) */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-size: .76rem; color: var(--suave); font-weight: 650; padding: 8px 6px;
  border-bottom: 1px solid var(--linha); background: none; text-transform: none; letter-spacing: 0; }
.tabela td { padding: 10px 6px; border-bottom: 1px solid var(--cor-superficie-3); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.mini { color: var(--suave); font-size: .82rem; }

/* login */
.tela-entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.caixa-entrar { width: 100%; max-width: 380px; }
.caixa-entrar .logo { text-align: center; margin-bottom: 22px; }
.caixa-entrar .logo .marca { width: 56px; height: 56px; border-radius: 18px; background: var(--azul); color: var(--cor-superficie);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.caixa-entrar .logo .marca svg { width: 28px; height: 28px; }
.caixa-entrar .logo strong { display: block; font-size: 1.4rem; }
.caixa-entrar .logo span { color: var(--suave); font-size: .92rem; }

/* gestão de contas */
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; align-items: end; }
.contas td form { display: inline; margin: 0; }
.contas details summary { cursor: pointer; color: var(--azul); font-size: .88rem; }
.contas details[open] { background: var(--cor-superficie-2); border-radius: 12px; padding: 10px; margin-top: 6px; }
.contas .inativa td { opacity: .55; }
.etiqueta-papel { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--azul-claro); color: var(--azul-esc); }
.etiqueta-papel.gm { background: var(--cor-texto); color: var(--cor-superficie); }
.etiqueta-papel.gestao { background: var(--verde-claro); color: var(--verde); }
.etiqueta-papel.pdv { background: var(--cor-superficie-3); color: var(--cor-texto-2); }
.link-botao { background: none; border: 0; color: var(--vermelho); cursor: pointer; padding: 0; font-size: .88rem; }

@media (max-width: 520px) {
  .corpo { padding: 16px 12px 40px; }
  .servicos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .servico { min-height: 140px; padding: 14px; }
  .titulo { font-size: 1.3rem; }
}
.botao svg { width: 18px; height: 18px; flex: none; }
.vazio svg { stroke-width: 1.5; }

/* busca de produto (pedido de ajuste) */
.busca-prod { position: relative; }
.busca-prod .busca { margin: 0; }
.resultados { display: flex; flex-direction: column; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.resultados:empty { display: none; }
.resultado { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  padding: 11px 12px; border: 0; border-bottom: 1px solid var(--linha); background: var(--cor-superficie); cursor: pointer; color: var(--tinta); }
.resultado:hover, .resultado:focus { background: var(--azul-claro); outline: none; }
.resultado strong { font-size: .95rem; }
.resultado small { color: var(--suave); font-size: .82rem; }
.sem-resultado { padding: 14px 4px; color: var(--suave); font-size: .92rem; }
.escolhido .prod { margin-bottom: 14px; }
.escolhido .prod strong { display: block; font-size: 1.02rem; }
.escolhido .prod small { color: var(--suave); }
.linha-qtd { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.linha-qtd .qtd input { width: 70px; }
.linha-qtd .botao { flex: 1; }

/* ---------- tela de contas ---------- */
.cabeca-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.numeros > div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); }
.numeros strong { display: block; font-size: 1.45rem; line-height: 1.2; }
.numeros span { color: var(--suave); font-size: .84rem; }
.numeros .atencao strong { color: var(--amarelo); }
.filtros-contas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.filtros-contas .busca { flex: 1; min-width: 220px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--cor-borda-forte); background: var(--cor-superficie); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600;
  font-size: .88rem; color: var(--tinta); }
.chip.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--cor-superficie); }
.secao span { color: var(--cor-texto-3); font-weight: 600; margin-left: 4px; }
.contas-lista .conta { display: grid; grid-template-columns: 40px 1fr 170px 84px; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.contas-lista .conta:last-child { border-bottom: 0; }
.contas-lista .conta.inativa { opacity: .55; }
.contas-lista .dados { min-width: 0; }
.contas-lista .dados strong { display: block; }
.contas-lista .dados small { color: var(--suave); font-size: .84rem; }
.contas-lista .acesso { text-align: right; color: var(--suave); }
.contas-lista .botao { min-height: 34px; }
.voce { font-size: .72rem; font-weight: 700; color: var(--azul); background: var(--azul-claro); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; background: var(--cor-superficie-3); color: var(--cor-texto-2); }
.avatar.gm { background: var(--cor-texto); color: var(--cor-superficie); }
.avatar.adm { background: var(--azul-claro); color: var(--azul-esc); }
.avatar.gestao { background: var(--verde-claro); color: var(--verde); }

/* janelas (dialog) */
.janela { width: min(460px, calc(100vw - 24px)); border: 0; border-radius: 20px; padding: 0;
  box-shadow: var(--sombra-3); color: var(--tinta); }
.janela::backdrop { background: rgba(10, 16, 22, .45); }
.janela form { margin: 0; }
.janela-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.janela-topo h2 { margin: 0; font-size: 1.15rem; }
.janela .fechar { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--suave); cursor: pointer; }
.janela-corpo { padding: 12px 20px 4px; }
.janela-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px;
  border-top: 1px solid var(--linha); }
.opcoes.tres { grid-template-columns: repeat(3, 1fr); }
/* aviso do ajuste de Entrada: produto numa nota sem entrada */
.janela-aviso-nota { background: var(--cartao); }
.aviso-notas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.aviso-nota { border: 1px solid var(--linha); border-left: 4px solid var(--amarelo); border-radius: 12px; padding: 10px 12px; }
.aviso-nota-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aviso-nota-info, .aviso-conferencia { color: var(--suave); font-size: .88rem; }
.aviso-nota-info small { color: var(--suave); }
.aviso-nota-qtd { margin-top: 4px; }
.aviso-nota.saiu { border-left-color: var(--cor-acao); }
.aviso-nota-porque { margin: 6px 0 0 !important; font-size: .9rem; line-height: 1.4; }
.aviso-ver-nota { display: inline-block; margin-top: 6px; font-weight: 600; font-size: .9rem; }
.janela-aviso-nota p { margin: 0 0 8px; }
.aviso-botoes { flex-wrap: wrap; }
.aviso-botoes .botao { flex: 1 1 auto; text-align: center; }
.aviso-botoes [hidden] { display: none; }
.texto-aviso { color: var(--amarelo); font-weight: 600; }
.interruptor { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin-bottom: 8px; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--azul); }

@media (max-width: 620px) {
  .contas-lista .conta { grid-template-columns: 40px 1fr auto; }
  .contas-lista .acesso { display: none; }
}

.secao svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.rota { display: flex; align-items: center; gap: 12px; }
.rota > div { flex: 1; min-width: 0; }
.rota small { display: block; color: var(--suave); font-size: .78rem; font-weight: 650; }
.rota strong { font-size: .95rem; }
.seta-rota { font-size: 1.4rem; color: var(--azul); flex: none; }
.emb-hist .entrega { display: block; color: var(--verde) !important; font-weight: 600; margin-top: 2px; }

/* transferência: as duas pontas */
.ponta { margin-bottom: 10px; }
.ponta span { font-size: .8rem; color: var(--suave); font-weight: 600; }
.ponta span b { letter-spacing: .04em; }
.ponta.sai select { border-left: 4px solid var(--vermelho); }
.ponta.vai select { border-left: 4px solid var(--verde); }
.ponta.sai span b, .rota .sai small, .cor-sai { color: var(--vermelho); }
.ponta.vai span b, .rota .vai small, .cor-vai { color: var(--verde); }
.inverter { display: block; margin: -4px auto 6px; width: 40px; height: 32px; border-radius: 10px; border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie); color: var(--azul); font-size: 1.1rem; cursor: pointer; }

/* ---------- cabeçalho de tela + abas (app da loja) ---------- */
.cabecalho-tela { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cabecalho-tela .titulo { margin: 0; }
.abas-seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.abas-seg::-webkit-scrollbar { display: none; }
.abas-seg a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 14px; border-radius: 10px; color: var(--suave); text-decoration: none;
  font-weight: 600; font-size: .92rem; white-space: nowrap; }
.abas-seg a.ativa { background: var(--azul); color: var(--cor-superficie); }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: .78rem; background: var(--azul-claro); color: var(--azul-esc); }
.contador.alerta { background: var(--vermelho); color: var(--cor-superficie); }
.abas-seg a.ativa .contador.alerta { background: var(--cor-superficie); color: var(--vermelho); }
.dica-tela { margin: 0 0 12px; color: var(--suave); font-size: .9rem; }
.rodape-tela { margin: 14px 0 0; color: var(--suave); font-size: .82rem; text-align: center; }
.linha { display: block; }
.texto-erro { color: var(--vermelho); }

/* ---------- nota de transferência (cartão que abre e mostra os itens) ---------- */
.notas { display: flex; flex-direction: column; gap: 10px; }
.nota-card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden; }
.nota-card.pendente { border-left: 4px solid var(--amarelo); }
.nota-card.feita { border-left: 4px solid var(--verde); }
.nota-card.cancelada { border-left: 4px solid var(--linha); opacity: .8; }
.nota-card .nota-cabeca { padding: 14px 16px; display: grid; gap: 6px; }
.nota-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nota-num { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.nota-rota { font-size: .95rem; }
.nota-rota .rotulo { color: var(--suave); }
.nota-rota small { color: var(--suave); }
.nota-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--suave); font-size: .86rem; }
.nota-valor { margin-left: auto; color: var(--tinta); font-size: 1rem; font-variant-numeric: tabular-nums; }
  color: var(--suave); padding: 10px 16px 6px; }
.mono { font-family: var(--fonte-mono); font-size: .88em; }

/* ---------- aviso "notas para dar entrada" na central ---------- */
.alerta-entrada { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px;
  border-radius: var(--raio); background: var(--vermelho-claro); color: var(--tinta); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--vermelho) 25%, transparent); }
.alerta-entrada .icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--vermelho); color: var(--cor-superficie); flex: none; }
.alerta-entrada .icone svg { width: 22px; height: 22px; }
.alerta-entrada strong { display: block; }
.alerta-entrada small { color: var(--suave); }
.alerta-entrada .seta { margin-left: auto; font-size: 1.6rem; color: var(--vermelho); }

.vazio.ok strong { display: block; color: var(--tinta); font-size: 1.05rem; margin-bottom: 2px; }
.vazio.ok svg { color: var(--verde); }

/* ---------- embalagens: itens do pedido ---------- */
@media (max-width: 440px) {
  .abas-seg { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .abas-seg a { min-height: 40px; padding: 0 8px; }
}

/* etiqueta da marca da loja (mesma do style.css) */
.marca { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 650;
  padding: 0 8px 0 6px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; margin-right: 4px; }
.marca::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.marca-boticario { background: var(--marca-boticario-suave); color: var(--marca-boticario); }
.marca-eudora { background: var(--marca-eudora-suave); color: var(--marca-eudora); }
.marca-qdb { background: var(--marca-qdb-suave); color: var(--marca-qdb); }
.marca-vd { background: var(--marca-vd-suave); color: var(--marca-vd); }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

/* ---------- como funciona (tutoriais) ---------- */
.figura-tutorial { margin: 0 0 20px; border-radius: var(--raio-g); overflow: hidden; }
.figura-tutorial iframe { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
@media (max-width: 520px) { .figura-tutorial iframe { height: 430px; } }
.passos { list-style: none; counter-reset: passo; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li { counter-increment: passo; position: relative; padding: 14px 16px 14px 58px; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-g); }
.passos li::before { content: counter(passo); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; background: var(--cor-acao-suave); color: var(--cor-acao); font-weight: 700; }
.passos strong { display: block; }
.passos span { color: var(--cor-texto-2); }
.passos b { color: var(--cor-texto); }
.botao.cheio svg, .botao svg { width: 20px; height: 20px; }

/* tela de Contas dentro da base da Oficina (usa as peças do app) */
.tela-contas .aviso-topo { margin: 0 0 16px; }
.tela-contas .filtros-contas .busca { margin: 0; }
.tela-contas .tela-acoes svg { width: 18px; height: 18px; }
.nota-passos { list-style: none; margin: 0; padding: 6px 16px; border-top: 1px solid var(--linha); }
.nota-passos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; font-size: .85rem; }
.nota-passos .passo-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: .72rem; font-weight: 600; background: var(--cor-superficie-2, var(--linha)); color: var(--cor-texto-2); }
.nota-passos .selo { margin-left: auto; }

/* módulo fechado em Configurações › App das lojas */
.servico.desligado { opacity: .5; filter: grayscale(1); box-shadow: none; cursor: not-allowed; }
.servico.desligado .icone { background: var(--cor-superficie-3); color: var(--cor-texto-3); }
.servico.desligado:hover { border-color: var(--linha); box-shadow: none; }

/* baixas: pedido que abre e mostra os itens */
.lista > .item-baixa > .item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.nota-obs { margin: 0; padding: 8px 16px 14px; font-size: .86rem; color: var(--suave); }
.opcoes-motivo { margin-bottom: 0; }
.opcoes-motivo .opcao span { min-height: 46px; padding: 6px 8px; text-align: center; font-size: .9rem; }

/* inventário: as duas quantidades lado a lado */
.duas-qtd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.duas-qtd .campo input { width: 100%; min-width: 0; box-sizing: border-box; }
.duas-qtd .campo { margin-bottom: 6px; }
.previa { margin: 0 0 8px; min-height: 1.3em; font-weight: 650; font-size: .92rem; color: var(--suave); }
.previa.mais { color: var(--verde); }
.previa.menos { color: var(--vermelho); }

/* chamados (helpdesk) no app */
.selo.ch-aguardando_aprovacao { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.ch-na_fila { background: var(--azul-claro); color: var(--azul-esc); }
.selo.ch-em_atendimento { background: var(--cor-robo-suave); color: var(--cor-robo); }
.selo.ch-resolvido { background: var(--verde-claro); color: var(--verde); }
.selo.ch-cancelado, .selo.ch-recusado { background: var(--cor-superficie-3); color: var(--cor-texto-3); }
.lista > .item-link { color: inherit; text-decoration: none; }
.lista > .item-link:hover { background: var(--cor-superficie-2); }
.arquivo { width: 100%; font-size: .9rem; margin: 4px 0 10px; }
.aviso-bloco { margin-bottom: 14px; }
.ficha-loja { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: .9rem; }
.ficha-loja dt { color: var(--suave); }
.ficha-loja dd { margin: 0; font-weight: 600; }
.descricao-loja { white-space: pre-wrap; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.cartao-ok { border-color: color-mix(in srgb, var(--verde) 40%, var(--linha)); margin-bottom: 14px; }
.cartao-ok strong { display: flex; align-items: center; gap: 6px; color: var(--verde); }
.cartao-ok strong svg { width: 18px; height: 18px; }
.cartao-ok p { margin: 8px 0 4px; white-space: pre-wrap; }
.cartao-ok small { color: var(--suave); }
.anexos-loja { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.anexo-loja { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px;
  color: var(--cor-texto); text-decoration: none; font-size: .85rem; max-width: 100%; overflow-wrap: anywhere; }
.anexo-loja svg { width: 18px; height: 18px; flex: none; }
.anexo-loja.foto { padding: 0; width: 92px; height: 92px; overflow: hidden; }
.anexo-loja.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conversa { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conversa li { padding: 10px 14px; border-radius: 14px; font-size: .9rem; }
.conversa li.sis { padding: 4px 4px 4px 14px; border-left: 2px solid var(--linha); border-radius: 0; color: var(--suave); }
.conversa li.msg { background: var(--cartao); border: 1px solid var(--linha); }
.conversa li > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.conversa time { margin-left: auto; font-size: .78rem; color: var(--cor-texto-3); }
.conversa p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cor-texto); }
.acao-loja { margin-top: 14px; }
.acao-loja summary { cursor: pointer; font-weight: 650; }
.acao-loja form { margin-top: 12px; }
.cancelar-loja { text-align: center; margin-top: 18px; }

/* contas: cargos do helpdesk */
.opcoes.quatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) { .opcoes.quatro { grid-template-columns: 1fr 1fr; } }
.grupo-cargos { margin-top: 28px; }
.grupo-cargos .cabecalho-tela { align-items: center; }
.grupo-cargos > .ajuda { margin: -4px 0 12px; color: var(--suave); font-size: .88rem; max-width: 78ch; }
.nivel-cargo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--azul-claro); color: var(--azul-esc); font-weight: 700; }
.lista > .item .fim form { margin: 0; }
.permissoes { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px 4px; margin: 0; }
.permissoes legend { font-size: .88rem; font-weight: 650; padding: 0 4px; }
.permissoes .interruptor { margin-bottom: 8px; }
.campo select[multiple] { min-height: 130px; padding: 6px; }

/* pedido de material no app */
.selo.mat-pendente { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.mat-separando { background: var(--azul-claro); color: var(--azul-esc); }
.selo.mat-entregue { background: var(--verde-claro); color: var(--verde); }
.selo.mat-cancelado { background: var(--cor-superficie-3); color: var(--cor-texto-3); }
.grade-material { display: flex; flex-direction: column; gap: 8px; }
.material { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.material.no-pedido { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.material-foto { width: 52px; height: 52px; border-radius: 12px; background: var(--cor-superficie-2); display: grid; place-items: center;
  overflow: hidden; color: var(--cor-texto-3); }
.material-foto img { width: 100%; height: 100%; object-fit: cover; }
.material-foto svg { width: 24px; height: 24px; }
.material-texto { display: flex; flex-direction: column; min-width: 0; }
.material-texto small { color: var(--suave); font-size: .82rem; }
.qtd-material button { width: 38px; height: 38px; }
.qtd-material input { width: 44px; }

/* comunicados e biblioteca no app */
.alerta-entrada.alerta-comunicado { background: var(--amarelo-claro); border-color: color-mix(in srgb, var(--amarelo) 35%, transparent); }
.alerta-entrada.alerta-comunicado .icone { background: var(--amarelo); }
.alerta-entrada.alerta-comunicado .seta { color: var(--amarelo); }
.lista > .item.nao-lido strong { font-weight: 750; }
.ponto-novo { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--azul); }
.lido-ok { display: flex; align-items: center; gap: 6px; color: var(--verde); font-weight: 600; margin-top: 14px; }
.lido-ok svg { width: 18px; height: 18px; }
.tipo-arq { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; font-size: .7rem;
  font-weight: 750; background: var(--cor-superficie-3); color: var(--cor-texto-2); }
.lista > .arq .fim svg { width: 20px; height: 20px; color: var(--azul); }
#busca-arq { margin-bottom: 6px; }

/* ---------- central da loja (2026-10-27): listas por grupo, não parede de cartões ---------- */
.saudacao { margin-bottom: 18px; }
.saudacao .subtitulo { margin-bottom: 0; }
.agora { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.agora .alerta-entrada { margin: 0; }
.central { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 820px) { .central { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.grupo-central .secao { margin: 0 0 10px; }
.lista-servicos { display: flex; flex-direction: column; background: var(--cartao); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; }
.linha-servico { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 14px; align-items: center; gap: 14px;
  padding: 13px 16px; min-height: 66px; color: var(--cor-texto); text-decoration: none; border-bottom: 1px solid var(--linha); }
.linha-servico:last-child { border-bottom: 0; }
a.linha-servico:hover { background: var(--cor-superficie-2); }
a.linha-servico:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: -2px; }
.ls-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--azul-claro); color: var(--azul); }
.ls-icone svg { width: 21px; height: 21px; }
.ls-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-texto strong { font-size: 1rem; font-weight: 650; }
.ls-texto small { color: var(--suave); font-size: .84rem; line-height: 1.35; }
.ls-estado { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ls-numero { color: var(--suave); font-size: .86rem; font-variant-numeric: tabular-nums; }
.ls-seta { color: var(--cor-texto-3); font-size: 1.4rem; line-height: 1; }
.linha-servico.fechada { grid-template-columns: 42px minmax(0, 1fr); cursor: not-allowed; background: var(--cor-superficie-2); }
.linha-servico.fechada .ls-icone { background: var(--cor-superficie-3); color: var(--cor-texto-3); }
.linha-servico.fechada strong { color: var(--cor-texto-3); }
.linha-servico.fechada small { color: var(--cor-texto-3); }
@media (max-width: 420px) {
  .linha-servico { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .ls-seta { display: none; }
  .ls-icone { width: 38px; height: 38px; }
}

/* tela vazia que ensina o que fazer */
.vazio-guia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; }
.vazio-guia strong { color: var(--cor-texto); font-size: 1.05rem; }
.vazio-guia span { max-width: 36ch; }
.vazio-guia .botao { margin-top: 10px; }
#busca-emb { margin-bottom: 10px; }
/* escolher loja: linhas compactas */
.grade-lojas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.card-loja { gap: 4px; padding: 11px 14px; }
.card-loja .selos { min-height: 0; }
.card-loja .selos:empty { display: none; }
.vazio-guia .botao svg { width: 18px; height: 18px; display: inline-block; margin: 0; color: currentColor; stroke-width: 2; }

/* "? Como funciona" na barra do app, antes do menu da conta */
.barra-dentro .botao-ajuda { margin-left: auto; }
.barra-dentro .botao-ajuda + .menu-conta { margin-left: 0; }
.tipo-arq svg { width: 20px; height: 20px; color: var(--azul); }

.nota-card.destacada { box-shadow: 0 0 0 3px var(--amarelo-claro), var(--sombra-1, none); }
.volta-ajuste { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }

/* Minha conta: o login do sistema (retaguarda) */
.cartao form + form { margin-top: 10px; }
.cartao .aviso { margin: 4px 0 12px; }

/* Pedir baixa › Quebra: aviso de que quebrado da Cálamo vai pelo Portal (nota de devolução) */
.alerta-quebra { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--vermelho) 40%, transparent); border-left: 5px solid var(--vermelho);
  border-radius: 14px; background: var(--vermelho-claro); color: var(--tinta); }
.alerta-quebra[hidden] { display: none; }
.alerta-quebra strong { display: block; color: var(--vermelho); font-size: 1rem; margin-bottom: 4px; }
.alerta-quebra p { margin: 0; font-size: .92rem; line-height: 1.45; }
.alerta-quebra-icone { color: var(--vermelho); flex: none; margin-top: 2px; }
.alerta-quebra-icone svg { width: 22px; height: 22px; }

@media (max-width: 760px) { .corpo.largo { padding-left: 16px; padding-right: 16px; } }

/* barras de rolagem finas e discretas (o mesmo das telas do escritório) */
* { scrollbar-width: thin; scrollbar-color: var(--cor-borda-forte, var(--linha)) transparent; }

/* "Escolher arquivo" no visual dos botões (o mesmo das telas do escritório) */
input[type=file] { font: inherit; font-size: .9rem; max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 10px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cor-borda-forte, var(--linha)); background: var(--cartao); color: inherit;
}
/* v1.01: na central da loja, o que está fechado (cinza) vai pro fim da lista */
.lista-servicos > .linha-servico.fechada { order: 1; }
/* com a ordem trocada, o "último" da tela pode não ser o último do código: todos têm a linha
   de baixo e a última some por baixo da borda da caixa (overflow: hidden) */
.lista-servicos > .linha-servico, .lista-servicos > .linha-servico:last-child { border-bottom: 1px solid var(--linha); margin-bottom: -1px; }

/* v1.01 — janela de pedidos de embalagem */
.janela-loja { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--cartao); }
.janela-loja svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.janela-loja span { display: flex; flex-direction: column; gap: 2px; }
.janela-loja small { color: var(--cor-texto-2); }
.janela-loja.janela-aberta { border-color: var(--cor-ok); background: var(--cor-ok-suave); }
.janela-loja.janela-aberta svg, .janela-loja.janela-aberta strong { color: var(--cor-ok); }
.janela-loja.ultimo-dia { border-color: var(--cor-atencao); background: var(--cor-atencao-suave); }
.janela-loja.ultimo-dia svg, .janela-loja.ultimo-dia strong { color: var(--cor-atencao); }
.janela-loja.janela-antes svg { color: var(--cor-acao); }
.janela-loja.janela-fechada svg { color: var(--cor-texto-3); }
.alerta-entrada.alerta-embalagem { background: var(--cor-ok-suave); border-color: color-mix(in srgb, var(--cor-ok) 35%, transparent); }
.alerta-entrada.alerta-embalagem .icone { background: var(--cor-ok); }