/* ═══════════════════════════════════════════════════════════════════════════
 * FLUXO_ COCKPIT — a folha ÚNICA da página do percurso (23/08/2026)
 *
 * POR QUE ESTE ARQUIVO EXISTE. Até 22/08 a página tinha CINCO fontes de estilo
 * concorrentes: um <style> inline de 175 linhas, o Tailwind, formacao.css,
 * hoje.css e um css/fluxo-cockpit-clean.css que nasceu REMENDANDO o inline.
 * Duas verdades para a mesma medida — e toda correção virava sobrescrita por
 * cima, que foi exatamente o desalinhamento que a Giselle apontou (cabeçalhos
 * diferentes em cards vizinhos, fichas do dia desproporcionais, largura presa
 * em 1152px). Aqui há UM dono das medidas.
 *
 * O QUE CONTINUA FORA e por quê:
 *   · dist/tailwind.css — utilitários pontuais (grid/flex/spacing) que a casa
 *     inteira usa; não duplico o que ele já faz bem.
 *   · css/formacao.css — o player da aula (99% das regras escopadas em .fp).
 *   · css/hoje.css — o MOTOR do dia (js/hoje-render.js emite .hj-*), e é folha
 *     GÊMEA de aluno/hoje.html. Nunca editar lá para arrumar o cockpit: a
 *     página irmã encolhe junto. O que o cockpit faz é VESTIR o card do dia
 *     por escopo (#fx-hoje-host, no fim deste arquivo).
 *
 * ORGANIZAÇÃO — a página é um painel de ÁREAS, nesta ordem:
 *   1. GESTÃO (hero): foco, ritmo, previsão, indicadores
 *   2. QUANDO: agenda dos concursos + HOJE_
 *   3. ACESSOS: dock de 5 portas + progresso
 *   4. PERCURSO: sequência de blocos
 *   5. ACOMPANHAMENTO (lateral): mapa, acumulado por área, metas
 *
 * DESIGN: assinatura da casa preservada — paper #f5f2e8, tinta #0f0e0a, acento
 * #e8d84a que SINALIZA e nunca preenche área, cantos retos, sombra de carimbo
 * sem blur, Inter nos títulos e Space Mono nos rótulos. Escala de 8px.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f5f2e8; --paper-2:#fbf9f4; --paper-3:#ede9d8; --paper-4:#d8d3bc;
  --ink:#0f0e0a; --ink-2:#3a3631; --ink-3:#6b6657; --ink-4:#b8b2a0;
  --accent:#e8d84a;
  /* a TINTA do acento — para ícone e texto, onde o amarelo não teria contraste.
     Mesmo valor de --accenttext em css/tokens.css; declarado aqui porque esta
     folha tem :root próprio (a página não carrega tokens.css). */
  --accent-tinta:#6b6000;
  --linha:rgba(15,14,10,.85); --linha-2:rgba(15,14,10,.18); --linha-3:rgba(15,14,10,.08);
  --f-tit:'Inter',sans-serif; --f-mono:'Space Mono',monospace;
  --f-corpo:'Inter',sans-serif; --f-num:'DM Serif Display',serif;
  --larg:1440px;          /* o cockpit usa a tela; o antigo travava em 1152 */
  --gap:14px;
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-corpo);
  margin:0;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E")}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hidden{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ── PRIMITIVOS DA CASA ──────────────────────────────────────────────────── */
.b{border:1px solid var(--linha)}
.bb{border-bottom:1px solid var(--linha)}
.bt{border-top:1px solid var(--linha)}
.br{border-right:1px solid var(--linha)}

.tag{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linha);
  padding:3px 10px;line-height:1.6;color:var(--ink);font-weight:700}
.tag-accent{background:var(--accent)}
.tag-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag-sm{font-size:8px;padding:2px 7px;letter-spacing:.1em}

/* ⚠ text-transform:none NA DECLARAÇÃO CANÔNICA, e não é preciosismo.
   O ícone é uma LIGADURA: o nó contém o texto "tune", e a fonte o desenha. Se
   um ancestral aplicar text-transform:uppercase, o navegador manda "TUNE" para
   a fonte, a ligadura não casa, e a palavra sai crua na tela — foi assim que
   nasceu "DOWNLOADBAIXAR O CADERNO".
   Esta folha estava sem o reset desde que nasceu, e ninguém tinha visto porque
   nenhum ícone caía dentro de pai uppercase. O botão "Gerenciar concursos"
   (23/08) é uppercase e tem ícone dentro: seria o primeiro a quebrar.
   `npm run audit:icones` acusa a ausência em qualquer folha de css/. */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  font-size:20px;color:var(--ink);text-transform:none}
.icon-sm{font-size:16px}.icon-xs{font-size:14px}.icon-md{font-size:18px}.icon-lg{font-size:22px}

.nb-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;
  border:1px solid var(--linha);background:var(--paper);color:var(--ink);
  cursor:pointer;text-decoration:none;font-weight:700;min-height:32px;
  transition:all .2s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.nb-link:hover{background:var(--accent);transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 0 var(--linha)}}
.nb-link-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nb-link-dark .material-symbols-outlined{color:inherit}
@media(hover:hover){.nb-link-dark:hover{background:var(--accent);color:var(--ink)}}
.nb-link-sm{font-size:9px;padding:4px 9px;min-height:28px}

.bar-track{height:4px;background:var(--paper-4);overflow:hidden;width:100%}
.bar-fill{height:100%;background:var(--ink);transition:width .8s cubic-bezier(.16,1,.3,1)}
.bar-fill-accent{background:var(--accent)}
.hatch{background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(15,14,10,.05) 4px,rgba(15,14,10,.05) 4.5px)}
.skeleton{background:var(--paper-4);min-height:14px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.8}}

.toast{position:fixed;bottom:16px;right:16px;padding:12px 16px;background:var(--paper);
  border:1px solid var(--linha);border-bottom:4px solid var(--accent);z-index:10001;
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--ink);max-width:320px;
  box-shadow:4px 4px 0 0 rgba(15,14,10,.4);opacity:0;transform:translateY(8px);
  transition:all .2s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ── ESQUELETO DA PÁGINA ─────────────────────────────────────────────────── */
.ck-wrap{max-width:var(--larg);margin:0 auto;padding:0 16px}
@media(min-width:768px){.ck-wrap{padding:0 24px}}

