/* Títulos e números: Barlow Semi Condensed (licença OFL), guardada em public/fontes para funcionar sem internet. */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("fontes/barlow-semi-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontes/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/barlow-semi-condensed-700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --fundo: #EEF2F8;
  --papel: #FFFFFF;
  --tinta: #2A3A52;
  --titulo: #092653;
  --suave: #5F6F88;
  --linha: #E2E9F3;
  --campo-fundo: #FFFFFF;
  --campo-borda: #CBD7E6;
  --primaria: #092653;
  --ciano: #079FE8;
  --neon: #08BFFF;
  --link: #092653;
  --tinte: #E8F5FD;
  --lateral-fundo: #092653;
  --vermelho: #E60012;
  --vermelho-forte: #C20010;
  --vermelho-txt: #C20010;
  --vermelho-claro: #FDE8E9;
  --verde: #16A36A;
  --verde-txt: #0F7D50;
  --verde-claro: #E6F7F0;
  --ambar: #8a5a00;
  --ambar-claro: #fff4d6;
  --ambar-vivo: #E0A100;
  --ciano-txt: #0679B3;
  --azul-claro: #E5ECF7;
  --neutro-marca: #B7C3D4;
  --grafico: #0B86CC;
  /* relevo: sombras azuladas no lugar de bordas duras */
  --borda-cartao: rgba(9, 38, 83, .07);
  --sombra-1: 0 1px 2px rgba(9, 38, 83, .05), 0 6px 18px -8px rgba(9, 38, 83, .14);
  --sombra-2: 0 2px 4px rgba(9, 38, 83, .06), 0 14px 30px -12px rgba(9, 38, 83, .24);
  --sombra-botao: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(9, 38, 83, .12), 0 4px 10px -4px rgba(9, 38, 83, .22);
  --sombra-botao-alta: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(9, 38, 83, .12), 0 10px 18px -8px rgba(9, 38, 83, .32);
  --sombra-botao-baixa: inset 0 1px 3px rgba(9, 38, 83, .2);
  --sombra-primario: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(194, 0, 16, .22), 0 8px 16px -8px rgba(230, 0, 18, .6);
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
  --raio: 14px;
  --raio-p: 9px;
  --topo: 72px;
  --menu-fechado: 64px;
  --menu-aberto: 228px;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #080F1E;
  --papel: #111D33;
  --tinta: #E7EDF7;
  --titulo: #E7EDF7;
  --suave: #9FB0C8;
  --linha: #263A57;
  --campo-fundo: #18345C;
  --campo-borda: #263A57;
  --primaria: #18345C;
  --ciano: #08A9F5;
  --neon: #08BFFF;
  --link: #08A9F5;
  --tinte: #18345C;
  --lateral-fundo: #111D33;
  --vermelho: #F01825;
  --vermelho-forte: #D0101C;
  --vermelho-txt: #FF7A82;
  --vermelho-claro: #3A1420;
  --verde: #27C989;
  --verde-txt: #27C989;
  --verde-claro: #10332B;
  --ambar: #F5C451;
  --ambar-claro: #33290F;
  --ambar-vivo: #F5C451;
  --ciano-txt: #4CC1F8;
  --azul-claro: #1B2E4F;
  --neutro-marca: #4A5D7A;
  --grafico: #1795DB;
  --borda-cartao: #22344F;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .6);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 32px -12px rgba(0, 0, 0, .7);
  --sombra-botao: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px -4px rgba(0, 0, 0, .6);
  --sombra-botao-alta: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 4px rgba(0, 0, 0, .4), 0 10px 18px -8px rgba(0, 0, 0, .7);
  --sombra-botao-baixa: inset 0 1px 3px rgba(0, 0, 0, .55);
  --sombra-primario: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(0, 0, 0, .4), 0 8px 16px -8px rgba(240, 24, 37, .6);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.5 var(--fonte-texto); }
a { color: var(--link); }
main { max-width: 1320px; margin: 0 auto; padding: 24px 24px 64px; }
h1 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.85rem; line-height: 1.15; color: var(--titulo); margin: 0 0 16px; }
h1 small, h3 small { font-family: var(--fonte-texto); font-weight: 400; color: var(--suave); font-size: .95rem; }
h2 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--titulo); margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 20px 0 8px; }
code { background: var(--linha); padding: 1px 5px; border-radius: 4px; }

.faixa-amb { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .5px; padding: 4px; }
.faixa-amb.homol { background: var(--ambar-claro); color: var(--ambar); }
.faixa-amb.prod { background: var(--verde-claro); color: var(--verde-txt); }

.cartao { background: var(--papel); border: 1px solid var(--borda-cartao); border-radius: var(--raio); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--sombra-1); }
.cartao.estreito { max-width: 380px; margin: 48px auto; }
.pilha > .cartao { margin-bottom: 16px; }
.sub, .dica { color: var(--suave); margin: 0 0 12px; }
.dica { font-size: .85rem; margin-top: 8px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); margin-bottom: 12px; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); font-size: .9rem; }
input, select, textarea { font: inherit; color: var(--tinta); border: 1px solid var(--campo-borda); border-radius: var(--raio-p); padding: 9px 11px; background: var(--campo-fundo); width: 100%; transition: border-color .12s ease, box-shadow .12s ease; }
input[type=checkbox] { width: auto; accent-color: var(--ciano); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ciano) 45%, var(--campo-borda)); }
/* o contorno transparente mantém o foco visível no modo de alto contraste do Windows */
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--ciano); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ciano) 24%, transparent); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
.grade .larga { grid-column: span 2; }

