/* Visual do painel (marca JF Eletro). Usado por todos os módulos. */
  /* Identidade JF Eletro (cores do logo): fundo claro, cartões brancos, menu ardósia, ação principal laranja, links e foco em azul */
  :root { --bg:#f4f6f9; --surface:#fff; --surface2:#f8fafc; --surface3:#eef2f7; --border:#dfe5ec; --border2:#7a8aa0;
    --tx:#172033; --mut:#5b6b82; --pri:#ee852e; --pri-tx:#111827; --link:#1d5f9e; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --info:#1d4ed8;
    /* texto sobre fundos tingidos (pílulas) e anel de foco: todos validados para contraste WCAG AA */
    --ok-tx:#14532d; --warn-tx:#7c2d12; --bad-tx:#7f1d1d; --danger-bg:#b91c1c; --focus:#1d4ed8; --on-solid:#fff; --badge-tx:#fff;
    /* cores das partes da barra de conta */
    --c-taxa:#3b82f6; --c-frete:#f59e0b; --c-imposto:#a78bfa; --c-embal:#94a3b8; --c-custo:#64748b;
    /* escala tipográfica e de espaço */
    --fs-xs:.75rem; --fs-sm:.85rem; --fs-md:1rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.75rem;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
    --bar:#0d243a; --bar-2:#102c46; --bar-tx:#f8fbff; --bar-tx2:#d5e4f2; --foto-bg:#fff; --bar-h:56px; --side-bg:#f3f6fa; --side-hover:#e3eaf2; --side-tx:#172033; --side-mut:#4d5d74; --side-borda:#858b97;
    --radius-control:10px; --radius-card:14px; --radius-panel:18px;
    --sh:0 12px 34px rgba(15,23,42,.08); --side:248px; --font-ui:Manrope,ui-sans-serif,system-ui,"Segoe UI",sans-serif; }
  :root[data-theme="dark"] { --bg:#0b1220; --surface:#172033; --surface2:#1c283d; --surface3:#253247; --border:#2a384f; --border2:#71829b;
    --tx:#f1f5f9; --mut:#9aa8bd; --pri:#f59a3d; --pri-tx:#111827; --link:#6cb8ec; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#60a5fa; --ok-tx:#86efac; --warn-tx:#fcd34d; --bad-tx:#fca5a5; --focus:#93c5fd; --on-solid:#0b1220; --badge-tx:#111827; --danger-bg:#f87171;
    --bar:#0d243a; --bar-2:#102c46; --bar-tx:#f8fbff; --bar-tx2:#d5e4f2; --foto-bg:#fff; --side-bg:#0a0f1a; --side-hover:#253247; --side-tx:#f1f5f9; --side-mut:#9aa8bd; --side-borda:color-mix(in srgb,var(--side-tx) 13%,transparent); --sh:0 8px 24px rgba(0,0,0,.45); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1220; --surface:#172033; --surface2:#1c283d; --surface3:#253247; --border:#2a384f; --border2:#71829b;
    --tx:#f1f5f9; --mut:#9aa8bd; --pri:#f59a3d; --pri-tx:#111827; --link:#6cb8ec; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#60a5fa; --ok-tx:#86efac; --warn-tx:#fcd34d; --bad-tx:#fca5a5; --focus:#93c5fd; --on-solid:#0b1220; --badge-tx:#111827; --danger-bg:#f87171; --bar:#0d243a; --bar-2:#102c46; --bar-tx:#f8fbff; --bar-tx2:#d5e4f2; --foto-bg:#fff; --side-bg:#0a0f1a; --side-hover:#253247; --side-tx:#f1f5f9; --side-mut:#9aa8bd; --side-borda:color-mix(in srgb,var(--side-tx) 13%,transparent); --sh:0 8px 24px rgba(0,0,0,.45); } }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.5 "Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--tx); }
  h1, .brand, .card .v, th { font-family:var(--font-ui); }
  a { color:var(--link); }
  button { font:inherit; cursor:pointer; }
  :focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

  /* Layout */
  .app { display:grid; grid-template-columns:var(--side) 1fr; grid-template-rows:var(--bar-h) 1fr; min-height:100vh; }
  .topbar { grid-column:1 / -1; }
  aside { background:var(--side-bg); color:var(--side-tx); border-right:1px solid var(--border); padding:12px 10px; position:sticky; top:var(--bar-h); height:calc(100vh - var(--bar-h)); overflow:auto; display:flex; flex-direction:column; }
  aside { scrollbar-width:thin; scrollbar-color:var(--side-hover) transparent; }
  aside::-webkit-scrollbar { width:8px; } aside::-webkit-scrollbar-thumb { background:var(--side-hover); border-radius:999px; } aside::-webkit-scrollbar-track { background:transparent; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:var(--fs-md); line-height:1.15; color:#fff; text-decoration:none; padding-right:8px; }
  .brand img { width:36px; height:36px; flex:none; }
  .brand small { display:block; color:rgba(255,255,255,.94); font-weight:500; font-size:var(--fs-xs); }
  .sec { margin-bottom:2px; }
  .sec-t { width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; color:var(--side-mut);
    text-transform:uppercase; font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em; padding:8px 10px; }
  .sec-t::after { content:"▾" / ""; transition:transform .15s; }
  .sec.closed .sec-t::after { transform:rotate(-90deg); }
  .sec.closed .sec-i { display:none; }
  .nav { width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:transparent;
    border:1px solid transparent; color:var(--side-tx); border-radius:var(--radius-control); padding:6px 10px; margin:1px 0; text-decoration:none; font-size:var(--fs-sm); }
  .nav:hover { background:var(--side-hover); }
  .nav.on, .nav[aria-current="page"] { background:color-mix(in srgb,var(--info) 14%,var(--surface)); color:var(--tx); font-weight:700; box-shadow:inset 3px 0 0 var(--info); }
  .badge { background:var(--warn); color:var(--badge-tx); border-radius:999px; font-size:var(--fs-xs); font-weight:800; padding:1px 7px; }
  .foot { margin-top:auto; padding:10px; color:var(--side-mut); font-size:var(--fs-xs); }

  .main { min-width:0; display:flex; flex-direction:column; }
  .sec.solo { margin-bottom:var(--space-1); }
  .foot-acoes { display:none; }
  .crumb { color:var(--mut); font-size:var(--fs-sm); }
  .crumb b { color:var(--tx); }
  .sp { flex:1; }
  select { background-color:var(--surface2); color:var(--tx); } select option { background-color:var(--surface); color:var(--tx); }
  select, input, textarea { font:inherit; padding:7px 9px; border:1px solid var(--border2); border-radius:var(--radius-control); background:var(--surface2); color:var(--tx); }
  .btn { background:var(--pri); color:var(--pri-tx); border:0; border-radius:var(--radius-control); padding:8px 14px; font-weight:700; font-family:var(--font-ui); text-decoration:none; display:inline-block; }
  .btn.sec2 { background:transparent; color:var(--tx); border:1px solid var(--border2); font-weight:600; }
  .btn.sm { padding:5px 10px; font-size:var(--fs-sm); }
  .btn:not([disabled]):hover { filter:brightness(1.08); } .btn.sec2:not([disabled]):hover { filter:none; background:color-mix(in srgb,var(--tx) 8%,transparent); }
  .btn:not([disabled]):active { filter:brightness(.94); }
  .btn[disabled] { opacity:.5; cursor:default; }
  .btn.busy::after { content:" …"; }
  .btn[hidden] { display:none; }

  main { padding:20px; max-width:1100px; width:100%; margin:0 auto; }
  h1 { margin:0 0 4px; font-size:var(--fs-xl); }
  .sub { color:var(--mut); margin:0 0 16px; }
  .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:14px; box-shadow:var(--sh); }
  .card.clicavel { display:block; color:inherit; text-decoration:none; }
  .card.clicavel:hover { border-color:var(--pri); }
  .card .k { color:var(--mut); font-size:var(--fs-sm); }
  .card .v { display:block; font-size:var(--fs-2xl); font-weight:800; margin-top:2px; }
  .card .d { color:var(--mut); font-size:var(--fs-sm); }
  .tool { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
  .tool input[type=search] { flex:1; min-width:180px; }
  .chips { display:flex; gap:6px; flex-wrap:wrap; }
  .chip { background:var(--surface); border:1px solid var(--border2); color:var(--tx); border-radius:999px; padding:5px 12px; font-size:var(--fs-sm); }
  .chip.on { background:var(--info); color:var(--on-solid); border-color:var(--info); font-weight:700; }
  .scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }
  table { width:100%; border-collapse:collapse; }
  th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
  th { color:var(--mut); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; }
  tr:last-child td { border-bottom:0; }
  td input { width:100px; }
  .pill { display:inline-block; border-radius:999px; padding:2px 9px; font-size:var(--fs-sm); font-weight:700; background:var(--surface3); }
  .pill.ok { background:color-mix(in srgb,var(--ok) 22%,transparent); color:var(--ok-tx); }
  .pill.warn { background:color-mix(in srgb,var(--warn) 22%,transparent); color:var(--warn-tx); }
  .pill.bad { background:color-mix(in srgb,var(--bad) 22%,transparent); color:var(--bad-tx); }
  .empty { padding:36px 16px; text-align:center; color:var(--mut); }
  .mut { color:var(--mut); }
  .todo { display:flex; flex-direction:column; gap:8px; }
  .todo .row { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
    border-left:4px solid var(--warn); border-radius:var(--radius-control); padding:10px 14px; flex-wrap:wrap; }
  .row.okrow { border-left-color:var(--ok); }
  .q { padding:12px 14px; border-bottom:1px solid var(--border); }
  .q:last-child { border-bottom:0; }
  .q textarea { width:100%; margin-top:8px; min-height:64px; }
  .help { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-control); padding:10px 14px; margin-bottom:14px; font-size:var(--fs-sm); color:var(--mut); }
  .step { margin:0; padding-left:20px; }
  /* Utilitários de layout (módulos usam estas classes em vez de style=""): espaço, linha flexível, faixa de aviso */
  .mt-1 { margin-top:var(--space-1); } .mt-2 { margin-top:var(--space-2); } .mt-3 { margin-top:var(--space-3); } .mt-4 { margin-top:var(--space-4); }
  .mb-1 { margin-bottom:var(--space-1); } .mb-2 { margin-bottom:var(--space-2); } .mb-3 { margin-bottom:var(--space-3); } .mb-4 { margin-bottom:var(--space-4); } .m-0 { margin:0; }
  .flex { display:flex; } .wrap { flex-wrap:wrap; } .centro { align-items:center; } .entre { justify-content:space-between; }
  .gap-1 { gap:var(--space-1); } .gap-2 { gap:var(--space-2); } .gap-3 { gap:var(--space-3); }
  .faixa-warn { border-left:4px solid var(--warn); } .faixa-ok { border-left:4px solid var(--ok); } .faixa-bad { border-left:4px solid var(--bad); } .campo-estreito { max-width:320px; }
  .field { display:block; margin-bottom:12px; }
  .field input { width:100%; margin-top:4px; }
  details > summary { cursor:pointer; padding-block:5px; min-height:28px; }
  table.prec td { padding:12px; } table.prec td:first-child { min-width:240px; }
  table.prec.sel td:first-child { min-width:0; } table.prec.sel td:nth-child(2) { min-width:240px; }
  .anun { display:flex; gap:10px; align-items:center; } .anun img { width:44px; height:44px; object-fit:contain; border-radius:var(--radius-control); background:#fff; border:1px solid var(--border); flex:none; }
  .prec .cst { width:100px; } .prec tr.open > td { border-bottom:0; }
  .link { background:none; border:0; padding:2px 4px; min-height:24px; color:var(--link); text-decoration:underline; font-size:var(--fs-sm); border-radius:6px; }
  tr.det td { background:var(--surface2); } .conta { display:grid; grid-template-columns:minmax(260px,1.4fr) minmax(180px,1fr); gap:24px; padding:6px 4px; }
  table.mini { width:100%; } table.mini td { padding:4px 0; border:0; } table.mini .num { text-align:right; white-space:nowrap; } table.mini tr.tot td { border-top:1px solid var(--border2); padding-top:8px; }
  .card.alerta { border-color:var(--warn); }
  @media (max-width: 700px) { .conta { grid-template-columns:1fr; } }

  td details { margin-top:4px; font-size:var(--fs-sm); } td details input { width:90px; margin-top:4px; }
  .psteps { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .pstep { display:flex; gap:10px; align-items:flex-start; }
  .pdot { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:var(--fs-sm); color:var(--on-solid); }
  .pstep.ok .pdot { background:var(--ok); } .pstep.no .pdot { background:var(--warn); } .pstep.opt .pdot { background:var(--surface3); color:var(--tx); }
  .copyrow { display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
  .copyrow code { background:var(--surface3); border-radius:var(--radius-control); padding:5px 8px; word-break:break-all; font-size:var(--fs-sm); }
  #toast { position:fixed; right:16px; bottom:16px; background:var(--surface); border:1px solid var(--border2); border-left:4px solid var(--info);
    border-radius:var(--radius-control); padding:10px 16px; box-shadow:var(--sh); max-width:min(380px,90vw); display:none; z-index:40; }
  #toast.bad { border-left-color:var(--bad); }
  #toast.ok { border-left-color:var(--ok); }

  @media (max-width: 860px) {
    .app { grid-template-columns:1fr; }
    aside { position:fixed; z-index:30; left:0; top:0; width:var(--side); transform:translateX(-100%); transition:transform .2s; box-shadow:var(--sh); }
    aside { visibility:hidden; transition:transform .2s, visibility 0s .2s; }
    body.open aside { transform:none; visibility:visible; transition-delay:0s; }
    main { padding:14px 12px; }
    .topbar { padding:0 12px; gap:8px; }
    .topbar #addconta, .topbar #theme, .topbar #logout, .topbar .crumb { display:none; }
    .brand small { display:none; }
    .foot-acoes { display:flex; gap:8px; flex-wrap:wrap; padding:10px; margin-top:auto; } .foot { margin-top:0; }
    aside { top:0; height:100vh; padding-top:12px; z-index:40; }
  }
  .btn.danger { background:var(--danger-bg); color:var(--on-solid); }
  nav#menu-modulos { display:block; }
  .chat { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:340px; overflow:auto; }
  .msg { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:8px 12px; max-width:80%; align-self:flex-start; white-space:pre-wrap; }
  .msg.minha { align-self:flex-end; background:color-mix(in srgb,var(--pri) 18%,var(--surface)); }
  td textarea { width:100%; }
  .gridprod { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
  .prod img { width:100%; height:140px; object-fit:contain; background:#fff; border-radius:var(--radius-control); border:1px solid var(--border); }
  .fotos { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; } .fotos img { width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:var(--radius-control); }
  /* utilitários que substituem estilos inline */
  .chk { display:block; margin:var(--space-2) 0; } .nota { margin:var(--space-2) 0; } .nota-topo { margin:var(--space-1) 0 var(--space-2); }
  .card-medio { max-width:640px; } .card-medio + .card-medio { margin-top:14px; } .col-720 { max-width:720px; } .rolagem-240 { max-height:240px; overflow:auto; }
  .subsecao.compacta { font-size:var(--fs-md); margin:var(--space-4) 0 var(--space-1); } .subsecao.nome-integ { margin:0; }
  .flex-1 { flex:1; min-width:200px; } .negrito { font-weight:600; }
  .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
  label.radio { display:block; padding:4px 0; } label.radio input { width:auto; margin-right:6px; }
  .field textarea, .field select { width:100%; margin-top:4px; }
  .pill { white-space:nowrap; }
  .pill { white-space:nowrap; }

  /* Lista da Precificação */
  table.precos { table-layout:fixed; width:100%; }
  table.precos th, table.precos td { vertical-align:middle; }
  table.precos td.num, table.precos th.num { text-align:right; }
  table.precos tbody tr:not(.det):hover > td { background:color-mix(in srgb,var(--pri) 6%,var(--surface)); }
  table.precos tr[data-sit="prejuizo"] > td:first-child { box-shadow:inset 4px 0 0 var(--bad); }
  table.precos tr[data-sit="abaixo"] > td:first-child { box-shadow:inset 4px 0 0 var(--warn); }
  table.precos tr[data-sit="sem_custo"] > td:first-child { box-shadow:inset 4px 0 0 var(--border2); }
  .precos .anun { gap:12px; } .precos .anun img, .precos .semfoto { width:52px; height:52px; border-radius:var(--radius-control); flex:none; }
  .precos .semfoto { background:var(--surface3); }
  .precos .anun .t { min-width:0; }
  .precos .anun .t a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--tx); font-weight:600; text-decoration:none; line-height:1.3; }
  .precos .anun .t a:hover { color:var(--link); text-decoration:underline; }
  .s { font-size:var(--fs-sm); }
  .cst-box { display:flex; align-items:center; gap:8px; } .cst-box .cst { width:92px; }
  .src { font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--mut); border:1px solid var(--border2); border-radius:999px; padding:1px 7px; white-space:nowrap; }
  .sobra { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .sobra .v { font-size:var(--fs-md); font-family:var(--font-ui); }
  .oktxt { color:var(--ok-tx); } .warntxt { color:var(--warn-tx); } .badtxt { color:var(--bad-tx); }
  .precos .link.ver { display:block; margin:2px 0 0 auto; color:var(--mut); text-decoration:none; font-size:var(--fs-sm); } .precos .link.ver:hover { color:var(--link); text-decoration:underline; }
  .precos .sobra + .s { text-align:right; } .precos .btn.apply { margin-top:6px; }
  @media (max-width: 1150px) { .hide-sm { display:none; } }

  /* Conta aberta de um anúncio */
  .conta2 { display:grid; grid-template-columns:minmax(300px,1.5fr) minmax(220px,1fr); gap:28px; padding:8px 4px; }
  .preco-topo { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-md); } .preco-topo b { font-size:var(--fs-xl); font-family:var(--font-ui); }
  .barra { display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--surface3); margin:8px 0 12px; }
  .seg { height:100%; } .seg.taxa, .dot.taxa { background:var(--c-taxa); } .seg.frete, .dot.frete { background:var(--c-frete); } .seg.imposto, .dot.imposto { background:var(--c-imposto); }
  .seg.embal, .dot.embal { background:var(--c-embal); } .seg.custo, .dot.custo { background:var(--c-custo); } .seg.sobra { background:var(--ok); }
  .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
  .conta2 table.mini td { padding:6px 0; border-bottom:1px solid var(--border); border-radius:0; } .conta2 table.mini tr:last-child td { border-bottom:0; }
  .conta2 table.mini tr.tot td { border-top:1px solid var(--border2); padding-top:8px; } .conta2 > div > p.mut { margin:0 0 8px; }
  .info { cursor:help; color:var(--mut); }
  .resultado { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:12px 14px; border-radius:var(--radius-card); background:color-mix(in srgb,var(--ok) 14%,var(--surface)); }
  .resultado.neg { background:color-mix(in srgb,var(--bad) 14%,var(--surface)); } .resultado b { font-size:var(--fs-lg); font-family:var(--font-ui); }
  .dicaconta { margin-top:12px; padding:10px 14px; border:1px dashed var(--border2); border-radius:var(--radius-card); font-size:var(--fs-md); line-height:1.6; } .dicaconta .btn { margin-left:8px; }
  .ajustes { padding:14px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); align-self:start; }
  .money { display:flex; align-items:center; margin-top:4px; } .money i { font-style:normal; padding:7px 10px; border:1px solid var(--border2); border-right:0; border-radius:var(--radius-control) 0 0 var(--radius-control); background:var(--surface3); color:var(--mut); }
  .money input { margin-top:0; width:100%; border-radius:0 var(--radius-control) var(--radius-control) 0; }
  @media (max-width: 760px) { .conta2 { grid-template-columns:1fr; } }

  /* ===== Acessibilidade e utilidades ===== */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip { position:absolute; left:8px; top:-48px; z-index:100; background:var(--pri); color:var(--pri-tx); padding:10px 16px; border-radius:var(--radius-control); font-weight:700; text-decoration:none; }
  .skip:focus { top:8px; }
  main:focus, h1:focus { outline:none; } body.teclado main:focus-visible, body.teclado h1:focus-visible { outline:2px solid var(--focus); outline-offset:2px; } /* título focado por código: sem anel para quem usa mouse */
  .info { cursor:help; border-radius:50%; }
  /* carregando */
  .carregando { display:flex; align-items:center; gap:12px; padding:28px 4px; color:var(--mut); }
  .spin { width:20px; height:20px; border:3px solid var(--border2); border-top-color:var(--pri); border-radius:50%; animation:giro .8s linear infinite; flex:none; }
  @keyframes giro { to { transform:rotate(360deg); } }
  /* confirmação (substitui o confirm() do navegador, para dizer exatamente o que o botão faz) */
  dialog.confirma { border:1px solid var(--border2); border-radius:var(--radius-panel); background:var(--surface); color:var(--tx); padding:var(--dlg-pad, 22px); max-width:min(460px,92vw); box-shadow:var(--sh); }
  dialog.confirma::backdrop { background:rgba(8,12,20,.55); }
  dialog.confirma h2 { margin:0 0 8px; font-size:var(--fs-lg); font-family:var(--font-ui); }
  dialog.confirma p { margin:0 0 18px; color:var(--mut); white-space:pre-line; }
  dialog.confirma .acoes { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  /* atalhos do Início */
  .atalhos { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:8px; }
  .atalho { display:block; padding:14px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); color:var(--tx); text-decoration:none; }
  .atalho:hover { border-color:var(--pri); } .atalho b { display:block; font-family:var(--font-ui); } .atalho span { color:var(--mut); font-size:var(--fs-sm); }
  h2.secao { font-size:var(--fs-md); margin:22px 0 8px; font-family:var(--font-ui); }
  /* salvar só quando há o que salvar */
  .btn.save[disabled] { background:transparent; color:var(--mut); border:1px solid var(--border2); opacity:1; }
  /* links de título nas tabelas: sem sublinhado pesado */
  .anun a { color:var(--tx); font-weight:600; text-decoration:none; } .anun a:hover { color:var(--link); text-decoration:underline; }
  table th { text-align:left; }
  tbody tr:hover > td { background:color-mix(in srgb,var(--pri) 5%,var(--surface)); } tr.det:hover > td { background:var(--surface2); }
  /* telas de toque: alvos de 44px */
  @media (pointer: coarse) { .btn, .chip, .nav, select, input:not([type=checkbox]):not([type=radio]), .link, #menu, .brand, .sec-t, summary, .mail-item { min-height:44px; } .btn.sm { padding:8px 12px; } }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

  /* Minha loja */
  .lojacab { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
  .avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--pri); color:var(--pri-tx); display:grid; place-items:center; font:800 var(--fs-xl) var(--font-ui); flex:none; }
  .lojanome { font:800 var(--fs-xl) var(--font-ui); }
  .loja-sec { margin-top:6px; }
  .sitgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
  .sitem { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); }
  .sitem.ok .pdot { background:var(--ok); } .sitem.no .pdot { background:var(--warn); } .sitem.no { border-color:var(--warn); }
  table.cad th { text-align:left; font-weight:600; color:var(--mut); font-family:inherit; text-transform:none; letter-spacing:0; font-size:var(--fs-sm); width:34%; padding:6px 12px 6px 0; }
  table.cad td { padding:6px 0; }
  td.num, th.num { text-align:right; }
  table.mini.cad td { border-bottom:1px solid var(--border); } table.mini.cad tr:last-child th, table.mini.cad tr:last-child td { border-bottom:0; }
  .subsecao { font:700 var(--fs-md) var(--font-ui); margin:16px 0 8px; } .empresas { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
  .lista-av { margin:0 0 16px; padding-left:20px; color:var(--mut); font-size:var(--fs-sm); max-height:200px; overflow:auto; }
  /* Ações em lote */
  dialog.confirma.larga { max-width:min(760px,94vw); width:min(760px,94vw); }
  dialog.confirma .field input, dialog.confirma .field select { width:100%; margin-top:4px; }
  .barra-sel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; margin-bottom:10px; border:1px solid var(--pri); border-radius:var(--radius-card); background:color-mix(in srgb,var(--pri) 12%,var(--surface)); }
  td.acoes-linha { white-space:nowrap; } td.acoes-linha .btn { margin:2px 0; }
  input[type=checkbox] { width:18px; height:18px; accent-color:var(--pri); cursor:pointer; padding:0; }
  fieldset.auto { border:1px solid var(--border2); border-radius:var(--radius-card); padding:10px 14px; margin:10px 0; } fieldset.auto legend { padding:0 6px; }
  .fotos-ed { margin-top:14px; } .fotos-ed .fotos { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
  .fotos-ed figure { margin:0; text-align:center; } .fotos-ed figure img { width:84px; height:84px; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:var(--radius-control); display:block; }
  .fotos-ed figure:first-child img { outline:3px solid var(--pri); outline-offset:1px; } .fotos-ed figcaption { display:flex; justify-content:center; gap:2px; }
  table.largo:not(.wd-pedidos-tabela) td:nth-child(3) { min-width:240px; } table.largo td.num, table.largo th.num { white-space:nowrap; }
  .empty .dica-vazio { margin-top:6px; font-size:var(--fs-sm); } .empty { padding:28px 16px; }
  .sec-t { padding-top:6px; padding-bottom:6px; }

  .tool input[type=search] { min-width:260px; }
  .fotos-ed figcaption .link { min-width:28px; min-height:28px; }
  /* Tabelas viram cartões em tela pequena */
  @media (max-width: 700px) {
    table.resp colgroup, table.resp .cab { display:none; }
    table.resp, table.resp tbody { display:block; }
    table.resp tr { display:block; padding:8px 4px; border-bottom:1px solid var(--border); }
    table.resp td { display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:4px 8px; text-align:right; min-width:0 !important; }
    table.resp td::before { content:attr(data-label); font-weight:600; color:var(--mut); font-size:var(--fs-sm); text-align:left; flex:none; }
    table.resp td[data-label=""]::before { content:none; }
    table.resp td:first-child { justify-content:flex-start; text-align:left; }
    table.resp tr.det td, table.resp td[colspan] { display:block; text-align:left; }
    table.resp td .anun { text-align:left; }
    table.resp td.acoes-linha { justify-content:flex-end; flex-wrap:wrap; }
    .tool input[type=search] { min-width:100%; }
    .conta, .conta2 { grid-template-columns:1fr; }
    /* lista com caixinha de seleção: a caixinha fica no canto do cartão, sem ocupar uma linha */
    table.resp.sel tr { position:relative; }
    table.resp.sel tr:not(.det) > td:first-child { position:absolute; top:12px; left:6px; padding:0; }
    table.resp.sel td:nth-child(2) { padding-left:40px; justify-content:flex-start; text-align:left; }
    table.resp.sel td:nth-child(2)::before { content:none; }
  }

  /* Lista + painel de leitura (Pedidos, Perguntas, Mensagens) */
  main:has(.mail) { max-width:1400px; }
  .mail { display:grid; grid-template-columns:minmax(300px,380px) 1fr; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; height:max(460px, calc(100vh - 270px)); }
  .mail-list { overflow:auto; border-right:1px solid var(--border); }
  .mail-list .empty { padding:28px 16px; }
  .mail-item { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); padding:11px 14px 11px 16px; color:var(--tx); position:relative; font:inherit; }
  .mail-item:hover { background:var(--surface2); }
  .mail-item.on { background:color-mix(in srgb,var(--info) 12%,var(--surface)); box-shadow:inset 3px 0 0 var(--info); }
  .mi-topo { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .mi-topo b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mi-topo .mut { font-size:var(--fs-sm); white-space:nowrap; }
  .mi-txt { color:var(--mut); font-size:var(--fs-sm); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .mail-item.novo .mi-topo b { font-weight:800; } .mail-item.novo::after { content:""; position:absolute; right:12px; bottom:14px; width:9px; height:9px; border-radius:50%; background:var(--info); }
  .mail-read { overflow:auto; padding:20px 24px; } .mail-read:focus { outline:none; } .mail-read:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .mail-t { margin:0 0 4px; font:700 var(--fs-lg) var(--font-ui); overflow-wrap:anywhere; }
  .mail-vazio { height:100%; display:grid; place-items:center; text-align:center; color:var(--mut); padding:20px; }
  .mail-read textarea { width:100%; min-height:110px; margin:14px 0 8px; } .mail-read .resp-box { margin-top:12px; padding:12px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-card); white-space:pre-wrap; }
  .voltar { display:none; margin-bottom:12px; }
  @media (max-width: 860px) {
    .mail { grid-template-columns:1fr; height:auto; min-height:300px; } .mail-list { border-right:0; max-height:none; }
    .mail-read { display:none; padding:16px; } .mail.lendo .mail-list { display:none; } .mail.lendo .mail-read { display:block; }
    .voltar { display:inline-block; }
  }

  /* ===== Web Interface Guidelines (Vercel) ===== */
  :root { color-scheme:light; } :root[data-theme="dark"] { color-scheme:dark; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; } }
  a, button, summary, select, label, .chip, .mail-item { touch-action:manipulation; -webkit-tap-highlight-color:rgba(0,0,0,0); }
  /* .scroll fica de fora: tabela curta dentro dele prendia a roda do mouse e a página não descia (19/10/2026) */
  dialog, aside, .lista-av { overscroll-behavior:contain; }
  td.num, th.num, .card .v, table.mini .num, .preco-topo b, .sobra .v, .mi-topo, .resultado b { font-variant-numeric:tabular-nums; }
  h1, h2, .mail-t { text-wrap:balance; }
  .mi-topo b { min-width:0; }

  /* Menu: ícones, busca e modo recolhido */
  .nav .ico { flex:none; opacity:.85; } .nav.on .ico, .nav:hover .ico { opacity:1; }
  .nav-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-subtitulo { padding:var(--space-3) var(--space-3) var(--space-1); font-size:var(--fs-xs); font-weight:600; opacity:.75; }
  .nav-subgrupo[hidden], body.compacto .nav-subtitulo { display:none; }
  @media (max-width:860px) { body.compacto .nav-subtitulo { display:block; } }
  .nav[hidden], .sec[hidden] { display:none; }
  .busca-menu { padding:2px 2px 10px; } .busca-menu input { width:100%; font-size:var(--fs-sm); padding:7px 10px; }
  body.compacto { --side:64px; }
  body.compacto aside { padding:12px 8px; }
  body.compacto .busca-menu, body.compacto .sec-t, body.compacto .foot, body.compacto .foot-acoes { display:none; }
  body.compacto .nav-t { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; flex:none; } /* o nome continua para leitores de tela */
  body.compacto .sec.closed .sec-i { display:block; }
  body.compacto .sec + .sec { border-top:1px solid var(--border); margin-top:6px; padding-top:6px; }
  body.compacto .nav { justify-content:center; padding:9px 0; position:relative; box-shadow:none; }
  body.compacto .nav.on { box-shadow:inset 3px 0 0 var(--info); }
  body.compacto .nav .badge { position:absolute; top:2px; right:4px; padding:0 5px; font-size:.65rem; }
  @media (max-width: 860px) { body.compacto { --side:248px; } body.compacto .busca-menu, body.compacto .sec-t, body.compacto .foot, body.compacto .foot-acoes { display:revert; } body.compacto .nav-t { position:static; width:auto; height:auto; clip:auto; flex:1; } body.compacto .nav { justify-content:flex-start; padding:6px 10px; } }

