@charset "UTF-8";
/* ABL Legal Intelligence · painel de TV · direção B, Instrumento (D4, D13, D16, D18) · rotação D22
 *
 * Regras visuais em DIRECAO_VISUAL.md. Cores só de estilo/tokens.css. Sem sombra, sem gradiente
 * decorativo, sem desfoque, sem cartão atrás de cada bloco: os blocos se separam por ar e por fio.
 *
 * Um conjunto só de regras de componente, medido por variáveis. Cada modo define as variáveis:
 *   tela única (data-modo="unica"): px do palco de 1920 x 1080, com piso de leitura de 28 px;
 *   mosaico (data-modo="mosaico"): cqw do quarto, com piso de 23 px, como no protótipo aprovado.
 * O palco inteiro (.tv) é ampliado ou reduzido para a tela do aparelho pelo painel.js. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--cor-fundo); color: var(--cor-tinta);
  font-family: var(--fonte-texto); font-weight: var(--peso-texto-portal); line-height: var(--altura-linha-texto-portal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
.num { font-family: var(--fonte-numero); font-weight: var(--peso-numero); font-variant-numeric: var(--numerais); letter-spacing: var(--entreletra-numero); }
kbd {
  font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: 0.78em; line-height: 1.4;
  border: var(--fio-fino) solid var(--cor-tinta-branda); border-radius: var(--raio-fino);
  padding: 0 0.42em; min-width: 1.6em; display: inline-block; text-align: center;
}
:focus { outline: none; }
:focus-visible { outline: var(--foco-largura) solid var(--foco-cor); outline-offset: var(--foco-afastamento); }
[hidden] { display: none !important; }
/* Logo da ABL Tech embutido (D18): fundo e vazados com --logo-superficie, igual ao fundo onde pousa. */
.login-form-area, .portal-perfil, .ajuda-caixa, .controles { --logo-superficie: var(--cor-superficie); }
.abl-lockup svg { width: 240px; height: auto; display: block; }
.abl-selo svg, .selo-abl svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Ícones de estado: traços do tokens.css como máscara, na cor do estado, medidos em em. */
.ic {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ic-ok { --m: var(--estado-ok-icone); color: var(--estado-ok-cor); }
.ic-zero { --m: var(--estado-zero-icone); color: var(--estado-zero-cor); }
.ic-parcial { --m: var(--estado-parcial-icone); color: var(--estado-parcial-cor); }
.ic-indisponivel { --m: var(--estado-indisponivel-icone); color: var(--estado-indisponivel-cor); }
.ic-erro { --m: var(--estado-erro-icone); color: var(--estado-erro-cor); }
.ic-desatualizado { --m: var(--estado-desatualizado-icone); color: var(--estado-desatualizado-cor); }
.ic-sobe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M9 6h9v9'/%3E%3C/svg%3E"); color: var(--cor-positivo); }
.ic-desce { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 9v9H9'/%3E%3C/svg%3E"); color: var(--cor-tinta); }
.ic-casa { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E"); color: var(--cor-texto-inverso) !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ======================================================================== palco e modos */
/* Crítica de design de 07/10/2026: moldura numa faixa só, números heróis maiores, legenda junto às
 * linhas, tabelas sem fichas soltas, cor acesa só no herói e na série atual. Cada modo define as
 * variáveis; as regras de componente são uma só. */
body.modo-tv { overflow: hidden; height: 100vh; }
.palco { position: fixed; inset: 0; overflow: hidden; background: var(--cor-fundo); }
.tv {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  display: grid; grid-template-rows: var(--faixa-h) minmax(0, 1fr) var(--rodape-h);
  background: var(--cor-fundo); color: var(--cor-tinta); overflow: hidden;
  --logo-superficie: var(--cor-fundo);
}
.tv > .tv-faixa { grid-row: 1; }
.tv > .tv-mosaico { grid-row: 2; }
.tv > .tv-legenda { grid-row: 3; }

/* Tela única: px do palco de 1920 x 1080. Piso de leitura 28 px (3 a 5 m numa TV de 55 polegadas). */
.tv[data-modo="unica"] {
  --faixa-h: 0px; --rodape-h: 92px; --lat: 64px;
  --f-heroi: 430px; --f-n1: 560px; --f-n2: 240px; --f-n3: 132px; --f-n4: 76px; --f-n5: 60px;
  --f-dest: 48px; --f-tit: 52px; --f-tx: 36px; --f-det: 30px; --f-rot: 28px; --f-mono: 28px; --f-pico: 150px;
  --g1: 8px; --g2: 16px; --g3: 24px; --g4: 36px; --g5: 56px; --g6: 72px;
  --fio: 2px; --fio2: 3px; --fio3: 6px; --raio: 2px; --barra-h: 30px;
  --pl-cols: 620px 560px minmax(0, 1fr); --pl-vao: 56px;
  --rk-cols: 40px minmax(0, 1fr) 110px 76px; --rk-pad: 22px;
  --ev-cols: minmax(0, 1fr) 680px; --ev-topo-cols: 500px 540px minmax(0, 1fr); --ev-vao: 56px;
  --qd-cols: minmax(0, 1fr) 560px; --qd-vao: 112px;
  --qt-cols: 680px minmax(0, 1fr); --qt-vao: 112px; --casa: 200px;
  --plot-esq: 52px; --plot-dir: 150px; --plot-topo: 24px; --plot-pe: 48px;
}
.tv[data-modo="unica"] .tv-faixa { display: none; }
/* Mosaico: cqw do quarto (cerca de 957 px). Piso 23 px. */
.tv[data-modo="mosaico"] { --faixa-h: 64px; --rodape-h: 84px; --lat: 2.4cqw; }
.tv[data-modo="mosaico"] .tela {
  --f-heroi: 16cqw; --f-n1: 21cqw; --f-n2: 9cqw; --f-n3: 5.4cqw; --f-n4: 4.2cqw; --f-n5: 3.4cqw;
  --f-dest: 3.4cqw; --f-tit: 3.4cqw; --f-tx: 2.8cqw; --f-det: 2.45cqw; --f-rot: 2.45cqw; --f-mono: 2.45cqw; --f-pico: 7cqw;
  --g1: 0.4cqw; --g2: 0.8cqw; --g3: 1.2cqw; --g4: 1.8cqw; --g5: 2.6cqw; --g6: 3.4cqw;
  --fio: 0.16cqw; --fio2: 0.3cqw; --fio3: 0.5cqw; --raio: 0.2cqw; --barra-h: 1.6cqw;
  --pl-cols: 36cqw 27cqw minmax(0, 1fr); --pl-vao: 2cqw;
  --rk-cols: 2.6cqw minmax(0, 1fr) 6cqw 4.6cqw; --rk-pad: 0.5cqw;
  --ev-cols: minmax(0, 1fr) 38cqw; --ev-topo-cols: 24cqw 30cqw minmax(0, 1fr); --ev-vao: 2cqw;
  --qd-cols: minmax(0, 1fr) 34cqw; --qd-vao: 3cqw;
  --qt-cols: 32cqw minmax(0, 1fr); --qt-vao: 4cqw; --casa: 8cqw;
  --plot-esq: 3cqw; --plot-dir: 8cqw; --plot-topo: 1.4cqw; --plot-pe: 2.8cqw;
}

/* ======================================================================== faixa do mosaico */
.tv-faixa {
  display: flex; align-items: center; gap: 20px; padding: 0 32px; min-width: 0;
  border-bottom: 1px solid var(--cor-borda);
}
.tv-marca { display: inline-flex; align-items: center; gap: 12px; height: 40px; flex: none; }
.tv-marca svg { height: 100%; width: auto; display: block; }
.tv-marca-nome { font: var(--peso-titulo) 26px/1 var(--fonte-texto); letter-spacing: var(--entreletra-titulo); color: var(--cor-dado); white-space: nowrap; }
.tv-sep { width: 2px; height: 32px; background: var(--cor-borda); flex: none; }
.tv-titulo { font: 600 30px/1 var(--fonte-texto); letter-spacing: var(--entreletra-titulo); white-space: nowrap; }
.tv-ctx { display: inline-flex; align-items: center; gap: 10px; font: var(--peso-rotulo) 23px/1 var(--fonte-rotulo); color: var(--cor-tinta-branda); white-space: nowrap; }
.tv-espaco { flex: 1; min-width: 8px; }
.tv-faixa .tela-vivo { font-size: 23px; }
.tv-faixa .selo-ficticio { font-size: 23px; }
/* Fase 7: com a fonte desatualizada, o aviso com a data da D32 ("desatualizado desde 21/10, 16:20 · agora 16:30") passava
 * 48 px da faixa do mosaico. A faixa fica mais justa e o traço entre a assinatura e o título sai; nenhum texto sai. */
.tv-faixa.tv-faixa-atraso { gap: 14px; padding: 0 24px; }
.tv-faixa.tv-faixa-atraso .tv-sep { display: none; }
/* D37: com o nome do produto ao lado do símbolo, a faixa com atraso passava até 62 px de 1920; nesse caso a assinatura fica
 * só no símbolo, e o nome segue no rodapé e no título da página. */
.tv-faixa.tv-faixa-atraso .tv-marca-nome { display: none; }
.ponto { color: var(--cor-tinta-branda); margin: 0 0.4em; }
.ctx-du, .ctx-mes { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.ctx-du .ic { width: 1em; height: 1em; }

/* "ao vivo · 00:25", como nas amostras: mono, ponto em petróleo. Desatualizada: relógio e tinta branda. */
.tela-vivo { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); letter-spacing: 0.02em; color: var(--cor-tinta); font-variant-numeric: tabular-nums; }
.vivo-fonte { display: inline-flex; align-items: center; gap: 0.4em; }
.vivo-ponto { display: inline-block; width: 0.62em; height: 0.62em; border-radius: var(--raio-pleno); border: 0.14em solid var(--cor-dado); position: relative; }
.vivo-ponto::after { content: ""; position: absolute; inset: 0.1em; border-radius: inherit; background: var(--cor-dado); }
.vivo-atraso { color: var(--estado-desatualizado-cor); }
.vivo-falha { color: var(--estado-indisponivel-cor); }
.vivo-fonte .ic { width: 1.05em; height: 1.05em; }
.tela-vivo .tv-relogio { font-family: var(--fonte-rotulo); font-weight: 600; letter-spacing: 0.02em; color: var(--cor-tinta) !important; line-height: 1; }

/* ======================================================================== rodapé da TV */
/* Duas linhas: a reconciliação e os motivos sem valor; embaixo, a legenda dos seis estados em mono no tom
 * brando e o endosso da ABL Tech. Sem texto de demonstração: o selo da faixa basta. */
.tv-legenda {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 40px; row-gap: 10px; align-content: center; padding: 0 var(--lat);
  border-top: 2px solid var(--cor-borda); min-width: 0;
}
.tv[data-modo="mosaico"] .tv-legenda { padding: 0 32px; border-top-width: 1px; }
.leg-rec { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.leg-estados { grid-column: 1; grid-row: 2; align-self: center; display: flex; align-items: center; gap: 30px; white-space: nowrap; min-width: 0; }
.leg-item { display: inline-flex; align-items: center; gap: 8px; font: var(--peso-rotulo) 23px/1 var(--fonte-rotulo); white-space: nowrap; color: var(--cor-tinta-branda); }
.leg-item .ic { width: 24px; height: 24px; }
.tv-assina { grid-column: 2; grid-row: 2; align-self: center; display: inline-flex; align-items: center; gap: 12px; }
/* Fase 7, subfase 7.2: "atualizado às HH:MM" no fim da linha da legenda, antes do endosso. A classe tv-legenda-hora vem
 * de telas.js, no lugar de :has() (Chrome 105, fora do alvo do ADR-0005; auditoria nº 1 da Fase 7, achado 2). */
.tv-legenda.tv-legenda-hora { grid-template-columns: minmax(0, 1fr) auto auto; }
.tv-legenda.tv-legenda-hora .leg-rec { grid-column: 1 / -1; }
.leg-atualizado { grid-column: 2; grid-row: 2; align-self: center; font: var(--peso-rotulo) 23px/1 var(--fonte-rotulo); color: var(--cor-tinta-branda); white-space: nowrap; }
.leg-atualizado .num { color: var(--cor-tinta); font-weight: 600; }
.tv-legenda.tv-legenda-hora .tv-assina { grid-column: 3; }
.tv-endosso { font: 500 23px/1 var(--fonte-texto); color: var(--cor-tinta-branda); white-space: nowrap; }
.selo-abl { display: block; width: 34px; height: 34px; flex: none; }
.rec { display: flex; align-items: center; gap: 28px; min-width: 0; font: 500 24px/1.15 var(--fonte-texto); color: var(--cor-tinta-branda); white-space: nowrap; }
.rec .num { color: var(--cor-tinta); font-size: 26px; }
.rec-l1 { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.rec-l1 .ic, .rec-l3 .ic { width: 24px; height: 24px; }
.rec-l2 { color: var(--estado-parcial-cor); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.rec-l3 { display: inline-flex; align-items: center; gap: 8px; color: var(--cor-tinta); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; }
.rec-l3 .ic { margin-left: 4px; }
.rec .aviso-mini { font-size: 23px; }
.tv[data-modo="mosaico"] .rec { font-size: 23px; gap: 20px; }
.tv[data-modo="mosaico"] .rec .num { font-size: 24px; }

/* ======================================================================== mosaico e tela única */
.tv-mosaico {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--tv-mosaico-vao); background: var(--cor-borda); min-height: 0; min-width: 0;
}
.tv[data-modo="unica"] .tv-mosaico { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; background: var(--cor-fundo); }
.tv[data-modo="unica"] .tela { display: none; }
.tv[data-modo="unica"][data-unica="placar"] #tela-placar,
.tv[data-modo="unica"][data-unica="evolucao"] #tela-evolucao,
.tv[data-modo="unica"][data-unica="quando"] #tela-quando,
.tv[data-modo="unica"][data-unica="quantos"] #tela-quantos { display: grid; }
.tela {
  container-type: inline-size; position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--cor-fundo); line-height: 1.2;
}
.tela > .tela-cab, .tela > .tela-corpo { margin-left: var(--lat); margin-right: var(--lat); }
.tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--tv-foco-largura) solid transparent; }
.tela.foco-tv::after, .tela:focus-visible::after { border-color: var(--foco-cor); }
.tela:focus-visible { outline: none; }
.tela.entrando > .tela-corpo, .tela.entrando > .tela-cab { animation: entrar var(--movimento-entrada) var(--movimento-curva-saida) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Faixa de cada tela. Tela única: uma faixa só, com o símbolo, o título, "ao vivo · hora" e o selo em cima;
 * o mês, o dia útil e a nota da tela embaixo, com a rotação à direita. Mosaico: símbolo, título e nota. */
.tela-cab { display: flex; align-items: center; gap: var(--g2); min-width: 0; border-bottom: var(--fio) solid var(--cor-borda); }
.tela-simb { display: block; flex: none; }
.tela-simb svg { width: 100%; height: 100%; display: block; }
.tela-titulo { min-width: 0; font-family: var(--fonte-texto); font-weight: var(--peso-titulo); font-size: var(--f-tit); letter-spacing: var(--entreletra-titulo); line-height: 1; white-space: nowrap; }
.tela-ctx { display: flex; align-items: center; min-width: 0; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-mono); color: var(--cor-tinta-branda); white-space: nowrap; letter-spacing: 0.01em; }
.tela-nota { white-space: nowrap; }
.tela-nota-mosaico { display: none; }
.selo-ficticio {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap; line-height: 1;
  font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo);
  font-size: var(--f-rot); color: var(--cor-tinta); border: var(--fio) solid var(--cor-tinta); border-radius: var(--raio); padding: 0.35em 0.55em;
}
.tela-giro { display: none; }
.tv[data-modo="unica"] .tela-cab {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-rows: auto auto;
  column-gap: 24px; row-gap: 12px; padding: 22px 0 20px; margin-bottom: 28px;
}
.tv[data-modo="unica"] .tela-simb { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; align-self: center; }
.tv[data-modo="unica"] .tela-titulo { grid-column: 2; grid-row: 1; }
.tv[data-modo="unica"] .tela-ctx { grid-column: 2; grid-row: 2; }
.tv[data-modo="unica"] .tela-vivo { grid-column: 3; grid-row: 1; justify-self: end; font-size: 28px; }
.tv[data-modo="unica"] .tela-cab .selo-ficticio { grid-column: 4; grid-row: 1; justify-self: end; font-size: 26px; }
.tv[data-modo="unica"] .tela-giro { grid-column: 3 / 5; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; gap: 18px; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: 28px; color: var(--cor-tinta-branda); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Desatualizada (D32): o aviso "desatualizado desde DD/MM, HH:MM · agora HH:MM" ocupa as duas colunas da direita da primeira
 * linha, e o selo de dados fictícios desce para a segunda, antes da rotação; sem isso, o título corria por baixo do aviso
 * (pré-auditoria da Fase 7, achado 1 da lente técnica). */
.tv[data-modo="unica"] .tela-cab-atraso .tela-vivo { grid-column: 3 / 5; }
.tv[data-modo="unica"] .tela-cab-atraso .selo-ficticio { grid-column: 3; grid-row: 2; }
.tv[data-modo="unica"] .tela-cab-atraso .tela-giro { grid-column: 4; grid-row: 2; }
.giro-escala { display: inline-flex; gap: 6px; }
.giro-traco { display: block; width: 44px; height: 6px; background: var(--cor-borda); overflow: hidden; }
.giro-traco b { display: block; height: 100%; width: 0; background: var(--cor-dado); transition: width 1s linear; }
.giro-visto { background: var(--cor-comparacao); }
.giro-pausada .giro-atual b { background: var(--cor-tinta-branda); }
.giro-pausada .giro-txt { color: var(--cor-tinta); }
.tv[data-modo="mosaico"] .tela-cab { padding: 0.9cqw 0 0.8cqw; margin-bottom: 1.2cqw; gap: 1cqw; }
.tv[data-modo="mosaico"] .tela-simb { width: 3.4cqw; height: 3.4cqw; }
.tv[data-modo="mosaico"] .tela-cab .tela-ctx, .tv[data-modo="mosaico"] .tela-cab .tela-vivo, .tv[data-modo="mosaico"] .tela-cab .selo-ficticio { display: none; }
.tv[data-modo="mosaico"] .tela-nota-mosaico { display: block; margin-left: auto; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-rot); color: var(--cor-tinta-branda); white-space: nowrap; }

.tela-corpo { min-height: 0; min-width: 0; overflow: hidden; padding-bottom: var(--g3); font-size: var(--f-det); }

/* ======================================================================== textos e números */
.tela .rot {
  font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-rot);
  letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; line-height: var(--altura-linha-rotulo);
  color: var(--cor-tinta-branda); white-space: nowrap;
}
.tela .det { font-size: var(--f-det); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); line-height: 1.2; }
.tela .tx { font-size: var(--f-tx); font-weight: var(--peso-texto-tv); line-height: 1.15; color: var(--cor-tinta); }
/* Cor acesa só no herói e na série atual: os outros números ficam em tinta. */
.tela :where(.num) { line-height: 1; }
.tela .num { color: var(--cor-tinta); }
.tela .det b, .tela .det .num { color: var(--cor-tinta); }