/* botões em relevo: sobem ao passar o mouse e afundam no clique */
button, .botao { font: inherit; font-weight: 600; display: inline-block; text-decoration: none; border: 1px solid var(--campo-borda); background: var(--papel); color: var(--tinta); border-radius: var(--raio-p); padding: 9px 16px; cursor: pointer; box-shadow: var(--sombra-botao); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; }
button:hover, .botao:hover { border-color: var(--ciano); transform: translateY(-1px); box-shadow: var(--sombra-botao-alta); }
button:active, .botao:active { transform: translateY(1px); box-shadow: var(--sombra-botao-baixa); }
button:focus-visible, .botao:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.primario, .perigo { background: var(--vermelho); border-color: var(--vermelho-forte); color: #fff; box-shadow: var(--sombra-primario); }
.primario:hover, .perigo:hover { background: var(--vermelho-forte); border-color: var(--vermelho-forte); box-shadow: var(--sombra-primario); }
.destaque { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.com-ico { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.grande { padding: 12px 22px; font-size: 1rem; }
button:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  button, .botao, input, select, textarea { transition: none; }
  button:hover, .botao:hover, button:active, .botao:active { transform: none; }
}

.aviso { position: relative; border-radius: var(--raio); padding: 12px 16px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--ciano) 30%, transparent); background: var(--tinte);
  --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.aviso.ok { background: var(--verde-claro); border-color: color-mix(in srgb, var(--verde) 45%, transparent); color: var(--verde-txt);
  --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.aviso.erro { background: var(--vermelho-claro); border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); color: var(--vermelho-txt);
  --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
/* ícone por máscara: pega a cor do texto do aviso. A faixa da separação tem o próprio desenho. */
.aviso:not(.sep-msg) { padding-left: 46px; }
.aviso:not(.sep-msg)::before { content: ""; position: absolute; left: 15px; top: 13px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-aviso) center / contain no-repeat; mask: var(--ico-aviso) center / contain no-repeat; }
.ok-txt { color: var(--verde-txt); font-weight: 600; }
.erro-txt { color: var(--vermelho-txt); font-weight: 600; }

.resumo { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: stretch; margin-bottom: 16px; }
/* bloco de indicador: ícone à esquerda (opcional), rótulo e valor à direita */
.resumo > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; background: var(--papel); color: var(--titulo); border: 1px solid var(--borda-cartao); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra-1); }
.resumo > div > .ico-bloco { grid-row: 1 / span 2; }
.resumo > div > span:not(.ico-bloco), .resumo > div > strong { grid-column: 2; }
.resumo span:not(.ico-bloco) { display: block; color: var(--suave); font-size: .8rem; }
.resumo strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.resumo .botao { display: flex; align-items: center; justify-content: center; gap: 8px; }

.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.barra h1 { margin: 0; }
.barra form { flex: 1; max-width: 420px; }
.acoes-mini { display: flex; gap: 16px; font-size: .9rem; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; }
.lista { background: var(--papel); border: 1px solid var(--borda-cartao); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1); }
.lista th, .lista td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linha); }
.lista th { font-size: .8rem; font-weight: 600; color: var(--suave); background: color-mix(in srgb, var(--fundo) 55%, var(--papel)); }
.lista tr:last-child td { border-bottom: 0; }
.dir { text-align: right !important; }
.vazio { text-align: center !important; color: var(--suave); padding: 32px !important; }
tr.inativo { opacity: .5; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; }
.badge::before, .sit::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.autorizada { background: var(--verde-claro); color: var(--verde-txt); }
.badge.rejeitada, .badge.denegada { background: var(--vermelho-claro); color: var(--vermelho-txt); }
.badge.pendente { background: var(--ambar-claro); color: var(--ambar); }
.badge.cancelada { background: var(--linha); color: var(--suave); text-decoration: line-through; }

.linha-cliente { display: flex; gap: 8px; margin-bottom: 10px; }
.linha-cliente .botao { white-space: nowrap; display: flex; align-items: center; }
.itens th { text-align: left; font-size: .78rem; color: var(--suave); font-weight: 600; padding: 4px 6px; }
.itens td { padding: 4px 6px; vertical-align: middle; }
.itens td:first-child { width: 48%; }
.itens .qtd { max-width: 90px; }
.itens .remover { border: 0; font-size: 1.3rem; color: var(--suave); padding: 4px 10px; }
#add-item { margin-top: 10px; }
.fecho { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 20px; box-shadow: 0 -4px 18px rgba(0,0,0,.06); }
.fecho strong { font-size: 1.5rem; margin-left: 8px; }
.rodape-form { display: flex; align-items: center; gap: 20px; }

