/* ===========================================================================
   O FLUXO DO DIA — a faixa do agora e a linha do tempo
   (Fase 1 — 06/08/2026, PROJETO_FLUXO_DO_DIA.md seção 1)

   VEM DO `prototipo-fluxo-do-dia.html`, com uma diferença que importa: lá os
   tokens estão COPIADOS para o arquivo rodar sozinho, e o próprio protótipo
   avisa para não copiar. Aqui só entram `var(--ct-*)` de `ds/tokens.css`, que
   é onde o contraste está medido.

   A tradução de nome não é livre — as duas escalas do protótipo não batem com
   as da casa, e trocar por semelhança poria 24px onde o desenho pedia 20:
     --ct-gold-*  ->  --ct-dourado-*
     --ct-r / --ct-r-s  ->  --ct-r-md / --ct-r-sm  (o mesmo raio do card de
                            avisos, que fica encostado neste painel)
     --ct-sp-5 (24px no protótipo)  ->  --ct-sp-6 (24px aqui)

   AS TRÊS CORES TÊM SIGNIFICADO FIXO, e é o que a casa já usa: lime é ação e é
   o agora; dourado é o que passou com tarefa aberta; verde é concluído.
   Vermelho NÃO aparece neste painel — tarefa atrasada não é erro do sistema, e
   gastar o vermelho aqui o desvaloriza onde ele importa.
   =========================================================================== */

.fluxo {
  /* A ÚNICA MEDIDA FORA DA ESCALA DO ARQUIVO DE TOKENS, e é deliberada: a
     escala de tipo para de crescer em 26px (--ct-fs-numero), que é o tamanho
     de indicador de painel. Aqui o número é o único elemento grande da tela
     inteira — é ele que se lê de longe, em pé, do outro lado da sala. Fica
     nomeado para ser achável, em vez de solto no meio de uma regra. */
  --fluxo-hero: 52px;
  display: flex; flex-direction: column; gap: var(--ct-sp-4);
  min-width: 0;
}

/* ==========================================================================
   1. A FAIXA DO AGORA
   ========================================================================== */
/* A cor de estado é uma borda espessa à ESQUERDA, e não o card inteiro
   pintado: card colorido cansa a vista num painel que fica aberto oito horas.
   A borda diz o estado de relance e o conteúdo continua legível. */
.fluxo__agora {
  background: var(--ct-superficie);
  border: 1px solid var(--ct-linha);
  border-left: 4px solid var(--ct-lime-linha);
  border-radius: var(--ct-r-md);
  overflow: hidden;
}
/* DOIS ESTADOS DOURADOS, e não um: `--trocar` é "faltam dez minutos para o
   fim" e vale enquanto faltarem; `--virou` é a faixa que aparece NA virada e
   some sozinha em três minutos. O protótipo usa uma classe só porque é um
   desenho parado — no sistema, unir os dois faria a faixa da virada ser
   apagada na batida seguinte, quando o bloco novo ainda tem duas horas pela
   frente e o "faltam dez minutos" deixa de valer. */
.fluxo__agora--trocar,
.fluxo__agora--virou  { border-left-color: var(--ct-dourado-fill); }
.fluxo__agora--fora   { border-left-color: var(--ct-linha-forte); }

.fluxo__topo {
  display: flex; align-items: center; gap: var(--ct-sp-2);
  padding: var(--ct-sp-3) var(--ct-sp-5) 0; flex-wrap: wrap;
}
.fluxo__data {
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ct-tinta-3);
}
.fluxo__relogio {
  margin-left: auto; font-family: var(--ct-mono); font-size: var(--ct-fs-meta);
  color: var(--ct-tinta-2); font-variant-numeric: tabular-nums;
}

.fluxo__corpo {
  display: flex; gap: var(--ct-sp-6); align-items: flex-start; flex-wrap: wrap;
  padding: var(--ct-sp-2) var(--ct-sp-5) var(--ct-sp-4);
}
.fluxo__esq { flex: 1 1 320px; min-width: 0; }
.fluxo__dir { flex: 0 0 auto; text-align: right; min-width: 132px; }

.fluxo__nome {
  margin: 2px 0 4px; font-size: 22px; font-weight: 640;
  letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere;
}
.fluxo__janela {
  font-family: var(--ct-mono); font-size: var(--ct-fs-meta);
  color: var(--ct-tinta-3); font-variant-numeric: tabular-nums;
}

/* UM NÚMERO GRANDE SÓ, e é a contagem regressiva: um painel com cinco números
   grandes não tem nenhum.

   Sem `tabular-nums` de propósito. A largura fixa serve para dígitos que se
   comparam em coluna — em corpo de 52px ela deixa o número frouxo. A largura
   fixa fica reservada para a COLUNA DE HORÁRIOS da linha do tempo, lá embaixo,
   que é onde os dígitos precisam alinhar verticalmente. */
.fluxo__hero {
  display: block; font-size: var(--fluxo-hero); line-height: 1;
  font-weight: 600; letter-spacing: -.03em;
}
.fluxo__hero small {
  font-size: var(--ct-fs-campo); font-weight: 500;
  color: var(--ct-tinta-3); margin-left: 3px; letter-spacing: 0;
}
.fluxo__agora--trocar .fluxo__hero { color: var(--ct-dourado); }
.fluxo__rotulo {
  display: block; margin-bottom: 2px;
  font-family: var(--ct-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ct-tinta-3);
}

/* O MEDIDOR tem o trilho num passo mais claro da MESMA rampa do preenchimento
   — lime sobre lime-suave. Assim a barra continua legível quando está quase
   vazia, e o estado se lê na barra inteira, não só na parte cheia. */
