*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --motion-duration: 200ms; }
html, body { height: 100%; }
body {
  background: var(--viz-bg);
  color: var(--viz-text);
  font-family: var(--viz-font-body);
  font-variant-numeric: tabular-nums;
}

/* --- Layout geral --- */
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Tela de login --- */
#tela-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.login-card h2 {
  font-family: var(--viz-font-number);
  font-size: 1.8rem;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.login-card p {
  font-size: .938rem;
  color: var(--viz-muted);
  margin-bottom: 1.25rem;
}

/* --- Header --- */
header {
  background: var(--viz-surface-deep);
  border-bottom: 1px solid var(--viz-border);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.header-logo {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.header-title {
  font-family: var(--viz-font-number);
  font-size: 1.25rem;
  letter-spacing: .05em;
  color: var(--viz-text);
  white-space: nowrap;
}
.header-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.header-select {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--viz-surface);
  color: var(--viz-text);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  min-height: 44px;
  padding: 0 .75rem;
  cursor: pointer;
}
.btn-voltar {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-muted);
  background: transparent;
  border: 1px solid var(--viz-border);
  border-radius: 0;
  min-height: 44px;
  padding: 0 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 150ms, border-color 150ms;
}
.btn-voltar:hover { color: var(--viz-accent); border-color: var(--viz-accent); }

/* --- Nav abas --- */
nav {
  background: var(--viz-surface-deep);
  border-bottom: 1px solid var(--viz-border);
  display: flex;
  gap: 0;
}
.nav-tab {
  font-family: var(--viz-font-label);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .875rem 1.5rem;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.nav-tab:hover { color: var(--viz-text); }
.nav-tab.ativa {
  color: var(--viz-text);
  border-bottom-color: var(--viz-accent);
}

/* --- Corpo principal --- */
main {
  flex: 1;
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* --- Secoes --- */
.secao { display: none; }
.secao.ativa { display: block; animation: viz-in var(--motion-duration) var(--viz-ease) both; }

/* --- Botoes globais --- */
.btn {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  min-height: 44px;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: transform 120ms var(--viz-ease), opacity 150ms;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--viz-accent); color: var(--viz-on-accent); border-color: var(--viz-accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(.88); }
.btn-secondary { background: transparent; color: var(--viz-text); border-color: var(--viz-border); }
.btn-secondary:hover:not(:disabled) { color: var(--viz-accent); border-color: var(--viz-accent); }
.btn-ghost { background: transparent; color: var(--viz-muted); border-color: var(--viz-border); min-height: 44px; font-size: .75rem; }
.btn-ghost:hover:not(:disabled) { color: var(--viz-accent); border-color: var(--viz-accent); }
.btn-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* --- Inputs / selects reutilizaveis --- */
select, input[type="month"], input[type="text"], input[type="date"], textarea {
  font-family: var(--viz-font-body);
  font-size: .938rem;
  color: var(--viz-text);
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  min-height: 44px;
  padding: 0 .75rem;
}
textarea { min-height: 100px; padding: .6rem .75rem; resize: vertical; width: 100%; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--viz-accent); outline-offset: -1px; }

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.form-row { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }

/* --- Estado / mensagem --- */
.msg {
  font-size: .875rem;
  color: var(--viz-muted);
  padding: .5rem 0;
}
@keyframes msg-erro-piscar {
  0%, 100% {
    background-color: var(--viz-accent);
    color: var(--viz-on-accent);
    border-color: var(--viz-accent);
  }
  50% {
    background-color: var(--viz-on-accent);
    color: var(--viz-accent);
    border-color: var(--viz-accent);
  }
}
.msg.erro {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  padding: .5rem 1rem;
  margin: .5rem 0;
  line-height: 1.5;
  font-weight: 600;
  border: 1px solid var(--viz-accent);
  border-radius: 0;
  animation: msg-erro-piscar 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .msg.erro {
    animation: none;
    background-color: var(--viz-accent);
    color: var(--viz-on-accent);
    border-color: var(--viz-accent);
  }
}
.msg.ok { color: var(--conf-ok); }

/* Barra de progresso indeterminada (10 SET 2026, pedido do operador: "como
   saber se está acontecendo alguma coisa"). Nunca ha % real disponivel nessas
   telas — upload de arquivo pequeno termina quase instantaneo, quem demora
   e o processamento no servidor (parse de XLSX, chamada ao Gemini), sem
   progresso fracionado pra reportar. Uma barra indeterminada (listra
   deslizando) comunica "esta rodando" sem fingir saber quanto falta —
   fingir um % que nao existe seria pior que nao mostrar nada. Classe
   utilitaria, sem markup novo: qualquer container ganha a barra so com
   .progress-loading, via ::before/::after. */
.progress-loading { position: relative; padding-top: 10px; }
.progress-loading::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--viz-grid);
}
.progress-loading::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 40%; height: 4px;
  background: var(--viz-accent-2);
  animation: progress-indeterminate 1.4s ease-in-out infinite;
}
/* transform em vez de `left`: a barra e' infinita e animar propriedade de
   layout obriga o browser a recalcular a cada frame pelo mesmo efeito. */
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-loading::after { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* --- Skeleton loading --- */
.skeleton {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  height: 80px;
  animation: sk-pulse 1.5s ease-in-out infinite;
}
@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0ms; } }

/* --- Pill badge (nao clicavel) --- */
.pill {
  display: inline-block;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--viz-border);
  border-radius: 999px;
  padding: .15rem .65rem;
  color: var(--viz-muted);
  white-space: nowrap;
}
.pill-ok { color: var(--conf-ok); border-color: var(--conf-ok); }
.pill-warn { color: var(--conf-warn); border-color: var(--conf-warn); }
.pill-block { color: var(--conf-block); border-color: var(--conf-block); }
.pill-accent { color: var(--viz-accent-2); border-color: var(--viz-accent-2); }
.pill-blue { color: var(--viz-accent-2); border-color: var(--viz-accent-2); }
.pill--single {
  font-size: .75rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  color: var(--viz-accent-2);
  border-color: var(--viz-accent-2);
  background: color-mix(in srgb, var(--viz-accent-2) 12%, transparent);
  font-weight: 600;
}
.pill--album {
  font-size: .75rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  color: var(--conf-warn);
  border-color: var(--conf-warn);
  background: color-mix(in srgb, var(--conf-warn) 12%, transparent);
  font-weight: 600;
}

/* --- Secao titulo --- */
.sec-explainer {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--viz-muted);
  margin: 0 0 1.5rem;
  max-width: 65ch;
  line-height: 1.4;
}
.sec-explainer strong {
  color: var(--viz-text);
  font-weight: 700;
}

.sec-title {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--viz-border);
}

/* --- Separador --- */
.sep {
  border: none;
  border-top: 1px solid var(--viz-border);
  margin: 2rem 0;
}

/* ====================================================
   SECAO 1 — RADAR DE ACAO
   Interface 4: métrica-linha número gigante + acento lateral
   Interface 3: cor como sinal, não decoração
==================================================== */
.radar-toolbar {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--viz-border);
}
.radar-lista { display: flex; flex-direction: column; gap: 0; }

/* ── Card principal do sinal — linha grossa, expansível ───────── */
.radar-card {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-top: none;
  border-radius: 0;
  display: block;
  transition: background 150ms var(--viz-ease);
  overflow: hidden;
}
.radar-card:first-child { border-top: 1px solid var(--viz-border); }
.radar-card:hover { background: var(--viz-hover-tint); }
.radar-card--alto  .radar-barra { background: var(--conf-block); }
.radar-card--medio .radar-barra { background: var(--viz-accent-2); }

/* Linha superior de impacto */
.radar-barra { width: 100%; height: 2px; }

/* Corpo do card */
.radar-inner {
  padding: 1.4rem 1.6rem;
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(280px, 2fr) minmax(220px, 1.1fr);
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  min-width: 0;
}
.radar-card--priority { min-height: 208px; background: var(--viz-surface-raised); }
.radar-card--priority .radar-num { font-size: clamp(3.8rem, 7vw, 6.4rem); }
.radar-metric, .radar-diagnostico, .radar-operacao { min-width: 0; }
.radar-metric { display: flex; flex-direction: column; align-items: flex-start; overflow-wrap: anywhere; }
.radar-diagnostico { padding-inline: clamp(12px, 2vw, 28px); border-inline: 1px solid var(--viz-border); }
.radar-operacao { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.radar-operacao .radar-passos-lista { display: grid; grid-template-columns: 1fr; }

/* Linha 1: tipo de alerta (interface 3 — rótulo caps pequeno) */
.radar-tipo {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin-bottom: .5rem;
}

/* Linha 2: headline — número/percentual gigante + artista (interface 4) */
.radar-headline {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.radar-num {
  font-family: var(--viz-font-number);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.01em;
}
.radar-num--block { color: var(--conf-block); }
.radar-num--partial { color: var(--viz-accent-3); }
.radar-num--info { color: var(--viz-accent-2); }
.radar-headline-sub {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.radar-artista-nome {
  font-family: var(--viz-font-label);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-text);
}
.radar-artista-plat {
  font-family: var(--viz-font-body);
  font-size: .8rem;
  color: var(--viz-muted);
}

/* Linha 3: O que aconteceu (body text claro) */
.radar-o-que {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--viz-text);
  margin-bottom: .75rem;
}

/* Linha 4: Por que importa (interface 2 — bloco destacado) */
.radar-porque {
  font-size: .8rem;
  color: var(--viz-muted);
  line-height: 1.55;
  padding: .7rem 1rem;
  border-top: 1px solid var(--viz-border);
  background: var(--viz-surface-sunken);
  margin-bottom: 1rem;
}

.radar-evidence-level {
  display: block;
  margin-bottom: .5rem;
  color: var(--viz-accent-3);
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
}

/* Linha 5: Evidência técnica (ticker monocromático) */
.radar-evidencia {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--viz-accent-3);
  padding: .4rem .7rem;
  background: color-mix(in srgb, var(--viz-accent-3) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--viz-accent-3) 12%, transparent);
  margin-bottom: 1.25rem;
  display: block;
}