.detalhes { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 0 0 16px; }
.detalhes dt { color: var(--suave); }
.detalhes dd { margin: 0; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; word-break: break-all; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes form { margin: 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 720px) {
  .resumo { grid-template-columns: 1fr 1fr; }
  .grade .larga { grid-column: auto; }
  .duas { grid-template-columns: 1fr; }
  .detalhes { grid-template-columns: 1fr; }
  .itens thead { display: none; }
  .itens tr { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; border-bottom: 1px solid var(--linha); padding: 8px 0; }
  .itens td:first-child { grid-column: 1 / -1; width: auto; }
  .itens .tot { display: none; }
  .fecho { flex-direction: column; align-items: stretch; }
}
.parcelas { border-collapse: collapse; margin-bottom: 6px; }
.parcelas th { text-align: left; font-size: .78rem; color: var(--suave); font-weight: 600; padding: 4px 6px; }
.parcelas td { padding: 4px 6px; }
.parcelas .dup-valor { max-width: 120px; }

/* ---------- estrutura: menu lateral ---------- */
.ico { width: 18px; height: 18px; flex: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
body.com-menu { padding-top: var(--topo); }
.conteudo { min-width: 0; }
body.com-menu .conteudo { margin-left: var(--menu-fechado); }

.barra-topo { position: fixed; top: 0; left: 0; right: 0; height: var(--topo); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--papel); box-shadow: 0 1px 0 var(--linha), 0 8px 24px -14px rgba(9, 38, 83, .35); padding: 0 16px; }
.marca-topo { flex: none; border-radius: 6px; }
.marca-topo img { display: block; height: 38px; width: auto; }
.topo-dir { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quem { font-size: .85rem; font-weight: 600; color: var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.quem span { font-weight: 400; color: var(--suave); margin-left: 8px; }
.avatar { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primaria); color: #fff; font-weight: 700; font-size: .9rem; }
.menu-admin { position: relative; flex: none; }
.menu-admin summary { list-style: none; cursor: pointer; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--linha); border-radius: 10px; color: var(--tinta); }
.menu-admin summary::-webkit-details-marker { display: none; }
.menu-admin summary:hover { background: var(--tinte); border-color: var(--ciano); }
.menu-admin[open] summary { border-color: var(--titulo); box-shadow: 0 0 0 1px var(--titulo); }
.menu-admin > div { position: absolute; right: 0; top: calc(100% + 8px); width: 272px; max-width: calc(100vw - 32px); background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 12px 32px rgba(9,38,83,.18); padding: 8px; }
.menu-admin strong { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--suave); padding: 6px 10px 8px; }
.menu-admin a { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-size: .9rem; padding: 9px 10px; border-radius: 7px; }
.menu-admin a:hover { background: var(--tinte); color: var(--titulo); }
.menu-admin a .ico { color: var(--ciano); }
.menu-admin a.sair { border-top: 1px solid var(--linha); border-radius: 0 0 7px 7px; margin-top: 6px; padding-top: 11px; }

/* recolhido mostra só os ícones; abre por cima do conteúdo, sem empurrar a tela */
.lateral { background: var(--lateral-fundo); position: fixed; top: var(--topo); left: 0; bottom: 0; width: var(--menu-fechado); z-index: 20; overflow: hidden; transition: width .16s ease-out; }
.lateral:hover, .lateral:focus-within { width: var(--menu-aberto); box-shadow: 6px 0 24px rgba(9,38,83,.28); }
.lateral nav { display: flex; flex-direction: column; padding: 8px 0; width: var(--menu-aberto); }
.lateral nav a { display: flex; align-items: center; gap: 26px; color: #C9D8EC; text-decoration: none; font-weight: 600; font-size: .92rem; padding: 12px 20px; border-left: 3px solid transparent; white-space: nowrap; }
.lateral nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav a:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
.lateral nav a.on { background: rgba(8,191,255,.18); color: #fff; border-left-color: var(--neon); }
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }
.logo-solo { text-align: center; padding: 40px 16px 0; }
.logo-solo img { width: 180px; height: auto; }
.logo-solo + .conteudo .cartao.estreito { margin-top: 20px; }

/* ---------- lista de produtos ---------- */
.filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input[type=search] { flex: 1 1 280px; width: auto; }
.filtros select { width: auto; }
.lote { display: flex; align-items: center; gap: 10px; background: var(--tinte); border: 1px solid var(--ciano); border-radius: var(--raio); padding: 8px 14px; margin-bottom: 10px; position: sticky; top: calc(var(--topo) + 6px); z-index: 3; }
.produtos { background: transparent; border-collapse: separate; border-spacing: 0; }
.produtos th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--suave); padding: 6px 12px; }
.produtos tbody td { background: var(--papel); padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; font-size: .88rem; }
.produtos tbody tr:first-child td:first-child { border-top-left-radius: var(--raio); }
.produtos tbody tr:first-child td:last-child { border-top-right-radius: var(--raio); }
.produtos tbody tr:last-child td:first-child { border-bottom-left-radius: var(--raio); }
.produtos tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raio); }
.produtos tbody tr:hover td { background: var(--tinte); }
.produtos tr.inativo { opacity: 1; }
.produtos tr.inativo .c-desc a, .produtos tr.inativo .c-img { opacity: .5; }
.c-sel { width: 36px; }
.c-img { width: 72px; }
.c-un { width: 80px; }
.c-preco, .c-est, .c-custo { width: 118px; white-space: nowrap; }
.c-est { width: 90px; }
.c-acoes { width: 84px; text-align: right; white-space: nowrap; }
.mini { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--linha); border-radius: 6px; color: var(--suave); overflow: hidden; background: var(--papel); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.c-desc a { color: var(--tinta); text-decoration: none; }
.c-desc a:hover { color: var(--link); text-decoration: underline; }
.copiar { border: 0; background: none; padding: 4px; margin-left: 2px; color: var(--suave); vertical-align: middle; line-height: 0; border-radius: 4px; }
.copiar .ico { width: 14px; height: 14px; }
.copiar:hover { color: var(--link); background: var(--tinte); }
.copiar.ok { color: var(--verde-txt); }
.preco { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px 4px 0; color: var(--link); font-weight: 600; }
.preco .ico { width: 14px; height: 14px; }
.preco:hover { text-decoration: underline; }
.campo-preco { width: 92px; padding: 4px 6px; }
.saldo.sem { color: var(--vermelho-txt); font-weight: 600; }
.saldo.baixo { color: var(--ambar); font-weight: 600; }
.estado { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.estado.sem { color: var(--vermelho-txt); }
.estado.baixo { color: #e0a100; }
.estado.bom { color: var(--verde-txt); }
.tres-pontos { display: inline-block; position: relative; vertical-align: middle; }
.tres-pontos summary { list-style: none; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; color: var(--tinta); }
.tres-pontos summary::-webkit-details-marker { display: none; }
.tres-pontos summary:hover { background: var(--tinte); }
.tres-pontos > div { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 140px; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 8px 24px rgba(9,38,83,.16); padding: 4px; text-align: left; }
.tres-pontos a, .tres-pontos button { display: block; width: 100%; text-align: left; font: inherit; color: var(--tinta); background: none; border: 0; border-radius: 5px; padding: 8px 10px; text-decoration: none; cursor: pointer; }
.tres-pontos a:hover, .tres-pontos button:hover { background: var(--tinte); }
.paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; color: var(--suave); font-size: .9rem; }

/* ---------- cadastro de produto ---------- */
.mat-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: sticky; top: var(--topo); z-index: 4; background: var(--fundo); padding: 10px 0 12px; }
.mat-cabeca h1 { display: inline; margin: 0 10px 0 0; font-size: 1.35rem; color: var(--titulo); }
.mat-cabeca small { color: var(--suave); font-size: .72rem; }
.mat-botoes { display: flex; gap: 12px; }
.mat-botoes > * { min-width: 170px; text-align: center; font-weight: 600; }
.contorno { border-color: var(--ciano); color: var(--link); font-weight: 600; background: var(--papel); }
.contorno:hover { background: var(--tinte); }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 14px; }
.g4 .s2 { grid-column: span 2; }
.mat-topo .linha-nome { grid-column: 1 / -1; }
.mat-topo .linha-nome input { width: calc(50% - 7px); }
.foto-principal { grid-column: 1; grid-row: 2 / span 2; align-self: stretch; padding: 0; min-height: 128px; margin-bottom: 12px; border: 1px solid var(--campo-borda); border-radius: 8px; background: var(--papel); color: var(--suave); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foto-principal .ico { width: 54px; height: 54px; stroke-width: 1.5; }
.foto-principal img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; }
.duas-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-situacao { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); margin-bottom: 12px; }
.rot { display: inline-flex; align-items: center; gap: 4px; }
.rot em { color: var(--vermelho-txt); font-style: normal; }
.rot-linha { display: flex; justify-content: space-between; align-items: center; }
.rot-linha a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .78rem; text-decoration: none; }
.rot-linha a .ico { width: 13px; height: 13px; }
.info { color: var(--ciano); line-height: 0; cursor: help; border-radius: 50%; }
.info .ico { width: 14px; height: 14px; }
label.chave { flex-direction: row; align-items: center; gap: 8px; margin: 6px 0 0; cursor: pointer; font-size: .82rem; position: relative; }
.chave input { position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer; }
.chave i { width: 34px; height: 20px; flex: none; border-radius: 99px; background: var(--suave); position: relative; transition: background .15s; }
.chave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.chave input:checked + i { background: var(--ciano); }
.chave input:checked + i::after { transform: translateX(14px); }
.chave input:focus-visible + i { outline: 2px solid var(--ciano); outline-offset: 2px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 10px 0 18px; overflow: auto hidden; }
.abas button { border: 0; background: none; border-radius: 0; padding: 8px 10px; white-space: nowrap; color: var(--suave); border-bottom: 3px solid transparent; }
.abas button:hover { color: var(--link); }
.abas button[aria-selected=true] { color: var(--tinta); font-weight: 700; border-bottom-color: var(--ciano); }
.soltar { border: 1.5px dashed var(--ciano); border-radius: 8px; padding: 44px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.soltar.sobre { background: var(--tinte); }
label.anexar { display: inline-block; margin: 0; min-width: 150px; cursor: pointer; font-size: .85rem; color: var(--link); position: relative; }
.anexar input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.anexar:focus-within { outline: 2px solid var(--ciano); outline-offset: 2px; }
.galeria { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.foto { width: 130px; margin: 0; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--papel); font-size: .8rem; position: relative; display: flex; flex-direction: column; gap: 0; }
.foto img { display: block; width: 100%; height: 110px; object-fit: contain; }
.foto > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--linha); color: var(--tinta); }
.foto .tirar { position: absolute; top: 4px; right: 4px; padding: 0 7px; line-height: 1.5; border-radius: 50%; }
.mini-tabela { margin-bottom: 12px; }
.mini-tabela th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--suave); padding: 4px 8px; border-bottom: 1px solid var(--linha); }
.mini-tabela td { padding: 6px 8px; font-size: .88rem; border-bottom: 1px solid var(--linha); }
.fornecedores td { border: 0; padding: 4px 8px 4px 0; }
.fornecedores .remover { border: 0; font-size: 1.3rem; color: var(--suave); padding: 2px 10px; background: none; }
.faixa-info { display: flex; align-items: center; gap: 14px; background: var(--tinte); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 16px; font-size: .9rem; }
.faixa-ico { display: flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--ciano); color: #fff; }
.secao { margin-top: 12px; }
.secao summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-weight: 700; color: var(--titulo); padding: 6px 0 10px; width: fit-content; }
.secao summary::-webkit-details-marker { display: none; }
.secao summary .ico { color: var(--ciano); transition: transform .15s; transform: rotate(-90deg); }
.secao[open] summary .ico { transform: none; }