/* Caminho da loja: as etapas quebram em linhas no celular. */
.fluxo-loja { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px; }
.fluxo-loja .card { min-width:0; }
@media (max-width: 860px) {
  aside { top:var(--bar-h); height:calc(100vh - var(--bar-h)); }
  .topbar > .sp { display:none; }
  .topbar #acc { flex:1; width:0; min-width:0; }
  .topbar #sync { flex:none; }
}
  /* Áreas seguras (notch) em celulares em paisagem: viewport-fit=cover está ligado */
  @supports (padding: max(0px)) { .topbar { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); } aside { padding-left:max(10px, env(safe-area-inset-left)); } }

/* campos com 16px em tela de toque: o iOS não dá zoom ao focar */
@media (pointer:coarse) { select, input, textarea { font-size:max(16px,1em); } }


/* celular: o nome da loja cabe no topo, o menu aberto escurece o fundo e o último cartão ímpar ocupa a linha */
@media (max-width: 600px) {
  .topbar .brand > span { display:none; }
  .fluxo-loja .card:last-child:nth-child(odd) { grid-column:1 / -1; }
}
@media (max-width: 860px) {
  body.open::after { content:""; position:fixed; inset:var(--bar-h) 0 0 0; background:rgba(0,0,0,.4); z-index:25; }
}

