/* Identidade visual GWC — mesma paleta do Portal de Compras (azul-marinho + âmbar) */
:root {
  --fundo: #eef1f6;
  --superficie: #ffffff;
  --texto: #14233b;
  --texto-suave: #2a3c57;
  --sutil: #64748b;
  --borda: #dce3ee;
  --borda-forte: #c7d1e0;
  --marca: #14233b;          /* botões principais */
  --marca-forte: #0b1526;
  --topo: #14233b;
  --sobre-marca: #ffffff;
  --link: #b9842c;
  --acento: #f59e0b;
  --acento-forte: #d6830a;
  --acento-suave: #fdf1da;
  --ok: #15935e;
  --ok-fundo: #e4f4ec;
  --aviso: #8a5a00;
  --aviso-fundo: #fdf1da;
  --erro: #dc3b4b;
  --erro-fundo: #fbe7e9;
  --raio: 16px;
  --sombra: 0 1px 2px rgb(20 35 59 / .06), 0 8px 24px -14px rgb(20 35 59 / .22);
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #060c18; --superficie: #0f1b2e; --texto: #e8eef7; --texto-suave: #c7d1e0; --sutil: #94a3b8;
    --borda: #1f3150; --borda-forte: #2a3c57; --marca: #f59e0b; --marca-forte: #d6830a; --topo: #0b1526; --sobre-marca: #0b1526;
    --link: #f3c969; --acento-suave: #2b220f; --ok-fundo: #0f2e22; --ok: #5fd3a0;
    --aviso-fundo: #2b220f; --aviso: #f3c969; --erro-fundo: #3a1419; --erro: #ff8a96;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #060c18; --superficie: #0f1b2e; --texto: #e8eef7; --texto-suave: #c7d1e0; --sutil: #94a3b8;
  --borda: #1f3150; --borda-forte: #2a3c57; --marca: #f59e0b; --marca-forte: #d6830a; --topo: #0b1526; --sobre-marca: #0b1526;
  --link: #f3c969; --acento-suave: #2b220f; --ok-fundo: #0f2e22; --ok: #5fd3a0;
  --aviso-fundo: #2b220f; --aviso: #f3c969; --erro-fundo: #3a1419; --erro: #ff8a96;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.45 var(--fonte);
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-family: var(--fonte-titulo); letter-spacing: -.01em; }
small { display: block; color: var(--sutil); font-size: .82rem; }
.sutil { color: var(--sutil); font-size: .9rem; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;
  background: var(--topo); color: #fff;
}
.topo-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo-titulo strong { font-size: 1.05rem; font-family: var(--fonte-titulo); }
.loja-atual {
  background: none; border: 0; color: #f3c969; padding: 0; text-align: left; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.icone {
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgb(255 255 255 / .12);
  color: #fff; font-size: 1.4rem; cursor: pointer; flex-shrink: 0;
}
.marca {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: #0b1526; color: var(--acento); border: 1px solid rgb(245 158 11 / .45); font-family: var(--fonte-titulo); font-weight: 700; font-size: .8rem; letter-spacing: .03em; flex-shrink: 0;
}
.marca.grande { width: 64px; height: 64px; font-size: 1.3rem; border-radius: 16px; }

.conteudo { max-width: 760px; margin: 0 auto; padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); }

/* ---------- login ---------- */
.tela-login { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login { width: min(420px, 100%); }
.login-marca { text-align: center; margin-bottom: 1rem; }
.login-marca h1 { margin-top: .75rem; }

/* ---------- blocos ---------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .8rem;
}
.cartao + .cartao, .cartao + .lista { margin-top: 1rem; }
.saudacao { font-size: 1.25rem; font-weight: 600; margin: .25rem 0 1rem; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.card {
  display: flex; flex-direction: column; gap: .2rem; padding: 1rem; min-height: 128px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  color: inherit; text-decoration: none; box-shadow: var(--sombra);
  transition: transform .12s ease, border-color .12s ease;
}
.card:active { transform: scale(.98); }
.card:hover { border-color: var(--link); }
.card-icone { font-size: 1.7rem; margin-bottom: .25rem; }

.grupo { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sutil); margin: 1.25rem 0 .5rem; }
.lista-lojas { display: grid; gap: .5rem; }
.loja {
  text-align: left; padding: .9rem 1rem; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer;
}
.loja.ativa { border-color: var(--marca); box-shadow: inset 4px 0 0 var(--marca); }

/* ---------- formulários ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; }
input, select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--fundo); font-weight: 400; font-size: 16px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 1px;
}
.linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.linha > label { flex: 1 1 140px; }
.linha > label.cresce { flex: 3 1 180px; }
.linha > label.estreito { flex: 0 1 96px; }
.check-linha { flex-direction: row; align-items: center; font-weight: 400; }
.check-linha input { width: auto; min-height: 0; }

fieldset.grupo-itens { border: 1px dashed var(--borda); border-radius: var(--raio); padding: .75rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
legend { font-weight: 700; padding: 0 .3rem; }
.itens { display: flex; flex-direction: column; gap: .6rem; }
.item { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 2.4rem .75rem .75rem; border-radius: 12px; background: var(--fundo); }
.item .remover {
  position: absolute; top: .4rem; right: .4rem; width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: transparent; color: var(--sutil); font-size: 1.3rem; cursor: pointer;
}
.botao-foto {
  flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 .9rem; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer;
}
.foto-status { font-size: .82rem; color: var(--sutil); align-self: center; }
.total { text-align: right; font-size: 1.1rem; margin: 0; }

button.primario, button.secundario, button.perigo, a.botao {
  min-height: 48px; padding: .7rem 1rem; border-radius: 12px; border: 0; cursor: pointer;
  font-weight: 700; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.primario { background: var(--marca); color: var(--sobre-marca); }
.primario:hover { background: var(--marca-forte); }
.secundario { background: transparent; color: var(--link) !important; border: 1.5px solid var(--link) !important; }
.perigo { background: transparent; color: var(--erro); border: 1.5px solid var(--erro) !important; }
.pequeno { min-height: 38px !important; padding: .35rem .8rem !important; font-size: .88rem; }
button:disabled { opacity: .55; cursor: progress; }
.link { background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; padding: .4rem; }
.erro { color: var(--erro); margin: 0; min-height: 0; }
.erro:empty { display: none; }

/* ---------- confirmação ---------- */
.confirmacao { text-align: center; align-items: stretch; }
.check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--ok-fundo); color: var(--ok); font-size: 2rem; font-weight: 800; }
.protocolo { font: 700 1.3rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; margin: 0; }
.resumo { text-align: left; white-space: pre-wrap; background: var(--fundo); border-radius: 10px; padding: .75rem; font-size: .85rem; margin: 0; }

/* ---------- listas ---------- */
.abas { display: flex; gap: .25rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: .25rem; }
.abas button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-weight: 600; color: var(--sutil); }
.abas button.ativa { background: var(--marca); color: var(--sobre-marca); }
.filtros { display: flex; gap: .75rem; align-items: center; margin: .75rem 0; }
.filtros select { width: auto; flex: 1; }
.lista { display: flex; flex-direction: column; gap: .5rem; }
.registro { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: .75rem; }
.registro.estatico { display: flex; justify-content: space-between; gap: .75rem; }
.registro summary { display: flex; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; }
.registro summary::-webkit-details-marker { display: none; }
.registro ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.direita { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex-shrink: 0; }
.acoes { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.fotos { display: flex; gap: .5rem; flex-wrap: wrap; }
.resumo-linha { font-weight: 600; margin: 0 0 .5rem; }
.vazio { text-align: center; color: var(--sutil); padding: 2rem 1rem; }

.selo { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: var(--fundo); color: var(--sutil); }
.selo-conferido, .selo-recebido { background: var(--ok-fundo); color: var(--ok); }
.selo-cancelado { background: var(--erro-fundo); color: var(--erro); }
.selo-enviado, .selo-em_separacao, .selo-registrado { background: var(--aviso-fundo); color: var(--aviso); }

.aviso { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: var(--aviso-fundo); color: var(--aviso); padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; }

/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; }
.kpi strong { display: block; font-size: 1.5rem; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.ao-vivo { color: var(--ok); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.ao-vivo.pulso { animation: pulso 1.2s ease; }
@keyframes pulso { 50% { opacity: .3; } }

.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); font-size: .9rem; }
.tabela th, .tabela td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sutil); background: var(--fundo); }
.tabela td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela tr.negativo td:nth-child(2) { color: var(--erro); font-weight: 700; }
.tabela tr:last-child td { border-bottom: 0; }