/* ======================================================================== estados (regra do sócio) */
.bloco { min-width: 0; position: relative; }
.bloco-cab { display: flex; align-items: center; gap: var(--g2); margin-bottom: var(--g2); min-width: 0; }
.rot-dir { margin-left: auto; }
.bloco[data-estado="parcial"] { outline: var(--fio) dashed var(--estado-parcial-borda-cor); outline-offset: var(--g1); }
.tv-mosaico[data-estado-geral] .bloco[data-estado="parcial"] { outline: none; }
/* Desatualizado: números em tinta branda, sem moldura; o aviso fica na faixa e o ícone no rótulo. */
[data-estado="desatualizado"] .num, .num[data-estado="desatualizado"], [data-estado="desatualizado"].num, [data-estado="desatualizado"] b { color: var(--estado-desatualizado-numero) !important; }
[data-estado="desatualizado"] .rk-barra i, [data-estado="desatualizado"] .regua-valor, [data-estado="desatualizado"] .b-atu, [data-estado="desatualizado"] .qd-barra i { background: var(--estado-desatualizado-cor) !important; }
.selo {
  display: inline-flex; align-items: center; gap: 0.3em; flex: none; white-space: nowrap; vertical-align: middle;
  font-family: var(--fonte-numero); font-weight: var(--peso-numero); font-size: var(--f-rot); line-height: 1;
  font-variant-numeric: var(--numerais); margin-left: var(--g1);
}
.selo .ic { width: 1.05em; height: 1.05em; }
.selo-parcial { color: var(--estado-parcial-cor); border: var(--fio) dashed currentColor; border-radius: var(--raio); padding: 0.1em 0.3em; }
.selo-desatualizado { color: var(--estado-desatualizado-cor); }
.selo-zero { color: var(--estado-zero-cor); }
.selo-icone { display: inline-flex; align-items: center; margin: 0 0.25em 0 0; vertical-align: middle; font-size: var(--f-rot); }
.aviso-mini {
  display: inline-flex; align-items: center; gap: 0.35em; min-width: 0; white-space: nowrap;
  font-size: var(--f-det); font-weight: var(--peso-texto-tv); line-height: 1.15; color: var(--cor-tinta);
}
.aviso-mini .ic { color: var(--estado-indisponivel-cor); }
.aviso-mini-erro { color: var(--estado-erro-cor); }
.aviso-mini-erro .ic { color: var(--estado-erro-cor); }
/* Sem dado numa linha de tabela: ícone e "sem dado" no lugar do número, alinhados à direita. */
.sem-dado { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35em; white-space: nowrap; font-family: var(--fonte-texto); font-size: var(--f-det); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); line-height: 1.1; }
.sem-dado .ic { width: 1.05em; height: 1.05em; color: var(--estado-indisponivel-cor); }
.sem-dado-erro, .sem-dado-erro .ic { color: var(--estado-erro-cor); }
/* Aviso no lugar do valor: indisponível (rebaixo, fio tracejado) ou erro (fundo de erro, fio cheio de 2 px).
 * Até três linhas: o título, o motivo ou o lugar de corrigir e os outros valores que ficam sem dado. */
.aviso { display: flex; flex-direction: column; gap: var(--g1); min-width: 0; position: relative; padding: var(--g3) var(--g4); border-radius: var(--raio); color: var(--estado-indisponivel-cor); }
.aviso-indisponivel { background: var(--estado-indisponivel-fundo); border: var(--fio) dashed var(--estado-indisponivel-borda-cor); }
.aviso-erro { background: var(--estado-erro-fundo); color: var(--estado-erro-cor-detalhe); border: var(--fio) solid var(--estado-erro-borda-cor); }
.aviso-titulo { display: flex; align-items: center; gap: 0.4em; font-weight: var(--peso-destaque); font-size: var(--f-tx); line-height: 1.1; }
.aviso-titulo .ic { width: 1.05em; height: 1.05em; }
.aviso-erro .aviso-titulo { color: var(--estado-erro-cor); }
.aviso-det, .aviso-tambem { font-size: var(--f-det); font-weight: var(--peso-texto-tv); line-height: 1.2; color: var(--estado-indisponivel-cor-detalhe); }
.aviso-erro .aviso-det, .aviso-erro .aviso-tambem { color: var(--estado-erro-cor-detalhe); }
.aviso-tambem span[data-estado] { font-weight: var(--peso-destaque); }
.tela .aviso .rot { color: var(--estado-indisponivel-cor-detalhe); }
.tela .aviso-erro .rot { color: var(--estado-erro-cor-detalhe); }
.aviso-rot { margin-bottom: var(--g1); }
.aviso-compacto { padding: var(--g2) var(--g3); }
.aviso-compacto .aviso-titulo { font-size: var(--f-det); }
.aviso-geral { height: 100%; justify-content: center; align-items: flex-start; gap: var(--g4); padding: var(--g5); }
.aviso-geral .aviso-titulo { font-size: var(--f-dest); }
.aviso-geral .aviso-det { font-size: var(--f-tx); max-width: 32em; }