@media (max-width: 980px) {
  /* sem espaço para o menu retrátil: vira faixa de abas abaixo da barra superior */
  body.com-menu .conteudo { margin-left: 0; }
  .lateral, .lateral:hover, .lateral:focus-within { position: static; width: auto; overflow: visible; box-shadow: none; }
  .lateral nav { flex-direction: row; overflow-x: auto; padding: 0; width: auto; scrollbar-width: none; }
  .lateral nav a { flex: none; gap: 8px; padding: 11px 14px; border-left: 0; border-bottom: 3px solid transparent; }
  .lateral nav a.on { border-bottom-color: var(--neon); }
  main { padding: 16px 16px 48px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat-topo .linha-nome input { width: 100%; }
  .foto-principal { grid-column: 1 / -1; grid-row: auto; height: 150px; }
  .c-un, .c-custo { display: none; }
  .mat-cabeca { position: static; }
}
@media (max-width: 620px) {
  .quem { display: none; }
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .g4 .s2 { grid-column: auto; }
  .g4 > span:empty { display: none; }
  .mat-botoes { width: 100%; }
  .mat-botoes > * { min-width: 0; flex: 1; }
  .c-cod, .c-img, .estado, .produtos th.c-acoes { display: none; }
  .c-preco { width: auto; }
  .c-est { width: auto; }
  .produtos th, .produtos tbody td { padding-left: 6px; padding-right: 6px; }
  .preco .ico { display: none; }
  .fornecedores thead { display: none; }
}

/* ---------- logos: empresa na barra superior, Nuva discreta no fim do menu ---------- */
.marca-topo img { height: 58px; }
.lateral { display: flex; flex-direction: column; }
.lateral nav { flex: 1; }
.lateral-marca { display: flex; align-items: center; gap: 20px; width: var(--menu-aberto); padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,.08); color: #B7C6DB; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.lateral-marca img { width: 32px; height: auto; flex: none; }
.lateral-marca small { display: block; font-size: .68rem; font-weight: 400; color: #93A6C0; }
@media (max-width: 980px) {
  .lateral { display: block; }
  .lateral-marca { display: none; }
}

/* ---------- botão de tema ---------- */
.tema { flex: none; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; border-radius: 10px; color: var(--tinta); }
.tema:hover { background: var(--tinte); }
.tema span { display: flex; }
.tema .sol, :root[data-tema="escuro"] .tema .lua { display: none; }
:root[data-tema="escuro"] .tema .sol { display: flex; }
/* logos com letras escuras ganham fundo branco no tema escuro */
:root[data-tema="escuro"] .marca-topo { background: #fff; padding: 3px 6px; border-radius: 8px; }
:root[data-tema="escuro"] .marca-topo img { height: 52px; }
:root[data-tema="escuro"] .logo-solo img { background: #fff; padding: 12px; border-radius: 12px; }

/* ---------- menu: submenu aparece com o menu aberto ---------- */
.submenu { display: none; }
.lateral:hover .submenu, .lateral:focus-within .submenu { display: block; }
.lateral nav .submenu a { font-weight: 400; font-size: .86rem; padding: 7px 20px 7px 67px; }
.lateral nav .submenu a.atual { color: #fff; font-weight: 600; }

/* ---------- pedidos: lista ---------- */
.ped-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
.ped-layout:has(.ped-filtro:not([hidden])) { grid-template-columns: 210px minmax(0, 1fr) 240px; }
.ped-filtro, .ped-lado { padding: 14px; margin: 0; }
.ped-filtro h2, .ped-lado h2 { display: flex; align-items: center; gap: 6px; font-size: .92rem; margin: 0 0 10px; color: var(--titulo); }
.ped-filtro fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.ped-filtro legend { font-size: .85rem; color: var(--suave); padding: 0; margin-bottom: 4px; }
.ped-filtro label.check { margin-bottom: 4px; }
.ped-filtro button { width: 100%; }
.ped-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ped-busca input[type=search] { flex: 1 1 240px; width: auto; }
.ped-abre-filtro { display: flex; padding: 9px; color: var(--ciano); }
.menu-periodo { position: relative; }
.menu-periodo summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .85rem; background: var(--papel); color: var(--link); border: 1px solid var(--campo-borda); border-radius: 7px; padding: 9px 12px; white-space: nowrap; }
.menu-periodo summary::-webkit-details-marker { display: none; }
.menu-periodo summary:hover { border-color: var(--ciano); }
.menu-periodo summary .ico { color: var(--ciano); }
.menu-periodo > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: 240px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 12px 32px rgba(9,38,83,.18); padding: 8px; }
.menu-periodo a { display: block; color: var(--tinta); text-decoration: none; padding: 7px 8px; border-radius: 6px; font-size: .9rem; }
.menu-periodo a:hover { background: var(--tinte); }
.menu-periodo label { margin: 8px 0 0; }
.menu-periodo button { width: 100%; margin-top: 10px; }
.ped-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--suave); margin-bottom: 8px; }
.chip { background: var(--tinte); color: var(--link); text-decoration: none; border-radius: 99px; padding: 2px 10px; }
.chip span { font-weight: 700; margin-left: 2px; }
.pedidos { background: transparent; border-collapse: separate; border-spacing: 0; }
.pedidos th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--suave); padding: 6px 12px; }
.pedidos tbody td { background: var(--papel); padding: 9px 12px; border-bottom: 1px solid var(--linha); font-size: .88rem; vertical-align: middle; }
.pedidos tbody tr:first-child td:first-child { border-top-left-radius: var(--raio); }
.pedidos tbody tr:first-child td:last-child { border-top-right-radius: var(--raio); }
.pedidos tbody tr:last-child td:first-child { border-bottom-left-radius: var(--raio); }
.pedidos tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raio); }
.pedidos tbody tr:hover td { background: var(--tinte); }
.pedidos a { color: var(--tinta); text-decoration: none; }
.pedidos .c-cli a:hover, .pedidos .c-num a:hover { color: var(--link); text-decoration: underline; }
.c-num { width: 80px; } .c-data { width: 106px; white-space: nowrap; } .c-total { width: 104px; white-space: nowrap; } .c-sit { width: 150px; }
.pedidos .c-acoes { width: 112px; }
.sit { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.sit.em_aberto { background: var(--ambar-claro); color: var(--ambar); }
.sit.em_andamento { background: var(--tinte); color: var(--link); }
.sit.em_digitacao { background: var(--linha); color: var(--suave); }
.sit.atendido { background: var(--verde-claro); color: var(--verde-txt); }
.sit.venda_agenciada { background: var(--primaria); color: #fff; }
.sit.cancelado { background: var(--vermelho-claro); color: var(--vermelho-txt); }
.sit.a_separar { background: var(--ambar-claro); color: var(--ambar); }
.sit.separado { background: var(--tinte); color: var(--link); }
.rec-resumo { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rec-baixa { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.rec-baixa label { flex: 0 1 190px; }
.sep-leitor { width: 100%; font-size: 1.5rem; padding: 12px 14px; }
.sep-msg { margin: 10px 0; padding: 14px 16px; border-radius: 8px; font-size: 1.35rem; font-weight: 700; background: var(--linha); overflow-wrap: anywhere; }
.sep-msg.ok { background: var(--verde-claro); color: var(--verde-txt); }
.sep-msg.erro { background: var(--vermelho-claro); color: var(--vermelho-txt); }
.sep-msg.aviso { background: var(--ambar-claro); color: var(--ambar); }
.sep-progresso { height: 10px; border-radius: 5px; background: var(--linha); overflow: hidden; margin-bottom: 12px; }
.sep-progresso span { display: block; height: 100%; width: 0; background: var(--verde-txt); transition: width .15s ease-out; }
.sep-painel { margin-bottom: 12px; padding: 14px; border: 2px solid var(--ambar); border-radius: 8px; }
.sep-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sep-itens td { font-size: 1.05rem; vertical-align: middle; }
.sep-itens tr.feito td { background: var(--verde-claro); }
.sep-itens .sep-qtd { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.sep-itens select { width: auto; max-width: 180px; }
.sep-itens .sep-acoes { white-space: nowrap; text-align: right; }
.link-botao { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.pedidos .sinal-nf { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--linha); color: var(--suave); vertical-align: middle; margin-right: 4px; }
.pedidos .sinal-nf.autorizada { background: var(--verde-claro); color: var(--verde-txt); }
.pedidos .sinal-nf.rejeitada, .pedidos .sinal-nf.denegada { background: var(--vermelho-claro); color: var(--vermelho-txt); }
.sinal-est { display: inline-flex; color: var(--ciano); vertical-align: middle; margin-right: 4px; }
.sinal-est .ico { width: 15px; height: 15px; }
.tres-pontos hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }
.pedidos .tres-pontos > div { min-width: 190px; max-height: 340px; overflow-y: auto; }
.perigo-txt, .tres-pontos button.perigo-txt { color: var(--vermelho-txt); }
.ped-lado { position: sticky; top: calc(var(--topo) + 10px); }
.ped-lado dl { margin: 0 0 14px; }
.ped-lado dt { font-size: .8rem; color: var(--suave); }
.ped-lado dd { margin: 0 0 8px; font-weight: 700; font-size: 1.05rem; color: var(--titulo); }
.ped-lado h2 small { font-weight: 400; color: var(--suave); }
.ped-lado > button, .ped-lado > a.botao { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; font-size: .86rem; padding: 8px 10px; }
.ped-lado > button:disabled { cursor: not-allowed; opacity: .5; }
.ped-lado > h2:not(:first-child) { margin-top: 14px; }

/* ---------- pedidos: cadastro ---------- */
.sem-borda { border: 0; margin: 0; padding: 0; min-width: 0; }
.mat-corpo > h2 { font-size: 1.02rem; color: var(--titulo); margin: 22px 0 8px; }
.mat-corpo > h2:first-child { margin-top: 0; }
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 14px; }
.com-botao { display: flex; gap: 6px; }
.com-botao .botao { display: flex; align-items: center; padding: 0 14px; font-weight: 700; }
.campo-botao { display: flex; align-items: flex-end; margin-bottom: 12px; }
.campo-botao .botao { width: 100%; }
.ped-itens-rolagem { overflow-x: auto; }
.ped-itens { min-width: 860px; margin-bottom: 8px; }
.ped-itens th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--suave); padding: 4px 4px; }
.ped-itens td { padding: 3px 4px; vertical-align: middle; }
.ped-itens input { padding: 7px 8px; font-size: .88rem; }
.ped-itens input[readonly], .g5 input[readonly] { background: var(--fundo); }
.ped-itens .it-n { width: 30px; text-align: center; color: var(--suave); font-size: .85rem; }
.ped-itens .it-total { width: 96px; font-weight: 600; white-space: nowrap; }
.ped-itens td:nth-child(3) { width: 92px; } .ped-itens td:nth-child(4) { width: 58px; }
.ped-itens td:nth-child(5), .ped-itens td:nth-child(6), .ped-itens td:nth-child(8) { width: 96px; } .ped-itens td:nth-child(7) { width: 72px; }
.ped-itens .remover, #ped-parcelas .remover { border: 0; background: none; font-size: 1.25rem; color: var(--suave); padding: 2px 8px; }
.g5 input.forte { font-weight: 700; font-size: 1.05rem; color: var(--titulo); }
.g5 > span:empty { display: block; }
#ped-tabela-parcelas { max-width: 640px; }
#ped-tabela-parcelas input, #ped-tabela-parcelas select { padding: 7px 8px; }
@media (max-width: 1180px) {
  .ped-layout, .ped-layout:has(.ped-filtro:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .ped-lado { position: static; }
}
@media (max-width: 980px) {
  .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submenu { display: none !important; }
  .c-data { width: auto; }
}
@media (max-width: 620px) {
  .g5 { grid-template-columns: minmax(0, 1fr); }
  .g5 > span:empty { display: none; }
  .c-data { display: none; }
  .pedidos th, .pedidos tbody td { padding-left: 6px; padding-right: 6px; }
  .pedidos .c-num { width: 46px; } .pedidos .c-total { width: 70px; } .pedidos .c-sit { width: auto; }
  .menu-periodo summary { white-space: normal; }
}

/* ---------- entradas ---------- */
.campo-auto { width: auto; }
.c-nf { width: 90px; white-space: nowrap; }
.it-aviso { display: block; margin-top: 3px; font-size: .75rem; color: var(--ambar); }
.ent-itens { min-width: 980px; }
.ent-itens td:nth-child(3) { width: 110px; } .ent-itens td:nth-child(4) { width: 62px; }
.ent-itens td:nth-child(5) { width: 86px; } .ent-itens td:nth-child(6) { width: 66px; } .ent-itens td:nth-child(7) { width: 104px; }
.ent-itens .it-total, .ent-itens .it-custo { width: 88px; font-weight: 600; white-space: nowrap; }
.ent-itens .it-custo { color: var(--link); }
#form-xml { margin: 0; }
@media (max-width: 620px) { .c-nf { display: none; } }

/* ---------- importação do Bling ---------- */
.suave { color: var(--suave); }
.tag-bling { display: inline-block; font-size: .68rem; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--tinte); color: var(--link); vertical-align: middle; }
.bling-passos { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }
.bling-passos code { overflow-wrap: anywhere; font-size: .85rem; }
.bling-barra { height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; margin: 8px 0 10px; }
.bling-barra span { display: block; width: 3%; height: 100%; border-radius: 99px; background: var(--ciano); transition: width .3s ease; }
.bling-barra.indefinida span { width: 40%; }
.bling-texto { margin: 0 0 6px; font-weight: 600; }
.bling-resumo { margin-bottom: 16px; }
.bling-lista { margin: 0 0 16px; padding: 0; list-style: none; }
.bling-lista li { padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: .9rem; }
.bling-lista li:last-child { border-bottom: 0; }
.bling-lista small { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.bling-rodape { margin: 12px 0 0; display: flex; justify-content: flex-end; }

/* ---------- fornecedores ---------- */
.rola-tabela { overflow-x: auto; }
.lista-forn { width: 100%; }
.lista-forn td:nth-child(2) { white-space: nowrap; }
@media (max-width: 620px) { .lista-forn .c-fone { display: none; } }

/* estoque por local */
.etq-local { display: inline-block; background: var(--tinte); color: var(--titulo); border-radius: 6px; padding: 2px 8px; font-size: .78rem; margin: 2px 4px 2px 0; white-space: nowrap; }
.etq-local b { font-weight: 700; }
.etq-local.parado { background: var(--ambar-claro); color: var(--ambar); }
.etq-local.neg { background: var(--vermelho-claro); color: var(--vermelho-txt); }
.c-locais { min-width: 170px; }
.lista-locais input:not([type="checkbox"]) { min-width: 180px; }
.tr-qtd { width: 90px; text-align: right; }
.tr-tira { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--suave); }
.man-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.man-acoes select { width: auto; min-width: 130px; }
.man-titulo { margin-top: 24px; }
@media (max-width: 640px) {
  .c-locais { min-width: 0; max-width: 115px; }
  table.produtos .c-est { display: none; } /* no celular as etiquetas já mostram os saldos */
  .c-locais .etq-local { white-space: normal; }
}

/* ---------- relevo: o que é só texto ou ícone continua plano ---------- */
.copiar, .preco, .tres-pontos button, .abas button, .tema, .remover, .tr-tira, .link-botao, .foto-principal, .foto .tirar { box-shadow: none !important; transform: none !important; }
.abas button, .tres-pontos button, .link-botao { font-weight: 400; }
.lateral nav a .ico { width: 20px; height: 20px; }

/* ---------- ícone em bloco colorido ---------- */
.ico-bloco { display: flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--azul-claro); color: var(--titulo); }
.ico-bloco .ico { width: 22px; height: 22px; }
.ico-bloco.p { width: 34px; height: 34px; border-radius: 10px; }
.ico-bloco.p .ico { width: 18px; height: 18px; }
.tom-ambar { background: var(--ambar-claro); color: var(--ambar); }
.tom-ciano { background: var(--tinte); color: var(--ciano-txt); }
.tom-azul { background: var(--azul-claro); color: var(--titulo); }
.tom-verde { background: var(--verde-claro); color: var(--verde-txt); }
.tom-vermelho { background: var(--vermelho-claro); color: var(--vermelho-txt); }