.fluxo__medidor {
  height: 6px; margin-top: var(--ct-sp-3);
  border-radius: var(--ct-r-pill); background: var(--ct-lime-suave);
  overflow: hidden;
}
.fluxo__barra {
  height: 100%; width: 0;
  border-radius: var(--ct-r-pill); background: var(--ct-lime-linha);
  transition: width .6s linear;
}
.fluxo__agora--trocar .fluxo__medidor { background: var(--ct-dourado-suave); }
.fluxo__agora--trocar .fluxo__barra   { background: var(--ct-dourado-fill); }
/* Quem pediu menos movimento no sistema não recebe a barra deslizando. */
@media (prefers-reduced-motion: reduce) { .fluxo__barra { transition: none; } }

.fluxo__seguir {
  display: flex; gap: var(--ct-sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-5);
  border-top: 1px solid var(--ct-linha-suave);
  font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
}
.fluxo__seguir b { color: var(--ct-tinta); font-weight: 600; }
.fluxo__seguir .fluxo__hora {
  font-family: var(--ct-mono); font-size: var(--ct-fs-meta); color: var(--ct-tinta-3);
}

/* A FAIXA DE TROCA. Só aparece na virada e some sozinha depois de três
   minutos: aviso que não some vira mobília, e mobília ninguém lê. */
.fluxo__trocar {
  display: none; gap: var(--ct-sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-5);
  background: var(--ct-dourado-suave);
  border-top: 1px solid var(--ct-dourado-linha);
  font-size: var(--ct-fs-meta); color: var(--ct-tinta);
}
.fluxo__agora--virou .fluxo__trocar { display: flex; }
.fluxo__trocarMarca {
  font-family: var(--ct-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ct-dourado); font-weight: 700;
}
.fluxo__trocarX {
  margin-left: auto; min-height: 32px; padding: 5px 11px;
  border: 1px solid var(--ct-dourado-linha); border-radius: var(--ct-r-sm);
  background: transparent; color: var(--ct-tinta-2); font: inherit;
  font-size: var(--ct-fs-meta); cursor: pointer;
}
.fluxo__trocarX:hover { background: var(--ct-superficie); color: var(--ct-tinta); }

/* ==========================================================================
   2. ETIQUETAS DE ESTADO — nunca cor sozinha: sempre marca + palavra
   ==========================================================================
   Quem não distingue as cores lê a palavra; quem imprime em preto e branco lê
   a marca. Isso não é enfeite: é a regra de cor de status da casa. */
.fluxo-et {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 9px; border-radius: var(--ct-r-pill);
  font-family: var(--ct-mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
.fluxo-et::before { font-size: 10px; line-height: 1; }

.fluxo-et--agora    { background: var(--ct-lime-suave); color: var(--ct-lime-tinta); border: 1px solid var(--ct-lime-linha); }
.fluxo-et--agora::before { content: "\25B6"; }
.fluxo-et--feito    { background: var(--ct-ok-suave); color: var(--ct-ok); border: 1px solid var(--ct-ok-linha); }
.fluxo-et--feito::before { content: "\2713"; }
.fluxo-et--pendente { background: var(--ct-dourado-suave); color: var(--ct-dourado); border: 1px solid var(--ct-dourado-linha); }
.fluxo-et--pendente::before { content: "!"; }
.fluxo-et--seguir   { background: var(--ct-rebaixo); color: var(--ct-tinta-3); border: 1px solid var(--ct-linha); }
.fluxo-et--seguir::before { content: "\25CB"; }
/* O bloco sem hora (24/08/2026): "o dia todo". A cor e a do agora — ele esta
   sempre em curso — e a marca e o sol, para nao se confundir com o ▶ do
   bloco que tem relogio. */
.fluxo-et--fixo     { background: var(--ct-lime-suave); color: var(--ct-lime-tinta); border: 1px solid var(--ct-lime-linha); }
.fluxo-et--fixo::before { content: "\2600"; }
.fluxo-blo--fixo .fluxo-blo__ponto { background: var(--ct-lime-linha); box-shadow: 0 0 0 3px var(--ct-lime-suave); }
.fluxo-blo--fixo .fluxo-blo__nome,
.fluxo-blo--fixo .fluxo-blo__h { opacity: 1; color: var(--ct-tinta); }
.fluxo-blo--fixo .fluxo-blo__h { font-family: inherit; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ct-tinta-3); }
/* O QUINTO ESTADO, que o protótipo não tinha porque desenhou a Fase 2 pronta:
   "passou, e ainda não há como saber se ficou tarefa". Enquanto a marcação não
   existe, dizer "em aberto" seria acusar a equipe de não ter feito o que ela
   não tinha como marcar. Círculo cheio, cinza, e a palavra. */
.fluxo-et--encerrado { background: var(--ct-rebaixo); color: var(--ct-tinta-2); border: 1px solid var(--ct-linha-forte); }
.fluxo-et--encerrado::before { content: "\25CF"; }

/* ==========================================================================
   3. A LINHA DO TEMPO
   ========================================================================== */
.fluxo__linha {
  background: var(--ct-superficie); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md);
}
.fluxo__linhaTopo {
  display: flex; align-items: baseline; gap: var(--ct-sp-2); flex-wrap: wrap;
  padding: var(--ct-sp-4) var(--ct-sp-5) var(--ct-sp-3);
  border-bottom: 1px solid var(--ct-linha-suave);
}
.fluxo__linhaTopo h2 {
  margin: 0; font-size: var(--ct-fs-card); font-weight: 600; letter-spacing: -.01em;
}
.fluxo__linhaResumo { margin-left: auto; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); }
.fluxo__linhaCorpo { padding: 6px var(--ct-sp-5) var(--ct-sp-4); }

