/* Central LuxCraft — visual v3 (cores da marca: azul LuxCraft #214D72, azul-noite #16344D,
   cinzas #F4F4F4 / #EBEBEB / #B2B2B2 — medidos no logo, folder, datasheet e panfleto)
   Base em pesquisa (detalhes em Ajuda): contraste WCAG 2.2 (texto ≥ 4,5:1), hierarquia visual com
   poucos tamanhos e uma cor de destaque (NN/g), animações de 100–300 ms (NN/g) e desligadas quando o
   Mac pede "Reduzir movimento" (WCAG 2.3.3). */
:root {
  --fundo: #f4f4f4;           /* cinza-claro da marca */
  --cartao: #ffffff;
  --cartao-2: #f8f8f9;
  --zebra: #f7f8f9;
  --texto: #1b2633;
  --titulo: #214d72;          /* títulos em azul, como no datasheet */
  --suave: #4f5866;
  --borda: #ebebeb;           /* cinza da marca */
  --borda-forte: #d3d7dc;
  --marca: #214d72;           /* azul LuxCraft */
  --marca-escura: #16344d;    /* azul-noite */
  --nav-topo: #214d72;
  --nav-base: #16344d;
  --nav-texto: #dbe6f0;
  --nav-sub: #b3c8da;
  --nav-borda: transparent;
  --th: #214d72;
  --prim: #214d72;            /* botão principal: azul da marca, texto branco (8,9:1) */
  --prim-hover: #1a3f5e;
  --prim-texto: #ffffff;
  --prim-suave: #e6eef5;
  --foco: #4a86b8;
  --acento: #f2a33a;          /* âmbar: só destaque (contadores, Novo pedido, meta) — complementar ao azul */
  --acento-hover: #e8922a;
  --acento-texto: #16344d;
  --acento-forte: #a8520f;    /* laranja para texto sobre fundo claro (5,4:1) */
  --acento-suave: rgba(240, 160, 75, .16);
  --ok: #17703f;
  --ok-fundo: #e5f4ec;
  --alerta: #8a5300;
  --alerta-fundo: #fdf1dc;
  --perigo: #b42318;
  --perigo-fundo: #fdeceb;
  --info: #2a62a0;
  --info-fundo: #e8f0f8;
  --neutro-fundo: #eef0f4;
  --ml: #e6c200;
  --shopee: #ee4d2d;
  --site: #2f6fd0;
  --whatsapp: #22a55b;
  --balcao: #7a7f8c;
  --diretas: #8e5bd0;           /* vendas diretas (pagas no banco) */
  --link: #214d72;
  --sombra: 0 1px 2px rgba(22, 52, 77, .05), 0 4px 14px rgba(22, 52, 77, .05);
  --sombra-alta: 0 10px 40px rgba(22, 52, 77, .2);
  --raio: 14px;
  --raio-p: 10px;
  --rapido: 120ms;
  --medio: 200ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #101418; --cartao: #181d23; --cartao-2: #20262d; --zebra: transparent; --texto: #e6e9ed; --titulo: #f1f3f6; --suave: #a9b3be;
    --borda: #262d35; --borda-forte: #3a434e; --nav-topo: #13181d; --nav-base: #13181d; --nav-texto: #c9d1d9; --nav-sub: #96a1ad; --nav-borda: #262d35; --th: #a9b3be;
    --prim: #8fbbe3; --prim-hover: #a9cbea; --prim-texto: #0c1722; --prim-suave: rgba(143, 187, 227, .14); --foco: #8fbbe3;
    --acento-forte: #f0b36e; --acento-suave: rgba(240, 160, 75, .14);
    --ok: #74cf9b; --ok-fundo: rgba(116, 207, 155, .12); --alerta: #e8b964; --alerta-fundo: rgba(232, 185, 100, .12);
    --perigo: #f39189; --perigo-fundo: rgba(243, 145, 137, .12); --info: #93b9ef; --info-fundo: rgba(147, 185, 239, .12);
    --neutro-fundo: rgba(169, 179, 190, .12); --link: #93c1ee;
    --sombra: none; --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #101418; --cartao: #181d23; --cartao-2: #20262d; --zebra: transparent; --texto: #e6e9ed; --titulo: #f1f3f6; --suave: #a9b3be;
  --borda: #262d35; --borda-forte: #3a434e; --nav-topo: #13181d; --nav-base: #13181d; --nav-texto: #c9d1d9; --nav-sub: #96a1ad; --nav-borda: #262d35; --th: #a9b3be;
  --prim: #8fbbe3; --prim-hover: #a9cbea; --prim-texto: #0c1722; --prim-suave: rgba(143, 187, 227, .14); --foco: #8fbbe3;
  --acento-forte: #f0b36e; --acento-suave: rgba(240, 160, 75, .14);
  --ok: #74cf9b; --ok-fundo: rgba(116, 207, 155, .12); --alerta: #e8b964; --alerta-fundo: rgba(232, 185, 100, .12);
  --perigo: #f39189; --perigo-fundo: rgba(243, 145, 137, .12); --info: #93b9ef; --info-fundo: rgba(147, 185, 239, .12);
  --neutro-fundo: rgba(169, 179, 190, .12); --link: #93c1ee;
  --sombra: none; --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--fundo);
  color: var(--texto);
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}
body.modo-teste { padding-top: 28px; }
body.modo-teste nav { top: 28px; height: calc(100vh - 28px); }
#faixa-teste { position: fixed; top: 0; left: 0; right: 0; height: 28px; z-index: 99; background: #b42318; color: #fff;
  text-align: center; font: 600 13px/28px -apple-system, sans-serif; }