/* Linha 6: Próximos passos (interface 2 — card herói + outline) */
.radar-passos {
  border-top: 1px solid var(--viz-border);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.radar-passos-label {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.radar-passos-lista {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.radar-passo-btn {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  border: 1px solid var(--viz-border);
  background: transparent;
  color: var(--viz-muted);
  cursor: pointer;
  border-radius: 0;
  min-height: 44px;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.radar-passo-btn:hover { border-color: var(--viz-accent); color: var(--viz-accent); }
.radar-passo-btn:disabled { opacity: .38; cursor: not-allowed; border-color: var(--viz-border); color: var(--viz-muted); }
.radar-passo-btn--primary {
  background: var(--viz-accent);
  border-color: var(--viz-accent);
  color: var(--viz-on-accent);
  font-size: .75rem;
}
.radar-passo-btn--primary:hover { filter: brightness(.88); color: var(--viz-on-accent); }

/* Linha 7: confiança (canto inferior direito, discreto) */
.radar-confianca-row {
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
}
.radar-conf-label {
  font-size: .75rem;
  color: var(--viz-muted);
  font-family: var(--viz-font-label);
  letter-spacing: .06em;
}
.radar-conf-label--ok { color: var(--conf-ok); }
.radar-conf-label--warn { color: var(--viz-accent-3); }
.radar-conf-label--block { color: var(--conf-block); }

.radar-instruments {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  background: var(--viz-border);
  border: 1px solid var(--viz-border);
}

.radar-instrument-slot.make-instrument.viz-metric {
  min-height: 0;
  padding: 1rem;
  background: var(--viz-surface);
  border: 0;
}

@media (max-width: 900px) {
  .radar-inner { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.8fr); }
  .radar-operacao { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.8fr); align-items: center; }
  .radar-operacao .radar-passos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radar-instruments { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .radar-inner { display: block; padding: 18px; }
  .radar-diagnostico { border: 0; border-top: 1px solid var(--viz-border); border-bottom: 1px solid var(--viz-border); padding: 18px 0; margin: 18px 0; }
  .radar-operacao { display: flex; }
  .radar-operacao .radar-passos-lista { grid-template-columns: 1fr; }
  .radar-card--priority .radar-num { font-size: 4rem; }
}

/* ====================================================
   SECAO 2 — COCKPIT
   Interface 4: número gigante + sparkline à direita
   Interface 1: faixa de KPIs + grade + tabela rodapé
   Interface 2: card herói preenchido, barras Top-5
==================================================== */

/* ── Faixa de KPIs (interface 4 — átomo métrica-linha) ───────── */
.kpi-faixa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--viz-border);
  margin-bottom: 2rem;
  border: 1px solid var(--viz-border);
}
.kpi-instrument {
  background: var(--viz-surface);
  padding: 1.25rem;
  min-width: 0;
  grid-column: span 6;
  transition: background 150ms var(--viz-ease);
}
.kpi-instrument:hover { background: var(--viz-surface-hover); }
.kpi-instrument .viz-metric__value { font-size: clamp(2.15rem, 3vw, 2.75rem); white-space: nowrap; }
.kpi-instrument.is-partial .viz-metric__row { grid-template-columns: 1fr; }
.kpi-instrument.is-partial .viz-metric__value { font-size: 2rem; white-space: normal; overflow-wrap: anywhere; }
/* .make-instrument (pulse.css) e a caixa BASE de todo instrumento, aplicada
   por viz.metricLine a qualquer card com `instrument` — Pulso, Radar, Cockpit,
   Conselhos e Reuniao. Nao e uma classe do Pulso, so mora no arquivo dele, que
   e o ultimo <link> do head. Com a mesma especificidade, a ordem decidia e o
   fundo Berry Red do heroi virava --viz-surface: os 6 KPIs saiam com peso
   visual identico e a hierarquia assimetrica sumia da tela (achado de 10 SET
   2026, medido: rgb(34,34,34) onde --viz-accent e #C21121). A variante ganha
   por especificidade, como .radar-instrument-slot ja fazia acima. */
.kpi-instrument--hero,
.kpi-instrument--hero.make-instrument {
  grid-column: 1 / -1;
  background: var(--viz-accent);
}
.kpi-instrument--hero:hover { background: var(--viz-accent); filter: brightness(.92); }
.kpi-instrument--hero .viz-metric__label,
.kpi-instrument--hero .viz-metric__unit,
.kpi-instrument--hero .viz-metric__delta { color: var(--viz-on-accent-soft); }
.kpi-instrument--hero .viz-metric__value { color: var(--viz-on-accent); }
/* Devolver o Berry Red ao heroi trocou o fundo debaixo do instrumento, e as
   regras acima so clareavam o texto do bloco de valor. O que vive DENTRO do
   instrumento (rotulos e datas da timeline, resumo, marcadores) continuava em
   --viz-muted e --viz-accent, medindo 2.06:1 contra o vermelho — ilegivel.
   Aqui o instrumento inteiro passa a herdar a escala clara do heroi. */
.kpi-instrument--hero .viz-timeline__label,
.kpi-instrument--hero .viz-instrument__summary { color: var(--viz-on-accent-soft); }
.kpi-instrument--hero .viz-timeline__meta { color: var(--viz-on-accent-soft); }
.kpi-instrument--hero .viz-metric__conf {
  color: var(--viz-on-accent);
  /* .55 media 2.65:1 contra Berry Red — abaixo dos 3:1 que a WCAG 1.4.11 pede
     ao limite de um componente. .68 e' o primeiro passo com folga (3.42:1). */
  border-color: var(--viz-on-accent-line);
}
.kpi-instrument--hero .info-tip {
  background: var(--viz-on-accent-soft);
  color: var(--viz-accent);
}
/* Os cards nao-heroi ocupam meia linha, entao um numero PAR de cards no total
   (heroi + impar) deixa o ultimo sozinho, com metade da linha vazia — foi o que
   aconteceu quando a faixa passou de cinco para seis em 09 SET 2026. Em vez de
   recontar a grade a cada KPI novo, o ultimo card ocupa a linha inteira sempre
   que ficaria orfao; com um setimo KPI a regra se desliga sozinha. */
.kpi-faixa .kpi-instrument:last-child:nth-child(even) { grid-column: 1 / -1; }
/* Esticado para a linha inteira, o slot visual fica com ~680px: a curva a 44px
   de altura vira um fio achatado onde a variacao nao se le. Mais altura devolve
   a amplitude sem mexer na altura dos cards de meia linha. */
.kpi-faixa .kpi-instrument:last-child:nth-child(even) .viz-spark { height: 4.5rem; }
.kpi-load-error { grid-column: 1 / -1; padding: 1.5rem; }
.provenance-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font: .75rem var(--viz-font-label);
  color: var(--viz-bg);
}
.provenance-badge--ok { background: var(--conf-ok); }
.provenance-badge--warn { background: var(--conf-warn); }
.provenance-badge--block { background: var(--conf-block); }
.viz-meter {
  width: 100%;
  height: 12px;
  background: var(--viz-grid);
  position: relative;
  overflow: hidden;
}
.viz-meter::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter-value);
  background: var(--meter-accent);
}

@media (max-width: 1100px) {
  .kpi-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-instrument, .kpi-instrument--hero { grid-column: span 1; }
  .kpi-instrument--hero { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kpi-faixa { grid-template-columns: 1fr; }
  .kpi-instrument, .kpi-instrument--hero { grid-column: 1; }
}

/* ── Grade de gráficos ──────────────────────────────────────────── */
.cockpit-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  background: transparent;
  border: 0;
  margin-bottom: 2rem;
}
.chart-bloco--streaming { grid-column: span 8; }
.chart-bloco--share { grid-column: span 4; }
.chart-bloco--origens { grid-column: span 6; }
.chart-bloco--fingerprint { grid-column: span 6; border-top: 3px solid var(--viz-accent-2); }
.fingerprint-unit {
  display: inline-block;
  margin: -8px 0 12px;
  color: var(--viz-accent-2);
  font: .75rem var(--viz-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.viz-state { min-height: 120px; display: grid; place-items: center; }
@media (max-width: 1200px) {
  .cockpit-grade { grid-template-columns: 1fr; }
  .chart-bloco--streaming, .chart-bloco--share, .chart-bloco--origens, .chart-bloco--fingerprint { grid-column: 1 / -1; }
}

.chart-bloco {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  padding: 1.5rem;
  box-sizing: border-box;
}
.chart-label {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin-bottom: 1.25rem;
  display: block;
  border-bottom: 1px solid var(--viz-border);
  padding-bottom: .75rem;
}
.chart-area {
  position: relative;
  width: 100%;
  height: clamp(260px, 32vw, 340px);
  min-height: 260px;
}
.chart-area .viz-canvas-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.chart-area canvas { position: absolute; inset: 0; }

/* ── Bloco Alcance × Monetização (interface 2) ──────────────────── */
.alcance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  background: transparent;
  border: 0;
  margin-bottom: 2rem;
}
@media (max-width: 600px) { .alcance-grid { grid-template-columns: 1fr; } }
.alcance-bloco {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  padding: 1.5rem;
  box-sizing: border-box;
}
.alcance-titulo {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin-bottom: 1.25rem;
  display: block;
  border-bottom: 1px solid var(--viz-border);
  padding-bottom: .75rem;
}

.donut-bloco {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ── Módulos analíticos F3 ─────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--viz-border);
  border: 1px solid var(--viz-border);
  margin-bottom: 2rem;
}
.analytics-module {
  grid-column: span 4;
  min-width: 0;
  background: var(--viz-surface);
  padding: 1.4rem;
}
.analytics-module--ranking { grid-column: span 7; }
.analytics-module--social { grid-column: span 5; }
.analytics-module--full { grid-column: 1 / -1; }
.module-header {
  min-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--viz-border);
  font: .75rem var(--viz-font-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.module-meta { color: var(--viz-muted); text-align: right; letter-spacing: .04em; }
.module-body { min-width: 0; }

/* ── Módulos recolhíveis (Tabela Operacional, Diagnóstico) — disclosure nativo,
   com triângulo direcional, indicador explícito de clique e animação convidativa. */
.analytics-module--collapsible { padding: 0; }
.analytics-module--collapsible > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 1.4rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--viz-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: background .15s ease;
}
.analytics-module--collapsible > summary::-webkit-details-marker { display: none; }
.analytics-module--collapsible > summary::marker { display: none; }
.analytics-module--collapsible > summary:hover {
  background: rgba(255, 255, 255, 0.02);
  color: var(--viz-text);
}
.analytics-module--collapsible > summary:focus-visible {
  outline: 2px solid var(--viz-accent);
  outline-offset: -2px;
}
.module-header__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.module-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.disclosure-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: var(--viz-accent);
  font-size: .75rem;
  line-height: 1;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  user-select: none;
}
.analytics-module--collapsible[open] .disclosure-arrow {
  transform: rotate(90deg);
}
.disclosure-arrow--pulse {
  animation: disclosure-pulse 2s infinite ease-in-out;
}
.analytics-module--collapsible[open] .disclosure-arrow--pulse {
  animation: none;
}
@keyframes disclosure-pulse {
  0% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: .75; }
}

.disclosure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted-bright);
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  transition: all .15s ease;
  user-select: none;
}
.analytics-module--collapsible > summary:hover .disclosure-badge {
  color: var(--viz-text);
  border-color: var(--viz-accent);
}
.disclosure-badge--pulse {
  color: var(--viz-accent);
  border-color: var(--viz-accent);
  background: rgba(194, 17, 33, 0.08);
  animation: badge-breathe 2s infinite ease-in-out;
}
.analytics-module--collapsible[open] .disclosure-badge--pulse {
  animation: none;
  background: var(--viz-bg);
  border-color: var(--viz-border);
  color: var(--viz-muted-bright);
}
@keyframes badge-breathe {
  0% { border-color: var(--viz-border); opacity: .85; }
  50% { border-color: var(--viz-accent); opacity: 1; }
  100% { border-color: var(--viz-border); opacity: .85; }
}