.ck-card{border:1px solid var(--linha);background:var(--paper);min-width:0;width:100%;box-sizing:border-box}
.ck-card-dark{background:#0f0e0a!important;color:#f5f2e8!important;border:1px solid #0f0e0a!important}
.ck-card-dark h2,.ck-card-dark h3{color:#ffffff!important}
.ck-card-dark p{color:#d4cfc2!important}
.ck-card-dark .material-symbols-outlined{color:#e8d84a!important}
.ck-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 10px;min-height:34px;height:auto;background:var(--ink);border-bottom:1px solid var(--linha);overflow:visible;box-sizing:border-box;flex-wrap:wrap}
.ck-card-title{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);
  font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--paper);white-space:normal;overflow:visible;flex:1 1 auto;min-width:0;line-height:1.3}
.ck-card-title .material-symbols-outlined{color:var(--accent);font-size:14px;flex-shrink:0}
.ck-card-meta{font-family:var(--f-mono);font-size:7.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:rgba(245,242,232,.65);
  white-space:nowrap;flex-shrink:0}
@media(max-width:1150px){.ck-cockpit-trio-grid .ck-card-meta{display:none}}
.ck-card-body{padding:8px 10px}

/* ── ÁREA 1 · GESTÃO (hero) ──────────────────────────────────────────────── */
.ck-gestao{background:linear-gradient(180deg,var(--paper-3) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--linha);padding:18px 0 16px}
.ck-gestao-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
@media(min-width:980px){.ck-gestao-grid{grid-template-columns:1fr auto;gap:24px}}

.ck-kicker{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:8px;
  display:inline-flex;align-items:center;gap:8px}
.ck-titulo{font-family:var(--f-tit);font-weight:800;font-size:clamp(24px,2.6vw,34px);
  line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.ck-sub{font-family:var(--f-corpo);font-size:13.5px;color:var(--ink-2);line-height:1.45;
  margin:0 0 10px;max-width:62ch}
.ck-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
/* O PLAY que retoma o percurso, colado sob os números que dizem onde ele
   parou. Largura cheia do painel: é a ação principal da página, e ação
   principal não se esconde num link do tamanho do texto ao redor. */
.ck-play{display:flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:10px 14px}
.ck-play:hover{background:var(--ink-2);border-color:var(--ink-2)}
.ck-play .material-symbols-outlined{font-size:17px;color:var(--accent)}

/* foco: os concursos do aluno (preenchido por js/fluxo-agenda.js) */
/* Desceu do hero para baixo da agenda (24/08): contexto, não manchete. */
.ck-foco{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:0}
.ck-foco:empty{display:none}
.ck-foco-label{font-family:var(--f-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.ck-foco-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:5px 9px}
.ck-foco-chip .ck-foco-dot{width:5px;height:5px;background:var(--accent);display:inline-block}
.ck-foco-ger .material-symbols-outlined{font-size:13px}
/* o estado vazio fala em frase, não em chip: não há sigla para mostrar */
.ck-foco-vazio{font-family:var(--f-corpo);font-size:10.5px;color:var(--ink-3)}
/* virou <button> em 24/08 (abre a gaveta desta página em vez de ir ao perfil):
   o reset de aparência é o que o mantém idêntico ao que era como link */
.ck-foco-ger{display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;background:var(--paper-2);
  font-family:var(--f-mono);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);background:var(--paper);border:1px solid rgba(15,14,10,.5);
  padding:5px 9px;text-decoration:none}
/* o hover não preenche de acento: o botão é comando, e o amarelo aqui
   competiria com os chips que sinalizam o foco */
.ck-foco-ger:hover{background:var(--paper-3);border-color:var(--linha)}
.ck-foco-ger[aria-expanded="true"]{background:var(--ink);color:var(--paper)}

/* indicadores + painel de ritmo (a coluna direita da gestão) */
/* ⚠ O PAINEL ENCOLHEU (24/08). Ele ocupava clamp(360,34vw,460) de largura e
   esticava a altura (`flex:1`) para acompanhar a coluna de texto ao lado —
   três números num retângulo do tamanho de meia tela. Pedido dela: diminuir.
   O que mudou: largura menor, padding menor, número de 1.8rem para 1.35rem, e
   `flex:1` FORA — a altura passa a ser a do conteúdo, não a do vizinho. */
.ck-painel{display:flex;flex-direction:column;gap:8px;align-self:start}
@media(min-width:980px){.ck-painel{width:clamp(300px,26vw,360px)}}
/* Os KPIs vivem numa definição SÓ, mais abaixo (busque `.ck-kpis{`).
   Havia duas cópias destas 8 classes, a 660 linhas de distância; a de
   baixo vencia por ordem e a de cima era regra morta — o tipo de coisa
   que faz o próximo ajuste não pegar e ninguém entender por quê. */

/* ── OS CONCURSOS DO ALUNO: a GAVETA desta página ─────────────────────────
   Só a moldura mora aqui. A LISTA (.cp-*) é de css/concursos-picker.css, a
   folha gêmea do módulo js/concursos-picker.js — o perfil monta a mesma lista
   e não pode depender de uma folha chamada "fluxo-cockpit".
   Vestida com os tokens da folha: nada de hex solto. O acento SINALIZA (filete
   e ícone do item marcado) e nunca preenche área — a linha marcada ganha um
   fundo de papel, não de accent. */
/* .fx-concursos-barra e .fx-concursos-btn saíram em 24/08: eram a SEGUNDA
   porta para a mesma gaveta. A única agora é o "Gerenciar" do Foco atual
   (.ck-foco-ger), ao lado da agenda — onde a informação sobre concursos já
   vive. Duas portas obrigam a manter duas e sugerem que fazem coisas
   diferentes. */

.fx-concursos{border:1px solid var(--linha);background:var(--paper-2);
  padding:14px;margin:0 0 14px}
.fx-concursos[hidden]{display:none}
.fx-concursos-hint{font-family:var(--f-corpo);font-size:11.5px;color:var(--ink-2);
  line-height:1.5;margin:0 0 10px}
.fx-concursos-acoes{display:flex;gap:8px;margin:0 0 10px}
.fx-concursos-ghost{cursor:pointer;font-family:var(--f-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);background:transparent;
  border:1px solid var(--linha-2);padding:5px 10px}
.fx-concursos-ghost:hover{background:var(--paper-3);color:var(--ink)}

.fx-concursos-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--linha-2)}
.fx-concursos-conta{font-family:var(--f-mono);font-size:9px;font-weight:700;color:var(--ink-3)}
.fx-concursos-salvar{cursor:pointer;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:8px 16px}
.fx-concursos-salvar:disabled{opacity:.45;cursor:default}

/* ── ÁREA 2 · QUANDO (agenda + dia) ──────────────────────────────────────── */
.ck-quando{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap);
  align-items:start}
/* A coluna estreita tem a MESMA medida da lateral de baixo (380/440): assim a
   divisória vertical das duas linhas do painel cai no mesmo lugar do olho, em
   vez de 420 em cima e 440 embaixo. */
/* ⚠ COLUNAS INVERTIDAS (24/08): o DIA é a coluna larga, à esquerda; a agenda
   é a estreita, à direita. Era o contrário. O `:has` continua colapsando para
   uma coluna quando não há agenda — agora testando o LADO, que é quem some. */
.ck-quando-lado{display:flex;flex-direction:column;gap:10px;min-width:0}
@media(min-width:1100px){
  .ck-quando{grid-template-columns:1fr 380px}
  .ck-quando:has(.ck-cal[hidden]):not(:has(.ck-foco:not(:empty))){grid-template-columns:1fr}
}
@media(min-width:1400px){.ck-quando{grid-template-columns:1fr 440px}}

/* ── ÁREA 3 · ACESSOS (dock + progresso) ─────────────────────────────────── */
.ck-dock{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linha);
  margin-top:var(--gap);background:var(--paper)}
@media(min-width:768px){.ck-dock{grid-template-columns:repeat(5,1fr)}}
.fx-acesso{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 8px;min-height:64px;text-decoration:none;color:var(--ink);background:var(--paper);
  border-right:1px solid var(--linha-2);border-bottom:1px solid var(--linha-2);
  text-align:center;font-family:inherit;transition:background .2s}
button.fx-acesso{border-top:0;border-left:0;cursor:pointer;width:100%}
.fx-acesso:nth-child(3n){border-right:0}
@media(min-width:768px){
  .fx-acesso{border-bottom:0}
  .fx-acesso:nth-child(3n){border-right:1px solid var(--linha-2)}
  .fx-acesso:last-child{border-right:0}
}
.fx-acesso:hover{background:var(--paper-3)}
.fx-acesso.is-atual{background:var(--accent)}
button.fx-acesso[aria-expanded="true"]{background:var(--accent)}
.fx-acesso .material-symbols-outlined{font-size:19px}
.fx-acesso-nome{font-family:var(--f-tit);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1}
.fx-acesso-meta{font-family:var(--f-mono);font-size:8px;font-weight:700;color:var(--ink-3);line-height:1.3}

.fx-menu{border:1px solid var(--linha);border-top:0;background:var(--paper-2);
  display:grid;grid-template-columns:1fr}
/* ⚠ display:grid VENCE o atributo hidden — sem esta linha a gaveta nasce
   aberta e o dock vira uma parede de links. O botão alterna `hidden`, então
   quem tem de obedecer é o CSS. */
.fx-menu[hidden]{display:none}
@media(min-width:768px){.fx-menu{grid-template-columns:repeat(3,1fr)}}
.fx-menu-item{display:flex;align-items:flex-start;gap:8px;padding:11px 14px;text-decoration:none;
  color:var(--ink);border-right:1px solid var(--linha-2)}
.fx-menu-item:last-child{border-right:0}
.fx-menu-item:hover{background:var(--paper-3)}
.fx-menu-txt b{display:block;font-family:var(--f-tit);font-weight:700;font-size:12px}
.fx-menu-txt i{display:block;font-family:var(--f-corpo);font-size:10.5px;color:var(--ink-3);
  font-style:normal;line-height:1.35;margin-top:1px}

/* barra de progresso do percurso — vive colada ao dock, como no cockpit */
.ck-progresso{display:flex;align-items:center;gap:12px;border:1px solid var(--linha);
  border-top:0;background:var(--paper-2);padding:8px 14px}
.ck-progresso .bar-track{flex:1}
.ck-progresso span{font-family:var(--f-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);white-space:nowrap}

/* ── ÁREA 4+5 · PERCURSO + ACOMPANHAMENTO ────────────────────────────────── */
.ck-percurso{display:block;width:100%;max-width:100%;margin-top:var(--gap);padding-bottom:28px}
.ck-lateral{display:flex;flex-direction:column;gap:12px;min-width:0}
@media(min-width:1100px){.ck-lateral{position:sticky;top:56px;max-height:calc(100vh - 68px);overflow:auto}}
#fx-mapa-host:empty,#fx-agenda-host:empty{display:none}

/* aviso de login / filtro de concurso */
.ck-aviso{border:1px solid var(--linha);background:var(--paper-3);padding:14px;margin-top:var(--gap)}

/* ── A BARRA DO PERCURSO: expandir + CAMADAS na MESMA linha ───────────────
   #fx-filtros é inserido por js/fluxo-filtros.js como irmão anterior de
   #blocos-container, então a ordem no DOM é [barra][camadas][blocos]. Um grid
   de duas colunas põe os dois comandos lado a lado e deixa a lista ocupar a
   linha inteira abaixo — sem precisar editar o bundle minificado para que ele
   insira dentro da barra.
   Quando #fx-filtros não existe (anônimo, ou sem aulas), a barra fica sozinha
   na coluna 1 e nada quebra. */
/* ── BARRA SUPERIOR DE CONTROLE DO PERCURSO (EXPANDIR + CAMADAS NORMALIZADOS) ── */
.ck-percurso-col{display:flex;flex-direction:column;gap:10px}
.ck-percurso-col > #blocos-container{width:100%;min-width:0}

.fx-percurso-barra{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:6px 10px;background:var(--paper-2);
  border:1px solid var(--linha);min-height:42px}

.fx-percurso-btn{
  height:28px!important;min-height:28px!important;padding:0 10px!important;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-family:var(--f-mono);font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);background:var(--paper);
  border:1px solid var(--linha);transition:all .15s ease;border-radius:0}
.fx-percurso-btn:hover{background:var(--accent);color:var(--ink)}
.fx-percurso-btn .material-symbols-outlined{font-size:13px}