/* ---------- progressão do pedido ---------- */
.etapas-caixa { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 22px; }
.etapas-caixa .etapas { flex: 1 1 420px; }
.etapas { display: flex; list-style: none; margin: 0; padding: 0; }
.etapas li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .82rem; color: var(--suave); }
.etapas li + li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; margin-top: -1.5px; background: var(--linha); }
.etapas .bola { position: relative; z-index: 1; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--papel); border: 2px solid var(--campo-borda); color: var(--suave); }
.etapas .bola .ico { width: 18px; height: 18px; }
.etapas li.feita { color: var(--tinta); }
.etapas li.feita .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas li.feita::before, .etapas li.atual::before { background: var(--verde); }
.etapas li.atual { color: var(--titulo); font-weight: 700; }
.etapas li.atual .bola { border-color: var(--ciano); color: var(--ciano-txt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ciano) 20%, transparent); }
.etapas.cancelado { opacity: .55; }
.etapas-nota { margin: 0; font-weight: 700; }
.etapas-mini { display: flex; gap: 3px; margin-top: 5px; }
.etapas-mini i { width: 16px; height: 4px; border-radius: 2px; background: var(--linha); }
.etapas-mini i.on { background: var(--verde); }
.etapas-mini i.atual { background: var(--ciano); }
.etapas-mini.cancelado i { background: var(--vermelho-claro); }