/* ---------- feedback ---------- */
.carregando { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--sutil); padding: 2rem; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--borda); border-top-color: var(--marca); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 2rem); padding: .8rem 1.1rem; border-radius: 12px; z-index: 50;
  background: #1f1a17; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .25); font-weight: 600;
  transition: opacity .3s, transform .3s;
}
.toast-erro { background: var(--erro); }
.toast-aviso { background: #8a5a00; }
.toast.saindo { opacity: 0; transform: translate(-50%, 8px); }
.versao { text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= Celular da loja (quiosque) ================= */
.centro { text-align: center; }
.pergunta { font-size: 1.25rem; margin: 1rem 0 .75rem; }
.quiosque-inicio .saudacao { text-align: center; margin-top: .5rem; }
.botoes-grandes { display: grid; gap: .9rem; }
.botoes-grandes.dois { grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.botao-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  min-height: 120px; padding: 1rem; border-radius: 18px; border: 2px solid var(--borda);
  background: var(--superficie); color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem;
  box-shadow: var(--sombra); cursor: pointer; text-align: center;
}
.botao-grande span { font-size: 2.4rem; line-height: 1; }
.botao-grande:active { transform: scale(.98); }
.botao-grande.selecionado, .nome.selecionado { border-color: var(--link); box-shadow: inset 0 0 0 2px var(--link); }

.grade-nomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.nome {
  min-height: 64px; padding: .75rem; border-radius: 14px; border: 1.5px solid var(--borda);
  background: var(--superficie); font-weight: 700; font-size: 1.05rem; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
}
.nome small { font-weight: 400; }
.nome:active { background: var(--fundo); }
.nome.enviando { opacity: .6; pointer-events: none; }
.nome.enviando::after { content: 'Enviando…'; font-size: .75rem; font-weight: 400; color: var(--sutil); }

.abas.rolavel { overflow-x: auto; scrollbar-width: none; }
.abas.rolavel::-webkit-scrollbar { display: none; }
.abas.rolavel button { flex: 0 0 auto; padding: 0 1rem; white-space: nowrap; }
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: .75rem 0; }
.produto {
  min-height: 76px; padding: .6rem; border-radius: 12px; border: 1.5px solid var(--borda); background: var(--superficie);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  text-align: center; font-size: .92rem; line-height: 1.2;
}
.produto small { color: var(--link); font-weight: 700; }
.produto:active { transform: scale(.97); background: var(--fundo); }

.com-barra { padding-bottom: 88px; }
.carrinho { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .75rem; }
.linha-carrinho { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.linha-carrinho .cresce { flex: 1; min-width: 0; }
.linha-carrinho .qtd { min-width: 1.5rem; text-align: center; font-weight: 800; }
.menos, .mais { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--borda); background: var(--fundo); font-size: 1.3rem; cursor: pointer; flex-shrink: 0; }
.valor-mini { width: 96px !important; min-height: 40px !important; text-align: right; flex-shrink: 0; }
.barra-fixa {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(.75rem + env(safe-area-inset-bottom));
  width: min(728px, calc(100% - 2rem)); z-index: 6; box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.item-perda { border-bottom: 1px solid var(--borda); padding: .5rem 0 .75rem; display: flex; flex-direction: column; gap: .5rem; }
.item-perda:last-child { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { min-height: 38px; padding: .3rem .8rem; border-radius: 99px; border: 1.5px solid var(--borda); background: var(--superficie); cursor: pointer; font-size: .9rem; }
.chip.ativo { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.botao-foto.ok { border-color: var(--ok); color: var(--ok); }
.botao-foto.grande { min-height: 56px; font-size: 1rem; }
.resumo-curto { gap: .3rem; }
.passos { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 0 0 .5rem; counter-reset: p; }
.passos li { flex: 1; font-size: .72rem; text-align: center; padding-top: .45rem; border-top: 4px solid var(--borda); color: var(--sutil); }
.passos li.feito { border-color: var(--ok); }
.passos li.atual { border-color: var(--link); color: var(--texto); font-weight: 700; }

/* ================= Gestão ================= */
.oculto-campo { display: none; }
.registro.coluna, .acoes.coluna, .aviso.coluna { flex-direction: column; align-items: stretch; }
.aviso.coluna { gap: .25rem; }
.linha-topo { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.registro p { margin: .4rem 0 0; }
table.mini { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .88rem; }
table.mini td { padding: .3rem .2rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
table.mini td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi.alerta strong { color: var(--erro); }
.negativo-txt { color: var(--erro); font-weight: 700; }
.registro .linha input { flex: 1 1 160px; min-height: 38px; }
input[type="month"] { min-width: 0; }
@media (max-width: 420px) { .botoes-grandes.dois { grid-template-columns: 1fr; } .tabela { font-size: .8rem; } .tabela th, .tabela td { padding: .5rem .4rem; } }

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); }
.rolagem .tabela { min-width: 560px; }

/* ================= Pedido de compras (estilo Portal de Compras) ================= */
.prazo { border-radius: var(--raio); overflow: hidden; border: 1px solid #f3c969; background: var(--acento-suave); box-shadow: var(--sombra); margin-bottom: .9rem; }
.prazo-topo { background: #f3c969; color: #14233b; font-weight: 700; font-size: .78rem; letter-spacing: .04em; padding: .5rem .9rem; }
.prazo-corpo { padding: .8rem .9rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; color: var(--texto); }
.prazo-corpo p { margin: 0; }
.relogio { display: flex; align-items: flex-start; gap: .35rem; }
.relogio > span { font-weight: 800; font-size: 1.4rem; padding-top: .3rem; color: var(--texto); }
.casa { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.casa strong { display: grid; place-items: center; width: 50px; height: 48px; border-radius: 10px; background: #14233b; color: #f59e0b;
  font: 700 1.45rem/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.casa small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
.linha-cartao { flex-direction: row; align-items: center; gap: .75rem; padding: .85rem 1rem; margin-bottom: .75rem; }
.linha-cartao .ic { font-size: 1.3rem; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--acento-suave); flex-shrink: 0; }
.linha-cartao + .linha-cartao { margin-top: 0; }
.cresce { flex: 1; min-width: 0; }
.busca { margin-bottom: .75rem; background: var(--superficie) !important; }
.setores { display: flex; flex-direction: column; gap: .7rem; }
.setor { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.setor.revisado { border-color: color-mix(in srgb, var(--ok) 40%, var(--borda)); }
.setor-cab { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: none; border: 0; cursor: pointer; text-align: left; }
.setor-cab strong { display: block; font-family: var(--fonte-titulo); font-size: 1.02rem; }
.setor-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--fundo); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.seta { color: var(--sutil); font-size: 1rem; }
.setor-corpo { border-top: 1px solid var(--borda); }
.setor-corpo.externo { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.produto-linha { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-bottom: 1px solid var(--borda); }
.produto-linha.com-qtd { background: color-mix(in srgb, var(--acento-suave) 55%, transparent); }
.nome-produto { font-weight: 500; }
.grupo-variantes { padding: .7rem 1rem .3rem; background: var(--fundo); border-bottom: 1px solid var(--borda); }
.grupo-variantes small { display: inline; margin-left: .4rem; }
.stepper { display: flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--superficie); }
.stepper button { width: 42px; height: 42px; border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--texto); }
.stepper button:disabled { color: var(--borda-forte); cursor: default; }
.qtd-campo { width: 52px !important; min-height: 42px !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  text-align: center; font-weight: 700; padding: 0 !important; font-variant-numeric: tabular-nums; }
.sem-necessidade { display: block; width: calc(100% - 2rem); margin: .8rem 1rem; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--borda-forte);
  background: var(--superficie); font-weight: 600; cursor: pointer; color: var(--texto-suave); }
.sem-necessidade.ativo { border-color: var(--ok); color: var(--ok); background: var(--ok-fundo); }
.barra-carrinho {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .75rem max(1rem, calc((100% - 728px) / 2)) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -8px 24px -16px rgb(20 35 59 / .35);
}
.barra-carrinho .primario { min-width: 130px; }
.barra-carrinho .primario:disabled { background: var(--borda-forte); color: #fff; opacity: 1; cursor: not-allowed; }
.barra-info { display: flex; flex-direction: column; min-width: 0; }
.alerta-txt { color: var(--acento-forte) !important; }
.com-barra { padding-bottom: 110px; }
.itens-revisao { list-style: none; padding: 0; margin: .3rem 0 0; }
.itens-revisao li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px dashed var(--borda); }
.itens-revisao li:last-child { border-bottom: 0; }
.itens-revisao strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rotulo-setor { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-top: .4rem; }
.protocolo-mini { font: 700 .78rem ui-monospace, Menlo, monospace; color: var(--sutil); white-space: nowrap; }
.acoes.dois { display: grid; grid-template-columns: 1fr 1fr; }
.acoes.dois > * { min-height: 46px; }
@media (max-width: 380px) { .casa strong { width: 44px; height: 42px; font-size: 1.25rem; } .acoes.dois { grid-template-columns: 1fr; } }

/* ===================== GWC HUB 2 — consultor financeiro ===================== */
.conteudo.com-nav { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .25rem;
  background: var(--superficie); border-top: 1px solid var(--borda); padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); z-index: 5; }
.nav-item { flex: 0 1 140px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem; border-radius: 10px;
  color: var(--sutil); text-decoration: none; font-size: .8rem; font-weight: 600; min-height: 48px; justify-content: center; }
.nav-item span { font-size: 1.15rem; line-height: 1; }
.nav-item.ativa { color: var(--texto); background: var(--acento-suave); }
.cab-linha { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.cab-linha h2 { margin: 0; font-size: 1.1rem; }
.consolidado .kpis { margin: .9rem 0 0; }
.kpi small + strong { font-size: 1.25rem; }
.semaforo { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; white-space: nowrap; }
.semaforo::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.s-ok { background: var(--ok-fundo); color: var(--ok); }
.s-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.s-erro { background: var(--erro-fundo); color: var(--erro); }
.s-neutro { background: var(--fundo); color: var(--sutil); }
.alerta { background: var(--aviso-fundo); color: var(--aviso); border-radius: 10px; padding: .6rem .8rem; margin: .9rem 0 0; font-weight: 600; font-size: .9rem; }
.lista-fin { display: grid; gap: .6rem; }
.loja-fin { display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; color: inherit; text-decoration: none; box-shadow: var(--sombra); }
.loja-fin:hover { border-color: var(--link); }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; font-variant-numeric: tabular-nums; font-size: .92rem; }
.mini span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.neg { color: var(--erro); } .pos { color: var(--ok); }
.etiquetas { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.etiqueta { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; background: var(--fundo); color: var(--sutil); }
.alerta-et { background: var(--aviso-fundo); color: var(--aviso); }
.largo { width: 100%; margin-top: 1.25rem; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); }
.tabela.dre { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela.dre th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.tabela.dre td { text-align: right; }
.lista-simples { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.chat { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.bolha { max-width: 92%; padding: .7rem .9rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.bolha.user { align-self: flex-end; background: var(--marca); color: var(--sobre-marca); border-bottom-right-radius: 4px; }
.bolha.assistant { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.bolha.falhou { border-color: var(--erro); color: var(--erro); }
.bolha.pensando { display: flex; align-items: center; gap: .5rem; color: var(--sutil); }
.sugestoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.chip { border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: 99px; padding: .45rem .8rem; font-size: .85rem; cursor: pointer; min-height: 40px; text-align: left; }
.chip:hover { border-color: var(--link); }
.pergunta { display: flex; gap: .5rem; align-items: stretch; }
.pergunta textarea { flex: 1; min-width: 0; resize: vertical; border: 1px solid var(--borda-forte); border-radius: 12px; padding: .6rem .75rem; background: var(--superficie); }
.pergunta button { flex-shrink: 0; }
.kpi strong { white-space: nowrap; }
.tabela.dre tbody th { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.pergunta button { font-size: 1rem; padding: 0 1rem; }

/* ---------- Lançamentos (Ana) ---------- */
.lancar { display: flex; flex-direction: column; gap: .85rem; }
.lancar h2 { margin: 0; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.rotulo { font-weight: 600; font-size: .92rem; }
.segmentado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: .25rem; }
.segmentado button { min-height: 44px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--sutil); padding: .3rem .4rem; line-height: 1.2; }
.segmentado button.ativo { background: var(--marca); color: var(--sobre-marca); }
.segmentado button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.leitura { margin: 0; padding: .7rem .85rem; border-radius: 10px; background: var(--acento-suave); color: var(--texto); font-size: .9rem; border-left: 4px solid var(--acento); }
.pendencias { margin-top: 1rem; }
.pendencias h3 { font-size: 1rem; }
.pendencias summary { cursor: pointer; font-weight: 600; }
.lista-pend { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lista-pend li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .65rem .75rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); }
.lista-pend li > div:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.lista-pend .acoes { margin: 0; align-items: center; }
.ok-txt { color: var(--ok); font-weight: 600; }
[hidden] { display: none !important; }
.bloco-div { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.bloco-div .acoes { margin: 0; }
.tabela-div { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .9rem; }
.linha-div { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: .5rem; font-weight: 500; font-size: .9rem; }
.linha-div span { min-width: 0; overflow-wrap: anywhere; }
.linha-div input { text-align: right; font-variant-numeric: tabular-nums; }
.soma-div { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.confidencial { border-color: var(--acento); }
.primario.pequeno { min-height: 38px; }
input.grande { font-size: 1.05rem; min-height: 52px; }
.auto { margin: -.3rem 0 0; font-size: .86rem; color: var(--texto-suave); background: var(--fundo); border-radius: 10px; padding: .5rem .7rem; }
.opcoes-extra { border: 1px solid var(--borda); border-radius: 12px; padding: .2rem .8rem; }
.opcoes-extra summary { cursor: pointer; font-weight: 600; padding: .55rem 0; color: var(--link); }
.opcoes-extra-corpo { display: flex; flex-direction: column; gap: .8rem; padding-bottom: .8rem; }
.resumo-ext { margin: .4rem 0 .6rem; }
.pend-info { min-width: 0; flex: 1 1 220px; display: flex; flex-direction: column; gap: .15rem; overflow-wrap: anywhere; }
.sugere { font-size: .86rem; color: var(--ok); font-weight: 600; }
.sugere.fraca { color: var(--aviso); }
.sugere small { display: inline; font-weight: 400; }
.extrato > .primario { width: 100%; margin-bottom: .6rem; }
.val-loja { display: inline; color: var(--sutil); font-weight: 500; }
.lista-pend li.col { flex-direction: column; align-items: stretch; }
.saldo-conta { display: flex; flex-direction: column; gap: .2rem; }
.saldo-conta strong { font-size: clamp(1.8rem, 8vw, 2.6rem); font-variant-numeric: tabular-nums; }
.nav-item { flex: 1 1 0; min-width: 0; font-size: .74rem; }
html { scroll-padding-bottom: 6.5rem; scroll-padding-top: 4.5rem; }
/* setor de compras (v2.3) */
.setor > div { display: flex; flex-direction: column; gap: .1rem; }
.setor small { color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.setor strong { font-size: 1.15rem; }
.setor p { margin: .4rem 0 0; }
.auto.alerta { background: color-mix(in srgb, #f59e0b 18%, var(--fundo)); color: var(--texto); }
.val-loja { color: var(--texto-suave); font-weight: 400; }
.lista-pend li.col > .pend-info { flex: none; }
.lista-pend li.col > button { align-self: flex-start; }
/* faixa do setor (v2.3) */
.faixa-setor { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 .9rem; }
.faixa-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.faixa-titulo strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.1rem; }
.faixa-titulo small { color: var(--texto-suave); font-weight: 600; }
.abas { display: flex; gap: .35rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: .25rem; }
.aba { flex: 1; text-align: center; padding: .55rem .5rem; border-radius: 9px; text-decoration: none; color: var(--texto-suave); font-weight: 600; font-size: .92rem; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.aba.ativa { background: var(--marca); color: var(--sobre-marca); }
.fluxo-loja summary { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.fluxo-loja summary b { flex: 1; }
table.fluxo tfoot th, table.fluxo tfoot td { font-weight: 700; border-top: 2px solid var(--borda); }
table.dre td.forte, table.dre tr td.forte { font-weight: 700; }
table.dre tr.separa th { text-align: left; padding-top: .9rem; color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; background: none; }
/* nome da linha fica parado ao rolar os meses para o lado */
table.dre tbody th, table.dre thead th:first-child, table.dre tfoot th { position: sticky; left: 0; z-index: 1; background: var(--superficie); max-width: 46vw; white-space: normal; box-shadow: 1px 0 0 var(--borda); }
.rolagem .tabela.dre { overflow: visible; }   /* overflow:hidden da tabela impedia a coluna fixa */
table.dre tbody th, table.dre thead th:first-child, table.dre tfoot th { min-width: 9.5rem; width: 9.5rem; max-width: 9.5rem; z-index: 2; background-clip: padding-box; }

/* ---------- leitura interpretativa (v2.4) ---------- */
.caixa > strong { display: block; font: 700 clamp(1.8rem, 8vw, 2.4rem)/1.1 var(--fonte-titulo); margin: .2rem 0 .4rem; font-variant-numeric: tabular-nums; }
.caixa .mini { margin-top: .8rem; }
.caixa .link { display: inline-block; margin-top: .6rem; color: var(--link); font-weight: 600; text-decoration: none; }
.frases { list-style: none; padding: 0; margin: .8rem 0 0; background: none; border: 0; display: grid; gap: .55rem; }
.frases li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .4rem; align-items: baseline; line-height: 1.4; }
.frases li > span { font-size: .8rem; text-align: center; }
.frases .tom-bom > span { color: var(--ok); } .frases .tom-ruim > span { color: var(--erro); } .frases .tom-neutro > span { color: var(--sutil); }
.frases .tom-ruim { font-weight: 600; }
.destino { margin-top: 1rem; }
.barra { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin: .35rem 0 .5rem; gap: 2px; background: var(--borda); }
.barra span { min-width: 3px; }
.legenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; color: var(--texto-suave); }
.legenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.f0 { background: #6b7a99; } .f1 { background: #9aa8c2; } .f2 { background: #c2a36b; } .f3 { background: #d9c49b; }
.f4 { background: #b9a6c9; } .f5 { background: #8fb3c4; } .f6 { background: #d48b6b; }
.lucro { background: var(--ok); } .prej { background: var(--erro); } .venda { background: var(--borda-forte); }
.resumo { margin: .35rem 0 0; color: var(--texto-suave); font-size: .95rem; }
.grafico .colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .4rem; margin: .5rem 0 .6rem; }
.grafico .col { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; text-align: center; }
.grafico .col.aberto { opacity: .6; }
.grafico .pilha { height: 120px; width: 100%; max-width: 46px; display: flex; align-items: flex-end; gap: 3px; }
.grafico .pilha span { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; }
.grafico .col b { font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dre-completo summary { cursor: pointer; padding: .2rem 0; }
.dre-completo[open] summary { margin-bottom: .6rem; }
.lista-fin .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===================== GWC HUB 2.5 — gestão (início por cargo, solicitações, equipe) ===================== */
.gestao { display: flex; flex-direction: column; gap: 1rem; }
.gestao .cartao + .cartao, .gestao .cartao + .lista { margin-top: 0; }
.gestao .cab-p { margin: 0; font-size: 1.05rem; }
.gestao .saudacao { margin: 0; font-size: 1.05rem; color: var(--texto-suave); }
.largo { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
a.chip { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }

.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.atalho { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; min-height: 124px; padding: 1rem;
  text-align: left; cursor: pointer; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie);
  box-shadow: var(--sombra); color: var(--texto); }
.atalho:hover { border-color: var(--link); }
.atalho.escuro { background: var(--topo); border-color: var(--topo); color: #fff; }
.atalho.escuro small { color: #c4cad6; }
.atalho-ic { font-size: 1.5rem; line-height: 1; color: var(--acento); }
.atalho:not(.escuro) .atalho-ic { color: var(--texto); }
.atalho-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.atalho-txt strong { font-size: 1rem; overflow-wrap: anywhere; }

.faixa-aviso { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--raio);
  background: var(--aviso-fundo); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); color: var(--aviso); text-decoration: none; }
.faixa-aviso small { color: var(--aviso); }
.aviso-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: #14233b; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; }

.kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: .6rem; }
a.kpi { text-decoration: none; color: inherit; }
.kpis.tres .kpi { padding: .75rem; }

.cartao-fin { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border-radius: 18px; background: var(--topo); color: #fff; text-decoration: none; box-shadow: var(--sombra); }
.cartao-fin > .cab-linha span:first-child, .cartao-fin > span { color: #c4cad6; font-size: .88rem; }
.cartao-fin strong { font-size: 1.05rem; font-weight: 600; }
.cartao-fin-link { color: #f3c969 !important; font-weight: 700; font-size: .95rem !important; }
.selo-ouro { display: inline-block; background: var(--acento); color: #14233b; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 8px; white-space: nowrap; }
.rede-topo .rede-num { font-size: 2.4rem; font-family: var(--fonte-titulo); line-height: 1.1; }

a.cartao { text-decoration: none; color: inherit; }
.rede-total { display: flex; align-items: baseline; gap: .6rem; }
.rede-total strong { font-size: 2.3rem; font-family: var(--fonte-titulo); line-height: 1; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.mini-kpis span { display: flex; flex-direction: column; padding: .5rem .65rem; border-radius: 10px; background: var(--fundo); font-size: .78rem; color: var(--sutil); }
.mini-kpis b { font-size: 1.05rem; color: var(--texto); }
.mini-kpis .neg-fundo { background: var(--erro-fundo); }
.mini-kpis .neg-fundo b { color: var(--erro); }
.linha-cartao { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: inherit; min-height: 52px; }
.linha-cartao strong { font-size: 1.4rem; font-family: var(--fonte-titulo); }
.linha-cartao span:nth-child(2) { flex: 1; font-weight: 600; }
.neg { color: var(--erro); }

.lista-links { display: flex; flex-direction: column; }
.link-sistema { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; background: none; border: 0; border-top: 1px solid var(--borda); text-align: left; cursor: pointer; min-height: 56px; color: var(--texto); }
.link-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--acento-suave); color: var(--aviso); display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; }

.lista-sol { display: flex; flex-direction: column; gap: .6rem; }
.sol-item { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: inherit; }
.cartao .sol-item { background: var(--fundo); }
.sol-item.sol-pra-mim { border: 2px solid var(--acento); }
.sol-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sol-tipo { font-size: .75rem; font-weight: 700; color: var(--texto-suave); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: .1rem .5rem; }
.selo.sol-aberta { background: var(--aviso-fundo); color: var(--aviso); }
.selo.sol-andamento { background: #e3ebff; color: #1d4ed8; }
.selo.sol-concluida { background: var(--ok-fundo); color: var(--ok); }
.selo.sol-cancelada { background: var(--fundo); color: var(--sutil); }
.sol-desc { white-space: pre-line; margin: 0; }
.conversa { display: flex; flex-direction: column; gap: .5rem; }
.msg { align-self: flex-start; max-width: 85%; padding: .6rem .8rem; border-radius: 14px 14px 14px 4px; background: var(--fundo); }
.msg.minha { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--acento-suave); }
.msg p { margin: 0 0 .2rem; white-space: pre-line; }
.rotulo { font-size: .88rem; font-weight: 600; display: block; margin-bottom: .3rem; }

.lista-com { display: flex; flex-direction: column; gap: .4rem; }
.com-item { display: flex; gap: .6rem; align-items: flex-start; text-decoration: none; color: inherit; padding: .3rem 0; }
.com-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); margin-top: .45rem; flex-shrink: 0; }
.com-ponto.lido { background: var(--borda-forte); }

.lista-membros { gap: 0; padding: .25rem 1rem; }
.membro { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--borda); }
.membro:first-child { border-top: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #e3ebff; color: #1d4ed8; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.membro select { width: auto; min-width: 104px; min-height: 40px; font-weight: 600; font-size: .9rem; }
.membro select.sit-ativo { color: var(--ok); }
.membro select.sit-ferias, .membro select.sit-afastado { color: var(--aviso); }
.membro select.sit-saiu { color: var(--erro); }
.add-membro summary, details.cartao summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.confirmar p { margin: 0; }
.ok-txt { color: var(--ok); font-weight: 600; }
.aviso-txt { color: var(--aviso); font-weight: 600; }

.tabela-rede { gap: 0; padding: .25rem 1rem; }
.tabela-rede .tr { display: grid; grid-template-columns: minmax(0, 1fr) 60px 92px; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--borda); text-decoration: none; color: inherit; align-items: center; }
.tabela-rede .tr.cab { border-top: 0; font-size: .75rem; font-weight: 700; color: var(--sutil); }
.tabela-rede .tr > :nth-child(2), .tabela-rede .tr > :nth-child(3) { text-align: right; }
.tabela-rede .tr > :nth-child(3) { font-size: .82rem; }
@media (max-width: 380px) { .atalhos { gap: .5rem; } .atalho { min-height: 112px; padding: .85rem; } }

/* ===================== GWC HUB 2.6 — caixa às cegas, perdas, RH ===================== */
.secao { display: flex; flex-direction: column; gap: .6rem; }
.secao-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sutil); margin: .25rem 0 0; font-family: var(--fonte); font-weight: 700; }
a.atalho { text-decoration: none; }
.atalho-alerta { border-color: color-mix(in srgb, var(--erro) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erro) 35%, transparent), var(--sombra); }
.atalho-alerta small { color: var(--erro); font-weight: 600; }

/* etiquetas (sempre com texto, nunca só cor) */
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.tag { display: inline-flex; align-items: center; gap: .25rem; width: fit-content; font-size: .72rem; font-weight: 700; line-height: 1; padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; border: 1px solid transparent; }
.tag-ok { background: var(--ok-fundo); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.tag-aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.tag-erro { background: var(--erro-fundo); color: var(--erro); border-color: color-mix(in srgb, var(--erro) 25%, transparent); }
.tag-neutra { background: var(--fundo); color: var(--texto-suave); border-color: var(--borda); }

/* tela inicial da loja */
.boas-vindas { display: flex; flex-direction: column; gap: .35rem; padding: .25rem 0 .25rem; }
.boas-vindas h1 { margin: 0; font-size: 1.6rem; }
.boas-vindas .sutil::first-letter { text-transform: uppercase; }
.cartao.nota { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 35%, transparent); box-shadow: none; gap: .3rem; }
.cartao.nota p { margin: 0; color: var(--texto-suave); }

/* passo a passo */
.passos { display: flex; flex-direction: column; gap: .5rem; }
.passos-topo { display: flex; flex-direction: column; gap: .1rem; }
.passos-topo span { font-size: .78rem; font-weight: 700; color: var(--sutil); text-transform: uppercase; letter-spacing: .06em; }
.passos-topo strong { font-family: var(--fonte-titulo); font-size: 1.35rem; }
.passos-barra { display: grid; grid-auto-flow: column; gap: .3rem; }
.passos-barra span { height: 4px; border-radius: 99px; background: var(--borda); }
.passos-barra span.feito { background: var(--acento); }

.lista-pessoas { display: flex; flex-direction: column; gap: .5rem; }
.pessoa { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 64px; padding: .75rem 1rem; border-radius: 14px; border: 1px solid var(--borda); background: var(--superficie); box-shadow: var(--sombra); text-align: left; cursor: pointer; }
.pessoa:hover { border-color: var(--link); }
.pessoa.bloqueada { opacity: .7; cursor: not-allowed; box-shadow: none; }
.pessoa .seta { font-size: 1.5rem; color: var(--sutil); }
.vazio-acao { text-align: left; }
.vazio-acao p { margin: 0; }

/* PIN */
.pin-cartao { align-items: center; text-align: center; padding: 1.25rem 1rem; }
.pin-quem { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.pin-pontos { display: flex; gap: .9rem; justify-content: center; margin: .5rem 0 0; }
.pin-pontos span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borda-forte); }
.pin-pontos span.cheio { background: var(--texto); border-color: var(--texto); }
.pin-cartao .erro { min-height: 1.3em; margin: 0; }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: .6rem; justify-content: center; }
.tecla { height: 64px; border-radius: 16px; border: 1px solid var(--borda); background: var(--fundo); font-size: 1.55rem; font-weight: 600; font-family: var(--fonte-titulo); cursor: pointer; font-variant-numeric: tabular-nums; }
.tecla:active { background: var(--acento-suave); transform: scale(.97); }
.tecla.apagar { background: transparent; border-color: transparent; font-size: 1.3rem; }
.centro { text-align: center; }
button.link { background: none; border: 0; color: var(--link); font-weight: 600; cursor: pointer; padding: .5rem 0; min-height: 44px; align-self: flex-start; }

/* campo de valor em reais */
.campo-valor > span { font-size: .9rem; }
.valor-moldura { display: flex; align-items: center; gap: .5rem; padding: 0 1rem; border-radius: 14px; border: 1.5px solid var(--borda-forte); background: var(--fundo); }
.valor-moldura:focus-within { border-color: var(--marca); outline: 3px solid color-mix(in srgb, var(--marca) 25%, transparent); }
.valor-prefixo { font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 600; color: var(--sutil); }
input.valor-grande { border: 0; background: transparent; min-height: 68px; padding: 0; font-family: var(--fonte-titulo); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; outline: none !important; }
.linha-foto { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pergunta { font-size: 1.05rem; margin: 0; }
.sim-nao { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.outro-valor { display: flex; flex-direction: column; gap: .8rem; }
.outro-valor[hidden] { display: none; }

/* resumo */
.resumo { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.resumo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .9rem; border-top: 1px solid var(--borda); font-size: .95rem; }
.resumo-linha:first-child { border-top: 0; }
.resumo-linha span { color: var(--texto-suave); }
.resumo-linha strong { font-variant-numeric: tabular-nums; text-align: right; }
.resumo-linha.destaque { background: var(--acento-suave); }
.resumo-linha.destaque strong { font-size: 1.25rem; font-family: var(--fonte-titulo); }
.conf-detalhe .resumo-linha { padding: .5rem 0; font-size: .88rem; }

.sucesso { align-items: center; text-align: center; padding: 2rem 1.25rem; }
.sucesso h2, .sucesso p { margin: 0; }
.sucesso-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok); font-size: 2rem; font-weight: 800; }
.valor-malote { font-family: var(--fonte-titulo); font-size: 2.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sucesso .primario { width: 100%; margin-top: .5rem; }

/* conferência de caixa */
.filtros { display: flex; flex-direction: column; gap: .6rem; }
.lista-conf { display: flex; flex-direction: column; gap: .6rem; }
.conf-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; box-shadow: var(--sombra); }
.conf-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.conf-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.conf-grade span { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .6rem; border-radius: 10px; background: var(--fundo); min-width: 0; }
.conf-grade b { font-size: .92rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conf-detalhe summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--link); min-height: 32px; display: flex; align-items: center; }
.conf-detalhe[open] { display: flex; flex-direction: column; gap: .2rem; }
@media (max-width: 420px) { .conf-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* perdas */
.filtro-mes { max-width: 220px; }
.alerta-auditoria { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--erro-fundo); border: 1px solid color-mix(in srgb, var(--erro) 35%, transparent); border-left: 5px solid var(--erro); }
.alerta-auditoria strong { color: var(--erro); font-size: 1.02rem; }
.alerta-auditoria p { margin: 0; font-size: .92rem; }
.alerta-auditoria small { color: var(--texto-suave); font-weight: 600; }
.tabela-perdas { gap: 0; padding: .25rem 1rem; }
.tabela-perdas .tr { display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px; gap: .6rem; padding: .75rem 0; border-top: 1px solid var(--borda); align-items: center; }
.tabela-perdas .tr.cab { border-top: 0; font-size: .75rem; font-weight: 700; color: var(--sutil); padding: .6rem 0; }
.tabela-perdas .tr > :nth-child(2), .tabela-perdas .tr > :nth-child(3) { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.tabela-perdas .tr .tag { margin-top: .3rem; }
.tabela-perdas b { font-variant-numeric: tabular-nums; }

/* equipe e ficha */
.equipe-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.equipe-resumo > div { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: .65rem .8rem; display: flex; flex-direction: column; }
.equipe-resumo strong { font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: 1.1; }
.membro-link { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.form-grade .largo { grid-column: 1 / -1; }
@media (max-width: 420px) { .form-grade { grid-template-columns: 1fr; } }
.check-cartao { flex-direction: row; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); cursor: pointer; font-weight: 400; }
.check-cartao input { width: 22px; height: 22px; min-height: 0; accent-color: var(--marca); flex-shrink: 0; }
input.invalido { border-color: var(--erro); background: var(--erro-fundo); }
.ficha-topo { display: flex; gap: .9rem; align-items: center; }
.ficha-topo h2 { margin: 0; font-size: 1.3rem; }
.avatar.grande { width: 60px; height: 60px; font-size: 1.15rem; }
.lista-docs { display: flex; flex-direction: column; }
.doc { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--borda); }
.doc:first-child { border-top: 0; }
.doc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--fundo); display: grid; place-items: center; flex-shrink: 0; }
.item .un { font-size: .78rem; font-weight: 400; }
.pergunta { display: block; }
.tabela-perdas .tr { grid-template-columns: minmax(0, 1fr) 92px 104px; }
.tabela-perdas .tr small { white-space: nowrap; }

/* ===================== GWC HUB 2.7 — pedidos e portal do fornecedor ===================== */
.lista-setores { display: flex; flex-direction: column; gap: .6rem; padding-bottom: 4.5rem; }
.setor-ped { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.setor-ped > summary { list-style: none; }
.setor-ped > summary::-webkit-details-marker { display: none; }
.setor-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .85rem 1rem; cursor: pointer; min-height: 52px; }
.setor-cab h3 { margin: 0; font-size: 1.02rem; flex: 1 1 auto; }
.setor-cab small { margin-left: auto; }
details.setor-ped > summary.setor-cab::after { content: '▾'; color: var(--sutil); margin-left: .25rem; transition: transform .15s; }
details.setor-ped[open] > summary.setor-cab::after { transform: rotate(180deg); }
.setor-ped.externo { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.setor-ped.externo .setor-cab { padding-left: 0; padding-right: 0; cursor: default; }
.setor-ped.externo p { margin: 0; }
.setor-ped.sem { opacity: .6; }
.setor-ped.sem .setor-itens { display: none; }
.sem-pedido { margin: 0 1rem .5rem; font-size: .88rem; }
.setor-itens { display: flex; flex-direction: column; border-top: 1px solid var(--borda); }
.prod-ped { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.prod-ped:first-child { border-top: 0; }
.prod-nome { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.variantes { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.variante { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0 .25rem .75rem; border-left: 2px solid var(--borda); font-size: .92rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: 12px; overflow: hidden; background: var(--fundo); flex-shrink: 0; }
.stepper button { width: 44px; height: 42px; border: 0; background: transparent; font-size: 1.3rem; font-weight: 600; cursor: pointer; color: var(--texto); }
.stepper button:active { background: var(--acento-suave); }
.qtd-valor { min-width: 2.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sutil); }
.stepper.tem { border-color: var(--marca); background: var(--acento-suave); }
.stepper.tem .qtd-valor { color: var(--texto); }
.barra-pedido { position: fixed; left: 0; right: 0; bottom: calc(3.9rem + env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 760px; margin: 0 auto; padding: .65rem 1rem; background: var(--topo); color: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px -12px rgb(0 0 0 / .4); }
.barra-pedido span { display: flex; flex-direction: column; }
.barra-pedido small { color: #c4cad6; }
.barra-pedido .primario { background: var(--acento); color: #14233b; }
.lista-simples li { margin: .15rem 0; }
.lista-simples.grande { font-size: 1rem; }
.ped-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--sombra); }
.ped-item.novo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento), var(--sombra); }
.ped-item .lista-simples { margin: 0; }
.resposta-forn { margin: 0; font-size: .9rem; padding: .5rem .7rem; background: var(--fundo); border-radius: 10px; }
.chips .sep { width: 1px; background: var(--borda); margin: 0 .25rem; }
.tabela-consol { display: flex; flex-direction: column; }
.tabela-consol .tr { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--borda); }
.tabela-consol .tr:first-child { border-top: 0; }
.tabela-consol b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cartao.tabela-consol { gap: 0; padding: .25rem 1rem; }
input.qtd-valor { width: 3.4rem; min-height: 0; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: 1rem; }
.edit-itens { display: flex; flex-direction: column; gap: .4rem; }
.edit-item { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 600; }
.edit-item > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.edit-item input { width: 6rem; flex-shrink: 0; text-align: center; font-weight: 700; }
.lista-simples li.falta { color: var(--erro); }
.aviso-app { position: fixed; left: .75rem; right: .75rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 20; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda);
  box-shadow: 0 18px 48px -12px rgb(20 35 59 / .45); animation: sobe .25s ease-out; }
@keyframes sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aviso-app { animation: none; } }
.aviso-app-cab { display: flex; align-items: center; gap: .75rem; }
.aviso-app-cab img { border-radius: 12px; flex-shrink: 0; }
.aviso-app .fechar { background: var(--fundo); color: var(--texto); font-size: 1.3rem; }
.aviso-app-passos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .35rem; font-size: .93rem; }
.aviso-app .linha { justify-content: space-between; }
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgb(6 12 24 / .55); display: grid; place-items: end center; padding: 1rem; animation: aparece .15s ease-out; }
@media (min-width: 560px) { .modal-fundo { place-items: center; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(440px, 100%); background: var(--superficie); border-radius: 20px; padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 24px 64px -16px rgb(0 0 0 / .5); margin-bottom: env(safe-area-inset-bottom); }
.modal h2 { margin: 0; font-size: 1.15rem; }
.modal p { margin: 0; color: var(--texto-suave); }
.modal-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; }
button.perigo-cheio { min-height: 48px; padding: .7rem 1rem; border-radius: 12px; border: 0; cursor: pointer; font-weight: 700; background: var(--erro); color: #fff; }
[hidden] { display: none !important; }
.form-adv { display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.tabela-perdas .tr.adv { grid-template-columns: minmax(0, 1fr) 56px 60px 76px; }
.tabela-perdas .tr.adv > :nth-child(n+2) { text-align: right; justify-content: flex-end; }
a.link-adv { text-decoration: none; color: inherit; }
.abas-fin { margin-bottom: .75rem; }
.sino { position: relative; font-size: 1.1rem; }
.sino .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--erro); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.notif { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: inherit; box-shadow: var(--sombra); }
.notif.nova { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento), var(--sombra); }
.notif-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--fundo); display: grid; place-items: center; flex-shrink: 0; }
.notif-txt { display: block; margin-top: .25rem; font-size: .92rem; color: var(--texto-suave); }
.ia-inicio { gap: .6rem; }
.ia-linha { display: flex; gap: .5rem; }
.ia-linha input { flex: 1; }
.ia-linha button { flex-shrink: 0; }
.faixa-ok { display: flex; flex-direction: column; gap: .1rem; padding: .7rem 1rem; border-radius: var(--raio); background: var(--ok-fundo); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.faixa-ok small { color: var(--ok); }
.pedido-cancel { margin: 0; font-size: .9rem; padding: .55rem .75rem; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); }
.modal textarea { width: 100%; }