.fluxo-blo {
  display: grid; grid-template-columns: 58px 18px minmax(0, 1fr); gap: 0 var(--ct-sp-3);
  padding: var(--ct-sp-3) 0; border-bottom: 1px solid var(--ct-linha-suave);
}
.fluxo-blo:last-child { border-bottom: 0; }

/* A COLUNA DE HORÁRIOS é onde a largura fixa serve: os dígitos alinham
   verticalmente e a lista se lê como uma régua. */
.fluxo-blo__h {
  padding-top: 2px; line-height: 1.5;
  font-family: var(--ct-mono); font-size: 12px; color: var(--ct-tinta-3);
  font-variant-numeric: tabular-nums;
}
.fluxo-blo__h span { display: block; }
.fluxo-blo__h span + span { opacity: .6; }

/* O trilho: ponto e fio. Recessivo, como eixo de gráfico. */
.fluxo-blo__trilho { position: relative; display: flex; justify-content: center; padding-top: 6px; }
.fluxo-blo__ponto {
  width: 10px; height: 10px; border-radius: 50%; flex: none; z-index: 1;
  background: var(--ct-linha); border: 2px solid var(--ct-superficie);
  box-shadow: 0 0 0 1px var(--ct-linha);
}
.fluxo-blo__fio {
  position: absolute; top: 16px; bottom: -16px; width: 2px;
  background: var(--ct-linha); z-index: 0;
}
.fluxo-blo:last-child .fluxo-blo__fio { display: none; }

.fluxo-blo__cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fluxo-blo__nome { font-size: var(--ct-fs-corpo); font-weight: 600; letter-spacing: -.01em; }
.fluxo-blo__conta { font-family: var(--ct-mono); font-size: 12px; color: var(--ct-tinta-3); }

/* --- estados do bloco --- */
.fluxo-blo--passou .fluxo-blo__nome,
.fluxo-blo--passou .fluxo-blo__h { opacity: .55; }
.fluxo-blo--passou .fluxo-blo__ponto { background: var(--ct-linha-forte); box-shadow: 0 0 0 1px var(--ct-linha); }
.fluxo-blo--passou .fluxo-blo__fio { background: var(--ct-linha); }

.fluxo-blo--feito .fluxo-blo__ponto { background: var(--ct-ok); box-shadow: 0 0 0 1px var(--ct-ok-linha); }
.fluxo-blo--feito .fluxo-blo__fio { background: var(--ct-ok-linha); }

.fluxo-blo--pendente .fluxo-blo__ponto { background: var(--ct-dourado-fill); box-shadow: 0 0 0 3px var(--ct-dourado-suave); }
.fluxo-blo--pendente .fluxo-blo__fio { background: var(--ct-dourado-linha); }

.fluxo-blo--agora {
  margin: 0 calc(var(--ct-sp-5) * -1); padding-left: var(--ct-sp-5); padding-right: var(--ct-sp-5);
  background: var(--ct-lime-suave); border-radius: var(--ct-r-sm);
  border-bottom-color: transparent;
}
.fluxo-blo--agora .fluxo-blo__ponto { background: var(--ct-lime-linha); box-shadow: 0 0 0 3px var(--ct-lime-suave); }
.fluxo-blo--agora .fluxo-blo__nome,
.fluxo-blo--agora .fluxo-blo__h { opacity: 1; color: var(--ct-tinta); }

/* --- as tarefas dentro do bloco --- */
.fluxo-tar { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fluxo-tar li { margin: 0; }
/* A LINHA INTEIRA E CLICAVEL (Fase 2): é o controle mais clicado da tela, e a
   caixa sozinha tem 20px — abaixo do mínimo recomendado de 24. O rótulo em
   volta resolve isso sem inchar o desenho. */
.fluxo-tarefa {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 9px; margin-left: -9px; border-radius: var(--ct-r-sm);
  cursor: pointer; min-height: 38px;
}
.fluxo-tarefa:hover { background: var(--ct-rebaixo); }
.fluxo-blo--agora .fluxo-tarefa:hover { background: var(--ct-superficie); }

.fluxo-tarefa__caixa {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--ct-lime-linha); cursor: pointer;
}
/* Tarefa sem identificador nao pode ser marcada (marcar uma marcaria a outra).
   A caixa fica desabilitada e a linha para de convidar ao clique — o `title`
   diz o que fazer. */
.fluxo-tarefa__caixa:disabled { cursor: not-allowed; opacity: .45; }
/* Classe no rotulo, e nao `:has()` no CSS: o seletor resolveria isto em uma
   linha, mas so em navegador recente — e quem monta a rotina pode estar num
   computador da recepcao. A classe vale em qualquer um. */
.fluxo-tarefa--travada { cursor: default; }
.fluxo-tarefa--travada:hover { background: transparent; }

/* RISCADO, e nao apagado: o que foi feito continua legivel.

   O risco vai na FRASE, e nao no bloco de texto inteiro. `text-decoration` e
   desenhada pelo ancestral e atravessa os descendentes — nao ha
   `text-decoration: none` que a tire de um filho. Com o risco no pai, a
   etiqueta do dono e o carimbo "feito 10:34 por Marcela" sairiam riscados
   junto, e o carimbo nasce JUNTO com o risco: ele apareceria sempre cortado. */
