/* COLETIVA_ — css/hoje.css
 *
 * O QUE O HOJE_ PINTA. Saiu do <style> inline de aluno/hoje.html em 13/08/2026
 * para poder ser carregado TAMBÉM pelo FLUXO_, quando o dia virar card lá
 * dentro (pedido da dona: "é uma função do fluxo").
 *
 * A LINHA DO CORTE: aqui está o que o RENDERIZADOR desenha — medidor, fichas,
 * orçamento, ritmo, caixa de cumprido, os três modos. Ficou inline em hoje.html
 * o CHROME da página autônoma: body, o ruído de fundo, .hj-wrap (720px, que é
 * coluna de leitura e NÃO serve ao FLUXO_, que é max-w-6xl), o cabeçalho com a
 * data, a navegação de dias e o overlay #hj-ov.
 *
 * ⚠ NÃO INJETAR ESTE CSS POR JS. A regra .hj-ck::before de 44px abaixo é a que
 * fez nascer o bloco 6b do scripts/audit-ux.mjs, e aquele bloco lê <style> de
 * .html. CSS injetado por JS cairia nas regras 4/5, que só perguntam por
 * padding e :focus-visible — os 44px sumiriam do radar do auditor sem ninguém
 * notar. O audit-ux foi ajustado no MESMO commit para ler também este arquivo.
 *
 * ⚠ Esta folha convive com o Tailwind em data/fluxo/labs.html (hoje.html não o
 * carrega). Todas as regras declaram font-family/size/weight/margin
 * explicitamente e vencem o preflight por especificidade de classe — mas quem
 * prova isso é a foto a 375/768/1280, não este comentário.
 */