body.sem-rolagem { overflow: hidden; }
.guia-app-fundo { position: fixed; inset: 0; z-index: 60; background: rgb(6 12 24 / .6); display: flex; align-items: flex-end; justify-content: center; animation: aparece .2s ease-out; }
@media (min-width: 560px) { .guia-app-fundo { align-items: center; } }
.guia-app { width: min(520px, 100%); max-height: 94dvh; overflow-y: auto; background: var(--superficie); border-radius: 24px 24px 0 0; padding: 1.25rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .85rem; animation: sobe .25s ease-out; }
@media (min-width: 560px) { .guia-app { border-radius: 24px; } }
.guia-app-topo { display: flex; gap: .9rem; align-items: center; }
.guia-app-topo img { border-radius: 16px; box-shadow: var(--sombra); flex-shrink: 0; }
.guia-app-topo h2 { margin: .3rem 0 0; font-size: 1.35rem; }
.guia-app-por-que { margin: 0; color: var(--texto-suave); }
.guia-app-beneficios { list-style: none; margin: 0; padding: .7rem .9rem; border-radius: 14px; background: var(--fundo); display: flex; flex-direction: column; gap: .3rem; font-size: .93rem; font-weight: 600; }
.guia-app-sub { margin: 0; font-weight: 700; }
.guia-app-passos { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.guia-app-passos li { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 14px; border: 1.5px solid var(--borda); }
.passo-num { width: 28px; height: 28px; border-radius: 50%; background: var(--topo); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.passo-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--acento-suave); color: #1d4ed8; display: grid; place-items: center; flex-shrink: 0; }
.seta-baixo { text-align: center; font-weight: 800; color: var(--link); padding: .25rem 0; animation: pula 1.2s ease-in-out infinite; }
@keyframes pula { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .seta-baixo, .guia-app, .guia-app-fundo { animation: none; } }
.guia-app-acoes { display: flex; flex-direction: column; gap: .35rem; }
.guia-app-acoes .link { align-self: center; }
.grande-cta { min-height: 56px !important; font-size: 1.1rem; }
.faixa-instalar { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; border-radius: var(--raio); border: 1.5px solid var(--acento); background: var(--acento-suave); color: var(--texto); text-align: left; cursor: pointer; }
.nav-ic { display: grid; place-items: center; height: 24px; font-size: 1.15rem; line-height: 1; }
.nav-item.ativa .nav-ic { color: var(--texto); }
.membro-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0; }
.btn-adv { font-size: .78rem; font-weight: 700; color: var(--aviso); text-decoration: none; padding: .3rem .55rem; border-radius: 8px; background: var(--aviso-fundo); white-space: nowrap; }
.det-adv > summary { font-weight: 700; cursor: pointer; min-height: 36px; display: flex; align-items: center; color: var(--aviso); }
/* 🤫 reclamação só para a direção */
.reclamacao { border: 1px dashed var(--borda-forte); border-radius: 14px; padding: .55rem .75rem; background: var(--fundo); }
.reclamacao > summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; min-height: 40px; }
.reclamacao > summary::-webkit-details-marker { display: none; }
.reclamacao > summary small { color: var(--sutil); }
.reclamacao[open] { border-style: solid; background: var(--superficie); }
.rec-ic { font-size: 1.5rem; line-height: 1; }
.rec-corpo { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; }
.rec-corpo textarea { width: 100%; }
.foto-status.obrigatoria { color: var(--erro); font-weight: 600; }
.rec-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; }
.rec-item.nova { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.rec-item p { margin: 0; white-space: pre-wrap; }
/* Alterações na Eye pela IA */
.eye-prop { border: 1px solid var(--acento); background: var(--acento-suave); border-radius: 14px; padding: .75rem .85rem; display: flex; flex-direction: column; gap: .55rem; margin: .25rem 0 .5rem; }
.eye-prop-cab { display: flex; align-items: center; gap: .6rem; }
.eye-ic { font-size: 1.3rem; }
.eye-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.eye-lista li { background: var(--superficie); border-radius: 10px; padding: .55rem .65rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem; font-size: .92rem; }
.eye-lista li.atencao { box-shadow: 0 0 0 1px var(--aviso) inset; }
.eye-lista li small { flex-basis: 100%; }
.eye-lote { display: flex; flex-direction: column; gap: .4rem; }
.modal p { white-space: pre-line; }
.escolher-foto { display: flex; flex-direction: column; gap: .4rem; }
.escolher-foto .linha-foto { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.escolher-foto .botao-foto { flex: 1 1 140px; }
.rotulo-foto { color: var(--sutil); }
.foto-previa { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); }
.btn-whats { text-decoration: none; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 60px; border: 0; border-radius: 14px; background: #1fa855; color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px -8px rgb(31 168 85 / .7); }
.btn-whats:active { transform: scale(.98); }
.whats-ic { font-size: 1.4rem; }
.bolha { white-space: pre-wrap; }
.aba-badge { margin-left: .4rem; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--erro); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.conf-item.pendente { border-left: 4px solid var(--erro); }

.aviso-txt { color: var(--aviso); font-weight: 600; }
.kpi strong { font-size: clamp(1.05rem, 4.4vw, 1.5rem) !important; } .kpi { min-width: 0; }
.faturamento { margin-bottom: 1rem; }
.faturamento .kpis { margin: .9rem 0 .4rem; }
.lista-fat { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lista-fat li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; padding: .55rem 0; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.lista-fat li span { min-width: 0; overflow-wrap: anywhere; }
.lista-fat li small { grid-column: 1 / -1; }
.sutil-txt { color: var(--sutil); }

/* ---------- Abertura (apresentação GWC, igual à Central Comercial) ---------- */
.marca-gwc { position: relative; display: block; margin: 0 auto; width: 120px; aspect-ratio: 512 / 475; }
.marca-gwc img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .35)); }
.marca-gwc .brilho { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: url('https://pmhuhqamxhwlrvzlzxpt.supabase.co/storage/v1/object/public/marca/gwc-logo-512.webp') center / contain no-repeat;
          mask: url('https://pmhuhqamxhwlrvzlzxpt.supabase.co/storage/v1/object/public/marca/gwc-logo-512.webp') center / contain no-repeat; }
