/* ===== TOKENS — :root traz a paleta clara completa; os dois blocos
   seguintes redefinem SÓ tokens, nunca componentes. ===== */
:root {
  --plane:#f7f8f6; --surface:#fcfcfb; --surface-2:#f1f2ef; --surface-3:#e9eae6;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --rule:#e1e0d9; --rule-strong:#c3c2b7;
  --accent:#16514d; --accent-ink:#ffffff; --accent-soft:rgba(22,81,77,.09);
  --accent-mid:rgba(22,81,77,.22);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
  --good:#0ca30c; --good-text:#006300; --warn:#fab219; --warn-text:#8a5a00;
  --crit:#d03b3b; --crit-text:#a32626;
  --shadow:0 1px 2px rgba(11,11,11,.04); --pop-shadow:0 8px 28px rgba(11,11,11,.13);
  --r:10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane:#0d0d0d; --surface:#1a1a19; --surface-2:#232322; --surface-3:#2c2c2a;
    --ink:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --rule:#2c2c2a; --rule-strong:#383835;
    --accent:#4fd1c0; --accent-ink:#0d0d0d; --accent-soft:rgba(79,209,192,.14);
    --accent-mid:rgba(79,209,192,.30);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
    --good:#0ca30c; --good-text:#0ca30c; --warn:#fab219; --warn-text:#fab219;
    --crit:#d03b3b; --crit-text:#e66767;
    --shadow:0 1px 2px rgba(0,0,0,.3); --pop-shadow:0 8px 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --plane:#0d0d0d; --surface:#1a1a19; --surface-2:#232322; --surface-3:#2c2c2a;
  --ink:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
  --rule:#2c2c2a; --rule-strong:#383835;
  --accent:#4fd1c0; --accent-ink:#0d0d0d; --accent-soft:rgba(79,209,192,.14);
  --accent-mid:rgba(79,209,192,.30);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  --good:#0ca30c; --good-text:#0ca30c; --warn:#fab219; --warn-text:#fab219;
  --crit:#d03b3b; --crit-text:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.3); --pop-shadow:0 8px 28px rgba(0,0,0,.5);
}