.fluxo-tarefa--feita .fluxo-tarefa__frase {
  color: var(--ct-tinta-3);
  text-decoration: line-through; text-decoration-color: var(--ct-linha-forte);
}
.fluxo-tarefa__carimbo {
  display: block; margin-top: 1px;
  font-family: var(--ct-mono); font-size: 10.5px; color: var(--ct-tinta-3);
  font-variant-numeric: tabular-nums;
}

/* A gravacao da marcacao falhou. Fica onde a pessoa esta olhando, e nao num
   alerta que interrompe — a marcacao ja voltou sozinha para o estado anterior,
   entao isto e informacao, nao decisao. */
.fluxo__recado {
  margin: 0; padding: var(--ct-sp-2) var(--ct-sp-5) var(--ct-sp-3);
  font-size: var(--ct-fs-meta); color: var(--ct-alerta);
}
.fluxo-tarefa__txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.fluxo-tarefa__quem {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  margin-left: 6px; padding: 1px 8px 1px 3px; white-space: nowrap;
  background: var(--ct-rebaixo); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-pill); font-size: 11.5px; color: var(--ct-tinta-2);
}
/* A tarefa que ficou sem dono. Contorno tracejado e o vocabulario de "campo
   por preencher" — nao e alarme, e nao gasta o vermelho, que neste painel nao
   aparece. So diz que falta alguem ali. */
.fluxo-tarefa__quem--sem {
  padding-left: 8px; border-style: dashed; border-color: var(--ct-linha-forte);
  background: transparent; color: var(--ct-tinta-3); font-style: italic;
}
.fluxo-tarefa__ini {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ct-inverso); color: var(--ct-tinta-inv); font-size: 9px; font-weight: 700;
}

/* ==========================================================================
   3b. A TAREFA QUE É SUA (08/08/2026)
   ==========================================================================
   Em 06/08 ficou decidido que toda tarefa tem dono, e até aqui o painel
   desenhava a etiqueta do dono igual para todos: cada pessoa lia o dia da casa
   inteiro para achar as três linhas que eram dela.

   E O DESTAQUE NÃO GASTA NENHUMA DAS TRÊS CORES DE ESTADO. Lime é o agora,
   dourado é o que passou em aberto, verde é concluído — as três respondem
   "como está a tarefa". "É sua" responde outra pergunta, a de QUEM, e pintá-la
   com uma cor de estado faria a linha mentir sobre o próprio estado. O que
   muda é o PESO: a etiqueta do dono deixa de ser contorno e vira cheia, e a
   linha ganha um fio à esquerda em tinta neutra. */
/* UMA CLASSE SÓ, e ela vive no `li`. A tentação é marcar o rótulo (que é onde
   o desenho muda) e o item da lista (que é o que o filtro esconde) — mas seriam
   duas classes para o mesmo fato, e elas divergiriam na primeira vez que
   alguém acrescentasse uma e esquecesse a outra. Do `li` a cascata alcança as
   duas coisas, e `:has()` não entra: ele resolveria isto numa linha, mas só em
   navegador recente, e quem lê a rotina pode estar no computador da recepção. */
.fluxo-tar__li--minha .fluxo-tarefa {
  /* Fio à esquerda por sombra interna, e não por `border-left`: a borda somaria
     1px à largura e desalinharia esta linha das vizinhas dentro do mesmo bloco. */
  box-shadow: inset 2px 0 0 var(--ct-tinta-2);
}
.fluxo-tar__li--minha .fluxo-tarefa__frase { font-weight: 600; }
/* A etiqueta cheia — e ela usa `--ct-tinta`/`--ct-superficie`, e NÃO o
   `--ct-inverso` do círculo de iniciais que já existia aqui.

   A diferença é a única que importa neste bloco: `--ct-inverso` é o preto da
   marca e vale o mesmo nos dois temas (é o que faz a barra do topo ser preta
   no claro e no escuro). Pintada com ele, esta pastilha ficava #0B0B09 sobre
   um painel #1C1C19 no tema escuro — medido: 1,15:1, ou seja, invisível
   justamente como marca de "esta é sua". `--ct-tinta` e `--ct-superficie`
   VIRAM junto com o tema, e são o par que dá pastilha cheia nos dois. */
.fluxo-tar__li--minha .fluxo-tarefa__quem {
  background: var(--ct-tinta); border-color: var(--ct-tinta); color: var(--ct-superficie);
  font-weight: 600;
}
/* O círculo, pela mesma razão, é o negativo da pastilha — e não o negativo da
   marca. Com `--ct-tinta-inv` (que também não vira) ele sumiria dentro da
   pastilha clara do tema escuro. */
.fluxo-tar__li--minha .fluxo-tarefa__ini {
  background: var(--ct-superficie); color: var(--ct-tinta);
}
/* Feita continua riscada, e o peso sai junto: uma linha sua já marcada não
   precisa continuar puxando a vista. */
.fluxo-tar__li--minha .fluxo-tarefa--feita { box-shadow: inset 2px 0 0 var(--ct-linha-forte); }
.fluxo-tar__li--minha .fluxo-tarefa--feita .fluxo-tarefa__frase { font-weight: 400; }

/* SÓ AS MINHAS — filtro por CSS, e não por redesenho.
   Redesenhar tiraria o foco de quem estivesse marcando pelo teclado e faria a
   rolagem saltar; é a mesma disciplina do `fluxoPintarFeitas`, que mexe no que
   já está na tela em vez de refazer a lista. Aqui a classe entra no corpo e a
   cascata resolve o resto — ligar e desligar o filtro não toca em nenhum nó. */