/* ======================================================================== tela 1 · Placar */
.placar { display: grid; grid-template-columns: var(--pl-cols); column-gap: var(--pl-vao); height: 100%; min-height: 0; }
.pl-a, .pl-b, .pl-c { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.pl-a { gap: var(--g3); }
.pl-b, .pl-c { gap: var(--g4); }
.heroi-cab { display: flex; align-items: center; }
.heroi-linha { display: flex; align-items: flex-start; gap: var(--g4); min-width: 0; margin-top: var(--g2); }
.heroi-num { flex: none; font-size: var(--f-heroi); line-height: 0.74; color: var(--cor-dado) !important; }
.heroi-num[data-digitos="3"], .heroi-num[data-digitos="5"] { font-size: calc(var(--f-heroi) * 0.66); }
.heroi-lado { display: flex; flex-direction: column; gap: var(--g3); min-width: 0; padding-top: calc(var(--f-heroi) * 0.02); }
.heroi-lado .valor { display: flex; align-items: baseline; gap: 0.25em; white-space: nowrap; }
.heroi-meta .de { font-size: var(--f-tx); color: var(--cor-tinta-branda); font-weight: var(--peso-texto-tv); }
.heroi-meta-n { font-size: var(--f-n3); line-height: 0.8; }
.heroi-pct b { font-size: var(--f-n5); line-height: 1; }
.heroi-pct .tx { color: var(--cor-tinta-branda); }
.heroi-ritmo { display: flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.heroi-ritmo .ic { width: 1.15em; height: 1.15em; font-size: var(--f-tx); }
.heroi-ritmo .tx b, .heroi-ritmo .tx b .num { color: var(--cor-dado); font-weight: var(--peso-destaque); font-family: var(--fonte-texto); letter-spacing: 0; }
.heroi-ritmo .tx .num { font-size: 1em; }
.heroi-aviso { margin-top: var(--g2); }
/* Régua do mês: trilho grosso, valor em petróleo, ponteiro âmbar do ritmo e escala escrita embaixo. */
.regua { position: relative; margin-top: var(--g2); }
.regua-trilho { position: relative; height: var(--barra-h); background: var(--cor-rebaixo); border-radius: var(--raio); }
.regua-valor { position: absolute; inset: 0 auto 0 0; background: var(--cor-dado); border-radius: var(--raio); }
.regua-ritmo { position: absolute; top: calc(var(--barra-h) * -0.35); bottom: calc(var(--barra-h) * -0.35); width: var(--fio3); background: var(--cor-acento); transform: translateX(-50%); outline: var(--fio) solid var(--cor-fundo); }
/* Ritmo no fim do mês (100%): o ponteiro fica inteiro dentro do trilho; com o meio dele na borda, a coluna do Placar passava
 * 3 px (pré-auditoria da Fase 7, achado 2 da lente técnica, 30/10 e 31/10). O limite é posto em px por painel.js
 * (limitarRitmo), no lugar de clamp() (Chrome 79, fora do alvo do ADR-0005; auditoria nº 1 da Fase 7, achado 2). */
.regua-ritmo { left: var(--ritmo, 50%); }
.regua-escala { height: calc(var(--barra-h) * 0.4); margin-top: var(--g1); background: repeating-linear-gradient(90deg, var(--cor-borda) 0 var(--fio), transparent var(--fio) 10%); border-right: var(--fio) solid var(--cor-borda); }
.regua-leg { position: relative; display: flex; justify-content: space-between; margin-top: var(--g1); font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-mono); color: var(--cor-tinta-branda); white-space: nowrap; line-height: 1.1; font-variant-numeric: tabular-nums; }
.regua-leg-r { position: absolute; top: 0; color: var(--cor-tinta); }
.regua-meio { transform: translateX(-50%); }
.regua-inicio { transform: translateX(calc(var(--g1) * -1)); }
.regua-fim { transform: translateX(calc(-100% + var(--g1))); }
.pl-semana { display: flex; align-items: baseline; gap: 0.35em; flex-wrap: wrap; font-size: var(--f-tx); margin-top: var(--g2); }
.pl-semana .rot { margin-right: var(--g2); }
.pl-semana b.num { font-size: var(--f-n5); }
.pl-semana .valor { display: inline-flex; align-items: baseline; }
.pl-pe { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; font-size: var(--f-tx); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); }
.pl-pe b { color: var(--cor-tinta); font-weight: var(--peso-destaque); }
.pl-pe b.num { font-size: 1.15em; }
.pl-pe .valor { display: inline-flex; align-items: baseline; gap: 0.25em; }
/* Ranking: linhas separadas por fio, sem cartão; ponto âmbar no líder. */
.ranking { display: flex; flex-direction: column; flex: none; }
.rk-lista { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: var(--fio) solid var(--cor-borda); }
.rk-linha { display: grid; grid-template-columns: var(--rk-cols); column-gap: var(--g3); align-items: center; padding: var(--rk-pad) 0; border-bottom: var(--fio) solid var(--cor-borda); }
.rk-pos { font-size: var(--f-n5); color: var(--cor-tinta-branda) !important; }
.rk-nome { display: flex; align-items: center; gap: 0.35em; min-width: 0; font-size: var(--f-dest); font-weight: var(--peso-destaque); white-space: nowrap; overflow: hidden; }
.rk-nome > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rk-marca { flex: none; width: 0.32em; height: 0.32em; border-radius: var(--raio-pleno); background: var(--cor-acento); }
.rk-barra { height: calc(var(--barra-h) * 0.5); background: var(--cor-rebaixo); border-radius: var(--raio); overflow: hidden; }
.rk-barra i { display: block; height: 100%; background: var(--cor-dado); }
.rk-n { font-size: var(--f-n4); text-align: right; line-height: 0.9; }
.vazio { padding: var(--g2) 0; }
/* Linhas de leitura (funil): rótulo, valor alinhado à direita e taxa. */
.lt-grupo { display: flex; flex-direction: column; flex: none; }
.lt { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(2.6em, max-content); align-items: center; column-gap: var(--g2); padding: var(--g2) 0; border-bottom: var(--fio) solid var(--cor-borda); font-size: var(--f-tx); }
.lt-grupo > .lt:first-child, .lt-grupo > .bloco-cab + .lt { border-top: var(--fio) solid var(--cor-borda); }
.lt-rot { font-weight: var(--peso-texto-tv); color: var(--cor-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-val { justify-self: end; display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.lt-val b.num { font-size: var(--f-n5); line-height: 0.9; }
.lt-extra { justify-self: end; white-space: nowrap; }
/* Últimos contratos: dia, closer e benefício. Nada que identifique o cliente. */
.ultimos { min-height: 0; flex: none; }
.ult-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--g2); }
.ult-lista li { display: flex; flex-direction: column; font-size: var(--f-det); line-height: 1.15; }
.ult-l1 { font-weight: var(--peso-destaque); white-space: nowrap; color: var(--cor-tinta); }
.ult-l1 .ponto { margin: 0 0.3em; }
.ult-h { color: var(--cor-tinta-branda); }
/* O benefício quebra a linha em vez de sair com reticências (pré-auditoria da Fase 7: "Restabelecimento Auxílio Acidente"
 * cortado no mosaico); a lista tira do fim o contrato que não couber (ajustarListas, em painel.js). */
.ult-l2 { color: var(--cor-tinta-branda); white-space: normal; overflow-wrap: anywhere; }
/* Ritmo do mês: grade apagada, valores em mono, legenda escrita na ponta de cada linha. */
.curva { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.curva-area { position: relative; flex: 1 1 0; min-height: 6cqw; }
.curva-plot { position: absolute; left: var(--plot-esq); right: var(--plot-dir); top: var(--plot-topo); bottom: var(--plot-pe); }
.curva-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curva-svg polyline, .curva-svg line { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.curva-svg .eixo { stroke: var(--cor-borda); stroke-width: 2; }
.curva-svg .grade { stroke: var(--cor-borda); stroke-width: 1.5; stroke-dasharray: 2 6; }
.curva-svg .serie-atual { stroke: var(--cor-dado); stroke-width: 6; }
.curva-svg .serie-anterior { stroke: var(--cor-comparacao); stroke-width: 3.5; }
.curva-svg .serie-meta { stroke: var(--cor-acento); stroke-width: 3; stroke-dasharray: 9 7; }
.tv[data-modo="mosaico"] .curva-svg .serie-atual { stroke-width: 4; }
.tv[data-modo="mosaico"] .curva-svg .serie-anterior, .tv[data-modo="mosaico"] .curva-svg .serie-meta { stroke-width: 2.5; }
.curva-ponto { position: absolute; width: calc(var(--barra-h) * 0.7); height: calc(var(--barra-h) * 0.7); border-radius: var(--raio-pleno); background: var(--cor-dado); transform: translate(-50%, -50%); outline: var(--fio2) solid var(--cor-fundo); }
.g-y, .g-x { position: absolute; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-mono); color: var(--cor-tinta-branda); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-y { right: calc(100% + var(--g2)); transform: translateY(-50%); }
.g-x { top: calc(100% + var(--g2)); transform: translateX(-50%); }
.g-x[style*="left:0%"] { transform: none; }
.g-x[style*="left:100%"] { transform: translateX(-100%); }
.g-hoje { color: var(--cor-tinta); }
.g-fim, .g-atual { position: absolute; display: inline-flex; align-items: baseline; gap: 0.25em; white-space: nowrap; font-size: var(--f-det); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); line-height: 1; }
.g-fim { left: calc(100% + var(--g2)); transform: translateY(-50%); }
.g-fim b, .g-atual b { font-size: calc(var(--f-n5) * 0.8); }
.g-atual b.num { color: var(--cor-dado); }
.g-atual { transform: translate(-50%, -200%); }
.g-atual.g-esq { transform: translate(calc(-100% - var(--g2)), -130%); }
.curva-avisos { display: flex; flex-direction: column; gap: var(--g1); }
/* Funil do mês. */
.funil { flex: none; }
.funil .bloco-cab { margin-bottom: var(--g1); }

/* ======================================================================== tela 2 · Evolução diária */
.evolucao { display: grid; grid-template-columns: var(--ev-cols); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--ev-vao); row-gap: var(--g4); height: 100%; min-height: 0; }
.ev-topo { grid-column: 1 / -1; display: grid; grid-template-columns: var(--ev-topo-cols); column-gap: var(--ev-vao); align-items: stretch; min-width: 0; padding-bottom: var(--g3); border-bottom: var(--fio) solid var(--cor-borda); }
.ev-topo > .bloco, .ev-topo > .aviso, .ev-col > .bloco { display: flex; flex-direction: column; min-width: 0; }
.ev-topo .bloco-cab { margin-bottom: var(--g1); flex-wrap: wrap; }
.chave { display: inline-block; width: 1em; height: 0.24em; margin-right: 0.5em; vertical-align: 0.28em; background: var(--cor-dado); }
.chave-ant { background: var(--cor-comparacao); }
.ev-n1 { font-size: var(--f-n2); line-height: 0.78; color: var(--cor-dado) !important; }
.ev-n2 { font-size: var(--f-n3); line-height: 0.8; }
.ev-sub { display: flex; align-items: baseline; gap: 0.3em; margin-top: var(--g2); font-size: var(--f-tx); white-space: nowrap; }
.ev-sub .valor { display: inline-flex; align-items: baseline; gap: 0.3em; }
.ev-sub b.num { font-size: 1.15em; }
.ev-sub .ic { width: 1em; height: 1em; align-self: center; }
.ev-col { display: flex; flex-direction: column; gap: var(--g3); min-width: 0; }
.ev-n3l { display: flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.ev-n3l .ic { width: 0.9em; height: 0.9em; font-size: var(--f-tx); }
.ev-n3 { font-size: var(--f-n4); line-height: 0.85; }
.ev-n3l .tx { color: var(--cor-tinta-branda); margin-left: 0.15em; }
.ev-menor .ev-sub { margin-top: var(--g1); }
/* Contratos por dia útil: barras do mês atual e do anterior, meta do dia em degraus, hoje com ponteiro âmbar. */
.por-dia { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.por-dia > .bloco-cab { flex-wrap: nowrap; }
.pd-leg { margin-left: auto; display: inline-flex; align-items: center; gap: var(--g3); white-space: nowrap; }
.leg { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.amostra { display: inline-block; flex: none; width: 1.1em; height: 0.22em; border-radius: var(--raio); }
.amostra-meta { background: repeating-linear-gradient(90deg, var(--cor-acento) 0 0.3em, transparent 0.3em 0.5em); height: 0.2em; }
.amostra-atual-barra { background: var(--cor-dado); width: 0.7em; height: 0.7em; }
.amostra-anterior-barra { background: var(--cor-comparacao); width: 0.7em; height: 0.7em; }
.pd-area { position: relative; flex: 1 1 0; min-height: 0; }
.pd-plot { position: absolute; left: var(--plot-esq); right: 0; top: var(--plot-topo); bottom: var(--plot-pe); }
.pd-g { position: absolute; left: 0; right: 0; height: 0; border-top: var(--fio) dotted var(--cor-borda); }
.pd-g:first-child { border-top-style: solid; }
.pd-g > span { position: absolute; right: calc(100% + var(--g2)); top: 0; transform: translateY(-50%); font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-mono); color: var(--cor-tinta-branda); line-height: 1; }
.dias { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--g2); }
.dia { position: relative; min-height: 0; }
.dia-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.dia-barras i { display: block; flex: 1; position: relative; min-height: 0; font-style: normal; }
.b-ant { background: var(--cor-comparacao); opacity: 0.75; }
.b-atu { background: var(--cor-dado); }
.b-vazia { height: 0; background: none; }
.b-val { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(var(--g1) * -1)); font-size: var(--f-det); color: var(--cor-dado) !important; line-height: 1; }
.dia-x { position: absolute; left: 50%; top: calc(100% + var(--g2)); transform: translateX(-50%); font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--f-mono); color: var(--cor-tinta-branda); line-height: 1; white-space: nowrap; }
.dia-futuro .dia-x { opacity: 0.75; }
.dia-hoje .dia-x { color: var(--cor-tinta); }
.dia-hoje .dia-x::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); border: calc(var(--g1) * 1.1) solid transparent; border-bottom-color: var(--cor-acento); border-top-width: 0; }
.pd-meta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pd-meta path { fill: none; stroke: var(--cor-acento); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tv[data-modo="mosaico"] .pd-meta path { stroke-width: 2.5; }
.fds { margin-top: var(--g1); }
/* Tabelas de closers e de benefícios, uma sobre a outra. */
.ev-tabelas { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: var(--g4); min-height: 0; overflow: hidden; }
.tabela table { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--g1) 0 var(--g1) var(--g2); text-align: right; font-size: var(--f-det); line-height: 1.15; white-space: nowrap; border-bottom: var(--fio) solid var(--cor-borda); }
.tabela th { font-weight: 400; vertical-align: bottom; }
.tabela .t-nome { text-align: left; padding-left: 0; width: 100%; font-weight: var(--peso-texto-tv); }
.tabela th.t-nome .selo { margin-left: 0.3em; }
.tabela .t-cab { font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); font-size: var(--f-rot); color: var(--cor-tinta-branda); }
.tabela .t-titulo { color: var(--cor-tinta); }
.tabela td.num { font-family: var(--fonte-numero); font-weight: var(--peso-numero); font-size: calc(var(--f-det) * 1.1); }
.tabela td.t-atual { color: var(--cor-dado); }
.tabela .t-ev { color: var(--cor-tinta-branda); }