.disclosure-badge__open { display: none; }
.disclosure-badge__closed { display: inline-block; }
.analytics-module--collapsible[open] .disclosure-badge__closed { display: none; }
.analytics-module--collapsible[open] .disclosure-badge__open { display: inline-block; }

.analytics-module--collapsible > .module-body,
.analytics-module--collapsible > .diagnostics-question { padding: 0 1.4rem 1.4rem; }
.analytics-module--collapsible > .module-diagnostics-toolbar { padding: 0 1.4rem; margin-top: 1.4rem; }
@media (max-width: 640px) {
  .analytics-module--collapsible > summary,
  .analytics-module--collapsible > .module-body,
  .analytics-module--collapsible > .diagnostics-question,
  .analytics-module--collapsible > .module-diagnostics-toolbar { padding-left: 18px; padding-right: 18px; }
}
/* Empilhado, nao 2 colunas (09 SET 2026, correcao no mesmo pedido — Geografia
   e Catalogo ganhou 2 secoes a mais, Genero e Faixa etaria, e o card do modulo
   so tem ~4/12 do grid de largura: em 2 colunas o nome de pais/cidade/genero
   quebrava no meio da palavra ("Brasi/l", "Femi/nino"). Cada secao ocupa a
   largura inteira do card — sem mexer no grid-column dos modulos vizinhos. */
.module-columns { display: grid; gap: 20px; }
.module-columns > div + div { padding-top: 20px; border-top: 1px solid var(--viz-border); }
.module-subtitle {
  display: block;
  margin-bottom: 12px;
  color: var(--viz-accent-1);
  font: .75rem var(--viz-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.module-sample { margin-top: 12px; color: var(--viz-muted); font-size: .75rem; }
.resilience-number { font: clamp(2.4rem, 5vw, 4.8rem)/.9 var(--viz-font-number); color: var(--conf-warn); }
.resilience-label { margin: 8px 0 18px; color: var(--viz-muted); font-size: .78rem; }
.analytics-table-wrap { width: 100%; overflow-x: auto; }
.analytics-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 10px 12px; border-bottom: 1px solid var(--viz-border); text-align: left; vertical-align: middle; }
.analytics-table th { color: var(--viz-muted); font: .75rem var(--viz-font-label); letter-spacing: .08em; text-transform: uppercase; }
.analytics-table td { color: var(--viz-text); font-size: .8rem; }
.analytics-table td.numeric { text-align: right; font-family: var(--viz-font-number); }
.analytics-table th.text-center, .analytics-table td.text-center { text-align: center; }
.track-info-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.track-thumb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  overflow: hidden;
}
.track-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.track-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--viz-muted);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.04);
  user-select: none;
}
.track-title {
  font-weight: 500;
  color: var(--viz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.track-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.track-release-sub {
  font-size: .75rem;
  color: var(--viz-muted);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-release-label {
  color: var(--viz-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.catalog-id { font-family: var(--viz-font-number); color: var(--viz-accent-1); }
.table-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.table-pagination span { color: var(--viz-muted); font-size: .75rem; }
.table-pagination .btn { min-width: 100px; }
.table-filter-active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--viz-accent-1);
  color: var(--viz-text);
  font-size: .76rem;
}

@media (max-width: 1200px) {
  .analytics-module, .analytics-module--ranking, .analytics-module--social { grid-column: span 6; }
  #module-geography { grid-column: 1 / -1; }
  .analytics-module--full { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .analytics-module, .analytics-module--ranking, .analytics-module--social, .analytics-module--full { grid-column: 1 / -1; }
  .analytics-module { padding: 18px; }
}

/* ====================================================
   SECAO 3 — CONSELHOS
==================================================== */
.caso-card {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1.25rem;
  margin-bottom: .75rem;
  display: grid;
  gap: .5rem;
}
.caso-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.caso-pergunta {
  font-size: .938rem;
  color: var(--viz-text);
  flex: 1;
}
.caso-meta {
  font-size: .8rem;
  color: var(--viz-muted);
}
.case-workspace {
  width: 100%;
  min-width: 0;
  margin-top: 1.5rem;
}
.case-workspace__body {
  max-width: none;
  padding: clamp(20px, 3vw, 40px);
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-top: 2px solid var(--viz-muted);
}
.case-learning {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  background: var(--viz-border);
  border: 1px solid var(--viz-border);
}
.case-learning .viz-metric {
  min-height: 0;
  background: var(--viz-surface);
}
.case-learning .make-instrument .viz-metric__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-learning .viz-metric__value { font-size: clamp(2rem, 3vw, 2.5rem); white-space: nowrap; }
#modal-caso-pareceres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  background: var(--viz-border);
}
#modal-caso-pareceres .parecer-bloco { margin: 0; }
.case-workspace .divergencia-tabela {
  margin: .75rem 0 1.75rem;
  background: var(--viz-surface-sunken);
  border-top: 2px solid var(--viz-muted);
}
.case-operational-rail {
  margin-top: 1.75rem;
  padding: 24px;
  background: var(--viz-surface-sunken);
  border: 1px solid var(--viz-border);
  border-top: 2px solid var(--viz-muted);
}
.case-workspace .modal-acoes {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr) auto;
  align-items: end;
}
.case-workspace textarea { min-height: 96px; }
.case-action-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}
.case-context-hash {
  display: block;
  margin-top: .5rem;
  color: var(--viz-muted);
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.decision-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--viz-border);
}
.decision-item strong { display: block; color: var(--viz-text); font-size: .9rem; }
.decision-item span { display: block; margin-top: .35rem; color: var(--viz-muted); font-size: .75rem; }
.acao-texto strong, .acao-texto small { display: block; }
.acao-texto small { margin-top: .3rem; color: var(--viz-muted); }
.action-result { width: auto; min-width: 140px; }
@media (max-width: 760px) {
  .case-operational-rail { padding: 16px; }
  .case-learning, #modal-caso-pareceres { grid-template-columns: 1fr; }
  .case-learning .make-instrument .viz-metric__row { grid-template-columns: 1fr; }
  .case-workspace .modal-acoes, .case-action-fields { grid-template-columns: 1fr; }
  .case-workspace .modal-acoes .btn { width: 100%; }
  .acao-item { align-items: stretch; flex-direction: column; }
  .action-result { width: 100%; }
  .divergencia-tabela { display: block; overflow-x: auto; }
}

/* ====================================================
   SECAO 4 — REUNIAO
==================================================== */
.reuniao-card {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1.25rem;
  margin-bottom: .75rem;
}
.meeting-create-field { flex: 1 1 280px; }
.meeting-create-field input { min-width: 0; }
@media (max-width: 640px) {
  .reuniao-toolbar .meeting-create-field,
  .reuniao-toolbar .btn { width: 100%; }
}
.reuniao-titulo {
  font-family: var(--viz-font-label);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-text);
  margin-bottom: .5rem;
}
.meeting-workspace {
  width: 100%;
  min-width: 0;
  margin-top: 1.5rem;
}
.meeting-workspace__body {
  padding: clamp(20px, 3vw, 40px);
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-top: 2px solid var(--viz-accent-2);
}
#meeting-progress { margin-bottom: 1.5rem; }
.meeting-dossier-instruments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1px;
  background: var(--viz-border);
  border: 1px solid var(--viz-border);
}
.meeting-dossier-instruments .viz-metric {
  min-height: 0;
  background: var(--viz-surface);
}
.meeting-dossier-instruments .make-instrument .viz-metric__row { grid-template-columns: 1fr; }
.meeting-dossier-instruments .viz-metric__value { font-size: clamp(2rem, 3vw, 2.5rem); }
.meeting-internal-controls {
  margin: 1.5rem 0;
  padding: 24px;
  background: var(--viz-surface-sunken);
  border: 1px solid var(--viz-border);
  border-top: 2px solid var(--viz-muted);
}
.pauta-lista { list-style: none; display: grid; gap: .4rem; margin-bottom: .75rem; }
.pauta-item {
  font-size: .875rem;
  color: var(--viz-muted);
  padding: .4rem .6rem;
  border: 1px solid var(--viz-border);
}
.meeting-dossier {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--viz-border);
  border: 1px solid var(--viz-border);
}
.dossier-section {
  min-width: 0;
  padding: 1rem;
  background: var(--viz-bg);
}
.dossier-label {
  display: block;
  margin-bottom: .65rem;
  color: var(--viz-muted);
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .12em;
}
.dossier-link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .55rem 0;
  text-align: left;
  color: var(--viz-text);
  background: transparent;
  border-bottom: 1px solid var(--viz-border);
}
.dossier-link:last-child { border-bottom: 0; }
.dossier-link small { display: block; margin-top: .25rem; color: var(--viz-muted); }
.dossier-empty { color: var(--viz-muted); font-size: .8rem; }
.meeting-minutes {
  margin: 0;
  padding: 1rem;
  white-space: pre-wrap;
  color: var(--viz-text);
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  font: inherit;
  line-height: 1.6;
}
.meeting-close-section { margin-top: 1rem; }
.meeting-close-item {
  margin: 0;
  padding: .75rem 0;
  color: var(--viz-text);
  border-bottom: 1px solid var(--viz-border);
}
.meeting-close-item strong,
.meeting-close-item small { display: block; }
.meeting-close-item small { margin-top: .3rem; color: var(--viz-muted); }
@media (max-width: 640px) {
  .meeting-dossier, .meeting-dossier-instruments { grid-template-columns: 1fr; }
  .meeting-internal-controls { padding: 16px; }
}

/* ====================================================
   MODAL GENERICO — cabecalho/acoes reaproveitados pelos workspaces
   inline de caso e reuniao (nunca usam overlay flutuante)
==================================================== */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.modal-titulo {
  font-family: var(--viz-font-number);
  font-size: 1.4rem;
  letter-spacing: .03em;
  color: var(--viz-text);
}
.btn-fechar {
  background: transparent;
  border: 1px solid var(--viz-border);
  border-radius: 0;
  color: var(--viz-muted);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: color 150ms, border-color 150ms;
}
.btn-fechar:hover { color: var(--viz-accent); border-color: var(--viz-accent); }

.modal-secao-titulo {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin: 1.25rem 0 .6rem;
  display: block;
}
.modal-acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

.parecer-bloco {
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1rem;
  margin-bottom: .6rem;
}
.parecer-conselho {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-accent-2);
  margin-bottom: .4rem;
  display: block;
}
.parecer-texto.nota-bloco__corpo { padding: .25rem 0 0; max-width: 72ch; }
.parecer-texto {
  font-size: .875rem;
  color: var(--viz-text);
  line-height: 1.6;
}