.fx-filtros-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fx-filtros-label{
  font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-right:2px}

.fx-filtro-btn{
  height:28px!important;min-height:28px!important;padding:0 9px!important;
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  font-family:var(--f-mono);font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--linha-2);transition:all .15s ease;border-radius:0}
.fx-filtro-btn:hover{background:var(--paper-3);color:var(--ink);border-color:var(--linha)}
.fx-filtro-btn[aria-pressed="true"]{
  background:var(--accent)!important;color:var(--ink)!important;
  border-color:var(--linha)!important;box-shadow:none}
.fx-filtro-btn[aria-pressed="false"]{
  opacity:.65;background:var(--paper)!important;color:var(--ink-3)!important}
.fx-filtro-btn .material-symbols-outlined{font-size:13px}

/* A LINHA DO TOPO (31/08): filtro à esquerda, progresso do percurso à direita.
   A CAIXA agora é o wrapper — o filtro nasce `hidden` quando não há concurso
   marcado, e o progresso não pode sumir com ele. Some inteira só quando as
   duas metades estão vazias. */
.fx-linha-topo{margin-top:var(--gap);padding:8px 14px;border:1px solid rgba(15,14,10,.4);
  background:#faf8f0;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap}
.fx-linha-topo:has(#filtro-concurso.hidden):has(#fx-pct-linha:empty){display:none}
#filtro-concurso{margin:0;padding:0;border:0;background:transparent;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;min-width:0}
#filtro-concurso.hidden{display:none}
#fx-pct-linha{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
#fx-pct-linha .fxh-hz-bar{width:70px;height:4px;background:var(--paper-4);display:block}
#fx-pct-linha .fxh-hz-bar i{display:block;height:100%;background:#16a34a}
#fx-pct-linha span{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
#fx-pct-linha b{color:var(--ink)}

/* ── BLOCOS DA SEQUÊNCIA (escritos por js/fluxo.js) ──────────────────────── */
.bloco-card{background:var(--paper);border:1px solid var(--linha);margin-top:-1px}
.bloco-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;background:var(--paper);cursor:pointer;width:100%;text-align:left;
  border:0;font-family:inherit;min-height:44px}
.bloco-head:hover{background:var(--paper-3)}
.bloco-head[aria-expanded="true"]{background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--linha)}
.bloco-head[aria-expanded="true"] .bloco-label,
.bloco-head[aria-expanded="true"] .bloco-meta,
.bloco-head[aria-expanded="true"] .bloco-title,
.bloco-head[aria-expanded="true"] .material-symbols-outlined{color:var(--paper)}
.bloco-letra{font-family:var(--f-num);font-style:italic;font-size:20px;line-height:1;
  width:26px;flex-shrink:0;text-align:center}
.bloco-title{font-family:var(--f-tit);font-weight:800;font-size:13.5px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:0}
.bloco-label{font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:2px}
.bloco-meta{font-family:var(--f-mono);font-size:8.5px;color:var(--ink-2);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ⚠ O QUADRO FIXO (24/08). Pedido dela: "quero que o fluxo seja um quadro fixo
   que admite a expansão de 1 bloco por vez. aí para caber, esse bloco tem
   rolagem. assim a gente diminui a sensação de empilhamento da página." */
.bloco-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1);
  background:var(--paper)}
.bloco-card.open .bloco-body{max-height:min(62vh,620px);overflow-y:auto;
  /* a barra de rolagem entra sem reflow lateral: sem isto, abrir um bloco
     encolhe o texto de todos os passos em ~15px e a lista "pisca" de largura */
  scrollbar-gutter:stable}
@media(max-width:767px){.bloco-card.open .bloco-body{max-height:70vh}}
/* o topo do bloco aberto fica visível ao rolar a lista por dentro — sem ele o
   aluno perde a referência de em qual bloco está */
.bloco-card.open .bloco-head{position:sticky;top:0;z-index:2}

/* ── O PASSO DO FLUXO_ (LINHA NOBRE, RESPONSIVA E ALINHADA) ────────────── */
.flow-list{border-top:1px solid var(--linha-2)}

.flow-step{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;
  column-gap:14px;padding:10px 16px;border-bottom:1px solid var(--linha-3);min-height:48px;background:var(--paper)}
.flow-step:last-child{border-bottom:0}
.flow-step::before{content:attr(data-step);width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;background:var(--paper);border:1px solid var(--linha);
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:var(--ink);flex-shrink:0}
.flow-step::after{display:none}
.flow-step.is-current{background:rgba(232,216,74,.12);border-left:4px solid var(--accent)}
.flow-step.is-current::before{background:var(--accent);box-shadow:1px 1px 0 0 var(--linha)}
.flow-step.is-done{background:var(--paper-2);opacity:.85}
.flow-step.is-done::before{background:var(--ink);color:var(--paper);content:'✓';font-size:11px}
.flow-step.is-done .flow-title{text-decoration:line-through;text-decoration-color:rgba(15,14,10,.35);color:var(--ink-2)}
.flow-step.is-done .flow-ponte{opacity:.65}

.flow-step-body{grid-column:2;display:flex;flex-direction:column;gap:3px;min-width:0}
.flow-title{margin:0;font-family:var(--f-tit);font-weight:700;font-size:13px;
  line-height:1.35;color:var(--ink);min-width:0;white-space:normal;word-break:break-word}
.flow-ponte{margin:0;font-family:var(--f-corpo);font-size:11px;
  color:var(--ink-3);line-height:1.4;font-style:italic;white-space:normal;word-break:break-word}

/* A natureza do passo como TAG na frente do nome (25/08/2026, pedido dela).
   Antes "Wiki" era um bloco próprio acima do título e engordava cada linha —
   53 passos só no bloco A. Inline, o card fica fino e a natureza continua
   legível, no mesmo molde curto que LEI SECA e JURISPRUDÊNCIA já usam.
   Neutra de propósito: o accent nesta linha é do selo ▶ videoaula, e dois
   amarelos disputando na mesma altura viram ruído (§3: accent sinaliza). */
.flow-type-tag{display:inline-block;margin-right:7px;vertical-align:middle;
  position:relative;top:-1px;white-space:nowrap;
  font-family:var(--f-mono);font-size:7.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:var(--paper-3);border:1px solid var(--linha-2);padding:1px 5px}
/* o risco de concluído é do TÍTULO, não do rótulo — riscar a tag faz a linha
   parecer corrompida em vez de cumprida */
.flow-step.is-done .flow-type-tag{text-decoration:none;opacity:.6}

/* Selo "▶ videoaula" elegante e integrado */
.selo-aula{display:inline-flex!important;align-items:center;gap:3px;
  font-family:var(--f-mono)!important;font-size:7.5px!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.06em!important;
  background:var(--accent)!important;color:var(--ink)!important;
  border:1px solid var(--linha)!important;padding:1px 6px!important;
  margin-top:2px!important;vertical-align:middle;
  text-decoration:none!important;border-radius:0!important;width:max-content}
.flow-step > .selo-aula{grid-column:2;justify-self:start;width:max-content;margin-top:2px!important}

/* ── BOTÕES REFORMULADOS DO FLUXO (UNIFORMES, DISCRETOS E PRECISOS) ──────── */
.flow-actions,
.reforco-actions{grid-column:3;display:flex;gap:6px;align-items:center;flex-shrink:0;justify-content:flex-end}

.flow-actions .nb-link,
.flow-step .nb-link,
.flow-reforco .nb-link,
.flow-reforco button,
.flow-reforco a,
.ck-percurso .fx-aula-card a,
.flow-checkpoint button,
.flow-checkpoint a{
  min-height:28px!important;height:28px!important;padding:0 10px!important;
  font-family:var(--f-mono)!important;font-size:8.5px!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.06em!important;
  border:1px solid var(--linha)!important;border-radius:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:4px!important;text-decoration:none!important;cursor:pointer!important;
  line-height:1!important;background:var(--paper)!important;color:var(--ink)!important;
  box-shadow:none!important;transform:none!important;transition:all .15s ease!important}

.flow-actions .nb-link:hover,
.flow-step .nb-link:hover,
.flow-reforco a:hover,
.nb-link-abrir:hover{background:var(--accent)!important;color:var(--ink)!important}

/* Botão CONCLUIR (Pendente) */
.flow-actions button[data-action="toggle"],
.flow-step button[data-action="toggle"],
.nb-link-concluir,
.flow-reforco button[data-flb-done],
.flow-reforco button[data-fjb-done]{
  background:var(--paper-2)!important;border-color:rgba(15,14,10,.45)!important;color:var(--ink)!important}
.flow-actions button[data-action="toggle"]:hover,
.nb-link-concluir:hover,
.flow-reforco button[data-flb-done]:hover,
.flow-reforco button[data-fjb-done]:hover{
  background:var(--paper-3)!important;border-color:var(--linha)!important;color:var(--ink)!important}