.fluxo__linhaCorpo--sominhas .fluxo-tar li:not(.fluxo-tar__li--minha) { display: none; }
/* O bloco inteiro sai quando não sobrou nada dele: um cabeçalho de bloco com
   lista vazia embaixo parece defeito, não filtro. */
.fluxo__linhaCorpo--sominhas .fluxo-blo:not(.fluxo-blo--tem-minha) { display: none; }
/* Sem nenhuma tarefa sua no dia, a lista filtrada ficaria em branco — e lista
   em branco não distingue "não há" de "quebrou". */
.fluxo__semMinhas { display: none; padding: 22px 0 10px; color: var(--ct-tinta-3); font-size: var(--ct-fs-meta); }
.fluxo__linhaCorpo--sominhas .fluxo__semMinhas { display: block; }
.fluxo__linhaCorpo--sominhas .fluxo-blo--tem-minha ~ .fluxo__semMinhas { display: none; }

/* A CONTAGEM PESSOAL, no alto da linha do tempo.
   Não vai na faixa do agora de propósito: lá vale a regra do "um número grande
   só", e um segundo número grande faria a tela não ter nenhum. Aqui ela fica
   ao lado do resumo da casa, que é a comparação que interessa — "8 de 14" da
   casa, "2 suas em aberto" de quem está lendo. */
.fluxo__minhas {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 9px; border-radius: var(--ct-r-pill);
  font-size: 11.5px; font-weight: 600;
  background: var(--ct-rebaixo); border: 1px solid var(--ct-linha); color: var(--ct-tinta-2);
}
/* Com tarefa sua em aberto o dourado PODE: é exatamente o significado que ele
   já tem neste painel — "há coisa por fazer". Sem nenhuma, volta ao neutro; o
   verde fica reservado ao bloco concluído, para não haver dois verdes dizendo
   coisas diferentes na mesma linha. */
.fluxo__minhas--abertas {
  background: var(--ct-dourado-suave); border-color: var(--ct-dourado-linha); color: var(--ct-dourado);
}
.fluxo__linhaTopo .fluxo__linhaResumo { margin-left: auto; }
/* O botão do filtro ligado usa o mesmo vocabulário das abas de "Montar a
   rotina": lime cheio é "esta é a vista escolhida". */
.fluxo__soMinhas[aria-pressed="true"] {
  background: var(--ct-lime); border-color: var(--ct-lime); color: var(--ct-lime-sobre); font-weight: 600;
}

/* ==========================================================================
   4. VAZIO E LEGENDA
   ========================================================================== */
.fluxo__vazio { padding: 30px var(--ct-sp-5); text-align: center; color: var(--ct-tinta-3); font-size: var(--ct-fs-meta); }
.fluxo__vazio b { display: block; margin-bottom: 4px; color: var(--ct-tinta-2); font-size: 14.5px; font-weight: 600; }

.fluxo__legenda {
  display: flex; gap: var(--ct-sp-4); flex-wrap: wrap; align-items: center;
  padding: var(--ct-sp-3) var(--ct-sp-5);
  background: var(--ct-superficie); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md); font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
}
.fluxo__legenda .fluxo__legendaTit {
  font-family: var(--ct-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ct-tinta-3);
}
.fluxo__legenda .fluxo__par { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   5. MONTAR A ROTINA (Fase 3)
   ==========================================================================
   Ela NAO fica em "Configuracoes", como o projeto previa, porque o portal nao
   tem tela de Configuracoes: cada item do menu abre um dos quatro sistemas num
   iframe. Poe-la dentro da Central acoplaria o editor da rotina da casa ao
   sistema de orcamento, e ainda obrigaria a mexer na matriz de permissoes
   daquele sistema. Ela e uma tela do proprio portal, irma da tela inicial. */
.montar {
  height: 100%; overflow-y: auto;
  padding: var(--ct-sp-6) var(--ct-sp-6) var(--ct-sp-8);
}
.montar__caixa { max-width: 940px; margin: 0 auto; }

.montar__topo {
  display: flex; align-items: center; gap: var(--ct-sp-3); flex-wrap: wrap;
  margin-bottom: var(--ct-sp-5);
}
.montar__topo h1 { margin: 0; font-size: var(--ct-fs-titulo); font-weight: 640; letter-spacing: -.02em; }
.montar__carimbo {
  flex-basis: 100%; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3);
}

/* AS SETE ABAS. O domingo desligado continua tendo aba — aba que some e rotina
   que ninguem consegue ligar de volta sem mexer no banco. Ele so ganha a marca
   de desligado. */
.montar__abas { display: flex; gap: var(--ct-sp-1); flex-wrap: wrap; margin-bottom: var(--ct-sp-4); }
.montar__aba {
  border: 1px solid var(--ct-linha); background: var(--ct-superficie);
  color: var(--ct-tinta-2); border-radius: var(--ct-r-sm);
  padding: 7px 14px; font: inherit; font-size: var(--ct-fs-meta); cursor: pointer;
  min-height: 38px; display: inline-flex; align-items: center; gap: 6px;
}
.montar__aba:hover { background: var(--ct-rebaixo); }
.montar__aba[aria-selected="true"] {
  background: var(--ct-lime); border-color: var(--ct-lime); color: var(--ct-lime-sobre); font-weight: 600;
}
.montar__aba--desligada { color: var(--ct-tinta-3); }
.montar__aba--desligada::after { content: "desligado"; font-size: 9.5px; opacity: .8; }
.montar__aba--sujo::before { content: "•"; color: var(--ct-dourado); font-weight: 700; }