.hj-stats{font-family:'Space Mono',monospace;font-size:9.5px;color:#5c574b;margin:0 0 6px;line-height:1.35}
.hj-stats b{color:#0f0e0a}

/* ── medidor do dia ───────────────────────────────────────────── */
.hj-medidor{margin-bottom:8px}
.hj-barra{height:5px;background:#d8d3bc;overflow:hidden;position:relative}
.hj-barra i{display:block;height:100%;background:#0f0e0a;transition:width .4s cubic-bezier(.16,1,.3,1)}
.hj-barra.warn i{background:#0f0e0a}
.hj-barra.over i{background:#e8d84a}
.hj-so{display:flex;gap:4px;align-items:center;margin-top:5px;flex-wrap:wrap}
.hj-so span{font-family:'Space Mono',monospace;font-size:8.5px;color:#5c574b;letter-spacing:.06em;
  text-transform:uppercase}
.hj-so button{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;background:#f5f2e8;
  border:1px solid rgba(15,14,10,.85);padding:0 7px;cursor:pointer;color:#0f0e0a;height:24px;min-height:24px;line-height:1}
.hj-so button:hover,.hj-so button[aria-pressed="true"]{background:#e8d84a}
/* linha do ritmo vigente */
.hj-ritmo-atual{font-family:'Space Mono',monospace;font-size:8.5px;color:#5c574b;
  letter-spacing:.04em;margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hj-ritmo-atual b{color:#0f0e0a;font-weight:700}
.hj-ritmo-atual button{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;
  background:none;border:none;border-bottom:1px solid rgba(15,14,10,.4);color:#0f0e0a;
  padding:0 0 1px;cursor:pointer;letter-spacing:.06em}
.hj-ritmo-atual button:hover{border-bottom-color:#0f0e0a;background:rgba(232,216,74,.25)}

/* atraso (31/08): pendência de dias anteriores não entra no dia (D5) — esta
   linha só a torna visível e aponta o gesto; o botão abre o painel CRONOGRAMA */
.hj-atraso{font-family:'Space Mono',monospace;font-size:8.5px;color:#5c574b;
  margin:4px 0 0;letter-spacing:.04em}
.hj-atraso b{color:#0f0e0a;font-weight:700}
.hj-atraso button{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;
  background:none;border:none;border-bottom:1px solid rgba(15,14,10,.4);color:#0f0e0a;
  padding:0 0 1px;cursor:pointer;letter-spacing:.06em}
.hj-atraso button:hover{border-bottom-color:#0f0e0a;background:rgba(232,216,74,.25)}

/* ── a lista: o coração ───────────────────────────────────────── */
.hj-intro{font-family:'Space Mono',monospace;font-size:9px;color:#5c574b;margin:0 0 6px;
  letter-spacing:.04em}
.hj-ficha:not(.ckm-row){border:1px solid rgba(15,14,10,.22);background:#fffdf6;padding:5px 10px;margin-bottom:4px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 10px;align-items:flex-start;transition:background .15s ease;min-height:36px}
.hj-ficha:not(.ckm-row):hover{background:#fdf9ed}
.hj-ficha.feito:not(.ckm-row){background:#ede9d8;border-color:rgba(15,14,10,.18);opacity:.85}
.hj-ficha.feito .hj-tit{text-decoration:line-through;text-decoration-thickness:1px;opacity:.65}

.hj-corpo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;overflow:visible;white-space:normal}
.hj-tipo{display:inline-block;font-family:'Space Mono',monospace;font-size:7.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:1px 5px;background:rgba(232,216,74,.4);
  border:1px solid rgba(15,14,10,.18);margin:0;flex-shrink:0;white-space:nowrap;line-height:1.3}
.hj-tit{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;line-height:1.3;margin:0;
  white-space:normal;overflow:visible;color:#0f0e0a;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.hj-meta{font-family:'Space Mono',monospace;font-size:10.5px;color:#5c574b;margin:0;line-height:1.3;
  white-space:normal;overflow:visible;max-width:100%;word-break:break-word}
.hj-dir{flex-shrink:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;align-self:center}
@media(max-width:520px){
  .hj-dir{flex-basis:100%;justify-content:flex-end}
}
.hj-min{font-family:'Space Mono',monospace;font-size:8.5px;color:#5c574b;white-space:nowrap}

.hj-termino{font-family:'Inter',sans-serif;font-weight:800;font-size:12.5px;margin:0 0 8px;
  letter-spacing:-.01em}
.hj-termino b{background:#e8d84a;padding:1px 5px}
.hj-termino[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .hj-termino.andou b{animation:hjAndou .9s ease}
}
@keyframes hjAndou{0%{background:#e8d84a}35%{background:#0f0e0a;color:#e8d84a}100%{background:#e8d84a}}

.hj-cumprido{border:1px solid rgba(15,14,10,.85);border-left:3px solid #e8d84a;
  background:#f5f2e8;padding:8px 10px;margin-bottom:6px}
.hj-cumprido h2{font-family:'Inter',sans-serif;font-weight:800;font-size:13px;margin:0 0 2px}
.hj-cumprido p{font-family:'Inter',system-ui,sans-serif;font-size:11px;line-height:1.4;
  color:#3a3631;margin:0 0 4px}
.hj-adiantar{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:#0f0e0a;color:#f5f2e8;
  border:1px solid rgba(15,14,10,.85);padding:3px 8px;cursor:pointer;min-height:24px;height:24px}
.hj-adiantar:hover{background:#e8d84a;color:#0f0e0a}

/* ── estados ──────────────────────────────────────────────────── */
.hj-caixa{border:1px solid rgba(15,14,10,.85);padding:20px 18px;background:#f5f2e8}
.hj-caixa h2{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;margin:0 0 8px}
.hj-caixa p{font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.6;color:#3a3631;margin:0 0 14px}
/* co-aplicada (class="hj-caixa destaque"), não descendente — com o espaço, a
   borda accent nunca pintou desde que a caixa nasceu */
.hj-caixa.destaque{border-left:3px solid #e8d84a;padding-left:12px}

/* ── seletor de ritmo ─────────────────────────────────────────── */
.hj-modos{display:grid;gap:8px;grid-template-columns:1fr;margin-bottom:12px}
@media(min-width:560px){.hj-modos{grid-template-columns:repeat(3,1fr)}}
.hj-modo{border:1px solid rgba(15,14,10,.85);background:#f5f2e8;padding:11px 12px;cursor:pointer;
  text-align:left;font-family:inherit;color:inherit}
.hj-modo:hover{background:#ede9d8}
.hj-modo[aria-pressed="true"]{background:#e8d84a}
.hj-modo b{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.03em}
.hj-modo span{display:block;font-family:'Space Mono',monospace;font-size:10px;color:#5c574b;margin-top:3px}
.hj-modo[aria-pressed="true"] span{color:#3a3631}

/* ── A MOLDURA DO CARD NO FLUXO_ ────────────────────────────────
 *
 * Entrou em 14/08/2026, quando o HOJE_ virou bloco da página do FLUXO_
 * (js/fluxo-hoje.js). Só a MOLDURA mora aqui: o miolo são as mesmas classes
 * .hj-* acima, porque o card e a página autônoma pintam o mesmo dia com o
 * mesmo renderizador.
 *
 * ⚠ Estas regras vivem sob o Tailwind de data/fluxo/labs.html, e por isso
 * declaram font e margin explicitamente — o preflight zera margin de <p> e
 * <h2>, e um card que herdasse isso colapsaria os espaçamentos que a página
 * autônoma tem de graça.
 */
.fxh-card{border:1px solid rgba(15,14,10,.85);background:#f5f2e8;margin:14px 0 0}
.fxh-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;border-bottom:1px solid rgba(15,14,10,.85);background:#ede9d8}
.fxh-marca{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.14em;background:#0f0e0a;color:#f5f2e8;padding:3px 7px}
.fxh-sub{font-family:'Space Mono',monospace;font-size:10px;color:#5c574b;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.fxh-corpo{padding:14px 13px 4px}
@media(min-width:768px){.fxh-corpo{padding:16px 18px 6px}}
/* O aviso é role="status": ocupa altura só quando tem texto, senão abre um
   buraco permanente no rodapé do card. */
.fxh-aviso{font-family:'Space Mono',monospace;font-size:10px;color:#5c574b;
  margin:0;padding:0 13px}
.fxh-aviso:not(:empty){padding:0 13px 12px}
/* No card o dia não é a página inteira: a lista longa rola dentro dele em vez
   de empurrar o percurso para baixo da dobra. O percurso é o dono da página. */
.fxh-corpo{max-height:70vh;overflow-y:auto}

/* Navegação de dias DENTRO do card (14/08). Entrou depois: eu tinha excluído a
   agenda do card e ela pediu de volta — "queria conseguir navegar no hoje para
   amanhã, etc". Mesma medida de alvo de toque do resto da casa (36px). */
.fxh-nav{display:flex;gap:4px;margin-left:auto}
.fxh-nav button{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
  background:transparent;border:1px solid rgba(15,14,10,.85);padding:3px 9px;
  cursor:pointer;color:#0f0e0a;line-height:1.6;min-height:36px;min-width:36px}
.fxh-nav button:hover{background:#e8d84a}

/* ── Top action buttons ────────────────────────────────────────── */
.fxh-top-acoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fxh-top-btn{
  height:28px!important;min-height:28px!important;padding:0 8px!important;
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:8.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#0f0e0a;
  background:#f5f2e8;border:1px solid rgba(15,14,10,.85);
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;line-height:1;border-radius:0;
  transition:all .15s ease}
.fxh-top-btn .material-symbols-outlined{color:#0f0e0a;font-size:13px}
.fxh-top-btn:hover{background:#e8d84a;color:#0f0e0a;border-color:#0f0e0a}
.fxh-top-btn.is-active{background:#0f0e0a;color:#e8d84a;border-color:#0f0e0a}
.fxh-top-btn.is-active .material-symbols-outlined{color:#e8d84a}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Faixa de horizonte e término ──────────────────────────────── */
.fxh-faixa-horizonte{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:8px 12px;background:var(--paper-2, #faf8f0);
  border-bottom:1px solid rgba(15,14,10,.18);font-family:var(--f-mono, 'Space Mono', monospace);
  font-size:9.5px;color:var(--ink, #0f0e0a)}
.fxh-hz-item{display:flex;align-items:center;gap:6px}
.fxh-hz-ico{font-size:14px;color:var(--ink-2, #5c574b)}
.fxh-hz-prog{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--ink-3, #7a7466)}
.fxh-hz-bar{width:64px;height:5px;background:rgba(15,14,10,.15);overflow:hidden;position:relative}
.fxh-hz-bar i{display:block;height:100%;background:var(--ink, #0f0e0a)}

/* ── Alerta de preview de outros dias ──────────────────────────── */
.fxh-alerta-preview{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;background:rgba(232,216,74,.25);border-bottom:1px solid rgba(15,14,10,.4);
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:9.5px;color:var(--ink, #0f0e0a)}
.fxh-btn-voltar-hoje{
  height:24px!important;min-height:24px!important;padding:0 8px!important;
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;background:var(--ink, #0f0e0a);
  color:var(--accent, #e8d84a);border:1px solid var(--ink, #0f0e0a);cursor:pointer;white-space:nowrap}

/* ── Painel de Cronograma ──────────────────────────────────────── */
.fxh-cron-painel{
  background:var(--paper, #f5f2e8);border:1px solid rgba(15,14,10,.85);
  border-left:4px solid var(--accent, #e8d84a);padding:14px 16px;margin:0 0 16px}
.fxh-cron-painel h3{
  font-family:var(--f-tit, 'Inter', sans-serif);font-weight:800;font-size:14px;
  margin:0 0 4px;color:var(--ink, #0f0e0a)}
.fxh-cron-painel p{
  font-family:var(--f-corpo, 'Inter', sans-serif);font-size:12px;line-height:1.5;
  color:var(--ink-2, #3a3631);margin:0 0 10px}
.fxh-cron-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
@media(min-width:640px){.fxh-cron-grid{grid-template-columns:1fr 1fr}}
.fxh-cron-col{background:var(--paper-2, #faf8f0);border:1px solid rgba(15,14,10,.25);padding:10px 12px}
.fxh-cron-col h4{
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3, #7a7466);margin:0 0 8px}
.fxh-cron-modos{display:flex;flex-direction:column;gap:6px}
.fxh-cron-btn{
  text-align:left;padding:7px 10px;border:1px solid rgba(15,14,10,.35);
  background:var(--paper, #f5f2e8);cursor:pointer;font-family:inherit;font-size:11px;
  display:flex;align-items:center;gap:6px;color:var(--ink, #0f0e0a)}
.fxh-cron-btn .material-symbols-outlined{font-size:15px;color:var(--ink-2, #5c574b)}
.fxh-cron-btn:hover{background:var(--paper-3, #ede9d8)}
.fxh-cron-btn.is-selected{background:var(--accent, #e8d84a);border-color:var(--ink, #0f0e0a);font-weight:700}
.fxh-cron-btn.is-selected .material-symbols-outlined{color:var(--ink, #0f0e0a)}
.fxh-cron-input-row{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.fxh-cron-input{
  padding:6px 10px;font-family:var(--f-mono, 'Space Mono', monospace);font-size:12px;
  background:#fff;border:1px solid rgba(15,14,10,.35);outline:none;color:var(--ink, #0f0e0a)}
.fxh-cron-input:focus{border-color:var(--ink, #0f0e0a)}
.fxh-cron-calc-box{
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:9.5px;color:var(--ink, #0f0e0a);
  background:rgba(232,216,74,.2);padding:8px;border:1px dashed rgba(15,14,10,.3);line-height:1.4;margin-top:6px}
.fxh-cron-salvar{
  width:100%;height:32px;font-family:var(--f-mono, 'Space Mono', monospace);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink, #0f0e0a);color:var(--accent, #e8d84a);border:1px solid var(--ink, #0f0e0a);
  cursor:pointer;transition:all .15s ease;margin-top:10px}
.fxh-cron-salvar:hover{background:var(--accent, #e8d84a);color:var(--ink, #0f0e0a)}

/* ── Banner de Dia Temático (Domingo de Simulado / Sábado Leve) ── */
.fxh-tipo-dia-banner{
  display:flex;align-items:center;gap:8px;padding:9px 12px;margin:0 0 14px;
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:9.5px;line-height:1.4;
  border:1px solid rgba(15,14,10,.85)}
.fxh-tipo-dia-banner.domingo{background:#e8d84a;color:#0f0e0a;border-color:#0f0e0a}
.fxh-tipo-dia-banner.sabado{background:#e8f4ec;color:#1e4620;border-color:#2a592e}
.fxh-tipo-dia-banner .material-symbols-outlined{font-size:16px;flex-shrink:0}

/* ── Painel de Ajuda / Como Funciona ───────────────────────────── */
.fxh-ajuda-painel{
  background:var(--paper, #f5f2e8);border:1px solid rgba(15,14,10,.85);
  border-left:4px solid var(--ink, #0f0e0a);padding:16px;margin:0 0 16px}
.fxh-ajuda-painel h3{
  font-family:var(--f-tit, 'Inter', sans-serif);font-weight:800;font-size:15px;
  margin:0 0 8px;color:var(--ink, #0f0e0a)}
.fxh-ajuda-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
@media(min-width:640px){.fxh-ajuda-grid{grid-template-columns:1fr 1fr}}
.fxh-ajuda-card{
  background:var(--paper-2, #faf8f0);border:1px solid rgba(15,14,10,.2);
  padding:10px 12px}
.fxh-ajuda-card h4{
  font-family:var(--f-mono, 'Space Mono', monospace);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink, #0f0e0a);margin:0 0 4px;
  display:flex;align-items:center;gap:5px}
.fxh-ajuda-card p{
  font-family:var(--f-corpo, 'Inter', sans-serif);font-size:11.5px;line-height:1.45;
  color:var(--ink-2, #3a3631);margin:0}

/* ── ALVO DE TOQUE ≥44px (audit:ux, bloco 6b) — recolocado em 24/08/2026 ──
   A reescrita do cockpit levou embora a compensação de alvo que o cabeçalho
   deste arquivo promete (.hj-ck::before), e os botões pequenos do HOJE_
   voltaram a ter como alvo só a caixa desenhada — 24-32px, menos que o dedo.
   O padrão da casa: a caixa VISUAL fica como o design quer; o ALVO cresce por
   pseudo-elemento absoluto de 44px centralizado. position:relative ancora.
   Nenhum dos quatro tem overflow:hidden (conferido) — o pseudo não é clipado. */
.hj-adiantar,.fxh-top-btn,.fxh-btn-voltar-hoje,.fxh-cron-salvar{position:relative}
.hj-adiantar::before,.fxh-top-btn::before,.fxh-btn-voltar-hoje::before,.fxh-cron-salvar::before{
  content:"";position:absolute;width:44px;height:44px;top:50%;left:50%;
  transform:translate(-50%,-50%)}

/* ── O DIA RELIGADO (31/08/2026) — as classes das cinco naturezas ──────────
   A ficha ramifica por natureza em js/hoje-vista.js; aqui só o que a maquete
   acrescentou ao contrato visual. Paper domina; accent sinaliza, nunca
   preenche área (§3). */
.hj-ficha--transborda{border-left:3px solid #e8d84a}
.hj-meta-transbordo{font-family:'Space Mono',monospace;font-size:9px;color:#5c574b;
  margin:0;line-height:1.35}
.hj-ficha--aula{border-style:dashed;border-color:rgba(15,14,10,.35)}
.hj-ficha--aula .hj-tipo{background:#0f0e0a;color:#e8d84a}
.hj-tipo--alerta{background:#0f0e0a;color:#e8d84a}
.hj-gestos{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.hj-gesto-cron{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:#0f0e0a;color:#e8d84a;
  border:1px solid #0f0e0a;padding:7px 12px;cursor:pointer;position:relative}
.hj-gesto-cron:hover{background:#e8d84a;color:#0f0e0a}
.hj-gesto-cron::before{content:"";position:absolute;width:44px;height:44px;top:50%;left:50%;
  transform:translate(-50%,-50%)}
.hj-gestos-nota{font-family:'Space Mono',monospace;font-size:9px;color:#5c574b;
  margin:8px 0 0;line-height:1.45}
.hj-feitas-lista{margin-top:4px;display:flex;flex-direction:column;gap:2px}