/* Botão CONCLUÍDO (BOTÃO VERDE DESTAQUE) */
.flow-actions .nb-link.nb-link-done,
.flow-step .nb-link.nb-link-done,
.flow-reforco .nb-link.nb-link-done,
.nb-link-done,
.flow-step.is-done button[data-action="toggle"]{
  background:#15803d!important;color:#ffffff!important;border-color:#0f0e0a!important}
.flow-actions .nb-link.nb-link-done:hover,
.flow-step .nb-link.nb-link-done:hover,
.nb-link-done:hover,
.flow-step.is-done button[data-action="toggle"]:hover{
  background:#166534!important;color:#ffffff!important;border-color:#0f0e0a!important}

.flow-actions .nb-link .material-symbols-outlined,
.flow-step .nb-link .material-symbols-outlined,
.flow-reforco .material-symbols-outlined{font-size:12px!important}

/* Tag 1x, 2x (Contagem de Leitura / Repetição) */
.tag-vezes{
  font-family:var(--f-mono);font-size:8px;font-weight:700;
  padding:2px 5px;border:1px solid var(--linha);
  background:var(--accent);color:var(--ink);
  letter-spacing:.04em;line-height:1;border-radius:0;
  display:inline-flex;align-items:center;margin-right:2px}

.flow-ref{display:none}
@media(min-width:1480px){
  .flow-ref{display:inline;font-family:var(--f-mono);font-size:8px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-left:6px}
}

@media(max-width:768px){
  .flow-step{grid-template-columns:24px 1fr;row-gap:6px}
  .flow-actions{grid-column:1/-1;justify-content:flex-start}
}

/* ── REFORÇO / JURISPRUDÊNCIA / LEI SECA NO PERCURSO ─────────────────────── */
.flow-reforco{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:14px;
  padding:10px 16px;border-bottom:1px solid var(--linha-3);min-height:48px;margin:0;
  background:rgba(232,216,74,.05);border-left:4px solid var(--accent);position:relative}
.flow-reforco .reforco-badge{width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;background:var(--accent);border:1px solid var(--linha);flex-shrink:0}
.flow-reforco .reforco-badge .material-symbols-outlined{font-size:13px;color:var(--ink)}
.flow-reforco .reforco-body{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:2px}
.flow-reforco .reforco-type{font-family:var(--f-mono);font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:block}
.flow-reforco .reforco-title{font-family:var(--f-tit);font-weight:700;font-size:13px;
  color:var(--ink);margin:0;line-height:1.35;white-space:normal;word-break:break-word}
.flow-reforco .reforco-desc{font-family:var(--f-corpo);font-size:11px;color:var(--ink-3);
  line-height:1.4;margin:0;font-style:italic;white-space:normal;word-break:break-word}
.flow-reforco.reforco-done{background:var(--paper-2);border-left-color:var(--linha-2);opacity:.85}
.flow-reforco.reforco-done .reforco-badge{background:var(--ink)}
.flow-reforco.reforco-done .reforco-badge .material-symbols-outlined{color:var(--paper)}
.flow-reforco.reforco-done .reforco-title{text-decoration:line-through;text-decoration-color:rgba(15,14,10,.35);color:var(--ink-2)}

/* ── FAIXA DA AULA (Camada Videoaulas) ───────────────────────────────────── */
.ck-percurso .fx-aula-card{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:14px;
  padding:10px 16px;border-bottom:1px solid var(--linha-3);min-height:48px;margin:0;
  background:var(--paper-2);border-left:4px solid var(--ink)}
.ck-percurso .fx-aula-card .fxa-num{font-family:var(--f-mono);font-size:10px;font-weight:700;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--accent);border:1px solid var(--ink);flex-shrink:0}
.ck-percurso .fx-aula-card .fxa-tit{font-family:var(--f-tit);font-size:13px;font-weight:700;line-height:1.35;margin:0;white-space:normal}
.ck-percurso .fx-aula-card .fxa-meta{font-family:var(--f-corpo);font-size:11px;color:var(--ink-3);margin:0;line-height:1.4}

/* ── CHECKPOINT E QUESTÕES ───────────────────────────────────────────────── */
.flow-checkpoint{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:14px;
  padding:10px 16px;border-bottom:1px solid var(--linha-3);min-height:48px;margin:0;
  background:rgba(232,216,74,.10);border-left:4px solid var(--accent);position:relative}
.checkpoint-icon{width:26px;height:26px;border:1px solid var(--linha);background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checkpoint-icon .material-symbols-outlined{font-size:13px;color:var(--ink)}
.checkpoint-body{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:2px}
.checkpoint-label{font-family:var(--f-mono);font-size:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2);display:block}
.checkpoint-title{font-family:var(--f-tit);font-size:13px;font-weight:700;line-height:1.35;margin:0;white-space:normal}
.checkpoint-badge{font-family:var(--f-mono);font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:0 10px;height:28px;min-height:28px;border:1px solid var(--linha);
  background:var(--paper);color:var(--ink);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.flow-checkpoint.is-active{cursor:pointer}
.flow-checkpoint.is-active:hover{background:rgba(232,216,74,.22)}
.flow-checkpoint.is-done{background:var(--paper-2);border-left-color:var(--linha-2);opacity:.85}
.flow-checkpoint.is-done .checkpoint-icon{background:var(--ink)}
.flow-checkpoint.is-done .checkpoint-icon .material-symbols-outlined{color:var(--paper)}
.flow-checkpoint.is-done .checkpoint-badge{background:#15803d;color:#ffffff;border-color:#0f0e0a}

/* ── TRIO INFERIOR · linhas compactas do MAPA_, CURADORIA_ e SIMULADOS ──────
   3 colunas: check | título (quebra) | CTA à direita. minmax(0,1fr) no meio
   faz o título caber inteiro sem o botão nowrap comê-lo — e sem a linha extra
   de CTA que inflava cada ficha (26/08). */
.ckm-row{display:grid;grid-template-columns:15px minmax(0,1fr) auto;column-gap:6px;row-gap:0;
  align-items:start;min-height:0;padding:3px 4px;
  border-bottom:1px dashed rgba(15,14,10,.14);background:transparent;
  text-decoration:none;color:var(--ink);transition:background .15s ease}
.ckm-row:hover{background:rgba(232,216,74,.18)}
.ckm-row:last-child{border-bottom:none}
.ckm-row.is-done{background:var(--paper-3);opacity:.65}
.ckm-row.is-done .ckm-titulo{text-decoration:line-through;color:var(--ink-3)}

.ckm-row-ck{grid-column:1;width:15px;height:15px;min-width:15px;border:1px solid rgba(15,14,10,.7);background:#fffdf6;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9px;font-weight:800;color:var(--ink);
  transition:all .15s ease;flex-shrink:0;border-radius:0;align-self:start;margin-top:2px}
.ckm-row-ck:hover{background:var(--accent)}
/* Alvo de toque (24/08/2026): a caixa VISUAL fica com 15px, que é o desenho;
   o ALVO cresce por pseudo-elemento de 44px centralizado — o mesmo molde que o
   audit:ux (bloco 6b) exige e que o HOJE_ já usa. 15px é menos da metade do
   mínimo: no celular o dedo erra e a pessoa acha que o card não responde. */
.ckm-row-ck{position:relative}
.ckm-row-ck::before{content:"";position:absolute;width:44px;height:44px;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.ckm-row-ck.feito, .ckm-row-ck[aria-pressed="true"]{background:#0f0e0a;color:#e8d84a}
/* O indicador de simulado concluído é ESPELHO, não interruptor (25/08/2026):
   deriva de ≥90% das questões respondidas e clicar nele não marca nada. Como
   não é clicável, não finge ser — sem cursor de mão, sem hover, e com o alvo
   de toque desligado para não roubar o dedo do "continuar →" ao lado.
   O checkbox das LEITURAS continua <button> e mantém o comportamento. */
span.ckm-row-ck{cursor:default;pointer-events:none}
span.ckm-row-ck:hover{background:#fffdf6}
span.ckm-row-ck.feito:hover{background:#0f0e0a}

/* ── Gaveta de CONCLUÍDAS do trio (31/08/2026) ──────────────────────────────
   O mesmo molde do "N tarefas concluídas neste dia" do HOJE_
   (#fx-hoje-host .hj-feitas-wrap), aqui SEM escopo de host: as Leituras e os
   Simulados vivem em #ck-metas-host e #fx-curadoria-view-host, e a peça é a
   mesma em toda ilha do cockpit — desenho novo por card é como o cockpit vira
   três telas que se parecem. Fica sempre por ÚLTIMO no corpo do card. */
.ckm-feitas{margin-top:4px;border:1px solid rgba(15,14,10,.15);
  background:var(--paper-2);border-radius:2px;padding:4px 8px}
.ckm-feitas summary{font-family:var(--f-mono);font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--ink-2);
  display:flex;align-items:center;gap:4px;user-select:none}
.ckm-feitas summary:hover{color:var(--ink)}
.ckm-feitas .ckm-row{background:transparent;opacity:.65;
  border-bottom:1px dashed rgba(15,14,10,.1);padding:2px 4px;min-height:26px}
.ckm-feitas .ckm-row:last-child{border-bottom:0}
.ckm-feitas .ckm-titulo{text-decoration:line-through}

/* Estado vazio dos cards do trio: o card FICA e diz o que e. Sumico silencioso
   nao distingue "ainda nao tem" de "quebrou" (25/08/2026). */
.ckm-vazio{font-family:var(--f-corpo);font-size:11px;line-height:1.5;
  color:var(--ink-3);padding:12px 10px}
.ckm-vazio a{color:var(--ink);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}

.ckm-body{grid-column:2;min-width:0;overflow:visible;line-height:1.15}
.ckm-tag{display:inline;align-self:auto;font-family:var(--f-mono);font-size:6.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:0 3px;background:rgba(232,216,74,.4);
  border:1px solid rgba(15,14,10,.2);margin:0 4px 0 0;color:#0f0e0a;white-space:nowrap;
  vertical-align:baseline}
.ckm-titulo{font-family:var(--f-tit);font-weight:700;font-size:11px;line-height:1.15;
  white-space:normal;overflow:visible;color:var(--ink);overflow-wrap:anywhere;word-break:break-word;
  display:inline}
.ckm-meta{display:block;font-family:var(--f-mono);font-size:7px;font-weight:700;color:var(--ink-3);
  white-space:normal;overflow:visible;margin-top:0;word-break:break-word;line-height:1.2}

.ckm-divida-barra{padding:4px 8px;background:var(--paper-2);border-bottom:1px solid var(--linha-2);font-family:var(--f-mono);font-size:8px}
.ckm-divida-info{display:flex;justify-content:space-between;align-items:center;color:var(--ink-2);margin-bottom:2px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ckm-divida-info b{color:var(--ink);font-weight:800}
.ckm-divida-track{height:3px;background:var(--paper-4);overflow:hidden;position:relative}
.ckm-divida-track i{display:block;height:100%;background:#22c55e;transition:width .4s ease}

.ckm-cta{grid-column:3;grid-row:1;justify-self:end;align-self:start;font-family:var(--f-mono);font-size:7px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;color:#fffdf6;background:var(--ink);text-decoration:none;
  padding:0 6px;border:1px solid var(--ink);border-radius:0;display:inline-flex;align-items:center;
  justify-content:center;height:18px;min-height:18px;flex-shrink:0;transition:all .15s ease}
.ckm-cta:hover{background:var(--accent);color:var(--ink);border-color:var(--ink)}

/* tiles do acumulado por área */
.cka-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cka-tiles-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;width:100%}
.cka-tile{border:1px solid rgba(15,14,10,.35);background:var(--paper-2);padding:8px 10px;min-width:0}
.cka-tile-rot{display:block;font-family:var(--f-mono);font-size:8px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cka-tile-num{display:block;font-family:var(--f-num);font-style:italic;font-size:19px;
  line-height:1.1;color:var(--ink);margin-top:2px}
.cka-tile-num i{font-family:var(--f-mono);font-style:normal;font-size:9.5px;color:var(--ink-3);font-weight:700}
.cka-tile-bar{display:block;height:3px;background:var(--paper-4);margin-top:5px}
.cka-tile-bar i{display:block;height:100%}

/* ── LATERAL/COLUNA · agenda dos concursos ───────────────────────────────── */
.cka-chips{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;margin:0 0 10px;scrollbar-width:thin}
.cka-chip{font-family:var(--f-mono);font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);background:var(--paper);border:1px solid rgba(15,14,10,.35);
  padding:4px 8px;min-height:26px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s ease;border-radius:0}
.cka-chip:hover{border-color:var(--ink);background:var(--paper-2)}
.cka-chip-on{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.cka-chip-n{opacity:.85;margin-left:2px}
.cka-lista{max-height:360px;overflow-y:auto;padding-right:2px}
.cka-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:8px 6px;border-bottom:1px dashed var(--linha-2);text-decoration:none;
  color:var(--ink);min-height:46px;transition:background .15s ease}
.cka-row:last-of-type{border-bottom:0}
@media(hover:hover){a.cka-row:hover{background:rgba(232,216,74,.14)}}

.cka-data{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);border:1px solid rgba(15,14,10,.85);
  padding:4px 2px;min-width:48px;width:50px;text-align:center;border-radius:0;
  box-shadow:1px 1px 0 0 rgba(15,14,10,.15)}
.cka-data b{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--accent);
  line-height:1.05;display:block;white-space:nowrap;letter-spacing:-0.02em}
.cka-data.cka-data-range b{font-size:10px;letter-spacing:-0.03em}
.cka-data-mes{font-family:var(--f-mono);font-size:7.5px;font-weight:700;color:var(--paper);
  text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:2px}

.cka-body{min-width:0}
.cka-sigla{font-family:var(--f-mono);font-size:8px;font-weight:700;background:var(--accent);
  color:var(--ink);padding:1.5px 5px;border:1px solid rgba(15,14,10,.6);letter-spacing:.06em;
  display:inline-block;vertical-align:middle;margin-right:4px}
.cka-titulo{display:block;font-family:var(--f-tit);font-weight:700;font-size:12px;
  line-height:1.3;color:var(--ink)}
.cka-desc{display:block;font-family:var(--f-corpo);font-size:10.5px;color:var(--ink-3);
  line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cka-tags{display:flex;align-items:center;gap:4px;flex-shrink:0}
.cka-star{color:#b89a00;font-size:12px}
.cka-vazio{font-family:var(--f-corpo);font-size:11.5px;color:var(--ink-3);margin:8px 0}
.cka-vazio a{color:var(--ink);font-weight:700}
.cka-mais{display:block;width:100%;margin-top:8px;font-family:var(--f-mono);font-size:8.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  background:var(--paper-3);border:1px solid rgba(15,14,10,.5);padding:6px;min-height:28px;cursor:pointer}
.cka-mais:hover{background:var(--accent)}
.cka-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:10px 0 0;border-top:1px solid var(--linha-2);padding-top:8px}
.cka-foot a{color:var(--ink-2)}
.cka-btn-modal{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:8.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;background:var(--paper-2);
  border:1px solid rgba(15,14,10,.5);color:var(--ink);cursor:pointer;border-radius:0;text-decoration:none}
.cka-btn-modal:hover{background:var(--accent);border-color:var(--ink)}

/* ═══ O CARD DO DIA (MOTOR HOJE_) ═══ */
#fx-hoje-host .fxh-abrir{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  cursor:pointer;background:transparent;border:0;padding:0;font-family:inherit;
  color:inherit;text-align:left}
#fx-hoje-host .fxh-chevron{font-size:18px;margin-left:auto;transition:transform .25s var(--ease)}
#fx-hoje-host .fxh-card.aberto .fxh-chevron{transform:rotate(180deg)}
#fx-hoje-host .fxh-abrir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══ O CARD DO DIA — vestido por ESCOPO, nunca em css/hoje.css ═══
   O HOJE_ é montado por js/fluxo-hoje.js com as classes de css/hoje.css, folha
   GÊMEA de aluno/hoje.html. As regras abaixo valem SÓ dentro de #fx-hoje-host:
   dão ao card a moldura do cockpit (cabeçalho ink, igual ao vizinho) e põem as
   fichas do dia na mesma régua de linha do passo (~52px em vez de ~98). Editar
   hoje.css para isto encolheria a página irmã junto. */
#fx-hoje-host .fxh-card{border:1px solid var(--linha);background:var(--paper);margin:0}
#fx-hoje-host .fxh-top{height:42px;padding:0 14px;background:var(--ink);
  border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;gap:10px}
#fx-hoje-host .fxh-top-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
#fx-hoje-host .fxh-marca{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  background:var(--accent);color:var(--ink);padding:3px 7px;border:1px solid var(--accent);white-space:nowrap}
#fx-hoje-host .fxh-marca-alt{background:var(--paper-3);color:var(--ink);border-color:var(--paper-4)}
#fx-hoje-host .fxh-sub{font-family:var(--f-mono);font-size:9.5px;color:var(--paper);letter-spacing:.04em;
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Botões do Topo (Cronograma e Como Funciona) com alto contraste */
#fx-hoje-host .fxh-top-acoes{display:flex;align-items:center;gap:6px}
#fx-hoje-host .fxh-top-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--paper)!important;
  color:var(--ink)!important;
  border:1px solid var(--linha)!important;
  font-family:var(--f-mono);font-size:8.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;min-height:26px;height:26px;
  cursor:pointer;border-radius:0;transition:all .15s ease}
#fx-hoje-host .fxh-top-btn .material-symbols-outlined{color:var(--ink)!important;font-size:13px}
#fx-hoje-host .fxh-top-btn:hover{
  background:var(--accent)!important;color:var(--ink)!important;border-color:var(--linha)!important}
#fx-hoje-host .fxh-top-btn:hover .material-symbols-outlined{color:var(--ink)!important}
#fx-hoje-host .fxh-top-btn.is-active{
  background:var(--accent)!important;color:var(--ink)!important;border-color:var(--linha)!important}
#fx-hoje-host .fxh-top-btn.is-active .material-symbols-outlined{color:var(--ink)!important}

#fx-hoje-host .fxh-nav{display:flex;align-items:center;gap:5px;flex-shrink:0}
#fx-hoje-host .fxh-nav-btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--linha)!important;
  padding:3px 6px;min-height:26px;min-width:26px;cursor:pointer;transition:all .15s ease}