/* ---------------------------------------------------------------- menu lateral */
nav {
  background: linear-gradient(180deg, var(--nav-topo), var(--nav-base));
  color: #d3dfea;
  padding: 20px 12px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
nav .logo { padding: 0 8px 18px; display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
nav .logo .simbolo { width: 36px; height: 36px; filter: brightness(0) invert(1); grid-row: span 2; }
nav .logo img.palavra { display: block; width: 128px; height: auto; filter: brightness(0) invert(1); }
nav .logo small { display: block; color: #a9c0d4; font-size: 11.5px; letter-spacing: .3px; margin-top: 3px; }
nav a {
  position: relative; color: inherit; text-decoration: none; padding: 8px 12px; border-radius: 9px;
  display: flex; justify-content: space-between; align-items: center; font-size: 14.5px;
  transition: background var(--rapido), color var(--rapido);
}
nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
nav a.ativo { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
nav a.ativo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
nav a .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
nav a > span:first-child { display: inline-flex; align-items: center; gap: 11px; }
nav .badge { background: var(--acento); color: var(--acento-texto); border-radius: 99px; padding: 0 7px; font-size: 12px; font-weight: 700; min-width: 20px; text-align: center; }
nav .badge.alerta { background: #ff6b5e; color: #1a0705; }
nav .nav-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: #a9c0d4; padding: 16px 12px 5px; font-weight: 600; }
nav a.nav-cta { background: var(--acento); color: var(--acento-texto); font-weight: 700; justify-content: center; margin: 0 0 12px; padding: 10px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
nav a.nav-cta:hover { background: var(--acento-hover); color: var(--acento-texto); }
nav a.nav-cta.ativo::before { display: none; }
nav .nav-cta kbd { background: rgba(16, 23, 40, .14); color: inherit; border-color: transparent; margin-left: 8px; }
nav .rodape { margin-top: auto; padding: 14px 6px 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #a9c0d4; }
.tema { display: flex; background: rgba(0, 0, 0, .18); border-radius: 9px; padding: 3px; gap: 2px; }
.tema button { flex: 1; border: 0; background: none; color: #bccddc; padding: 5px 4px; font-size: 12px; border-radius: 7px; justify-content: center; }
.tema button:hover { color: #fff; border: 0; }
.tema button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
nav .atalhos-link { color: #a9c0d4; background: none; border: 0; padding: 2px 6px; font-size: 12px; justify-content: flex-start; }
nav .atalhos-link:hover { color: #fff; border: 0; }

/* ---------------------------------------------------------------- topo */
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 12px; padding: 14px 32px 0; }
.busca-global { position: relative; flex: 1; max-width: 420px; }
.busca-global svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--suave); pointer-events: none; }
.busca-global input { width: 100%; padding: 8px 40px 8px 34px; border-radius: 10px; background: var(--cartao); }
.busca-global kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sync { font-size: 13px; color: var(--suave); }
.sync a { color: var(--perigo); font-weight: 600; }
.sync .ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--ok-fundo); }
.sync .ponto.girando { background: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); animation: pulso 1s infinite alternate; }
.sync .ponto.erro { background: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fundo); padding: 0; margin: 0 7px 0 0; border: 0; }
@keyframes pulso { from { opacity: .35; } to { opacity: 1; } }
#carregando { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--foco); z-index: 120; opacity: 0; transition: width .6s ease-out, opacity .2s; }
#carregando.on { width: 70%; opacity: 1; }
body.modo-teste #carregando { top: 28px; }

/* ---------------------------------------------------------------- conteúdo */
main { padding: 10px 32px 90px; min-width: 0; max-width: 1400px; width: 100%; }
main:focus { outline: none; }
main.entrando { animation: entrar var(--medio) ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main a { color: var(--link); }
main a.botao { color: var(--texto); }
main a.botao.prim { color: var(--prim-texto); }
h1 { font-size: 26px; line-height: 1.2; margin: 14px 0 4px; letter-spacing: -.015em; color: var(--titulo); }
h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.005em; color: var(--titulo); }
h3 { font-size: 14px; margin: 16px 0 8px; }
.sub { color: var(--suave); margin: 0 0 20px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho .sub { margin: 0; }
.cabecalho .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.grade.dupla { grid-template-columns: var(--cols); }
@media (max-width: 1100px) { .grade.dupla { grid-template-columns: 1fr; } }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); min-width: 0; }
.cartao + .cartao, .cartao.espaco { margin-top: 16px; }
.grade > .cartao + .cartao { margin-top: 0; }
.numero { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.25; }
.numero.zero { color: var(--suave); font-weight: 600; }
.rotulo { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi .linha-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--suave); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; padding: 1px 8px; border-radius: 99px; }
.delta.sobe { background: var(--ok-fundo); color: var(--ok); }
.delta.desce { background: var(--perigo-fundo); color: var(--perigo); }
.delta.igual { background: var(--neutro-fundo); color: var(--suave); }

/* meta do mês */
.meta { margin-top: 14px; }
.meta .trilho { height: 10px; border-radius: 99px; background: var(--neutro-fundo); overflow: hidden; }
.meta .trilho span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f6b36b, var(--acento)); transition: width .5s ease-out; }
.meta .trilho span.batida { background: linear-gradient(90deg, #4cc38a, var(--ok)); }
.meta .info { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--suave); margin-top: 6px; }
.link-botao { background: none; border: 0; padding: 0; color: var(--link); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-botao:hover { border: 0; }

/* ---------------------------------------------------------------- tabelas */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 11.5px; color: var(--titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding-top: 6px; padding-bottom: 8px; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr, table tr { transition: background var(--rapido); }
tr:nth-child(even) td { background: var(--zebra); }
tr:hover td { background: var(--cartao-2); }
.tabela-rolagem { overflow-x: auto; }
td.itens { min-width: 170px; }
td.mono { word-break: normal; white-space: nowrap; }
tr[data-linha] { cursor: pointer; }
tr[data-linha]:hover td { background: var(--prim-suave); }
td.chk { width: 34px; }
td .chip { white-space: normal; }
.inativo td { opacity: .5; }

/* canais e status */
.canal { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; }
.canal::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cor, var(--balcao)); flex-shrink: 0; }
/* logo de cada canal ao lado do nome (o texto continua — NN/g: ícone sem rótulo confunde) */
.canal.mercadolivre::before, .canal.shopee::before, .canal.site::before, .canal.whatsapp::before, .canal.balcao::before {
  width: 18px; height: 18px; border-radius: 4px; background: var(--logo) center / contain no-repeat; background-origin: content-box; }
.canal.mercadolivre { --logo: url(/canais/mercadolivre.svg); } .canal.shopee { --logo: url(/canais/shopee.png); }
.canal.site { --logo: url(/canais/site.png); } .canal.whatsapp { --logo: url(/canais/whatsapp.svg); } .canal.balcao { --logo: url(/canais/balcao.svg); }
.logo-canal { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; vertical-align: -4px; border-radius: 4px; }
.tarefa .t-ico .logo-canal { width: 22px; height: 22px; }
.status-conexoes .logo-canal { width: 15px; height: 15px; vertical-align: -3px; }
/* logos azul-escuros (BTG, LuxCraft) ganham um fundinho claro no tema escuro para aparecer */
:root[data-theme="dark"] .canal.site::before, :root[data-theme="dark"] .logo-canal.claro { background-color: #fff; padding: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .canal.site::before, :root:not([data-theme="light"]) .logo-canal.claro { background-color: #fff; padding: 2px; } }
.canal.mercadolivre { --cor: var(--ml); } .canal.shopee { --cor: var(--shopee); } .canal.site { --cor: var(--site); }
.canal.whatsapp { --cor: var(--whatsapp); } .canal.balcao { --cor: var(--balcao); }
.etiqueta, .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 12px; white-space: nowrap; font-weight: 600; background: var(--neutro-fundo); color: var(--suave); }
.st-aguardando_pagamento, .st-pendente, .chip.atencao { background: var(--alerta-fundo); color: var(--alerta); }
.st-a_enviar { background: var(--acento-suave); color: var(--acento-forte); }
.st-enviado, .chip.info { background: var(--info-fundo); color: var(--info); }
.st-entregue, .st-pago, .chip.ok { background: var(--ok-fundo); color: var(--ok); }
.st-cancelado, .st-devolvido { background: var(--neutro-fundo); color: var(--suave); }
.st-vencido, .chip.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.chip:not(.ok):not(.atencao):not(.perigo):not(.info) { font-weight: 500; }

/* ---------------------------------------------------------------- formulários e botões */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: end; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--suave); font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 8px 10px; min-width: 0;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
textarea { min-height: 64px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--prim-suave); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--prim); vertical-align: middle; }
button, .botao {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--raio-p); padding: 7px 14px; min-height: 36px;
  border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
