/* Demonstração do TorraHub. Os tokens são os do site (apps/site: papel com a temperatura do café, noite da torra,
   um acento só, o cobre do grão), copiados aqui porque a demo é estática e não passa pelo Next.
   Conteúdo claro, barra lateral em noite, como o painel de verdade. */

:root {
  --paper: #ffffff;
  --paper-2: #f7f3ee;
  --paper-3: #ede6dc;
  --ink: #15100c;
  --ink-2: #5e554c;
  --ink-3: #685f56;
  --hair: rgba(21, 16, 12, 0.09);
  --hair-2: rgba(21, 16, 12, 0.16);
  --night: #0e0a07;
  --night-2: #17110b;
  --night-3: #221910;
  --night-ink: #f4ede3;
  --night-ink-2: #a89a88;
  --night-hair: rgba(244, 237, 227, 0.1);
  --accent: #e08744;
  --accent-ink: #9a4a14;
  --accent-glow: #f2a061;
  --accent-soft: #fbeadb;
  --verde: #6f9a78;
  --pos: #2e7d4f;
  --neg: #b3402b;
  --warn: #8a5a12;
  --whatsapp: #25d366;
  --font: 'Geist', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --w-medium: 500; --w-display: 580; --w-strong: 640;
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 24px; --r-pill: 999px;
  --d-xs: 100ms; --d-sm: 200ms; --d-md: 300ms; --d-lg: 450ms; --d-xl: 700ms;
  --e-out: cubic-bezier(0.33, 1, 0.68, 1); --e-ui: cubic-bezier(0.2, 0, 0, 1);
  --ring: 0 0 0 1px var(--hair), 0 1px 2px rgba(21, 16, 12, .04);

  --faixa-h: 38px;
  --lat-w: 248px;
  --barra-h: 62px;
  --fundo: var(--paper-2);
  --cartao: var(--paper);
  --info: #3F5F8A; --info-bg: #E6ECF4;
  --cinza-bg: #EFEAE3;
  --pos-bg: #E4EFE6; --warn-bg: #F7EBD8; --neg-bg: #F6E0DA;
  --barra: #E3D6C7; --barra-hover: #CDB59B;
  --sup-1: #FBF8F4;
  --foco: #C9702F;
}
@media (prefers-reduced-motion: reduce) { :root { --d-xs: 0ms; --d-sm: 0ms; --d-md: 0ms; --d-lg: 0ms; --d-xl: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.trava { overflow: hidden; }
body { margin: 0; background: var(--fundo); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; min-height: 100svh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.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; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r-2); }
.pular:focus { top: 46px; }
.num, .tab td.r, .kpi b { font-variant-numeric: tabular-nums; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; }
.muted { color: var(--ink-3); } .fraco { color: var(--ink-2); }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .cobre { color: var(--accent-ink); }

/* ---------- faixa da demonstração ---------- */
.faixa { position: fixed; inset: 0 0 auto 0; height: var(--faixa-h); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: #2a1a0f; color: rgba(244, 237, 227, .88); font-size: 13px; }
.faixa p { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ponto-vivo { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-glow); box-shadow: 0 0 0 3px rgba(242, 160, 97, .2); }
.faixa-acoes { display: flex; gap: 4px; flex: none; }
.faixa-btn { height: 28px; padding: 0 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font-size: 13px; font-weight: var(--w-medium); color: rgba(244, 237, 227, .88); transition: background-color var(--d-xs) var(--e-ui); white-space: nowrap; }
.faixa-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.faixa-btn.forte { background: var(--night-ink); color: var(--ink); font-weight: var(--w-strong); }
.faixa-btn.forte:hover { background: #fff; }
.faixa :focus-visible { outline-color: var(--accent-glow); }
.so-estreito { display: none; }
.so-especial { display: none; }
body.modo-especial .so-especial { display: inline-flex; }
body.modo-especial .so-painel { display: none; }
@media (max-width: 760px) { .so-largo { display: none; } .so-estreito { display: inline; } .faixa { font-size: 12.5px; gap: 6px; padding: 0 10px; } .faixa-btn { padding: 0 8px; font-size: 12.5px; } }
@media (max-width: 370px) { .faixa-btn { padding: 0 6px; font-size: 12px; } }

/* ---------- casca ---------- */
.app { display: flex; min-height: 100svh; padding-top: var(--faixa-h); }
body.modo-especial .app, body.modo-especial .barra { display: none; }
.lateral { position: sticky; top: var(--faixa-h); height: calc(100svh - var(--faixa-h)); width: var(--lat-w); flex: none; background: var(--night); color: var(--night-ink);
  display: flex; flex-direction: column; padding: 18px 12px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.lat-logo { display: block; padding: 4px 10px 16px; }
.lat-logo img { height: 22px; width: auto; }
.lat-loja { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 12px; border-radius: var(--r-2); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--night-hair); }
.lat-loja .av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #5a3419, #2a170a); color: var(--accent-glow); font: 600 12px/1 var(--mono); flex: none; }
.lat-loja b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.25; }
.lat-loja small { display: block; font-size: 12px; color: var(--night-ink-2); line-height: 1.3; }
.nav-grupo { margin-top: 12px; }
.nav-grupo > p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 237, 227, .5); padding: 0 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 14px; font-weight: var(--w-medium); color: rgba(244, 237, 227, .7); transition: background-color var(--d-xs) var(--e-ui), color var(--d-xs) var(--e-ui); }
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.nav-item[aria-current="page"] svg { color: var(--accent-glow); }
.nav-item .cont { margin-left: auto; font: 500 11px/1 var(--mono); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.nav-item .cont.alerta { background: rgba(242, 160, 97, .2); color: var(--accent-glow); }
.nav-item .cont.ia { background: rgba(242, 160, 97, .16); color: var(--accent-glow); box-shadow: inset 0 0 0 1px rgba(242, 160, 97, .3); }
.nav-loja { margin: 0 0 4px; background: linear-gradient(90deg, rgba(242, 160, 97, .14), rgba(242, 160, 97, .03)); box-shadow: inset 0 0 0 1px rgba(242, 160, 97, .22); color: #fff; }
.nav-loja svg { color: var(--accent-glow); }
.nav-loja-sel { margin-left: auto; font-size: 10.5px; color: rgba(255, 255, 255, .5); font-weight: 400; }
.lateral :focus-visible, .folha-caixa :focus-visible { outline-color: var(--accent-glow); }
.lat-pe { margin-top: auto; padding: 18px 10px 0; font-size: 12px; color: rgba(244, 237, 227, .5); line-height: 1.45; }

.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: var(--faixa-h); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 3vw, 32px);
  background: rgba(247, 243, 238, .88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--hair); }