#fx-hoje-host .fxh-nav-btn .material-symbols-outlined{color:var(--ink)!important;font-size:14px}
#fx-hoje-host .fxh-nav-btn:hover{background:var(--accent)!important;border-color:var(--linha)!important}
#fx-hoje-host .fxh-nav-btn:hover .material-symbols-outlined{color:var(--ink)!important}

#fx-hoje-host .fxh-nav-hoje{display:inline-flex;align-items:center;gap:4px;
  background:var(--accent)!important;color:var(--ink)!important;border:1px solid var(--linha)!important;
  font-family:var(--f-mono);font-size:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 8px;min-height:26px;cursor:pointer;transition:all .15s ease}
#fx-hoje-host .fxh-nav-hoje:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--linha)!important}
/* Em hoje o botão é ESTADO, não ação: fica visível (a barra não muda de
   largura) mas não convida ao clique nem responde ao hover. */
#fx-hoje-host .fxh-nav-hoje[aria-current="date"]{background:var(--paper)!important;
  color:var(--ink-3)!important;border-color:var(--linha-2)!important;cursor:default;pointer-events:none}
#fx-hoje-host .fxh-nav-hoje[aria-current="date"]:hover{background:var(--paper)!important;
  color:var(--ink-3)!important;border-color:var(--linha-2)!important}