.divergencia-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .813rem;
  margin-top: .75rem;
}
.divergencia-tabela th {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-muted);
  text-align: left;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--viz-border);
}
.divergencia-tabela td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--viz-border);
  color: var(--viz-text);
  vertical-align: top;
}

.acao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--viz-border);
  font-size: .875rem;
}
.acao-item:last-child { border-bottom: none; }
.acao-texto { color: var(--viz-text); flex: 1; }
.acao-data { font-size: .75rem; color: var(--viz-muted); flex: none; }

/* Modo apresentacao */
body.modo-apresentacao header,
body.modo-apresentacao nav,
body.modo-apresentacao .reuniao-toolbar { display: none !important; }
body.modo-apresentacao main { max-width: none; padding: 1rem; }
body.modo-apresentacao #modal-reuniao textarea,
body.modo-apresentacao #modal-reuniao .modal-acoes,
body.modo-apresentacao #modal-reuniao #reuniao-acao-msg,
body.modo-apresentacao #modal-reuniao .meeting-internal-controls,
body.modo-apresentacao #modal-reuniao #btn-fechar-reuniao { display: none !important; }
/* Seccao de trabalho interno sai INTEIRA, titulo incluido: esconder so' os
   controlos deixava o artista a olhar para titulos de seccoes vazias
   ("PREPARO — DADOS DAS PLATAFORMAS" sem nada por baixo). O resultado das
   analises fica — e' o que se mostra na mesa. */
body.modo-apresentacao #modal-reuniao .meeting-secao--interna { display: none !important; }
body.modo-apresentacao #modal-reuniao .meeting-workspace__body { max-width: min(1100px, 96vw); margin: 0 auto; }

.hidden { display: none !important; }

/* Shell operacional — referências 1–4.
   Nao ha bloco de tokens proprio aqui: os seis tokens de shell repetiam
   literalmente os valores de --viz-* em viz.css, e o de Peach Sand nunca foi
   usado. Duas fontes para a mesma cor divergem em silencio, e esta divergia
   por desenho: o bloco [data-ds] de viz.css remapeia --viz-accent para o
   design system ativo e nunca tocaria a copia, entao o anel de foco e a
   selecao de texto ficariam presos na cor antiga. Todo o shell le --viz-*. */

::selection { background: var(--viz-accent); color: var(--viz-on-accent); }
* { scrollbar-color: var(--viz-border) var(--viz-bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--viz-bg); }
*::-webkit-scrollbar-thumb { background: var(--viz-border); }
:focus-visible { outline: 2px solid var(--viz-accent-2); outline-offset: 3px; }

#app-autenticado { min-height: 100dvh; }
.shell-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  background: var(--viz-bg);
}
.shell-rail {
  position: sticky;
  top: 0;
  height: 100dvh;
  border-right: 1px solid var(--viz-border);
  background: var(--viz-surface-deep);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  z-index: 20;
}
.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--viz-font-number);
  font-size: 1.08rem;
  line-height: .86;
  letter-spacing: .08em;
  color: var(--viz-text);
  padding: 0 8px 22px;
  border-bottom: 1px solid var(--viz-border);
}
.shell-rail nav { display: grid; gap: 2px; padding-top: 18px; background: transparent; border: 0; }
.shell-rail .nav-tab {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  text-align: left;
  letter-spacing: .08em;
}
.shell-rail .nav-tab.ativa {
  color: var(--viz-text);
  background: var(--viz-surface);
  border-color: var(--viz-border);
}
.shell-rail .btn-voltar { justify-content: center; color: var(--viz-muted-bright); }
.shell-rail .btn-voltar:first-of-type { margin-top: .5rem; }
/* Ação, não navegação: fica no fim do rail, abrindo o grupo de baixo, e é a
   única coisa colorida ali — o resto do rail é navegação neutra, então basta a
   borda e o texto em Berry Red para o olho achar de primeira. */
.btn-rail-acao {
  margin-top: auto;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-accent-text);
  background: transparent;
  border: 1px solid var(--viz-accent);
  border-radius: 0;
  min-height: 44px;
  padding: 0 1rem;
  cursor: pointer;
  text-align: center;
}
.btn-rail-acao:hover { background: var(--viz-accent); color: var(--viz-on-accent); }
.shell-rail .btn-voltar + .btn-voltar { margin-top: 8px; }
.shell-workspace { min-width: 0; }
.shell-ops {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 82px;
  padding: 12px clamp(16px, 2vw, 32px);
  border-bottom: 1px solid var(--viz-border);
  background: var(--viz-surface-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.ops-title { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.ops-title strong { font-family: var(--viz-font-number); font-size: 1.35rem; letter-spacing: .04em; font-weight: 400; }
.theme-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, auto));
  position: relative;
  border: 1px solid var(--viz-border);
}
.theme-control__button {
  min-width: 52px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--viz-border);
  color: var(--viz-muted);
  background: transparent;
  font: var(--mm-font-size-label)/var(--mm-line-label) var(--viz-font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-control__button:last-of-type { border-right: 0; }
.theme-control__button[aria-checked="true"] { color: var(--viz-on-accent); background: var(--viz-accent); }
.theme-control__button:focus-visible { outline: 2px solid var(--viz-accent-text); outline-offset: -3px; }
.theme-control__status {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  width: max-content;
  max-width: 240px;
  color: var(--viz-muted-bright);
  font-size: .75rem;
  line-height: 1.2;
  text-align: right;
}
.theme-control__status:empty { display: none; }
.theme-control__status[data-state="error"] { color: var(--conf-block); }
.ops-controls { display: flex; align-items: end; justify-content: flex-end; gap: 8px; min-width: 0; }
.ops-controls .campo { min-width: 132px; }
.ops-controls .campo:first-child { min-width: 190px; }
.ops-controls select, .ops-controls input { width: 100%; min-height: 44px; }
.shell-canvas {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 2.3vw, 38px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.shell-canvas > .secao { grid-column: 1 / -1; min-width: 0; }
.login-link { display: inline-flex; align-items: center; text-decoration: none; }
/* A barra da Reuniao e o menu proprio da aba, e ocupa exatamente o lugar que a
   barra de operacoes analitica ocupa nas outras: mesmo topo, mesmo fundo, mesma
   altura. Numa reuniao longa a lista de itens rola muito, e trocar de artista ou
   entrar em Modo Apresentacao nao pode exigir voltar ao topo.
   As margens negativas cancelam o padding do canvas para o fundo chegar as
   bordas, como o cabecalho faz. */
.reuniao-toolbar {
  /* De volta ao topo, grudada (decisão do operador, 17 SET 2026): trocar de
     artista é a primeira coisa que se faz nesta aba e precisa estar à mão em
     qualquer ponto da rolagem. A lista de retomar vem logo abaixo. */
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: flex-end;
  min-height: 82px;
  /* Irmã de .shell-ops no workspace, com a mesma métrica: as duas são "o menu
     da aba" e trocam de lugar entre si. As margens negativas que compensavam o
     padding do canvas saíram junto com a barra, que já não vive lá dentro. */
  padding: 12px clamp(16px, 2vw, 32px);
  background: var(--viz-surface-bar);
  border-bottom: 1px solid var(--viz-border);
}
.reuniao-toolbar .meeting-create-field { flex: 1 1 220px; min-width: 0; }
.reuniao-toolbar .meeting-create-field label {
  display: block;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin-bottom: .25rem;
}
.reuniao-toolbar select,
.reuniao-toolbar input {
  width: 100%;
  min-height: 44px;
  background: var(--viz-bg);
  color: var(--viz-text);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: .5rem .6rem;
  font-family: var(--viz-font-body);
  font-size: .875rem;
}
.skeleton--compact { height: 60px; }
.skeleton--metric { height: 130px; border: 0; }
.skeleton--medium { height: 100px; border: 0; }
.skeleton--dim-1 { opacity: .8; }
.skeleton--dim-2 { opacity: .6; }
.skeleton--dim-3 { opacity: .4; }
.chart-area--compact { height: clamp(240px, 28vw, 300px); min-height: 240px; }
.legend-offset, .block-offset { margin-top: .75rem; }
.inline-empty { color: var(--viz-muted); font-size: .8rem; margin-top: .5rem; }
.block-gap-sm { margin-bottom: .75rem; }
.block-offset-sm { margin-top: .5rem; }
.block-offset-lg { margin-top: 1rem; }
.field-grow { flex: 1; min-width: 160px; }

.is-loading { color: var(--viz-muted); }
/* Fundo proprio, e nao herdado: as grades de instrumento pintam --viz-border
   no container e deixam o `gap: 1px` desenhar os fios. Com UMA celula unica a
   ocupar a faixa inteira nao ha gap nenhum, e o fundo do container aparece
   por baixo do estado vazio como um bloco macico. Era invisivel enquanto o
   token media 1.34:1; ao subir para 3:1 virou a coisa mais clara do ecra,
   justamente num sitio que nao tem nada a dizer (achado da critique de
   10 SET 2026, Cockpit sem artista escolhido). */
.is-empty {
  color: var(--viz-muted);
  background: var(--viz-surface);
  border: 1px dashed var(--viz-border);
  padding: 18px;
}
.is-error { color: var(--conf-block); border-color: var(--conf-block); }
.is-partial { color: var(--conf-warn); border-color: var(--conf-warn); }
.is-success { color: var(--conf-ok); border-color: var(--conf-ok); }

.diagnostics-box { padding: 20px; margin-bottom: 16px; background: var(--viz-surface); border: 1px solid var(--viz-border); }
.diagnostics-box h3 { font-family: var(--viz-font-label); font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 12px; }
.diagnostics-box p { font-size: 1.05rem; line-height: 1.7; color: var(--viz-text); }
.diagnostics-box .is-error { font-size: .95rem; border: 0; padding: 0; }
.diagnostics-question { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--viz-border); }
.diagnostics-question textarea { width: 100%; min-height: 60px; margin: 8px 0; }

.diagnostics-question__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.diagnostics-question__header label {
  font-family: var(--viz-font-label);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted-bright);
}

.btn-info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  border: 1px solid var(--viz-border);
  background: var(--viz-surface-soft);
  color: var(--viz-accent-3);
  font-family: var(--viz-font-label);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.btn-info-circle:hover,
.btn-info-circle:focus-visible {
  border-color: var(--viz-accent-3);
  background: var(--viz-surface-muted);
  color: var(--viz-text);
  outline: none;
}

.diagnostics-question__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.diagnostics-hint {
  font-size: .75rem;
  color: var(--viz-muted);
  line-height: 1.4;
  flex: 1 1 240px;
}

/* Stepper e Barra de Progresso Real */
.diag-progress {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--viz-border);
  background: var(--viz-surface-soft);
}