button:hover, .botao:hover { border-color: var(--suave); background: var(--cartao-2); }
button:active:not(:disabled), .botao:active { transform: scale(.97); }
button.prim, .botao.prim { background: var(--prim); color: var(--prim-texto); border-color: var(--prim); font-weight: 700; }
button.prim:hover, .botao.prim:hover { background: var(--prim-hover); border-color: var(--prim-hover); }
button.perigo, .botao.perigo { color: var(--perigo); }
button.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; font-weight: 700; }
:root[data-theme="dark"] button.perigo-cheio { color: #1a0705; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.perigo-cheio { color: #1a0705; } }
button.fantasma, .botao.fantasma { border-color: transparent; background: transparent; }
button.fantasma:hover, .botao.fantasma:hover { background: var(--neutro-fundo); border-color: transparent; }
button.peq, .botao.peq { padding: 3px 10px; font-size: 12.5px; min-height: 28px; border-radius: 8px; }
button:disabled { opacity: .5; cursor: default; }
button.ocupado { position: relative; color: transparent !important; pointer-events: none; }
button.ocupado::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--texto); border-right-color: transparent; animation: girar .7s linear infinite; }
button.prim.ocupado::after { border-color: var(--prim-texto); border-right-color: transparent; }
@keyframes girar { to { transform: rotate(360deg); } }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
nav a:focus-visible, nav button:focus-visible { outline-color: var(--acento); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form .largo { grid-column: 1 / -1; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
kbd { font: 600 11px/1 ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--borda-forte); background: var(--cartao-2); color: var(--suave); }

/* avisos em linha */
.dica, .aviso, .erro { border-radius: var(--raio-p); padding: 11px 14px; margin: 10px 0; border: 1px solid transparent; }
.dica { background: var(--info-fundo); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.aviso { background: var(--alerta-fundo); border-color: color-mix(in srgb, var(--alerta) 25%, transparent); }
.erro { background: var(--perigo-fundo); border-color: color-mix(in srgb, var(--perigo) 25%, transparent); color: var(--perigo); }
.erro details { color: var(--suave); font-size: 12px; margin-top: 6px; }
.erro details summary { cursor: pointer; }
.vazio { color: var(--suave); padding: 22px 4px; text-align: center; }
.itens { color: var(--suave); font-size: 12.5px; }
.muted { color: var(--suave); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.passos { padding-left: 20px; } .passos li { margin-bottom: 8px; }
details > summary { cursor: pointer; }
details > summary::marker { color: var(--suave); }

/* estado vazio com ilustração */
.vazio-grande { text-align: center; padding: 34px 12px; color: var(--suave); }
.vazio-grande .icone { font-size: 30px; display: block; margin-bottom: 6px; }
.vazio-grande .selo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok); }
.vazio-grande .selo svg { width: 32px; height: 32px; }
.vazio-grande .selo.neutro { background: var(--neutro-fundo); color: var(--suave); }
.vazio-grande strong { display: block; color: var(--texto); font-size: 16px; margin-bottom: 2px; }
.vazio-grande .botao { margin-top: 12px; }
.selo.festa { animation: festa 600ms cubic-bezier(.2, 1.4, .4, 1) both; }
.selo.festa path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tracar 400ms 250ms ease-out forwards; }
@keyframes festa { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- avisos flutuantes (toast) */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 150; max-width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--marca-escura); color: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: var(--sombra-alta);
  animation: toast-in var(--medio) ease-out; font-size: 14px; border: 1px solid rgba(255, 255, 255, .08); }