/* ── MEDIDOR & GRID DUPLO (METAS À ESQUERDA vs DADOS À DIREITA) ── */
.fxh-grid-duplo{display:grid;grid-template-columns:1fr 350px;gap:18px;align-items:start;padding:18px 20px;min-height:480px}
@media(max-width:960px){.fxh-grid-duplo{grid-template-columns:1fr}}
.fxh-col-metas{min-width:0;display:flex;flex-direction:column;gap:10px;min-height:440px}
.fxh-col-dados{display:flex;flex-direction:column;gap:12px}
.fxh-dados-card{border:1px solid var(--linha);background:#fffdf6;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
/* O card de ESTADO (meta batida + resposta do último clique) mora onde ficava
   o painel de concursos, que saiu por duplicar o FOCO ATUAL do topo. */
.fxh-dados-card--estado{background:var(--accent);border-color:var(--linha);padding:12px 14px}
.fxh-dados-card--estado > *:first-child{margin-top:0}
.fxh-dados-card--estado > *:last-child{margin-bottom:0}
#fx-hoje-host .fxh-col-dados .fxh-aviso{margin:0;font-family:var(--f-mono);font-size:10px;
  line-height:1.5;color:var(--ink-2);min-height:0}
#fx-hoje-host .fxh-col-dados .fxh-aviso:empty{display:none}
.fxh-dados-hdr{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px dashed rgba(15,14,10,.18);padding-bottom:6px}
.fxh-dados-hdr .material-symbols-outlined{font-size:16px;color:var(--ink)}
.fxh-prog-box{display:flex;flex-direction:column;gap:8px}
.fxh-termino-txt{font-family:var(--f-mono);font-size:10px;color:var(--ink-2);margin:0;line-height:1.4}

.hj-medidor-duplo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 16px}
@media(max-width:768px){.hj-medidor-duplo{grid-template-columns:1fr}}
.hj-box-metas,.hj-box-funcionalidades{border:1px solid var(--linha);background:#fffdf6;padding:14px 16px;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
.hj-box-hdr{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px dashed rgba(15,14,10,.18);padding-bottom:6px;margin-bottom:2px}
.hj-box-hdr .material-symbols-outlined{font-size:16px;color:var(--ink)}
.hj-stats-tit{font-family:var(--f-tit);font-size:13px;font-weight:700;color:var(--ink);margin:0;line-height:1.35}
.hj-checklist-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hj-ck-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:9px;font-weight:700;background:var(--paper-2);border:1px solid rgba(15,14,10,.15);color:var(--ink);padding:3px 8px}
.hj-ck-tag .material-symbols-outlined{font-size:13px;color:#15803d}

/* (31/08) as fichas do dia usam o molde .ckm-row global — os overrides de
   .hj-* que viviam aqui saíram; ver o bloco ÚNICO do molde mais abaixo. */

/* ── RESUMO DE TAREFAS CONCLUÍDAS (APAGADINHO & RETRÁTIL) ── */
#fx-hoje-host .hj-feitas-wrap{margin-top:14px;border:1px dashed rgba(15,14,10,0.22);background:var(--paper-2);border-radius:4px;padding:8px 12px;transition:all .2s ease}
#fx-hoje-host .hj-feitas-wrap summary{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;gap:6px;user-select:none}
#fx-hoje-host .hj-feitas-wrap summary:hover{color:var(--ink)}
#fx-hoje-host .hj-feitas-wrap .hj-ficha{opacity:.72;background:var(--paper-3);border-color:rgba(15,14,10,.18);transition:opacity .15s ease}
#fx-hoje-host .hj-feitas-wrap .hj-ficha:hover{opacity:.95}
#fx-hoje-host .hj-feitas-wrap .hj-tit{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-2)}

#fx-hoje-host .hj-adiantar-box{margin-top:12px;padding:12px 14px;background:#fffdf6;border:1px solid rgba(15,14,10,.85);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
#fx-hoje-host .hj-adiantar-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:7px 14px;background:var(--ink);color:#e8d84a;border:1px solid var(--ink);cursor:pointer;transition:all .15s ease}
#fx-hoje-host .hj-adiantar-btn:hover{background:#e8d84a;color:var(--ink);border-color:var(--ink)}

@media(max-width:640px){
  #fx-hoje-host .hj-ficha{grid-template-columns:auto 1fr;row-gap:6px}
  #fx-hoje-host .hj-dir{grid-column:1/-1;justify-content:flex-end}
}

/* ── RODAPÉ ──────────────────────────────────────────────────────────────── */
.ck-rodape{border-top:1px dashed rgba(15,14,10,.25);background:var(--paper-2);padding:14px 16px;margin-top:28px;width:100%;box-sizing:border-box}
.ck-rodape-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.powered-by{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.powered-by strong{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   COCKPIT SINGLE-PAGE DASHBOARD SHELL (ESCALA NOBRE & ALTA USABILIDADE)
   ═══════════════════════════════════════════════════════════════════════════ */
.ck-shell{display:flex;height:calc(100dvh - 52px);width:100%;overflow:hidden;background:var(--paper)}

/* Oculta faixa de subnav horizontal duplicada na central */
#aluno-nav{display:none!important}

/* Sidebar do Cockpit */
.ck-sidebar{width:280px;min-width:280px;height:100%;max-height:100%;background:var(--paper-3);
  border-right:1px solid var(--linha);display:flex;flex-direction:column;flex-shrink:0;z-index:20;overflow:hidden}
.ck-sidebar-brand{padding:14px 16px;border-bottom:1px solid var(--linha);background:var(--paper);flex-shrink:0}
.ck-sidebar-brand .ck-titulo{font-size:20px;margin:0 0 4px}
.ck-sidebar-brand .ck-sub{font-size:11px;line-height:1.4;margin:0}
.ck-play{display:flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:8px 12px;min-height:34px}
.ck-play:hover{background:var(--ink-2);border-color:var(--ink-2)}
.ck-play .material-symbols-outlined{font-size:16px;color:var(--accent)}

.ck-nav{padding:10px;flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:0}
.ck-nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid transparent;
  border-left:3px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-align:left;width:100%;min-height:34px;transition:all .15s ease;flex-shrink:0}
.ck-nav-item:hover{background:var(--paper);color:var(--ink);border-color:var(--linha-2);border-left-color:var(--ink)}
.ck-nav-item.active{background:var(--ink);color:var(--paper);border-color:var(--ink);border-left-color:var(--accent)}
.ck-nav-item.active .material-symbols-outlined{color:var(--accent)}
.ck-nav-item .material-symbols-outlined{font-size:18px}

.ck-sidebar-dock{padding:10px;border-top:1px solid var(--linha);background:var(--paper-2);flex-shrink:0}
.ck-sidebar-dock .ck-dock{margin-top:0;grid-template-columns:repeat(5,1fr);border:1px solid var(--linha)}
.ck-sidebar-dock .fx-acesso{min-height:44px;padding:4px 2px}
.ck-sidebar-dock .fx-acesso-nome{font-size:8.5px}
.ck-sidebar-dock .fx-acesso .material-symbols-outlined{font-size:16px}
.ck-sidebar-dock .fx-acesso-meta{display:none}

.ck-sidebar-dock .fx-menu{
  display:flex!important;flex-direction:column!important;
  border:1px solid var(--linha);border-top:0;background:var(--paper);
  width:100%;box-sizing:border-box;margin-top:-1px}
.ck-sidebar-dock .fx-menu[hidden]{display:none!important}
.ck-sidebar-dock .fx-menu-item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-right:0;border-bottom:1px solid var(--linha-2);
  text-decoration:none;color:var(--ink);width:100%;box-sizing:border-box}
.ck-sidebar-dock .fx-menu-item:last-child{border-bottom:0}
.ck-sidebar-dock .fx-menu-item:hover{background:var(--accent);color:var(--ink)}
.ck-sidebar-dock .fx-menu-item .material-symbols-outlined{font-size:16px;flex-shrink:0;color:var(--ink)}
.ck-sidebar-dock .fx-menu-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.ck-sidebar-dock .fx-menu-txt b{font-family:var(--f-tit);font-weight:700;font-size:10.5px;line-height:1.2;color:var(--ink)}
.ck-sidebar-dock .fx-menu-txt i{font-family:var(--f-corpo);font-size:9px;color:var(--ink-3);font-style:normal;line-height:1.2;margin-top:1px}

.ck-sidebar-foot{padding:8px 10px;border-top:1px solid var(--linha);background:var(--paper-3);flex-shrink:0}
.ck-sidebar-foot .ck-progresso{border:1px solid var(--linha);padding:6px 10px}

/* Palco Central do Dashboard */
.ck-main{flex:1;height:100%;overflow-y:auto;overflow-x:hidden;background:var(--paper);
  padding:18px 24px;display:flex;flex-direction:column;scroll-behavior:smooth}
@media(min-width:1280px){.ck-main{padding:20px 32px}}

.ck-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--linha-2);padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap;width:100%;box-sizing:border-box}