/* ---------- painel ---------- */
.painel-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.painel-topo h1 { margin: 0; font-size: 2.2rem; }
.painel-topo p { margin: 2px 0 0; color: var(--suave); }
.painel-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* o caminho do pedido: a peça principal da tela */
.funil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--papel); border: 1px solid var(--borda-cartao); border-radius: var(--raio); box-shadow: var(--sombra-1); margin-bottom: 16px; }
.funil a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px 22px; color: var(--tinta); text-decoration: none; }
.funil a + a { border-left: 1px solid var(--linha); }
.funil a + a::before { content: ""; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; transform: rotate(45deg); background: var(--papel); border-top: 1px solid var(--linha); border-right: 1px solid var(--linha); z-index: 1; }
.funil a:focus-visible { outline: 2px solid var(--ciano); outline-offset: -3px; border-radius: var(--raio); }
.funil .ico-bloco { grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 14px; transition: transform .12s ease; }
.funil .ico-bloco .ico { width: 26px; height: 26px; }
.funil a:hover .ico-bloco { transform: translateY(-2px); }
.funil a:hover .funil-rot { text-decoration: underline; }
.funil-n { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--titulo); font-variant-numeric: tabular-nums; }
.funil-rot { font-weight: 600; font-size: .92rem; }
.funil-v { color: var(--suave); font-size: .82rem; }
.funil a.zero .funil-n { color: var(--suave); }