.diag-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.diag-progress__status {
  font-family: var(--viz-font-label);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-accent-1);
}

.diag-progress__percent {
  font-family: var(--viz-font-number);
  font-size: .85rem;
  color: var(--viz-text);
}

.diag-progress__bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--viz-border);
  margin-bottom: 16px;
  overflow: hidden;
}

.diag-progress__bar {
  width: 0%;
  height: 100%;
  background: var(--viz-accent-3);
  transition: width .35s ease-out;
}

.diag-progress__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}

.diag-progress__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--viz-muted);
  transition: color .2s ease;
}

.diag-progress__step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--viz-border);
  font-family: var(--viz-font-label);
  font-size: .75rem;
  color: var(--viz-muted);
}

.diag-progress__step.is-active {
  color: var(--viz-accent-3);
}

.diag-progress__step.is-active .step-num {
  border-color: var(--viz-accent-3);
  color: var(--viz-accent-3);
  font-weight: 700;
}

.diag-progress__step.is-done {
  color: var(--viz-text);
}

.diag-progress__step.is-done .step-num {
  border-color: var(--viz-border-strong);
  background: var(--viz-border);
  color: var(--viz-text);
}

/* Histórico de Perguntas e Respostas com Pílulas */
.diag-qa-history {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diag-qa-item {
  border: 1px solid var(--viz-border);
  background: var(--viz-surface-soft);
  padding: 16px;
}

.diag-qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--viz-border);
}

.diag-qa-author-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diag-qa-date {
  font-size: .75rem;
  color: var(--viz-muted);
  font-family: var(--viz-font-label);
}

.diag-qa-question {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--viz-text);
  margin-bottom: 16px;
  font-weight: 600;
}

.diag-qa-answer {
  border: 1px solid color-mix(in oklch, var(--viz-accent-3) 45%, var(--viz-border)); background: color-mix(in oklch, var(--viz-accent-3) 8%, var(--viz-surface, transparent));
  padding-left: 12px;
  font-size: .85rem;
  line-height: 1.6;
}

/* Modal Didático do Diagnóstico */
.modal-ajuda__card {
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-ajuda__corpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-ajuda__bloco {
  padding: 14px;
  border: 1px solid var(--viz-border);
  background: var(--viz-surface-soft);
}

.modal-ajuda__bloco h3 {
  font-family: var(--viz-font-label);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-accent-1);
  margin-bottom: 8px;
}

.modal-ajuda__bloco p {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--viz-text);
  margin: 0;
}

.modal-ajuda__lista {
  margin: 8px 0 0;
  padding-left: 18px;
}

.modal-ajuda__lista li {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--viz-text);
  margin-bottom: 6px;
}

.modal-ajuda__bloco--aviso {
  border-color: var(--conf-warn);
}

.modal-ajuda__bloco--aviso h3 {
  color: var(--conf-warn);
}

.modal-ajuda__bloco--destaque {
  border-color: var(--viz-accent-3);
  background: var(--viz-surface-muted);
}

.modal-ajuda__bloco--destaque h3 {
  color: var(--viz-accent-3);
}

@media (max-width: 1360px) {
  .shell-ops {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .ops-title {
    width: 100%;
    justify-content: space-between;
  }
  .ops-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .ops-controls .campo {
    flex: 1 1 132px;
    min-width: 120px;
  }
  .ops-controls .campo:first-child {
    flex: 1 1 180px;
    min-width: 160px;
  }
}

@media (max-width: 1100px) {
  .shell-layout { grid-template-columns: 104px minmax(0, 1fr); }
  .rail-brand span, .shell-rail .nav-tab { font-size: .75rem; }
  .rail-brand { justify-content: center; padding-inline: 0; }
  .shell-rail .nav-tab { padding: 0 6px; text-align: center; }
  .shell-rail .btn-voltar { padding: 4px 6px; text-align: center; }
  .ops-controls { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .ops-controls .campo { flex: 1 1 132px; min-width: 120px; }
  .ops-controls .campo:first-child { flex: 1 1 180px; min-width: 160px; }
}

@media (max-width: 767px) {
  .shell-layout { display: block; }
  .shell-rail {
    position: fixed;
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--viz-border);
  }
  /* A barra móvel mantém os seis destinos dentro do viewport. Ações operacionais
     de desktop permanecem fora dela para garantir alvos de toque de 44px. */
  .rail-brand, .shell-rail .btn-voltar, .shell-rail .btn-rail-acao { display: none; }
  /* Sincronizar todos os dados sai do topo no telemovel, pela mesma razao ja
     escrita acima para "Importar dados" e "Pendencias": e' trabalho de
     desktop, e ocupava com o seu bloco de estado a viewport inteira do Pulso —
     o primeiro ecra nao trazia um unico numero (critique de 10 SET 2026). */
  .ops-controls .campo--sync { display: none; }
  #sec-pulso h1 { margin-top: 4px; }
  .sec-explainer { margin-bottom: 12px; }
  .shell-rail nav { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0; width: 100%; }
  .shell-rail .nav-tab { min-height: 50px; padding-inline: 1px; letter-spacing: -.02em; font-size: .75rem; overflow-wrap: anywhere; line-height: 1.15; }
  .shell-ops { position: static; min-height: 0; padding: 14px; gap: 12px; }
  .ops-title { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: space-between; }
  .theme-control { width: 100%; }
  .theme-control__button { min-width: 44px; }
  .ops-controls { grid-template-columns: 1fr 1fr; }
  .ops-controls .campo, .ops-controls .campo:first-child { min-width: 0; }
  .shell-canvas { display: block; padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }
}

/* --- Painel Importar Dados --- */
.painel-importar {
  position: fixed;
  inset: 0;
  background: var(--viz-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 24px 16px;
  overflow-y: auto;
}
.painel-importar__card {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 24px;
  max-width: 480px;
  width: 100%;
}
.painel-importar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.painel-importar__header h2 {
  margin: 0;
  font-family: var(--viz-font-number);
  font-size: 1.1rem;
  color: var(--viz-text);
}
.painel-importar__origem {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.painel-importar__origem label {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.painel-importar__label-upload { align-self: flex-start; }
.painel-importar__nome-arquivo {
  font-size: .8rem;
  color: var(--viz-muted);
}
.painel-importar__resultado {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.painel-importar__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--viz-border);
  font-size: .85rem;
  color: var(--viz-text);
}

.painel-importar__substituir { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .8rem; color: var(--viz-text); cursor: pointer; }

.painel-importar__historico { margin-top: 24px; border-top: 1px solid var(--viz-border); padding-top: 16px; }
.painel-importar__historico h3 { font-size: .85rem; margin: 0 0 8px; text-transform: uppercase; }
.painel-importar__historico-lista { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; font-size: .8rem; color: var(--viz-text); }
.painel-importar__historico-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--viz-border); }
.painel-importar__historico-item span { opacity: .75; }

.painel-pendencias__card { max-width: 640px; }
.painel-pendencias__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}
.painel-pendencias__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--viz-border);
  font-size: .85rem;
  color: var(--viz-text);
}
.painel-pendencias__item--resolvido { border-color: var(--conf-ok); opacity: .6; }
.painel-pendencias__item--resolvido strong { text-decoration: line-through; }
.painel-pendencias__check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  cursor: pointer;
}
.painel-pendencias__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--conf-ok);
  cursor: pointer;
}
.painel-pendencias__estado {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.painel-pendencias__item--resolvido .painel-pendencias__estado { color: var(--conf-ok); }
.painel-pendencias__conteudo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.painel-pendencias__meta { font-size: .75rem; color: var(--viz-muted); }
.painel-pendencias__atrasado { color: var(--conf-warn); font-weight: 600; }

/* --- Meses com dado disponivel (ao lado do filtro de periodo) ---
   position:absolute (mesmo padrao do .artist-combo__list): sem isso, esse bloco
   contava na altura do .campo "Periodo — de" e, com .ops-controls alinhando os
   campos pelo rodape (align-items:end), empurrava só o input de periodo pra
   cima dos vizinhos — desalinhado mesmo vazio, pois o div ainda reservava
   espaço (gap + margin-top) sem conteudo. Como overlay flutuante, nunca afeta
   a altura do campo. */
/* .periodo-disponivel e absoluta, entao todo campo que a hospeda precisa ser
   o bloco de contencao. O campo--sync do Pulso ficou de fora quando a classe
   passou a ser absoluta (09 SET 2026, para alinhar os inputs do header) e o
   status do "Sincronizar todos os dados" foi parar sobre o titulo PULSO DA
   MAKE, no canto oposto ao botao que o produz — medido em x=188,y=95. */
.ops-controls .campo[data-abas="radar cockpit"] { position: relative; }
.periodo-disponivel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 260px;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  padding: 6px;
}
.periodo-disponivel:empty { display: none; border: 0; padding: 0; }
.periodo-pill {
  border: 1px solid var(--conf-ok);
  background: transparent;
  color: var(--conf-ok);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .05em;
  cursor: pointer;
}
.periodo-pill:hover { filter: brightness(1.2); }

/* --- Analise pre-reuniao (Fases 2 e 3) --- */
.meeting-analise {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1rem;
  margin-bottom: 1rem;
}
.meeting-analise label {
  display: block;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-muted);
  margin: 1rem 0 .4rem;
}
.meeting-analise textarea,
.meeting-analise select {
  width: 100%;
  min-height: 44px;
  background: var(--viz-bg);
  color: var(--viz-text);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: .6rem;
  font-family: var(--viz-font-body);
  font-size: .875rem;
}
.meeting-analise textarea { min-height: 72px; resize: vertical; }
.meeting-analise__barra {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}
.meeting-analise__barra select { flex: 1 1 220px; width: auto; min-width: 0; }
.meeting-analise__progresso {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.meeting-analise__plataformas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}
.meeting-analise__plataformas:empty { display: none; }
.diag-plataforma {
  /* O estado tinha uma barra colorida de 3px a esquerda. Todo o resto do
     sistema separa com fio de 1px; a barra lateral grossa destoava e e' o
     tique mais reconhecivel de interface gerada. O fio inteiro na cor do
     estado diz o mesmo dentro da linguagem da casa — e o estado continua
     escrito em .diag-plataforma__estado, nao so na cor. */
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: .5rem .6rem;
  min-width: 0;
}
.diag-plataforma__nome {
  display: block;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-text);
}
.diag-plataforma__estado {
  display: block;
  font-size: .75rem;
  color: var(--viz-muted);
  overflow-wrap: anywhere;
}
.diag-plataforma--corrente { border-color: var(--viz-accent-2); }
.diag-plataforma--ok { border-color: var(--conf-ok); }
.diag-plataforma--vazio { border-color: var(--conf-warn); }
.diag-plataforma--erro { border-color: var(--conf-block); }