/* ═══ OS TRÊS KPIs (25/08) ═══
   Eles são `flex-1` numa topbar que divide a linha com a faixa de FOCO ATUAL, e
   a página ainda tem uma barra lateral de até 360px. Com sete siglas de concurso
   na faixa, o `flex:1 1 0%` deixava os cards encolherem abaixo do próprio
   conteúdo: medido, 161px cada, com o nome do passo truncado em "P…".

   Meu primeiro conserto usou @media, e estava errado pelo motivo mais fácil de
   não ver: quem esmaga é o CONTÊINER, não o viewport. Numa janela de 1280 com a
   lateral aberta sobram ~500px para os KPIs — apertado — e nenhuma media query
   de 920px dispara, porque o viewport continua largo. flex-wrap resolve sem
   query nenhuma: os cards refluem pela largura QUE ELES TÊM.
     ≥ ~460px → 3 lado a lado · ~310-460px → 2+1 · abaixo → empilhados.

   ⚠ É FLEX, não grid `auto-fit` — tentei grid primeiro e o print acusou o
   defeito: com 3 cards em 2 colunas, `auto-fit` deixa a QUARTA CÉLULA VAZIA, e
   o fundo do grid (a cor da divisória) aparecia como um retângulo cinza sem
   dono. No flex a última fileira ESTICA e preenche.

   As divisórias vêm do `gap:1px` sobre fundo escuro (cada card pinta o próprio
   fundo), e não de `border-left`: com fileiras que quebram, a borda lateral
   fica pendurada no início de cada uma. */
.ck-kpis{display:flex;flex-wrap:wrap;gap:1px;
  min-width:min(100%,300px);max-width:100%;box-sizing:border-box;
  border:1px solid var(--linha);background:var(--linha-2)}
.ck-kpi{flex:1 1 150px;min-width:0;padding:6px 12px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;background:var(--paper-2)}
.ck-kpi-rot{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;line-height:1.2;margin-bottom:2px;overflow-wrap:anywhere}
.ck-kpi-num{font-family:var(--f-num);font-style:italic;font-size:1.25rem;line-height:1;color:var(--ink)}
.ck-kpi-den{font-family:var(--f-mono);font-size:10px;color:var(--ink-3);font-weight:700}
/* Reticências numa letra ("P…") não é resumo, é apagamento: o rótulo continua
   ocupando espaço e não informa mais nada. Duas linhas para o nome, uma para o
   subtítulo, e o clamp segura a altura do card. */
.ck-kpi-txt{font-family:var(--f-tit);font-weight:700;font-size:11.5px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.ck-kpi-sub{font-family:var(--f-mono);font-size:8px;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-top:2px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}

.fx-view-panel{display:none;width:100%;animation:fadeIn .2s ease-out}
.fx-view-panel.active{display:block}

/* Layout Cockpit: Card Comprido 100% no topo + Trio de 3 colunas horizontais */
.ck-cockpit-stack{display:flex;flex-direction:column;gap:14px;width:100%}
.ck-cockpit-trio-grid{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
#ck-metas-host{display:contents}
@media(min-width:960px){
  .ck-cockpit-trio-grid{grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
}
/* Item de grid tem min-width:auto por padrão: o min-content das fichas do
   MAPA_ (chips e botões em nowrap) estourava o 1fr da coluna 1 e esmagava
   LEITURAS e SIMULADOS — 24/08. min-width:0 devolve ao grid o direito de
   encolher; o texto das fichas QUEBRA (não vira reticências) para caber.
   #ck-metas-host é display:contents: quem vira item de grid são os FILHOS. */
.ck-cockpit-trio-grid>*,#ck-metas-host>*{min-width:0}

/* ═══ HOJE_ COCKPIT CARD (FIXO, MINIMALISTA, SCROLL INTERNO & ACORDEÃO) ═══ */
#fx-hoje-host .fxh-card {
  border: 1px solid var(--linha);
  background: var(--paper);
  box-shadow: none;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
#fx-hoje-host .fxh-top {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--linha-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#fx-hoje-host .fxh-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
#fx-hoje-host .fxh-marca {
  font-family: var(--f-tit);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
#fx-hoje-host .fxh-sub {
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fx-hoje-host .fxh-top-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#fx-hoje-host .fxh-top-btn {
  height: 22px;
  min-height: 22px;
  padding: 0 7px;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--linha);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#fx-hoje-host .fxh-top-btn:hover {
  background: var(--accent);
  color: var(--ink);
}
#fx-hoje-host .fxh-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#fx-hoje-host .fxh-nav-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}
#fx-hoje-host .fxh-nav-btn:hover {
  background: var(--accent);
}
#fx-hoje-host .fxh-faixa-horizonte {
  padding: 3px 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--linha-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 8px;
  color: var(--ink-3);
  font-weight: 700;
}
#fx-hoje-host .fxh-hz-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
#fx-hoje-host .fxh-hz-prog {
  display: flex;
  align-items: center;
  gap: 6px;
}
#fx-hoje-host .fxh-hz-bar {
  width: 50px;
  height: 3px;
  background: var(--paper-4);
}
#fx-hoje-host .fxh-hz-bar i {
  display: block;
  height: 100%;
  background: #16a34a;
}
#fx-hoje-host .fxh-corpo {
  max-height:none;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#fx-hoje-host .hj-intro {
  display: none;
}
#fx-hoje-host .hj-medidor {
  padding: 2px 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(15,14,10,0.12);
}
#fx-hoje-host .hj-barra {
  height: 4px;
  margin-bottom: 3px;
}
#fx-hoje-host .hj-stats {
  font-size: 8.5px;
  margin: 2px 0 !important;
}
#fx-hoje-host .hj-so {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
#fx-hoje-host .hj-so span {
  font-size: 8px;
}
#fx-hoje-host .hj-so button {
  height: 18px;
  font-size: 7.5px;
  padding: 0 5px;
}

/* Acordeão de Concluídas */
#fx-hoje-host .hj-feitas-wrap {
  margin-top: 4px;
  border: 1px solid rgba(15,14,10,0.15);
  background: var(--paper-2);
  border-radius: 2px;
  padding: 4px 8px;
}
#fx-hoje-host .hj-feitas-wrap summary {
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
#fx-hoje-host .hj-feitas-wrap .hj-ficha.feito {
  background: transparent;
  opacity: 0.65;
  border-bottom: 1px dashed rgba(15,14,10,0.1);
  padding: 2px 4px;
  min-height: 26px;
}
#fx-hoje-host .hj-feitas-wrap .hj-ficha.feito .hj-tit {
  text-decoration: line-through;
}

/* Destaque para o botão de Atualizar Metas do HOJE_ */
#fx-hoje-host #fxh-btn-sync{background:#e8d84a!important;color:#0f0e0a!important;border:1px solid #0f0e0a!important;font-weight:800!important;box-shadow:1px 1px 0 #0f0e0a}
#fx-hoje-host #fxh-btn-sync:hover{background:#fffdf6!important;color:#0f0e0a!important;box-shadow:2px 2px 0 #0f0e0a}
#fx-hoje-host #fxh-btn-sync .material-symbols-outlined{color:#0f0e0a!important;font-weight:800}

/* Mobile Responsive */
@media(max-width:860px){
  .ck-shell{flex-direction:column;height:calc(100dvh - 52px)}
  .ck-sidebar{width:100%;min-width:100%;height:auto;border-right:none;border-bottom:1px solid var(--linha)}
  .ck-sidebar-brand{display:none}
  .ck-sidebar-dock{display:none}
  .ck-sidebar-foot{display:none}
  .ck-nav{flex-direction:row;overflow-x:auto;padding:6px;gap:4px}
  .ck-nav-item{padding:6px 10px;font-size:9.5px;white-space:nowrap;width:auto;border-left:none;border-bottom:2px solid transparent}
  .ck-nav-item.active{border-left-color:transparent;border-bottom-color:var(--accent)}
  .ck-main{padding:12px}
  .ck-topbar{flex-direction:column;align-items:stretch}
}