.montar__barra {
  display: flex; align-items: center; gap: var(--ct-sp-4); flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-4); margin-bottom: var(--ct-sp-4);
  background: var(--ct-rebaixo); border: 1px solid var(--ct-linha); border-radius: var(--ct-r-md);
}
.montar__liga { display: inline-flex; align-items: center; gap: var(--ct-sp-2); cursor: pointer; font-size: var(--ct-fs-meta); }
.montar__liga input { width: 18px; height: 18px; accent-color: var(--ct-lime-linha); cursor: pointer; }
.montar__copiar { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ct-sp-2); font-size: var(--ct-fs-meta); }
.montar__copiar select {
  font: inherit; font-size: var(--ct-fs-meta); padding: 6px 10px; min-height: 38px;
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}

/* --- um bloco --- */
.mbloco {
  background: var(--ct-superficie); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md); padding: var(--ct-sp-4); margin-bottom: var(--ct-sp-3);
}
.mbloco__topo { display: flex; align-items: center; gap: var(--ct-sp-2); flex-wrap: wrap; }
.mbloco__hora {
  font-family: var(--ct-mono); font-size: var(--ct-fs-codigo); font-variant-numeric: tabular-nums;
  width: 108px; min-height: var(--ct-alvo); padding: 6px 8px;
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.mbloco__ate { color: var(--ct-tinta-3); font-size: var(--ct-fs-meta); }
.mbloco__titulo {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: var(--ct-fs-campo);
  min-height: var(--ct-alvo); padding: 6px 10px;
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.mbloco__x, .mtarefa__x {
  border: 1px solid var(--ct-linha); background: transparent; color: var(--ct-tinta-3);
  border-radius: var(--ct-r-sm); font: inherit; font-size: var(--ct-fs-meta);
  padding: 6px 10px; cursor: pointer; min-height: 38px; flex: none;
}
.mbloco__x:hover, .mtarefa__x:hover { color: var(--ct-tinta); border-color: var(--ct-linha-forte); background: var(--ct-rebaixo); }

.mtarefas { list-style: none; margin: var(--ct-sp-3) 0 0; padding: 0 0 0 var(--ct-sp-4); border-left: 2px solid var(--ct-linha-suave); }
.mtarefa { display: flex; align-items: center; gap: var(--ct-sp-2); flex-wrap: wrap; margin-bottom: var(--ct-sp-2); }
.mtarefa__texto {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: var(--ct-fs-meta);
  min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.mtarefa__quem {
  flex: 0 1 230px; min-width: 0; font: inherit; font-size: var(--ct-fs-meta);
  min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.montar__mais {
  border: 1px dashed var(--ct-linha-forte); background: transparent; color: var(--ct-tinta-2);
  border-radius: var(--ct-r-sm); font: inherit; font-size: var(--ct-fs-meta);
  padding: 8px 14px; cursor: pointer; min-height: 38px;
}
.montar__mais:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }
.mbloco .montar__mais { margin-top: var(--ct-sp-2); margin-left: var(--ct-sp-4); }

/* --- avisos e acoes --- */
.montar__recado { border-radius: var(--ct-r-md); padding: var(--ct-sp-3) var(--ct-sp-4); margin-top: var(--ct-sp-4); font-size: var(--ct-fs-meta); }
.montar__recado ul { margin: 6px 0 0; padding-left: 20px; }
/* AQUI O VERMELHO PODE, e e o unico lugar do fluxo do dia onde ele aparece. O
   projeto o proibe NO PAINEL — tarefa atrasada nao e erro do sistema, e gastar
   o vermelho la o desvaloriza onde importa. Isto e onde importa: "voce nao pode
   salvar isso" e erro de verdade, e a mesma cor que o resto da casa usa para
   dizer isso. O aviso de sobreposicao, que deixa salvar, fica no dourado. */
.montar__recado--erro { background: var(--ct-alerta-suave); border: 1px solid var(--ct-alerta-linha); color: var(--ct-tinta); }
.montar__recado--aviso { background: var(--ct-dourado-suave); border: 1px solid var(--ct-dourado-linha); color: var(--ct-tinta); }
.montar__recado--ok { background: var(--ct-ok-suave); border: 1px solid var(--ct-ok-linha); color: var(--ct-tinta); }

.montar__acoes {
  display: flex; align-items: center; gap: var(--ct-sp-3); flex-wrap: wrap;
  margin-top: var(--ct-sp-5); padding-top: var(--ct-sp-4); border-top: 1px solid var(--ct-linha);
}
.montar__nota { flex-basis: 100%; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); margin-top: var(--ct-sp-2); }

/* A PORTA, quando ainda nao ha rotina montada para hoje. NAO e o painel: e uma
   linha so. O painel inteiro sumir num dia sem rotina e a regra (secao 5.1) —
   mas sem nenhuma porta, a primeira rotina da casa nao teria por onde nascer. */
.fluxo__porta {
  display: flex; align-items: center; gap: var(--ct-sp-3); flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-4);
  background: var(--ct-superficie); border: 1px dashed var(--ct-linha-forte);
  border-radius: var(--ct-r-md); font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
  margin-bottom: var(--ct-sp-4);
}
.fluxo__porta button { margin-left: auto; }

/* ==========================================================================
   6. O RELOGIO TORTO E OS DIAS ANTERIORES (Fase 4)
   ========================================================================== */

/* Discreta de proposito: aparece quase nunca, e quando aparece nao e culpa de
   quem esta lendo. Dourado, e nao vermelho — nao ha erro no sistema, ha um
   relogio para acertar. */
.fluxo__relogioAviso {
  margin: 0; padding: var(--ct-sp-2) var(--ct-sp-4);
  background: var(--ct-dourado-suave); border: 1px solid var(--ct-dourado-linha);
  border-radius: var(--ct-r-md);
  font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
}

.hist {
  background: var(--ct-superficie); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md); margin-bottom: var(--ct-sp-2);
}
.hist__topo {
  display: flex; align-items: center; gap: var(--ct-sp-3); flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-4); cursor: pointer;
  min-height: var(--ct-alvo); list-style: none;
}
/* O triangulo padrao do <details> no WebKit some com `list-style`; este
   marcador desenha o proprio, e ele gira ao abrir. */