* { box-sizing:border-box; }
body { margin:0; background:var(--plane); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.mono { font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.num { font-variant-numeric:tabular-nums; }
h1,h2,h3 { margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

.wrap { max-width:1180px; margin:0 auto; padding-inline:20px; }
.topbar { background:var(--surface); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:30; }
.topbar-in { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  justify-content:space-between; padding-block:14px; }
.brand { display:flex; align-items:baseline; gap:10px; padding-bottom:5px; }
.brand h1 { font-size:16px; }
.brand span { font-size:12px; color:var(--ink-muted); }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.field { display:flex; flex-direction:column; gap:4px; position:relative; }
.field label, .flabel { font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
select, .ctl {
  font:inherit; font-size:13px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--rule-strong); border-radius:8px; padding:7px 30px 7px 10px;
  appearance:none; cursor:pointer; min-width:150px; text-align:left; height:35px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.ctl:hover { background-color:var(--surface-3); }

/* ===== POPOVER DE PERÍODO ===== */
.pop { position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:12px;
  box-shadow:var(--pop-shadow); display:flex; overflow:hidden; }
.pop-presets { border-right:1px solid var(--rule); padding:8px; min-width:168px;
  display:flex; flex-direction:column; gap:1px; }
.preset { font:inherit; font-size:13px; text-align:left; background:none; border:0;
  color:var(--ink-2); padding:7px 10px; border-radius:7px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preset:hover { background:var(--surface-2); color:var(--ink); }
.preset[aria-current="true"] { color:var(--ink); font-weight:500; }
.preset .ck { font-size:15px; font-weight:700; color:var(--accent); visibility:hidden; }
.preset[aria-current="true"] .ck { visibility:visible; }
.pop-cal { padding:12px; }
.cal-head { display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:8px; }
.cal-head strong { font-size:13px; font-weight:600; }
.navb { font:inherit; background:var(--surface-2); border:1px solid var(--rule);
  color:var(--ink-2); width:26px; height:26px; border-radius:7px; cursor:pointer;
  display:grid; place-items:center; font-size:13px; }
.navb:hover:not(:disabled) { background:var(--surface-3); color:var(--ink); }
.navb:disabled { opacity:.35; cursor:not-allowed; }
.cal-grid { display:grid; grid-template-columns:repeat(7,30px); gap:2px; }
.dow { font-size:10px; color:var(--ink-muted); text-align:center; padding-bottom:4px;
  text-transform:uppercase; letter-spacing:.04em; }
.day { font:inherit; font-size:12px; height:30px; border:0; border-radius:7px;
  background:none; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.day:hover:not(:disabled) { background:var(--surface-3); }
.day:disabled { color:var(--rule-strong); cursor:default; }
.day.in { background:var(--accent-soft); border-radius:0; }
.day.edge { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.day.edge.a { border-radius:7px 0 0 7px; } .day.edge.b { border-radius:0 7px 7px 0; }
.day.edge.solo { border-radius:7px; }
.day.hoje:not(.edge) { box-shadow:inset 0 0 0 1px var(--rule-strong); }
.pop-foot { border-top:1px solid var(--rule); margin-top:10px; padding-top:10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pop-foot .rng { font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.banner { display:flex; gap:10px; align-items:flex-start; margin-block:18px 0;
  padding:10px 14px; border-radius:var(--r); background:var(--accent-soft);
  color:var(--ink-2); font-size:13px; }
.banner b { color:var(--ink); font-weight:600; }
.who { display:flex; gap:12px; align-items:center; margin-top:16px; padding:12px 14px;
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; background:var(--surface); font-size:13px;
  color:var(--ink-2); }
.who b { color:var(--ink); font-weight:600; }

main { padding-bottom:56px; }
.section { margin-top:26px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.section-head h2 { font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
.hint { font-size:12px; color:var(--ink-muted); }

.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; }
.tile { background:var(--surface); padding:16px 18px; display:flex;
  flex-direction:column; gap:5px; }
.tile .k { font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
.tile .v { font-size:27px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.tile .d { font-size:12px; color:var(--ink-2); }
.up { color:var(--good-text); font-weight:500; }
.down { color:var(--crit-text); font-weight:500; }

.card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); position:relative; }
.card-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.card-head h3 { font-size:14px; }
.card-head .sub { font-size:12px; color:var(--ink-muted); }
.grid-2 { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start; }
.grid-even { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }

.meter-top { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.meter-pct { font-size:30px; font-weight:600; letter-spacing:-.02em; }
.meter-track { position:relative; height:12px; background:var(--surface-3);
  border-radius:6px; }
.meter-fill { height:100%; border-radius:6px 4px 4px 6px; }
.meter-pace { position:absolute; top:-5px; bottom:-5px; width:2px;
  background:var(--ink-muted); border-radius:1px; }
.meter-legend { display:flex; justify-content:space-between; gap:12px; margin-top:9px;
  font-size:12px; color:var(--ink-muted); }
.status { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  font-weight:500; padding:3px 9px; border-radius:999px; }
.status.good { background:rgba(12,163,12,.12); color:var(--good-text); }
.status.warn { background:rgba(250,178,25,.16); color:var(--warn-text); }
.status.neut { background:var(--surface-3); color:var(--ink-2); }

.bars { display:flex; flex-direction:column; gap:11px; }
.bar-row { display:grid; grid-template-columns:minmax(72px,auto) 1fr auto; gap:12px;
  align-items:center; }
.bar-name { font-size:13px; color:var(--ink-2); }
.bar-track { background:var(--surface-3); border-radius:5px; height:10px; }
.bar-fill { height:100%; border-radius:0 4px 4px 0; min-width:3px; }
.bar-val { font-size:12.5px; font-weight:500; text-align:right; white-space:nowrap; }
.bar-sub { font-size:11px; color:var(--ink-muted); text-align:right; }

/* ===== PLACAR DO TIME ===== */
.rank { display:flex; flex-direction:column; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.rank-row { display:grid; grid-template-columns:26px 1fr auto auto auto; gap:12px;
  align-items:center; background:var(--surface); padding:11px 14px; }
.rank-row.eu { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.rank-pos { font-size:13px; font-weight:600; color:var(--ink-muted);
  font-variant-numeric:tabular-nums; text-align:center; }
.rank-row.eu .rank-pos { color:var(--ink); }
.rank-nome { display:flex; align-items:center; gap:8px; font-size:13.5px; min-width:0; }
.rank-nome b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-eu { font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); font-weight:600; flex:none; }
.rank-n { text-align:right; min-width:56px; }
.rank-n .b { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
  line-height:1.2; }
.rank-n .s { font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); }

.legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; }
.legend span { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--ink-2); }
.swatch { width:10px; height:10px; border-radius:3px; flex:none; }

.chart-wrap { position:relative; }
.chart-wrap svg { width:100%; height:auto; display:block; }
.tip { position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--plane); border-radius:8px; padding:8px 11px;
  font-size:12px; white-space:nowrap; z-index:5; transform:translate(-50%,-100%);
  box-shadow:0 4px 12px rgba(0,0,0,.18); }
.tip.on { opacity:1; }
.tip .tip-h { font-weight:600; margin-bottom:4px; }
.tip .tip-r { display:flex; align-items:center; gap:7px; }
.tip .tip-r i { width:8px; height:8px; border-radius:2px; display:block; flex:none; }

.table-scroll { overflow-x:auto; margin-inline:-18px; padding-inline:18px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th { text-align:left; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; padding:0 12px 8px 0;
  border-bottom:1px solid var(--rule); white-space:nowrap; }
td { padding:10px 12px 10px 0; border-bottom:1px solid var(--rule); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
th.r, td.r { text-align:right; padding-right:0; padding-left:18px; }
.aluno b { font-weight:500; display:block; white-space:nowrap; }
.aluno span { font-size:11.5px; color:var(--ink-muted); white-space:nowrap; }
.chip { display:inline-block; font-size:11.5px; padding:2px 7px; border-radius:5px;
  background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-2);
  white-space:nowrap; }
.chip.empty { color:var(--ink-muted); font-style:italic; }
.chip.man { background:var(--accent-soft); border-color:var(--accent-mid);
  color:var(--accent); }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:500; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.pill.ok { background:rgba(12,163,12,.12); color:var(--good-text); }
.pill.ref { background:rgba(208,59,59,.12); color:var(--crit-text); }
.pill.cb { background:rgba(250,178,25,.16); color:var(--warn-text); }
.dot { width:6px; height:6px; border-radius:50%; flex:none; }

.alert { background:var(--surface); border:1px solid var(--rule);
  border-left:3px solid var(--warn); border-radius:0 var(--r) var(--r) 0; padding:18px; }
.alert-head { display:flex; gap:12px; align-items:flex-start;
  justify-content:space-between; flex-wrap:wrap; margin-bottom:6px; }
.alert h3 { font-size:14px; }
.alert p { margin:0 0 14px; font-size:13px; color:var(--ink-2); max-width:64ch; }
.assign { display:flex; gap:6px; align-items:center; }
.assign select { min-width:0; width:132px; font-size:12px; padding:5px 26px 5px 8px;
  height:30px; background-position:calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
.ok-msg { display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--good-text); padding:12px 0 2px; }

.btn { font:inherit; font-size:12px; font-weight:500; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--rule-strong); border-radius:7px;
  padding:5px 11px; cursor:pointer; white-space:nowrap; }
.btn:hover { background:var(--surface-3); color:var(--ink); }
.btn.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.pri:hover { opacity:.88; background:var(--accent); color:var(--accent-ink); }
.btn[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink);
  border-color:var(--accent); }
.empty-state { text-align:center; padding:28px 12px; color:var(--ink-muted); font-size:13px; }

/* ===== ALTERNADOR DE TEMA ===== */
.theme { display:flex; gap:2px; background:var(--surface-2); height:35px;
  border:1px solid var(--rule-strong); border-radius:8px; padding:2px; }
.theme button { font:inherit; font-size:13px; width:32px; border:0; border-radius:6px;
  background:none; color:var(--ink-muted); cursor:pointer; display:grid; place-items:center; }
.theme button:hover { color:var(--ink); }
.theme button[aria-pressed="true"] { background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); }

/* ===== BUSCA ===== */
.tbl-top { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px; flex-wrap:wrap; }
.search { position:relative; flex:1; min-width:200px; max-width:400px; }
.search input { font:inherit; font-size:13px; width:100%; height:34px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--rule-strong); border-radius:8px;
  padding:0 32px; }
.search input::placeholder { color:var(--ink-muted); }
.search input::-webkit-search-cancel-button { display:none; }
.search .ico { position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-muted); font-size:14px; pointer-events:none; }
.search .clr { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0;
  background:none; color:var(--ink-muted); cursor:pointer; font-size:16px; line-height:1;
  width:22px; height:22px; border-radius:5px; }
.search .clr:hover { background:var(--surface-3); color:var(--ink); }

/* ===== LINHA CLICÁVEL ===== */
tbody tr.go { cursor:pointer; }
tbody tr.go:hover { background:var(--surface-2); }
tbody tr.go:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
td.chev { color:var(--ink-muted); text-align:right; width:18px; padding-left:8px; }
tbody tr.go:hover td.chev { color:var(--accent); }

/* ===== PERFIL DA COMPRA ===== */
.scrim { position:fixed; inset:0; background:rgba(11,11,11,.4); z-index:50; opacity:0;
  transition:opacity .16s; }
.scrim.on { opacity:1; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(450px,100%); z-index:51;
  background:var(--surface); border-left:1px solid var(--rule); overflow-y:auto;
  transform:translateX(100%); transition:transform .2s ease; box-shadow:var(--pop-shadow); }
.drawer.on { transform:none; }
.dr-head { position:sticky; top:0; z-index:2; background:var(--surface);
  border-bottom:1px solid var(--rule); padding:15px 18px; display:flex;
  align-items:flex-start; justify-content:space-between; gap:12px; }
.dr-head .mono { font-size:12.5px; }
.dr-x { font:inherit; font-size:17px; line-height:1; width:28px; height:28px; flex:none;
  border:1px solid var(--rule); background:var(--surface-2); color:var(--ink-2);
  border-radius:7px; cursor:pointer; }
.dr-x:hover { background:var(--surface-3); color:var(--ink); }
.dr-body { padding:18px; }
.dr-hero { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dr-val { font-size:31px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.dr-prod { font-size:14px; margin-top:6px; }
.dr-sec { margin-top:18px; padding-top:15px; border-top:1px solid var(--rule); }
.dr-sec h4 { margin:0 0 11px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
.dl { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13px; margin:0; }
.dl dt { color:var(--ink-muted); white-space:nowrap; }
.dl dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.seg { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.seg-item { display:flex; flex-direction:column; gap:1px; padding:6px 10px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:7px; }
.seg-item b { font-size:12.5px; font-weight:500;
  font-family:"IBM Plex Mono", ui-monospace, monospace; }
.seg-item span { font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-muted); }
.dr-note { font-size:12.5px; color:var(--ink-2); background:var(--accent-soft);
  border-radius:8px; padding:10px 12px; margin-top:12px; }

/* ===== MEDIDOR DE FAIXAS ===== */
.meter-sub { font-size:14px; font-weight:400; color:var(--ink-muted); letter-spacing:0; }
.status.crit { background:rgba(208,59,59,.13); color:var(--crit-text); }
.faixa-track { position:relative; height:14px; background:var(--surface-3);
  border-radius:7px; margin-top:2px; }
/* Tudo à esquerda da faixa 1 é reprovação — a zona é tingida para isso ler
   antes de qualquer número. */
.faixa-zona { position:absolute; left:0; top:0; bottom:0; border-radius:7px 0 0 7px;
  background:rgba(208,59,59,.13); }
.faixa-fill { position:absolute; left:0; top:0; bottom:0; border-radius:7px; min-width:4px; }
.faixa-tick { position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--rule-strong); border-radius:1px; }
.faixa-proj { position:absolute; top:-8px; bottom:-8px; width:2px; background:var(--ink);
  border-radius:1px; }
.faixa-proj::after { content:''; position:absolute; top:-3px; left:-3px;
  border:4px solid transparent; border-top-color:var(--ink); }
.faixa-legend { position:relative; height:15px; margin-top:8px; font-size:10.5px;
  color:var(--ink-muted); }
.faixa-legend span { position:absolute; transform:translateX(-50%); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.faixa-legend span.on { color:var(--ink); font-weight:500; }
.faixa-legend span.fim { transform:translateX(-100%); }

/* ===== MENSAGEM DE RITMO ===== */
.ritmo { display:flex; gap:11px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  border-radius:var(--r); font-size:13px; line-height:1.5; }
.ritmo .ic { font-size:14px; line-height:1.4; flex:none; }
.ritmo b { display:block; margin-bottom:2px; }
.ritmo.good { background:rgba(12,163,12,.10); color:var(--ink-2); }
.ritmo.good b { color:var(--good-text); }
.ritmo.warn { background:rgba(250,178,25,.14); color:var(--ink-2); }
.ritmo.warn b { color:var(--warn-text); }
.ritmo.crit { background:rgba(208,59,59,.12); color:var(--ink-2); }
.ritmo.crit b { color:var(--crit-text); }

/* ===== CALENDÁRIO DE DIAS ÚTEIS (gestor) ===== */
.wd-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:4px; }
.wd-dow { font-size:9.5px; color:var(--ink-muted); text-align:center; padding-bottom:3px;
  text-transform:uppercase; letter-spacing:.05em; }
.wd { font:inherit; font-size:11.5px; height:29px; border-radius:6px; cursor:pointer;
  border:1px solid transparent; background:var(--accent-soft); color:var(--ink);
  font-variant-numeric:tabular-nums; }
.wd.off { background:transparent; border-color:var(--rule); color:var(--ink-muted); }
.wd.fer { background:rgba(250,178,25,.16); color:var(--warn-text); }
.wd.man { background:rgba(208,59,59,.14); color:var(--crit-text); font-weight:600; }
.wd:hover { outline:2px solid var(--accent); outline-offset:1px; }
.wd-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:11.5px;
  color:var(--ink-2); }
.wd-legend span { display:inline-flex; align-items:center; gap:6px; }
.wd-key { width:11px; height:11px; border-radius:3px; flex:none; border:1px solid transparent; }
.faixa-lista { display:flex; flex-direction:column; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; margin-top:14px; }
.faixa-linha { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
  background:var(--surface); padding:9px 13px; font-size:13px; }
.faixa-linha b { font-weight:600; }
.faixa-linha .cal { color:var(--ink-muted); font-size:11.5px; }
.faixa-linha .alvo { font-weight:600; font-variant-numeric:tabular-nums; }
.faixa-linha.min { background:var(--surface-2); }

/* ===== BOTÃO DE ATUALIZAR ===== */
.refresh { display:inline-flex; align-items:center; gap:7px; background-image:none;
  padding:7px 12px; min-width:0; white-space:nowrap; }
.refresh .rf-ic { font-size:14px; line-height:1; display:inline-block; }
.refresh.girando .rf-ic { animation:gira .6s linear; }
@keyframes gira { to { transform:rotate(360deg); } }
.refresh .rf-lbl { color:var(--ink-muted); font-size:12px; }

/* ===== FILTRO DE ÓRFÃS NO PAINEL DE VENDAS ===== */
.chip-filtro { display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  background:rgba(250,178,25,.16); border-color:transparent; color:var(--warn-text);
  font-weight:500; }
.chip-filtro:hover { background:rgba(250,178,25,.26); color:var(--warn-text); }
.chip-filtro[aria-pressed="true"] { background:var(--warn); color:#3a2600;
  border-color:transparent; }
.chip-filtro .pt { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.sem-vend { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:500; padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:rgba(250,178,25,.16); color:var(--warn-text); }

/* ===== TOAST ===== */
.toast { position:fixed; left:50%; bottom:24px; z-index:60; opacity:0;
  transform:translateX(-50%) translateY(8px); background:var(--ink); color:var(--plane);
  padding:11px 16px; border-radius:10px; font-size:13px; line-height:1.45;
  max-width:min(520px,92vw); box-shadow:0 6px 20px rgba(0,0,0,.25); pointer-events:none;
  transition:opacity .18s, transform .18s; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== NAVEGAÇÃO PAINEL / EQUIPE ===== */
.topo-esq { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.nav { display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--rule-strong);
  border-radius:8px; padding:2px; }
.nav button { font:inherit; font-size:13px; border:0; border-radius:6px; background:none;
  color:var(--ink-muted); cursor:pointer; padding:5px 13px; }
.nav button:hover { color:var(--ink); }
.nav button[aria-current="true"] { background:var(--surface); color:var(--ink);
  font-weight:500; box-shadow:var(--shadow); }

/* ===== CAMPOS ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"] {
  font:inherit; font-size:13px; color:var(--ink); background:var(--surface-2); width:100%;
  border:1px solid var(--rule-strong); border-radius:8px; padding:7px 10px; height:35px; }
input:disabled { color:var(--ink-muted); cursor:not-allowed; }
.campo { display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo label { font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
.campo .erro { font-size:11.5px; color:var(--crit-text); }
.campo.ruim input { border-color:var(--crit); }
.form-linha { display:grid; gap:12px; align-items:end; }

/* ===== LISTA DA EQUIPE ===== */
.eq { display:flex; flex-direction:column; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.eq-row { background:var(--surface); }
.eq-cab { display:grid; grid-template-columns:1fr auto auto auto auto 26px; gap:14px;
  align-items:center; padding:13px 16px; cursor:pointer; width:100%; border:0;
  background:none; font:inherit; text-align:left; color:var(--ink); }
.eq-cab:hover { background:var(--surface-2); }
.eq-nome { display:flex; align-items:center; gap:9px; min-width:0; }
.eq-nome b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eq-cab .seta { color:var(--ink-muted); font-size:13px; transition:transform .15s; }
.eq-row.aberta .seta { transform:rotate(90deg); }
.eq-row.inativa .eq-nome b, .eq-row.inativa .chip { opacity:.55; }
.eq-corpo { padding:2px 16px 18px; border-top:1px solid var(--rule); }
.eq-bloco { padding:16px 0; border-bottom:1px solid var(--rule); }
.eq-bloco:last-child { border-bottom:0; padding-bottom:0; }
.eq-bloco h4 { margin:0 0 12px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; }
.eq-acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.aviso { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-2);
  background:rgba(250,178,25,.13); border-radius:8px; padding:10px 12px; margin-top:12px;
  line-height:1.5; }
.aviso b { color:var(--ink); }

/* ===== GERADOR DE LINKS ===== */
.link-row { display:grid; grid-template-columns:96px 1fr auto auto; gap:12px;
  align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); }
.link-row:last-child { border-bottom:0; }
.link-row .canal { font-size:12.5px; color:var(--ink-2); }
.link-row .url { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11.5px;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:6px;
  padding:5px 9px; }
.link-row .cnt { font-size:11px; color:var(--ink-muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.link-row .cnt.cheio { color:var(--crit-text); font-weight:500; }

/* ===== HISTÓRICO ===== */
.hist { display:flex; flex-direction:column; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.hist-item { background:var(--surface); padding:11px 15px; display:grid;
  grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline; font-size:13px; }
.hist-item .q { color:var(--ink-muted); font-size:11.5px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.hist-item .oq b { font-weight:500; }
.hist-item .nota { font-size:11.5px; color:var(--ink-muted); }

@media (max-width:760px) {
  .eq-cab { grid-template-columns:1fr auto 26px; gap:10px; }
  .eq-cab .esconde { display:none; }
  .link-row { grid-template-columns:1fr auto; gap:8px; }
  .link-row .canal { grid-column:1 / -1; }
  .hist-item { grid-template-columns:1fr; gap:3px; }
}

/* ===== MEUS LINKS (vendedor) ===== */
.links-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.link-card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; }
.link-topo { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.link-topo h3 { font-size:15px; }
.link-ticket { font-size:17px; font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.link-box { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:8px;
  padding:10px 12px; word-break:break-all; line-height:1.55; user-select:all; }
.link-btns { display:flex; gap:8px; flex-wrap:wrap; }
.link-btns .btn { padding:8px 14px; font-size:13px; }
.msg-box { font-size:12.5px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--rule); border-radius:8px; padding:10px 12px;
  white-space:pre-wrap; line-height:1.55; }
.link-rodape { display:flex; justify-content:space-between; gap:10px; font-size:12px;
  color:var(--ink-muted); border-top:1px solid var(--rule); padding-top:11px; margin-top:auto; }
.link-rodape b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ===== GERENCIADOR DE OFERTAS (gestor) ===== */
.vend-check { display:flex; flex-wrap:wrap; gap:8px; }
.vend-check label { display:inline-flex; align-items:center; gap:8px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:999px;
  padding:6px 13px; cursor:pointer; }
.vend-check label:hover { border-color:var(--rule-strong); }
.vend-check label.on { background:var(--accent-soft); border-color:var(--accent-mid); }
.vend-check label.off { opacity:.5; }
.vend-check input { accent-color:var(--accent); width:15px; height:15px; margin:0; flex:none; }
textarea { font:inherit; font-size:13px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--rule-strong); border-radius:8px; padding:9px 11px; width:100%;
  min-height:92px; resize:vertical; line-height:1.55; }
.of-cab { grid-template-columns:1fr auto auto auto 26px; }
.prev-row { display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--rule); }
.prev-row:last-child { border-bottom:0; }
.prev-row .qn { font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.prev-row .lk { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11.5px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:6px;
  padding:5px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:760px) {
  .of-cab { grid-template-columns:1fr auto 26px; }
  .prev-row { grid-template-columns:1fr auto; }
  .prev-row .qn { grid-column:1 / -1; }
}

@media (max-width:900px) {
  .grid-2, .grid-even { grid-template-columns:1fr; }
  .tiles { grid-template-columns:repeat(2,1fr); }
  .pop { flex-direction:column; right:auto; left:0; }
  .pop-presets { border-right:0; border-bottom:1px solid var(--rule);
    flex-direction:row; flex-wrap:wrap; min-width:0; }
}
@media (max-width:560px) {
  .wrap { padding-inline:16px; }
  .tile .v { font-size:23px; }
  .controls { width:100%; }
  .field { flex:1; }
  select, .ctl { min-width:0; width:100%; }
  .pop { position:fixed; left:16px; right:16px; top:76px; max-height:76vh; overflow:auto; }
  .cal-grid { grid-template-columns:repeat(7,1fr); }
  .bar-row { grid-template-columns:minmax(62px,auto) 1fr auto; gap:9px; }
  .rank-row { grid-template-columns:20px 1fr auto auto auto; gap:7px; padding:10px; }
  .rank-n { min-width:44px; }
}
@media (max-width:420px) { .tiles { grid-template-columns:1fr; } }

/* ===== LOGIN ===== */
.login-tela { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:100%; max-width:390px; background:var(--surface);
  border:1px solid var(--rule); border-radius:14px; padding:30px 28px;
  box-shadow:0 2px 14px rgba(11,11,11,.06); }
.login-card h1 { font-size:20px; margin-bottom:4px; }
.login-card .sub { font-size:13.5px; color:var(--ink-muted); margin-bottom:22px; }
.login-campos { display:flex; flex-direction:column; gap:14px; }
.login-card .btn { width:100%; justify-content:center; padding:10px; font-size:14px; }
.login-erro { font-size:13px; color:var(--crit-text); background:var(--crit-soft);
  border-radius:8px; padding:10px 12px; margin-top:14px; line-height:1.5; }
.login-nota { font-size:12px; color:var(--ink-muted); margin-top:18px;
  padding-top:16px; border-top:1px solid var(--rule); line-height:1.55; }

/* ===== ESTADOS DE CARGA E ERRO ===== */
.carregando { display:flex; align-items:center; gap:10px; color:var(--ink-muted);
  font-size:13.5px; padding:40px 0; justify-content:center; }
.spin { width:15px; height:15px; border:2px solid var(--rule-strong);
  border-top-color:var(--accent); border-radius:50%; animation:girar .7s linear infinite; }
@keyframes girar { to { transform:rotate(360deg); } }
.falha { background:var(--crit-soft); border-radius:var(--r); padding:16px 18px;
  font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.falha b { display:block; color:var(--crit-text); margin-bottom:3px; }
.falha code { background:var(--surface); border:1px solid var(--rule); font-size:12px; }

/* ===== IDENTIFICAÇÃO DO USUÁRIO NO TOPO ===== */
.eu-topo { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }
.eu-topo .papel { font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); padding:2px 7px;
  border-radius:999px; font-weight:600; }