.chip:hover:not(.on) { background:var(--surface2); border-color:var(--link); }
.link:hover { text-decoration-thickness:2px; }
html { scroll-padding-top:calc(var(--bar-h) + 12px); }

::placeholder { color:var(--mut); opacity:1; }

.info { position:relative; }
.info:focus::after { content:attr(title); position:absolute; left:0; top:100%; z-index:20; min-width:180px; max-width:260px; padding:6px 8px; background:var(--surface2); color:var(--tx); border:1px solid var(--mut); border-radius:6px; font-size:var(--fs-sm); white-space:normal; }

.msg, .resp-box { overflow-wrap:anywhere; }

main { padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); }
#toast { right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); }

b, code, .pstep > div { overflow-wrap:break-word; min-width:0; }
td b, td.num { overflow-wrap:normal; }

table.mini .pill { white-space:normal; }

/* Painel Hoje: hierarquia, densidade e estados sem alterar os demais módulos. */
main:has(.inicio-painel) { max-width:1440px; }
.inicio-painel .sub { margin-bottom:var(--space-3); }
.inicio-sec-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:var(--space-1) var(--space-3); }
.inicio-painel h2.secao { margin:var(--space-4) 0 var(--space-2); font-size:var(--fs-md); }
.inicio-contexto { color:var(--mut); font-size:var(--fs-sm); }
.inicio-painel .todo { gap:var(--space-2); }
.inicio-painel .todo .row { min-height:54px; padding:var(--space-2) var(--space-3); background:color-mix(in srgb,var(--warn) 5%,var(--surface)); }
.inicio-painel .todo .row.okrow { background:color-mix(in srgb,var(--ok) 5%,var(--surface)); }
.inicio-painel .todo .row > span { flex:1; min-width:180px; }
.inicio-painel .fluxo-loja { grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); margin-bottom:var(--space-3); }
.inicio-painel .fluxo-loja .card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:132px; padding:var(--space-4); gap:var(--space-2); }
.inicio-painel .card, .inicio-painel .atalho { box-shadow:none; }
.inicio-painel .card .k { color:var(--mut); font-weight:600; }
.inicio-painel .fluxo-loja .card .v { margin-top:0; line-height:1.15; }
.inicio-painel .fluxo-loja .card .d { line-height:1.35; overflow-wrap:anywhere; }
.inicio-painel .card.clicavel:hover, .inicio-painel .atalho:hover { border-color:var(--link); background:var(--surface2); }
.inicio-painel .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-bottom:var(--space-2); }
.inicio-painel .cards .card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-content:center; column-gap:var(--space-3); row-gap:var(--space-1); min-height:80px; padding:var(--space-3) var(--space-4); }
.inicio-painel .cards .card .k { grid-column:1; grid-row:1; }
.inicio-painel .cards .card .v { grid-column:2; grid-row:1 / 3; align-self:center; font-size:var(--fs-lg); margin:0; line-height:1.2; text-align:right; }
.inicio-painel .cards .card .d { grid-column:1; grid-row:2; line-height:1.3; }
.inicio-painel .atalhos { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); margin-top:0; }
.inicio-painel .atalho { display:flex; flex-direction:column; justify-content:center; gap:var(--space-1); min-height:76px; padding:var(--space-3) var(--space-4); }
.inicio-painel .atalho b { font-size:var(--fs-sm); }
.inicio-painel .atalho span { line-height:1.3; }
@media (max-width:1230px) {
  .inicio-painel .fluxo-loja { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .inicio-painel .atalhos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .inicio-painel .fluxo-loja { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inicio-painel .cards { grid-template-columns:1fr; }
  .inicio-painel .fluxo-loja .card { min-height:118px; padding:var(--space-3); }
  .inicio-painel .fluxo-loja .card .v { font-size:var(--fs-xl); }
  .inicio-painel .atalho { min-height:70px; padding:var(--space-3); }
}
@media (max-width:360px) {
  .inicio-painel .fluxo-loja, .inicio-painel .atalhos { grid-template-columns:1fr; }
  .inicio-painel .fluxo-loja .card { min-height:auto; }
}

/* Nova composição visual da página Hoje: revisão 10/10. */
main:has(.inicio-painel) { padding-top:var(--space-5); }
.inicio-heroi {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:linear-gradient(110deg,color-mix(in srgb,var(--info) 12%,var(--surface)),var(--surface));
  border:1px solid var(--border); border-left:4px solid var(--pri);
  border-radius:var(--radius-panel); padding:var(--space-4) var(--space-5);
}
.inicio-heroi-texto { min-width:0; }
.inicio-kicker { display:block; color:var(--link); text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-xs); font-weight:800; margin-bottom:var(--space-1); }
.inicio-painel .inicio-heroi h1 { font-size:var(--fs-2xl); line-height:1.2; margin-bottom:var(--space-1); }
.inicio-painel .inicio-heroi .sub { margin:0; }
.inicio-heroi-acao { white-space:nowrap; flex:none; }
.inicio-painel .inicio-sec-head { border-bottom:1px solid var(--border); padding-bottom:var(--space-2); margin-top:var(--space-3); }
.inicio-painel .inicio-sec-head h2.secao { margin:0; font-size:var(--fs-md); }
.inicio-painel .todo { margin-top:var(--space-3); margin-bottom:var(--space-5); }
.inicio-painel .todo .row { box-shadow:none; }
.inicio-painel .fluxo-loja { margin-top:var(--space-3); }
.inicio-painel .fluxo-loja .card {
  position:relative; overflow:hidden; border-top:3px solid var(--info);
  background:linear-gradient(180deg,var(--surface2),var(--surface));
}
.inicio-painel .fluxo-loja .card::after {
  content:"↗"; position:absolute; right:var(--space-3); top:var(--space-3);
  color:var(--mut); font-size:var(--fs-md); line-height:1;
}
.inicio-painel .fluxo-loja .card:last-child {
  border-top-color:var(--pri); background:color-mix(in srgb,var(--pri) 6%,var(--surface));
}
.inicio-painel .fluxo-loja .card .k { color:var(--tx); }
.inicio-painel .fluxo-loja .card .v { font-size:var(--fs-2xl); }
.inicio-painel .fluxo-loja .card .d { margin-top:auto; }
.inicio-painel .cards .card { border-left:3px solid var(--border2); }
.inicio-painel .atalho { position:relative; border-color:var(--border); padding-right:var(--space-5); }
.inicio-painel .atalho::after { content:"↗"; position:absolute; right:var(--space-3); top:var(--space-3); color:var(--mut); }
.inicio-painel .atalho b { color:var(--tx); }
.inicio-painel .card.clicavel:focus-visible,.inicio-painel .atalho:focus-visible,.inicio-heroi-acao:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (max-width:700px) {
  main:has(.inicio-painel) { padding-top:var(--space-3); }
  .inicio-heroi { align-items:flex-start; flex-direction:column; padding:var(--space-3); gap:var(--space-3); }
  .inicio-heroi-acao { white-space:normal; }
  .inicio-painel .inicio-heroi h1 { font-size:var(--fs-xl); }
  .inicio-painel .inicio-sec-head { align-items:flex-start; }
  .inicio-painel .inicio-contexto { max-width:100%; }
  .inicio-painel .fluxo-loja .card .v { font-size:var(--fs-xl); }
}

/* Revisão transversal de apresentação: aplica-se às telas, exceto ao portal Hoje. */
main:not(:has(.inicio-painel)) { max-width:1440px; padding-top:var(--space-5); }
.pagina-cabecalho { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4); border:1px solid var(--border); border-left:4px solid var(--info); border-radius:var(--radius-panel); background:linear-gradient(105deg,color-mix(in srgb,var(--info) 9%,var(--surface)),var(--surface)); }
.pagina-cabecalho-texto { min-width:0; }
.pagina-cabecalho h1 { margin:0 0 var(--space-1); font-size:var(--fs-2xl); line-height:1.25; }
.pagina-cabecalho .sub { margin:0; max-width:80ch; line-height:1.5; }
main:not(:has(.inicio-painel)) > .cards, main:not(:has(.inicio-painel)) > .grid2 { gap:var(--space-3); }
main:not(:has(.inicio-painel)) .cards > .card { border-top:3px solid var(--info); padding:var(--space-4); box-shadow:none; min-width:0; }
main:not(:has(.inicio-painel)) .cards > .card .v { line-height:1.2; margin:var(--space-2) 0 var(--space-1); }
main:not(:has(.inicio-painel)) .cards > .card .d { line-height:1.4; }
main:not(:has(.inicio-painel)) .card:not(.clicavel) { box-shadow:none; }
main:not(:has(.inicio-painel)) h2.secao { padding-bottom:var(--space-2); border-bottom:1px solid var(--border); }
main:not(:has(.inicio-painel)) .tool { padding:var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); gap:var(--space-2); }
main:not(:has(.inicio-painel)) .tool input[type=search] { flex:1 1 230px; width:auto; }
main:not(:has(.inicio-painel)) .empty { background:var(--surface); border:1px dashed var(--border2); border-radius:var(--radius-card); padding:var(--space-6) var(--space-4); max-width:100%; line-height:1.55; }
main:not(:has(.inicio-painel)) .empty > div:first-child { color:var(--tx); font-weight:600; }
main:not(:has(.inicio-painel)) .empty .dica-vazio { margin-top:var(--space-2); font-weight:400; color:var(--mut); }
main:not(:has(.inicio-painel)) .mail .empty { margin:var(--space-3); padding:var(--space-5) var(--space-3); }
main:not(:has(.inicio-painel)) .mail { box-shadow:none; }
main:not(:has(.inicio-painel)) .scroll { box-shadow:none; }
main:not(:has(.inicio-painel)) .help { line-height:1.5; }
main:not(:has(.inicio-painel)) .card.clicavel:hover { border-color:var(--link); background:var(--surface2); }
@media (max-width:860px) {
 main:not(:has(.inicio-painel)) { padding:var(--space-3); }
 .pagina-cabecalho { padding:var(--space-3) var(--space-4); }
 .pagina-cabecalho h1 { font-size:var(--fs-xl); }
 main:not(:has(.inicio-painel)) .tool { padding:var(--space-2); }
}
@media (max-width:390px) {
 .pagina-cabecalho { padding:var(--space-3); }
 main:not(:has(.inicio-painel)) .tool .chips { width:100%; }
}