/* ═══ MODAL DA AGENDA DE CONCURSOS ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,14,10,.65);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
@media(min-width:640px){.modal-overlay{align-items:center}}
.modal-overlay.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity .3s ease}
.modal-box{position:relative;background:#fffdf6;width:100%;max-height:90vh;border-top:1px solid rgba(15,14,10,.85);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media(min-width:640px){.modal-box{border:1px solid rgba(15,14,10,.85);transform:translateY(20px) scale(.97);border-radius:0}}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-handle{width:40px;height:4px;background:rgba(15,14,10,.2);border-radius:2px;margin:8px auto;display:block}
@media(min-width:640px){.modal-handle{display:none}}
.modal-close-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(15,14,10,.85);background:#fffdf6;color:#0f0e0a;width:32px;height:32px}
.modal-close-btn:hover{background:#0f0e0a;color:#fffdf6}
.agenda-modal-box{max-width:840px;width:95%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:#f5f2e8;border:1px solid rgba(15,14,10,.85)}
.agenda-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px 32px}
@media(min-width:640px){.agenda-modal-body{padding:24px 28px 36px}}
.agenda-chips-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;margin-bottom:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid rgba(15,14,10,.12)}
.agenda-chips-bar::-webkit-scrollbar{display:none}
.agenda-chip{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border:1px solid rgba(15,14,10,.85);background:#fffdf6;color:#0f0e0a;cursor:pointer;white-space:nowrap;transition:all .15s ease;border-radius:0}
.agenda-chip:hover{background:#ede9d8}
.agenda-chip.active{background:#0f0e0a;color:#e8d84a;border-color:#0f0e0a}
.agenda-mes-group{margin-bottom:24px}
.agenda-mes-title{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#686357;padding-bottom:8px;border-bottom:1px solid rgba(15,14,10,.15);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.agenda-mes-count{font-size:9.5px;opacity:.8}
.agenda-card{display:flex;gap:14px;padding:14px 16px;border:1px solid rgba(15,14,10,.85);background:#fffdf6;margin-bottom:10px;transition:all .18s ease}
@media(min-width:640px){.agenda-card{gap:18px;padding:16px 18px}}
.agenda-card:hover{transform:translateY(-1px);box-shadow:2px 2px 0 0 rgba(15,14,10,.85);background:#f5f2e8}
.agenda-card-datebox{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;padding:6px 4px;border:1px solid rgba(15,14,10,.85);background:#0f0e0a;color:#f5f2e8;flex-shrink:0;text-align:center;height:max-content}
@media(min-width:640px){.agenda-card-datebox{min-width:62px;padding:8px 4px}}
.agenda-card-day{font-family:'Space Mono',monospace;font-size:20px;font-weight:700;line-height:1;color:#e8d84a}
@media(min-width:640px){.agenda-card-day{font-size:22px}}
.agenda-card-dow{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a39c8b;margin-top:3px}
.agenda-card-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.agenda-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.agenda-card-sigla{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid rgba(15,14,10,.85);background:#e8d84a;color:#0f0e0a;display:inline-block}
.agenda-card-title{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:#0f0e0a;line-height:1.3;margin-top:4px}
.agenda-card-desc{font-family:'Inter',sans-serif;font-size:12px;line-height:1.45;color:#5c574b;margin-top:6px}
.agenda-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1px dashed rgba(15,14,10,.12);flex-wrap:wrap}
.agenda-hub-link{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:1px solid rgba(15,14,10,.85);background:#f5f2e8;color:#0f0e0a;text-decoration:none;transition:all .15s ease}
.agenda-hub-link:hover{background:#0f0e0a;color:#e8d84a}
.agenda-mes-past{opacity:.65}
.agenda-mes-past .agenda-mes-title{color:#a39c8b}
.agenda-card-past{border-color:rgba(15,14,10,.25);background:#faf8f0}
.agenda-card-past:hover{transform:none;box-shadow:none}
.agenda-card-datebox.past{background:#5c574b;border-color:rgba(15,14,10,.25)}
.agenda-card-datebox.past .agenda-card-day{color:#d4cfc2}
.agenda-card-sigla.past{background:#d4cfc2;border-color:rgba(15,14,10,.25);color:#5c574b}
.tag-past{background:#d4cfc2;color:#5c574b;border-color:#d4cfc2}

/* Orientação de simulado na aba MAPA_ — não é tarefa, não tem check */
.ckm-orient{margin:8px 12px 12px;padding:12px 14px;border:1px solid rgba(15,14,10,.85);
  background:#fffdf6;border-left:4px solid #e8d84a}
.ckm-orient-tit{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
  color:#0f0e0a;margin:0 0 6px;line-height:1.3}
.ckm-orient-txt{font-family:'Inter',sans-serif;font-size:12px;line-height:1.45;
  color:#5c574b;margin:0 0 10px}
#fx-mapa-view-host .hj-ficha-vazia,
#fx-mapa-host .hj-ficha-vazia{opacity:.7}

/* (31/08) a fila do MAPA_ também virou .ckm-row — molde único das Leituras
   Recomendadas (pedido dela, com print: checkbox | tag+título na linha | cta).
   Os overrides antigos de .hj-* saíram; o que sobra aqui é só o que difere. */
#fx-mapa-view-host .ckm-row .ckm-body,
#fx-mapa-host .ckm-row .ckm-body{text-decoration:none;color:inherit;cursor:pointer}
#fx-mapa-view-host a.ckm-body:hover .ckm-titulo,
#fx-mapa-host a.ckm-body:hover .ckm-titulo{text-decoration:underline;text-underline-offset:2px}

.ck-cockpit-trio-grid .ck-card-head{min-height:26px;padding:3px 8px}
.ck-cockpit-trio-grid .ck-card-body{padding:0 2px 2px!important}
.ck-cockpit-trio-grid .ckm-divida-barra{padding:3px 8px}


/* ═══ O DIA NO MOLDE DAS LEITURAS (31/08 — feedback dela com print) ═══
   Uma linha por tarefa: caixa 15px | TAG + título juntos | cta. O grosso vem
   das classes .ckm-* globais; aqui só o que o card do dia tem de próprio. */
#fx-hoje-host .ckm-row{padding:6px 8px}
#fx-hoje-host .ckm-titulo{font-size:12px;line-height:1.3}
#fx-hoje-host .ckm-tag{font-size:7px}
#fx-hoje-host .ckm-meta{font-size:8px;margin-top:1px}
#fx-hoje-host .ckm-cta{font-size:8px;padding:4px 8px}
#fx-hoje-host .hj-ficha--transborda{border-left:3px solid var(--accent)}
#fx-hoje-host .hj-feitas-wrap .ckm-row{opacity:.7}

/* a tag de alerta (erros/ERRO·TESE) — tinta com acento, nunca área grande */
.ckm-tag--alerta{background:#0f0e0a!important;color:#e8d84a!important;border-color:#0f0e0a!important}

/* o RESPONDER do checkpoint é <button> com a cara do cta */
button.ckm-cta{appearance:none;font-family:var(--f-mono);cursor:pointer;background:var(--paper);
  border:1px solid rgba(15,14,10,.7);color:var(--ink)}
button.ckm-cta:hover{background:var(--accent);border-color:var(--ink)}

/* ═══ TÉRMINO EM DESTAQUE (31/08 — "tem que aparecer com mais clareza") ═══ */
#hj-termino{background:var(--accent);color:var(--ink);font-weight:800;font-size:12px;
  padding:1px 7px;border:1px solid rgba(15,14,10,.85);white-space:nowrap}
#hj-termino-delta{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.04em;
  padding:1px 6px;white-space:nowrap}
#hj-termino-delta.adiantou{background:#dcfce7;color:#166534;border:1px solid #16a34a}
#hj-termino-delta.atrasou{background:#0f0e0a;color:#e8d84a;border:1px solid #0f0e0a}


/* ═══ O TÉRMINO SUBIU PARA O CABEÇALHO DO CARD (31/08) ═══
   Era a terceira linha de contexto (a faixa-horizonte, agora extinta): o
   card do dia começa direto no orçamento. Sobre fundo ink, a data mantém o
   destaque em accent e o selo de movimento vem ao lado. */
/* ⚠ O CABEÇALHO DESTE CARD É CLARO (--paper-2), não ink: há DUAS regras
   `#fx-hoje-host .fxh-top` no arquivo e vence a de baixo. Medi antes de
   escrever, e ainda assim errei na primeira tentativa — texto claro aqui deu
   contraste 1.16 (invisível). As cores abaixo são de TINTA, iguais às do
   .fxh-sub que divide a linha. */
#fx-hoje-host .fxh-top-termino{display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-family:var(--f-mono);font-size:8.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#fx-hoje-host .fxh-top-termino .material-symbols-outlined{font-size:13px;color:var(--ink-2)}
#fx-hoje-host .fxh-top-termino #hj-termino{background:var(--accent);color:var(--ink);
  font-family:var(--f-mono);font-weight:700;font-size:9.5px;padding:2px 7px;
  border:1px solid rgba(15,14,10,.85);letter-spacing:.04em}
#fx-hoje-host .fxh-top-termino #hj-termino-delta{font-size:8px;padding:2px 6px}
#fx-hoje-host .fxh-top-termino .fxh-top-dias{color:var(--ink-3);font-weight:400}
@media(max-width:900px){#fx-hoje-host .fxh-top-termino .fxh-top-dias{display:none}}
@media(max-width:700px){#fx-hoje-host .fxh-top-termino{display:none}}

/* ═══ O GESTO DE REEMPACOTAR, DENTRO DO PAINEL DE CRONOGRAMA (31/08) ═══
   Primeira coisa do painel, separada das alavancas por uma linha: reorganizar
   o que existe ≠ mudar o ritmo. Antes ele só existia na caixa de dia
   cumprido — quem tinha tarefa pendente não achava o botão nem a explicação. */
#fx-hoje-host .hj-cron-acao{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;
  background:var(--paper);border:1px solid rgba(15,14,10,.85);border-left:3px solid var(--accent)}
#fx-hoje-host .hj-cron-acao-txt{min-width:0;flex:1}
#fx-hoje-host .hj-cron-acao-txt b{display:block;font-family:var(--f-tit);font-size:12.5px;
  font-weight:800;color:var(--ink);margin-bottom:2px}
#fx-hoje-host .hj-cron-acao-txt span{display:block;font-family:var(--f-corpo);font-size:11px;
  line-height:1.45;color:var(--ink-2);max-width:62ch}
#fx-hoje-host .hj-cron-acao .hj-gesto-cron{flex-shrink:0}
#fx-hoje-host .hj-cron-sub{font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 2px;padding-top:10px;border-top:1px dashed rgba(15,14,10,.18)}