.toast.saindo { animation: toast-out 160ms ease-in forwards; }
.toast .t-ico { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #4cc38a; color: #062414; margin-top: 1px; }
.toast.erro-t .t-ico { background: #ff8a80; color: #2a0805; }
.toast .t-msg { flex: 1; }
.toast button { background: none; border: 0; color: #f6b36b; font-weight: 700; padding: 0 4px; min-height: 0; font-size: 14px; }
.toast button:hover { background: none; color: #ffd2a1; }
.toast .t-fechar { color: #aab3c3; font-weight: 400; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- janelas */
dialog { border: 1px solid var(--borda); border-radius: 16px; padding: 0; background: var(--cartao); color: var(--texto); width: min(760px, 94vw); box-shadow: var(--sombra-alta); }
dialog[open] { animation: abrir var(--medio) ease-out; }
dialog.pequeno { width: min(440px, 94vw); }
dialog::backdrop { background: rgba(8, 11, 18, .5); backdrop-filter: blur(2px); }
@keyframes abrir { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
dialog .cab { padding: 16px 20px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
dialog .cab strong { font-size: 16px; }
dialog .corpo { padding: 18px 20px; max-height: 72vh; overflow: auto; }
dialog .pe { padding: 12px 20px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; background: var(--cartao-2); border-radius: 0 0 16px 16px; }
dialog .pe:empty { display: none; }
dialog.pequeno .corpo p { margin: 0 0 6px; }

/* contador de estoque (− número +) */
.contador { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 8px; }
.contador input { width: 110px; text-align: center; font-size: 30px; font-weight: 700; padding: 6px; font-variant-numeric: tabular-nums; }
.contador button { width: 46px; height: 46px; font-size: 22px; border-radius: 50%; padding: 0; }
.contador-dif { text-align: center; min-height: 20px; font-size: 13px; }

/* ---------------------------------------------------------------- gráficos de barra */
.barras { display: flex; flex-direction: column; gap: 7px; }
.barra { display: grid; grid-template-columns: 70px 1fr 110px; gap: 10px; align-items: center; font-size: 12.5px; }
.barra .trilho { display: flex; height: 16px; background: var(--neutro-fundo); border-radius: 5px; overflow: hidden; }
.barra .trilho span { display: block; height: 100%; }
.barra .trilho span + span { border-left: 2px solid var(--cartao); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin: 10px 0 14px; }

/* ---------------------------------------------------------------- abas */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin: 0 0 16px; overflow-x: auto; }
.abas button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 10px 14px; color: var(--suave); min-height: 0; }
.abas button:hover { background: none; color: var(--texto); border-color: transparent; border-bottom-color: var(--borda-forte); }
.abas button[aria-selected="true"] { color: var(--titulo); font-weight: 700; border-bottom-color: var(--prim); }
.abas button .cont { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; border-radius: 99px; background: var(--neutro-fundo); font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- pedidos */
.secao-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.secao-titulo h2 { margin: 0; font-size: 18px; }
.grupo-canal { margin-bottom: 16px; }
.grupo-canal > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; }
.grupo-canal + .grupo-canal { margin-top: 0; }
.progresso-envio { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; }
.progresso-envio .meta { margin: 0; flex: 1; }
.progresso-envio strong { white-space: nowrap; }
/* etapa: 3 botões lado a lado (um clique avança) */
.etapas { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 9px; overflow: hidden; background: var(--cartao); }
.etapas button { border: 0; border-radius: 0; min-height: 30px; padding: 4px 9px; font-size: 12.5px; color: var(--suave); background: none; }
.etapas button + button { border-left: 1px solid var(--borda); }
.etapas button:hover { background: var(--cartao-2); color: var(--texto); }
.etapas button[aria-pressed="true"] { background: var(--prim-suave); color: var(--titulo); font-weight: 700; }
.etapas button[aria-pressed="true"][data-v="pronto"] { background: var(--ok-fundo); color: var(--ok); }
.barra-acao { position: sticky; bottom: 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: var(--sombra-alta); margin-top: 16px; flex-wrap: wrap; }

/* tarefas do Início */
.tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tarefa { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); transition: border-color var(--rapido), box-shadow var(--rapido); }
.tarefa:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.tarefa .t-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--prim-suave); color: var(--titulo); }
.tarefa .t-ico svg { width: 20px; height: 20px; }
.tarefa.perigo .t-ico { background: var(--perigo-fundo); color: var(--perigo); }
.tarefa.atencao .t-ico { background: var(--alerta-fundo); color: var(--alerta); }
.tarefa .t-txt { flex: 1; min-width: 0; }
.tarefa .t-txt strong { display: block; }
.tarefa .botao { flex-shrink: 0; }
.tarefa details { margin-top: 4px; }
.tarefa details summary { font-size: 12px; color: var(--suave); }
.tarefa details div { font-size: 12px; color: var(--suave); word-break: break-word; margin-top: 4px; }
.mais-tarefas { margin-top: 10px; }

/* novo pedido: escolher produto com um clique */
.pedido-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .pedido-layout { grid-template-columns: 1fr; } }
.passo-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; }
.passo-titulo .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--prim); color: var(--prim-texto); font-size: 13px; font-weight: 800; }
.produtos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.produto-btn { flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; padding: 10px 12px; min-height: 76px; gap: 2px; border-radius: 12px; position: relative; }
.produto-btn .sku { font: 700 12px ui-monospace, Menlo, monospace; color: var(--titulo); }
.produto-btn .nome { font-size: 13px; line-height: 1.3; }
.produto-btn .preco { font-size: 12px; color: var(--suave); margin-top: auto; }
.produto-btn .qtd-sel { position: absolute; top: 8px; right: 8px; background: var(--acento); color: var(--acento-texto); font-size: 12px; font-weight: 800; border-radius: 99px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; }
.produto-btn.escolhido { border-color: var(--prim); background: var(--prim-suave); box-shadow: inset 0 0 0 1px var(--prim); }
.itens-pedido { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.item-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 32px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao-2); }
.item-linha .titulo { font-size: 13.5px; }
.item-linha .titulo .mono { color: var(--titulo); font-weight: 700; word-break: normal; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: 9px; overflow: hidden; background: var(--cartao); }
.qtd button { border: 0; border-radius: 0; min-height: 32px; width: 32px; padding: 0; font-size: 16px; }
.qtd input { width: 44px; border: 0; border-radius: 0; text-align: center; padding: 6px 2px; box-shadow: none !important; -moz-appearance: textfield; }
.qtd input::-webkit-inner-spin-button { display: none; }
.resumo-pedido { position: sticky; top: 16px; }
.resumo-pedido .linha-r { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.resumo-pedido .total { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 12px; font-size: 18px; }
.resumo-pedido .total strong { font-size: 24px; letter-spacing: -.02em; }
.resumo-pedido .botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.resumo-pedido .botoes button { width: 100%; }

/* conexões: visão geral */
.status-conexoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.status-conexoes a { text-decoration: none; }
.cartao > details > summary { font-weight: 600; }

/* ---------------------------------------------------------------- telas estreitas */
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }
  nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  nav .logo, nav .rodape, nav .nav-grupo { display: none; }
  nav a.ativo::before { display: none; }
  main { padding: 10px 16px 80px; }
  .topo { padding: 10px 16px 0; }
  .item-linha { grid-template-columns: 1fr auto; }
}
.pular { position: absolute; left: -999px; }
.pular:focus { left: 8px; top: 8px; z-index: 200; background: #fff; color: #000; padding: 6px 10px; border-radius: 6px; }

/* "Reduzir movimento" ligado no Mac: sem animações (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
/* nomes longos de cliente (apelidos do ML) quebram em vez de empurrar a tabela */
.cartao td { overflow-wrap: break-word; }
.grupo-canal td:nth-child(3) { overflow-wrap: anywhere; min-width: 110px; }
.grupo-canal td.itens { min-width: 150px; }

/* lucro negativo nos relatórios */
.negativo { color: var(--perigo); }

/* cartão "+ Novo produto" na tela Custos */
.novo-produto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px;
  border: 2px dashed var(--borda); background: transparent; color: inherit; cursor: pointer; text-align: center; font: inherit; }