/* Compras no fornecedor: filtros sem disputar espaço com rastreios longos. */
.wd-pedidos .cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); margin-bottom:var(--space-4); }
.wd-pedidos .cards .card { min-width:0; }
.wd-pedidos .cards .v { overflow-wrap:anywhere; }
.wd-toolbar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-3); margin-bottom:var(--space-3); }
/* resumo de compras: rótulo pequeno acima do número, sem cartões */
.resumo-numeros { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-3); margin:var(--space-3) 0 0; }
.resumo-numeros > div { display:flex; flex-direction:column; gap:var(--space-1); padding-left:var(--space-3); border-left:3px solid var(--border); }
.resumo-numeros dt { color:var(--mut); font-size:var(--fs-sm); }
.resumo-numeros dd { margin:0; font:700 var(--fs-xl) var(--font-ui); color:var(--tx); }
.resumo-numeros dd .mut { font:600 var(--fs-md) var(--font-ui); }
.wd-busca { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.wd-busca input[type=search] { flex:1 1 260px; min-width:0; }
.wd-busca .btn { margin-left:auto; white-space:nowrap; }
.wd-filtros { display:grid; grid-template-columns:minmax(240px,auto) minmax(0,1fr); gap:var(--space-3); }
.wd-filtro-grupo { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:var(--space-1); }
.wd-filtro-titulo { color:var(--mut); font-size:var(--fs-xs); font-weight:700; }
.wd-filtro-grupo .chips { gap:var(--space-1); min-width:0; }
.wd-filtro-grupo .chip { white-space:nowrap; }
.wd-paginacao { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); padding:0 0 var(--space-2); }
.wd-paginacao-acoes { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.wd-dica-scroll { color:var(--mut); margin:0 0 var(--space-2); font-size:var(--fs-sm); }
.wd-lista { max-width:100%; overflow-x:auto; }
.wd-pedidos-tabela { width:100%; min-width:964px; }
.wd-pedidos-tabela th,.wd-pedidos-tabela td { padding:var(--space-3); }
.wd-pedidos-tabela td[data-label="Produtos"] { min-width:205px; max-width:340px; overflow-wrap:anywhere; }
table.largo.wd-pedidos-tabela td:nth-child(3) { min-width:0; }
.wd-pedidos-tabela td:last-child { min-width:0; }
.wd-pedidos-tabela td:last-child code { display:block; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
.wd-rastreio { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); min-width:0; max-width:100%; }
.wd-pedidos-tabela td:last-child .copy { display:inline-flex; align-items:center; margin:0; }
@media (max-width:1200px) {
 .wd-pedidos .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .wd-filtros { grid-template-columns:1fr; gap:var(--space-2); }
}
@media (max-width:700px) {
 .wd-toolbar { padding:var(--space-3); }
 .wd-busca { align-items:stretch; }
 .wd-busca input[type=search] { flex-basis:100%; }
 .wd-busca .btn { margin-left:0; }
 .wd-pedidos .cards .card { padding:var(--space-3); }
 .wd-pedidos .cards .v { font-size:var(--fs-lg); }
 .wd-paginacao { align-items:flex-start; flex-direction:column; }
 .wd-dica-scroll { display:none; }
 .wd-lista { overflow-x:hidden; }
 .wd-pedidos-tabela { min-width:0; width:100%; }
 .wd-pedidos-tabela.resp tr { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-control); margin-bottom:var(--space-2); padding:var(--space-2); }
 .wd-pedidos-tabela.resp td { min-width:0; max-width:none; }
 .wd-pedidos-tabela.resp td:first-child { display:block; text-align:left; }
 .wd-pedidos-tabela.resp td:first-child::before { content:"Pedido"; display:block; }
 .wd-pedidos-tabela.resp td[data-label="Produtos"] { display:block; text-align:left; }
 .wd-pedidos-tabela.resp td[data-label="Produtos"]::before { display:block; }
 .wd-pedidos-tabela.resp td:last-child { flex-wrap:wrap; }
}
@media (max-width:360px) {
 .wd-pedidos .cards { grid-template-columns:1fr; }
}