.hist__topo::-webkit-details-marker { display: none; }
.hist__topo::before {
  content: "\25B8"; color: var(--ct-tinta-3); font-size: 12px;
  transition: transform .15s; flex: none;
}
.hist[open] > .hist__topo::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hist__topo::before { transition: none; } }
.hist__topo:hover { background: var(--ct-rebaixo); border-radius: var(--ct-r-md); }
.hist__dia { font-weight: 600; font-size: var(--ct-fs-corpo); }
.hist__conta {
  font-family: var(--ct-mono); font-size: var(--ct-fs-meta); color: var(--ct-tinta-3);
  font-variant-numeric: tabular-nums;
}
.hist__abertas {
  margin-left: auto; font-size: var(--ct-fs-meta); color: var(--ct-dourado); font-weight: 600;
}

.hist__corpo { padding: 0 var(--ct-sp-4) var(--ct-sp-4); border-top: 1px solid var(--ct-linha-suave); }
.hist__nada { color: var(--ct-tinta-3); font-size: var(--ct-fs-meta); }
.hist__bloco { padding-top: var(--ct-sp-3); }
.hist__blocoCab { display: flex; align-items: baseline; gap: var(--ct-sp-3); flex-wrap: wrap; }
.hist__hora {
  font-family: var(--ct-mono); font-size: 12px; color: var(--ct-tinta-3);
  font-variant-numeric: tabular-nums; flex: none;
}
.hist__nome { font-weight: 600; font-size: var(--ct-fs-meta); }

.hist__tarefas { list-style: none; margin: 4px 0 0; padding: 0 0 0 var(--ct-sp-6); }
.hist__tarefa { display: flex; align-items: flex-start; gap: var(--ct-sp-2); padding: 3px 0; }
.hist__marca { flex: none; width: 14px; color: var(--ct-tinta-3); font-size: 12px; line-height: 1.5; }
.hist__tarefa--feita .hist__marca { color: var(--ct-ok); }
.hist__txt { flex: 1; min-width: 0; font-size: var(--ct-fs-meta); line-height: 1.5; }
/* O risco na FRASE, e nao no bloco: `text-decoration` do ancestral atravessa
   os filhos, e o carimbo sairia cortado junto. Mesmo motivo do painel. */
.hist__tarefa--feita .hist__frase {
  color: var(--ct-tinta-3); text-decoration: line-through; text-decoration-color: var(--ct-linha-forte);
}
.hist__quem { color: var(--ct-tinta-3); font-size: 11.5px; }
.hist__carimbo {
  display: block; font-family: var(--ct-mono); font-size: 10.5px;
  color: var(--ct-tinta-3); font-variant-numeric: tabular-nums;
}
/* A observacao do dia, como ficou naquele dia (24/08/2026). */
.hist__obs { display: block; margin-top: 2px; font-size: 12px; color: var(--ct-tinta-2); font-style: italic; }

/* ==========================================================================
   5. A OBSERVACAO DO DIA NA TAREFA  (24/08/2026)
   ==========================================================================
   Escrita por quem executa, naquele dia. E texto, nao cor: a linha com
   observacao ganha so o recuo da nota, e o botao "obs" e discreto ate o
   mouse chegar — mora ao lado do Pegar, e nao pode disputar com ele. */
.fluxo-tarefa__obs {
  display: block; margin-top: 3px; padding-left: 8px;
  border-left: 2px solid var(--ct-linha-forte);
  font-size: 12px; color: var(--ct-tinta-2); white-space: pre-wrap;
}
.fluxo-tarefa__obsQuem { color: var(--ct-tinta-3); font-size: 11px; }
.fluxo-tarefa__obsBt {
  flex: none; align-self: flex-start; margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ct-tinta-3); font-size: 11.5px; line-height: 1;
  padding: 5px 6px; border-radius: var(--ct-r-xs, 6px); text-decoration: underline; text-underline-offset: 2px;
}
.fluxo-tarefa__obsBt:hover { color: var(--ct-tinta); background: var(--ct-rebaixo); }
.fluxo-tarefa__obsBt:focus-visible { outline: 2px solid var(--ct-anel); outline-offset: 1px; }
/* Com o obs antes do Pegar, so o obs empurra para a direita. */
.fluxo-tarefa__obsBt + .fluxo-tarefa__pegar { margin-left: 0; }
.fluxo-tarefa__obsCampo {
  display: block; width: 100%; margin-top: 4px;
  padding: 5px 8px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.fluxo-tarefa__obsCampo:focus-visible { outline: 2px solid var(--ct-anel); outline-offset: 1px; }

/* ===========================================================================
   REGISTRAR UMA TAREFA DO DIA  (11/08/2026, pedido da dona)

   A equipe escreve no bloco de AGORA o que acabou de fazer — o atendimento vai
   dizendo o tempo todo em que setor cada uma está, e essa informação morria na
   conversa. A caixa aparece só no bloco de agora (ver `fluxoDesenharLinha`).
   =========================================================================== */
.fluxo-nova { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fluxo-nova__campo {
  flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
  padding: 8px 10px; font: inherit; font-size: var(--ct-fs-campo);
  background: var(--ct-superficie); color: var(--ct-tinta);
}
.fluxo-nova__campo:focus {
  outline: 0; border-color: var(--ct-anel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
}
/* Preto, como toda ação que decide no sistema desde 11/08/2026. */
.fluxo-nova__bt {
  flex: none; border: 1px solid transparent; border-radius: var(--ct-r-sm);
  padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
  color: var(--b-preto-letra); box-shadow: 0 2px 9px -2px var(--b-halo-preto);
}
.fluxo-nova__bt:hover { box-shadow: 0 8px 20px -4px var(--b-halo-preto); filter: brightness(1.08); }
.fluxo-nova__bt:disabled { opacity: .6; cursor: default; filter: none; }

/* A TAREFA REGISTRADA HOJE, ao lado das da rotina. O traço à esquerda é a
   diferença inteira: as duas marcam igual e contam igual, mas uma estava
   combinada de antes e a outra aconteceu hoje. */
.fluxo-tarefa--extra {
  border-left: 3px solid var(--ct-info-linha);
  padding-left: 7px;
  margin-left: -10px;
}

/* O apagar da tarefa do dia. Discreto até o mouse chegar: ele mora ao lado de
   uma caixa de marcar, e um vermelho aceso na lista inteira puxaria o olho
   para a ação de tirar, que é a que menos se faz. */
.fluxo-tarefa__apagar {
  flex: none; margin-left: auto; align-self: flex-start;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ct-tinta-3); font-size: 13px; line-height: 1;
  padding: 4px 6px; border-radius: var(--ct-r-xs, 6px);
}
.fluxo-tarefa__apagar:hover { background: var(--ct-alerta-suave); color: var(--ct-alerta); }
.fluxo-tarefa__apagar:focus-visible {
  outline: 2px solid var(--ct-anel); outline-offset: 1px; color: var(--ct-alerta);
}

/* ==========================================================================
   4. PEGAR E FINALIZAR — quem esta em que  (23/08/2026)
   ==========================================================================
   A tarefa tinha fim e nao tinha comeco. "Pegar" e o comeco; a linha em curso
   ganha a marca "▶ em curso" (nenhum estado e cor sozinha), as iniciais de
   quem esta nela e o tempo decorrido. A cor e o LIME, que ja e o agora deste
   painel. Depois de N horas, o DOURADO — e nao o vermelho: tarefa esquecida
   nao e erro do sistema. */
.fluxo-tarefa__pegar {
  flex: none; align-self: flex-start; margin-left: auto;
  border: 1px solid var(--ct-linha-forte); background: var(--ct-superficie);
  color: var(--ct-tinta-2); font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: var(--ct-r-pill); cursor: pointer; white-space: nowrap;
}
.fluxo-tarefa__pegar:hover { border-color: var(--ct-lime-linha); color: var(--ct-tinta); }
.fluxo-tarefa__pegar:focus-visible { outline: 2px solid var(--ct-anel); outline-offset: 1px; }
.fluxo-tarefa__pegar:disabled { opacity: .6; cursor: progress; }
.fluxo-tarefa__pegar--emcurso {
  background: var(--ct-lime-suave); border-color: var(--ct-lime-linha); color: var(--ct-tinta);
}
/* Com os dois botoes na mesma linha, so o primeiro empurra para a direita. */
.fluxo-tarefa__pegar + .fluxo-tarefa__apagar { margin-left: 0; }

.fluxo-tarefa--emcurso { background: var(--ct-lime-suave); }
.fluxo-tarefa--emcurso:hover { background: var(--ct-lime-suave); }
.fluxo-tarefa__andando {
  display: block; margin-top: 2px; font-size: 11px; color: var(--ct-tinta-2);
}
.fluxo-tarefa__andandoMarca { color: var(--ct-tinta); font-weight: 600; margin-right: 4px; }
.fluxo-tarefa__andando .fluxo-tarefa__ini { vertical-align: -4px; }
/* A esquecida: dourado, o mesmo de "passou e ficou aberto". */
.fluxo-tarefa--esquecida,
.fluxo-tarefa--esquecida:hover { background: var(--ct-dourado-suave); }
.fluxo-tarefa--esquecida .fluxo-tarefa__andandoMarca,
.fluxo-tarefa--esquecida .fluxo-tarefa__carimbo { color: var(--ct-dourado); }

/* A faixa "quem esta em que": atravessa as duas colunas, uma pessoa por
   item, e rola na horizontal em tela estreita — nunca vira lista vertical. */
.fluxo__quem {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--ct-sp-4);
  overflow-x: auto; white-space: nowrap;
  padding: 8px var(--ct-sp-4); margin-bottom: var(--ct-sp-3);
  background: var(--ct-superficie); border: 1px solid var(--ct-linha); border-radius: var(--ct-r-md);
  font-size: 12.5px; color: var(--ct-tinta-2);
}
.fluxo__quem__pessoa { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.fluxo__quem__pessoa b { color: var(--ct-tinta); font-weight: 600; }
.fluxo__quem__pessoa--eu b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ct-lime-linha); }
.fluxo__quem__marca { color: var(--ct-lime-linha); font-weight: 700; }
.fluxo__quem__ha { color: var(--ct-tinta-3); font-variant-numeric: tabular-nums; }