.novo-produto:hover, .novo-produto:focus-visible { border-color: var(--marca, #214D72); background: color-mix(in srgb, var(--marca, #214D72) 6%, transparent); }
.novo-produto .mais { font-size: 30px; line-height: 1; color: var(--marca, #214D72); }

/* conta do lucro estimado (Relatórios) */
.conta-lucro td { padding-top: 8px; padding-bottom: 8px; }
.conta-lucro td:first-child { min-width: 210px; }
tr.total td { border-top: 2px solid var(--marca); font-size: 15px; }

/* cartões de conta na janela Extratos */
.conta-extrato { display: block; width: 100%; min-width: 0; margin: 0; padding: 12px 14px; text-align: left; white-space: normal;
  cursor: pointer; font: inherit; color: inherit; line-height: 1.45; }
.conta-extrato .rotulo { display: flex; align-items: center; gap: 6px; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 13.5px; }
.conta-extrato[aria-pressed="true"] { outline: 2px solid var(--marca); outline-offset: -2px; }

.canal.diretas { --cor: var(--diretas); }

/* lucro mês a mês (Relatórios) */
.lucro-mes th { white-space: normal; vertical-align: bottom; }
.lucro-mes td { white-space: nowrap; }

/* ---------------------------------------------------------------- menu recolhível (só ícones) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.botao-menu { padding: 6px 8px; margin-right: 8px; }
html.menu-recolhido body { grid-template-columns: 68px 1fr; }
html.menu-recolhido nav { padding: 16px 10px 14px; }
html.menu-recolhido nav .logo { grid-template-columns: 1fr; padding: 0 0 14px; justify-items: center; }
html.menu-recolhido nav .logo .palavra, html.menu-recolhido nav .logo small,
html.menu-recolhido nav .nav-grupo, html.menu-recolhido nav .rodape { display: none; }
html.menu-recolhido nav .nav-grupo + a { margin-top: 10px; }
html.menu-recolhido nav a { justify-content: center; padding: 10px 0; }
html.menu-recolhido nav a > span:first-child { font-size: 0; gap: 0; }
html.menu-recolhido nav a .ico { width: 20px; height: 20px; }
html.menu-recolhido nav .badge { position: absolute; top: 2px; right: 4px; font-size: 10px; min-width: 16px; padding: 0 4px; }
html.menu-recolhido nav a.nav-cta { font-size: 0; padding: 9px 0; }
html.menu-recolhido nav a.nav-cta::after { content: "+"; font-size: 22px; line-height: 1; }
html.menu-recolhido nav a.nav-cta kbd { display: none; }
@media (max-width: 820px) { .botao-menu { display: none; } html.menu-recolhido body { grid-template-columns: 1fr; } }

/* relatórios: abas e números principais */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.kpis .cartao { margin: 0; }
.kpis .numero { font-size: 26px; }
details.cartao > summary { cursor: pointer; font-weight: 600; }
details.cartao[open] > summary { margin-bottom: 10px; }

/* ================================================================ v4 — leitura fácil (2026-10-07)
   Pedido: "muito confuso no escuro, deixar intuitivo também para idosos". Base:
   - W3C WAI-AGE: evitar excesso de informação, texto maior e redimensionável, pouco enfeite de texto.
   - NN/g (usuários 65+): letra pequena e clara demais e alvos pequenos são os maiores problemas.
   - WCAG 2.2: alvos de 44 px (2.5.5) e contraste reforçado de 7:1 (1.4.6) — toda a paleta passa.
   - Material Design (tema escuro): cinza escuro em vez de preto/azul saturado, superfície mais clara
     = mais à frente, cores dessaturadas (as saturadas "vibram" no fundo escuro e cansam a vista).
   - NN/g modo escuro: o claro rende mais na leitura; o escuro fica como opção. */
body { font-size: 16px; line-height: 1.55; }
h1 { font-size: 30px; margin: 16px 0 6px; }
h2 { font-size: 19px; margin-bottom: 14px; }
h3 { font-size: 16px; }
.sub { font-size: 16px; }
.secao-titulo h2 { font-size: 20px; }

/* rótulos: nada de CAIXA ALTA miúda — frase normal, 14 px */
.rotulo { font-size: 14px; text-transform: none; letter-spacing: 0; }
th { font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--th); padding-top: 8px; padding-bottom: 10px; }
td { font-size: 15px; padding: 13px 12px; }
th { padding-left: 12px; padding-right: 12px; }
.itens, td.itens { font-size: 14px; }
.chip, .etiqueta { font-size: 13px; padding: 3px 11px; }
.numero { font-size: 30px; }
.kpis .numero { font-size: 28px; }
.kpi .linha-ctx, .meta .info { font-size: 14px; }
.delta { font-size: 13px; }
.link-botao { font-size: 14px; }
label { font-size: 14px; }
.barra, .legenda { font-size: 14px; }
.mono { font-size: 13px; }

/* links nas tabelas: cor e peso bastam (o sublinhado em toda linha vira ruído); sublinha ao passar o mouse */
td a { text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* alvos maiores (WCAG 2.5.5: 44 px) */
button, .botao { font-size: 15px; min-height: 44px; padding: 9px 16px; }
button.peq, .botao.peq { font-size: 14px; min-height: 36px; padding: 6px 12px; }
input, select, textarea { padding: 10px 12px; min-height: 44px; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
.etapas button { min-height: 38px; font-size: 14px; padding: 6px 12px; }
.qtd button { min-height: 40px; width: 40px; }
.abas button { font-size: 15.5px; padding: 12px 16px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline-width: 3px; }

/* atalhos de teclado: continuam funcionando, mas sem as plaquinhas espalhadas (lista no "?") */
.nav-cta kbd, .busca-global kbd { display: none; }
.busca-global { max-width: 480px; }
.busca-global input { padding: 10px 14px 10px 38px; font-size: 15px; }
.busca-global svg { left: 13px; width: 18px; height: 18px; }
.sync { font-size: 14px; }

/* menu lateral: itens maiores; no escuro, cinza liso com divisória (sem o azul saturado) */
nav { color: var(--nav-texto); border-right: 1px solid var(--nav-borda); }
nav a { font-size: 16px; padding: 10px 12px; min-height: 44px; }
nav a .ico { width: 20px; height: 20px; }
nav .nav-grupo { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--nav-sub); padding: 18px 12px 6px; }
nav .logo small { color: var(--nav-sub); font-size: 12.5px; }
nav a.nav-cta { font-size: 16px; padding: 12px; }
nav .badge { font-size: 13px; min-width: 24px; padding: 1px 8px; }
nav .rodape { color: var(--nav-sub); font-size: 13px; gap: 10px; }
nav .rodape-rotulo { font-size: 12.5px; margin: 2px 4px -4px; }
.tema button { font-size: 13.5px; padding: 8px 4px; min-height: 36px; color: var(--nav-texto); }
nav .atalhos-link { font-size: 13px; color: var(--nav-sub); min-height: 32px; }

/* cartões: mais respiro e menos caixas dentro de caixas */
.cartao { padding: 22px 24px; }
.grade { gap: 20px; margin-bottom: 20px; }
.cartao + .cartao, .cartao.espaco { margin-top: 20px; }

/* "O que fazer agora": lista com divisórias, sem uma caixa em volta de cada tarefa */
.tarefas { gap: 0; }
.tarefa { border: 0; border-radius: 0; padding: 16px 2px; background: none; gap: 16px; }
.tarefa + .tarefa { border-top: 1px solid var(--borda); }
.tarefa:hover { box-shadow: none; border-color: var(--borda); }
.tarefa .t-ico { width: 44px; height: 44px; border-radius: 12px; }
.tarefa .t-ico svg { width: 22px; height: 22px; }
.tarefa .t-txt strong { font-size: 16px; margin-bottom: 2px; }
.mais-tarefas > summary { padding: 10px 0 2px; font-size: 15px; }

/* tabelas: no escuro, só as divisórias (sem listras), linha que passa o mouse fica mais clara */
tr:hover td { background: var(--cartao-2); }

/* avisos flutuantes e janelas um pouco maiores */
.toast { font-size: 15px; padding: 14px 16px; }
dialog .cab strong { font-size: 18px; }
dialog .corpo { font-size: 16px; }

/* tema escuro: superfícies sem sombra, contorno discreto; logo do canal com fundo claro já tratado acima */
:root[data-theme="dark"] .cartao { border-color: var(--borda); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cartao { border-color: var(--borda); } }

/* Letra grande: aumenta tudo por igual (texto, botões e espaços) — botão no rodapé do menu */
html.letra-grande body { zoom: 1.15; }
html.letra-grande nav { height: calc(100vh / 1.15); }
html.letra-grande body.modo-teste nav { height: calc((100vh - 28px * 1.15) / 1.15); }
@media (max-width: 820px) { html.letra-grande nav { height: auto; } }

/* barras do Início: nome do canal com espaço próprio (não fica embaixo da barra) */
.barra.barra-canal { grid-template-columns: minmax(130px, auto) 1fr auto; }
.barra.barra-canal .canal { white-space: nowrap; }
/* menu: compacto o bastante para Cores e Letra caberem sem rolar numa tela de notebook */
nav { padding-top: 16px; }
nav .logo { padding-bottom: 14px; }
nav a { min-height: 42px; padding: 9px 12px; }
nav a.nav-cta { margin-bottom: 8px; }
nav .nav-grupo { padding: 12px 12px 4px; }
nav .rodape { padding-top: 10px; gap: 6px; }
/* fila de envio: nº do pedido com a idade logo abaixo (uma coluna a menos = etapas sem cortar) */
.col-pedido .idade { margin-top: 6px; }
.grupo-canal td:nth-child(2) { overflow-wrap: anywhere; min-width: 110px; }
.grupo-canal td:nth-child(3) { overflow-wrap: normal; min-width: 180px; }
.grupo-canal td:nth-child(4) .chip { white-space: nowrap; }
.etapas button { padding: 6px 11px; }
.produto-btn .sku { font-size: 13px; } .produto-btn .nome { font-size: 14.5px; } .produto-btn .preco { font-size: 13px; }

/* ------------------------------------------------------------------ Contador (documentos do mês) */
.contador-item { align-items: flex-start; }
.contador-item .t-ico { margin-top: 2px; }
.contador-item .t-txt strong .chip { margin-left: 6px; vertical-align: 1px; }
.contador-item .acoes-item { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.contador-item .acoes-item label.botao { cursor: pointer; white-space: nowrap; }
.contador-item.arrastando { outline: 2px dashed var(--link); outline-offset: -2px; background: var(--prim-suave); }
.contador-item details.arquivos { margin-top: 6px; }
.contador-item details.arquivos summary { cursor: pointer; }
.lista-arq { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.lista-arq li { word-break: break-word; }
.lista-arq .link-botao { margin-left: 6px; }
.contador-item .ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; }
.contador-item .ponto.girando { background: var(--acento); animation: pulso 1s infinite alternate; }
@media (max-width: 640px) {
  .contador-item { flex-wrap: wrap; }
  .contador-item .acoes-item { flex-direction: row; align-items: center; width: 100%; padding-left: 52px; }
}