/* Arquitetura de uso por módulo: finalidade, tarefa e padrão operacional. */
.pagina-cabecalho:has(.ux-orientacao) { align-items:stretch; flex-wrap:wrap; column-gap:var(--space-5); }
.pagina-cabecalho-texto { flex:1 1 300px; }
.ux-categoria { display:block; color:var(--link); font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-1); }
.ux-orientacao { flex:0 1 355px; min-width:0; align-self:center; border-left:1px solid var(--border2); padding-left:var(--space-4); }
.ux-rotulo { color:var(--mut); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ux-tarefa { margin:var(--space-1) 0 0; color:var(--tx); font-size:var(--fs-sm); line-height:1.45; }
.ux-atalho { margin-top:var(--space-2); }
#view[data-tipo-ux="atendimento"] .mail { min-height:360px; }
#view[data-tipo-ux="analise"] > .cards .card,
#view[data-tipo-ux="analise"] .cards > .card { border-top-color:var(--link); }
#view[data-tipo-ux="seguranca"] .pagina-cabecalho { border-left-color:var(--warn); }
#view[data-tipo-ux="atendimento"] .pagina-cabecalho { border-left-color:var(--ok); }
#view[data-tipo-ux="operacao"] .pagina-cabecalho { border-left-color:var(--pri); }
@media (max-width:1020px) {
 .ux-orientacao { flex:1 1 100%; border-left:0; border-top:1px solid var(--border); padding:var(--space-3) 0 0; }
}

/* Menu lateral JF Eletro — navegação moderna, consistente entre módulos.
   Grupos orientam, links executam; apenas a página ativa recebe destaque. */
#side {
  border-right:1px solid color-mix(in srgb,var(--side-tx) 11%,transparent);
  padding:14px 10px 10px;
  font-family:var(--font-ui);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--side-mut) 30%,transparent) transparent;
}
#side .busca-menu {
  position:sticky;
  top:-14px;
  z-index:3;
  margin:0;
  padding:0 0 14px;
  background:var(--side-bg);
}
#side .busca-menu input {
  width:100%;
  height:41px;
  padding:0 13px;
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--side-tx);
  background:color-mix(in srgb,var(--side-tx) 4%,var(--side-bg));
  border:1px solid color-mix(in srgb,var(--side-mut) 30%,transparent);
  border-radius:var(--radius-control);
  box-shadow:none;
}
#side .busca-menu input:focus-visible {
  border-color:var(--info);
  outline:3px solid var(--focus);
  outline-offset:2px;
}
#side .menu-resultado { padding:5px 10px 11px; font-size:var(--fs-xs); color:var(--side-mut); }
#side .menu-resultado[hidden] { display:none; }
#side #menu-modulos { display:block; }
#side .sec { margin:0 0 3px; }
#side .sec-t {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  height:37px;
  min-height:37px;
  padding:0 12px;
  border:0;
  border-radius:var(--radius-control);
  background:transparent;
  color:var(--side-mut);
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.065em;
  font-family:inherit;
  font-size:var(--fs-xs);
  font-weight:750;
}
#side .sec-t::after { content:none; }
#side .sec-t:hover { background:color-mix(in srgb,var(--side-tx) 5%,transparent); color:var(--side-tx); }
#side .sec:not(.closed) > .sec-t { background:transparent; color:var(--side-tx); }
#side .sec:not(.closed) > .sec-t:hover { background:color-mix(in srgb,var(--side-tx) 5%,transparent); }
#side .sec-name { flex:1; min-width:0; font:inherit; }
#side .sec-seta {
  display:block;
  width:7px;
  height:7px;
  flex:none;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .16s;
  font-size:0;
  opacity:.8;
}
#side .sec:not(.closed) .sec-seta { transform:rotate(45deg); }
#side .sec.closed > .sec-i { display:none; }
#side .sec-i { margin:0; padding:0 0 7px 4px; border:0; }
#side .nav-item { display:block; margin:1px 0; }
#side .nav-item > .nav,
#side .sec.solo > .nav {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:39px;
  margin:0;
  padding:8px 11px;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  box-shadow:none;
  color:var(--side-tx);
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.25;
  text-align:left;
  background:transparent;
  transition:background .13s, border-color .13s, color .13s;
}
#side .nav-item > .nav:hover,
#side .sec.solo > .nav:hover { background:color-mix(in srgb,var(--side-tx) 7%,transparent); }
#side .nav .ico { flex:none; width:17px; height:17px; stroke-width:1.85; opacity:.78; }
#side .nav-t { flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25; } /* nomes longos ("Mercado Livre › Disponibilidade") quebram em duas linhas em vez de cortar */
#side .nav.on, #side .nav[aria-current="page"] {
  background:color-mix(in srgb,var(--info) 16%,var(--side-bg));
  border-color:color-mix(in srgb,var(--info) 19%,transparent);
  color:var(--side-tx);
  font-weight:700;
  box-shadow:none;
}
#side .nav.on::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--info);
}
#side .nav.on .ico { opacity:1; color:var(--info); }
#side .sec.solo { margin:0 0 13px; padding:0 0 12px; border-bottom:1px solid color-mix(in srgb,var(--side-tx) 10%,transparent); }
#side .sec.solo > .nav { min-height:42px; }
#side .sec.solo > .nav.on::before { top:11px; bottom:11px; }
#side .foot {
  margin-top:auto;
  padding:15px 11px 7px;
  border-top:1px solid color-mix(in srgb,var(--side-tx) 10%,transparent);
  color:var(--side-mut);
  font-family:inherit;
  font-size:var(--fs-xs);
}
#side .nav[hidden], #side .sec[hidden], #side .nav-item[hidden] { display:none!important; }
#side a:focus-visible, #side button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* Modo compacto mantém os ícones das páginas sem mostrar grupos vazios. */
body.compacto #side { padding:12px 7px; }
body.compacto #side .sec.solo { padding-bottom:6px; margin-bottom:8px; }
body.compacto #side .sec-i { margin:0; padding:0; }
body.compacto #side .sec.closed .sec-i { display:block; }
body.compacto #side .sec-t, body.compacto #side .busca-menu, body.compacto #side .foot { display:none; }
body.compacto #side .nav-item > .nav, body.compacto #side .sec.solo > .nav {
  width:100%;
  justify-content:center;
  min-height:42px;
  padding:9px 0;
}
body.compacto #side .nav-t { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; flex:none; }
@media (max-width:860px) {
  #side { top:var(--bar-h); height:calc(100vh - var(--bar-h)); }
  #side .nav-item > .nav { min-height:42px; }
  body.compacto #side { padding:14px 10px 10px; }
  body.compacto #side .busca-menu, body.compacto #side .foot { display:block; }
  body.compacto #side .sec-t { display:flex; }
  body.compacto #side .sec.closed .sec-i { display:none; }
  body.compacto #side .sec-i { padding:0 0 7px 4px; }
  body.compacto #side .nav-t { position:static; width:auto; height:auto; clip:auto; flex:1; }
  body.compacto #side .nav-item > .nav, body.compacto #side .sec.solo > .nav { justify-content:flex-start; padding:8px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  #side .sec-seta, #side .nav-item > .nav, #side .sec.solo > .nav { transition:none; }
}