.topo-tit { flex: 1; min-width: 0; }
.eyebrow-p { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.2; }
.topo h1 { font-size: 22px; font-weight: var(--w-display); letter-spacing: -.018em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
main { flex: 1; padding: clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 32px) 48px; outline: none; max-width: 1380px; width: 100%; min-width: 0; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: var(--w-medium); white-space: nowrap; transition: background-color var(--d-xs) var(--e-ui), box-shadow var(--d-xs) var(--e-ui), color var(--d-xs) var(--e-ui); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-pri { background: var(--ink); color: #fff; }
.btn-pri:hover { background: #33261b; }
.btn-cobre { background: var(--accent-ink); color: #fff; }
.btn-cobre:hover { background: #7e3b0f; }
.btn-sec { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn-sec:hover { background: var(--sup-1); box-shadow: inset 0 0 0 1px rgba(21, 16, 12, .3); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: rgba(21, 16, 12, .05); color: var(--ink); }
.btn-perigo { color: var(--neg); box-shadow: inset 0 0 0 1px rgba(179, 64, 43, .35); background: var(--paper); }
.btn-perigo:hover { background: var(--neg-bg); }
.btn-whats { background: #1f8a4c; color: #fff; }
.btn-whats:hover { background: #17703d; }
.btn-xs { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.x { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: inherit; opacity: .75; }
.x:hover { opacity: 1; background: rgba(21, 16, 12, .06); }
.x svg { width: 18px; height: 18px; }
.link { color: var(--accent-ink); font-weight: var(--w-medium); }
.link:hover { text-decoration: underline; }

/* ---------- blocos comuns ---------- */
.dica { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px 9px 12px; margin-bottom: 18px; border-radius: var(--r-2); background: var(--accent-soft); color: #5c2f10; font-size: 13px; line-height: 1.45; }
.dica > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent-ink); }
.dica p { flex: 1; }
.dica .x { width: 26px; height: 26px; margin: -3px -3px -3px 0; }
.dica .x svg { width: 15px; height: 15px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 20px; }
.kpi { position: relative; display: flex; flex-direction: column; background: var(--cartao); padding: 14px 16px; border-radius: var(--r-3); box-shadow: var(--ring); gap: 2px; min-width: 0; }
.kpi small { font-size: 12.5px; color: var(--ink-3); }
.kpi b { font-weight: var(--w-display); font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -.022em; line-height: 1.25; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi .sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; padding-right: 16px; }
.kpi .pos { color: var(--pos); } .kpi .neg { color: var(--neg); } .kpi .dest { color: var(--accent-ink); } .kpi .warn { color: var(--warn); }
.kpi-link { transition: box-shadow var(--d-sm) var(--e-ui); }
.kpi-ir { position: absolute; right: 10px; bottom: 11px; color: var(--ink-3); display: flex; }
.kpi-ir svg { width: 16px; height: 16px; }
.kpi-link:hover { box-shadow: 0 0 0 1px var(--accent), 0 14px 28px -18px rgba(154, 74, 20, .5); }
.kpi-link:hover .kpi-ir { color: var(--accent-ink); }
.caixa { background: var(--cartao); border-radius: var(--r-3); box-shadow: var(--ring); padding: 18px; min-width: 0; }
.caixa + .caixa { margin-top: 16px; }
.caixa-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.caixa-tit h2 { font-size: 15.5px; font-weight: var(--w-strong); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.caixa-tit p { font-size: 13px; color: var(--ink-3); }
.caixa-tit h2 > svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grade-2i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col > .caixa + .caixa { margin-top: 0; }
.bloco { margin-top: 16px; }
.nota { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 12px; }
.nota b { color: var(--ink-2); }
.selo-ex { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--cinza-bg); color: var(--ink-2); }
.selo-ia { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; background: var(--accent-soft); color: var(--accent-ink); }
.selo-ia svg { width: 12px; height: 12px; }
.embreve { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; background: var(--info-bg); color: var(--info); white-space: nowrap; }
@media (max-width: 1080px) { .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grade-2i { grid-template-columns: minmax(0, 1fr); } }

/* ---------- filtros ---------- */
.filtros { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros .esp { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.chip { height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background-color var(--d-xs) var(--e-ui); white-space: nowrap; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip .c { font: 500 11px/1 var(--mono); opacity: .7; }
.sel, .inp, .form select, textarea.inp { height: 38px; border-radius: var(--r-2); border: 1px solid var(--hair-2); background: var(--paper); padding: 0 12px; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; }
.sel { width: auto; height: 32px; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); padding: 0 30px 0 12px; }
.sel, .form select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23685f56' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
textarea.inp { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.inp:focus, .form select:focus, .sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 135, 68, .2); }
.busca-in { position: relative; min-width: 0; flex: 0 1 260px; }
.busca-in svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.busca-in input { height: 32px; border-radius: var(--r-pill); padding-left: 34px; font-size: 13px; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { height: 40px; padding: 0 14px; font-size: 14px; font-weight: var(--w-medium); color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.aba:hover { color: var(--ink); }
.aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.aba .c { font: 500 11px/1 var(--mono); color: var(--ink-3); }

/* ---------- tabela → cartões no celular ---------- */
.tab-w { margin: 0 -18px -8px; overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; text-align: left; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--hair); }
.tab th:first-child, .tab td:first-child { padding-left: 18px; }
.tab th:last-child, .tab td:last-child { padding-right: 18px; }
.tab td { padding: 11px 10px; border-top: 1px solid var(--hair); vertical-align: middle; }
.tab tbody tr:first-child td { border-top: 0; }
.tab .r { text-align: right; }
.tab td.r { white-space: nowrap; }
.tab .nw { white-space: nowrap; }
.tab tbody tr[data-abre] { cursor: pointer; transition: background-color var(--d-xs) var(--e-ui); }
.tab tbody tr[data-abre]:hover { background: var(--sup-1); }
.tab tbody tr[data-abre]:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tab .lk { font-weight: var(--w-strong); text-align: left; }
.tab .lk:hover { color: var(--accent-ink); }
.tab .sec { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.tab .sec.corta { max-width: 26ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab tfoot td { font-weight: var(--w-strong); border-top: 1px solid var(--hair-2); }
.tab .ind td:first-child { padding-left: 34px; color: var(--ink-2); }
.tab .tot td { font-weight: var(--w-strong); background: var(--sup-1); }
.tab .fim td { font-weight: var(--w-strong); background: var(--accent-soft); color: #5c2f10; }
.so-m { display: none !important; }
@media (max-width: 760px) {
  .tab-w { margin: 0 -14px; }
  .caixa { padding: 16px 14px; }
  .tab th:first-child, .tab td:first-child { padding-left: 14px; }
  .tab th:last-child, .tab td:last-child { padding-right: 14px; }
  .fora-p { display: none; }
  .tab:not(.cartoes) { font-size: 12.5px; }
  .tab:not(.cartoes) th, .tab:not(.cartoes) td { padding-left: 6px; padding-right: 6px; }
  .tab.cartoes thead { display: none; }
  .tab.cartoes, .tab.cartoes tbody { display: block; }
  .tab.cartoes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-top: 1px solid var(--hair); }
  .tab.cartoes tbody tr:first-child { border-top: 0; }
  .tab.cartoes td { display: block; padding: 0 !important; border: 0; text-align: left; min-width: 0; }
  .tab.cartoes td.r { text-align: left; white-space: normal; }
  .tab.cartoes td[data-l]::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }
  .tab.cartoes td.pri { grid-column: 1 / -1; font-size: 14.5px; }
  .tab.cartoes td.inteira, .tab.cartoes td.acao { grid-column: 1 / -1; }
  .tab.cartoes td.fora-m { display: none; }
  .tab.cartoes .so-m { display: block !important; }
  .tab.cartoes .tag { white-space: normal; }
  .tab.cartoes tfoot { display: block; }
  .tab.cartoes tfoot tr { display: flex; justify-content: space-between; }
}

/* selos de status */
.tag { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; line-height: 1.25; font-weight: var(--w-medium); }
.tag-ok { background: var(--pos-bg); color: var(--pos); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-bad { background: var(--neg-bg); color: var(--neg); }
.tag-info { background: var(--info-bg); color: var(--info); }
.tag-cinza { background: var(--cinza-bg); color: var(--ink-2); }
.tag-cobre { background: var(--accent-soft); color: var(--accent-ink); }
.tag-ok::before, .tag-warn::before, .tag-bad::before, .tag-info::before, .tag-cobre::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; opacity: .85; flex: none; }
.pill-canal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill-canal i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.barrinha { display: inline-block; width: 100%; min-width: 50px; height: 6px; border-radius: 999px; background: var(--paper-3); overflow: hidden; vertical-align: middle; }
.barrinha i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.barrinha i.baixo { background: #C98A2E; } .barrinha i.critico { background: var(--neg); } .barrinha i.ok { background: var(--verde); }

/* ---------- gráficos ---------- */
.graf { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; }
.graf .b { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.graf .b i { display: block; width: 100%; border-radius: 4px 4px 1px 1px; background: var(--barra); transform-origin: bottom; animation: sobe var(--d-xl) var(--e-out) both; }
.graf .b.hoje i { background: var(--accent); }
.graf .b:hover i { background: var(--barra-hover); } .graf .b.hoje:hover i { background: var(--accent-ink); }
@keyframes sobe { from { transform: scaleY(0); } }
.graf-eixo { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--ink-3); margin-top: 8px; }
.graf-dica { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; min-height: 1.4em; }
.bh { display: flex; flex-direction: column; gap: 8px; }
.bh-l { display: grid; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bh-r { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.bh-r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.bh-t { height: 10px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.bh-t b { display: block; height: 100%; border-radius: inherit; background: var(--accent); animation: cresce var(--d-xl) var(--e-out) both; transform-origin: left; }
.bh-t b.neg { background: var(--neg); } .bh-t b.cinza { background: var(--barra-hover); }
@keyframes cresce { from { transform: scaleX(0); } }
.bh-v { text-align: right; font-weight: var(--w-strong); white-space: nowrap; }
.bh-v small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 480px) { .bh-l { grid-template-columns: minmax(70px, 100px) minmax(0, 1fr) auto; gap: 8px; } }
.linha-svg { width: 100%; height: 70px; display: block; }
.linha-svg .area { fill: rgba(224, 135, 68, .12); stroke: none; }
.linha-svg .traco { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.empilha { display: flex; height: 36px; border-radius: 10px; overflow: hidden; gap: 2px; margin: 6px 0 12px; }
.empilha span { display: flex; align-items: center; justify-content: center; font: 500 11px/1 var(--mono); color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- listas ---------- */
.pend { display: flex; flex-direction: column; }
.pend a, .pend button { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--hair); text-align: left; width: 100%; }
.pend > :first-child { border-top: 0; padding-top: 2px; }
.pend a:hover b, .pend button:hover b { color: var(--accent-ink); }
.pend .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--paper-2); color: var(--ink-2); }
.pend .ic.w { background: var(--warn-bg); color: var(--warn); } .pend .ic.b { background: var(--neg-bg); color: var(--neg); } .pend .ic.t { background: var(--accent-soft); color: var(--accent-ink); } .pend .ic.g { background: var(--pos-bg); color: var(--pos); }
.pend .ic svg { width: 17px; height: 17px; }
.pend span { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.pend b { display: block; font-weight: var(--w-strong); }
.pend small { color: var(--ink-3); font-size: 12.5px; }
.pend .seta { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13.5px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dl .sep { grid-column: 1 / -1; border-top: 1px solid var(--hair); margin: 3px 0; }
.dl .forte { font-weight: var(--w-strong); }
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px; color: var(--ink-2); }
.vazio svg { width: 28px; height: 28px; color: var(--ink-3); }
.vazio b { color: var(--ink); font-weight: var(--w-strong); }
.vazio p { font-size: 13px; max-width: 42ch; }
.tempo { list-style: none; margin: 0; padding: 0; }
.tempo li { position: relative; padding: 0 0 14px 24px; font-size: 13.5px; }
.tempo li:last-child { padding-bottom: 0; }
.tempo li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--barra-hover); }
.tempo li::after { content: ""; position: absolute; left: 8px; top: 19px; bottom: 2px; width: 1.5px; background: var(--hair-2); }
.tempo li:last-child::after { display: none; }
.tempo li.feito::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tempo li.agora::before { box-shadow: 0 0 0 2px var(--warn); }
.tempo li.ruim::before { background: var(--neg); box-shadow: 0 0 0 2px var(--neg); }
.tempo b { font-weight: var(--w-strong); }
.tempo small { display: block; font-size: 12.5px; color: var(--ink-3); }

/* ---------- formulários ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.campo > span, .campo legend { font-size: 13px; font-weight: var(--w-strong); color: var(--ink); padding: 0; }
.campo small { font-size: 12.5px; color: var(--ink-3); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .linha-3 { grid-template-columns: 1fr 1fr; } }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--hair-2); background: var(--paper); font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); transition: background-color var(--d-xs) var(--e-ui); }
.seg span svg { width: 15px; height: 15px; }
.seg input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.seg input:disabled + span { opacity: .4; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-ink); flex: none; }
.check small { display: block; color: var(--ink-3); font-size: 12.5px; }
input[type=range] { width: 100%; accent-color: var(--accent-ink); }
.erro { color: var(--neg); font-size: 13px; }

/* ---------- gaveta ---------- */
.gaveta { position: fixed; inset: 0; z-index: 80; }
.gav-fundo { position: absolute; inset: 0; background: rgba(14, 10, 7, .42); opacity: 0; transition: opacity var(--d-md) var(--e-ui); }
.gav-caixa { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--paper); display: flex; flex-direction: column; box-shadow: -30px 0 80px -30px rgba(14, 10, 7, .5); transform: translateX(24px); opacity: 0; transition: transform var(--d-md) var(--e-out), opacity var(--d-sm) var(--e-ui); }
.gav-caixa.larga { width: min(680px, 100%); }
.gaveta.on .gav-fundo { opacity: 1; }
.gaveta.on .gav-caixa { transform: none; opacity: 1; }
.gav-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hair); }
.gav-topo h2 { font-size: 19px; font-weight: var(--w-display); letter-spacing: -.015em; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gav-topo p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.gav-corpo { flex: 1; overflow-y: auto; padding: 18px 20px 24px; overscroll-behavior: contain; }
.gav-corpo h3 { font-size: 13px; font-weight: var(--w-strong); margin: 20px 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gav-corpo h3:first-child { margin-top: 0; }
.gav-pe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--sup-1); }
@media (max-width: 560px) { .gav-caixa, .gav-caixa.larga { top: 36px; width: 100%; border-radius: 18px 18px 0 0; transform: translateY(24px); } .gav-topo { padding: 16px 16px 12px; } .gav-corpo { padding: 16px; } .gav-pe { padding-left: 16px; padding-right: 16px; } .gav-pe .btn { flex: 1; } }
.itens-lista { display: flex; flex-direction: column; }
.itens-lista > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.itens-lista > div:first-child { border-top: 0; padding-top: 0; }
.itens-lista img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--paper-2); flex: none; }
.itens-lista .t { flex: 1; min-width: 0; }
.itens-lista .t small { display: block; color: var(--ink-3); font-size: 12.5px; }
.nfe { border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair-2); padding: 12px 14px; font-size: 13px; background: var(--sup-1); }
.nfe .chave { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; word-break: break-all; color: var(--ink-2); margin-top: 4px; }
.etq { border: 1.5px dashed var(--hair-2); border-radius: var(--r-2); padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12.5px; background: #fff; }
.etq .cod { grid-column: 1 / -1; height: 42px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 7px, #111 7px 10px, #fff 10px 11px); border-radius: 2px; }
.etq .cod-t { grid-column: 1 / -1; text-align: center; font-family: var(--mono); letter-spacing: .12em; font-size: 12px; }
.etq b { display: block; font-size: 13px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: flex-start; gap: 10px; max-width: min(560px, calc(100% - 24px)); padding: 12px 16px; border-radius: 14px; background: var(--night-2); color: var(--night-ink); font-size: 13.5px; line-height: 1.45; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); transition: opacity var(--d-sm) var(--e-ui), transform var(--d-md) var(--e-out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--accent-glow); flex: none; margin-top: 1px; }

/* ---------- menu do celular ---------- */
.barra { display: none; }
.folha { position: fixed; inset: 0; z-index: 70; }
.folha-fundo { position: absolute; inset: 0; background: rgba(14, 10, 7, .45); }
.folha-caixa { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86svh; overflow-y: auto; background: var(--night); color: var(--night-ink); border-radius: 20px 20px 0 0; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
.folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.folha-topo .x { color: var(--night-ink); }
.folha .nav-grupo > div, .folha nav { display: block; }
.folha .nav-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.folha .nav-grupo > p { grid-column: 1 / -1; }
@media (max-width: 380px) { .folha .nav-grupo { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .lateral { display: none; }
  .barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--barra-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: rgba(14, 10, 7, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .barra a, .barra button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(244, 237, 227, .62); font-size: 11px; font-weight: var(--w-medium); }
  .barra svg { width: 21px; height: 21px; }
  .barra [aria-current="page"] { color: #fff; }
  .barra [aria-current="page"] svg { color: var(--accent-glow); }
  .barra :focus-visible { outline-color: var(--accent-glow); outline-offset: -4px; }
  main { padding-bottom: calc(var(--barra-h) + 40px); }
  .toast { bottom: calc(var(--barra-h) + 14px); }
  .topo { padding: 10px 16px; gap: 10px; }
  .topo h1 { font-size: 19px; }
  .topo-ia span { display: none; }
  .topo-ia { width: 38px; padding: 0; }
}
@media (max-width: 480px) { .topo-venda span { display: none; } .topo-venda { width: 38px; padding: 0; } .kpis { grid-template-columns: 1fr 1fr; } .kpi { padding: 12px 13px; } .kpi b { font-size: 19px; } }

/* ---------- peças específicas ---------- */
.prio { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: var(--w-strong); white-space: nowrap; }
.prio-alta { background: var(--neg-bg); color: var(--neg); } .prio-media { background: var(--warn-bg); color: var(--warn); } .prio-baixa { background: var(--info-bg); color: var(--info); } .prio-ok { background: var(--pos-bg); color: var(--pos); }
.cafe-cel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cafe-cel img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--paper-2); flex: none; }
.cafe-cel b { display: block; font-weight: var(--w-strong); }
.torrar-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tcard { background: var(--cartao); border-radius: var(--r-3); box-shadow: var(--ring); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tcard.alta { box-shadow: 0 0 0 1px rgba(179, 64, 43, .35), 0 12px 30px -22px rgba(179, 64, 43, .6); }
.tcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tcard h3 { font-size: 15px; font-weight: var(--w-strong); }
.tcard .sub { font-size: 12.5px; color: var(--ink-3); }
.tcard .grande { font-size: 26px; font-weight: var(--w-display); letter-spacing: -.02em; line-height: 1.1; }
.tcard .grande small { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.conta-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.conta-linha b { color: var(--ink); font-variant-numeric: tabular-nums; }
.medidor { position: relative; height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.medidor i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--verde); }
.medidor i.falta { background: repeating-linear-gradient(135deg, rgba(179, 64, 43, .5) 0 4px, rgba(179, 64, 43, .25) 4px 8px); }
.balanca { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--hair); text-align: center; }
.balanca b { display: block; font-size: 22px; font-weight: var(--w-display); letter-spacing: -.02em; }
.balanca small { font-size: 12px; color: var(--ink-3); }
.balanca svg { width: 22px; height: 22px; color: var(--accent-ink); }
.fornada-v { color: var(--verde); } .fornada-t { color: var(--accent-ink); }

/* ---------- Analista ---------- */
.an { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .an { grid-template-columns: minmax(0, 1fr); } }
.an-chat { background: var(--cartao); border-radius: var(--r-3); box-shadow: var(--ring); display: flex; flex-direction: column; min-width: 0; }
.an-topo { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.an-topo b { color: var(--ink); }
.an-av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--night); color: var(--accent-glow); flex: none; }
.an-av svg { width: 16px; height: 16px; }
.an-msgs { padding: 18px; display: flex; flex-direction: column; gap: 16px; min-height: 320px; max-height: min(640px, 64vh); overflow-y: auto; overscroll-behavior: contain; }
.an-oi h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--w-display); letter-spacing: -.02em; }
.an-oi h2 span { color: var(--ink-3); }
.msg-eu { align-self: flex-end; max-width: 80%; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; }
.msg-ia { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.msg-ia .corpo-ia { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; }
.msg-ia .corpo-ia p + p { margin-top: 8px; }
.msg-ia .corpo-ia b { font-weight: var(--w-strong); }
.msg-ia .extra { margin-top: 12px; opacity: 0; transform: translateY(6px); transition: opacity var(--d-lg) var(--e-ui), transform var(--d-lg) var(--e-out); }
.msg-ia .extra.on { opacity: 1; transform: none; }
.msg-ia .fonte { margin-top: 10px; font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.msg-ia .fonte a { color: var(--accent-ink); font-weight: var(--w-medium); }
.pensando { display: inline-flex; gap: 4px; padding: 10px 0; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pisca 1s infinite ease-in-out; }
.pensando i:nth-child(2) { animation-delay: .15s; } .pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes pisca { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.an-chips button { height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13px; color: var(--ink-2); background: var(--paper); text-align: left; }
.an-chips button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.an-form { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--hair); }
.an-form input { flex: 1; min-width: 0; height: 42px; border-radius: 999px; border: 1px solid var(--hair-2); padding: 0 16px; font-size: 14px; background: var(--paper); }
.an-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 135, 68, .2); }
.an-form .btn { height: 42px; }
.mini-tab { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.mini-tab th { text-align: left; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hair); }
.mini-tab td { padding: 7px 8px 7px 0; border-top: 1px solid var(--hair); }
.mini-tab .r { text-align: right; }
.mini-tab tr:first-child td { border-top: 0; }
.mini-w { overflow-x: auto; }
.resumo8 { border-left: 3px solid var(--accent); }
.resumo8 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.resumo8 li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.resumo8 li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.resumo8 li.w svg { color: var(--warn); } .resumo8 li.b svg { color: var(--neg); } .resumo8 li.g svg { color: var(--pos); }

/* ---------- Diretoria ---------- */
.dr-mesa { display: flex; justify-content: space-around; gap: 8px; padding: 14px 8px; border-radius: var(--r-3); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--hair); overflow-x: auto; }
.dr-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; text-align: center; opacity: .55; transition: opacity var(--d-sm) var(--e-ui), transform var(--d-sm) var(--e-out); }
.dr-p.fala { opacity: 1; transform: translateY(-2px); }
.dr-p.fala .dr-av { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }
.dr-p b { font-size: 12.5px; }
.dr-p small { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.dr-av { width: var(--t, 36px); height: var(--t, 36px); border-radius: 50%; display: inline-block; flex: none; transition: box-shadow var(--d-sm) var(--e-ui); }
.dr-av svg { width: 100%; height: 100%; display: block; }
.dr-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 1080px) { .dr-grade { grid-template-columns: minmax(0, 1fr); } }
/* a conversa rola dentro da própria caixa (a página fica onde a pessoa deixou); sem prender a roda no fim dela */
.dr-falas { display: flex; flex-direction: column; gap: 14px; max-height: 560px; overflow-y: auto; padding: 2px 6px 2px 2px; scrollbar-width: thin; }
.dr-falas:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-2); }
@media (max-width: 720px) { .dr-falas { max-height: 460px; } }
.dr-sep { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-sep::before, .dr-sep::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.dr-fala { display: flex; gap: 10px; align-items: flex-start; animation: entra var(--d-md) var(--e-out) both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.dr-fala .bal { flex: 1; min-width: 0; background: var(--paper); border-radius: 4px 14px 14px 14px; box-shadow: var(--ring); padding: 10px 14px; font-size: 13.5px; line-height: 1.55; }
.dr-fala .quem { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.dr-fala .quem b { color: var(--ink); }
.dr-fala .cita { font-size: 12.5px; color: var(--ink-2); border-left: 2px solid var(--hair-2); padding-left: 8px; margin-bottom: 6px; }
.dr-fala .prop { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dr-fala .prop span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.dr-cons { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); color: var(--ink-3); margin: 14px 0 4px; }
.dr-cons .barrinha { flex: 1; }
.dec { display: flex; flex-direction: column; gap: 10px; }
.dec-it { padding: 12px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair); background: var(--paper); font-size: 13.5px; animation: entra var(--d-md) var(--e-out) both; }
.dec-it .meta { font-size: 12px; color: var(--ink-3); margin: 4px 0 8px; }
.dec-it.aprovada { box-shadow: inset 0 0 0 1px rgba(46, 125, 79, .4); background: #f6faf7; }
.dec-it.recusada { opacity: .6; }
.tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tarefas li { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.tarefas li svg { width: 16px; height: 16px; color: var(--pos); flex: none; margin-top: 2px; }

/* as metas: o boletim, os anéis, o placar e os selos (como na demo do RodeAqui) */
.dr-h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 20px 0 10px; font-size: 14px; font-weight: var(--w-strong); }
.dr-h3 span { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.dr-g2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.dr-festa { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-2); background: var(--pos-bg); color: var(--pos); overflow: hidden; animation: entra var(--d-lg) var(--e-out) both; }
.dr-festa > svg { width: 22px; height: 22px; flex: none; }
.dr-festa b { display: block; font-size: 13.5px; color: var(--ink); }
.dr-festa p { font-size: 12.5px; color: var(--ink-2); }
.dr-confete { position: absolute; inset: 0; pointer-events: none; }
.dr-confete i { position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 2px; opacity: 0; animation: dr-cai 1.6s var(--e-out) both; }
.dr-confete i:nth-child(4n+1) { background: #3F5F8A; } .dr-confete i:nth-child(4n+2) { background: #9a4a14; }
.dr-confete i:nth-child(4n+3) { background: #2E7D4F; } .dr-confete i:nth-child(4n) { background: #B4507A; }
.dr-confete i:nth-child(1) { left: 6%; animation-delay: .05s; } .dr-confete i:nth-child(2) { left: 14%; animation-delay: .3s; }
.dr-confete i:nth-child(3) { left: 22%; animation-delay: .12s; } .dr-confete i:nth-child(4) { left: 31%; animation-delay: .4s; }
.dr-confete i:nth-child(5) { left: 39%; animation-delay: .2s; } .dr-confete i:nth-child(6) { left: 47%; animation-delay: .02s; }
.dr-confete i:nth-child(7) { left: 55%; animation-delay: .35s; } .dr-confete i:nth-child(8) { left: 63%; animation-delay: .15s; }
.dr-confete i:nth-child(9) { left: 71%; animation-delay: .45s; } .dr-confete i:nth-child(10) { left: 79%; animation-delay: .1s; }
.dr-confete i:nth-child(11) { left: 86%; animation-delay: .28s; } .dr-confete i:nth-child(12) { left: 93%; animation-delay: .08s; }
.dr-confete i:nth-child(13) { left: 50%; animation-delay: .5s; }
@keyframes dr-cai { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(90px) rotate(260deg); } }

.dr-bol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dr-bol-i:last-child { grid-column: 1 / -1; }
@media (min-width: 1280px) { .dr-bol { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dr-bol-i:last-child { grid-column: auto; } .dr-bol-i { flex-direction: column; gap: 6px; } }
.dr-bol-i { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-2); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--pos); }
.dr-bol-i.risco { box-shadow: inset 3px 0 0 var(--warn); }
.dr-bol-i.fora { box-shadow: inset 3px 0 0 var(--neg); }
.dr-bol-i b { display: block; font-size: 13px; font-weight: var(--w-strong); }
.dr-bol-i b span { font-weight: 400; color: var(--ink-3); }
.dr-bol-i p { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 1px; }
.dr-bol-r { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

.dr-metas-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dr-meta { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.dr-meta.nova { box-shadow: 0 0 0 2px var(--accent); animation: entra var(--d-lg) var(--e-out) both; }
.dr-meta-a { position: relative; flex: none; width: 58px; height: 58px; }
.dr-meta-a > span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12.5px/1 var(--mono); color: var(--ink); }
.dr-anel { transform: rotate(-90deg); display: block; }
.dr-anel circle { fill: none; stroke-width: 5; }
.dr-anel .tr { stroke: var(--paper-3); }
.dr-anel .pg { stroke: var(--pos); stroke-linecap: round; transition: stroke-dashoffset var(--d-xl) var(--e-out); }
.dr-anel.risco .pg { stroke: var(--warn); }
.dr-anel.fora .pg { stroke: var(--neg); }
.dr-meta.nova .dr-anel .pg { animation: dr-desenha 1.1s var(--e-out) .15s both; }
@keyframes dr-desenha { from { stroke-dashoffset: var(--c0); } to { stroke-dashoffset: var(--o); } }
.dr-meta-t { flex: 1; min-width: 0; }
.dr-meta-t > b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.3; }
.dr-meta-v { display: block; margin-top: 2px; font-size: 15px; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.dr-meta-v em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.dr-meta-t small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 1px; }
.dr-meta-p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dr-meta-p .dr-av.mini { margin-left: auto; }
.dr-sem { font-size: 11px; font-weight: var(--w-medium); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; color: var(--pos); background: var(--pos-bg); }
.dr-meta.risco .dr-sem { color: var(--warn); background: var(--warn-bg); }
.dr-meta.fora .dr-sem { color: var(--neg); background: var(--neg-bg); }
.dr-seq { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: var(--w-medium); color: #9a4a14; }
.dr-seq svg, .dr-seqs-i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dr-plac { padding: 12px; border-radius: var(--r-2); background: var(--paper-2); }
.dr-plac-n { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dr-plac-n > b { font-size: 28px; font-weight: var(--w-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dr-plac-n > b em { font-style: normal; font-size: 15px; color: var(--ink-3); }
.dr-plac-n > span { font-size: 13px; color: var(--ink-2); }
.dr-plac-n small { flex-basis: 100%; font-size: 12px; }
.dr-plac-n small.pos { color: var(--pos); } .dr-plac-n small.neg { color: var(--neg); }
.dr-plac-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.dr-plac-t th { font-weight: 400; color: var(--ink-2); text-align: left; padding: 4px 6px 4px 0; }
.dr-plac-t thead th { text-align: center; font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); }
.dr-plac-t thead th span { display: block; text-transform: uppercase; letter-spacing: .04em; }
.dr-plac-t td { text-align: center; padding: 4px 2px; }
.dr-plac-t td i { display: inline-block; width: 18px; height: 18px; border-radius: 6px; background: var(--paper-3); vertical-align: middle; }
.dr-plac-t td i.ok { background: var(--pos); }
.dr-plac-t td i.no { background: var(--neg-bg); box-shadow: inset 0 0 0 1.5px var(--neg); }

.dr-selos { display: grid; gap: 8px; }
.dr-selo { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-2); background: var(--paper-2); color: var(--ink-3); }
.dr-selo > svg { width: 20px; height: 20px; flex: none; }
.dr-selo b { display: block; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); }
.dr-selo small { font-size: 11.5px; }
.dr-selo.ganho { background: color-mix(in srgb, var(--c) 10%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); color: var(--c); }
.dr-selo.ganho b { color: var(--ink); font-weight: var(--w-strong); }

/* as reuniões anteriores e as metas históricas */
.dr-rps { display: grid; gap: 8px; }
.dr-rp { border-radius: var(--r-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.dr-rp.ext { box-shadow: 0 0 0 1px var(--hair), inset 3px 0 0 var(--warn); }
.dr-rp[open] { box-shadow: 0 0 0 1px var(--hair-2); }
.dr-rp > summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: var(--r-2); }
.dr-rp > summary::-webkit-details-marker { display: none; }
.dr-rp > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--d-sm) var(--e-out); }
.dr-rp[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.dr-rp > summary:hover { background: var(--paper-2); }
.dr-rp > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dr-rp-d { flex: none; display: flex; flex-direction: column; align-items: center; width: 50px; padding: 5px 0; border-radius: 9px; background: var(--paper-2); }
.dr-rp-d b { font: 600 13.5px/1.1 var(--mono); }
.dr-rp-d small { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.dr-rp-t { flex: 1; min-width: 0; }
.dr-rp-tipo { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-rp.ext .dr-rp-tipo { color: var(--warn); }
.dr-rp-t b { display: block; font-size: 13.5px; font-weight: var(--w-strong); line-height: 1.3; }
.dr-rp-t small { font-size: 12px; color: var(--ink-3); }
.dr-rp-q { display: flex; flex: none; }
.dr-rp-q .dr-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.dr-rp-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 4px 14px 16px; border-top: 1px solid var(--hair); }
.dr-rp-c h4 { margin: 12px 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-rp-dec { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dr-rp-dec li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.dr-rp-dec .tag { margin-left: 2px; vertical-align: 1px; }
.dr-rp-m { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.dr-rp-m .pos { color: var(--pos); } .dr-rp-m .neg { color: var(--neg); }
.dr-rp-f { display: grid; gap: 8px; }
.dr-rp-fi { display: flex; gap: 8px; align-items: flex-start; }
.dr-rp-fi p { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--paper-2); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.dr-rp-fi p > b:first-child { color: var(--c); margin-right: 2px; }
.dr-graf { display: block; width: 100%; height: auto; }
.dr-graf text, .dr-graf .br, .dr-graf rect { stroke: none; }
.dr-graf .gr { stroke: var(--hair); stroke-width: 1; }
.dr-graf .cem { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.dr-graf text { fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.dr-graf .ey { font-size: 10px; text-anchor: end; }
.dr-graf .ex { font-size: 11px; text-anchor: middle; fill: var(--ink-2); }
.dr-graf .eg { font-size: 11px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.dr-graf .br { transition: opacity var(--d-xs) var(--e-ui); }
.dr-graf:hover .br { opacity: .55; } .dr-graf .br:hover { opacity: 1; }
.dr-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.dr-leg span { display: inline-flex; align-items: center; gap: 6px; }
.dr-leg i { width: 10px; height: 10px; border-radius: 3px; }
.dr-leg i.cem { height: 0; border-top: 1.5px dashed var(--ink-3); border-radius: 0; width: 14px; }
.dr-seqs { display: grid; gap: 8px; }
.dr-seqs-n { display: flex; align-items: baseline; gap: 10px; padding: 12px; border-radius: var(--r-2); background: var(--paper-2); }
.dr-seqs-n b { font-size: 28px; font-weight: var(--w-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dr-seqs-n span { font-size: 13px; color: var(--ink-2); }
.dr-seqs-i { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--hair); font-size: 13px; }
.dr-seqs-i svg { color: #9a4a14; flex: none; }
.dr-seqs-i.zero svg { color: var(--ink-3); opacity: .5; }
.dr-seqs-i b { font-weight: var(--w-medium); }
.dr-seqs-i span { margin-left: auto; color: var(--ink-3); font-size: 12px; text-align: right; }
.dr-hf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dr-hf button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-2); background: var(--paper); box-shadow: 0 0 0 1px var(--hair-2); }
.dr-hf button i { width: 8px; height: 8px; border-radius: 50%; }
.dr-hf button[aria-pressed="true"] { color: var(--ink); background: var(--paper-2); box-shadow: 0 0 0 1.5px var(--ink-2); font-weight: var(--w-medium); }
.dr-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; }
.dr-ir svg { width: 14px; height: 14px; }
.dr-hist-t .sec { display: block; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 980px) { .dr-g2, .dr-rp-c { grid-template-columns: 1fr; } .dr-rp-c { gap: 0; } }
@media (max-width: 720px) {
  .dr-bol { grid-template-columns: 1fr; }
  .dr-plac-t th[scope="row"] { font-size: 11px; }
  .dr-plac-t td i { width: 14px; height: 14px; border-radius: 4px; }
  .dr-rp > summary { gap: 10px; padding: 10px; flex-wrap: wrap; }
  .dr-rp-t { flex-basis: calc(100% - 80px); }
  .dr-rp-q { margin-left: 60px; }
  .dr-rp > summary::after { margin-left: auto; }
  .dr-rp-c { padding: 0 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .dr-confete { display: none; } .dr-meta.nova .dr-anel .pg, .dr-festa, .dr-meta.nova { animation: none; } .dr-anel .pg { transition: none; } }

/* ---------- Nova venda ---------- */
.nv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .nv { grid-template-columns: minmax(0, 1fr); } }
.nv-item { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr) 70px auto; gap: 8px; align-items: end; padding: 12px 0; border-top: 1px solid var(--hair); }
.nv-item:first-child { border-top: 0; padding-top: 0; }
.nv-item .x { margin-bottom: 3px; color: var(--ink-3); }
.nv-item .campo > span { font-size: 12px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) { .nv-item { grid-template-columns: 1fr 1fr; } .nv-item .campo:first-child { grid-column: 1 / -1; } .nv-item .x { justify-self: end; } }
.nv-resumo { position: sticky; top: calc(var(--faixa-h) + 84px); }
.nv-tot { font-size: 28px; font-weight: var(--w-display); letter-spacing: -.02em; }
.pix-qr { width: 132px; height: 132px; background: #fff; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.pix-qr svg { width: 100%; height: 100%; }
.pix-qr rect { fill: #111; stroke: none; }

/* bandeiras */
.bandeiras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bandeiras img { height: 22px; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--hair); }
.carteira { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 4px; background: #000; color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; }
.carteira.g { background: #fff; color: #3c4043; box-shadow: 0 0 0 1px var(--hair-2); }
.carteira.g b { color: #4285f4; }