/* ======================================================================== tela 3 · Quando os contratos fecham */
.quando { display: grid; grid-template-columns: var(--qd-cols); column-gap: var(--qd-vao); height: 100%; min-height: 0; }
.qd-dias { display: flex; flex-direction: column; min-height: 0; }
.qd-lista { list-style: none; padding: 0; display: flex; flex-direction: column; flex: 1 1 0; border-top: var(--fio) solid var(--cor-borda); }
.qd-lista li { flex: 1 1 0; display: grid; grid-template-columns: 3em minmax(0, 1fr) 2.2em; align-items: center; column-gap: var(--g4); font-size: var(--f-dest); border-bottom: var(--fio) solid var(--cor-borda); min-height: 0; }
.qd-dia { font-weight: var(--peso-texto-tv); color: var(--cor-tinta); line-height: 1; }
.qd-barra { height: 0.9em; background: var(--cor-rebaixo); border-radius: var(--raio); overflow: hidden; }
.qd-barra i { display: block; height: 100%; background: var(--cor-comparacao); }
.qd-topo .qd-barra i { background: var(--cor-dado); }
.qd-topo .qd-dia { font-weight: var(--peso-destaque); }
.qd-topo .qd-dia::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.25em; vertical-align: 0.3em; border-radius: var(--raio-pleno); background: var(--cor-acento); }
.qd-n { font-size: 1.3em; text-align: right; line-height: 1; }
.qd-topo .qd-n { color: var(--cor-dado) !important; }
.qd-lado { display: flex; flex-direction: column; gap: var(--g5); min-width: 0; min-height: 0; }
.qd-destaque { display: flex; flex-direction: column; gap: var(--g2); }
.qd-pico { font-family: var(--fonte-texto); font-weight: var(--peso-titulo); font-size: var(--f-pico); letter-spacing: var(--entreletra-titulo); line-height: 0.95; color: var(--cor-tinta); }
.qd-pico-n { display: flex; align-items: baseline; gap: 0.3em; }
.qd-pico-n b.num { font-size: var(--f-n4); color: var(--cor-dado) !important; }
.qd-total { display: flex; align-items: baseline; gap: 0.3em; flex-wrap: wrap; padding-top: var(--g3); border-top: var(--fio) solid var(--cor-borda); }
.qd-total b.num { font-size: var(--f-n5); }
.qd-total .tx { color: var(--cor-tinta-branda); font-size: var(--f-det); }
.qd-mapa-aviso { max-width: 520px; margin-top: auto; }
.qd-mapa { display: flex; flex-direction: column; min-height: 0; }
.qd-pico-txt { margin-left: auto; white-space: nowrap; }
.qd-grade { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 2.2em repeat(11, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--linhas), minmax(0, 1fr)); gap: var(--g1); }
.qd-grade .qd-h { text-align: center; font-size: var(--f-rot); letter-spacing: 0; align-self: end; }
.qd-grade .qd-dia.rot { align-self: center; font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0; color: var(--cor-tinta); font-size: var(--f-det); }
.qd-cel { display: grid; place-items: center; border-radius: var(--raio); min-height: 0; }
.qd-cel b { font-size: var(--f-det); line-height: 1; }
.calor-1 { background: var(--cor-calor-1); } .qd-cel.calor-1 b.num { color: var(--cor-calor-texto-1) !important; }
.calor-2 { background: var(--cor-calor-2); } .qd-cel.calor-2 b.num { color: var(--cor-calor-texto-2) !important; }
.calor-3 { background: var(--cor-calor-3); } .qd-cel.calor-3 b.num { color: var(--cor-calor-texto-3) !important; }
.calor-4 { background: var(--cor-calor-4); } .qd-cel.calor-4 b.num { color: var(--cor-calor-texto-4) !important; }
.calor-5 { background: var(--cor-calor-5); } .qd-cel.calor-5 b.num { color: var(--cor-calor-texto-5) !important; }
.qd-pico-cel { outline: var(--fio3) solid var(--cor-acento); outline-offset: calc(var(--fio) * -1); position: relative; z-index: 1; }
.qd-escala { display: flex; align-items: center; justify-content: flex-end; gap: var(--g1); margin-top: var(--g2); }
.qd-escala i { width: 1em; height: 0.6em; border-radius: var(--raio); }
.quando-com-mapa .qd-lado .qd-lista li { font-size: var(--f-tx); }
/* Pendência técnica 3 da entrega de 06/11/2026 (teste: tests/e2e/painel_antigo_d38.test.mjs): com o mapa aceso, a lista dos
 * dias ficava sem altura na coluna do lado, as linhas encolhiam a 1 px e as barras e os números de um dia caíam sobre os do
 * outro. A lista ocupa o resto da coluna, e cada linha tem pelo menos a altura do número. No mosaico, o número da linha vai no
 * tamanho do texto e a linha "N contratos" do pico sai (o número do dia de mais fechamentos está na própria lista), para os
 * sete dias caberem no quarto. */
.qd-lista li { min-height: 1.35em; }
.quando-com-mapa .qd-lado > .qd-dias { flex: 1 1 auto; }
.tv[data-modo="mosaico"] .quando-com-mapa .qd-lista li { font-size: var(--f-det); min-height: 1.1em; }
.tv[data-modo="mosaico"] .quando-com-mapa .qd-n { font-size: 1em; }
.tv[data-modo="mosaico"] .quando-com-mapa .qd-pico-n { display: none; }

/* ======================================================================== tela 4 · Quantos contratos fechar */
.quantos { display: grid; grid-template-columns: var(--qt-cols); column-gap: var(--qt-vao); height: 100%; min-height: 0; }
.qt-esq, .qt-dir { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.qt-dir { gap: var(--g4); }
.qt-falta { display: flex; flex-direction: column; }
.qt-num { font-size: var(--f-n1); line-height: 0.76; margin-top: var(--g3); color: var(--cor-dado) !important; }
.qt-num[data-digitos="3"], .qt-num[data-digitos="5"] { font-size: calc(var(--f-n1) * 0.62); }
.qt-frase { margin-top: var(--g4); font-size: var(--f-dest) !important; font-weight: var(--peso-destaque) !important; line-height: 1.1; }
.aviso.qt-falta { height: 100%; justify-content: center; }
.qt-leitura .bloco-cab { margin-bottom: var(--g3); }
.qt-par { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--g2); }
.qt-fech { font-size: var(--f-n2); line-height: 0.78; color: var(--cor-dado) !important; }
.qt-de { color: var(--cor-tinta-branda); }
.qt-meta { display: inline-flex; align-items: baseline; }
.qt-meta b.num { font-size: var(--f-n3); line-height: 0.8; }
.casas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, var(--casa))); gap: var(--g3); }
.casa { aspect-ratio: 1.15; display: grid; place-items: center; border-radius: var(--raio); border: var(--fio2) dashed var(--cor-tinta-branda); }
.casa-cheia { background: var(--cor-dado); border: var(--fio2) solid var(--cor-dado); }
.casa-extra { border-style: solid; }
.casa .ic-casa { width: 40%; height: 40%; }
.qt-hoje .ult-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g2) var(--g4); }
.qt-mes { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; font-size: var(--f-tx); color: var(--cor-tinta-branda); padding-top: var(--g3); border-top: var(--fio) solid var(--cor-borda); }
.qt-mes b { color: var(--cor-tinta); font-weight: var(--peso-destaque); }
.qt-mes b.num { font-size: 1.15em; }
.qt-mes .valor { display: inline-flex; align-items: baseline; gap: 0.25em; }

/* ======================================================================== celebração de contrato fechado */
.celebracao {
  position: absolute; inset: calc(var(--g6) + var(--f-tit)) var(--lat) var(--g4); z-index: 5;
  display: flex; flex-direction: column; justify-content: center; gap: var(--g3);
  padding: var(--g5) var(--g6); background: var(--cor-superficie); border: var(--fio2) solid var(--cor-dado); border-radius: var(--raio);
}
.celebracao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--g2); background: var(--cor-acento); }
.cel-nome { font-family: var(--fonte-numero); font-weight: var(--peso-numero); font-size: var(--f-n2); line-height: 0.9; color: var(--cor-dado); }
.cel-ben { font-size: var(--f-dest) !important; font-weight: var(--peso-destaque) !important; }
.cel-det { font-size: var(--f-tx) !important; }
.cel-casas { position: absolute; right: var(--g6); bottom: var(--g5); margin: 0; width: 46%; --n: 6; --casa: 12cqw; }
.tela:has(> .celebracao:not([hidden])) .tela-corpo { visibility: hidden; }