/* Cabeçalho JF Eletro: navegação, contexto e ações em níveis claros. */
:root { --bar-h:68px; }
.topbar {
  position:sticky; top:0; z-index:25;
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) auto;
  align-items:center;
  column-gap:clamp(16px,2.3vw,34px);
  height:var(--bar-h);
  padding:0 22px;
  background:linear-gradient(110deg,var(--bar) 0%,var(--bar-2) 65%,var(--bar) 100%);
  border-bottom:1px solid rgba(185,207,229,.12);
  box-shadow:0 2px 16px rgba(4,15,27,.11);
  color:var(--bar-tx);
}
.topbar-identidade, .topbar-acoes { display:flex; align-items:center; min-width:0; }
.topbar-identidade { gap:13px; }
.topbar #menu {
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  padding:0; color:var(--bar-tx2); background:rgba(255,255,255,.045);
  border:1px solid rgba(221,236,250,.14); border-radius:var(--radius-control);
}
.topbar #menu:hover { background:rgba(255,255,255,.11); border-color:rgba(221,236,250,.25); }
.topbar .brand { gap:10px; min-width:0; padding:0; letter-spacing:-.025em; font-size:16px; font-weight:800; line-height:1.2; }
.topbar .brand img { width:37px; height:37px; }
.topbar .brand small { margin-top:3px; color:#a7bbcf; font:500 var(--fs-xs)/1.1 var(--font-ui); letter-spacing:0; }
.topbar-pagina {
  display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding-left:22px; border-left:1px solid rgba(205,222,238,.15);
}
.topbar-eyebrow { font:650 var(--fs-xs)/1.2 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; color:#99b4ce; margin-bottom:4px; }
.topbar .crumb { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 var(--fs-sm)/1.2 var(--font-ui); color:#c2d5e6; }
.topbar .crumb b { color:var(--bar-tx); font-weight:750; }
.topbar-acoes { justify-content:flex-end; gap:9px; }
.topbar-conta {
  display:flex; flex-direction:column; justify-content:center; min-width:152px;
  height:42px; gap:1px; padding:4px 11px 3px;
  border-radius:var(--radius-control); border:1px solid rgba(216,231,245,.19);
  background:rgba(255,255,255,.055);
}
.topbar-conta:has(#acc[hidden]) { display:none; }
.topbar-conta > span { font:650 var(--fs-xs)/1.05 var(--font-ui); text-transform:uppercase; letter-spacing:.065em; color:#a5bfd6; }
.topbar #acc {
  width:100%; min-width:0; height:21px; padding:0 16px 0 0;
  border:0; border-radius:0; background:transparent; color:var(--bar-tx);
  font:650 var(--fs-xs)/1.25 var(--font-ui); text-overflow:ellipsis; cursor:pointer;
}
.topbar #acc:focus-visible { outline:2px solid #a7d8fb; outline-offset:3px; }
.topbar #acc option { background:#142c43; color:#fff; }
.topbar #sync {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; min-width:127px; padding:0 15px;
  color:var(--bar-tx); background:rgba(255,255,255,.1); border:1px solid rgba(226,238,249,.4);
  border-radius:var(--radius-control); font:750 var(--fs-xs)/1 var(--font-ui);
  box-shadow:0 3px 9px rgba(5,14,25,.12);
}
.topbar #sync:hover:not([disabled]) { background:rgba(255,255,255,.18); filter:none; }
.topbar #theme, .topbar-perfil > summary {
  display:grid; place-items:center; flex:none; width:41px; height:42px;
  margin:0; padding:0; border:1px solid transparent;
  border-radius:var(--radius-control); color:var(--bar-tx2); background:transparent;
  list-style:none; cursor:pointer;
}
.topbar #theme:hover, .topbar-perfil > summary:hover,
.topbar-perfil[open] > summary {
  background:rgba(255,255,255,.085); border-color:rgba(226,238,249,.12);
}
.topbar-perfil { position:relative; flex:none; }
.topbar-perfil > summary::-webkit-details-marker { display:none; }
.topbar-perfil-menu {
  position:absolute; right:0; top:calc(100% + 10px); z-index:40;
  display:flex; flex-direction:column; gap:2px; width:234px; padding:7px;
  border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface);
  color:var(--tx); box-shadow:0 20px 42px rgba(0,0,0,.22);
}
.topbar-perfil-cab { display:flex; flex-direction:column; gap:3px; padding:10px 11px 12px; margin-bottom:3px; border-bottom:1px solid var(--border); }
.topbar-perfil-cab b { font:750 var(--fs-sm)/1.2 var(--font-ui); }
.topbar-perfil-cab span { color:var(--mut); font-size:var(--fs-xs); }
.topbar-perfil-menu > a, .topbar-perfil-menu > button {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 12px; width:100%; border:0; border-radius:var(--radius-control);
  color:var(--tx); background:transparent; text-decoration:none;
  font:600 var(--fs-sm)/1.25 var(--font-ui); text-align:left;
}
.topbar-perfil-menu > a:hover, .topbar-perfil-menu > button:hover { background:var(--surface3); }
.topbar-perfil-menu #logout { color:var(--tx); }
.topbar #theme:focus-visible, .topbar-perfil > summary:focus-visible, .topbar #menu:focus-visible,
.topbar #sync:focus-visible { outline:2px solid #b9defc; outline-offset:2px; }
@media (max-width:1140px) {
  .topbar { column-gap:16px; padding-inline:15px; }
  .topbar-pagina { padding-left:15px; }
  .topbar-eyebrow { display:none; }
  .topbar-conta { min-width:130px; }
}
@media (max-width:940px) {
  .topbar { grid-template-columns:auto minmax(0,1fr); }
  .topbar-pagina { display:none; }
  .topbar-acoes { grid-column:2; }
}
@media (max-width:860px) {
  .topbar { padding:0 12px; gap:9px; }
  .topbar .brand { padding:0; }
  .topbar #acc { display:block; }
  .topbar #theme { display:none; }
  .topbar-conta { flex:1 1 130px; min-width:0; max-width:180px; }
  .topbar #sync { min-width:44px; padding:0 11px; height:40px; }
  .topbar-perfil > summary { height:40px; width:37px; }
}
@media (max-width:600px) {
  .topbar .brand img { width:32px; height:32px; }
  .topbar-identidade { gap:8px; }
  .topbar #menu { width:37px; height:39px; }
  .topbar-acoes { gap:4px; }
  .topbar-conta { max-width:145px; height:40px; padding-inline:9px; }
  .topbar #sync { min-width:40px; padding-inline:9px; }
  .topbar #sync span { display:none; }
  .topbar-perfil > summary { width:32px; }
}
@media (max-width:360px) {
  .topbar { padding-inline:8px; gap:5px; }
  .topbar-identidade { gap:5px; }
  .topbar-conta { max-width:118px; }
}
@media (prefers-reduced-motion:reduce) {
  .topbar #sync, .topbar #menu, .topbar #theme { transition:none; }
}

/* As opções da conta seguem acessíveis mesmo com o menu móvel reduzido. */
@media (max-width:860px) {
  .topbar #addconta, .topbar #logout { display:flex; }
  .topbar-perfil-menu { right:0; max-width:calc(100vw - 22px); }
}

/* Menu lateral: títulos e setas dos grupos com a mesma medida (aberto e fechado só mudam de cor); rolagem discreta */
#side .sec-t { font-size:var(--fs-xs); font-weight:750; line-height:1; }
#side .sec-name { font-size:inherit; font-weight:inherit; letter-spacing:inherit; }
#side .sec-seta { width:7px; height:7px; }
#side { scrollbar-width:thin; scrollbar-color:transparent transparent; }
#side:hover, #side:focus-within { scrollbar-color:var(--side-hover) transparent; }
#side::-webkit-scrollbar-thumb { background:transparent; }
#side:hover::-webkit-scrollbar-thumb, #side:focus-within::-webkit-scrollbar-thumb { background:var(--side-hover); }

/* Menu lateral — acabamento: grupos mais leves, grupo aberto agrupado em um painel suave, guia vertical nos itens */
#side .sec:not(.solo) { margin:0 0 4px; border-radius:var(--radius-card); transition:background .15s; }
#side .sec:not(.solo):not(.closed) { background:color-mix(in srgb,var(--side-tx) 4%,transparent); padding:2px 3px 4px; }
#side .sec-t { height:36px; min-height:36px; padding:0 10px; font-weight:650; letter-spacing:.09em; color:color-mix(in srgb,var(--side-mut) 92%,var(--side-tx)); }
#side .sec:not(.closed) > .sec-t { color:var(--side-tx); }
#side .sec:not(.closed) > .sec-t .sec-name::before { content:""; display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--info); vertical-align:1px; }
#side .sec-seta { width:6px; height:6px; border-width:1.3px; opacity:.5; }
#side .sec-t:hover .sec-seta, #side .sec:not(.closed) .sec-seta { opacity:.85; }
#side .sec-i { padding:2px 0 3px 0; margin-left:12px; border-left:1px solid color-mix(in srgb,var(--side-tx) 10%,transparent); }
#side .sec-i .nav-item > .nav { margin-left:5px; width:calc(100% - 5px); border-radius:var(--radius-control); }
#side .sec-i .nav.on::before { left:-6px; }
#side .busca-menu input { background:color-mix(in srgb,var(--side-tx) 3%,var(--side-bg)); border-color:var(--side-borda); }
#side .busca-menu input::placeholder { color:var(--side-mut); }
#side .sec.solo { border-bottom-color:color-mix(in srgb,var(--side-tx) 8%,transparent); }
#side .foot { text-align:center; opacity:.7; letter-spacing:.02em; }
body.compacto #side .sec:not(.solo):not(.closed) { background:transparent; padding:0; }
body.compacto #side .sec-i { margin-left:0; border-left:0; }
body.compacto #side .sec-i .nav-item > .nav { margin-left:0; width:100%; }

/* Barra superior — acabamento: mesma altura (40px) em todos os controles, ícones redondos, fio de marca na base */
.topbar { box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(4,15,27,.22); border-bottom:0; position:sticky; }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; background:linear-gradient(90deg,var(--pri) 0,color-mix(in srgb,var(--pri) 55%,transparent) 120px,transparent 46%); opacity:.85; }
.topbar .brand { font-size:var(--fs-md); letter-spacing:-.01em; }
.topbar .brand img { border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.topbar-pagina { padding-left:20px; border-left:1px solid rgba(205,222,238,.16); }
.topbar .crumb { font-size:var(--fs-md); font-weight:650; color:var(--bar-tx); letter-spacing:-.005em; }
.topbar .crumb b { font-weight:750; }
.topbar-acoes { gap:10px; }
.topbar-conta { height:40px; min-width:156px; padding:4px 12px 3px; border-radius:var(--radius-control); background:rgba(255,255,255,.06); border:1px solid rgba(216,231,245,.2); transition:background .13s, border-color .13s; }
.topbar-conta:hover, .topbar-conta:focus-within { background:rgba(255,255,255,.1); border-color:rgba(216,231,245,.34); }
.topbar-conta > span { letter-spacing:.08em; color:#b7cde0; }
.topbar #sync { height:40px; border-radius:var(--radius-control); font-weight:700; background:rgba(255,255,255,.08); border-color:rgba(226,238,249,.3); box-shadow:none; transition:background .13s, border-color .13s; }
.topbar #sync:hover:not([disabled]) { background:rgba(255,255,255,.16); border-color:rgba(226,238,249,.5); }
.topbar #theme, .topbar-perfil > summary { width:40px; height:40px; border-radius:50%; border:1px solid rgba(226,238,249,.16); color:var(--bar-tx2); background:rgba(255,255,255,.04); transition:background .13s, border-color .13s, color .13s; }
.topbar #theme:hover, .topbar-perfil > summary:hover, .topbar-perfil[open] > summary { background:rgba(255,255,255,.13); border-color:rgba(226,238,249,.34); color:var(--bar-tx); }
.topbar #menu { width:40px; height:40px; border-radius:var(--radius-control); }
.topbar-perfil-menu { border-radius:var(--radius-card); box-shadow:0 18px 40px rgba(0,0,0,.3); }
@media (max-width:860px) { .topbar #sync, .topbar-conta { height:40px; } .topbar-perfil > summary { width:40px; } }
@media (max-width:600px) { .topbar-perfil > summary { width:36px; height:36px; } .topbar #menu { width:36px; height:36px; } }

/* Organização das telas (plano docs/historico/PLANO-FRONTEND-ORGANIZACAO.md): cabeçalho de uma linha, laranja só na ação principal */
.pagina-cabecalho { align-items:center; padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); }
.pagina-cabecalho h1 { margin:0; font-size:var(--fs-xl); }
.pagina-cabecalho .sub { margin-top:2px; }
.btn.sec2.perigo-suave { color:var(--bad-tx); border-color:color-mix(in srgb,var(--bad) 45%,var(--border2)); font-weight:600; }
details.avancado > summary { cursor:pointer; list-style:none; display:flex; gap:var(--space-2); align-items:center; }
details.avancado > summary::-webkit-details-marker { display:none; }
details.avancado > summary::before { content:"▸"; color:var(--mut); transition:transform .15s; }
details.avancado[open] > summary::before { transform:rotate(90deg); }
details.avancado[open] > summary { margin-bottom:var(--space-3); }
/* Atendimento sem itens: sem painel de resposta vazio ocupando a tela */
.mail:not(:has(.mail-item)) { grid-template-columns:1fr; height:auto; min-height:0; }
#view[data-tipo-ux="atendimento"] .mail:not(:has(.mail-item)) { min-height:0; }
.mail:not(:has(.mail-item)) .mail-read { display:none; }
.mail:not(:has(.mail-item)) .mail-list { border-right:0; }

  /* Abas de telas irmãs (Atendimento, Dinheiro): links reais, a rota de cada tela não muda */
  .abas { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 16px; }
  .aba { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; margin-bottom:-1px; border:1px solid transparent; border-radius:var(--radius-control) var(--radius-control) 0 0; color:var(--mut); text-decoration:none; font-weight:600; min-height:40px; }
  .aba:hover { color:var(--tx); background:var(--surface2); }
  .aba.on { color:var(--tx); background:var(--surface); border-color:var(--border) var(--border) var(--surface); box-shadow:inset 0 3px 0 var(--info); }
  @media (max-width:560px) { .abas { flex-wrap:nowrap; overflow-x:auto; } .aba { white-space:nowrap; } }

/* Topo em telas muito estreitas: o seletor de conta encolhe em vez de passar por cima do logo */
@media (max-width:420px) { .topbar-conta { min-width:0; } .topbar-acoes { min-width:0; } .topbar-conta > span { display:none; } }

/* Topo refinado (computador): menos altura, controles do mesmo tamanho, conta em uma linha, "Sincronizar" discreto */
@media (min-width:861px) {
  :root { --bar-h:58px; }
  .topbar { padding:0 20px; }
  .topbar-pagina { padding-left:20px; }
  .topbar .crumb { font-size:var(--fs-md); font-weight:500; color:var(--bar-tx2); }
  .topbar .crumb b { font-weight:700; color:var(--bar-tx); }
  .topbar-acoes { gap:8px; }
  .topbar-conta { flex-direction:row; align-items:center; gap:8px; min-width:0; height:36px; padding:0 10px 0 12px; }
  .topbar-conta::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
  .topbar-conta > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* rótulo só para leitor de tela */
  .topbar #acc { width:auto; max-width:200px; height:24px; font-size:var(--fs-sm); font-weight:650; }
  .topbar #sync { height:36px; min-width:0; padding:0 13px; background:transparent; box-shadow:none; border-color:rgba(226,238,249,.28); }
  .topbar #theme, .topbar-perfil > summary { width:36px; height:36px; border-radius:50%; border:1px solid rgba(226,238,249,.16); }
  .topbar #menu { width:36px; height:36px; }
  .topbar .brand img { width:32px; height:32px; }
}

/* Ações do topo: mesma forma e peso. Sincronizar tem texto; tema e perfil são só ícone, sem borda até o mouse chegar */
@media (min-width:861px) {
  .topbar #theme, .topbar-perfil > summary { border-radius:var(--radius-control); border-color:transparent; background:transparent; }
  .topbar #theme:hover, .topbar-perfil > summary:hover, .topbar-perfil[open] > summary { background:rgba(255,255,255,.1); border-color:rgba(226,238,249,.2); }
  .topbar-acoes { gap:6px; }
  .topbar #sync { margin-right:6px; }
}

/* Abas que são botões (Minha loja) */
button.aba { background:transparent; font:inherit; font-weight:600; cursor:pointer; }
button.aba.on { background:var(--surface); }

/* "Mostrar mais" em listas longas */
.mais-linhas { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 0 4px; }

/* Valores em coluna não quebram o sinal e o número em linhas diferentes */
td.num, th.num { white-space:nowrap; }

.nowrap { white-space:nowrap; }

/* Topo: ações do lado direito com o mesmo desenho e contraste nos dois temas (a barra é sempre escura; só usa tokens --bar-*) */
.topbar-utils { display:flex; align-items:center; gap:2px; padding:2px; border:1px solid rgba(226,238,249,.22); border-radius:var(--radius-control); background:rgba(255,255,255,.07); }
.topbar-utils #theme, .topbar-utils .topbar-perfil > summary { width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:var(--bar-tx); }
.topbar-utils #theme:hover, .topbar-utils .topbar-perfil > summary:hover, .topbar-utils .topbar-perfil[open] > summary { background:rgba(255,255,255,.16); color:#fff; }
.topbar-utils svg { width:20px; height:20px; }
.topbar-conta::before { background:#4ade80 !important; box-shadow:0 0 0 3px rgba(74,222,128,.18); } /* o verde do tema claro (--ok) some sobre a barra escura */
.topbar #sync { color:var(--bar-tx); background:rgba(255,255,255,.12); border-color:rgba(226,238,249,.34); }
.topbar #sync:hover:not([disabled]) { background:rgba(255,255,255,.2); border-color:rgba(226,238,249,.55); }
@media (min-width:861px) { .topbar #sync { background:rgba(255,255,255,.12); } .topbar-acoes { gap:8px; } .topbar #sync { margin-right:0; } }

.topbar-utils #theme, .topbar-utils .topbar-perfil > summary { width:30px; height:30px; }
.topbar-utils svg { width:19px; height:19px; }

/* Ícones do topo: cheios e maiores, para serem reconhecidos de relance (lua = tema, círculo com pessoa = conta) */
.topbar-utils #theme, .topbar-utils .topbar-perfil > summary { width:32px; height:32px; }
.topbar-utils svg { width:22px; height:22px; }

.topbar-utils #theme, .topbar-utils .topbar-perfil > summary { display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* Lista com leitura (Pedidos, Perguntas, Mensagens, Reclamações): dois painéis separados, rolagem discreta e leitura em hierarquia */
main:not(:has(.inicio-painel)) .mail { gap:12px; background:transparent; border:0; border-radius:0; overflow:visible; box-shadow:none; }
.mail-list, .mail-read { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }
.mail-list { border-right:1px solid var(--border); }
.mail-list, .mail-read, .scroll { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--mut) 45%,transparent) transparent; }
.mail-list::-webkit-scrollbar, .mail-read::-webkit-scrollbar, .scroll::-webkit-scrollbar { width:8px; height:8px; }
.mail-list::-webkit-scrollbar-thumb, .mail-read::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--mut) 45%,transparent); border-radius:999px; }
.mail-list::-webkit-scrollbar-track, .mail-read::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track { background:transparent; }
.mail-item:last-child { border-bottom:0; }
.mail-item.on { box-shadow:inset 3px 0 0 var(--info); }
.mi-topo b { font-weight:700; }
.mail-read { padding:22px 26px; }
.mail-read .conta { gap:32px; }
.mail-read .conta > div:last-child b { display:block; margin-bottom:2px; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); }
.mail-read .conta > div:last-child .mut { color:var(--tx); overflow-wrap:anywhere; }
.mail-read table.mini td .mut { display:block; font-size:var(--fs-xs); }
.mail-read table.mini tr.tot td { border-top:1px solid var(--border2); padding-top:8px; }