.painel-linha { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.painel-linha > .cartao, .painel-pilha > .cartao { margin: 0; }
.painel-pilha { display: grid; gap: 16px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cartao-topo h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.cartao-topo h2 .ico { width: 20px; height: 20px; color: var(--ciano-txt); }
.cartao-topo a { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.painel-vazio { color: var(--suave); margin: 4px 0; }
.tudo-certo { display: flex; align-items: center; gap: 8px; color: var(--verde-txt); font-weight: 600; }
.num-grande { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--titulo); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.num-grande small { font-family: var(--fonte-texto); font-weight: 400; font-size: .85rem; color: var(--suave); }
.variacao { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .88rem; font-weight: 600; color: var(--suave); }
.variacao.sobe { color: var(--verde-txt); }
.variacao.desce { color: var(--vermelho-txt); }

.andamento td { padding: 10px 8px; border-top: 1px solid var(--linha); vertical-align: middle; }
.andamento tbody tr:first-child td { border-top: 0; }
.andamento td:first-child { padding-left: 0; }
.andamento td:last-child { padding-right: 0; white-space: nowrap; }
.andamento td:first-child a { font-weight: 700; color: var(--titulo); text-decoration: none; }
.andamento td:first-child a:hover { text-decoration: underline; }
.andamento small { display: block; color: var(--suave); font-size: .82rem; }
.and-total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.andamento .botao, .andamento button { padding: 7px 12px; font-size: .86rem; }

.atencao-lista, .kpi-linhas { list-style: none; margin: 0; padding: 0; }
.atencao-lista a { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.atencao-lista a:hover, .kpi-linhas a:hover { background: var(--tinte); }
.atencao-lista a > span:nth-child(2) { flex: 1; min-width: 0; }
.atencao-lista a > .ico { color: var(--suave); }
.kpi-linhas { margin-top: 8px; }
.kpi-linhas a { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: .92rem; }
.kpi-linhas b { margin-left: auto; padding-left: 12px; color: var(--titulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* quadradinho de legenda: a cor nunca vai sozinha, o texto ao lado diz o que é */
.ponto { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--neutro-marca); }
.ponto.vermelho, .ponto.negativo { background: var(--vermelho); }
.ponto.ambar, .ponto.baixo { background: var(--ambar-vivo); }
.ponto.verde, .ponto.bom { background: var(--verde); }
.est-barra { display: flex; gap: 2px; height: 12px; margin: 2px 0 4px; }
.est-barra span { min-width: 4px; border-radius: 3px; background: var(--neutro-marca); }
.est-barra .bom { background: var(--verde); }
.est-barra .baixo { background: var(--ambar-vivo); }
.est-barra .negativo { background: var(--vermelho); }

/* gráfico de vendas: colunas finas, linhas de fundo discretas, valor ao passar o mouse ou com o teclado */
.grafico { position: relative; height: 250px; margin-top: 14px; padding: 20px 14px 28px 64px; }
.grafico-eixo { position: absolute; left: 0; top: 20px; bottom: 28px; width: 56px; }
.grafico-eixo span { position: absolute; right: 0; transform: translateY(50%); font-size: .72rem; line-height: 1; color: var(--suave); white-space: nowrap; }
.grafico-barras { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  background: linear-gradient(var(--linha), var(--linha)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--linha), var(--linha)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--linha), var(--linha)) 0 100% / 100% 1px no-repeat; }
.grafico-barras li { position: relative; display: flex; justify-content: center; border-radius: 6px 6px 0 0; }
.grafico-barras li:hover { background: color-mix(in srgb, var(--grafico) 8%, transparent); }
.grafico-barras li:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.coluna { position: relative; display: flex; align-items: flex-end; width: min(24px, 60%); height: 100%; }
.coluna i { display: block; width: 100%; height: var(--alt); min-height: 1px; background: var(--grafico); border-radius: 4px 4px 0 0; }
.parcial .coluna i { background: repeating-linear-gradient(135deg, var(--grafico) 0 4px, color-mix(in srgb, var(--grafico) 40%, var(--papel)) 4px 8px); }
.coluna b { position: absolute; left: 50%; bottom: var(--alt); transform: translate(-50%, -4px); padding: 1px 3px; border-radius: 3px; background: var(--papel); font-size: .72rem; font-weight: 600; line-height: 1; color: var(--tinta); white-space: nowrap; }
.grafico-mes { position: absolute; top: 100%; margin-top: 7px; font-size: .75rem; line-height: 1; color: var(--suave); }
.grafico-dica { display: none; position: absolute; left: 50%; bottom: calc(var(--alt) + 22px); transform: translateX(-50%); z-index: 5; pointer-events: none; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra-2); padding: 8px 12px; font-size: .8rem; line-height: 1.35; color: var(--suave); white-space: nowrap; }
.grafico-dica strong { display: block; font-size: 1rem; color: var(--titulo); }
.grafico-dica em { display: block; font-style: normal; color: var(--ambar); }
.grafico-barras li:hover .grafico-dica, .grafico-barras li:focus-visible .grafico-dica { display: block; }
.grafico-barras li:nth-child(-n+2) .grafico-dica { left: 0; transform: none; }
.grafico-barras li:nth-last-child(-n+2) .grafico-dica { left: auto; right: 0; transform: none; }
.grafico-tabela { margin-top: 10px; font-size: .88rem; }
.grafico-tabela summary { width: fit-content; cursor: pointer; color: var(--link); font-weight: 600; }
.grafico-tabela table { margin: 8px 0 0; }

@media (max-width: 980px) {
  .painel-linha { grid-template-columns: minmax(0, 1fr); }
  .painel-atencao { order: -1; }
}
@media (max-width: 760px) {
  .funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funil a { padding: 14px; column-gap: 10px; }
  .funil a + a::before { display: none; }
  .funil a:nth-child(odd) { border-left: 0; }
  .funil a:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .funil .ico-bloco { width: 40px; height: 40px; border-radius: 11px; }
  .funil .ico-bloco .ico { width: 20px; height: 20px; }
  .funil-n { font-size: 1.9rem; }
  .painel-topo h1 { font-size: 1.8rem; }
  .grafico { padding-left: 54px; padding-right: 8px; }
  .grafico-eixo { width: 48px; }
  .grafico-mes { font-size: .66rem; }
  .etapas li { font-size: .74rem; }
  .andamento td:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .funil .ico-bloco { transition: none; }
  .funil a:hover .ico-bloco { transform: none; }
}

/* permissões do usuário: uma caixa por área */
#permissoes { scroll-margin-top: 96px; }
.areas { border: 0; padding: 0; margin: 6px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.areas legend { padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--tinta); }
.areas .dica { grid-column: 1 / -1; margin: 0; }
label.check.area { align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--borda-cartao); border-radius: var(--raio-p); background: var(--fundo); cursor: pointer; }
label.check.area input { margin-top: 3px; flex: none; }
label.check.area span { display: grid; gap: 2px; }
label.check.area small { color: var(--suave); font-size: .8rem; line-height: 1.35; }
label.check.area:has(input:checked) { border-color: var(--grafico); box-shadow: inset 0 0 0 1px var(--grafico); }
label.check.area:has(input:focus-visible) { outline: 2px solid var(--grafico); outline-offset: 2px; }