.marca-gwc .brilho::after { content: ''; position: absolute; inset: -10% -40%;
  background: linear-gradient(100deg, transparent 38%, rgb(255 246 214 / .85) 50%, transparent 62%);
  transform: translateX(-130%) skewX(-18deg); animation: gwcBrilho 2.2s .3s ease-in-out 1 both; }
.marca-gwc.login { width: 104px; }
.marca-gwc.login .brilho::after { animation: gwcBrilho 4.5s .3s ease-in-out infinite; }
.abertura { position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer; background: #050b18;
  display: grid; place-items: center; animation: aberturaEntra .35s ease-out; -webkit-tap-highlight-color: transparent; }
.abertura.saindo { animation: aberturaSai .5s ease-in forwards; }
.abertura-palco { position: absolute; inset: -6%; background: radial-gradient(120% 90% at 50% 8%, #16294a 0%, #0a1426 48%, #050b18 100%);
  animation: gwcDeriva 14s ease-in-out infinite alternate; }
.abertura-vinheta { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 45%, transparent 55%, rgb(0 0 0 / .55) 100%); }
.estrelas { position: absolute; inset: 0; }
.estrelas i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #dbe6ff; opacity: .5; animation: gwcPisca 4s ease-in-out infinite; }
.estrelas i.g { width: 3px; height: 3px; background: #ffe7a8; }
.abertura-conteudo { position: relative; z-index: 1; margin-top: -10vh; }
.marca-gwc.grande { width: min(72vw, 340px); animation: gwcSurge .9s cubic-bezier(.2,.8,.2,1) both; }
.abertura-rodape { position: absolute; left: 0; right: 0; bottom: max(2.2rem, env(safe-area-inset-bottom)); z-index: 1; text-align: center; padding: 0 1rem; }
.abertura-rodape p { margin: 0; }
.abertura-rodape .toque { color: rgb(255 255 255 / .7); font-size: .9rem; letter-spacing: .08em; margin-bottom: 2rem; opacity: 0; animation: aberturaTexto .6s 1.1s ease-out forwards, gwcRespira 2.4s 1.7s ease-in-out infinite; }
.abertura-rodape .gestao { color: #d9a54a; font-weight: 700; font-size: .82rem; letter-spacing: .32em; opacity: 0; animation: aberturaTexto .6s .7s ease-out forwards; }
.abertura-rodape .sub { color: rgb(255 255 255 / .45); font-size: .76rem; margin-top: .35rem; opacity: 0; animation: aberturaTexto .6s .85s ease-out forwards; }
@keyframes gwcSurge { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes gwcBrilho { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(130%) skewX(-18deg); } }
@keyframes gwcDeriva { from { transform: none; } to { transform: translateY(-4%) scale(1.08); } }
@keyframes gwcPisca { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes gwcRespira { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes aberturaTexto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aberturaEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes aberturaSai { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .abertura-palco, .estrelas i, .marca-gwc .brilho::after, .marca-gwc.grande, .abertura-rodape p { animation: none !important; opacity: 1; }
}

/* ---------- Comprovante no lançamento ---------- */
.comprov { border: 1.5px dashed var(--borda-forte); border-radius: 14px; padding: .8rem; margin: .4rem 0 1rem; display: grid; gap: .6rem; }
.comprov .acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.comprov .acoes > * { flex: 1 1 140px; justify-content: center; text-align: center; }
.comprov .destaque { border-color: var(--acento); box-shadow: 0 0 0 3px rgb(245 158 11 / .25); }
.comprov-previa img { max-height: 220px; max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; border: 1px solid var(--borda); }
.comprov-pdf { padding: 1rem; text-align: center; font-weight: 700; background: var(--superficie-2, #f1f5f9); border-radius: 10px; }
.comprov-status { margin: 0; font-weight: 600; }
.comprov-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.comprov-lista label { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; padding: .35rem 0; border-top: 1px solid var(--borda); }

/* ---------- Despesas pagas (planilha na tela) ---------- */
.filtros-desp { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.filtros-desp label { flex: 1 1 150px; }
.desp-resumo { margin-top: .7rem; display: grid; gap: .5rem; }
.desp-total { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.desp-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.desp-grupos { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; }
.desp-grupos .chip { white-space: nowrap; font-size: .8rem; }
.cartao.sem-pad { padding: 0; overflow: hidden; }
.planilha-wrap { overflow-x: auto; }
.planilha { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.planilha th { position: sticky; top: 0; background: var(--superficie-2, #f1f5f9); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); padding: .55rem .6rem; }
.planilha td { padding: .5rem .6rem; border-top: 1px solid var(--borda); vertical-align: top; }
.planilha tbody tr { cursor: pointer; }
.planilha tbody tr:hover, .planilha tbody tr:focus { background: rgb(245 158 11 / .08); outline: none; }
.planilha td small { display: block; color: var(--texto-suave); font-size: .75rem; }
.planilha td.data { white-space: nowrap; color: var(--texto-suave); }
.planilha .num { text-align: right; white-space: nowrap; font-weight: 600; }
.planilha tfoot td { font-weight: 700; border-top: 2px solid var(--borda-forte); }
.planilha .marcas { color: var(--link) !important; }
/* ---------- Contas a pagar ---------- */
.lista-pend li.conta.atrasada { border-left: 4px solid var(--erro, #dc2626); padding-left: .5rem; }
.lista-pend li.conta.hoje { border-left: 4px solid var(--aviso, #d97706); padding-left: .5rem; }
.lista-pend li.conta.paga { opacity: .8; }
.cartao.alerta-borda { border: 1.5px solid var(--erro, #dc2626); }
.kpi.neg strong { color: var(--erro, #dc2626); }
.tags .tag { margin-top: .25rem; display: inline-block; }
/* ---------- Rateio ---------- */
.regras-rateio { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: .3rem 0; }
.alerta-contas { display: flex; flex-direction: row; text-align: left; gap: .7rem; align-items: center; border: 1.5px solid var(--erro, #dc2626); background: rgb(220 38 38 / .06); text-decoration: none; color: inherit; }
.alerta-contas strong { color: var(--erro, #dc2626); }
.avisos { display: flex; gap: .7rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.avisos .linha { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.planilha td.loja { font-size: .78rem; color: var(--texto-suave); min-width: 70px; }
.planilha td .desc { font-weight: 600; }

.lista-adv { display: grid; gap: .4rem; }
.adv-pessoa { border: 1px solid var(--borda); border-radius: 12px; padding: .55rem .7rem; }
.adv-pessoa summary { display: flex; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.adv-pessoa summary::-webkit-details-marker { display: none; }
.adv-tags { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.adv-pessoa ul { margin: .5rem 0; }
.tr.adv.clicavel { cursor: pointer; }
.tr.adv.clicavel:hover { background: rgb(245 158 11 / .08); }

.planilha tr.rateio td { background: rgb(245 158 11 / .05); }
.planilha tr.sub td { background: var(--superficie-2, #f8fafc); padding-top: .3rem; padding-bottom: .3rem; font-size: .82rem; }
.planilha .sub-loja { color: var(--texto-suave); padding-left: .4rem; }
.sub-rateio { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: .85rem; }
.sub-rateio li { display: flex; justify-content: space-between; gap: .5rem; border-top: 1px dashed var(--borda); padding-top: .2rem; }
.lista-pend li.conta.rateio .pend-info { cursor: pointer; }
/* ---------- Compras por nota ---------- */
.abas-compras { margin-bottom: .8rem; }
.abas-compras button { flex: 1 1 0; font-size: .85rem; }
.nota-compra .bloco { display: block; }
.itens-nota { display: grid; gap: .5rem; }
.item-nota { border: 1px solid var(--borda); border-radius: 12px; padding: .5rem .6rem; display: grid; gap: .3rem; }
.item-nota .linha { gap: .4rem; align-items: end; }
.item-nota label.estreito { max-width: 90px; }
.compras-pend { border-color: var(--acento, #f59e0b) !important; background: rgb(245 158 11 / .08) !important; }
.compras-pend strong { color: inherit !important; }

/* ---------- Vagas (2.12) ---------- */
.pub { min-height: 100vh; background: var(--fundo); display: flex; flex-direction: column; }
.pub-topo { background: var(--topo); color: #fff; display: flex; align-items: center; gap: .8rem; padding: .9rem 16px; padding-top: max(.9rem, env(safe-area-inset-top)); }
.pub-marca { flex: none; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; background: var(--acento); color: #14233b; border-radius: 10px; padding: .25rem .55rem; }
.pub-topo div { display: flex; flex-direction: column; } .pub-topo small { opacity: .75; font-size: .78rem; }
.pub-corpo { width: 100%; max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pub-rodape { text-align: center; font-size: .75rem; color: var(--sutil); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.pub-hero h1 { font-family: var(--fonte-titulo); font-size: 1.7rem; margin: .4rem 0 .2rem; } .pub-hero p { color: var(--texto-suave); margin: 0; }
.pub-lista { display: flex; flex-direction: column; gap: 10px; }
.pub-vaga, .pub-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: .35rem; color: var(--texto); text-decoration: none; }
.pub-vaga span { color: var(--texto-suave); font-size: .88rem; } .pub-vaga .pub-ver { color: var(--link); font-weight: 700; margin-top: .3rem; }
.pub-sal { font-weight: 700; color: var(--ok) !important; } .pub-sal.grande { font-size: 1.1rem; margin: .2rem 0; }
.pub-card h1 { font-family: var(--fonte-titulo); font-size: 1.45rem; margin: .3rem 0; } .pub-card h2 { margin: 0 0 .3rem; } .pub-card h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.pub-card ul { margin: 0; padding-left: 1.2rem; color: var(--texto-suave); } .pub-card li { margin: .2rem 0; }
.pub-tags { display: flex; flex-wrap: wrap; gap: .35rem; } .pub-end { margin: .2rem 0; color: var(--texto-suave); }
.pub-texto { white-space: pre-line; color: var(--texto-suave); line-height: 1.5; }
.formulario { display: flex; flex-direction: column; gap: .8rem; }
.formulario .linha { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .formulario .cresce { flex: 1; min-width: 0; } .formulario .estreito { width: 5.5rem; }
.pub-pergs { display: flex; flex-direction: column; gap: .7rem; } .pub-perg { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .92rem; }
.pub-perg .segmentado { grid-template-columns: 1fr 1fr; }
button.primario.grande { min-height: 56px; font-size: 1.05rem; }
.pub-ok { align-items: center; text-align: center; padding: 28px 16px; } .pub-ok-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-fundo); color: var(--ok); display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.pub-link { display: flex; flex-direction: column; gap: .6rem; } .pub-link .linha { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.vaga-item { display: flex; flex-direction: column; gap: .3rem; color: var(--texto); text-decoration: none; }
.vaga-item small { color: var(--sutil); }
.etapas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; margin: 0 -2px; }
.etapas::-webkit-scrollbar { display: none; }
.etapa { flex: none; display: inline-flex; gap: .4rem; align-items: center; min-height: 40px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font-weight: 600; font-size: .84rem; cursor: pointer; color: var(--texto-suave); }
.etapa b { background: var(--fundo); border-radius: 999px; padding: .1rem .45rem; font-size: .75rem; }
.etapa.ativo { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); } .etapa.ativo b { background: rgb(255 255 255 / .2); }
.cand { display: flex; flex-direction: column; gap: .5rem; } .cand.elim { border-left: 4px solid var(--erro); }
.cand .acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cand .mover { flex-direction: row; align-items: center; gap: .4rem; font-size: .82rem; } .cand .mover select { min-height: 40px; padding: .2rem .4rem; }
.cand .resp { font-size: .84rem; } .cand-exp { margin: 0; white-space: pre-line; font-size: .88rem; color: var(--texto-suave); }
.nota { font-weight: 800; font-size: .9rem; padding: .3rem .55rem; border-radius: 8px; }
.nota.alta { background: var(--ok-fundo); color: var(--ok); } .nota.media { background: var(--aviso-fundo); color: var(--aviso); } .nota.baixa { background: var(--erro-fundo); color: var(--erro); }
a.botao.btn-whats-mini { background: #25d366; color: #fff; border-color: #25d366; min-height: 40px; font-size: .85rem; padding: 0 .8rem; }
button.pequeno, a.botao.pequeno { min-height: 40px; font-size: .85rem; padding: 0 .8rem; }
.modal.grande { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.pergs-edit { display: flex; flex-direction: column; gap: .6rem; } .perg-edit { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--borda); border-radius: 12px; padding: .6rem; }
/* vagas por departamento */
.deptos { display: flex; flex-direction: column; gap: 10px; }
.depto { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.depto > summary { list-style: none; display: flex; align-items: center; gap: .75rem; padding: 14px 16px; cursor: pointer; min-height: 64px; }
.depto > summary::-webkit-details-marker { display: none; }
.depto-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--acento-suave); display: grid; place-items: center; font-size: 1.3rem; }
.depto.sem-vaga .depto-ic { background: var(--fundo); filter: grayscale(.6); }
.depto .atalho-txt { flex: 1; min-width: 0; } .depto .atalho-txt small { color: var(--sutil); }
.depto-seta { font-size: 1.4rem; color: var(--sutil); transition: transform .15s; } .depto[open] .depto-seta { transform: rotate(90deg); }
.depto-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.depto-lista .pub-vaga, .depto-lista .vaga-item { box-shadow: none; background: var(--fundo); border-color: var(--borda); margin: 0; }
.depto-vazio { margin: 0 4px 4px; }
.badge-txt { background: var(--erro); color: #fff; font-size: .72rem; font-weight: 800; border-radius: 99px; padding: .2rem .5rem; white-space: nowrap; }
.cand-obs { background: var(--fundo); border-radius: 10px; padding: .5rem .7rem; } .cand-obs p { margin: .2rem 0 0; white-space: pre-line; font-size: .86rem; }