/* Pedido: resumo no painel (valor, custo, lucro) */
.resumo-ped { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); padding:16px 0; border-block:1px solid var(--border); }
.resumo-ped .k { display:block; margin-bottom:4px; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); }
.resumo-ped b { font:700 var(--fs-lg) var(--font-ui); font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .resumo-ped { grid-template-columns:1fr; gap:12px; } }
dialog.confirma.larga .conta { gap:28px; }

/* Pedidos: linha inteira clicável (o botão "Ver pedido" continua sendo o alvo para teclado) */
.clicavel-linha { cursor:pointer; }

/* Avisos: sino no topo, com contador e a lista das mensagens rápidas */
.topbar-avisos { position:relative; flex:none; }
.topbar-avisos > summary { list-style:none; cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--bar-tx); }
.topbar-avisos > summary::-webkit-details-marker { display:none; }
.topbar-avisos > summary:hover, .topbar-avisos[open] > summary { background:rgba(255,255,255,.16); color:#fff; }
.topbar-avisos > summary:focus-visible { outline:2px solid #b9defc; outline-offset:2px; }
.aviso-contador { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--pri); color:var(--pri-tx); font:800 10px/16px var(--font-ui); text-align:center; box-shadow:0 0 0 2px var(--bar); }
.aviso-painel { position:absolute; right:0; top:calc(100% + 12px); z-index:40; width:min(360px, 92vw); max-height:min(60vh, 460px); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); color:var(--tx); box-shadow:0 20px 42px rgba(0,0,0,.28); scrollbar-width:thin; }
.aviso-lista { list-style:none; margin:0; padding:0; }
.aviso-item { display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.aviso-item:last-child { border-bottom:0; }
.aviso-ponto { flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--info); }
.aviso-ponto.ok { background:var(--ok); } .aviso-ponto.bad { background:var(--bad); }
.aviso-vazio { padding:20px 14px; font-size:var(--fs-sm); }
@media (max-width:560px) { .aviso-painel { position:fixed; left:8px; right:8px; top:64px; width:auto; } }

/* Sino: bloco "Precisa de atenção" (alertas do sistema) acima das mensagens recentes */
.aviso-sec { padding:10px 14px 6px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mut); }
a.aviso-alerta { color:var(--tx); text-decoration:none; }
a.aviso-alerta:hover { background:var(--surface2); }
.aviso-ponto.warn { background:var(--warn); }
#alertas-bloco { border-bottom:1px solid var(--border); }

/* Loja ativa (topo): igual em qualquer largura. Sem rótulo escrito por cima, bolinha de situação, lista escura e, com uma loja só, sem seta */
.topbar-conta { flex-direction:row; align-items:center; gap:8px; height:36px; padding:0 10px 0 12px; }
.topbar-conta::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.18); }
.topbar-conta > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* "Loja ativa" fica só para leitor de tela */
.topbar #acc { color-scheme:dark; height:24px; font-size:var(--fs-sm); font-weight:650; }
.topbar #acc option { background:#142c43; color:#fff; }
.topbar #acc:disabled { opacity:1; color:var(--bar-tx); cursor:default; appearance:none; -webkit-appearance:none; background-image:none; padding-right:0; }

/* Listas de seleção, campos e rolagem da página no mesmo desenho dos dois temas (os menus abrem escuros no tema escuro por causa do color-scheme) */
main select, dialog select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:32px;
  background-image:linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position:calc(100% - 17px) 54%, calc(100% - 12px) 54%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
main select:hover, dialog select:hover, main input:not([type=checkbox]):not([type=radio]):hover, main textarea:hover { border-color:var(--mut); }
main select:disabled, dialog select:disabled, main input:disabled, main textarea:disabled { opacity:.6; cursor:not-allowed; }
input[type=radio] { accent-color:var(--pri); }
html, textarea { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--mut) 45%,transparent) transparent; }
html::-webkit-scrollbar { width:10px; height:10px; } html::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--mut) 45%,transparent); border-radius:999px; border:2px solid var(--bg); }
html::-webkit-scrollbar-track { background:transparent; }

/* Títulos no começo de um cartão não ganham margem de cima (a do cartão já basta) e focos dentro de diálogos não ficam em anel duplo */
.card > .subsecao:first-child, .card > h2:first-child, .card > h3:first-child { margin-top:0; }
dialog.confirma .btn:focus-visible { outline-offset:1px; }

/* Lançamento rápido (popup do Fluxo de caixa): controle segmentado e valor em destaque */
.seg { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--border2); border-radius:var(--radius-control); background:var(--surface2); }
.seg-op { border:0; background:transparent; color:var(--mut); font:600 var(--fs-sm) var(--font-ui); padding:7px 14px; border-radius:calc(var(--radius-control) - 3px); cursor:pointer; min-height:34px; }
.seg-op:hover { color:var(--tx); }
.seg-op.on { background:var(--info); color:var(--on-solid); }
.lc-linha { margin:0 0 12px; }
dialog.confirma .lc-valor { font:700 var(--fs-xl) var(--font-ui); font-variant-numeric:tabular-nums; }
dialog.confirma form .acoes { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px; }

/* Financeiro: duas colunas de resumo, ranking com barra de progresso e etiqueta informativa */
.duas { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:var(--space-5); align-items:start; }
.rank { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.rank-topo { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
progress.barra { width:100%; height:8px; border:0; border-radius:999px; overflow:hidden; background:var(--surface3); appearance:none; -webkit-appearance:none; display:block; }
progress.barra::-webkit-progress-bar { background:var(--surface3); border-radius:999px; }
progress.barra::-webkit-progress-value { background:var(--info); border-radius:999px; }
progress.barra::-moz-progress-bar { background:var(--info); border-radius:999px; }
.pill.info { background:color-mix(in srgb,var(--info) 18%,transparent); color:var(--tx); }

.rank { gap:16px; } .rank li { display:grid; gap:4px; } progress.barra { margin:0; }

/* Cabeçalho de seção com ação ao lado (Cadastros) e popups que cabem em telas baixas */
.cab-sec { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:22px 0 8px; }
.cab-sec h2.secao { margin:0; }
.cad-nome { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; max-width:100%; min-width:0; }
dialog.confirma { max-height:calc(100dvh - 24px); overflow:auto; }

/* Fluxo de caixa: sete seções numa linha que rola no celular (em vez de três linhas de chips) e tabela categoria × mês com a primeira coluna fixa */
@media (max-width:560px) { .tool-abas .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--space-1); } .tool-abas .chips .chip { flex:none; white-space:nowrap; } }
table.matriz th:first-child, table.matriz td:first-child { position:sticky; left:0; background:var(--surface); z-index:1; min-width:150px; }
table.matriz td.num, table.matriz th.num { white-space:nowrap; }

/* Preços: detalhes e valores fiscais cabem nos cartões em telas pequenas. */
@media (max-width:700px) {
  table.precos.resp td.num { flex-wrap:wrap; }
  table.precos.resp .sobra { flex-wrap:wrap; }
  .conta2 > * { min-width:0; }
  .conta2 .resultado { flex-wrap:wrap; gap:var(--space-2); }
  .conta2 p { overflow-wrap:anywhere; }
}

table.precos th.num { white-space:normal; }

.resultado.faixa-warn { background:var(--surface3); }

/* EQUIPE-PAGAMENTO inicio */
td.acoes-linha .btn.baixar { font-weight:600; }
.pg-forma { color:var(--mut); }
/* EQUIPE-PAGAMENTO fim */

/* EQUIPE-BALANCETE inicio */
#chips-periodo-balancete { margin-bottom: var(--space-1); }
.bal-aberto { color: var(--mut); background: var(--surface2); }
th.bal-aberto { font-weight: 600; }
.bal-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
/* EQUIPE-BALANCETE fim */