/* ======================================================================== ícones extras e tema escuro */
.ic-igual { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 7l5 5-5 5'/%3E%3C/svg%3E"); color: var(--cor-positivo); }
/* Tema escuro: o petróleo aceso fica só no herói e na série atual; barras do ranking e dos dias da semana
 * no tom de comparação, e os trilhos no tom de superfície, para aparecer sobre o fundo. */
[data-tema="escuro"] .rk-barra i { background: var(--cor-comparacao); }
[data-tema="escuro"] .regua-trilho, [data-tema="escuro"] .rk-barra, [data-tema="escuro"] .qd-barra { background: var(--cor-superficie); }
[data-tema="escuro"] .tabela td.t-atual { color: var(--cor-tinta); }

/* ======================================================================== controles, ajuda e avisos */
.controles {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20;
  display: flex; gap: 8px; padding: 10px; background: var(--cor-superficie); border: var(--fio-fino) solid var(--cor-borda);
  border-radius: var(--raio-medio); box-shadow: var(--sombra-flutuante);
}
.botao {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; cursor: pointer;
  background: var(--cor-superficie); color: var(--cor-tinta); border: var(--fio-fino) solid var(--cor-tinta-branda);
  border-radius: var(--raio-medio); font-weight: var(--peso-titulo); font-size: var(--tamanho-portal-apoio); line-height: 1.2; text-align: left;
}
.botao:hover { background: var(--cor-rebaixo); }
/* Fase 7, subfase 7.2: na TV, os botões da barra são a alternativa ao controle remoto, selecionáveis pelo cursor do
 * controle (alguns navegadores de TV usam as setas para mover o cursor). Ficam no piso de leitura da tela única (28 px no
 * palco de 1920) e com alvo de 72 px de altura; a barra fica fora do palco, que é o que tem escala, e por isso as medidas
 * acompanham a largura da janela: em 4K, o dobro. Com pouca largura, a barra quebra em duas linhas, sem sair da tela.
 * Até 1920 px de janela, as medidas fixas; acima, a fração da largura (o mesmo que max(), Chrome 79, fora do alvo do
 * ADR-0005; auditoria nº 1 da Fase 7, achado 2): 12 px é 0,625% de 1920, 24 px é 1,25%, 72 px é 3,75% e 28 px é 1,4583%. */
body.modo-tv .controles {
  flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 48px);
  gap: 12px; padding: 12px; bottom: 24px;
}
body.modo-tv .controles .botao { min-height: 72px; padding: 12px 20px; gap: 12px; font-size: 28px; }
@media (min-width: 1921px) {
  body.modo-tv .controles { max-width: calc(100vw - 2.5vw); gap: 0.625vw; padding: 0.625vw; bottom: 1.25vw; }
  body.modo-tv .controles .botao { min-height: 3.75vw; padding: 0.625vw 1.0417vw; gap: 0.625vw; font-size: 1.4583vw; }
}
.botao-primario { background: var(--cor-dado); color: var(--cor-texto-inverso); border-color: var(--cor-dado); }
.botao-primario:hover { background: var(--cor-tinta); border-color: var(--cor-tinta); }
.botao-primario kbd { border-color: var(--cor-texto-inverso); }
.botao-primario:focus-visible { outline-color: var(--foco-cor); }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--peso-titulo); }
.ajuda {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgb(32 34 30 / 0.55);
}
.ajuda-caixa {
  width: min(760px, 92vw); max-height: 90vh; overflow: auto; background: var(--cor-superficie); color: var(--cor-tinta);
  border: var(--fio-fino) solid var(--cor-borda); border-radius: var(--raio-medio); box-shadow: var(--sombra-dialogo); padding: 32px 36px;
}
.ajuda-caixa h2 { font-size: var(--tamanho-portal-titulo-secao); font-weight: var(--peso-titulo); margin-bottom: 16px; }
.ajuda-caixa dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 20px; font-size: var(--tamanho-portal-texto); }
.ajuda-caixa dt { text-align: right; }
.ajuda-caixa dd { margin: 0; }
.aviso-sistema {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 40; padding: 10px 18px;
  background: var(--cor-tinta); color: var(--cor-fundo); border-radius: var(--raio-medio); font-weight: var(--peso-titulo);
}
body.miniatura .controles, body.miniatura .aviso-sistema { display: none !important; }