@media (max-width: 720px) {
  .meeting-analise__plataformas { grid-template-columns: minmax(0, 1fr); }
  .meeting-analise__barra .btn,
  .meeting-analise__barra select { width: 100%; flex: 1 1 100%; }
}

/* Estado vivo (reunião aberta, caso pendente) recebe tinta de fundo além da
   borda: só a borda colorida some no meio do card escuro, e era exatamente o
   que o operador precisava achar de relance. */
.pill-forte {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-width: 1px;
  font-weight: 600;
}

/* Estado de entrada do Cockpit: enquanto nao ha artista, a aba mostra a
   pergunta e nada do andaime. O seletor `> *` esconde os irmaos diretos da
   seccao, entao um modulo novo nasce ja coberto pela regra. */
#sec-cockpit.sem-artista > *:not(.sec-explainer):not(.cockpit-entrada) { display: none; }
.cockpit-entrada {
  max-width: 52ch;
  margin: 3rem 0;
  padding: 2rem;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
}
.cockpit-entrada__titulo {
  font-family: var(--viz-font-number);
  font-size: 2rem;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.cockpit-entrada__texto {
  color: var(--viz-muted);
  font-size: .938rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* --- Miniatura do artista --- */
/* Circular por excecao explicita: e retrato, nao controle. A regra de forma da
   casa manda 0 em container e controle e reserva o redondo total a pill/avatar. */
.artista-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  flex: 0 0 auto;
  vertical-align: middle;
  margin-right: .5rem;
}
.artista-avatar--md { width: 40px; height: 40px; }
.campo-artista { display: flex; align-items: center; gap: .5rem; }
.campo-artista .artista-avatar { margin-right: 0; }
.campo-artista .header-select { flex: 1 1 auto; min-width: 0; }
.dossier-artista { display: flex; align-items: center; gap: .5rem; text-align: left; }

/* Padrão obrigatório da casa (09 SET 2026, regra do operador): toda lista de
   artistas mostra miniatura + nome — select nativo nunca renderiza <img>
   dentro de <option>, em nenhum browser, então isso não é estilização, é um
   componente próprio. O <select> real continua no DOM (sr-only, não
   display:none) como fonte da verdade e alvo dos testes automatizados —
   este combobox é só a camada visual, sincronizada nos dois sentidos via
   evento 'change'. Ver initArtistCombobox() em dashboard.js. */
/* opacity:0 (nao clip/1px): o <select> mantem tamanho real e continua com
   "visible ratio" > 0 pro Playwright (selectOption/toBeInViewport exigem bounding
   box real, nao so display!=none) — achado real, 09 SET 2026: a variante sr-only
   de 1px quebrou 6 testes com "viewport ratio 0"/timeout. pointer-events:none
   pra ninguem abrir sem querer o dropdown nativo (sem foto) por baixo do
   combobox visual. */
.artist-combo__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.artist-combo { position: relative; flex: 1 1 auto; min-width: 0; }
.artist-combo__trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  padding: 0 .75rem;
  background: var(--viz-surface);
  color: var(--viz-text);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
}
/* Forte, nao cinza (09 SET 2026, pedido do operador): isto e o que a pessoa
   realmente VE — o combobox visual cobre o <select> nativo (opacity:0), entao
   o destaque que ja existia em `.opcao-placeholder`/`select:has(...)` (mais
   abaixo neste arquivo) nunca aparecia na tela, so no controle invisivel por
   baixo. Mesmo tratamento (cor + borda + peso) nos dois lugares que o
   operador realmente olha: o botao fechado e a lista aberta. */
.artist-combo__trigger.is-placeholder { color: var(--viz-accent-2); border-color: var(--viz-accent-2); font-weight: 600; }
.artist-combo__trigger-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  flex: 0 0 auto;
}
.artist-combo__trigger-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-combo__trigger-seta { flex: 0 0 auto; color: var(--viz-muted); }
.artist-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  padding: 4px;
}
.artist-combo__option {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  padding: 0 .5rem;
  background: transparent;
  color: var(--viz-text);
  border: 0;
  cursor: pointer;
  font-family: var(--viz-font-body);
  font-size: .85rem;
  text-align: left;
}
.artist-combo__option:hover,
.artist-combo__option:focus-visible { background: var(--viz-surface); }
.artist-combo__option.is-selecionado { color: var(--viz-accent-3); }
.artist-combo__option-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  flex: 0 0 auto;
}
.artist-combo__option.is-placeholder { color: var(--viz-accent-2); font-weight: 600; }

/* --- Catalogo em sanfona --- */
.dossier-faixa {
  border-bottom: 1px solid var(--viz-border);
}
.dossier-faixa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: .875rem;
  color: var(--viz-text);
}
.dossier-faixa > summary::-webkit-details-marker { display: none; }
.dossier-faixa > summary::before {
  content: '+';
  font-family: var(--viz-font-label);
  color: var(--viz-accent-2);
  width: 1rem;
  flex: 0 0 auto;
}
.dossier-faixa[open] > summary::before { content: '−'; }
.dossier-faixa__nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dossier-faixa__unidades {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  color: var(--viz-muted);
  flex: 0 0 auto;
}
.dossier-faixa__codigos {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: 0 0 .75rem 1rem;
  font-size: .75rem;
  color: var(--viz-text);
}
.dossier-faixa__codigos em {
  display: block;
  font-family: var(--viz-font-label);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
}

/* --- Territorios em barras --- */
.dossier-territorios { display: flex; flex-direction: column; gap: .35rem; }
.territorio-linha {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
}
.territorio-nome {
  color: var(--viz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territorio-barra {
  display: block;
  height: 10px;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  min-width: 0;
}
.territorio-barra > i {
  display: block;
  height: 100%;
  background: var(--viz-accent-2);
}
.territorio-valor {
  font-family: var(--viz-font-label);
  color: var(--viz-muted);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .territorio-linha { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) auto; }
}

/* Campo de sincronização do Pulso: o status fica alinhado à esquerda do botão em Icy Blue */
.ops-controls .campo--sync {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  width: auto;
}
.pulse-sync-status {
  display: inline-block;
  font-family: var(--viz-font-body);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--viz-accent-2);
  text-align: right;
  white-space: nowrap;
  letter-spacing: .02em;
  font-weight: 500;
}
.pulse-sync-status:empty { display: none; }

/* .periodo-disponivel flutua sob o seu campo (position:absolute). No desktop
   cai em area vazia; a 390px a barra de operacoes fica logo acima do titulo e
   a caixa passava POR CIMA do <h1> — medido em 10 SET 2026: status 122-157
   contra h1 149-185. No mobile ela entra no fluxo.
   Fica aqui, e nao no @media de 767px la em cima: aquele bloco vem ANTES da
   definicao base de .periodo-disponivel, e com a mesma especificidade quem
   aparece depois vence — a primeira tentativa nao teve efeito nenhum. */
@media (max-width: 767px) {
  .periodo-disponivel { position: static; max-width: none; margin-top: 6px; }
}

/* O atributo `hidden` aplica `display: none` com especificidade de elemento —
   qualquer regra de classe que declare `display` o derrota em silêncio, e o
   elemento continua visível sem nada acusar. Já aconteceu duas vezes aqui (a
   barra por aba e o campo de cadastrar artista no importador), então a regra é
   geral em vez de uma linha por caso novo. */
[hidden] { display: none !important; }

/* --- Lista de reunioes: uma linha, nao um card --- */
.reuniao-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem 0;
  border-bottom: 1px solid var(--viz-border);
}
.reuniao-linha__id { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 260px; }
.reuniao-linha__acoes { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.reuniao-titulo {
  font-family: var(--viz-font-label);
  font-size: .95rem;
  color: var(--viz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reuniao-data { font-size: .75rem; color: var(--viz-muted); white-space: nowrap; }
.btn-icone {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--viz-muted);
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.btn-icone:hover { color: var(--viz-accent-2); border-color: var(--viz-border); }
.btn-icone--perigo:hover { color: var(--conf-block); border-color: var(--conf-block); }
.btn-perigo { background: var(--conf-block); border-color: var(--conf-block); color: var(--viz-bg); }

/* --- Dialogo do sistema (renomear / apagar) --- */
.dialogo-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--viz-scrim-strong);
}
.dialogo-caixa {
  width: 100%;
  max-width: 480px;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1.25rem;
}
.dialogo-mensagem { font-size: .875rem; color: var(--viz-text); line-height: 1.6; margin: .5rem 0 .75rem; }
.dialogo-mensagem:empty { display: none; }
#dialogo-reuniao-campo {
  width: 100%;
  min-height: 44px;
  background: var(--viz-bg);
  color: var(--viz-text);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: .5rem .6rem;
  font-family: var(--viz-font-body);
  font-size: .875rem;
}

/* --- Notas e decisoes em sanfona, legiveis em reuniao --- */
.nota-bloco { border-bottom: 1px solid var(--viz-border); }
.nota-bloco > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .6rem 0;
  cursor: pointer;
  list-style: none;
}
.nota-bloco > summary::-webkit-details-marker { display: none; }
.nota-bloco > summary::before {
  content: '+';
  font-family: var(--viz-font-label);
  color: var(--viz-accent-2);
  width: 1rem;
  flex: 0 0 auto;
}
.nota-bloco[open] > summary::before { content: '−'; }
.nota-bloco__assunto {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--viz-font-label);
  font-size: .95rem;
  color: var(--viz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nota-bloco__meta { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.autor-pill {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--viz-border);
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}
.autor-pill--humano { color: var(--viz-accent-3); border-color: var(--viz-accent-3); }
.autor-pill--sistema { color: var(--viz-muted); }
/* Pessoa e câmara não se confundem nem quando calham do mesmo tom: a pílula de
   quem redigiu por IA tem traço tracejado, a de quem é gente tem traço sólido. */
.autor-pill--agente { border-style: dashed; }
/* Um tom por autor — sócios com tom fixo, cada câmara com o seu. Todos são
   tokens que o sistema já usa como cor de texto, para não inventar cor nova
   fora da paleta. */
.autor-pill--tom-a { color: var(--viz-accent); border-color: var(--viz-accent); }
.autor-pill--tom-b { color: var(--viz-accent-2); border-color: var(--viz-accent-2); }
.autor-pill--tom-c { color: var(--viz-accent-3); border-color: var(--viz-accent-3); }
.autor-pill--tom-d { color: var(--viz-accent-1); border-color: var(--viz-accent-1); }
.autor-pill--tom-e { color: var(--viz-muted-bright); border-color: var(--viz-muted-bright); }
.autor-pill--tom-f { color: var(--viz-text); border-color: var(--viz-text); }

/* O corpo da nota é o texto que se lê em voz alta na reunião: escala maior que
   o resto da interface e medida de linha limitada, porque linha longa demais
   faz o olho perder o começo da seguinte. */
.nota-bloco__corpo { padding: .25rem 0 1.25rem 1rem; max-width: 78ch; }
/* Três degraus de leitura no parecer, para se achar a seção certa sem ler tudo
   (pedido do operador, 17 SET 2026): SEÇÃO > ponto > corpo. O título é maior e
   mais pesado que o subtítulo, e leva mais espaço acima do que abaixo — o
   branco é o que separa as seções, não uma régua. */
.nota-bloco__titulo {
  font-family: var(--viz-font-label);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-accent-2);
  margin: 1.75rem 0 .6rem;
}
.nota-bloco__subtitulo {
  font-family: var(--viz-font-label);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--viz-text);
  margin: 1.1rem 0 .35rem;
}
.nota-bloco__corpo > .nota-bloco__titulo:first-child,
.nota-bloco__corpo > .nota-bloco__subtitulo:first-child { margin-top: .25rem; }
.nota-bloco__lista { margin: 0 0 .75rem; padding-left: 1.1rem; list-style: none; }
.nota-bloco__lista li {
  position: relative;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--viz-text);
  margin-bottom: .5rem;
}
/* Marcador próprio, angular como o resto do sistema — o disco do navegador não
   pertence a nenhum design system. */