/* EQUIPE-CADASTROS inicio */
#cadastros-conteudo .abas { flex-wrap:wrap; overflow-x:visible; }
#cadastros-conteudo .aba { white-space:normal; text-align:left; }
@media (max-width:560px) { #cadastros-conteudo .aba { padding:8px 10px; } #cadastros-conteudo .abas { gap:2px; } }
/* EQUIPE-CADASTROS fim */

/* EQUIPE-INICIO inicio */
.fin-resumo-cards .card.clicavel:focus-visible { outline:2px solid var(--pri); outline-offset:2px; }
.fin-resumo-lista { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.fin-resumo-item { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); color:inherit; text-decoration:none; }
.fin-resumo-item:hover, .fin-resumo-item:focus-visible { border-color:var(--pri); }
.fin-resumo-quem { display:grid; gap:var(--space-1); min-width:0; overflow-wrap:anywhere; }
.fin-resumo-valor { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.fin-resumo-bloco { margin-bottom:var(--space-4); }
/* EQUIPE-INICIO fim */

/* EQUIPE-ORIGEM inicio */
.origem-canal { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; font-size:var(--fs-sm); color:var(--mut); }
.origem-canal select { width:auto; min-height:34px; padding-top:4px; padding-bottom:4px; margin:0; }
/* EQUIPE-ORIGEM fim */
dialog.confirma .menu-acoes { display:grid; gap:var(--space-2); margin:var(--space-3) 0; }
dialog.confirma .menu-acoes .btn { justify-content:flex-start; text-align:left; }
dialog.confirma .lc-cab { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
dialog.confirma .lc-cab h2 { margin:0; }
dialog.confirma .acoes-enxuta #lc-excluir { margin-right:auto; }
dialog.confirma .lc-compacta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"valor data conta" "cat contato forma" "desc desc doc"; column-gap:var(--space-3); }
dialog.confirma .lc-compacta .grid2 { display:contents; }
dialog.confirma .lc-compacta .field { margin-bottom:var(--space-3); }
dialog.confirma .lc-compacta .lc-valor { font-size:var(--fs-lg); }
dialog.confirma .lc-compacta label:has(#lc-valor) { grid-area:valor; } dialog.confirma .lc-compacta label:has(#lc-data) { grid-area:data; }
dialog.confirma .lc-compacta label:has(#lc-conta) { grid-area:conta; } dialog.confirma .lc-compacta label:has(#lc-cat) { grid-area:cat; }
dialog.confirma .lc-compacta label:has(#lc-contato) { grid-area:contato; } dialog.confirma .lc-compacta label:has(#lc-forma) { grid-area:forma; }
dialog.confirma .lc-compacta label:has(#lc-desc) { grid-area:desc; } dialog.confirma .lc-compacta label:has(#lc-doc) { grid-area:doc; }
@media (max-width:640px) { dialog.confirma .lc-compacta { grid-template-columns:1fr; grid-template-areas:none; } dialog.confirma .lc-compacta label.field { grid-area:auto; } }
dialog.confirma .lc-cab { gap:var(--space-2) var(--space-3); }
dialog.confirma .lc-cab .pill { padding:3px 10px; line-height:1.35; }
dialog.confirma .lc-cab .lc-x { margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-height:0; padding:0; border-color:transparent; color:var(--mut); }
dialog.confirma .lc-cab .lc-x:hover { color:var(--tx); background:var(--surface3); filter:none; }
table.dre th[scope="row"] { font-weight:400; white-space:nowrap; text-transform:none; letter-spacing:normal; font-size:var(--fs-md); color:var(--tx); }
table.dre tr.dre-sub > * { font-weight:700; background:var(--surface2); border-top:1px solid var(--border2); }
table.dre tr.dre-grupo > * { font-weight:600; }
table.dre tr.dre-item > th { padding-left:var(--space-5); color:var(--mut); }
/* Padrão de popup (abrirDialogo): título fixo com ×, ações fixas no rodapé, rolagem no miolo. O respiro do diálogo (--dlg-pad) é o mesmo padding de dialog.confirma. */
dialog.confirma { --dlg-pad:22px; }
dialog.confirma > .dlg-cab, dialog.confirma > .lc-cab { position:sticky; top:calc(-1 * var(--dlg-pad)); z-index:2; margin:calc(-1 * var(--dlg-pad)) calc(-1 * var(--dlg-pad)) var(--space-3); padding:var(--dlg-pad) var(--dlg-pad) var(--space-2); background:var(--surface); }
dialog.confirma > .dlg-cab { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
dialog.confirma > .dlg-cab h2 { margin:0; }
dialog.confirma .dlg-x { flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-height:0; padding:0; border-color:transparent; color:var(--mut); }
dialog.confirma .dlg-x:hover { color:var(--tx); background:var(--surface3); filter:none; }
dialog.confirma.larga .acoes { position:sticky; bottom:calc(-1 * var(--dlg-pad)); z-index:2; margin:var(--space-3) calc(-1 * var(--dlg-pad)) calc(-1 * var(--dlg-pad)); padding:var(--space-3) var(--dlg-pad) var(--dlg-pad); background:var(--surface); border-top:1px solid var(--border); }
.bal-controles {
  display:grid;
  gap:var(--space-2);
  min-width:0;
  margin-bottom:var(--space-3);
  padding:var(--space-3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
}
.bal-controles-linha { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:0; }
.bal-controles-linha #chips-periodo-balancete { flex:1 1 auto; min-width:0; }
.bal-controles-linha #b-csv { margin-left:auto; }
.bal-controles #chips-secao-balancete { flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; padding-bottom:var(--space-1); }
.bal-controles #chips-secao-balancete .chip { flex:none; white-space:nowrap; }
.bal-datas-campos { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-2); }
.bal-datas-campos[hidden] { display:none; }
.bal-controles #b-datas[aria-expanded="true"] { background:var(--surface2); }
.bal-resumo-listas .link { margin-top:var(--space-2); }
.bal-controles + #bal-resumo .help,
#bal-dre .help,
#bal-categorias .help,
#bal-saldo .help { margin-top:var(--space-3); }
@media (max-width:560px) {
  .bal-controles { gap:var(--space-1); padding:var(--space-2); }
  .bal-controles-linha { gap:var(--space-1); }
  .bal-controles-linha #chips-periodo-balancete { flex:1 1 100%; width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--space-1); }
  .bal-controles-linha #chips-periodo-balancete .chip { flex:none; white-space:nowrap; }
  .bal-controles-linha #b-csv { margin-left:0; }
  .bal-datas-campos .field { flex:1 1 135px; min-width:0; }
}

/* Linha do resumo (Minha conta): rótulo e valor em colunas, para não colar um no outro */
.resumo-linha { display:grid; grid-template-columns:minmax(110px, max-content) minmax(0, 1fr); gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.resumo-linha:last-child { border-bottom:0; }
/* Meus produtos: barra de busca com rótulo visível, resumo e canais em pílulas */
.produtos-barra { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-3); }
.produtos-canais { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-1); min-width:0; }
.produtos-canais .pill { display:block; box-sizing:border-box; width:100%; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Preços e margem › Anúncios da Shopee: painel de precificação (sugerir, simular, aplicar, exportar) */
.btn.ok { background:var(--ok); color:var(--on-solid); }
.shopee-fonte { margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4); background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--info); border-radius:var(--radius-card); font-size:var(--fs-sm); }

.shopee-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-3) 0; }
.shopee-kpis .kpi { display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-3) var(--space-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); border-left-width:4px; }
.shopee-kpis .kpi .v { font-family:var(--font-ui); font-size:var(--fs-xl); font-variant-numeric:tabular-nums; line-height:1.1; }
.shopee-kpis .kpi.bad { border-left-color:var(--bad); } .shopee-kpis .kpi.warn { border-left-color:var(--warn); } .shopee-kpis .kpi.ok { border-left-color:var(--ok); }
.shopee-fila, .shopee-modelo, .shopee-painel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); margin-bottom:var(--space-3); }
.shopee-fila h2, .shopee-modelo h2, .shopee-lista-cab h2 { margin:0; font-size:var(--fs-md); font-family:var(--font-ui); }
.shopee-fila-cab { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.shopee-passos { display:flex; gap:var(--space-2); list-style:none; margin:0; padding:0; counter-reset:passo; flex-wrap:wrap; }
.shopee-passos li { counter-increment:passo; display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--mut); }
.shopee-passos li::before { content:counter(passo); display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; border:1px solid var(--border2); font-weight:700; font-size:var(--fs-xs); color:var(--tx); }
.shopee-passos li:not(:last-child)::after { content:'›'; margin-left:var(--space-1); }
.shopee-fila-acoes { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-2); }
.shopee-fila p { margin:0; }
.shopee-modelo > p { margin:var(--space-1) 0 var(--space-3); }
.shopee-modelo .field { max-width:480px; }
.shopee-lista-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.shopee-lista-cab h2 .mut { display:block; font-weight:400; margin-top:var(--space-1); }
.shopee-lista-cab .tool { margin:0; }
.shopee-painel .scroll { border-radius:var(--radius-control); }
table.shopee-tabela { table-layout:fixed; min-width:880px; }
table.shopee-tabela .c-anuncio { width:30%; } table.shopee-tabela .c-custo { width:10%; } table.shopee-tabela .c-preco { width:13%; } table.shopee-tabela .c-margem { width:20%; } table.shopee-tabela .c-acao { width:27%; }
table.shopee-tabela td { white-space:normal; vertical-align:top; padding:var(--space-3); }
table.shopee-tabela td .t { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; overflow-wrap:anywhere; }
.shopee-tags { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.shopee-tags .tag { display:inline-block; padding:2px 8px; border:1px solid var(--border2); border-radius:var(--radius-control); font-size:var(--fs-xs); color:var(--mut); }
.shopee-celula { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); text-align:right; }
.shopee-celula > * { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.shopee-celula .v { font-family:var(--font-ui); font-size:var(--fs-md); font-variant-numeric:tabular-nums; }
.shopee-celula .pill { white-space:normal; }
.shopee-acao { gap:var(--space-2); }
table.shopee-tabela tr[data-sit="sem_vinculo"] > td:first-child { box-shadow:inset 4px 0 0 var(--border2); }
.shopee-modelo-acoes > * { align-self:flex-start; margin-left:0; margin-right:0; text-align:left; }
.shopee-modelo-acoes { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-3); }
.shopee-sim-acoes { display:flex; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-3) 0; }
@media (max-width:1100px) { .shopee-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) {
  .shopee-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  table.shopee-tabela { min-width:0; }
  table.shopee-tabela.resp td { padding:var(--space-2); }
  table.shopee-tabela.resp .shopee-celula { align-items:flex-end; }
  .shopee-fila-acoes .btn { flex:1 1 100%; }
}

/* Compras no fornecedor: a linha conta a história do pedido, da esquerda para a direita:
   quem e quando → o que foi → vendeu por − custou = resultado → andamento → rastreio. */
.wd-pedidos-tabela thead th { font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); white-space:nowrap; vertical-align:bottom; }
.wd-pedidos-tabela tbody tr.wd-linha { border-bottom:1px solid var(--border); }
.wd-pedidos-tabela tbody td { vertical-align:middle; }
.wd-pedidos-tabela .wd-id { display:block; font-family:var(--font-ui); font-size:var(--fs-md); }
.wd-meta { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-1); }
.wd-pedidos-tabela .tag { display:inline-block; padding:1px 8px; border:1px solid var(--border2); border-radius:var(--radius-control); font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.wd-prod { display:flex; gap:var(--space-2); align-items:baseline; }
.wd-prod + .wd-prod { margin-top:var(--space-2); }
.wd-qtd { flex:none; min-width:2.6em; text-align:center; padding:1px 6px; border-radius:var(--radius-control); background:var(--surface3); font-variant-numeric:tabular-nums; }
.wd-prod .tag { margin-left:var(--space-1); }
.wd-pedidos-tabela td.num { position:relative; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wd-pedidos-tabela td[data-label="Custo"]::before, .wd-pedidos-tabela td[data-label="Sobra antes das taxas"]::before { position:absolute; left:0; top:50%; transform:translateY(-50%); color:var(--mut); font-weight:700; }
.wd-pedidos-tabela td[data-label="Custo"]::before { content:'−' / ''; }
.wd-pedidos-tabela td[data-label="Sobra antes das taxas"]::before { content:'=' / ''; }
.wd-pedidos-tabela td[data-label="Sobra antes das taxas"] { font-weight:700; }
.wd-pedidos-tabela td[data-label="Sobra antes das taxas"] .s { font-weight:600; white-space:normal; }
.wd-pedidos-tabela tr.wd-perda { background:color-mix(in srgb,var(--bad) 7%,var(--surface)); }
.wd-pedidos-tabela tr.wd-perda > td:first-child { box-shadow:inset 4px 0 0 var(--bad); }
.wd-pedidos-tabela tr.wd-perda td[data-label="Sobra antes das taxas"] { color:var(--bad-tx); }
.wd-pedidos-tabela tr.wd-encerrado { opacity:.78; }
.wd-etapas { display:flex; align-items:center; gap:0; list-style:none; margin:var(--space-2) 0 0; padding:0; }
.wd-etapas li { width:10px; height:10px; border-radius:999px; border:2px solid var(--border2); background:var(--surface); position:relative; margin-right:14px; }
.wd-etapas li:not(:last-child)::after { content:''; position:absolute; left:8px; top:2px; width:14px; height:2px; background:var(--border2); }
.wd-etapas li.feita, .wd-etapas li.atual { border-color:var(--ok); background:var(--ok); }
.wd-etapas li.feita::after { background:var(--ok); }
.wd-etapas li.atual { background:var(--surface); box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 30%,transparent); }
.wd-pedidos-tabela td[data-label="Rastreio"] code { font-size:var(--fs-sm); }
@media (max-width:700px) {
  .wd-pedidos-tabela td[data-label="Custo"]::before, .wd-pedidos-tabela td[data-label="Sobra antes das taxas"]::before { content:none; }
  .wd-pedidos-tabela tr.wd-perda { background:color-mix(in srgb,var(--bad) 7%,var(--surface)); border-left:4px solid var(--bad); }
  .wd-pedidos-tabela .wd-id { display:inline; }
}


/* Avisos: novo x já visto (o que foi aberto continua na lista, mas não conta no sino) */
.aviso-cab { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.aviso-cab .link { text-transform:none; letter-spacing:0; font-size:var(--fs-xs); font-weight:600; }
.aviso-tag { display:inline-block; padding:0 6px; border-radius:var(--radius-control); background:var(--pri); color:var(--pri-tx); font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.04em; vertical-align:1px; }
a.aviso-alerta.novo { font-weight:600; }
a.aviso-alerta.visto { color:var(--mut); }
a.aviso-alerta.visto .aviso-ponto { background:transparent; box-shadow:inset 0 0 0 2px var(--border2); }

/* Ajuda curta: "!" ao lado do rótulo abre um balão (ajudaHtml em nucleo.js) */
.ajuda { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; margin-left:2px; border:0; background:none; color:var(--mut); cursor:pointer; vertical-align:middle; text-transform:none; letter-spacing:0; }
.ajuda::before { content:'!'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border:1.5px solid currentColor; border-radius:50%; font:800 11px/1 var(--font-ui); }
.ajuda:hover, .ajuda[aria-expanded="true"] { color:var(--link); }
#ajuda-balao { position:fixed; z-index:60; padding:var(--space-3); background:var(--surface); color:var(--tx); border:1px solid var(--border2); border-radius:var(--radius-control); box-shadow:var(--sh); font-size:var(--fs-sm); font-weight:400; line-height:1.45; text-transform:none; letter-spacing:0; text-align:left; }
#ajuda-balao[hidden] { display:none; }

/* Balancete: as linhas das integrações (somente leitura) explicam em texto normal, não em caixa alta */
#bal-saldo tr[data-integracao] th .mut { text-transform:none; font-weight:400; letter-spacing:0; margin-top:var(--space-1); }

/* Canal de venda: filtro dentro da tela (o menu é por tarefa) */
.canal-barra { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0; }
.canal-barra-rotulo { color:var(--mut); font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }