/* ============ TOKENS ============
   Versão 2.0 do visual (28/10/2026): escuro por padrão, ciano e laranja
   como identidade, e a cor de resultado continua sendo a régua — vermelho
   ruim, âmbar médio, verde bom, ciano acima. Modo claro no botão do topo. */
:root {
  color-scheme: light;
  --plane:        #f2f5f9;
  --surface:      #ffffff;
  --surface-2:    #f5f7fb;
  --surface-3:    #e9eef5;
  --ring:         rgba(15,23,42,.10);
  --ring-strong:  rgba(15,23,42,.22);
  --shadow:       0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);
  --ink:          #0f172a;
  --ink-2:        #475569;
  --ink-3:        #7b8799;
  --grid:         #e6eaf0;
  --axis:         #c9d2dd;

  --brand:        #0e7490;
  --brand-soft:   #dff4f9;
  --brand-ink:    #ffffff;
  --accent:       #ea580c;
  --accent-soft:  #fdebdf;

  /* semáforo — regra de 4 níveis (§3.3 do escopo) */
  --st-crit: #dc2626; --st-crit-bg: rgba(220,38,38,.10);
  --st-warn: #b45309; --st-warn-bg: rgba(180,83,9,.11);
  --st-good: #15803d; --st-good-bg: rgba(21,128,61,.10);
  --st-top:  #0e7490; --st-top-bg:  rgba(14,116,144,.11);

  /* categórica (identidade): ciano, laranja, violeta, âmbar, rosa */
  --s1: #0e7490; --s2: #ea580c; --s3: #7c3aed; --s4: #ca8a04; --s5: #db2777;
  /* ordinal (etapas, anos): rampa de ciano */
  --o1: #a5e3f0; --o2: #5cc6dc; --o3: #0e7490; --o4: #0b4f61;
  --neutral: #c9d2dd;
  --seq1:#d6f2f8; --seq2:#a5e3f0; --seq3:#5cc6dc; --seq4:#0e7490; --seq5:#0b4f61;

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px;
  --gap: 14px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #090d15; --surface: #10172a; --surface-2: #161f33; --surface-3: #1d2740;
  --ring: rgba(148,163,184,.14); --ring-strong: rgba(148,163,184,.30);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.30);
  --ink: #e8eef7; --ink-2: #a7b3c5; --ink-3: #6f7d93;
  --grid: #1c2537; --axis: #2b3648;
  --brand: #2dd4f0; --brand-soft: rgba(45,212,240,.12); --brand-ink: #06212a;
  --accent: #ff8a2b; --accent-soft: rgba(255,138,43,.14);

  --st-crit: #ff5e5e; --st-crit-bg: rgba(255,94,94,.14);
  --st-warn: #ffb224; --st-warn-bg: rgba(255,178,36,.14);
  --st-good: #2ee59d; --st-good-bg: rgba(46,229,157,.13);
  --st-top:  #2dd4f0; --st-top-bg:  rgba(45,212,240,.13);

  --s1: #2dd4f0; --s2: #ff8a2b; --s3: #a78bfa; --s4: #facc15; --s5: #f472b6;
  --o1: #9be9f7; --o2: #5ddcf3; --o3: #2dd4f0; --o4: #0e8fa8;
  --neutral: #2b3648;
  --seq1:#11303c; --seq2:#0f5566; --seq3:#1593ad; --seq4:#2dd4f0; --seq5:#9be9f7;
}

/* ============ BASE ============ */
* { box-sizing: border-box; }
.app {
  font-family: var(--font-ui); background: var(--plane); color: var(--ink);
  min-height: 100vh; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.app :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}

/* ============ SHELL ============ */
.shell { display: grid; grid-template-columns: 222px 1fr; min-height: 100vh; }
.rail { background: var(--surface); border-right: 1px solid var(--ring); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { padding: 16px 16px 14px; border-bottom: 1px solid var(--ring); display: flex; align-items: center; gap: 11px; }
/* o Sevinho Cientista, mascote da Seven */
.brand-logo { width: 40px; height: 40px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.brand-mark { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.brand-mark b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark span { color: var(--brand); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
/* MÓDULOS — rail esquerdo. Não confundir com as abas do Dashboard (topo). */
.mods { display: flex; flex-direction: column; padding: 12px 10px; gap: 3px; flex: 1; overflow-y: auto; }
.mods-lab { padding: 4px 10px 8px; }
.mod {
  appearance: none; border: 0; background: transparent; text-align: left; font: inherit;
  color: var(--ink-2); cursor: pointer; padding: 9px 11px; border-radius: 9px; position: relative;
  display: flex; align-items: center; gap: 11px; transition: background .12s, color .12s;
}
.mod:hover { background: var(--surface-2); color: var(--ink); }
.mod[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.mod[aria-current="true"]::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.mod svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mod-sub { font-size: 10.5px; color: var(--ink-3); display: block; font-weight: 400; }
.mod[aria-current="true"] .mod-sub { color: color-mix(in srgb, var(--brand) 70%, var(--ink-3)); }

/* BARRA DO TOPO — onde estamos, até quando a base vai, quem está logado, tema */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 54px;
  background: var(--surface); border-bottom: 1px solid var(--ring);
}
.topbar-onde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topbar-onde .eyebrow { color: var(--brand); }
.topbar-onde b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-base { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--ring); border-radius: 999px; padding: 4px 11px 4px 9px; background: var(--surface-2); }
.topbar-base i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-good); box-shadow: 0 0 0 3px var(--st-good-bg); }
.topbar-base b { color: var(--ink); font-weight: 650; }
.basenova { font: inherit; font-size: 11.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent); }
.basenova:hover { background: var(--accent); color: var(--brand-ink); }
.topbar-base.atrasada i { background: var(--st-warn); box-shadow: 0 0 0 3px var(--st-warn-bg); }
.topbar-base.velha i { background: var(--st-crit); box-shadow: 0 0 0 3px var(--st-crit-bg); }
.themebtn {
  appearance: none; border: 1px solid var(--ring); background: var(--surface-2); color: var(--ink-2);
  font: inherit; font-size: 12px; padding: 0; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: inline-grid; place-items: center;
}
.themebtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.themebtn:hover { border-color: var(--brand); color: var(--brand); }

/* ABAS — topo, dentro do módulo Dashboard */
.tabbar {
  display: flex; gap: 4px; padding: 8px 20px; background: var(--surface);
  border-bottom: 1px solid var(--ring); overflow-x: auto;
}
.tab {
  appearance: none; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer; padding: 6px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .12s, background .12s;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, transparent); font-weight: 650; }
.tab svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-foot { padding: 12px 14px; border-top: 1px solid var(--ring); }
.rail-foot p { margin: 0; font-size: 11px; color: var(--ink-3); }
.main { display: flex; flex-direction: column; min-width: 0; }

/* ============ FILTROS ============
   Cada grupo numa caixinha com rótulo, para o filtro não se perder no fundo. */
.filters {
  background: var(--plane); border-bottom: 1px solid var(--ring); padding: 10px 20px;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; position: sticky; top: 0; z-index: 20;
}
.fgroup { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 4px 6px 4px 11px; }
.flabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.chips { display: flex; gap: 2px; background: var(--surface-2); padding: 2px; border-radius: 8px; }
.chip {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background .12s, color .12s;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
select.sel {
  appearance: none; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--ring); border-radius: 7px; padding: 4px 26px 4px 9px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 51%, calc(100% - 9px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select.sel:hover { border-color: var(--brand); }
.spacer { flex: 1; }
.period-note { font-size: 11.5px; color: var(--ink-3); }
.period-note b { color: var(--ink-2); font-weight: 620; }

/* ============ PAINÉIS ============ */
.panel { padding: 18px 20px 30px; }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head .eyebrow { color: var(--brand); }
.panel-head h2 { margin: 3px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--ring); border-radius: var(--r);
  padding: 14px 15px; min-width: 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.card > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 10px; }
.card h3 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.card > header > .hint { flex-basis: 100%; }
.card .hint { font-size: 11px; color: var(--ink-3); }
.stripe { position: absolute; inset: 0 0 auto 0; height: 3px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
/* coluna com dois quadros empilhados, ao lado de um quadro alto */
.pilha { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.pilha > .card:last-child { flex: 1; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
button.card { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
button.card:hover { border-color: var(--brand); transform: translateY(-2px); }
button.card::after { content: "ver detalhe →"; font-size: 10.5px; color: var(--brand); margin-top: 8px; opacity: 0; transition: opacity .12s; }
button.card:hover::after, button.card:focus-visible::after { opacity: 1; }

/* ============ STAT ============ */
.stat-val { font-size: 30px; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 0; }
.stat-val small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.stat-sub { font-size: 11.5px; color: var(--ink-2); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.delta { font-weight: 660; font-variant-numeric: tabular-nums; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .04em;
}
.pill i { font-style: normal; font-size: 9px; }
.t-crit { color: var(--st-crit); border-color: color-mix(in srgb, var(--st-crit) 50%, transparent); background: var(--st-crit-bg); }
.t-warn { color: var(--st-warn); border-color: color-mix(in srgb, var(--st-warn) 50%, transparent); background: var(--st-warn-bg); }
.t-good { color: var(--st-good); border-color: color-mix(in srgb, var(--st-good) 50%, transparent); background: var(--st-good-bg); }
.t-top  { color: var(--st-top);  border-color: color-mix(in srgb, var(--st-top) 50%, transparent);  background: var(--st-top-bg); }
.v-crit { color: var(--st-crit); } .v-warn { color: var(--st-warn); }
.v-good { color: var(--st-good); } .v-top { color: var(--st-top); }

/* ============ CHARTS ============ */
.chart { width: 100%; display: block; }
.chart text { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.ax { font-size: 10px; fill: var(--ink-3); }
.axline { stroke: var(--axis); stroke-width: 1; }
.gl { stroke: var(--grid); stroke-width: 1; }
.dlab { font-size: 10.5px; font-weight: 660; fill: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* legenda que escolhe o que o gráfico mostra */
.legend-btn { gap: 6px; align-items: center; }
.legend-btn button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; color: var(--ink-2);
  background: transparent; border: 1px solid var(--ring-strong); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.legend-btn button:hover { color: var(--ink); border-color: var(--ink-3); }
.legend-btn button[aria-pressed="true"] { color: var(--ink); background: var(--surface-2); border-color: var(--ink-2); }
.legend-btn i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-sep { width: 1px; height: 16px; background: var(--ring-strong); margin: 0 4px; }
/* Configurações → Alertas */
.alertas { display: grid; gap: 10px; margin-bottom: 8px; }
.alerta { border-left: 3px solid var(--st-warn); padding: 6px 0 6px 12px; }
.alerta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.alerta .eyebrow { margin-bottom: 2px; }
.legend em { font-style: normal; font-size: 9.5px; opacity: .85; }
.scroll-x { overflow-x: auto; margin: 0 -15px; padding: 0 15px; }

/* ============ TABELA ============ */
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.dt th, table.dt td { padding: 7px 9px; text-align: right; white-space: nowrap; }
table.dt th:first-child, table.dt td:first-child { text-align: left; }
table.dt thead th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--ring-strong); padding-bottom: 6px; background: var(--surface-2); }
table.dt thead th:first-child { border-radius: 6px 0 0 0; } table.dt thead th:last-child { border-radius: 0 6px 0 0; }
table.dt tbody tr { border-bottom: 1px solid var(--grid); }
table.dt tbody tr:last-child { border-bottom: 0; }
table.dt tbody tr:hover { background: var(--surface-2); }
table.dt td.num, table.dt th.num { font-variant-numeric: tabular-nums; }
td.cell-tag { font-weight: 660; }
.rep-name { display: flex; align-items: center; gap: 8px; }
.seg-dot { width: 8px; height: 8px; flex: none; }
.seg-dot.lazer { border-radius: 50%; background: var(--s1); }
.seg-dot.fitness { border-radius: 2px; background: var(--s2); }
.who { font-weight: 620; } .where { color: var(--ink-3); font-size: 11px; }

/* ============ CALLOUT ============ */
.callout { border: 1px solid var(--ring); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 8px; padding: 10px 13px; font-size: 12.5px; color: var(--ink-2); }
.callout:not(.calm):not(.bad):not(.warn) { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.callout b { color: var(--ink); font-weight: 620; }
.callout.calm { border-left-color: var(--st-top); }
.callout.bad { border-left-color: var(--st-crit); }

/* ============ SEMÁFORO (legenda) ============ */
.sem { display: flex; flex-direction: column; gap: 7px; }
.sem-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 8px; }
.sem-g { font-size: 13px; text-align: center; }
.sem-l { font-size: 12.5px; font-weight: 620; }
.sem-v { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .9; }

.infoi{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:none;
  border-radius:50%;border:1px solid var(--ring-strong);color:var(--ink-3);font-family:var(--font-mono);
  font-size:9.5px;font-weight:700;cursor:help;line-height:1}
.infoi:hover{color:var(--brand);border-color:var(--brand)}
.escopo{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-3);
  margin:-4px 0 12px;padding:7px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--ring)}
.escopo b{color:var(--ink-2)}
/* ============ TOOLTIP ============ */
.tip { position: fixed; z-index: 90; pointer-events: none; opacity: 0; background: var(--surface); border: 1px solid var(--ring-strong); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 260px; transition: opacity .1s; }
.tip[data-on="1"] { opacity: 1; }
.tip .t-h { font-weight: 660; margin-bottom: 4px; }
.tip .t-r { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tip .t-r b { color: var(--ink); font-weight: 620; }

/* ============ FUNIL ============ */
.funnel { display: flex; flex-direction: column; gap: 7px; }
.fstage { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 12px; }
.fstage-lab { font-size: 12px; color: var(--ink-2); }
.fstage-lab b { display: block; color: var(--ink); font-weight: 620; font-size: 12.5px; }
.fbar-wrap { position: relative; height: 30px; display: flex; align-items: center; }
.fbar { height: 26px; border-radius: 4px; display: flex; align-items: center; padding: 0 9px; min-width: 4px; }
.fbar b { font-size: 12.5px; font-weight: 660; font-variant-numeric: tabular-nums; }
.fghost { height: 26px; border-radius: 4px; margin-left: 3px; border: 1px dashed var(--ring-strong); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--surface-2) 4px 8px); display: flex; align-items: center; padding: 0 7px; }
.fghost span { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.vsplit { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ring-strong); }
.vtile { flex: 1; border-radius: 9px; padding: 9px 11px; }
.vtile p { margin: 0; }
.vtile .vv { font-size: 18px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* ============ RESPONSIVO ============ */
@media (max-width: 1100px) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c7, .c8 { grid-column: span 12; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--ring); }
  .mods { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; }
  .mods-lab { display: none; }
  .mod { white-space: nowrap; padding: 7px 11px; }
  .mod-sub { display: none; }
  .tabbar { padding: 6px 14px 0; }
  .tab span { display: none; }
  .tab { padding: 8px 11px 10px; }
  .rail-foot { display: none; }
  .filters { position: static; padding: 8px 14px; }
  .fgroup { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar { padding: 0 14px; height: 48px; }
  .topbar-base { display: none; }
  .panel { padding: 14px 14px 26px; }
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .fstage { grid-template-columns: 100px 1fr; }
}
/* ============ ANALISTA ============ */
.anom { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.anom-i { border: 1px solid var(--ring); border-left: 3px solid; border-radius: 9px; padding: 11px 13px; }
.anom-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.anom-h b { font-size: 13px; font-weight: 650; }
.anom-g { font-size: 13px; }
.anom-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--ring-strong); border-radius: 20px; padding: 1px 7px; margin-left: auto; }
.anom-i p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.anom-i p b { color: var(--ink); font-weight: 620; }
.anom-a { font-size: 11.5px !important; color: var(--ink-3) !important; border-top: 1px dashed var(--ring-strong);
  padding-top: 6px; margin-bottom: 0 !important; }
.anom-b { appearance: none; border: 0; background: transparent; font: inherit; font-size: 11px;
  color: var(--brand); cursor: pointer; padding: 5px 0 0; }
.anom-b:hover { text-decoration: underline; }

.ritmo { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.ritmo-r { display: grid; grid-template-columns: 108px 1fr 52px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.ritmo-b { height: 11px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--ring); overflow: hidden; }
.ritmo-b i { display: block; height: 100%; border-radius: 6px; }
.ritmo-r b { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.proj { border-left: 3px solid; border-radius: 8px; background: var(--surface-2); padding: 10px 13px; margin-bottom: 10px; }
.proj-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.proj-v { margin: 0 0 4px; font-size: 25px; font-weight: 660; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.proj-v small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.proj .hint { line-height: 1.5; }

/* ============ DINÂMICO ============ */
.spec { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; background: var(--surface-2);
  border-radius: 9px; padding: 12px 14px; margin-top: 12px; overflow-x: auto; color: var(--ink-2); }
.spec b { color: var(--st-top); font-weight: 600; }
table.piv td { border-left: 1px solid var(--grid); }
table.piv td:first-child { border-left: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
table.piv td.vazio { color: var(--ink-3); opacity: .45; }
table.piv th.tot, table.piv td.tot { border-left: 2px solid var(--ring-strong); }
table.piv tbody tr.totrow { border-top: 2px solid var(--ring-strong); background: var(--surface-2); }
table.piv tbody tr.totrow:hover { background: var(--surface-2); }

/* ============ HIERARQUIA DE PRODUTO ============ */
.hier { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.hiercol .eyebrow { margin-bottom: 7px; }
.hieri { position: relative; padding: 5px 7px; border-radius: 5px; margin-bottom: 2px; overflow: hidden; }
.hierb { position: absolute; inset: 0 auto 0 0; opacity: .30; border-radius: 5px; }
.hieri span { position: relative; font-size: 12px; color: var(--ink); }
.hieri b { position: relative; float: right; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ============ CONFIGURAÇÕES ============ */
.inp { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--ring); border-radius: 7px; padding: 4px 9px; }
.inp:focus { border-color: var(--brand); outline: none; }
.inp.num { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.btn { appearance: none; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--brand-ink); background: var(--brand);
  border: 0; border-radius: 7px; padding: 5px 13px; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--ring-strong); margin-top: 10px; font-weight: 500; }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-3); filter: none; }

.regua { margin-bottom: 16px; }
.regua-t { margin: 0 0 7px; font-size: 12.5px; }
.regua-t b { font-weight: 640; }
.regua-t span { color: var(--ink-3); font-size: 11.5px; }
.regua-l { display: flex; align-items: stretch; gap: 3px; flex-wrap: wrap; }
.regua-s { flex: 1; min-width: 96px; border: 1px solid; border-radius: 8px; padding: 7px 9px;
  display: flex; align-items: center; gap: 7px; }
.regua-s2 { flex-direction: column; align-items: flex-start; gap: 3px; }
.regua-g { font-size: 12px; }
.regua-r { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.regua-r b { display: block; color: var(--ink); font-weight: 620; font-size: 12px; }
.regua-r i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.regua-c { display: flex; align-items: center; gap: 2px; padding: 0 2px; }
.regua-u { font-size: 10.5px; color: var(--ink-3); }
.regua-inl { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; }

table.cfgtab td { padding: 5px 7px; vertical-align: middle; }
table.cfgtab tr.cap-row { background: color-mix(in srgb, var(--st-top) 6%, transparent); }
.codcel { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.faixa { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-ink); background: var(--st-top); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.auto { display: block; font-size: 10px; margin-top: 1px; }
.pastas { display: flex; gap: 2px; }
.pbtn { appearance: none; font: inherit; font-size: 9.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ring-strong); background: transparent; color: var(--ink-3);
  border-radius: 5px; padding: 2px 5px; letter-spacing: .01em; }
.pbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.sw { display: inline-flex; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { width: 32px; height: 18px; border-radius: 10px; background: var(--neutral); position: relative; transition: background .15s; flex: none; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw input:checked + i { background: var(--st-top); }
.sw input:checked + i::after { transform: translateX(14px); }
.sw input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.swline { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--ring); font-size: 12px; color: var(--ink-2); line-height: 1.5; }

.pastacab { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pastah { font-size: 12px; font-weight: 700; text-align: center; border-radius: 7px; padding: 5px; letter-spacing: .02em; }
.pastalista { margin-top: 7px; display: flex; flex-direction: column; gap: 2px; min-height: 30px; }
.pastaitem { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 7px;
  border-radius: 5px; background: var(--surface-2); border: 1px solid var(--ring); }
.pastaitem span { flex: 1; color: var(--ink); }
.pastaitem span.ausente { color: var(--st-warn); text-decoration: underline dotted; }
.pastaitem i { font-style: normal; font-size: 9px; color: var(--ink-3); font-family: var(--font-mono); }
.xbtn { appearance: none; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 1px; }
.xbtn:hover { color: var(--st-crit); }
.pastaadd { margin-top: 6px; }
.pastaadd select { width: 100%; font-size: 11.5px; }
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }

.diagwrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.diagbox { border: 1px solid; border-radius: 9px; padding: 10px 12px; }
.diagv { margin: 3px 0 2px; font-size: 21px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.diagbox .hint { line-height: 1.4; }

@media (max-width: 860px) {
  .anom { grid-template-columns: 1fr; }
  .regua-s { min-width: 78px; }
  table.cfgtab { font-size: 11.5px; }
}
.thpar { font-family: var(--font-ui); font-size: 9px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--ink-3); opacity: .8; }

/* ============ LOGIN ============ */
.login { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--plane); font-family: var(--font-ui); color: var(--ink); padding: 20px; }
.login-cx { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--ring);
  border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow); }
.login-marca { display: flex; align-items: center; gap: 10px; }
.login-marca img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.login-marca b { font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.login-marca span { color: var(--brand); font-weight: 650; font-size: 24px; letter-spacing: -.025em; }
.login-sub { margin: 4px 0 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.login-f { display: flex; flex-direction: column; gap: 13px; }
.login-f label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-2); }
.login-f .inp { padding: 9px 11px; font-size: 14px; }
.login-f .btn { padding: 10px; font-size: 14px; margin-top: 4px; }
.login-erro { margin: 0; font-size: 12.5px; color: var(--st-crit); background: var(--st-crit-bg);
  border: 1px solid color-mix(in srgb, var(--st-crit) 35%, transparent); border-radius: 7px; padding: 8px 10px; line-height: 1.45; }
.login-rod { margin: 20px 0 0; font-size: 11px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.usr { display: inline-flex; align-items: center; gap: 7px; }
.sairbt { appearance: none; border: 1px solid var(--ring-strong); background: transparent; color: var(--ink-3);
  font: inherit; font-size: 10.5px; border-radius: 5px; padding: 1px 7px; cursor: pointer; }
.sairbt:hover { color: var(--st-crit); border-color: var(--st-crit); }

/* ============ PERGUNTA EM TEXTO ============ */
.ask { display: flex; gap: 8px; margin-top: 2px; }
.ask-i { flex: 1; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--ring-strong); border-radius: 9px; padding: 10px 13px; min-width: 0; }
.ask-i:focus { border-color: var(--brand); outline: none; background: var(--surface); }
.ask .btn { padding: 0 18px; white-space: nowrap; }
.sugest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.sug { appearance: none; font: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--ring); border-radius: 20px; padding: 4px 11px; }
.sug:hover { border-color: var(--brand); color: var(--brand); }
.vc { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.vc-q { flex: 1; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.vc-q::before { content: "“"; opacity: .4; }
.vc-q::after { content: "”"; opacity: .4; }
.vc-lead { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.vc-lead b { color: var(--ink); font-weight: 620; }
.vc-duv { display: block; margin-top: 5px; color: var(--st-warn); font-size: 12px; }
.specwrap { margin-top: 12px; border-top: 1px dashed var(--ring-strong); padding-top: 8px; }
.specwrap summary { font-size: 11.5px; color: var(--ink-3); cursor: pointer; list-style: none; }
.specwrap summary::before { content: "▸ "; }
.specwrap[open] summary::before { content: "▾ "; }
.specwrap summary:hover { color: var(--brand); }

.conv { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto;
  padding: 4px 2px 12px; margin-bottom: 12px; }
.conv-vazio { text-align: center; color: var(--ink-3); font-size: 13px; padding: 26px 10px; }
.conv-vazio p { margin: 0; }
.bl { max-width: min(86%, 660px); padding: 10px 14px; font-size: 13px; line-height: 1.6; }
.bl-u { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-radius: 14px 14px 3px 14px; font-weight: 500; }
.bl-a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--ring); border-radius: 14px 14px 14px 3px; }
.bl-a b { font-weight: 640; }

/* ============ ORIGEM DA RESPOSTA E SINCRONIZAÇÃO ============ */
.via { display: inline-block; margin-left: 7px; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.via-ia { color: var(--brand-ink); background: var(--st-top); }
.via-loc { color: var(--ink-3); border: 1px solid var(--ring-strong); }
.bl-p { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.bl-p i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .45;
  animation: pulsa 1.1s ease-in-out infinite; }
.bl-p i:nth-child(2) { animation-delay: .18s; }
.bl-p i:nth-child(3) { animation-delay: .36s; }
@keyframes pulsa { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bl-p i { animation: none; opacity: .5; } }
.syncline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.syncmsg { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; flex: 1; min-width: 240px; }
.syncmsg b { font-variant-numeric: tabular-nums; }

/* ============ FILTRO COM CAIXAS ============ */
.multi { position: relative; }
.multi-bt { appearance: none; font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid transparent; border-radius: 7px;
  padding: 4px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; max-width: 220px; }
.multi-bt:hover { border-color: var(--ring-strong); }
.multi-bt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-bt i { font-style: normal; font-size: 9px; color: var(--ink-3); }
.multi-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 60; min-width: 190px;
  background: var(--surface); border: 1px solid var(--ring-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 7px; max-height: 340px; overflow-y: auto; }
.multi-l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2);
  padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.multi-l:hover { background: var(--surface-2); color: var(--ink); }
.multi-l.forte { font-weight: 620; color: var(--ink); border-bottom: 1px solid var(--grid);
  border-radius: 6px 6px 0 0; margin-bottom: 3px; padding-bottom: 6px; }
.multi-l input { margin: 0; accent-color: var(--brand); }
.multi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.multi-sec { margin: 7px 0 2px; padding: 0 7px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ============ ORDENAÇÃO ============ */
table.dt thead th.ord { cursor: pointer; user-select: none; position: relative; padding-right: 15px; }
table.dt thead th.ord:hover { color: var(--ink); }
table.dt thead th.ord::after { content: "⇅"; position: absolute; right: 4px; opacity: .3; font-size: 9px; }
table.dt thead th.ord[data-ord="asc"]::after { content: "↑"; opacity: 1; color: var(--brand); }
table.dt thead th.ord[data-ord="desc"]::after { content: "↓"; opacity: 1; color: var(--brand); }

/* ============ PASTAS: níveis ============ */
.nivlist { display: flex; flex-direction: column; gap: 3px; }
.nivrow { display: grid; grid-template-columns: 96px 1fr 74px 40px 74px 52px; align-items: center;
  gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 12px; }
.nivrow:hover { background: var(--surface-2); }
.nivnome { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 560; }
.nivnome i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nivbar { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.nivbar i { display: block; height: 100%; border-radius: 5px; }
.nivval { text-align: right; font-variant-numeric: tabular-nums; }
.nivsh, .nivmg { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 11px; }
.nivd { text-align: right; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; }
@media (max-width: 860px) {
  .nivrow { grid-template-columns: 78px 1fr 64px 62px; }
  .nivrow .nivsh, .nivrow .nivmg { display: none; }
}
.pastas + .pastas { margin-top: 3px; }
.pseg { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); width: 10px;
  display: inline-flex; align-items: center; }
table.dt tbody tr.fora { opacity: .5; }
table.dt tbody tr.fora td:first-child b { text-decoration: line-through; }
.anom-sec { margin: 16px 0 8px; font-size: 12.5px; font-weight: 640; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; }
.anom-sec:first-of-type { margin-top: 4px; }
.anom-sec i { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }

/* ============ RANKING ============ */
.rkbar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: -4px 0 20px;
  padding: 11px 14px; background: var(--surface); border: 1px solid var(--ring); border-radius: var(--r); }
.rkhead { text-align: center; margin: 4px 0 18px; }
.rkhead h2 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.rkhead p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-3); }
.rkhead2 { margin-top: 34px; }
.rkhead2 h2 { font-size: 20px; }

/* --- pódio --- */
.podio { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 14px;
  max-width: 880px; margin: 0 auto 8px; }
.pod { position: relative; text-align: center; border-radius: 14px 14px 0 0; padding: 16px 12px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 62%); }
.pod-nome { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  text-transform: uppercase; }
.pod-pct { font-size: 40px; font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 2px 0 1px;
  color: var(--c); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.pod-onde { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pod-base { margin-top: 12px; border-radius: 10px 10px 0 0; padding: 10px 0 12px;
  background: var(--surface-2); border: 1px solid var(--ring); border-bottom: 0;
  box-shadow: inset 0 3px 0 var(--c); }
.pod-lugar { display: block; font-size: 19px; font-weight: 800; color: var(--c); line-height: 1; }
.pod-base i { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pod-1 .pod-pct { font-size: 58px; }
.pod-1 .pod-nome { font-size: 18px; }
.pod-1 .pod-base { padding: 20px 0 22px; }
.pod-1 .pod-lugar { font-size: 24px; }
.pod-2 .pod-base { padding: 12px 0 14px; }
.pod-3 .pod-base { padding: 8px 0 10px; }

/* --- grade --- */
.rkgrade { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 9px; margin-top: 4px; }
.rk { border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: var(--cbg);
  border-radius: 10px; padding: 9px 11px 10px; }
.rk-1 { box-shadow: 0 0 0 1px var(--c), 0 6px 20px color-mix(in srgb, var(--c) 22%, transparent); }
.rk-off { opacity: .45; }
.rk-top { display: flex; align-items: baseline; gap: 7px; }
.rk-pos { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-3); flex: none; }
.rk-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rk-cap { margin-left: auto; color: var(--st-top); font-size: 11px; flex: none; }
.rk-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 3px 0 6px; }
.rk-pct { font-size: 25px; font-weight: 750; letter-spacing: -.035em; color: var(--c); font-variant-numeric: tabular-nums; }
.rk-onde { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-bar { height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--ink-3) 20%, transparent); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.rknota { margin: 18px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 860px) {
  .podio { grid-template-columns: 1fr; max-width: 420px; }
  .pod { border-radius: 12px; padding-bottom: 8px; }
  .pod-base { border-radius: 10px; border-bottom: 1px solid var(--ring); }
  .pod-1 .pod-pct { font-size: 46px; }
  .rkhead h2 { font-size: 22px; }
}

/* ============ IMPRESSÃO ============ */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body[data-imprimindo] .rail,
  body[data-imprimindo] .tabbar,
  body[data-imprimindo] .filters,
  body[data-imprimindo] .rkbar,
  body[data-imprimindo] .tip { display: none !important; }
  body[data-imprimindo] .shell { grid-template-columns: 1fr; }
  body[data-imprimindo] .panel { padding: 0; }
  body[data-imprimindo] .rkgrade { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  body[data-imprimindo] .rk { break-inside: avoid; }
  body[data-imprimindo] .rknota { font-size: 9px; }
  body[data-imprimindo] .pod-pct { text-shadow: none; }
  body[data-imprimindo] .callout { break-inside: avoid; }
}
/* nível escrito por extenso, duas colunas por segmento */
.cfgtab .pastas { gap: 3px; flex-wrap: nowrap; }
.cfgtab .pbtn { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
.pbtn.sugere { border: 1px dashed #e01b2e; color: #e01b2e; }
.sel.selmini { font-size: 11.5px; padding: 3px 22px 3px 7px; }
table.cfgtab th { white-space: nowrap; }
/* Analista: veredito numa frase; a conta fica num cartão curto no pé */
.veredito { margin: 2px 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.veredito b { color: var(--ink); font-weight: 700; }
.conta-regras { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.conta-regras b { color: var(--ink); font-weight: 620; }

@media (prefers-reduced-motion: reduce) { .app *, .app *::before, .app *::after { transition: none !important; } }

/* ============ CARREGAMENTO ============ */
.carregando { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; gap: 14px;
  align-content: center; background: var(--plane); font-family: var(--font-ui); color: var(--ink-3); }
.carregando p { margin: 0; font-size: 13px; }
.carregando .spin { width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--ring-strong); border-top-color: var(--brand); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando.erro .spin { display: none; }
.carregando.erro p { color: var(--st-crit); max-width: 420px; text-align: center; line-height: 1.6; padding: 0 20px; }
@media (prefers-reduced-motion: reduce) { .carregando .spin { animation-duration: 3s; } }
body { margin: 0; background: var(--plane); }

/* ---------- telas de entrada (login, sem acesso, troca de senha, sem base) ---------- */
.login-txt { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.login-txt b { color: var(--ink); }
.login-aviso { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--st-warn-bg); border: 1px solid color-mix(in srgb, var(--st-warn) 35%, transparent);
  border-radius: 8px; padding: 10px 12px; }
.login-f .hint, .modal-f .hint { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.admtag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 4px; padding: 0 5px; }

/* ---------- janela por cima do painel ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 12, 18, .55); }
.modal { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border: 1px solid var(--ring); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
.modal-topo { padding: 16px 20px 0; }
.modal-topo h3 { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
.modal-corpo { padding: 14px 20px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.modal-rodape .btn.ghost, .modal-bts .btn.ghost, .usu-topo .btn.ghost { margin-top: 0; }
.modal-f { display: flex; flex-direction: column; gap: 12px; }
.modal-f label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-2); }
.modal-f .inp { padding: 9px 11px; font-size: 14px; }
.modal-f label.chk { flex-direction: row; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.modal-f p { margin: 0; }
.msg-pronta { margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--ring);
  border-radius: 8px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.modal-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.callout.warn { border-left-color: var(--st-warn); }

/* ---------- usuários ---------- */
.usu-topo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.usu-eu { margin: 0; font-size: 13px; color: var(--ink-2); }
.usu-tab td { vertical-align: middle; }
.usu-tab label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.usu-tab input[disabled] + * , .usu-tab label.chk:has(input[disabled]) { cursor: not-allowed; opacity: .7; }
.usu-off td { color: var(--ink-3); }
.usu-acoes { white-space: nowrap; }
.lnk { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--brand);
  cursor: pointer; padding: 2px 4px; margin-left: 6px; }
.lnk:hover { text-decoration: underline; }
.lnk.perigo { color: var(--st-crit); }
.lnk[disabled] { color: var(--ink-3); cursor: not-allowed; text-decoration: none; opacity: .6; }
.syncinfo { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.syncinfo b { color: var(--ink); }

/* ---------- abas de conversa (Chat e Dinâmico) ---------- */
.conv-abas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.panel > .conv-abas { margin: 0 0 14px; }
.conv-nova { appearance: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer;
  background: var(--brand-soft, transparent); border: 1px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  border-radius: 999px; padding: 5px 12px; }
.conv-nova:hover { border-style: solid; }
.conv-aba { display: inline-flex; align-items: center; max-width: 260px; border: 1px solid var(--ring-strong);
  border-radius: 999px; background: var(--surface); overflow: hidden; }
.conv-aba.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.conv-tit { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink-2);
  cursor: pointer; padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.conv-aba.on .conv-tit { color: var(--ink); font-weight: 600; padding-right: 4px; }
.conv-acao { appearance: none; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 12px; padding: 4px 6px; line-height: 1; }
.conv-acao:hover { color: var(--ink); }
.conv-acao:last-child:hover { color: var(--st-crit); }
.conv-mais { font-size: 12px; max-width: 200px; }
.conv-so { margin-left: auto; font-size: 11px; color: var(--ink-3); }
@media (max-width: 640px) { .conv-so { margin-left: 0; flex-basis: 100%; } .conv-aba { max-width: 100%; } }
.modal-corpo .hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.modal-corpo .hint b { color: var(--ink-2); }

/* ============ CONFIGURAÇÕES NO BANCO ============ */
.cfg-aviso { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px; border-radius: 9px; font-size: 12.5px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--ring); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.cfg-aviso.ok { border-left: 3px solid var(--st-good); }
.cfg-aviso.vai { border-left: 3px solid var(--st-top); }
.cfg-aviso.erro { border-left: 3px solid var(--st-crit); color: var(--st-crit); }
.verinat { display: inline-block; margin: 0 0 10px; }
.verinat[hidden] { display: none; }
.fechainat { position: fixed; right: 22px; bottom: 22px; z-index: 60; font: inherit; font-size: 12.5px; font-weight: 650;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink);
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.fechainat:hover { filter: brightness(1.08); }
table.dt tbody tr.inat { opacity: .55; }
.pastaitem.inat { opacity: .5; }
.pastaitem.inat span { text-decoration: line-through; }
.inabtn { font-size: 12px; }
.inabtn:hover { color: var(--brand); }
.pastan { font-weight: 600; opacity: .7; margin-left: 4px; font-size: 11px; }
.novaund { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.novaund .inp { flex: 1 1 220px; max-width: 340px; }
.novaund-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.undchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--ring); color: var(--ink); }
.syncauto { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ring); }
.syncauto .eyebrow { margin: 0 0 6px; }
.syncveredito { margin: 0 0 10px; font-size: 13px; }