.nota-bloco__lista li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: .65em;
  width: 6px;
  height: 2px;
  background: var(--viz-accent);
}
.nota-bloco__texto {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--viz-text);
  margin-bottom: .75rem;
}
/* O que o modelo marcou como importante fica visivelmente importante. */
.nota-bloco__corpo strong { font-weight: 700; color: var(--viz-text); }
.nota-bloco__lista li strong { color: var(--viz-text); }

/* --- Top 5 de territorios no lugar do retangulo do artista --- */
.dossier-top-territorios {
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: 1rem;
}
.dossier-top-territorios .dossier-territorios { margin-top: .6rem; }
.dossier-nota { display: block; margin-top: .6rem; font-size: .75rem; color: var(--viz-muted); }
.pauta-item--vazia { color: var(--viz-muted); }

@media (max-width: 720px) {
  .reuniao-linha__acoes { width: 100%; justify-content: flex-start; }
  .nota-bloco__corpo { padding-left: 0; }
}

/* "Selecione o artista…" precisa puxar o olho: é a ação que destrava a aba
   inteira, e um placeholder cinza no meio de uma lista cinza não convida a
   clicar. Só a linha do placeholder muda de cor — os artistas continuam
   neutros, senão nada se destaca.
   `<option>` aceita cor no Firefox e no Chrome em Windows/Linux; no macOS o
   sistema pinta a lista aberta e ignora a regra. Por isso o mesmo destaque é
   aplicado também ao próprio `<select>` enquanto nada está escolhido, que é o
   estado que o operador vê fechado — esse funciona em todos. */
.opcao-placeholder { color: var(--viz-accent-2); font-weight: 600; }
select:has(option.opcao-placeholder:checked) {
  color: var(--viz-accent-2);
  border-color: var(--viz-accent-2);
  font-weight: 600;
}

.painel-importar__novo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.painel-importar__novo input { flex: 1 1 200px; min-width: 0; min-height: 44px; }
.painel-importar__aviso { font-size: .75rem; color: var(--conf-warn); }

/* --- Retrato do artista, logo abaixo do menu da aba --- */
.card-artista {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1rem clamp(16px, 2vw, 32px);
  background: var(--viz-surface);
  border-bottom: 1px solid var(--viz-border);
}
.card-artista__identidade { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; }
.card-artista__foto { width: 56px; height: 56px; margin-right: 0; }
.card-artista__nome-bloco { min-width: 0; }
.card-artista__nome {
  display: block;
  font-family: var(--viz-font-display, var(--viz-font-label));
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--viz-text);
}
.card-artista__links { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.card-artista__links a {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--viz-accent-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.card-artista__links a:hover { border-bottom-color: var(--viz-accent-2); }
/* A bio do Instagram é texto do artista, não do sistema: entra em duas linhas
   no máximo, para dar o tom sem empurrar as métricas para fora da vista. */
.card-artista__bio {
  margin-top: .4rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--viz-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-artista__metricas {
  display: grid;
  /* 150px de piso: abaixo disso "ouvintes por mês" e os nomes longos partiam a
     meio (defeito real relatado pelo operador, 17 SET 2026). Com auto-fit os
     cinco cards cabem numa linha no desktop e quebram para duas no telemóvel,
     sem nunca espremer o conteúdo. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  min-width: 0;
}
/* Cor oficial de cada rede, resolvida pelo tema activo. Pinta ícone e régua —
   nunca texto: o vermelho do YouTube e o azul do Facebook ficam abaixo dos
   4,5:1 exigidos a texto sobre a superfície escura, mas cumprem os 3:1 de
   elemento gráfico. */
.card-artista__metrica[data-rede="ig"]      { --rede: var(--viz-platform-instagram); }
.card-artista__metrica[data-rede="spotify"] { --rede: var(--viz-platform-spotify); }
.card-artista__metrica[data-rede="youtube"] { --rede: var(--viz-platform-youtube); }
.card-artista__metrica[data-rede="tiktok"]  { --rede: var(--viz-platform-tiktok); }
.card-artista__metrica[data-rede="streams"] { --rede: var(--viz-accent); }
.card-artista__metrica {
  --rede: var(--viz-accent);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .7rem .75rem .6rem;
  border: 1px solid var(--viz-border);
  /* Forma zero, como todo contentor do sistema. */
  border-radius: 0;
  background: var(--viz-surface-sunken, transparent);
}
.card-artista__metrica-rede {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.card-artista__icone { flex: none; color: var(--rede); }
.card-artista__rede-nome {
  font-family: var(--viz-font-label);
  /* 12px é o piso de texto funcional do dashboard; o nome estava a 10,9px. */
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-artista__valor {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
  font-family: var(--viz-font-display, var(--viz-font-label));
  font-size: 1.7rem;
  /* 1.4, não 1.05: a Oswald tem caixa de glifo mais alta que a linha e a 1.05
     os numerais eram cortados por 6px — medido com scrollHeight contra
     clientHeight depois de `document.fonts.ready`, nunca a olho. Com a fonte de
     fallback o defeito não aparece, e foi por isso que uma primeira medição
     passou por engano. */
  line-height: 1.4;
  color: var(--viz-text);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* A régua é o instrumento do card: a mesma linguagem de medida dos outros
   módulos do dashboard, e o lugar onde a cor da rede fica legível sem custar
   contraste a nenhum texto. */
.card-artista__regua {
  display: block;
  height: 3px;
  width: 2.25rem;
  background: var(--rede);
}
.card-artista__rotulo {
  display: block;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-muted);
  overflow-wrap: anywhere;
}
/* O delta herda a altura de linha do corpo (1.6) e, alinhado pela baseline ao
   número grande, a caixa dele passava 4px abaixo do contentor — medido com
   scrollHeight contra clientHeight, não a olho. Altura de linha própria e
   alinhamento pela base resolvem sem mexer na escala. */
.card-artista__delta {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  line-height: 1.15;
  letter-spacing: .04em;
}
.card-artista__delta--sobe { color: var(--conf-ok); }
.card-artista__delta--desce { color: var(--conf-block); }
.card-artista__delta--zero { color: var(--viz-muted); }
/* Só a métrica com URL da rede vira link — e diz isso na borda e na régua, que
   cresce para a largura toda no hover: o card inteiro é o alvo. */
.card-artista__metrica--link { text-decoration: none; color: inherit; cursor: pointer; }
/* Cresce por transform, não por width: animar width faz o navegador refazer
   layout a cada frame. `scaleX` com origem à esquerda dá o mesmo gesto sem
   tocar no fluxo. */
.card-artista__metrica--link .card-artista__regua {
  transform-origin: left center;
  transition: transform var(--motion-duration, .18s) ease-out;
}
.card-artista__metrica--link:hover,
.card-artista__metrica--link:focus-visible {
  border-color: var(--rede);
  background: var(--viz-surface-hover);
}
.card-artista__metrica--link:hover .card-artista__regua,
.card-artista__metrica--link:focus-visible .card-artista__regua {
  /* 2,25rem -> largura do card: o fator vem da própria caixa, via calc sobre
     100% do contentor. */
  transform: scaleX(var(--regua-cheia, 4));
}
.card-artista__metrica--link:focus-visible {
  outline: 2px solid var(--viz-accent);
  outline-offset: 2px;
}
.card-artista__rodape {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--viz-muted);
}
.card-artista__vazio { font-size: .8rem; color: var(--viz-muted); }
/* card-artista__faixa-top e' o proprio <a> quando ha link do Spotify (capa +
   nome inteiros clicaveis, nao so o texto) — herda cor/decoracao neutra por
   padrao e ganha sublinhado so no hover/focus, pra nao parecer um botao cru. */
.card-artista__faixa-top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
a.card-artista__faixa-top:hover .card-artista__faixa-nome,
a.card-artista__faixa-top:focus-visible .card-artista__faixa-nome { text-decoration: underline; }
.card-artista__faixa-capa { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--viz-border); flex: 0 0 auto; }
.card-artista__faixa-info { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.card-artista__faixa-rotulo { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--viz-muted); }
.card-artista__faixa-nome { font-size: 1.1rem; font-weight: 600; color: var(--viz-text); }

/* Ultimo lancamento (10 SET 2026): mesmo peso visual da Faixa mais tocada, ao
   lado dela no rodape — mas o texto nunca muda de tom (Advisors: anti-hype),
   so a cor da data reage ao tempo desde o lancamento, mesmo tokens de
   Confianca (conf-ok/warn/block) ja usados em outro lugar do Cockpit. */
.card-artista__lancamento { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.card-artista__lancamento-rotulo { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--viz-muted); }
.card-artista__lancamento-nome { font-size: 1.1rem; font-weight: 600; color: var(--viz-text); }
.card-artista__lancamento-data { font-size: .8rem; color: var(--viz-muted); }
.card-artista__lancamento.is-ok .card-artista__lancamento-data { color: var(--conf-ok); }
.card-artista__lancamento.is-warn .card-artista__lancamento-data { color: var(--conf-warn); }
.card-artista__lancamento.is-block .card-artista__lancamento-data { color: var(--conf-block); }

@media (max-width: 900px) {
  .card-artista { grid-template-columns: minmax(0, 1fr); }
  .card-artista__metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Capa da faixa na sanfona do catálogo: identifica o trabalho de relance, do
   mesmo jeito que a foto identifica o artista. Quadrada, não circular — capa de
   disco é retângulo, e arredondá-la descaracteriza a arte. */
.dossier-faixa__capa {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
}
.dossier-faixa__capa--vazia { display: inline-block; }
.dossier-faixa__ouvir {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--conf-ok);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: center;
}
.dossier-faixa__ouvir:hover { border-bottom-color: var(--conf-ok); }

/* Tooltip "?" — explica o que um título/métrica significa e de onde vem o
   número, sem sair da tela. --viz-accent-3 (Peach Sand) é o tom quente já
   existente na paleta, mais perto do "amarelo claro" pedido do que inventar
   uma cor nova fora dos tokens do sistema (09 SET 2026, pedido do operador). */
/* Disco de 18px, alvo de 44px. O disco e' o tamanho certo ao lado de um
   rotulo de 12px; o alvo de toque nao pode herdar esse tamanho — media
   18x18 em todos os viewports e reprovava ate no piso de 24x24 da WCAG
   2.5.8 (medido em 10 SET 2026). O ::after invisivel resolve sem mexer no
   desenho. E' <button>, nao <span tabindex>: o elemento executa uma acao. */
.info-tip {
  position: relative;
  display: inline-flex;
  border: 0;
  padding: 0;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--viz-accent-3);
  color: var(--viz-bg);
  font-family: var(--viz-font-label);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  flex: 0 0 auto;
}
.info-tip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.info-tip__bubble {
  /* display:none (nao opacity/visibility) e' o que importa aqui: um elemento
     absoluto ainda soma no scrollWidth do documento mesmo invisivel, e a
     bolha (ate 280px, centralizada no icone) estourava a largura da tela no
     mobile mesmo fechada — achado real, 09 SET 2026, quebrou 3 testes de
     "sem rolagem lateral". display:none tira do calculo por completo. */
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--viz-bg);
  border: 1px solid var(--viz-accent-3);
  color: var(--viz-text);
  font-family: var(--viz-font-body);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  z-index: 20;
  pointer-events: none;
}
.info-tip:hover .info-tip__bubble,
.info-tip:focus .info-tip__bubble,
.info-tip:focus-visible .info-tip__bubble {
  display: block;
}

/* ESPERA VIVA — barra indeterminada das chamadas de IA da reunião.
   Indeterminada de propósito: o backend faz UMA chamada síncrona ao Gemini e
   não tem percentagem para reportar. Um bloco que percorre a faixa diz "vivo",
   que é verdade; uma percentagem diria "falta tanto", que seria invenção.
   Sem degradê, como manda a regra de forma do sistema. */
.msg--espera {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.espera-barra {
  display: block;
  position: relative;
  overflow: hidden;
  height: 3px;
  width: 100%;
  background: var(--viz-border);
}
.espera-barra__bloco {
  position: absolute;
  inset-block: 0;
  width: 32%;
  background: var(--viz-accent);
  animation: espera-desliza 1.15s linear infinite;
}
.espera-texto {
  font-family: var(--viz-font-label);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--viz-muted);
}
.espera-texto strong { color: var(--viz-text); font-variant-numeric: tabular-nums; }
@keyframes espera-desliza {
  from { transform: translateX(-100%); }
  to   { transform: translateX(412%); }
}
/* Quem pediu menos movimento vê a barra parada, não uma tela que pisca. */
@media (prefers-reduced-motion: reduce) {
  .espera-barra__bloco { animation: none; width: 100%; opacity: .45; }
}


/* ABAS DOS TRES TEMPOS — antes, durante, depois.
   Forma zero, como todo controlo do sistema; a aba activa se declara pela
   barra de acento em baixo e pelo contraste do texto, nunca por arredondar. */
.meeting-abas {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--viz-border);
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;
}
.meeting-aba {
  flex: 1 1 0;
  min-width: 0;
  /* 44px de alvo de toque: a barra e' usada com o polegar, com o telemovel na
     mesa, no meio da conversa. */
  min-height: 44px;
  padding: .6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--viz-muted);
  font-family: var(--viz-font-label);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.meeting-aba:hover { color: var(--viz-text); }
.meeting-aba[aria-selected="true"] {
  color: var(--viz-text);
  border-bottom-color: var(--viz-accent);
}
.meeting-aba:focus-visible { outline: 2px solid var(--viz-accent); outline-offset: -2px; }
.meeting-painel { min-width: 0; }
.modal-reuniao-artista {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--viz-font-label);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--viz-text);
  min-width: 0;
}
/* 48px, quase o dobro dos 26px iniciais: a 26 não se reconhecia o artista, que
   é a única função desta foto (correção do operador, 17 SET 2026). */