/* ========================================================================= Login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); }
.login-marca {
  display: flex; flex-direction: column; justify-content: center; gap: var(--espaco-6);
  padding: var(--espaco-9) clamp(32px, 7vw, 140px); border-right: var(--fio-fino) solid var(--cor-borda);
}
.login-assinatura svg { width: min(620px, 100%); height: auto; display: block; }
.login-frase { font-size: var(--tamanho-portal-subtitulo); max-width: 30ch; color: var(--cor-tinta); line-height: 1.35; }
.login-endosso { display: flex; align-items: center; gap: var(--espaco-4); margin-top: var(--espaco-7); font-size: var(--tamanho-portal-apoio); color: var(--cor-tinta-branda); }
.abl-lockup { display: block; width: 240px; }
.login-form-area { display: flex; flex-direction: column; padding: var(--espaco-6) clamp(24px, 5vw, 96px) var(--espaco-7); background: var(--cor-superficie); }
.login-topo { display: flex; justify-content: flex-end; }
.login-form { margin: auto 0; display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 460px; width: 100%; }
.login-form h1 { font-size: var(--tamanho-portal-titulo-pagina); font-weight: var(--peso-titulo); letter-spacing: var(--entreletra-titulo); line-height: 1.1; }
.apoio { color: var(--cor-tinta-branda); font-size: var(--tamanho-portal-apoio); }
.apoio-inline { color: var(--cor-tinta-branda); font-weight: var(--peso-texto-portal); }
.login-form label { font-weight: var(--peso-titulo); font-size: var(--tamanho-portal-apoio); margin-top: var(--espaco-3); }
.login-form input, .login-form select {
  min-height: 52px; padding: 10px 14px; border-radius: var(--raio-fino); font-size: var(--tamanho-portal-texto);
  background: var(--cor-fundo); border: var(--fio-medio) solid var(--cor-tinta-branda);
}
.login-form input::placeholder { color: var(--cor-tinta-branda); opacity: 1; }
.login-form .botao-primario { justify-content: center; margin-top: var(--espaco-5); min-height: 56px; font-size: var(--tamanho-portal-texto); }
.login-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); margin-top: var(--espaco-3); }
.login-msg:empty { display: none; }
.login-msg { font-size: var(--tamanho-portal-apoio); }
.nota { font-size: var(--tamanho-portal-legenda); color: var(--cor-tinta-branda); }

/* ========================================================================= Portal */
.portal { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; }
.portal-topo { display: flex; align-items: center; gap: var(--espaco-6); padding: var(--espaco-4) var(--espaco-7); border-bottom: var(--fio-fino) solid var(--cor-borda); }
.portal-marca { display: flex; align-items: center; gap: var(--espaco-3); }
.portal-assinatura svg { height: 44px; width: auto; display: block; }
.endosso { font-size: var(--tamanho-portal-legenda); color: var(--cor-tinta-branda); white-space: nowrap; }
.abl-selo { display: block; width: 28px; height: 28px; }
.trilha { display: flex; align-items: center; gap: var(--espaco-2); color: var(--cor-tinta-branda); font-size: var(--tamanho-portal-apoio); }
.trilha b { color: var(--cor-tinta); }
.portal-acoes { margin-left: auto; display: flex; gap: var(--espaco-3); }
.portal-perfil { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espaco-4); padding: var(--espaco-4) var(--espaco-7); background: var(--cor-superficie); border-bottom: var(--fio-fino) solid var(--cor-borda); }
.rot-portal { font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); font-size: var(--tamanho-portal-rotulo); color: var(--cor-tinta-branda); }
.seletor { display: inline-flex; border: var(--fio-fino) solid var(--cor-tinta-branda); border-radius: var(--raio-medio); overflow: hidden; }
.seletor-op { min-height: 44px; padding: 8px 18px; background: transparent; border: 0; border-right: var(--fio-fino) solid var(--cor-borda); cursor: pointer; font-weight: var(--peso-titulo); }
.seletor-op:last-child { border-right: 0; }
.seletor-op[aria-checked="true"] { background: var(--cor-tinta); color: var(--cor-fundo); }
.seletor-op:focus-visible { outline-offset: -4px; }
/* Na opção marcada o preenchimento é a tinta: o anel usa a cor inversa para não sumir. */
.seletor-op[aria-checked="true"]:focus-visible { outline-color: var(--foco-cor-inversa); }
.portal-quem { color: var(--cor-tinta-branda); font-size: var(--tamanho-portal-apoio); }
.portal-quem b { color: var(--cor-tinta); }
.portal-perfil .selo-ficticio { margin-left: auto; }
.portal-corpo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: var(--espaco-7); padding: var(--espaco-6) var(--espaco-7); align-items: start; }
.portal-lateral { display: flex; flex-direction: column; gap: var(--espaco-6); }
.area { border-top: var(--fio-forte) solid var(--cor-tinta); padding-top: var(--espaco-4); display: flex; flex-direction: column; gap: var(--espaco-3); }
.area-painel { border-top-color: var(--cor-dado); }
.area-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-4); }
.area h2 { font-size: var(--tamanho-portal-titulo-secao); font-weight: var(--peso-titulo); letter-spacing: var(--entreletra-titulo); line-height: 1.15; }
.etiqueta { font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); font-size: var(--tamanho-portal-rotulo); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); color: var(--cor-tinta-branda); white-space: nowrap; }
.etiqueta-ok { color: var(--cor-dado); }
.area-resumo { font-size: var(--tamanho-portal-texto); }
.area-resumo .num { color: var(--cor-dado); }
.miniatura { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: var(--fio-fino) solid var(--cor-borda); border-radius: var(--raio-fino); background: var(--cor-fundo); container-type: inline-size; }
.miniatura iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; transform: scale(0.4); pointer-events: none; }
.botoes-tela { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-3); }
.botao-tela { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 84px; }
.tabela-portal { width: 100%; border-collapse: collapse; font-size: var(--tamanho-portal-apoio); }
.tabela-portal th { text-align: left; font-family: var(--fonte-rotulo); font-weight: var(--peso-rotulo); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); font-size: var(--tamanho-portal-rotulo); color: var(--cor-tinta-branda); padding: 6px 8px 6px 0; border-bottom: var(--fio-fino) solid var(--cor-borda); }
.tabela-portal td { padding: 7px 8px 7px 0; border-bottom: var(--fio-fino) solid var(--cor-borda); }
.lista-admin, .lista-futuros { list-style: none; padding: 0; display: flex; flex-direction: column; }
.lista-admin li, .lista-futuros li { display: flex; justify-content: space-between; gap: var(--espaco-4); padding: 9px 0; border-bottom: var(--fio-fino) solid var(--cor-borda); font-size: var(--tamanho-portal-apoio); }
.lista-admin .num { color: var(--cor-dado); }
.lista-futuros span { color: var(--cor-tinta-branda); }
.area-acesso p { font-size: var(--tamanho-portal-texto); }
.portal-pe { display: flex; justify-content: space-between; gap: var(--espaco-5); padding: var(--espaco-4) var(--espaco-7); border-top: var(--fio-fino) solid var(--cor-borda); color: var(--cor-tinta-branda); font-size: var(--tamanho-portal-legenda); }
@media (max-width: 1100px) {
  .portal-corpo { grid-template-columns: 1fr; }
  .botoes-tela { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { grid-template-columns: 1fr; }
  .login-marca { border-right: 0; border-bottom: var(--fio-fino) solid var(--cor-borda); padding: var(--espaco-7) var(--espaco-5); }
  .portal-topo { flex-wrap: wrap; padding: var(--espaco-4) var(--espaco-5); }
  .portal-perfil, .portal-corpo, .portal-pe { padding-left: var(--espaco-5); padding-right: var(--espaco-5); }
}
.login-endosso .abl-selo, .login-endosso .abl-selo svg { width: 32px; height: 32px; }

/* Ajustes depois da primeira rodada de capturas da crítica */
.ev-topo > .bloco > .ev-sub, .ev-topo > .aviso > .ev-sub { margin-top: auto; padding-top: var(--g2); }
.ev-col { justify-content: space-between; }
.lt-grupo.sem-taxa .lt { grid-template-columns: minmax(0, 1fr) auto; }
.lt-grupo.sem-taxa .lt-extra { display: none; }
.rk-nome { font-size: calc(var(--f-dest) * 0.92); }
.g-atual.g-cima { transform: translate(-50%, -170%); }
.qt-dir { justify-content: flex-start; }

.tela .aviso .rot { white-space: normal; }
.curva-avisos .aviso-mini { white-space: normal; align-items: flex-start; }
.tv-faixa .selo-ficticio { border-width: 2px; padding: 0.3em 0.5em; }
.tv[data-modo="mosaico"] .so-unica { display: none; }
/* Mosaico: a mesma composição, apertada para o quarto da TV. */
.tv[data-modo="mosaico"] .tela { --pl-cols: 34cqw 29cqw minmax(0, 1fr); --rk-cols: 2.4cqw minmax(0, 1fr) 4cqw 4.4cqw; --qd-cols: minmax(0, 1fr) 36cqw; --plot-dir: 9.5cqw; }
.tv[data-modo="mosaico"] .rk-linha { column-gap: 0.8cqw; }
.tv[data-modo="mosaico"] .rk-nome { font-size: var(--f-tx); }
.tv[data-modo="mosaico"] .rk-n { font-size: var(--f-n5); }
.tv[data-modo="mosaico"] .rk-pos { font-size: var(--f-tx); }
.tv[data-modo="mosaico"] .lt { font-size: var(--f-det); padding: 0.5cqw 0; }
.tv[data-modo="mosaico"] .lt-val b.num { font-size: var(--f-tx); }
.tv[data-modo="mosaico"] .pl-pe, .tv[data-modo="mosaico"] .pl-semana, .tv[data-modo="mosaico"] .heroi-ritmo .tx { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .heroi-ritmo .ic { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .pl-b, .tv[data-modo="mosaico"] .pl-c { gap: var(--g3); }
.tv[data-modo="mosaico"] .g-fim b, .tv[data-modo="mosaico"] .g-atual b { font-size: var(--f-tx); }
.tv[data-modo="mosaico"] .evolucao { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--g3); }
.tv[data-modo="mosaico"] .ev-topo { grid-template-columns: 19cqw 21cqw 22cqw minmax(0, 1fr); column-gap: 1.6cqw; padding-bottom: var(--g2); }
.tv[data-modo="mosaico"] .ev-col { display: contents; }
.tv[data-modo="mosaico"] .ev-topo .rot { white-space: normal; }
.tv[data-modo="mosaico"] .ev-sub { font-size: var(--f-det); white-space: normal; flex-wrap: wrap; }
.tv[data-modo="mosaico"] .ev-n3 { font-size: var(--f-n5); }
.tv[data-modo="mosaico"] .ev-n3l .tx { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .por-dia { grid-column: 1; grid-row: 2; }
.tv[data-modo="mosaico"] .ev-tabelas { grid-column: 1; grid-row: 3; flex-direction: row; gap: 2cqw; }
.tv[data-modo="mosaico"] .ev-tabelas > * { flex: 1 1 0; min-width: 0; }
.tv[data-modo="mosaico"] .tabela th, .tv[data-modo="mosaico"] .tabela td { padding: 0.1cqw 0 0.1cqw 0.8cqw; }
.tv[data-modo="mosaico"] .tabela .t-cab { letter-spacing: 0; }
.tv[data-modo="mosaico"] .dias { column-gap: 0.4cqw; }
.tv[data-modo="mosaico"] .dia-barras { gap: 1px; }
.tv[data-modo="mosaico"] .dia:not(.dia-hoje) .dia-x { display: none; }
.tv[data-modo="mosaico"] .b-val { font-size: var(--f-mono); }
.tv[data-modo="mosaico"] .pd-leg { gap: var(--g2); }
.tv[data-modo="mosaico"] .qd-lado { gap: var(--g3); }
.tv[data-modo="mosaico"] .qd-lista li { font-size: var(--f-tx); column-gap: var(--g3); }
.tv[data-modo="mosaico"] .qd-total .tx { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .qd-mapa-aviso { margin-top: 0; }
/* Mudança S2 (13/10/2026): com o mapa aceso, as barras por dia da semana vão para a coluna estreita do lado; o rótulo
   do bloco quebra em vez de transbordar no mosaico. */
.tv[data-modo="mosaico"] .quando-com-mapa .qd-lado .rot { white-space: normal; }

.pl-pe { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .tela { --plot-esq: 4cqw; }
.tv[data-modo="mosaico"] .evolucao { grid-template-rows: auto minmax(9cqw, 1fr) auto; }
.tv[data-modo="mosaico"] .ev-topo { grid-template-columns: 16cqw 20cqw 20cqw minmax(0, 1fr); }
.tv[data-modo="mosaico"] .ev-heroi .ev-sub { display: none; }
.tv[data-modo="mosaico"] .ev-topo .rot { white-space: nowrap; }
.tv[data-modo="mosaico"] .tabela th, .tv[data-modo="mosaico"] .tabela td { padding-top: 0; padding-bottom: 0; line-height: 1.12; }
.tv[data-modo="mosaico"] .qd-total { display: none; }
.tv[data-modo="mosaico"] .pl-a { gap: var(--g2); }
.tv[data-modo="mosaico"] .tabela th, .tv[data-modo="mosaico"] .tabela td { padding-left: 0.55cqw; }
.tv[data-modo="mosaico"] .ev-tabelas { gap: 1.4cqw; }
.tv[data-modo="mosaico"] .por-dia > .bloco-cab { margin-bottom: var(--g1); }
.tv[data-modo="mosaico"] .por-dia { --plot-pe: 3.6cqw; }
.pl-semana .valor { gap: 0.25em; }
.rec-l3 { display: block; }
.rec-l3 .ic { vertical-align: -0.2em; margin-right: 0.3em; }
.aviso.qt-falta { height: auto; align-self: start; }

/* ======================================================================== acabamento de 07/10/2026 */
/* Revisão das telas Evolução diária e Quantos contratos fechar: hierarquia e presença na família do Placar
 * e do Quando fecham, sem dado novo; nada de vazio no pé das colunas; os números grandes com a caixa
 * cobrindo o desenho do algarismo; e, sem as abas Metas e Configurações, nada transborda nem se sobrepõe. */
.tv[data-modo="unica"] { --f-n1: 700px; --f-ev1: 300px; --f-ev2: 200px; --f-ev3: 84px; --f-qt: 240px; --casa-h: 168px; --qt-pe-h: 88px; }
.tv[data-modo="mosaico"] .tela { --f-ev1: 9cqw; --f-ev2: 5.4cqw; --f-ev3: 3.4cqw; --f-qt: 8cqw; --casa-h: 4.4cqw; --qt-pe-h: 5.2cqw; }

/* Números grandes: com altura de linha abaixo de 1, o algarismo passava de 8 a 24 px do alto da caixa.
 * O respiro em em acompanha o tamanho, na tela única e no mosaico. */
.heroi-num, .heroi-meta-n, .ev-n1, .ev-n2, .qt-num, .qt-n { padding-top: 0.06em; padding-bottom: 0.012em; }
/* A área de fonte abaixo da linha de base (sem tinta nos algarismos) não conta como transbordo: o recorte
 * fica 0,02 em além da caixa, que já cobre o desenho (data-diag-tinta confere a cada captura). */
.heroi-num, .ev-n1, .ev-n2, .qt-num, .qt-n { overflow: clip; overflow-clip-margin: 0.02em; }
.heroi-lado { padding-top: calc(var(--f-heroi) * 0.08); }

/* Faixa da tela: a nota desce inteira para a segunda linha, escondida, quando não cabe ao lado do mês e do
 * dia útil; nunca corre por baixo da indicação da rotação. */
.tela-ctx-nota { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.tv[data-modo="unica"] .tela-ctx { grid-column: 2 / 5; flex-wrap: wrap; align-content: flex-start; height: 1.3em; overflow: hidden; padding-right: 460px; }
.tv[data-modo="unica"] .tela-ctx > * { flex: none; }
/* Desatualizada e com o selo de dados fictícios na segunda linha (ver .tela-cab-atraso): a reserva da direita cresce com
 * o selo, e a nota da tela desce e some inteira quando não couber, como já acontecia com a rotação. */
.tv[data-modo="unica"] .tela-cab-atraso.tela-cab-ficticio .tela-ctx { padding-right: 800px; }

/* Evolução: o herói de outubro e o setembro no mesmo ponto assentam na mesma linha de base, cada um com o
 * seu apoio ao lado (meta do mês; mês inteiro). Rótulos podem quebrar: os números ficam no pé do bloco. */
.tv[data-modo="unica"] { --ev-topo-cols: 470px 590px minmax(0, 1fr); }
.ev-topo > .bloco { justify-content: flex-start; }
.ev-topo .rot { white-space: normal; }
.tv[data-modo="unica"] .ev-topo .bloco-cab { flex-wrap: nowrap; align-items: flex-start; }
.ev-linha { display: flex; align-items: flex-end; gap: var(--g4); min-width: 0; margin-top: auto; }
.ev-n1 { font-size: var(--f-ev1); line-height: 0.78; }
.ev-n1[data-digitos="3"], .ev-n1[data-digitos="5"] { font-size: calc(var(--f-ev1) * 0.66); }
.ev-n2 { font-size: var(--f-ev2); line-height: 0.8; }
.ev-lado { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--g1); min-width: 0; padding-bottom: 0.15em; }
.ev-lado .valor { display: flex; flex-direction: column; gap: var(--g1); }
.ev-lado-l1 { display: flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.ev-lado-l1 b.num { font-size: var(--f-ev3); line-height: 0.85; }
.ev-de { color: var(--cor-tinta-branda) !important; }
.ev-lado .det { white-space: nowrap; }
.ev-linha > .num { flex: none; }
.ev-lado { flex: 1 1 auto; }
.ev-lado .aviso-mini { white-space: normal; align-items: flex-start; }
.ev-lado .aviso-mini .ic { margin-top: 0.1em; flex: none; }
.ev-n3 { font-size: var(--f-ev3); }
.ev-col > .aviso { gap: 0; }
.ev-col > .aviso .aviso-rot { margin-bottom: var(--g1); }
/* Contratos por dia: barras mais largas; a legenda desce para uma segunda linha quando não cabe (selos). */
.tv[data-modo="unica"] .dias { column-gap: 10px; }
.por-dia > .bloco-cab { flex-wrap: wrap; row-gap: var(--g1); }
.dia-x:empty { display: none; }
.dia:last-child .dia-x { left: auto; right: 0; transform: none; }
/* Tabelas: quando não cabem (mais linhas ou faixa de cima mais alta), o painel.js aperta as linhas. */
.ev-tabelas.tab-justa { gap: var(--g3); }
.ev-tabelas.tab-justa .tabela th, .ev-tabelas.tab-justa .tabela td { padding-top: 2px; padding-bottom: 2px; }

/* Quantos fechar: à esquerda, o que falta hoje, grande, assentado no pé; à direita, a meta do dia e os
 * fechados hoje lado a lado, o medidor na largura da coluna, os contratos de hoje e o mês. Os dois pés
 * (frase e mês) ficam na mesma altura, com o mesmo fio. */
.qt-esq > .qt-falta { flex: 1 1 auto; min-height: 0; }
.qt-num { margin-top: auto; }
.qt-frase, .qt-mes { margin-top: var(--g4); padding-top: var(--g3); border-top: var(--fio) solid var(--cor-borda); min-height: var(--qt-pe-h); box-sizing: border-box; }
.qt-mes { margin-top: auto; }
.aviso.qt-falta { flex: 1 1 auto; height: auto; align-self: stretch; justify-content: flex-start; gap: var(--g2); }
/* Sem o que falta hoje, o aviso ocupa a coluna: o rótulo no alto e o motivo no meio, maior. */
.aviso.qt-falta .aviso-rot { margin-bottom: auto; }
.aviso.qt-falta > :last-child { margin-bottom: auto; }
.tv[data-modo="unica"] .aviso.qt-falta .aviso-titulo { font-size: var(--f-dest); }
.tv[data-modo="unica"] .aviso.qt-falta .aviso-det, .tv[data-modo="unica"] .aviso.qt-falta .aviso-tambem { font-size: var(--f-tx); }
.qt-dir { gap: var(--g5); }
.qt-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g5); align-items: start; }
.qt-par-so { grid-template-columns: minmax(0, 1fr); }
/* Sem a meta do dia, os fechados hoje ficam sozinhos e passam a ser o número herói da tela. */
.qt-par-so .qt-n { font-size: var(--f-heroi); }
.qt-par .bloco-cab, .qt-par .aviso-rot { margin-bottom: var(--g2); }
.qt-n { display: block; font-size: var(--f-qt); line-height: 0.78; }
.qt-n-fech { color: var(--cor-dado) !important; }
.casas { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.casa { aspect-ratio: auto; height: var(--casa-h); }
.qt-hoje-vazio { color: var(--cor-tinta-branda) !important; }
.tv[data-modo="mosaico"] .qt-dir { gap: var(--g3); }
.tv[data-modo="mosaico"] .qt-hoje-vazio { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .qt-mes { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .qt-frase { font-size: var(--f-tx) !important; }
.qt-frase { text-wrap: balance; }
.tv[data-modo="mosaico"] .tela { --qt-pe-h: 7.8cqw; }
/* Mosaico da Evolução: o apoio do herói fica fora (como antes) e o de setembro desce quando não cabe. */
.tv[data-modo="mosaico"] .ev-heroi .ev-lado { display: none; }
/* Mosaico do Placar: a legenda na ponta da curva ("36 meta") passava 2 px da coluna no tema escuro. */
/* Com o selo do parcial na ponta ("73 set." com o ícone, planilha real de 12/10/2026), a legenda passava 7 px: 11cqw. */
.tv[data-modo="mosaico"] .tela { --plot-dir: 11cqw; }
.tv[data-modo="mosaico"] .ev-linha { flex-wrap: wrap; gap: 0 var(--g2); }
.tv[data-modo="mosaico"] .ev-lado .valor { flex-direction: row; align-items: baseline; gap: 0.3em; }
.tv[data-modo="mosaico"] .ev-lado .det { white-space: normal; font-size: var(--f-det); }

/* ======================================================================== super meta (decisão D24)
 * Secundária à meta, sem competir com o número herói: régua fina logo abaixo da régua da meta, com a
 * marca âmbar da super meta no fim do trilho e uma linha de legenda; no gráfico do ritmo do mês, reta
 * âmbar pontilhada, mais fina que a tracejada da meta; em Quantos fechar, uma linha com rótulo e número
 * de lista abaixo da meta do dia. O âmbar segue só em forma, nunca em texto. */
.regua-super { display: flex; flex-direction: column; gap: var(--g1); margin-top: var(--g1); }
.rs-leg { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g2); white-space: nowrap; font-size: var(--f-det); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); line-height: 1.1; }
.rs-esq, .rs-dir { display: inline-flex; align-items: baseline; gap: 0.3em; min-width: 0; }
.rs-esq .rot { margin-right: 0.25em; }
.rs-leg .valor { display: inline-flex; align-items: baseline; gap: 0.25em; }
.rs-leg b.num { font-size: calc(var(--f-n5) * 0.8); line-height: 0.9; color: var(--cor-tinta); }
.rs-leg .ponto { margin: 0 0.2em; }
.rs-alcancada b { color: var(--cor-dado); font-weight: var(--peso-destaque); font-family: var(--fonte-texto); }
.rs-alcancada b .num { font-size: 1em; color: var(--cor-dado); }
.rs-alcancada .ic { width: 1em; height: 1em; align-self: center; }
.rs-trilho { position: relative; height: calc(var(--barra-h) * 0.34); background: var(--cor-rebaixo); border-radius: var(--raio); }
.rs-valor { position: absolute; inset: 0 auto 0 0; background: var(--cor-dado); border-radius: var(--raio); }
.rs-alvo { position: absolute; right: 0; top: calc(var(--barra-h) * -0.22); bottom: calc(var(--barra-h) * -0.22); width: var(--fio3); background: var(--cor-acento); }
.rs-trilho[data-estado="desatualizado"] .rs-valor { background: var(--estado-desatualizado-cor); }
[data-tema="escuro"] .rs-trilho { background: var(--cor-superficie); }
.regua-super-aviso { flex-direction: row; flex-wrap: wrap; gap: var(--g1) var(--g3); }
.curva-svg .serie-super { stroke: var(--cor-acento); stroke-width: 3; stroke-dasharray: 0.5 8; }
.tv[data-modo="mosaico"] .curva-svg .serie-super { stroke-width: 2.5; stroke-dasharray: 0.5 6; }
.qt-super { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3em; font-size: var(--f-tx); font-weight: var(--peso-texto-tv); color: var(--cor-tinta-branda); line-height: 1.1; }
.qt-super .rot { margin-right: var(--g2); }
.qt-super b.num { font-size: var(--f-n4); line-height: 0.85; color: var(--cor-tinta); }
.qt-super .valor { display: inline-flex; align-items: baseline; gap: 0.25em; }
.qt-super .valor b.num { font-size: 1.15em; }
.qt-frase-super { display: block; margin-top: var(--g2); font-size: var(--f-tx) !important; color: var(--cor-tinta-branda) !important; }
.qt-frase-super .valor { display: inline-flex; align-items: baseline; gap: 0.25em; }
.qt-frase-super b.num { font-size: 1.15em; color: var(--cor-tinta); }
.tv[data-modo="mosaico"] .rs-leg, .tv[data-modo="mosaico"] .qt-super { font-size: var(--f-det); }
/* Acerto da conferência das capturas da super meta (07/10/2026). A coluna do herói do Placar não cabia com
 * dois dígitos ("18" ao lado de "de 80" e "23% da meta"): com dois dígitos, o herói fica em 78% da altura,
 * entre o de um dígito e o de três (66%). Com a régua da super meta, a coluna aperta os vãos. O eixo do
 * ritmo ganha lugar para três dígitos (120) e a legenda "super meta" fica em duas linhas, na ponta da reta.
 * Em Quantos fechar, a linha da super meta do dia entra no par da meta do dia, sem um vão a mais. */
.heroi-num[data-digitos="2"] { font-size: calc(var(--f-heroi) * 0.78); }
.heroi-linha:has(.heroi-num[data-digitos="2"]) { gap: var(--g3); }
.pl-a.pl-a-super { gap: var(--g2); }
.pl-a-super .regua { margin-top: var(--g1); }
.pl-a-super .regua-super { margin-top: 0; }
.pl-a-super .pl-semana { margin-top: 0; }
.tv[data-modo="unica"] { --plot-esq: 68px; }
/* Mesma rodada: o eixo do Ritmo do mês com três dígitos ("156") passava 2 px da coluna, à esquerda. */
.tv[data-modo="mosaico"] .tela { --plot-esq: 5.5cqw; }
.tv[data-modo="unica"] .curva-super { --plot-dir: 176px; }
.g-fim-super { align-items: center; }
.g-fim-tx { display: inline-flex; flex-direction: column; line-height: 1; }
.qt-par > .qt-super { flex-basis: 100%; margin-top: var(--g3); }
.qt-super b.num { font-size: var(--f-n5); }
/* Segunda rodada da conferência: o percentual ao lado do herói pode descer "da meta" para a linha de baixo;
 * Quantos fechar fica com vãos menores, e a linha da super meta do dia ocupa as duas colunas do par da meta
 * do dia (o par é uma grade); no mosaico, o rótulo da super meta vai em texto (o mono em caixa alta não cabia
 * no quarto) e a coluna do herói aperta os vãos. */
.heroi-pct { flex-wrap: wrap; }
.qt-dir { gap: var(--g4); }
.qt-par > .qt-super { grid-column: 1 / -1; margin-top: var(--g2); }
.tv[data-modo="mosaico"] .rs-esq .rot { font-family: var(--fonte-texto); font-weight: var(--peso-texto-tv); text-transform: none; letter-spacing: 0; font-size: var(--f-det); }
.tv[data-modo="mosaico"] .pl-a.pl-a-super { gap: var(--g1); }
/* Terceira rodada: batida a meta, o "faltam para a super meta" desce para uma linha própria no pé; no
 * mosaico, a legenda da régua da super meta perde o ponto separador e aperta os vãos para caber no quarto. */
.pl-pe-super .pe-super { flex-basis: 100%; }
.tv[data-modo="mosaico"] .rs-dir .ponto { display: none; }
.tv[data-modo="mosaico"] .rs-leg { gap: 0.4em; }
.tv[data-modo="mosaico"] .rs-dir { gap: 0.45em; }
.tv[data-modo="mosaico"] .rs-esq { gap: 0.2em; }
.tv[data-modo="mosaico"] .rs-esq .rot { margin-right: 0; }
.tv[data-modo="mosaico"] .rs-leg b.num { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .rs-alcancada .ic { display: none; }
.tv[data-modo="mosaico"] .g-y-meio { display: none; }
/* Herói de um dígito (430 px) com a régua da super meta: o pé encostava 4 px abaixo da coluna (cenário zero). */
.pl-a-super .heroi-linha { margin-top: var(--g1); }
/* Achados da conferência independente da super meta (07/10/2026). M1: os números da linha da super meta ficam
 * menores que os do pé (na tela única, 30 px contra 34,5 px; no mosaico, 2,45cqw contra 2,82cqw), e a linha não
 * diz mais quanto falta (telas.js). B4: no mosaico, a legenda na ponta da reta da super meta leva as palavras,
 * em duas linhas, com a margem direita do quadro aberta para elas. */
.rs-leg b.num { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .curva-super { --plot-dir: 11.8cqw; }
.tv[data-modo="mosaico"] .g-fim-super b { font-size: var(--f-det); }

/* ======================================================================== mosaico e estados (07/10/2026)
 * Conferência das capturas do mosaico e dos estados da regra do sócio. Os rótulos que encostavam ("ritmo 53,3"
 * e "meta 80"; "hoje" e "21") e as legendas na ponta das linhas são acomodados pelo painel.js, medindo a tela. */
/* Item 4: o rodapé quebra a linha do motivo em vez de cortar com reticências; a faixa do rodapé cresce quando
 * precisa, com a altura de antes como mínima. */
.tv { grid-template-rows: var(--faixa-h) minmax(0, 1fr) minmax(var(--rodape-h), auto); }
.rec { align-items: flex-start; gap: 20px; }
.rec-l3 { white-space: normal; overflow: visible; text-overflow: clip; }
.tv-legenda { row-gap: 6px; }
/* Avisos das colunas do Placar e da Evolução no mosaico: margem interna e título menores (o título fica no piso
 * de 23 px do mosaico), para caber com a fonte fora do ar (as colunas passavam de 7 a 18 px do pé). */
.tv[data-modo="mosaico"] .placar .aviso, .tv[data-modo="mosaico"] .evolucao .aviso { padding: var(--g2) var(--g3); }
.tv[data-modo="mosaico"] .placar .aviso .aviso-titulo, .tv[data-modo="mosaico"] .evolucao .aviso .aviso-titulo { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .heroi-aviso { margin-top: 0; }
/* Fase 7 (achado do teste dos estados no navegador): no mosaico, com a meta do mês sem valor, o aviso dela, a semana e o
 * número passavam 2 px da coluna do Placar; a semana fica sem o respiro de cima. */
.tv[data-modo="mosaico"] .pl-a.pl-a-aviso .pl-semana { margin-top: 0; }
/* Item 2: em Quantos fechar, o aviso curto do mês quebra a linha (no mosaico com erro, passava 74 px à direita). */
.qt-mes .aviso-mini { white-space: normal; align-items: flex-start; }
.qt-mes .aviso-mini .ic { flex: none; margin-top: 0.1em; }
/* Item 6: no funil, a linha sem valor leva o rótulo e o motivo em cima (o motivo onde ficaria o número) e,
 * embaixo, "Informação indisponível" na cor do estado (no erro, "Erro na planilha" e onde corrigir). No mosaico,
 * as linhas do funil ficam mais justas, para o gráfico do ritmo do mês não perder altura. */
.lt.lt-falha, .lt-grupo.sem-taxa .lt.lt-falha { grid-template-columns: max-content minmax(0, 1fr); row-gap: var(--g1); }
.lt-falha .lt-rot { grid-row: 1; grid-column: 1; overflow: visible; }
.lt-falha .lt-mot { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; white-space: normal; font-size: var(--f-det); font-weight: var(--peso-texto-tv); line-height: 1.15; color: var(--estado-indisponivel-cor-detalhe); }
.lt-falha .lt-val { grid-row: 2; grid-column: 1 / -1; justify-self: start; white-space: normal; }
.sem-valor { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--f-det); font-weight: var(--peso-destaque); line-height: 1.15; color: var(--estado-indisponivel-cor); }
.sem-valor .ic { flex: none; width: 1.05em; height: 1.05em; }
.sem-valor-erro { color: var(--estado-erro-cor); }
.lt-falha-erro .lt-mot { color: var(--estado-erro-cor-detalhe); }
.tv[data-modo="mosaico"] .lt { padding: 0.25cqw 0; }
/* Item 8: sem a meta do mês, o aviso curto dela fica embaixo do número de outubro, na largura do bloco. No
 * mosaico, como o valor da meta, ele fica fora da Evolução (a meta do mês está no Placar). */
.ev-lado-falha { margin-top: var(--g2); }
.ev-lado-falha .aviso-mini { white-space: normal; align-items: flex-start; }
.ev-lado-falha .aviso-mini .ic { flex: none; margin-top: 0.1em; }
.tv[data-modo="mosaico"] .ev-heroi .ev-lado-falha { display: none; }
/* Na tela única, com o aviso embaixo, o número de outubro fica em 80% (a faixa de cima crescia e cortava as tabelas). */
.tv[data-modo="unica"] .ev-heroi-falha .ev-n1:not([data-digitos="3"]):not([data-digitos="5"]) { font-size: calc(var(--f-ev1) * 0.8); }
/* Item 3: Evolução no mosaico. Os cartões vizinhos da faixa de cima com o mesmo problema ficam num aviso só
 * (telas.js), em linha: os rótulos, "Informação indisponível" e o motivo. O eixo y do gráfico por dia fica só
 * com o zero e o topo, como o do ritmo do mês. */
.tv[data-modo="unica"] .ev-topo-mosaico, .tv[data-modo="mosaico"] .ev-topo-unica { display: none; }
.tv[data-modo="mosaico"] .ev-topo > .aviso.ev-junto { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--g1) 0.6em; padding: var(--g2) var(--g3); }
.tv[data-modo="mosaico"] .ev-junto > .aviso-rot { flex-basis: 100%; margin-bottom: 0; white-space: normal; }
.tv[data-modo="mosaico"] .ev-junto > .ev-sub { margin-top: 0; padding-top: 0; }
.tv[data-modo="mosaico"] .pd-g:nth-child(2) > span { display: none; }
/* Faixa de cima do mosaico: cada coluna cresce até caber o rótulo com o selo (zero real, desatualizado) numa
 * linha só; antes o selo descia e a faixa roubava altura do gráfico por dia (25 px no cenário zero). */
/* Segunda rodada da auditoria visual com dado real (06/11/2026): com outubro em três dígitos ("156 no mês inteiro"), o cartão
 * do mês anterior encostava no "Vs. outubro" ou quebrava em três linhas; ele ganha parte da sobra do "Vs. outubro" (22cqw e 17,5cqw). */
.tv[data-modo="mosaico"] .ev-topo { grid-template-columns: minmax(min-content, 16cqw) minmax(min-content, 22cqw) minmax(min-content, 16cqw) minmax(0, 1fr); }
/* Terceira rodada: o título "Vs. outubro" ocupa a coluna inteira, e "Projeção" vinha a 15 px dele, como um título só. Com
 * folga na linha, o cartão guarda um respiro à direita (painel.js, ev-ea-respiro), e o vão entre os dois títulos passa de uma
 * fonte; sem folga (no desatualizado, o selo alarga o cartão), o respiro sai, para a faixa não crescer sobre o gráfico. */
.tv[data-modo="mosaico"] .ev-topo .ev-ea.ev-ea-respiro { padding-right: 12px; }
.tv[data-modo="mosaico"] .ev-topo .bloco-cab { flex-wrap: nowrap; }
.tv[data-modo="mosaico"] .evolucao { row-gap: var(--g2); }
/* Fonte fora: a linha da semana com o aviso curto quebra a linha, sem passar da coluna. */
.pl-semana .aviso-mini { white-space: normal; align-items: flex-start; }
.pl-semana .aviso-mini .ic { flex: none; margin-top: 0.1em; }
/* "faltam 2 para a super meta do dia": a frase corre em linha, sem a segunda linha recuada do flex. */
.qt-frase-super .valor { display: inline; }
/* Mosaico do Placar, cenário zero: o selo do zero dos últimos contratos desce para a linha de baixo do rótulo. */
.tv[data-modo="mosaico"] .pl-b .bloco-cab { flex-wrap: wrap; row-gap: var(--g1); }
/* Quantos fechar, tela única: com a frase da super meta do dia, o número desce (a coluna passava 25 px do pé). */
.qt-falta-super .qt-num { font-size: calc(var(--f-n1) * 0.86); }

/* ======================================================================== parcial e espera (07/10/2026)
 * Conferência das capturas do cenário parcial e da espera (nenhuma resposta da API desde a abertura). */
/* M1: o selo do parcial (contorno tracejado com margem interna) não aumenta a linha do rótulo: no mosaico parcial, a
 * faixa do título do gráfico por dia e o cabeçalho das tabelas cresciam 3 a 5 px e o gráfico ia a 23 px. */
.selo-parcial { margin-top: calc(-0.1em - var(--fio)); margin-bottom: calc(-0.1em - var(--fio)); }
/* M1: no mosaico, as tabelas da Evolução ficam mais justas (números no tamanho do texto, linha de 1,08) e a faixa de
 * cima fica com o vão menor; o resto da altura vai para o gráfico por dia (48 px no parcial, eram 23). Com mais linhas
 * do que cabem, o painel.js tira as do fim e diz quantas (o gráfico não desce de 4,8cqw, cerca de 46 px). */
.tv[data-modo="mosaico"] .tabela td.num { font-size: var(--f-det); }
.tv[data-modo="mosaico"] .tabela th, .tv[data-modo="mosaico"] .tabela td { line-height: 1.08; }
.tv[data-modo="mosaico"] .ev-topo { padding-bottom: var(--g1); }
.tabela tr.t-mais td { color: var(--cor-tinta-branda); border-bottom: 0; }
/* M1: o número de cada barra fica sobre a linha da meta do dia (o "0" de um dia ficava cortado por ela). */
.pd-meta { z-index: 1; }
.b-val { z-index: 2; }
/* M1: em Quantos fechar no mosaico, o rótulo com o selo desce o selo para a linha de baixo quando não cabe na coluna
 * ("FECHADOS HOJE" com o selo do parcial passava 2 px). */
.tv[data-modo="mosaico"] .qt-par .bloco-cab { flex-wrap: wrap; row-gap: var(--g1); }
/* B8: avisos sem valor do tamanho do conteúdo, no alto da coluna, e não caixas altas e vazias (Meta do dia em
 * Quantos fechar; dia da semana e dia e faixa de horário em Quando fecham; gráfico por dia e cartões da faixa de cima
 * da Evolução; com a fonte fora, sem as abas ou na espera). */
.aviso.qt-falta { flex: 0 0 auto; align-self: stretch; justify-content: flex-start; }
.aviso.qt-falta .aviso-rot { margin-bottom: var(--g2); }
.aviso.qt-falta > :last-child { margin-bottom: 0; }
.quando > .aviso, .evolucao > .aviso.por-dia, .ev-topo > .aviso { align-self: start; }
.qd-lado > .qd-mapa-aviso:first-child { margin-top: 0; }
/* B8: na projeção, a seta e o número da evolução ficam juntos, na mesma linha. */
.ev-par { display: inline-flex; align-items: center; gap: 0.2em; white-space: nowrap; flex: none; }
.ev-sub .ev-par .ic { align-self: center; }
/* B8: desatualizado, o relógio da faixa leva "agora" em tinta branda. */
.vivo-agora { color: var(--cor-tinta-branda); }
/* M1: Quantos fechar na tela única, frase da super meta do dia no pé da coluna: o número da frase (1,15 em, altura de
 * linha 1) passava 2 px da caixa da coluna (parcial). Uma folga embaixo da frase, na medida da fonte. */
.qt-frase-super { padding-bottom: 0.12em; }
/* Espera e fonte fora, tela única do Placar: o aviso da contagem e da meta do mês, primeiro da coluna, alinha no alto
 * com os avisos das outras colunas (descia 16 px pela margem de quando fica embaixo do número). */
.pl-a > .heroi-aviso:first-child { margin-top: 0; }
/* Pré-auditoria da subfase 3.3 do protótipo (08/10/2026): as tabelas da Evolução passaram a trazer toda linha da
 * comparação, e o nome "Restabelecimento Auxílio Acidente", sem quebra, alargava a tabela 140 px além da coluna na
 * tela única e 150 px no mosaico. O nome do closer ou do benefício quebra em linhas; os números seguem numa linha só. */
.tabela td.t-nome { white-space: normal; overflow-wrap: break-word; }
/* Mesma pré-auditoria: tabelas que não cabem nem justas (tab-justa) ficam sem respiro nas linhas; nenhuma linha sai. */
.ev-tabelas.tab-justa-mais { gap: var(--g2); }
/* Fase 7: terceiro passo, com as tabelas ainda sem caber, o texto delas no piso de leitura (--f-rot: 28 px na tela única,
 * 2,4cqw no mosaico, acima dos 23 px do piso do mosaico). */
.ev-tabelas.tab-piso .tabela th, .ev-tabelas.tab-piso .tabela td, .ev-tabelas.tab-piso .tabela td.num { font-size: var(--f-rot); }
.ev-tabelas.tab-justa-mais .tabela th, .ev-tabelas.tab-justa-mais .tabela td { padding-top: 0; padding-bottom: 0; }
/* Pré-auditoria da Fase 7 (lente de aceite, achado 2): com o domínio inteiro de benefícios do dicionário, mais "a informar"
 * e uma linha que só existe na comparação, a tela única da Evolução cortava linhas sem aviso. Quarto passo, só na tela
 * única: a coluna das tabelas alarga e o gráfico por dia estreita, e cada nome cabe numa linha. */
.tv[data-modo="unica"] .evolucao.ev-tab-larga { --ev-cols: minmax(0, 1fr) 940px; }
.tv[data-modo="unica"] .evolucao.ev-tab-larga { row-gap: var(--g3); }
.tv[data-modo="unica"] .evolucao.ev-tab-larga .ev-tabelas { gap: var(--g2); }
.tv[data-modo="unica"] .evolucao.ev-tab-larga .tabela th, .tv[data-modo="unica"] .evolucao.ev-tab-larga .tabela td { line-height: 1.05; }
/* Revisão visual da demonstração (09/10/2026): os nomes nas casas da meta do dia, o sinal de meta batida e a reta da super meta
 * fora da escala só aparecem com a folha dos cartões (painel-cartoes.css); sem ela (o protótipo), ficam escondidos. */
.casa-quem, .qt-ok-ic { display: none; }
.curva-svg .fora-da-escala { display: none; }
/* Auditoria do mosaico com dado real (06/11/2026). Teste: tests/e2e/mosaico_forma_real.test.mjs. Antes, a coluna da taxa do
 * funil era fixa em 2,6em, e a taxa de quatro dígitos ("2.300%") passava por cima do número de contratos; agora ela cresce
 * com a taxa (a regra .lt acima). A coluna do ranking ganhou 1cqw do ritmo do mês (--pl-cols), para o título "Últimos
 * contratos" caber numa linha com o respiro do tracejado do parcial (painel-cartoes.css).
 * Selo do número do mês ao lado dele, quando o rótulo e o selo não cabem na coluna (painel.js, heroi-selo-ao-lado). */
.heroi-selo { display: none; }
.pl-a.heroi-selo-ao-lado .heroi-cab > .selo { display: none; }
.pl-a.heroi-selo-ao-lado .heroi-selo { display: block; }
/* Coluna do ranking e dos últimos contratos no mosaico quando nem um contrato cabe (painel.js, pl-b-justa): as linhas do
 * ranking e o vão entre os cartões ficam mais justos. */
.tv[data-modo="mosaico"] .pl-b.pl-b-justa { gap: var(--g2); --rk-pad: 1px; }
/* Segunda tarefa da mesma auditoria. Com o funil da API de hoje (atendimentos e conversões sem valor), a linha sem valor
 * ocupava três linhas no mosaico ("Atendidos", o motivo e "Informação indisponível" quebrado em dois), e o gráfico do Ritmo
 * do mês caía a 51 px. No mosaico, a linha sem valor do funil fica como os avisos curtos: o rótulo, o ícone do estado e o
 * motivo numa linha (o motivo longo quebra embaixo, à direita); "Informação indisponível" segue para o leitor de tela, e a
 * legenda do rodapé explica o ícone. O quadro do gráfico tem altura mínima de 76 px (3,3 vezes o piso de 23 px do eixo). */
.sem-valor span[data-indicador] { display: inline-flex; align-items: center; gap: 0.35em; }
.tv[data-modo="mosaico"] .funil .lt.lt-falha { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--g2); row-gap: 0; }
.tv[data-modo="mosaico"] .funil .lt-falha .lt-val { order: 2; margin-left: auto; }
.tv[data-modo="mosaico"] .funil .lt-falha .lt-mot { order: 3; }
.tv[data-modo="mosaico"] .funil .lt-falha .sv-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tv[data-modo="mosaico"] .curva-area { min-height: calc(var(--plot-topo) + var(--plot-pe) + 76px); }
/* Tela única da Evolução com as tabelas na coluna larga e o gráfico por dia abaixo do mínimo (painel.js, ev-topo-junto): a
 * faixa de cima é a do mosaico, com os cartões vizinhos do mesmo problema num aviso só, e o gráfico recupera a altura. */
.tv[data-modo="unica"] .evolucao.ev-topo-junto > .ev-topo-unica { display: none; }
.tv[data-modo="unica"] .evolucao.ev-topo-junto > .ev-topo.ev-topo-mosaico { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
/* O título do cartão do mês, mais estreito nessa faixa, quebra em vez de passar da caixa (vence o nowrap dos títulos da tela
 * única, em painel-cartoes.css). */
.tv[data-modo="unica"] .tela-corpo .evolucao.ev-topo-junto > .ev-topo-mosaico .bloco > .bloco-cab { flex-wrap: wrap; }
.tv[data-modo="unica"] .tela-corpo .evolucao.ev-topo-junto > .ev-topo-mosaico .bloco > .bloco-cab > .rot { white-space: normal; }