.modal-reuniao-artista__foto { width: 48px; height: 48px; flex: none; }
/* Num ecrã estreito o nome do artista não cabe ao lado do título e dos dois
   botões do cabeçalho: passa a ocupar a linha inteira, por baixo. Sem isto o
   nome era comprimido a 42px de caixa para 115px de texto (medido na auditoria
   visual de predeploy, não a olho). */
@media (max-width: 560px) {
  .modal-header { flex-wrap: wrap; }
  .modal-reuniao-artista { order: 3; flex: 1 0 100%; }
}

/* Rodapé comum aos três tempos: notas e decisões não pertencem a um tempo só —
   é onde moram as respostas que se consultam durante a reunião inteira. Fica
   separado dos painéis por uma linha, para se ler como base do modal e não
   como continuação da aba aberta. */
.meeting-rodape {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--viz-border);
}


/* Escolha das câmaras (17 SET 2026, segunda passagem): eram seis linhas de
   checkbox nativo empilhadas — meia tela de altura para escolher uma câmara, e
   a caixa do sistema desalinhada do texto ao lado. Agora são alvos retangulares
   numa faixa que quebra sozinha: a mesma informação em duas linhas, alinhamento
   próprio, e o estado lê-se pela cor da borda e do texto, não por um quadradinho
   de 13px do sistema operativo.

   O input continua lá, focável e clicável, cobrindo o chip: `appearance: none`
   e opacidade zero tiram o desenho do sistema sem tirar o controle do teclado,
   do leitor de ecrã ou do Playwright — `display:none` levaria os três junto. */
.camaras {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: stretch;
  margin: .5rem 0 .85rem;
}
.camaras .camara-chip {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  /* 44px de alvo de toque, como todo controle do sistema. */
  min-height: 44px;
  padding: .35rem .7rem;
  border: 1px solid var(--viz-border);
  border-radius: 0;
  background: var(--viz-surface);
  color: var(--viz-muted);
  cursor: pointer;
  min-width: 0;
}
.camaras .camara-chip input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.camaras .camara-chip__nome {
  font-family: var(--viz-font-label);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-text);
  white-space: nowrap;
}
.camaras .camara-chip__escopo {
  font-size: .75rem;
  color: var(--viz-muted);
  white-space: nowrap;
}
.camaras .camara-chip:hover { border-color: var(--viz-muted-bright); }
.camaras .camara-chip:has(input:checked) {
  border-color: var(--viz-accent);
  background: var(--viz-surface-hover);
}
/* O nome do chip escolhido fica em `--viz-text`, não no acento: medido no
   pixel, o Berry Red puro dá 2,35:1 sobre a superfície do tema escuro e o
   `--viz-accent-text` dá 3,54:1 — ambos abaixo dos 4,5:1 que texto exige. Quem
   carrega o estado é a borda e o fundo, que são elemento gráfico (3:1). */
.camaras .camara-chip:has(input:checked) .camara-chip__nome { color: var(--viz-text); }
.camaras .camara-chip:has(input:focus-visible) { outline: 2px solid var(--viz-accent); outline-offset: 2px; }
/* "Todas" é o atalho do grupo, não uma câmara: fica primeiro e sem escopo. */
.camaras .camara-chip--todas .camara-chip__nome { letter-spacing: .1em; }
.camaras__contagem {
  align-self: center;
  margin-left: auto;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--viz-muted);
  white-space: nowrap;
}

/* RETOMAR — lista de últimas reuniões, no topo da aba. Linha inteira clicável:
   o alvo é a reunião, não um botão dentro dela. Forma zero, como todo controle
   do sistema. */
#reuniao-recentes { display: flex; flex-direction: column; gap: .35rem; }
.reuniao-recente {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 56px;
  padding: .55rem .75rem;
  border: 1px solid var(--viz-border);
  border-radius: 0;
  background: var(--viz-surface);
  color: var(--viz-text);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.reuniao-recente:hover,
.reuniao-recente:focus-visible { border-color: var(--viz-accent); background: var(--viz-surface-hover); }
.reuniao-recente:focus-visible { outline: 2px solid var(--viz-accent); outline-offset: -2px; }
.reuniao-recente__foto { width: 34px; height: 34px; flex: none; }
.reuniao-recente__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.reuniao-recente__artista {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.reuniao-recente__titulo {
  font-size: .95rem;
  color: var(--viz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reuniao-recente__meta { display: flex; align-items: center; gap: .6rem; flex: none; }
@media (max-width: 560px) {
  .reuniao-recente { flex-wrap: wrap; }
  .reuniao-recente__meta { width: 100%; justify-content: flex-start; padding-left: calc(34px + .75rem); }
}
/* O seletor de artista e a criação de reunião descem para o pé da aba: criar
   é a exceção, retomar é a regra. */



/* Vínculo com a reunião de origem: uma linha, logo abaixo do estado — lê-se a
   série ("continua a reunião de 12 SET"), não um evento solto. */
.reuniao-origem {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: var(--viz-muted);
}
.reuniao-origem .btn-link { font-size: inherit; }
/* Reunião encerrada: a ata é o que se procura, e os controles que alterariam a
   decisão ficam visivelmente fechados, não escondidos — esconder faria parecer
   que a função nunca existiu. */
.reuniao-encerrada .meeting-internal-controls button:disabled { opacity: .5; cursor: not-allowed; }

/* ================================================================
   PERFIL — Entrevista de Imersão Artística (aba-perfil-dashboard.md)
================================================================ */
.perfil-candidato__status { opacity: .7; font-size: .85em; }

.perfil-item {
  border: 1px solid var(--viz-border);
  border-radius: 0;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}
.perfil-item--subtraida { opacity: .6; }
.perfil-item--subtraida .perfil-item__pergunta { text-decoration: line-through; }
.perfil-item__pergunta { font-weight: 600; margin: 0 0 .35rem; }
.perfil-item__motivo,
.perfil-item__citacao { color: var(--viz-muted); font-size: .9em; margin: 0 0 .35rem; }
.perfil-item__aviso { color: var(--conf-block); font-weight: 600; margin: 0 0 .35rem; }

#perfil-enxerto-add {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
}
#perfil-enxerto-add label { display: block; font-size: .8em; color: var(--viz-muted); }
#perfil-enxerto-add input { min-width: 220px; }

#perfil-resposta-texto { width: 100%; font-family: monospace; font-size: .85em; }

.perfil-resposta {
  border: 1px solid var(--viz-border);
  padding: .5rem .85rem;
  margin-bottom: .6rem;
}
.perfil-resposta--orfa { border-left-color: var(--conf-block); }
.perfil-resposta__texto { margin: .25rem 0; white-space: pre-wrap; }
.perfil-resposta__meta { color: var(--viz-muted); font-size: .85em; margin: 0; }