/* ============================================================================
   [hidden] TEM DE ESCONDER. Esta regra vale por um lote inteiro de defeitos.

   `[hidden]{display:none}` é regra do NAVEGADOR (user agent) e perde para
   QUALQUER regra de autor. Como `.habits`, `.tag-seletor`, `.novo-proj`,
   `.btn` e outros declaram `display:flex/inline-flex`, todo `elemento.hidden
   = true` do JS nesses casos não escondia nada — e a falha é muda: o código
   parece certo, o atributo está lá, e o bloco continua na tela.

   Foi assim que os quadrinhos de hábito continuaram aparecendo para o
   colaborador mesmo com o servidor mandando `ladoPessoal: false` (o recurso
   inteiro de `15525f2` nunca funcionou na tela), e que o mini-formulário de
   "novo projeto" aparecia aberto sozinho ao abrir uma tarefa.

   `!important` porque o objetivo é justamente vencer o `display` da classe —
   é o mesmo que o login.html já fazia. Regras `.x[hidden]` espalhadas pelo
   arquivo viraram redundantes, mas ficam: não custam nada e documentam onde
   o problema já tinha aparecido.
   ============================================================================ */
[hidden]{display:none!important}

/* ===== Pacote C — tokens calibrados (terracota quente, neutros quentes, modo escuro) ===== */
:root {
  color-scheme: light;
  --bg:#f7f4ef; --surface:#fffdfb; --surface-2:#f1ece4; --border:#e6ded3;
  --text:#221d19; --muted:#6f665d; --faint:#736a61;
  --accent:#c0563a; --accent-deep:#a5432a; --accent-soft:#f6e6de; --accent-ring:#c0563a33;
  --ok:#4a7c59; --warn:#c0851c; --danger:#b3473f; --info:#4a6f9c;
  --shadow:0 1px 2px rgba(60,40,30,.05),0 4px 14px rgba(60,40,30,.06);
  --shadow-lg:0 8px 30px rgba(60,40,30,.12);
  --r:14px; --r-sm:9px; --r-xs:6px;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-28:28px;
  /* Escala de espaco — nao existia. Sem ela cada tela inventava o proprio
     ritmo: eram 10 valores diferentes so de `gap`. */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* aliases p/ compatibilidade com o CSS/JS já existentes */
  --text-muted:var(--muted); --success:var(--ok); --warning:var(--warn);
  --radius:var(--r); --radius-sm:var(--r-sm); --shadow-sm:var(--shadow);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#1a1613; --surface:#221d19; --surface-2:#2b2521; --border:#38302a;
    --text:#f3ece4; --muted:#a89c8f; --faint:#9a9084;
    --accent:#e0785c; --accent-deep:#eb8a70; --accent-soft:#3a2820; --accent-ring:#e0785c33;
    --ok:#7bb98c; --warn:#e0ab55; --danger:#e08079; --info:#7ea3d0;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
    --shadow-lg:0 10px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1a1613; --surface:#221d19; --surface-2:#2b2521; --border:#38302a;
  --text:#f3ece4; --muted:#a89c8f; --faint:#9a9084;
  --accent:#e0785c; --accent-deep:#eb8a70; --accent-soft:#3a2820; --accent-ring:#e0785c33;
  --ok:#7bb98c; --warn:#e0ab55; --danger:#e08079; --info:#7ea3d0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 10px 34px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f4ef; --surface:#fffdfb; --surface-2:#f1ece4; --border:#e6ded3;
  --text:#221d19; --muted:#6f665d; --faint:#736a61;
  --accent:#c0563a; --accent-deep:#a5432a; --accent-soft:#f6e6de; --accent-ring:#c0563a33;
  --ok:#4a7c59; --warn:#c0851c; --danger:#b3473f; --info:#4a6f9c;
  --shadow:0 1px 2px rgba(60,40,30,.05),0 4px 14px rgba(60,40,30,.06);
  --shadow-lg:0 8px 30px rgba(60,40,30,.12);
}
/* Cor do texto QUE FICA EM CIMA do acento. No claro o branco tem contraste de
   sobra (4,53); no escuro o acento clareia e o branco cai para 3,0 — abaixo do
   minimo da norma. Tinta escura sobre o mesmo terracota sobe para 6,0 e preserva
   o acento vivo aprovado no Pacote C. Precisa existir nos QUATRO blocos, senao o
   botao de tema nao vence o media query num dos sentidos. */
:root{--on-accent:#fff}
@media (prefers-color-scheme:dark){:root{--on-accent:#1a1613}}
:root[data-theme="dark"]{--on-accent:#1a1613}
:root[data-theme="light"]{--on-accent:#fff}

/* Borda do CAMPO de formulario, separada de --border de proposito.
   O --border tambem desenha card, modal e regua: escurece-lo resolveria o
   campo e mudaria o app inteiro junto. Aqui o alvo e so o campo.

   Medido contra o fundo do proprio campo: 1,31:1 -> 1,59:1 no claro e
   1,29:1 -> 1,83:1 no escuro. O campo tem a MESMA cor do card (contraste
   1,00), entao esse fio e a unica coisa que diz onde ele comeca.

   Precisa existir nos QUATRO blocos, senao o botao de tema nao vence o media
   query num dos sentidos — mesma armadilha do --on-accent acima. */
:root{--field-bd:#d6cabb}
@media (prefers-color-scheme:dark){:root{--field-bd:#52463c}}
:root[data-theme="dark"]{--field-bd:#52463c}
:root[data-theme="light"]{--field-bd:#d6cabb}

/* O TRIO DE ESTADO DO DINHEIRO (F3), e ele fica FORA do acento de proposito:
   estado de dinheiro nao e marca. Sao os unicos tres estados do app com cor
   propria alem dos status de tarefa.

     proposto — ambar: esta em aberto, espera uma decisao sua
     aprovado — verde: resolvido
     fechado  — ARDOSIA, e e a UNICA cor FRIA da paleta inteira. Congelado nao
                e "concluido com sucesso", e "nao mexe mais" — e contra uma
                paleta quente o frio carrega esse sentido antes do texto.

   Nos quatro blocos, como o --on-accent e o --field-bd: sem isso o botao de
   tema nao vence o media query num dos dois sentidos. */
:root{
  --prop:#8a5d0f; --prop-bg:#fbf1dc;
  --aprov:#2a6b47; --aprov-bg:#e4f0e8;
  --fech:#4e5a67; --fech-bg:#e8ecf0;
}
@media (prefers-color-scheme:dark){:root{
  --prop:#e0b567; --prop-bg:#3a2f1a;
  --aprov:#7fc79b; --aprov-bg:#1e3328;
  --fech:#a8b6c4; --fech-bg:#252d35;
}}
:root[data-theme="dark"]{
  --prop:#e0b567; --prop-bg:#3a2f1a;
  --aprov:#7fc79b; --aprov-bg:#1e3328;
  --fech:#a8b6c4; --fech-bg:#252d35;
}
:root[data-theme="light"]{
  --prop:#8a5d0f; --prop-bg:#fbf1dc;
  --aprov:#2a6b47; --aprov-bg:#e4f0e8;
  --fech:#4e5a67; --fech-bg:#e8ecf0;
}

/* Altura do campo, em um lugar so. O lote 2 da auditoria fixou 42px no mouse
   e 44px no dedo; sem token isso vivia repetido, e quem mexia num esquecia o
   outro. Os botoes que dividem a linha com um campo (Anexos, Passos, novo
   projeto) leem o mesmo valor e param de escadear. O 44 esta no bloco
   (pointer:coarse) la embaixo, junto das outras regras de toque. */
:root{--field-h:42px}

/* ===== Lote A da proposta visual (29/07/2026) — a fundacao do QUADRO =====

   Tres tokens novos, pelo mesmo motivo que --field-bd existe: eles precisam
   ser regulaveis SEM mexer em --border/--shadow, que desenham o app inteiro.

   --lane   pista da coluna. Tinta sobre o fundo, nao uma cor propria: assim
            acompanha os dois temas sozinha.
   --hair   fio de 1px do card. E ELE que define a borda do card agora — a
            sombra virou so contato. Separado de --border porque --border
            tambem desenha modal, regua e cabecalho.
   --sh-1/2 sombra de contato e de hover. O --shadow legado continua existindo
            para o resto do app; quem foi migrado no Lote A le estes.

   ⚠️ Os QUATRO blocos, sempre (media query + os dois data-theme). Foi a
   armadilha do --on-accent e do --field-bd; nao repita. */
:root{
  --lane:rgba(37,26,18,.035); --hair:rgba(37,26,18,.07);
  --sh-1:0 1px 2px rgba(37,26,18,.05),0 2px 6px rgba(37,26,18,.04);
  --sh-2:0 2px 4px rgba(37,26,18,.05),0 8px 20px rgba(37,26,18,.08);
}
@media (prefers-color-scheme:dark){:root{
  /* ⚠️ No escuro a pista RECUA com preto, nao clareia com branco. Branco a
     3,5% sobre --bg da rgb(34,30,27) — a MESMA cor do card em --surface
     (rgb(34,29,25)): o card sumiria dentro da pista, e a inversao de elevacao
     que este lote existe para consertar voltaria pela porta dos fundos.
     Com tinta preta a pista vai para rgb(20,17,15) e o card flutua de novo.
     Medido nos dois temas; nao troque por um valor "simetrico" ao do claro. */
  --lane:rgba(0,0,0,.22); --hair:rgba(255,255,255,.07);
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.22);
  --sh-2:0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  /* ⚠️ No escuro a pista RECUA com preto, nao clareia com branco. Branco a
     3,5% sobre --bg da rgb(34,30,27) — a MESMA cor do card em --surface
     (rgb(34,29,25)): o card sumiria dentro da pista, e a inversao de elevacao
     que este lote existe para consertar voltaria pela porta dos fundos.
     Com tinta preta a pista vai para rgb(20,17,15) e o card flutua de novo.
     Medido nos dois temas; nao troque por um valor "simetrico" ao do claro. */
  --lane:rgba(0,0,0,.22); --hair:rgba(255,255,255,.07);
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.22);
  --sh-2:0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --lane:rgba(37,26,18,.035); --hair:rgba(37,26,18,.07);
  --sh-1:0 1px 2px rgba(37,26,18,.05),0 2px 6px rgba(37,26,18,.04);
  --sh-2:0 2px 4px rgba(37,26,18,.05),0 8px 20px rgba(37,26,18,.08);
}

/* Raios do quadro. NAO mexo em --r/--r-sm de proposito: eles tem 47 usos e
   desenham modal, header, lateral e agenda — nada disso entrou no mockup
   aprovado, e trocar por token global mudaria tudo em silencio. Estes sao
   escopados no quadro; a unificacao geral e um lote proprio. */
:root{--r-lane:16px; --r-card:12px; --r-chip:8px; --fs-15:15px}

/* ===== Lote B — as cores de status COMO TINTA =====

   --warn e --danger foram calibrados para PREENCHER fundo, e no Lote B o prazo
   deixa de ter fundo: vira texto. Como texto eles reprovam — foi o que sobrou
   de contraste do Lote A: `due-soon` media 3,13:1 sobre o card no tema claro.

   No ESCURO os mesmos hex passam com folga (--warn da 8,05:1 sobre o card),
   porque lá eles sao claros sobre fundo escuro. Por isso a variante escurece
   SO o tema claro e aponta de volta para o token no escuro — um valor unico
   para os dois temas resolveria um e estragaria o outro.

   Medido no claro: --warn 3,13 -> --warn-ink 5,55 · --danger 4,49 ->
   --danger-ink 6,61. Quatro blocos, sempre (media query + os dois
   data-theme): mesma armadilha do --on-accent, do --field-bd e do --lane. */
:root{--warn-ink:#8a5f10; --danger-ink:#9d3c35}
@media (prefers-color-scheme:dark){:root{--warn-ink:var(--warn); --danger-ink:var(--danger)}}
:root[data-theme="dark"]{--warn-ink:var(--warn); --danger-ink:var(--danger)}
:root[data-theme="light"]{--warn-ink:#8a5f10; --danger-ink:#9d3c35}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:var(--fs-14);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
.app{max-width:1400px;margin:0 auto;padding:16px}

.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 18px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-sm);flex-wrap:wrap;gap:12px}
.header-left{display:flex;align-items:center;gap:12px}

/* ===================== MONTSERRAT (S0.4) =====================
   HOSPEDADA AQUI, nunca do CDN do Google. Tres razoes, e as tres pesam:
   o app funciona instalado e SEM INTERNET (PWA) — fonte remota vira texto
   invisivel offline; ele quer VENDER o app, e depender do servidor de
   terceiro poe a marca do cliente na mao de um dominio que nao e dele; e o
   preview do harness nao alcanca CDN, entao o teste mentiria.

   `font-display:swap`: o texto aparece na hora com a letra do sistema e
   troca quando a fonte chega. Sem isso, o cabecalho nasce em branco.
   Subset LATIN apenas (U+0000-00FF) — cobre todo o portugues, inclusive
   ã ç õ é. 4 pesos x ~18 KB = ~75 KB, baixados so no espaco que os usa.
   Licenca: SIL Open Font License 1.1, que permite hospedar. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('fontes/montserrat-400.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('fontes/montserrat-500.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fontes/montserrat-600.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fontes/montserrat-700.woff2') format('woff2');unicode-range:U+0000-00FF}

/* A letra do espaco entra por ATRIBUTO no <html>, nao por classe: o `--sans`
   e lido no `body` e em dezenas de regras, e trocar o TOKEN alcanca todas de
   uma vez. Sem o atributo, nada muda e nenhuma fonte e baixada. */
:root[data-fonte="montserrat"]{
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif}

/* Cores do espaco (S0.3), nas Configuracoes. */
.cor-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3)}
.cor-campo{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);
  color:var(--text);cursor:pointer}
/* O seletor nativo e um input pequeno; sem tamanho explicito ele nasce
   minusculo em alguns navegadores e vira alvo dificil. */
.cor-campo input[type=color]{width:40px;height:32px;padding:2px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.cor-campo em{font-style:normal;font-family:ui-monospace,Consolas,monospace;
  font-size:var(--fs-12);color:var(--faint)}
/* O aviso de contraste usa a cor de ALERTA, nao a de erro: a escolha nao esta
   errada — a cor pode ser exatamente a da marca —, so nao serve para texto. */
.cor-aviso{color:var(--warning);line-height:1.45}
@media (pointer:coarse){ .cor-campo input[type=color]{width:48px;height:44px} }

/* Seletor de espaco (S0.3). So aparece com 2+ espacos — ver renderEspacos().
   `position:relative` no pai porque o menu e absoluto e precisa ancorar nele,
   nao no header (que tem flex-wrap e moveria o menu ao quebrar linha). */
.espaco-sel{position:relative}
.espaco-bt{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  cursor:pointer;font-family:inherit;font-size:var(--fs-13);font-weight:600;
  color:var(--text);transition:background-color .12s,border-color .12s}
.espaco-bt:hover{background:var(--bg);border-color:var(--field-bd)}
.espaco-bt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.espaco-bt .ic{width:14px;height:14px;color:var(--faint)}
.espaco-pt{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent)}
.espaco-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column;gap:2px}
.espaco-op{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  border:0;background:transparent;border-radius:var(--r-xs);cursor:pointer;
  font-family:inherit;font-size:var(--fs-13);color:var(--text);text-align:left}
.espaco-op:hover{background:var(--bg)}
.espaco-op:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.espaco-op.on{font-weight:600}
.espaco-op-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.espaco-op .ic{width:14px;height:14px;color:var(--accent);flex:none}
.espaco-tag{font-size:var(--fs-11);color:var(--faint);text-transform:uppercase;
  letter-spacing:.04em;flex:none}
@media (pointer:coarse){ .espaco-bt,.espaco-op{min-height:44px} }
/* No celular o cabecalho quebra em linhas; o menu nao pode passar da tela. */
@media (max-width:700px){ .espaco-menu{min-width:0;width:min(280px,calc(100vw - 32px))} }
h1.logo,.logo{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-20);font-weight:700;color:var(--text);letter-spacing:-.01em}
.logo .mark{width:27px;height:27px;border-radius:8px;background:linear-gradient(150deg,var(--accent),var(--accent-deep));display:grid;place-items:center;color:var(--on-accent);box-shadow:0 2px 6px var(--accent-ring);flex-shrink:0}
.logo .mark svg{width:16px;height:16px}
.greeting{color:var(--text-muted);font-size:var(--fs-13)}
.greeting strong{color:var(--text)}
.header-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.avatar{width:28px;height:28px;border-radius:50%}
.btn{padding:8px 14px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-13);font-weight:500;color:var(--text);transition:background-color .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* era #b3553a fixo: escurecia certo no tema claro e errado no escuro */
.btn.primary:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--danger)}
.btn-sm{padding:4px 8px;font-size:var(--fs-12)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.habits{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.habit-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;flex:1;min-width:180px;box-shadow:var(--shadow-sm)}
.habit-title{font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.habit-progress-row{display:flex;align-items:center;gap:8px}
.habit-bar{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.habit-fill{height:100%;transition:width .3s}
.habit-count{font-weight:600;font-size:var(--fs-13)}
.habit-controls{display:flex;gap:4px;margin-top:6px}
.habit-controls .btn{padding:2px 8px;font-size:var(--fs-12);flex:1;justify-content:center}

.main{display:grid;grid-template-columns:280px 1fr;gap:16px}
/* Item de grid nasce com min-width:auto, que é a largura MÍNIMA do conteúdo.
   Sem isto a fileira de abas (369px, não quebra) empurrava a coluna além da
   tela e a pagina inteira ganhava 6px de rolagem lateral no celular. */
.main>*{min-width:0}
@media(max-width:900px){.main{grid-template-columns:1fr}}
.sidebar{display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--shadow-sm)}
/* Titulo de card da lateral em SENTENCE CASE (mockup). Maiuscula com
   espacamento e um recurso de hierarquia: usada nos nove cards seguidos da
   lateral ela para de hierarquizar e vira textura. Ela continua onde separa
   de verdade — os rotulos do trilho do modal e o "ATRASADAS" da pista. */
.card h3{font-size:var(--fs-13);font-weight:650;letter-spacing:-.005em;color:var(--text);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}

.pomo{text-align:center}
.pomo-timer{font-size:42px;font-weight:700;font-variant-numeric:tabular-nums;margin:8px 0 4px;letter-spacing:-1px}
.pomo-status{font-size:var(--fs-12);color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.pomo-status.work{color:var(--accent)}
.pomo-status.break{color:var(--success)}
.pomo-controls{display:flex;gap:6px;justify-content:center}
.pomo-task{font-size:var(--fs-12);color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border);min-height:16px}
.pomo-task strong{color:var(--text)}
/* ===== O QUE APARECE NO TOPO (logotipo / nome / os dois) =====
   Mora dentro do bloco do logotipo e reusa os botoes `.quem-op` do "Quem faz":
   e o mesmo gesto — escolher UM entre poucos — e inventar um segundo desenho
   para o mesmo gesto e o que faz um app parecer costurado de retalhos. */
.marca-modo{display:flex;flex-direction:column;gap:6px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--border)}
.marca-modo-rot{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;color:var(--text-muted)}
.marca-modo-ops{display:flex;gap:6px;flex-wrap:wrap}
.marca-modo-ops .quem-op{flex:1 1 auto;justify-content:center;white-space:nowrap}
.marca-modo small{margin-top:2px}

.pomo-counter{font-size:var(--fs-12);color:var(--text-muted);margin-top:4px}
/* "Modo Foco" dentro do card do Pomodoro. Largura inteira e abaixo do fio que
   o `.pomo-task` ja desenha: assim ele le como MODO do card, e nao como um
   quarto controle do cronometro ao lado de Iniciar/Pausar/Reset. Ligado, ele
   se acende — e um estado que fica, nao um clique que passa. */
.pomo-foco{width:100%;justify-content:center;margin-top:10px}
body.focus-mode .pomo-foco{background:var(--accent-soft);color:var(--accent-deep);
  border-color:transparent;font-weight:600}

.mit-list{display:flex;flex-direction:column;gap:6px}
.mit-slot{display:flex;align-items:center;gap:8px;padding:8px;background:var(--surface-2);border-radius:var(--r-sm);font-size:var(--fs-13);border-left:3px solid var(--accent)}
.mit-slot.empty{color:var(--text-muted);font-style:italic;border-left-color:var(--border);cursor:pointer}
.mit-slot.done{opacity:.6;text-decoration:line-through}
.mit-num{width:20px;height:20px;background:var(--accent);color:var(--on-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-12);font-weight:700;flex-shrink:0}
.mit-slot.empty .mit-num{background:var(--border);color:var(--text-muted)}
.mit-text{flex:1;word-break:break-word;cursor:pointer}
.mit-clear{color:var(--text-muted);cursor:pointer;font-size:var(--fs-16);line-height:1}
.mit-clear:hover{color:var(--danger)}
.streak{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent);padding:2px 8px;border-radius:10px;font-size:var(--fs-12);font-weight:600}

.agenda-list{display:flex;flex-direction:column;gap:6px}
.agenda-item{padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm);border-left:3px solid var(--info);font-size:var(--fs-12);line-height:1.4;cursor:pointer;transition:background-color .15s,border-color .15s}
.agenda-item:hover{background:color-mix(in srgb,var(--info) 12%,var(--surface))}
.agenda-item.past{opacity:.55}
.agenda-item.now{background:color-mix(in srgb,var(--warn) 15%,var(--surface));border-left-color:var(--warn)}
.agenda-time{font-weight:700;color:var(--info);font-size:var(--fs-12)}
.agenda-title{font-weight:500;margin-top:2px;word-break:break-word}
.agenda-loc{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px}
.agenda-sync-info{font-size:var(--fs-12);color:var(--text-muted);text-align:right;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);min-height:14px}
#btnSyncCal.spinning{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.cat-list{display:flex;flex-direction:column;gap:6px}
.cat-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-13)}
.cat-item:hover{background:var(--surface-2)}
.cat-item.active{background:var(--surface-2);font-weight:600}
.cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cat-count{margin-left:auto;color:var(--text-muted);font-size:var(--fs-12)}

.content{display:flex;flex-direction:column;gap:14px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* max-width + overflow-x: no celular a fileira desliza sozinha em vez de
   esticar a coluna. No desktop nada muda (cabe, entao nao rola). */
.view-tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:var(--r);border:1px solid var(--border);width:100%;max-width:100%;overflow-x:auto;scrollbar-width:thin}
/* `width:100%` no lugar de `fit-content`, e cada aba com `flex-grow:1`.
   A fileira ficou ORFA quando a busca saiu desta linha para o cabecalho: era a
   busca que tinha `flex:1` e esticava, e sem ela a pilula encolheu no canto
   esquerdo com um vazio do tamanho da tela a direita.
   `flex-grow` e nao `flex:1`: com `grow` o espaco LIVRE e repartido por cima
   da largura de cada texto, entao "Hoje" continua menor que "Concluidas" em
   vez de as sete virarem celulas iguais — que e o "proporcionalmente" que ele
   pediu. O `flex-shrink:0` fica: e ele que faz a fileira DESLIZAR em vez de
   espremer quando nao cabe.
   ⚠️ Escopado em `.view-tabs .tab`, nunca na `.tab` solta: os alternadores
   so-mobile (`.mob-agenda-switch`, `.mob-mais-switch`) reusam a mesma classe,
   e mexer nela mudaria os dois de tabela. */
.view-tabs .tab{flex-shrink:0;flex-grow:1;text-align:center;padding:9px 18px;font-size:var(--fs-14)}
.tab{padding:6px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-13);font-weight:500;color:var(--text-muted);transition:background-color .15s,color .15s}
.tab.active{background:var(--accent);color:var(--on-accent)}
.search{flex:1;min-width:200px}
.search input{width:100%;padding:8px 12px;border:1px solid var(--field-bd);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-13);font-family:inherit}

/* `align-items:start` = cada pista tem a altura do que carrega (mockup). Sem
   isto o grid estica as tres para a altura da maior, e a coluna vazia ocupa a
   tela inteira fingindo ter conteudo. A area de soltar o card arrastado NAO
   depende disto: ela vem do `.cards{min-height:50px;flex:1}` (64px enquanto
   arrasta), que continua valendo. */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-4);align-items:start}
@media(max-width:700px){.kanban{grid-template-columns:1fr}}
/* flex-column para o .cards poder ESTICAR e preencher a coluna: sem isso a
   area de soltar (.cards) so tinha a altura dos cards, e mais da metade da
   coluna (o espaco vazio abaixo) nao aceitava drop — o card voltava. */
/* LOTE A — a elevacao estava INVERTIDA: o card usava var(--bg) (a cor do
   CHAO) dentro de uma coluna pintada de var(--surface) (o branco). Medido nos
   dois temas: card rgb(247,244,239) dentro de coluna rgb(255,253,251) no
   claro, card rgb(26,22,19) dentro de coluna rgb(34,29,25) no escuro. Ou
   seja, o objeto que se toca era mais escuro que a caixa que o segura, e o
   card lia como buraco recortado em vez de cartao apoiado.
   Agora: chao -> pista tingida (sem borda, sem sombra) -> card claro que
   flutua. A coluna deixa de competir com o card por elevacao. */
/* O `min-height:300px` saiu com o `align-items:start`: eram DOIS donos do
   mesmo sintoma (a coluna vazia alta), e mexer num so nao resolvia nada. */
/* `min-width:0`: a MESMA guarda que o `.main>*` ja tinha, e que faltava aqui.
   Item de grid nasce com `min-width:auto` — a largura MINIMA do conteudo —,
   entao `repeat(3,1fr)` nao dividia de verdade: a coluna se recusava a
   encolher abaixo do card e empurrava o quadro para fora da tela. Media 33px
   de rolagem lateral na pagina inteira entre 700 e 900px (nao aparece a
   1280px, onde sobra espaco, nem abaixo de 700px, onde o quadro vira uma
   coluna so — por isso passou despercebido). Defeito antigo, achado medindo
   outra coisa. */
.column{background:var(--lane);border:0;border-radius:var(--r-lane);padding:var(--e-3);box-shadow:none;display:flex;flex-direction:column;min-width:0}
/* `gap` no lugar de `space-between`: com o `+` no cabecalho sao TRES filhos, e
   o space-between jogaria o contador para o meio da pista. */
.column-header{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-3);padding:var(--e-1) var(--e-1) 0;border-bottom:0}
/* O status era dito por DUAS coisas ao mesmo tempo (o texto colorido e a
   regua de 2px), e o texto colorido reprovava contraste: "Em Andamento" dava
   3,13:1 sobre o branco. Agora quem carrega a cor e um ponto — que nao
   precisa passar em contraste de TEXTO — e o titulo volta a ser tinta cheia.
   O ponto sai de ::before para nao precisar mexer no HTML das 3 colunas. */
.column-title{font-weight:600;font-size:var(--fs-14);color:var(--text);display:inline-flex;align-items:center;gap:var(--e-2)}
.column-title::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--muted);flex:none}
.column-count{background:var(--surface);border:1px solid var(--hair);padding:2px 9px;border-radius:999px;font-size:var(--fs-12);color:var(--text-muted);font-weight:600;font-variant-numeric:tabular-nums}
.column[data-status=todo] .column-title::before{background:var(--info)}
.column[data-status=doing] .column-title::before{background:var(--warning)}
.column[data-status=done] .column-title::before{background:var(--success)}
.cards{display:flex;flex-direction:column;gap:var(--e-2);min-height:50px;flex:1 1 auto}
.cards.drag-over{background:var(--accent-soft);border-radius:var(--r-sm)}
/* Botão "Nova tarefa" no rodapé da coluna A Fazer (estilo "adicionar card"). */
.btn-add-task{width:100%;margin-top:2px;padding:9px 12px;border:1px dashed var(--border);background:transparent;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-13);font-weight:500;color:var(--text-muted);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color .15s,border-color .15s,color .15s}
.btn-add-task:hover{border-color:var(--info);color:var(--info);background:var(--accent-soft)}
.btn-add-task .ic{width:15px;height:15px}
/* A tarja lateral FICA (decisao do Jander, 30/07). Eu a tinha tirado achando
   que era marca de ATRASO repetindo o texto do rodape — nao e: e PRIORIDADE,
   e prioridade nao tem outro lugar no card. Os 3px existem em TODO card,
   transparentes: reservar a faixa em todos e o que impede o texto dos outros
   de andar 2px para o lado quando o vizinho e alta. */
.task-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:14px 16px;cursor:grab;transition:box-shadow .16s,border-color .16s,transform .16s,opacity .16s;border-left:3px solid transparent;position:relative;box-shadow:var(--sh-1)}
.task-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--border)}
.task-card:active{cursor:grabbing}
/* A prioridade era a QUARTA cor de todo card (alta vermelha, média laranja,
   baixa azul) — e "média" é o padrão, então a tarja pintava quase o quadro
   inteiro sem distinguir nada. Só a ALTA muda o que se faz agora, então só ela
   tinge; as outras duas continuam declaradas, uma linha, para reverter fácil. */
.task-card.priority-high{border-left-color:var(--danger)}
.task-card.priority-med{border-left-color:transparent}
.task-card.priority-low{border-left-color:transparent}
.task-card.done{opacity:.65}
.task-card.done .task-title{text-decoration:line-through}
.task-card.focus-active{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}

/* ===== LOTE B — as quatro faixas do card (ver taskCard() no app.js) =====
   eyebrow (onde) · título (o quê) · pílula (por que parou) · progresso ·
   rodapé (quando/quanto). O que era uma sopa de 11 pílulas iguais. */

/* eyebrow: o projeto entra como PONTO de cor + texto neutro. A cor que o
   usuário escolhe nunca carrega texto — era o pior contraste do app (2,81:1
   de texto branco sobre o #c8901e do MBA). */
.task-eye{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:6px;
  font-size:var(--fs-12);font-weight:600;color:var(--muted)}
.task-pdot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.task-proj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-sep{color:var(--faint);flex:none}
/* "passo de: X" morava numa pílula no meio dos metadados; é procedência, então
   vem junto do projeto. Corta por CSS, não por slice(24) no JS: assim a coluna
   larga mostra o título inteiro em vez de perder letras sempre. */
.task-parent{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--faint);font-weight:600}
.task-parent b{font-weight:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-parent .ic{width:12px;height:12px;flex:none}
.task-title{font-weight:600;font-size:var(--fs-15);line-height:1.38;letter-spacing:-.012em;margin-bottom:var(--e-2)}
/* margin-left:auto porque as ações agora dividem a linha com o eyebrow — antes
   era o justify-content:space-between do .task-header que as empurrava. */
.task-actions{display:flex;gap:2px;margin-left:auto;flex:none;opacity:0;transition:opacity .16s}
.task-card:hover .task-actions{opacity:1}
.task-action{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;color:var(--text-muted);font-size:var(--fs-14);background:transparent;border:none}
.task-action:hover{background:var(--surface-2);color:var(--text)}

/* Pílula de estado e chip de etiqueta: UMA declaração para os dois, porque a
   fórmula de cor é a mesma e duas cópias divergiriam (é o padrão "dois donos"
   que já apareceu quatro vezes neste arquivo).

   A fórmula existe para aceitar a cor que o USUÁRIO escolheu sem calcular
   contraste etiqueta por etiqueta: o texto é a cor dela puxada para a tinta do
   tema, o fundo é a mesma cor diluída no card.

   ⚠️ O 55% NÃO é gosto — é o resultado de uma varredura. A paleta é FECHADA
   (`PROJ_COLORS` no app.js serve projeto e etiqueta: 10 cores, mais as 15 de
   fábrica em tags.js = 25 possíveis), então dá para medir todas em vez de
   adivinhar. Medido no tema claro, sobre o card, com a etiqueta nas 25 cores:
     82% (o valor antigo) → 7 reprovam AA, a pior em 2,83:1 (`#d4a017`)
     70% → 5 reprovam · 65% → 3 · 60% → 1
     55% → NENHUMA reprova, a pior fica em 4,76:1
   Baixar mais só lava a cor sem ganhar nada. Se um dia a paleta virar seletor
   livre de cor, esta fórmula deixa de bastar: amarelo puro não passa em
   percentual nenhum (medido: 2,91:1 a 55%), porque o fundo clareia junto. */
.task-pill,.tag-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  font-size:var(--fs-12);font-weight:650;letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-chip);
  background:color-mix(in srgb,var(--tg) 15%,var(--surface));
  color:color-mix(in srgb,var(--tg) 55%,var(--text));
  border:1px solid color-mix(in srgb,var(--tg) 32%,transparent)}
.task-pill{margin-bottom:var(--e-2)}
.task-pill .ic{width:12px;height:12px;flex:none}
.task-pill b{font-weight:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Trava de vínculo (E2) não tem cor de usuário: entra na mesma fórmula pelo
   --tg, então ela e a etiqueta de bloqueio ficam com o mesmo peso na tela. */
.task-pill.trava{--tg:var(--warn)}
/* Entrega esperando conferência (F2, 3ª fatia). Azul e não laranja de
   propósito: laranja é impedimento, isto é convite a agir. */
.task-pill.entrega{--tg:var(--info)}

/* Progresso no lugar do selo "2/5". A barra é o único lugar do card que fala
   do checklist — e por isso é ela que carrega o passo obrigatório em aberto,
   com o cadeado ao lado do número. A pílula fala de outra coisa. */
.task-prog{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-2)}
.task-bar{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.task-bar>i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.task-bar.trava>i{background:var(--warn)}
.task-prog em{font-style:normal;font-size:var(--fs-12);font-weight:650;color:var(--muted);
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;flex:none}
.task-prog em .ic{width:12px;height:12px;color:var(--warn-ink)}

/* Rodapé: metadado é TEXTO com ícone, não pílula. O prazo é a única coisa que
   ganha cor aqui, e vai para a direita — é o que se procura primeiro. */
.task-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-1) var(--e-3);
  font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.task-foot>span{display:inline-flex;align-items:center;gap:5px}
.task-foot .ic{width:13px;height:13px;color:var(--faint)}
.task-due{margin-left:auto;font-weight:700}
.task-due.soon{color:var(--warn-ink)}
.task-due.late{color:var(--danger-ink)}
/* Mensagem não lida. O contador de conversa é o ÚNICO metadado que muda de cor
   sem ser prazo — e muda porque é a única coisa no rodapé que pede uma ação de
   quem está olhando. O ponto vai à direita do número (não um selo separado):
   o que ficou novo foi a conversa que o número já anuncia. */
.task-foot>span.nao-lido{color:var(--accent-deep);font-weight:700}
.task-foot>span.nao-lido .ic{color:var(--accent-deep)}
.task-foot>span.nao-lido::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;margin-left:1px}
/* Quem faz a tarefa (F2, 3ª fatia). SEM cor de identidade de propósito: quem
   identifica é a letra. Uma cor por pessoa traria de volta o problema da cor
   escolhida por usuário carregando texto (o chip de projeto media 2,81:1) e
   somaria cor num card que o Lote B existiu justamente para calar.
   A borda é da cor do CARD, não uma linha: é o que abre o vão entre os
   círculos sobrepostos sem desenhar contorno nenhum. */
.task-avs{display:inline-flex;align-items:center;flex:none}
.task-avs b,.task-avs i{width:22px;height:22px;border-radius:50%;flex:none;font-style:normal;
  display:grid;place-items:center;font-size:var(--fs-12);font-weight:700;line-height:1;
  background:var(--surface-2);color:var(--text);border:2px solid var(--surface)}
.task-avs b+b,.task-avs i{margin-left:-7px}
.task-avs i{color:var(--muted);font-weight:600}
.task-desc{font-size:var(--fs-12);color:var(--text-muted);margin-bottom:var(--e-2)}

/* Barra de periodo — compartilhada por Semana e Mes (mesmo gesto, mesma peca).
   O titulo fica no centro com o "Hoje" ao lado; as setas nas pontas. */
.nav-periodo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.nav-periodo-meio{display:flex;align-items:center;gap:10px;min-width:0}
.nav-periodo h2{font-size:var(--fs-16);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-periodo .btn{flex-shrink:0}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media(max-width:800px){.week-grid{grid-template-columns:repeat(2,1fr)}}
.week-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;min-height:150px}
.week-day.today{border-color:var(--accent);border-width:2px}
.week-day-header{font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;letter-spacing:.5px}
.week-day.today .week-day-header{color:var(--accent);font-weight:700}
.week-day-date{font-size:18px;font-weight:700;margin-bottom:8px}
.week-tasks{display:flex;flex-direction:column;gap:4px}
.week-task{font-size:var(--fs-12);padding:3px 5px;background:var(--surface-2);border-radius:3px;border-left:2px solid var(--accent);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-task.done{opacity:.6;text-decoration:line-through}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--surface);padding:8px;border-radius:var(--r);border:1px solid var(--border)}
.month-header{text-align:center;font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);padding:6px 4px;font-weight:600}
.month-cell{min-height:90px;padding:6px;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:background .15s}
.month-cell:hover{background:var(--surface-2)}
.month-cell.other{opacity:.3}
.month-cell.today{background:var(--accent-soft);border-color:var(--accent)}
.month-cell-date{font-size:var(--fs-12);font-weight:600;margin-bottom:4px}
.month-cell-dots{display:flex;gap:2px;flex-wrap:wrap}
.month-dot{width:6px;height:6px;border-radius:50%}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
@media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:10px;background:var(--surface-2);border-radius:var(--r-sm)}
.stat-value{font-size:24px;font-weight:700;color:var(--accent)}
.stat-label{font-size:var(--fs-12);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.progress-grid{grid-template-columns:1fr}}
.chart-box{background:var(--surface);padding:14px;border-radius:var(--r);border:1px solid var(--border)}
/* Mesmo tratamento do `.card h3`: titulo de caixa e sentence case. Estes dois
   ficaram para tras na primeira passada e so apareceram varrendo aba por aba
   atras de `text-transform:uppercase` — ler o CSS nao teria achado, porque a
   regra esta certa para o que ela era antes. */
.chart-box h3{font-size:var(--fs-13);font-weight:650;color:var(--text);margin-bottom:10px;letter-spacing:-.005em}
.chart-wrap{position:relative;height:200px}
.day-progress-bar{background:var(--surface-2);height:20px;border-radius:10px;overflow:hidden;position:relative;margin:8px 0}
.day-progress-fill{height:100%;background:linear-gradient(90deg,var(--success),#6fa97f);transition:width .5s}
.day-progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--fs-12);font-weight:600}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-backdrop.show{display:flex}
.modal{background:var(--surface);border-radius:var(--r);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal h2{font-size:18px;margin-bottom:14px}
.field{margin-bottom:12px}
.field label{display:block;font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-weight:600;letter-spacing:.5px}
/* ---------------------------------------------------------------------------
   CAMPOS DE FORMULARIO — um desenho so, em todo modal do app.

   O que havia: 8px de padding (alvo de 37px, abaixo do minimo de 44px que o
   lote 2 da auditoria fixou para o resto do app), SEM `color` declarado — o
   texto digitado herdava o padrao do navegador em vez do token, e no tema
   escuro saia branco puro no lugar do --text — e nenhum estado de hover.

   O seletor cobre `.field` e os poucos campos que ficam FORA dele por serem
   linhas compostas (o campo divide a linha com um contador e um botao). Os
   campos compactos da lateral (.lem-add, .search) ficam de fora DE PROPOSITO:
   sao controles de lista densa, nao formulario, e engorda-los empurraria o
   quadro para baixo — que e o problema que o bottom nav resolveu.

   As exclusoes do :not() nao sao zelo: sem elas o `min-height` esticaria as
   caixas de marcar para 42px e o texto editavel do checklist (que e
   transparente de proposito) viraria um campo com borda.

   TRES CAMPOS ENTRARAM AQUI DEPOIS (29/07/2026), e o motivo vale registrar:
   eles nao tinham UMA LINHA de CSS. Medidos no app rodando, caiam no desenho
   padrao do navegador — 25px de altura contra 42px dos vizinhos, fonte de
   13,3px, canto reto, borda `inset` de 3D e, no tema escuro, um cinza-frio
   #3b3b3b dentro de uma paleta quente. Sao o "Cole um link" dos Anexos, o
   "Adicionar passo" e o "Nome do novo projeto". Nenhum deles mora num
   `.field` (sao linhas compostas), entao a regra passava longe em silencio.
   Ao procurar campo torto, procure por AUSENCIA de regra, nao por regra
   errada: quem esta na lista abaixo aparece na medicao, quem nao esta some.
   --------------------------------------------------------------------------- */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.chk-text),
.field textarea,.field select,
.cargo-item input[type=text],.cargo-novo input,.vinc-novo input[type=text],
.anexo-add input[type=url],.checklist-input input[type=text],.novo-proj input[type=text]{
  width:100%;padding:10px 12px;border:1px solid var(--field-bd);border-radius:var(--r-sm);
  font-size:var(--fs-14);font-family:inherit;line-height:1.35;
  background:var(--surface);color:var(--text);min-height:var(--field-h);
  transition:border-color .12s,box-shadow .12s}

/* Hover so no que aceita digitacao: convida sem piscar a tela inteira. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.chk-text):hover,
.field textarea:hover,.field select:hover,
.cargo-item input[type=text]:hover,.cargo-novo input:hover,.vinc-novo input[type=text]:hover,
.anexo-add input[type=url]:hover,.checklist-input input[type=text]:hover,
.novo-proj input[type=text]:hover{
  border-color:var(--muted)}

.field input::placeholder,.field textarea::placeholder,
.cargo-item input[type=text]::placeholder,.cargo-novo input::placeholder,
.anexo-add input[type=url]::placeholder,.checklist-input input[type=text]::placeholder,
.novo-proj input[type=text]::placeholder{color:var(--faint)}

/* A BORDA DE ACENTO NO FOCO NUNCA APARECEU. Mesma armadilha do :disabled logo
   abaixo, e vale reler as duas juntas: `input:focus-visible` (la pelo meio do
   arquivo) vale (0,1,1) e PERDE a `border-color` para a regra base (0,5,1).
   O anel de 3px sempre apareceu — ele e `box-shadow`, que so aquela regra
   declara, entao nao havia com quem competir. So a borda ficava para tras, e
   o defeito passou despercebido justamente porque o anel disfarcava.

   Repetir a lista aqui devolve a borda. NAO troque isto por um `!important`:
   o `.chk-text` e o `.tg-nome` tem foco proprio de proposito (viram campo so
   quando focados) e seriam atropelados. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.chk-text):focus-visible,
.field textarea:focus-visible,.field select:focus-visible,
.cargo-item input[type=text]:focus-visible,.cargo-novo input:focus-visible,
.vinc-novo input[type=text]:focus-visible,
.anexo-add input[type=url]:focus-visible,.checklist-input input[type=text]:focus-visible,
.novo-proj input[type=text]:focus-visible{
  border-color:var(--accent)}

/* Campo travado precisa PARECER travado — o e-mail do membro ja convidado, o
   fuso detectado do aparelho e o nome do app de quem foi convidado ficavam
   iguais aos editaveis.

   O :not() repetido NAO e copia-e-cola preguicosa: cada :not() soma a
   especificidade do que esta dentro dele, entao a regra base acima vale
   (0,5,1). Escrever so `.field input:disabled` daria (0,2,1) e PERDERIA para
   ela — o fundo cinza simplesmente nao apareceria. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.chk-text):disabled,
.field select:disabled,.field textarea:disabled,
.cargo-item input[type=text]:disabled,.cargo-novo input:disabled{
  background:var(--surface-2);color:var(--muted);cursor:not-allowed}

/* Seta propria no select: a do sistema muda de cara a cada navegador e nao
   acompanha o tema. Tom unico porque background-image nao aceita currentColor
   — este cinza passa nos dois fundos. */
.field select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8177' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}

.field textarea{min-height:70px;resize:vertical}
.field small{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:4px;line-height:1.35;text-transform:none;letter-spacing:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Quando o portal esconde um dos dois campos da linha, ela vira coluna única —
   senão sobraria um vão do tamanho de um campo ao lado do que ficou. */
.field-row.uma-coluna{grid-template-columns:1fr}
.suggestions{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-sm);padding:10px;margin:10px 0;font-size:var(--fs-13)}
.suggestions h4{font-size:var(--fs-12);text-transform:uppercase;color:var(--accent);margin-bottom:6px;letter-spacing:.5px}
.sug-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sug-custo{font-size:var(--fs-12);color:var(--muted)}
.sug-status{min-height:0}
.sug-load{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-12);color:var(--muted);margin-top:6px}
.sug-erro{display:block;font-size:var(--fs-12);line-height:1.5;color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-radius:var(--r-xs);padding:8px 10px;margin-top:6px}
/* Linha composta: campo + botao. O `stretch` e o que impede a escada — sem
   ele o botao fica com a propria altura (26px) ao lado de um campo de 42px.
   O "+" vira quadrado porque um glifo de 12px num botao alto fica perdido. */
.checklist-input{display:flex;gap:6px;margin-top:4px;align-items:stretch}
.checklist-input input{flex:1}
.checklist-input .btn{min-height:var(--field-h);min-width:var(--field-h);
  font-size:var(--fs-16);padding-left:0;padding-right:0}
.checklist-items{list-style:none;margin-top:8px}
.checklist-items li{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:var(--fs-13)}
.checklist-items input[type=checkbox]{width:16px;height:16px;flex-shrink:0}
/* Texto do item editável: parece texto comum, revela a borda no hover e vira
   campo claro ao focar — editar sem transformar a lista num formulário. */
.checklist-items .chk-text{flex:1;min-width:0;font:inherit;font-size:var(--fs-13);color:var(--text);
  background:transparent;border:1px solid transparent;border-radius:var(--r-xs);padding:3px 6px;transition:border-color .12s,background .12s}
.checklist-items .chk-text:hover{border-color:var(--field-bd)}
.checklist-items .chk-text:focus{border-color:var(--accent);background:var(--surface);outline:none}
.checklist-items .remove{color:var(--text-muted);cursor:pointer;flex-shrink:0;font-size:var(--fs-16);line-height:1;padding:0 2px}
.checklist-items .remove:hover{color:var(--danger)}
.checklist-items .remove:focus-visible{color:var(--danger);outline:2px solid var(--accent);outline-offset:1px}

/* ===== Vinculo entre tarefas (Pacote E2) ===== */
.vinc-lista{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.vinc-vazio{font-size:var(--fs-12);color:var(--text-muted);padding:2px 0}
.vinc-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface-2)}
.vinc-item.ok{background:transparent}
.vinc-ic{display:inline-flex;color:var(--warn);flex-shrink:0}
.vinc-item.ok .vinc-ic{color:var(--ok)}
.vinc-ic .ic{width:14px;height:14px}
.vinc-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.vinc-txt b{font-size:var(--fs-13);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vinc-como{font-size:var(--fs-11);color:var(--text-muted)}
.vinc-x{background:transparent;border:0;color:var(--text-muted);cursor:pointer;font-size:var(--fs-16);line-height:1;
  padding:2px 4px;border-radius:var(--r-xs);flex-shrink:0}
.vinc-x:hover{color:var(--danger);background:var(--surface)}
.vinc-segura{font-size:var(--fs-11);color:var(--text-muted);display:flex;align-items:center;gap:5px;margin-top:2px}
.vinc-segura .ic{width:12px;height:12px;color:var(--info)}

.vinc-novo{margin-top:8px;padding:10px;border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--surface-2)}
/* O desenho deste campo vem da regra geral la em cima — ele JA esta na lista
   de seletores dela. Existia aqui uma copia com 7px/13px que, por vir depois
   no arquivo, desfazia o 10px/14px da unificacao: dois donos para a mesma
   decisao, e o de baixo ganhava calado. Sobrou so o que e proprio daqui. */
.vinc-novo input[type=text]{margin-bottom:0}
.vinc-result{display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:180px;overflow-y:auto}
.vinc-op{display:flex;flex-direction:column;gap:1px;text-align:left;width:100%;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 9px}
.vinc-op:hover{border-color:var(--accent);background:var(--surface-2)}
.vinc-op-t{font-size:var(--fs-13);font-weight:600;color:var(--text)}
.vinc-op-m{font-size:var(--fs-11);color:var(--text-muted)}

/* A frase montada. Os selects parecem parte do texto, nao um formulario —
   e por isso que a direcao do vinculo nunca precisa ser explicada. */
.vinc-frase{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.vinc-frase-l{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:var(--fs-13);line-height:2}
.vinc-frase-l select{width:auto;font-family:inherit;font-size:var(--fs-13);font-weight:600;color:var(--accent);
  background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r-xs);padding:3px 6px;cursor:pointer}
.vinc-frase-l select:hover{border-color:var(--accent)}
.vinc-alvo{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);padding:2px 6px}
.vinc-espelho{font-size:var(--fs-12);color:var(--text-muted);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 10px;margin-top:8px;line-height:1.5}
.vinc-espelho b{color:var(--text)}
.vinc-acoes{display:flex;gap:6px;margin-top:9px}

/* Os sinais de vinculo no card do quadro moravam AQUI (`.task-tag.trava` e
   `.task-tag.segura`, do E2) e sumiram no Lote B: "espera" virou a pilula de
   estado e "segura" virou texto no rodape, os dois no bloco do card la em
   cima. Ficam de nota porque o proximo a mexer em vinculo vai procurar por
   eles neste trecho, ao lado do resto do E2. */

/* ===== Tarefas de um dia (clique no calendario do mes) ===== */
.dia-lista{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;margin-top:4px}
.dia-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;
  transition:background .12s,border-color .12s}
.dia-item:hover{background:var(--surface-2);border-color:var(--accent)}
.dia-item:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.dia-cor{width:4px;align-self:stretch;border-radius:2px;flex-shrink:0}
.dia-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dia-t{font-size:var(--fs-14);font-weight:600;color:var(--text);line-height:1.3}
.dia-meta{font-size:var(--fs-12);color:var(--text-muted)}
.dia-item.feita .dia-t{text-decoration:line-through;color:var(--text-muted)}
.dia-ok{color:var(--ok);display:inline-flex;flex-shrink:0}
.dia-ok .ic{width:15px;height:15px}

/* ===== Passos (Pacote E1) ===== */
/* O seletor de modo mora no cabeçalho da secao: e escolha da TAREFA, nao do
   item. Fica discreto ate o hover para nao competir com o titulo da secao. */
.passo-modo{width:auto;font-size:var(--fs-12);text-transform:none;letter-spacing:0;color:var(--text-muted);
  background:transparent;border:1px solid transparent;border-radius:var(--r-xs);padding:2px 4px;cursor:pointer;
  font-family:inherit;font-weight:500;margin-left:auto}
.passo-modo:hover{border-color:var(--border);color:var(--text)}
.passo-modo:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.passo-dica{font-size:var(--fs-12);color:var(--text-muted);margin-top:6px;line-height:1.4}
.passo-dica:empty{display:none}

/* Passo que ainda nao abriu (modo sequencia) ou que ja virou tarefa: continua
   legivel, mas sem convidar ao clique. */
.checklist-items li.preso .chk-text,.checklist-items li.virou .chk-text{color:var(--text-muted)}
.checklist-items li.preso input[type=checkbox],.checklist-items li.virou input[type=checkbox]{opacity:.45;cursor:not-allowed}
/* O cadeado fica colado no checkbox — e dele que ele fala. */
.chk-preso,.chk-virou{display:inline-flex;align-items:center;color:var(--faint);flex-shrink:0;padding:0 2px}
.chk-preso .ic,.chk-virou .ic{width:13px;height:13px}
.chk-preso{margin-left:-2px}
.chk-virou{color:var(--accent)}

/* O asterisco de "inegociavel". Botao de estado (aria-pressed), nao acao: por
   isso a cor cheia quando ligado e o contorno apagado quando nao.
   min-width/padding dao ~24px de alvo — no dedo, 13px de icone nao se acerta. */
.chk-obr,.chk-promover{background:transparent;border:0;cursor:pointer;flex-shrink:0;padding:4px 5px;min-width:24px;
  color:var(--faint);font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-xs)}
.chk-obr{font-size:var(--fs-14)}
.chk-obr:hover,.chk-promover:hover{background:var(--surface-2)}
.chk-obr:hover,.chk-promover:hover{color:var(--accent)}
.chk-obr.on{color:var(--accent);font-weight:700}
.chk-promover .ic{width:13px;height:13px}
.chk-obr:focus-visible,.chk-promover:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Os sinais de PASSO no card do quadro moravam aqui (`.task-tag.sub` e
   `.task-tag.passo-trava`, do E1) e sumiram no Lote B: "passo de X" virou o
   eyebrow e o passo obrigatorio em aberto virou o cadeado da barra de
   progresso — os dois no bloco do card la em cima. */
.modal-actions{display:flex;justify-content:space-between;gap:8px;margin-top:16px}

.morning-dot{flex:1;height:4px;background:var(--border);border-radius:2px}
.morning-dot.active{background:var(--accent)}
.morning-dot.done{background:var(--success)}
.morning-step{display:none}
.morning-step.active{display:block}
.energy-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.energy-btn{padding:12px 4px;border:2px solid var(--border);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;font-size:24px;transition:background-color .15s,border-color .15s;line-height:1.2;font-family:inherit}
.energy-btn small{font-size:var(--fs-12);color:var(--text-muted);display:block;margin-top:4px}
.energy-btn:hover{border-color:var(--accent)}
.energy-btn.selected{border-color:var(--accent);background:var(--accent-soft)}
.project-option{padding:10px 12px;border:2px solid var(--border);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .15s,border-color .15s}
.project-option:hover{border-color:var(--accent)}
.project-option.selected{border-color:var(--accent);background:var(--accent-soft)}
.top3-option{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .15s,border-color .15s;font-size:var(--fs-13)}
.top3-option:hover{background:var(--surface-2)}
.top3-option.selected{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.top3-option .badge{font-size:var(--fs-12);background:var(--surface-2);padding:2px 6px;border-radius:8px;margin-left:auto}
.top3-option.selected .badge{background:var(--accent);color:var(--on-accent)}

.toast{position:fixed;bottom:20px;right:20px;background:var(--text);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-size:var(--fs-13);z-index:200;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;max-width:300px;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateY(0)}

/* --- Aviso de atualizacao ("teve atualizacao por Fulano") ---
   Fica ACIMA do toast e nao no lugar dele: os dois podem aparecer juntos (o
   toast responde ao clique da pessoa, este aqui ao que outra pessoa fez), e
   sobrepostos um esconderia o outro. Card claro com fio de acento — nao usa o
   fundo escuro do toast justamente para nao ser lido como "a mesma coisa". */
.aviso-app{position:fixed;bottom:74px;right:20px;z-index:201;width:min(320px,calc(100vw - 40px));
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:12px 14px;box-shadow:var(--sh-2,var(--shadow))}
.aviso-txt{margin:0;font-size:var(--fs-13);line-height:1.45}
.aviso-txt b{font-weight:650}
.aviso-sub{margin:3px 0 0;font-size:var(--fs-12);color:var(--text-muted)}
.aviso-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.aviso-mais{display:block;margin-top:8px;font-size:var(--fs-12);color:var(--faint)}
/* No celular ele ocupa a largura util, acima da bottom nav. */
@media (max-width:700px){
  .aviso-app{left:12px;right:12px;width:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px) + 12px)}
}
.view{display:none}
.view.active{display:block}
.empty{text-align:center;padding:30px 20px;color:var(--text-muted);font-size:var(--fs-13)}
.help-tip{background:linear-gradient(90deg,var(--accent-soft),transparent 72%);border:1px solid var(--border);padding:9px 12px;border-radius:var(--r-sm);font-size:var(--fs-13);margin-bottom:14px;display:flex;align-items:center;gap:11px;line-height:1.4}
.help-tip .tip-ic{width:28px;height:28px;border-radius:7px;background:var(--surface);color:var(--accent-deep);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow)}
.help-tip .tip-tx{flex:1}
.help-tip strong{color:var(--accent-deep);font-weight:650}
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction:column;gap:12px;color:var(--text-muted)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.saving{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);padding:4px 12px;border-radius:12px;font-size:var(--fs-12);z-index:300;opacity:0;transition:opacity .2s}
.saving.show{opacity:1}

/* Convite para ligar os avisos. Ancorado embaixo (perto do polegar no celular)
   e acima do toast no empilhamento, porque é o único elemento aqui que espera
   uma decisão. Usa só tokens, então acompanha o modo escuro sozinho. */
.push-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:250;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);animation:push-bar-entra .28s ease}
.push-bar[hidden]{display:none}
@keyframes push-bar-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.push-bar-ic{width:22px;height:22px;flex-shrink:0;color:var(--accent-deep)}
.push-bar-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.push-bar-txt strong{font-size:var(--fs-13);color:var(--text)}
.push-bar-txt span{font-size:var(--fs-12);color:var(--muted)}
@media(max-width:640px){
  /* No celular os botões não cabem na mesma linha do texto sem espremer tudo. */
  .push-bar{flex-wrap:wrap}
  .push-bar-txt{flex-basis:100%;order:1}
  .push-bar-ic{order:0}
  .push-bar .btn{order:2;flex:1}
}
/* Fica acima da barra em vez de por baixo dela. */
.push-bar:not([hidden])~.toast{bottom:96px}

/* ⚠️ `.help-tip` virou `.hd-hero` quando a saudacao saiu do cabecalho. Deixar
   o seletor velho aqui nao daria erro nenhum — so pararia de esconder, em
   silencio, e o Modo Foco mostraria a saudacao de 24px que ele existe para
   calar. Pelo mesmo motivo saiu a regra que pintava `.greeting` de branco:
   fora do cabecalho terracota, branco no fundo da pagina e texto invisivel. */
body.focus-mode .habits,body.focus-mode .view-tabs,body.focus-mode .column[data-status=done],body.focus-mode .hd-hero{display:none}
/* ⚠️ A lateral NAO some mais inteira — some tudo MENOS o card do Pomodoro.
   O botao "Modo Foco" passou a morar dentro dele, e escondendo a lateral o
   proprio botao de SAIR do modo sumia junto: sobrava so a tecla "f", que
   ninguem descobre sozinho. Como efeito colateral bom, o modo agora mostra
   exatamente o que deveria — a tarefa e o cronometro. */
body.focus-mode .sidebar > *:not(#cardPomodoro){display:none}
body.focus-mode .kanban{grid-template-columns:1fr 1fr;max-width:700px;margin:0 auto}
body.focus-mode .header{background:var(--accent);color:var(--on-accent)}
body.focus-mode .logo{color:#fff}
body.focus-mode .toolbar{display:none}
body.focus-mode .task-card:not(.focus-active){opacity:.3}

/* ===== PROJETOS: editar na lista + modal ===== */
.cat-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-edit{opacity:0;color:var(--text-muted);font-size:var(--fs-12);padding:0 2px;cursor:pointer;transition:opacity .12s}
.cat-item:hover .cat-edit{opacity:.65}
.cat-edit:hover{opacity:1;color:var(--accent)}
.color-picker{display:flex;flex-wrap:wrap;gap:8px}
.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--border);transition:transform .1s}
.color-swatch:hover{transform:scale(1.12)}
.color-swatch.sel{border-color:var(--surface);box-shadow:0 0 0 2px var(--text)}
/* ===== AGENDA GOOGLE ===== */
.cal-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cal-title{font-size:var(--fs-16);font-weight:600;text-transform:capitalize;min-width:180px}
.cal-modes{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:var(--r-sm)}
.cal-mode{padding:4px 10px;border-radius:4px;cursor:pointer;font-size:var(--fs-12);font-weight:500;color:var(--text-muted)}
.cal-mode.active{background:var(--accent);color:var(--on-accent)}
.cal-err{background:color-mix(in srgb,var(--danger) 11%,var(--surface));border-left:3px solid var(--danger);color:var(--danger);padding:10px 12px;border-radius:var(--r-sm);font-size:var(--fs-12);line-height:1.5;margin-bottom:10px}
.cal-err a{color:var(--accent)}

.cal-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cal-head{display:grid;border-bottom:1px solid var(--border);background:var(--surface)}
.cal-corner{border-right:1px solid var(--border)}
.cal-dayhead{text-align:center;padding:8px 4px;border-right:1px solid var(--border)}
.cal-dayhead:last-child{border-right:none}
.cal-dow{display:block;font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px}
.cal-daynum{display:block;font-size:18px;font-weight:700;margin-top:2px}
.cal-dayhead.today .cal-dow{color:var(--accent)}
.cal-dayhead.today .cal-daynum{background:var(--accent);color:var(--on-accent);border-radius:50%;width:30px;height:30px;line-height:30px;margin:2px auto 0}

.cal-body{display:grid;max-height:560px;overflow-y:auto;position:relative}
.cal-hours{border-right:1px solid var(--border)}
.cal-hour{position:relative;border-bottom:1px solid var(--surface-2)}
.cal-hour span{position:absolute;top:-7px;right:6px;font-size:var(--fs-12);color:var(--text-muted);background:var(--surface);padding:0 2px}
.cal-col{border-right:1px solid var(--border);position:relative}
.cal-col:last-child{border-right:none}
.cal-slots{position:relative}
.cal-slot{position:absolute;left:0;right:0;border-bottom:1px solid var(--surface-2);cursor:pointer}
.cal-slot:hover{background:var(--accent-soft)}
.cal-allday{font-size:var(--fs-12);color:#fff;padding:2px 5px;margin:2px;border-radius:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cal-ev{position:absolute;border-radius:4px;padding:2px 5px;overflow:hidden;cursor:pointer;font-size:var(--fs-12);line-height:1.25;transition:box-shadow .12s}
.cal-ev:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:5}
.cal-ev.ro{opacity:.75}
.cal-ev-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev-h{font-size:var(--fs-12);color:var(--text-muted)}
.cal-ev-l{font-size:var(--fs-12);color:var(--text-muted);white-space:nowrap;overflow:hidden}
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:6}
.cal-now span{position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger)}

.cal-list{padding:8px}
.cal-lday{margin-bottom:12px}
.cal-ldate{font-size:var(--fs-12);text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:4px;font-weight:600}
.cal-litem{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:4px;cursor:pointer;font-size:var(--fs-13)}
.cal-litem:hover{background:var(--surface-2)}
.cal-lh{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:var(--fs-12);min-width:52px}
.cal-lt{font-weight:500;flex:1}
.cal-lc{font-size:var(--fs-12);color:var(--text-muted);background:var(--surface-2);padding:1px 6px;border-radius:8px}

.cal-row{display:flex;align-items:center;gap:6px;padding:4px 2px;font-size:var(--fs-12);cursor:pointer;border-radius:4px}
.cal-row:hover{background:var(--surface-2)}
.cal-row input{width:14px;height:14px;flex-shrink:0;cursor:pointer}
.cal-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.cal-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-badge{font-size:var(--fs-12);background:var(--accent-soft);color:var(--accent);padding:1px 5px;border-radius:6px;text-transform:uppercase;letter-spacing:.3px}
.cal-badge.ro{background:var(--surface-2);color:var(--text-muted)}
.ev-ro{background:color-mix(in srgb,var(--warn) 14%,var(--surface));border-left:3px solid var(--warning);padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-12);margin-bottom:10px}
.ev-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);cursor:pointer}
.ev-check input{width:16px;height:16px}

/* ===== AGENDA — visao mes ===== */
.calm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.calm-head{background:var(--surface);text-align:center;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:6px 0;font-weight:600}
.calm-cell{background:var(--surface);min-height:96px;padding:4px 4px 6px;cursor:pointer;overflow:hidden}
.calm-cell:hover{background:var(--surface-2)}
.calm-cell.other{background:var(--bg)}
.calm-cell.other .calm-date{color:var(--text-muted);opacity:.6}
.calm-date{font-size:var(--fs-12);font-weight:600;margin-bottom:3px;width:22px;height:22px;line-height:22px;text-align:center}
.calm-cell.today .calm-date{background:var(--accent);color:var(--on-accent);border-radius:50%}
.calm-ev{font-size:var(--fs-12);line-height:1.35;padding:1px 4px;margin-bottom:2px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.calm-ev:hover{filter:brightness(.97)}
.calm-evh{color:var(--text-muted);font-variant-numeric:tabular-nums}
.calm-more{font-size:var(--fs-12);color:var(--text-muted);padding-left:2px}
.calm-more:hover{color:var(--accent)}

/* ============================================================
   PACOTE C — ícones SVG, foco de teclado, polish e mobile
   (bloco no fim: sobrescreve o necessário pela ordem da cascata)
   ============================================================ */

/* ícones de traço — herdam a cor do texto, então mudam com o tema */
.ic{width:1em;height:1em;flex:none;vertical-align:-.14em;pointer-events:none}
.btn .ic,.tab .ic{width:15px;height:15px}
.btn-sm .ic,.icbtn.btn-sm .ic{width:14px;height:14px}

/* botão só-ícone */
.icbtn{padding:6px;justify-content:center}

/* foco de teclado visível (acessibilidade — Kanban operável sem mouse) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.task-card:focus-visible{outline-offset:-2px}

/* header e cards */
.header{box-shadow:var(--shadow)}
/* ícone + título juntos à esquerda; botão/streak do header vão para a direita */
.card h3{gap:8px;justify-content:flex-start}
.card h3>.btn,.card h3>.streak{margin-left:auto}
.card h3 .ic{width:15px;height:15px;color:var(--accent)}
.card h3 .streak .ic{color:var(--accent-deep)}

/* abas — ativa vira superfície (segue o mockup) */
.view-tabs{background:var(--surface-2);border-color:transparent}
.tab{color:var(--muted)}
.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* .task-tag — o selo em pilula que ERA o vocabulario do card do quadro.
   ⚠️ LOTE A: este bloco tambem redeclarava .task-card e .task-card:hover, os
   mesmos seletores definidos la em cima. Por vir DEPOIS no arquivo ele vencia,
   e o box-shadow da declaracao de cima era codigo morto. Foi o quarto caso do
   padrao "dois donos para a mesma decisao" neste CSS (os outros: alvos por
   largura no Lote 2, campo de vincular tarefa no Lote 4, e a regra base dos
   campos com :not()).

   ⚠️ LOTE B: o card do quadro nao usa mais NENHUM `.task-tag` — o eyebrow, a
   pilula de estado, a barra e o rodape tomaram o lugar dos onze selos. Sobrou
   UM consumidor: o painel "Foco agora" (`.fa-now-meta` no app.js), que mostra
   horario e duracao. Por isso as sete variantes (`cat`, `gcal`, `due-ok`,
   `due-soon`, `due-today`, `due-late`, `end`, `trava`, `segura`, `sub`,
   `passo-trava`) sairam junto e a declaracao base foi trazida de volta para
   ca, num lugar so: deixar CSS orfao espalhado e como nascem os "dois donos". */
.task-tag{padding:2px 8px;border-radius:var(--r-chip);background:var(--surface-2);
  display:inline-flex;align-items:center;gap:var(--e-1);font-weight:600}
.task-tag .ic{width:12px;height:12px}
.task-tag.hour{background:var(--surface-2);color:var(--text)}

/* hábitos com ícone */
.habit-title>span:first-child{display:inline-flex;align-items:center;gap:6px}
.habit-title .ic{width:14px;height:14px;color:var(--accent)}
.habit-title .ic-done{color:var(--ok)}

/* streak e MITs */
.streak{background:var(--accent-soft);color:var(--accent-deep);gap:4px}
.streak .ic{width:12px;height:12px}
.mit-num{font-variant-numeric:tabular-nums}

/* energia (wizard) — ícones de nível no lugar das carinhas */
.energy-btn{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:0;padding:10px 4px}
.energy-btn small{font-size:var(--fs-12)}

/* Bateria de energia (opção C: traço fino + raio nos níveis altos).
   Cor por carga: vermelho (baixa) → verde (cheia), derivada dos tokens
   semânticos do app. Preenchimento e raio decididos por data-energy, então o
   HTML dos 5 botões é idêntico — o nível mora no atributo, não no markup. */
.energy-picker{--c1:var(--danger);--c2:color-mix(in srgb,var(--danger) 55%,var(--warn));
  --c3:var(--warn);--c4:color-mix(in srgb,var(--warn) 45%,var(--ok));--c5:var(--ok)}
.bat-en{position:relative;display:block;width:38px;height:18px;border:1.5px solid var(--faint);border-radius:4px}
.bat-en::after{content:"";position:absolute;right:-4px;top:5px;width:2.5px;height:6px;background:var(--faint);border-radius:0 2px 2px 0}
.bat-fill{position:absolute;top:2px;bottom:2px;left:2px;width:0;border-radius:2px;opacity:.9;transition:width .45s cubic-bezier(.4,.5,.2,1)}
.bat-bolt{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-12);line-height:1;opacity:0;color:var(--on-accent)}
.energy-btn[data-energy="1"] .bat-fill{width:16%;background:var(--c1)}
.energy-btn[data-energy="2"] .bat-fill{width:34%;background:var(--c2)}
.energy-btn[data-energy="3"] .bat-fill{width:56%;background:var(--c3)}
.energy-btn[data-energy="4"] .bat-fill{width:80%;background:var(--c4)}
.energy-btn[data-energy="5"] .bat-fill{width:100%;background:var(--c5)}
.energy-btn[data-energy="4"] .bat-bolt,.energy-btn[data-energy="5"] .bat-bolt{opacity:.9}
.energy-btn.selected .bat-en{border-color:var(--text)}
.energy-btn.selected .bat-en::after{background:var(--text)}
.energy-btn.selected[data-energy="4"] .bat-bolt,
.energy-btn.selected[data-energy="5"] .bat-bolt{animation:bat-bolt-pulse 1.8s ease-in-out infinite}
@keyframes bat-bolt-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ícones dentro de action-buttons dos cards */
.task-action .ic{width:14px;height:14px}
.cat-edit .ic{width:12px;height:12px}

/* anel de progresso do Pomodoro — enche conforme o ciclo avança */
.pomo-ring{width:136px;height:136px;border-radius:50%;margin:10px auto 8px;display:grid;place-items:center;
  background:conic-gradient(var(--ring-c,var(--accent)) var(--p,0%),var(--surface-2) 0)}
.pomo-ring.break{--ring-c:var(--ok)}
.pomo-ring-in{width:114px;height:114px;border-radius:50%;background:var(--surface);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--border)}
.pomo-ring .pomo-timer{font-size:29px;margin:0;letter-spacing:-.02em}

/* números tabulares onde há contagem/tempo */
.pomo-timer,.stat-value,.column-count,.cat-count,.habit-count{font-variant-numeric:tabular-nums}

/* Respiro no celular. Os ALVOS saem daqui de proposito: eles tinham 40px por
   largura de tela e competiam com a regra por ponteiro la embaixo — dois donos
   para a mesma decisao, e vencia quem estivesse por ultimo no arquivo. */
@media(max-width:700px){
  .app{padding:12px}
  .header{padding:10px 12px}
  .header-right{gap:6px}
  .tab{padding:8px 14px}
}

/* ============================================================
   PACOTE D — onboarding de rotina e painel de foco inteligente
   ============================================================ */

/* --- aviso de sobreposição --- */
.tm-conflito{margin-top:12px;padding:11px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--warn) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--warn) 38%,transparent)}
.conf-topo{display:flex;align-items:center;gap:7px;font-size:var(--fs-13);color:var(--text)}
.conf-topo .ic{width:15px;height:15px;color:var(--warn);flex-shrink:0}
.conf-lista{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.conf-lista li{font-size:var(--fs-12);color:var(--ink-soft,var(--muted));display:flex;gap:7px;align-items:baseline}
.conf-lista em{font-style:normal;color:var(--faint);font-size:var(--fs-12)}
.conf-quando{font-variant-numeric:tabular-nums;font-weight:650;color:var(--text);white-space:nowrap}
.conf-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.conf-nota{font-size:var(--fs-12);color:var(--muted);margin-top:8px;line-height:1.4}

/* --- modal de tarefa: hierarquia e rodapé fixo ---
   Era uma pilha de 8 blocos com o mesmo peso visual e o Salvar escondido lá
   embaixo. Agora: título em destaque (é a essência), o resto agrupado em
   seções, e as ações sempre à vista sem precisar rolar. */
/* 900px, como a proposta especifica — nao 600. O teto de 600 sobrou do modal
   de coluna unica, de ANTES do trilho: com ele, `1fr 262px` deixava a coluna
   principal com 267px (medido) e o trilho ficava com 44% do modal. O `width:100%`
   continua mandando abaixo disso, entao no celular o modal encolhe igual. */
.modal-tarefa{display:flex;flex-direction:column;max-width:900px;padding:0;overflow:hidden}
.tm-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.tm-topo h2{font-size:var(--fs-16);font-weight:650;letter-spacing:-.01em}
/* O corpo rola, não o modal inteiro — é o que mantém o rodapé fixo. */
.tm-corpo{flex:1;overflow-y:auto;padding:16px 20px 20px;min-height:0}

.tm-titulo{width:100%;font-family:inherit;font-size:var(--fs-16);font-weight:600;color:var(--text);
  padding:10px 12px;border:1px solid var(--field-bd);border-radius:var(--r-sm);background:var(--surface)}
.tm-titulo::placeholder{font-weight:400;color:var(--faint)}
.tm-desc{width:100%;font-family:inherit;font-size:var(--fs-13);color:var(--text);line-height:1.5;
  padding:9px 12px;border:1px solid var(--field-bd);border-radius:var(--r-sm);
  background:var(--surface);min-height:64px;resize:vertical}

/* --- Formatacao da descricao (barra + previa) ---
   A barra encosta no campo: sao a mesma peca, e um respiro entre as duas faria
   parecer que os botoes sao de outra coisa. */
.tm-desc-caixa{margin-top:8px}
.fmt-barra{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.fmt-bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:32px;height:32px;padding:0 8px;font-family:inherit;font-size:var(--fs-13);
  color:var(--text-muted);background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);cursor:pointer}
.fmt-bt:hover{background:var(--surface-2);color:var(--text);border-color:var(--field-bd)}
.fmt-bt:disabled{opacity:.45;cursor:default}
.fmt-bt:disabled:hover{background:transparent;color:var(--text-muted);border-color:transparent}
.fmt-bt .ic{width:16px;height:16px}
/* "Ver formatado" e a acao da barra, nao mais um marcador: vai para a direita,
   separado dos quatro que escrevem marcacao. */
.fmt-ver{margin-left:auto;font-weight:600}
.fmt-ver[aria-pressed="true"]{background:var(--surface-2);color:var(--text);border-color:var(--field-bd)}
.tm-desc-prev{min-height:64px;padding:9px 12px;border:1px dashed var(--field-bd);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-13);line-height:1.6}

/* --- O texto formatado, onde quer que ele apareca ---
   Vale para a previa de quem escreve e para a leitura de quem executa: uma
   regra so, senao os dois lados divergem no primeiro ajuste. */
.texto-rico a{color:var(--accent-deep,var(--accent));text-decoration:underline;
  overflow-wrap:anywhere}
.texto-rico a:hover{text-decoration:none}
.texto-rico strong{font-weight:700;color:var(--text)}
.texto-rico ul{margin:6px 0;padding-left:20px}
.texto-rico li{margin:2px 0}

.tm-secao{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule,var(--border))}
.tm-secao-h{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:10px}
.tm-link{background:none;border:0;padding:0;font-family:inherit;font-size:var(--fs-12);font-weight:600;
  color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0}
.tm-link:hover{text-decoration:underline}

.tm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.tm-grid3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px 12px}
/* Rótulos deixam de gritar: o que importa é o valor, não a etiqueta dele. */
.tm-secao .field{margin-bottom:0}
.tm-secao .field label{font-size:var(--fs-12);text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted)}
.tm-secao .field small{display:block;font-size:var(--fs-12);color:var(--faint);margin-top:3px;line-height:1.3}

/* Item 2 — duração com unidade: número + seletor min/horas lado a lado. */
.dur-row{display:flex;gap:6px}
.dur-row #fTime{flex:1;min-width:0}
.dur-row #fTimeUnit{flex:none;width:auto}
.field label .opt{color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0}

/* Item 5 — criar projeto inline, sem sair do modal da tarefa. */
.novo-proj{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:10px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.novo-proj #novoProjNome{flex:1;min-width:150px}
.novo-proj .btn{min-height:var(--field-h)}
.novo-proj-cores{display:flex;gap:5px;flex-wrap:wrap}
.np-cor{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.np-cor.sel{border-color:var(--text)}

.tm-check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-13);color:var(--text);cursor:pointer}
.tm-check input{width:auto;margin:0}

.tm-tags-resumo{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:22px}
.tm-tags-vazio{font-size:var(--fs-12);color:var(--faint)}

.tm-rodape{display:flex;align-items:center;gap:8px;padding:12px 20px;flex-shrink:0;
  border-top:1px solid var(--border);background:var(--surface-2)}
.tm-rodape .btn.danger{margin-right:auto}

@media(max-width:560px){
  .tm-grid2,.tm-grid3{grid-template-columns:1fr}
  .tm-topo,.tm-corpo,.tm-rodape{padding-left:14px;padding-right:14px}
}

/* --- anexos --- */
.anexo-lista{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.anexo-vazio{font-size:var(--fs-12);color:var(--muted)}
.anexo-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.anexo-ic{width:22px;height:22px;border-radius:6px;background:var(--surface);color:var(--info);display:grid;place-items:center;flex-shrink:0}
.anexo-ic .ic{width:12px;height:12px}
.anexo-txt{flex:1;min-width:0}
.anexo-nome{display:block;font-size:var(--fs-12);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anexo-sub{display:block;font-size:var(--fs-12);color:var(--muted)}
/* `--accent-deep` e não `--accent`: sobre o `--surface-2` do item, o acento puro
   media 3,85:1 e reprovava AA — num LINK, que é o texto mais importante da
   linha. O deep dá 5,20 no claro, e no escuro ele CLAREIA em vez de escurecer
   (é o mesmo token que a sequência de dias já usa por este motivo), então a
   troca serve os dois temas. Medido depois de a fatia reusar esta classe na
   fila de quem executa: o defeito era pré-existente, e reusá-lo o multiplicava. */
.anexo-abrir{font-size:var(--fs-12);font-weight:600;color:var(--accent-deep);text-decoration:none;white-space:nowrap;padding:2px 6px;border-radius:5px}
.anexo-abrir:hover{background:var(--accent-soft)}
.anexo-add{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.anexo-add input[type=url]{flex:1;min-width:150px}
.anexo-add .btn{min-height:var(--field-h)}
.anexo-dica{display:block;font-size:var(--fs-12);color:var(--faint);margin-top:5px;text-transform:none;letter-spacing:0}

/* --- etiquetas ---
   A cor da etiqueta entra por --tg. O fundo é a cor diluída e o TEXTO é a
   mesma cor puxada para a tinta do tema: garante leitura nos dois temas sem
   precisar calcular contraste por etiqueta (texto branco sobre pastel some no
   claro).

   ⚠️ LOTE B: a aparência do chip saiu daqui e foi para a regra
   `.task-pill,.tag-chip` no bloco do card, porque a pílula de estado usa a
   MESMA fórmula — e duas cópias da mesma decisão de cor, com esta vencendo por
   vir depois no arquivo, é o padrão que já custou quatro bugs neste CSS. Aqui
   fica só o que é exclusivo do chip. */
.tag-chips{display:flex;flex-wrap:wrap;gap:var(--e-1);margin-bottom:var(--e-2)}
.tag-chip{white-space:nowrap}
.tag-chip.bloq::before{content:"⏸ ";opacity:.8}

.tag-seletor{display:flex;flex-direction:column;gap:10px}
.tag-vazio{font-size:var(--fs-12);color:var(--muted)}
.tag-familia-h{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:5px}
.tag-familia-h span{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75}
.tag-opcoes{display:flex;flex-wrap:wrap;gap:5px}
.tag-op{font-family:inherit;font-size:var(--fs-12);font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:none}
.tag-op:hover{border-color:var(--tg)}
.tag-op.sel{background:color-mix(in srgb, var(--tg) 16%, var(--surface));
  border-color:var(--tg);color:color-mix(in srgb, var(--tg) 82%, var(--text))}

/* --- modal Gerenciar etiquetas (#3) --- */
.tags-gestao-sub{font-size:var(--fs-12);color:var(--muted);line-height:1.5;margin-bottom:14px}
.tags-gestao{display:flex;flex-direction:column;gap:16px;max-height:56vh;overflow-y:auto}
.tg-fam-h{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:6px}
.tg-fam-h em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
.tg-vazia{font-size:var(--fs-12);color:var(--faint);padding:2px 0}
.tg-linha{position:relative;display:flex;align-items:center;gap:9px;padding:5px 0}
.tg-sw{width:20px;height:20px;border-radius:6px;flex:none;cursor:pointer;border:none;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.tg-nome{flex:1;min-width:0;font:inherit;font-size:var(--fs-13);color:var(--text);background:transparent;
  border:1px solid transparent;border-radius:var(--r-xs);padding:4px 7px}
.tg-nome:hover{border-color:var(--field-bd)}
.tg-nome:focus{border-color:var(--accent);background:var(--surface);outline:none}
.tg-fam-sel{font:inherit;font-size:var(--fs-12);padding:4px 6px;border:1px solid var(--field-bd);border-radius:var(--r-xs);background:var(--surface);color:var(--text)}
.tg-del{color:var(--faint);cursor:pointer;font-size:17px;line-height:1;padding:0 4px;flex:none}
.tg-del:hover{color:var(--danger)}
.tg-del:focus-visible{color:var(--danger);outline:2px solid var(--accent);outline-offset:1px}
.tg-confirma{font-size:var(--fs-12);color:var(--text);gap:8px;flex-wrap:wrap}
.tg-conf-acoes{display:flex;gap:6px;margin-left:auto}
.tg-paleta{position:absolute;top:100%;left:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px;box-shadow:var(--shadow-lg);max-width:224px;margin-top:2px}
/* O display:flex acima vence o [hidden]{display:none} do navegador, então sem
   esta linha TODAS as paletas apareciam abertas de uma vez (uma muralha de
   quadradinhos por etiqueta). Guarda igual à da .push-bar / .fa-cota. */
.tg-paleta[hidden]{display:none}
.tg-cor{width:22px;height:22px;border-radius:6px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .1s}
.tg-cor:hover{transform:scale(1.12)}
.tg-nova{border-top:1px solid var(--border);padding-top:12px}

/* --- Lembretes (#7): card na barra lateral, independente das tarefas --- */
.lem-add{display:flex;gap:6px;margin-bottom:8px}
.lem-add input{flex:1;min-width:0;font:inherit;font-size:var(--fs-13);padding:7px 10px;border:1px solid var(--field-bd);border-radius:var(--r-xs);background:var(--surface);color:var(--text)}
.lem-add input:focus{outline:none;border-color:var(--accent)}
.lem-add .icbtn{flex:none}
.lem-data-linha{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--muted);margin-bottom:10px}
.lem-data-linha span{color:var(--faint)}
.lem-data-linha input{margin-left:auto;font:inherit;font-size:var(--fs-12);padding:3px 6px;border:1px solid var(--field-bd);border-radius:var(--r-xs);background:var(--surface);color:var(--text);color-scheme:light dark}
.lem-list{display:flex;flex-direction:column}
.lem-vazio{font-size:var(--fs-12);color:var(--faint);padding:4px 0}
.lem-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:var(--fs-13)}
.lem-item:last-child{border-bottom:none}
.lem-ck{width:16px;height:16px;border:1.8px solid var(--faint);border-radius:5px;flex:none;cursor:pointer;margin-top:1px;position:relative}
.lem-ck:hover{border-color:var(--accent)}
.lem-item.feito .lem-ck{background:var(--ok);border-color:var(--ok)}
.lem-item.feito .lem-ck::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--on-accent);font-size:var(--fs-12);font-weight:700}
.lem-tx{flex:1;min-width:0;line-height:1.4;word-break:break-word;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lem-item.feito .lem-tx{color:var(--faint);text-decoration:line-through}
.lem-selo{font-size:var(--fs-12);font-weight:600;padding:1px 6px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.lem-item.feito .lem-selo{text-decoration:none}
.lem-selo.hoje{background:var(--accent-soft);color:var(--accent-deep)}
.lem-selo.atrasado{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.lem-x{color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;flex:none}
.lem-x:hover,.lem-x:focus-visible{color:var(--danger);outline:none}

/* --- painel cobrar retorno --- */
.bloq-intro{font-size:var(--fs-12);color:var(--muted);line-height:1.45;margin:-2px 0 9px}
.bloq-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);
  background:var(--surface-2);border-left:3px solid var(--danger);margin-bottom:5px;cursor:pointer}
.bloq-item:hover{background:color-mix(in srgb, var(--danger) 8%, var(--surface-2))}
.bloq-txt{min-width:0}
.bloq-nome{display:block;font-size:var(--fs-12);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloq-sub{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:1px}

/* --- aba Concluídas e arquivadas --- */
.feitas-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.feitas-topo h2{font-size:var(--fs-20);font-weight:650;letter-spacing:-.01em}
.feitas-topo p{color:var(--muted);font-size:var(--fs-13);margin-top:2px}
.feitas-lista{display:flex;flex-direction:column;gap:18px}
.feitas-dia-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;margin-bottom:7px}
.feitas-dia-h span{background:var(--surface-2);color:var(--muted);border-radius:9px;padding:1px 7px;letter-spacing:0}
.feitas-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px}
.feitas-item.arq{opacity:.62}
.feitas-ic{width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);display:grid;place-items:center;flex-shrink:0}
.feitas-ic .ic{width:13px;height:13px}
.feitas-txt{flex:1;min-width:0}
.feitas-nome{display:block;font-size:var(--fs-13);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feitas-item.arq .feitas-nome{text-decoration:line-through;text-decoration-color:var(--faint)}
.feitas-sub{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:1px}

/* --- arrastar card (Pointer Events: dedo e mouse) --- */
.task-card{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.task-card.dragging{opacity:.35}
/* O fantasma segue o dedo. pointer-events:none e obrigatorio: sem isso o
   elementFromPoint acharia o proprio fantasma e nunca a coluna de destino. */
.drag-ghost{position:fixed;z-index:400;pointer-events:none;margin:0;
  transform:rotate(1.5deg) scale(1.03);box-shadow:var(--shadow-lg);opacity:.95}
body.arrastando{cursor:grabbing}
body.arrastando .cards{min-height:64px}
.cards.drag-over{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-4px;border-radius:var(--r-sm)}

/* --- tela Minha rotina --- */
.rot-intro{color:var(--muted);font-size:var(--fs-13);line-height:1.5;margin-bottom:14px}
.rot-janela{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:16px}
.rot-janela-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.rot-janela-top strong{font-size:var(--fs-13)}
.rot-janela-resumo{font-size:var(--fs-12);color:var(--muted)}
.rot-janela small{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:2px}
.rot-lista-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rot-lista-head strong{font-size:var(--fs-13)}
.rot-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rot-vazio{color:var(--muted);font-size:var(--fs-13);text-align:center;padding:18px 12px;border:1px dashed var(--border);border-radius:var(--r-sm);line-height:1.5}
.rot-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.rot-item.off{opacity:.55}
.rot-item-ic{width:28px;height:28px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.rot-item-ic .ic{width:15px;height:15px}
.rot-item-txt{flex:1;min-width:0}
.rot-item-nome{font-size:var(--fs-13);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rot-item-sub{font-size:var(--fs-12);color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.rot-item-dias{display:inline-flex;gap:2px}
.rot-d{width:15px;height:15px;border-radius:3px;font-size:var(--fs-12);font-weight:700;display:grid;place-items:center;background:var(--surface-2);color:var(--faint)}
.rot-d.on{background:var(--accent);color:var(--on-accent)}
.rot-selo{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.3px;padding:1px 5px;border-radius:5px;background:var(--surface-2);color:var(--muted)}
.rot-item-acoes{display:flex;gap:4px;flex-shrink:0}
.rot-form{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px;margin-bottom:14px}
.rot-dias{display:flex;gap:5px;flex-wrap:wrap}
.rot-dia{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:var(--fs-12);font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.rot-dia:hover{border-color:var(--accent)}
.rot-dia.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.rot-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--text);cursor:pointer;margin-top:2px}
.rot-check input{width:auto}
@media(max-width:560px){
  .rot-item-acoes .btn span{display:none}
  .rot-dia{width:32px;height:32px}
}

/* --- wizard de onboarding --- */
.ob-bar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:16px}
.ob-bar>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s}
.ob-sub{color:var(--muted);font-size:var(--fs-13);line-height:1.5;margin-bottom:16px}
.ob-step{display:none}
.ob-step.active{display:block}
.ob-why{display:flex;gap:11px;align-items:flex-start;background:linear-gradient(100deg,var(--accent-soft),transparent 80%);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:16px}
.ob-why-ic{width:30px;height:30px;border-radius:8px;background:var(--surface);color:var(--accent-deep);
  display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow)}
.ob-why strong{display:block;font-size:var(--fs-13);margin-bottom:3px}
.ob-why p{font-size:var(--fs-12);color:var(--muted);line-height:1.5}
.ob-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ob-choice{padding:12px 8px;border:2px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  cursor:pointer;font-family:inherit;color:var(--text);text-align:center;transition:background-color .15s,border-color .15s}
.ob-choice:hover{border-color:var(--accent-deep)}
.ob-choice.sel{border-color:var(--accent);background:var(--accent-soft)}
.ob-choice strong{display:block;font-size:var(--fs-13)}
.ob-choice small{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:3px;line-height:1.35}
@media(max-width:520px){.ob-choices{grid-template-columns:1fr}}

/* --- painel de foco inteligente --- */
.focus-ai h3 .ic{color:var(--accent)}
.fa-empty{font-size:var(--fs-12);color:var(--muted);line-height:1.5}
.fa-resumo{font-size:var(--fs-12);color:var(--muted);line-height:1.5;margin-bottom:10px}
.fa-now{background:linear-gradient(140deg,var(--accent-soft),transparent 90%);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:11px}
.fa-now-t{font-size:var(--fs-14);font-weight:650;letter-spacing:-.01em;line-height:1.35}
.fa-now-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.fa-why{font-size:var(--fs-12);color:var(--muted);line-height:1.5;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.fa-actions{display:flex;gap:6px;margin-top:9px}
.fa-actions .btn{flex:1;justify-content:center}
.fa-seq{margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.fa-seq-h{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.fa-seq-item{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-12);padding:4px 0;line-height:1.45}
.fa-seq-when{color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fa-seq-t{color:var(--text)}
.fa-seq-why{color:var(--faint);display:block;font-size:var(--fs-12)}
.fa-alerts{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.fa-alert{display:flex;gap:7px;align-items:flex-start;font-size:var(--fs-12);line-height:1.45;
  background:color-mix(in srgb,var(--warn) 13%,var(--surface));color:var(--warn);
  border-radius:var(--r-xs);padding:7px 9px}
.fa-alert .ic{width:13px;height:13px;flex-shrink:0;margin-top:2px}
.fa-loading{display:flex;align-items:center;gap:9px;font-size:var(--fs-12);color:var(--muted);padding:6px 0}
.sp{display:inline-block;width:15px;height:15px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
.fa-erro{font-size:var(--fs-12);line-height:1.5;color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-radius:var(--r-xs);padding:8px 10px}

/* Contador de recomendações do mês, no canto do título "Foco agora".
   O h3 é caixa-alta e espaçado; aqui volto ao normal para o número não gritar
   nem se confundir com o rótulo. margin-left:auto empurra o contador para a
   direita e o botão de recalcular vem depois (a regra .card h3>.btn já cuida
   dele com o mesmo auto — os dois convivem porque só um precisa empurrar). */
.fa-cota{margin-left:auto;font-size:var(--fs-11);font-weight:600;color:var(--faint);
  text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.fa-cota.acabando{color:var(--warn)}
.fa-cota.esgotada{color:var(--danger)}
.fa-cota[hidden]{display:none}

/* ============================================================
   BOTTOM NAV — P0 mobile.

   Desktop: a barra fica display:none e NADA muda (sidebar + conteúdo lado a
   lado, abas internas normais). Só em tela estreita (<=700px) o layout vira
   navegação por abas: o quadro abre de cara, em vez de rolar ~2.700px por
   baixo da barra lateral empilhada.
   ============================================================ */
.bnav{display:none}
.mob-agenda-switch,.mob-mais-switch{display:none}

@media(max-width:700px){
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    border:0;background:none;cursor:pointer;color:var(--faint);font:inherit;font-size:var(--fs-12);padding:4px 0}
  .bnav-item .ic{width:22px;height:22px}
  .bnav-item.on{color:var(--accent)}
  .bnav-nova{flex:0 0 auto;color:var(--accent)}
  .bnav-nova .bnav-fab{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);
    display:grid;place-items:center;margin-top:-20px;box-shadow:0 4px 12px var(--accent-ring);border:3px solid var(--surface)}
  .bnav-nova .bnav-fab .ic{width:24px;height:24px}

  /* .app vira coluna para reordenar: header → QUADRO → hábitos. Sem isto os
     hábitos (que vêm antes do .main no DOM) empurram o quadro ~630px para
     baixo. Funciona porque o JS mostra o app com display:'' (não 'block'
     inline), então esta regra do CSS é quem decide — durante o loading o app
     tem display:none inline e continua escondido. */
  .app{display:flex;flex-direction:column;padding-bottom:78px}
  .header{order:0}
  .main{order:1}
  .habits{order:2}

  /* dentro do .main: o conteúdo (quadro) vem ANTES da barra lateral; as abas
     internas somem — quem navega entre visões agora é o bottom nav */
  .main{display:flex;flex-direction:column}
  .content{order:1}
  .sidebar{order:2}
  .view-tabs{display:none}

  /* mostra só os blocos da aba ativa. O !important vai SÓ no esconder, para
     não brigar com o display:none inline dos cards condicionais (Cobrar
     retorno / Foco agora só aparecem quando têm conteúdo — controle do JS). */
  .app[data-mob="hoje"]   [data-aba]:not([data-aba~="hoje"]){display:none!important}
  .app[data-mob="agenda"] [data-aba]:not([data-aba~="agenda"]){display:none!important}
  .app[data-mob="foco"]   [data-aba]:not([data-aba~="foco"]){display:none!important}
  .app[data-mob="mais"]   [data-aba]:not([data-aba~="mais"]){display:none!important}

  /* a área de conteúdo (.content) não tem data-aba: as .view são trocadas via
     JS pelo bottom nav. Na aba "Foco" não há visão principal, então some. */
  .app[data-mob="foco"] .content{display:none!important}

  /* Alternadores segmentados só-mobile: a aba "Agenda" troca entre calendário de
     tarefas (view-month) e agenda do Google (view-agenda); a aba "Mais" alcança
     Progresso/Semana/Concluídas (que não têm botão próprio no bottom nav). Só
     aparecem na sua aba; no desktop as abas do topo já dão conta. */
  .app[data-mob="agenda"] .mob-agenda-switch,
  .app[data-mob="mais"] .mob-mais-switch{display:flex;gap:4px;margin-bottom:12px;
    background:var(--surface-2);padding:4px;border-radius:var(--r);border:1px solid var(--border)}
  .mob-agenda-switch button,.mob-mais-switch button{flex:1;padding:9px 10px;border:0;background:none;
    cursor:pointer;white-space:nowrap;border-radius:var(--r-sm);font:inherit;font-size:var(--fs-13);
    font-weight:600;color:var(--text-muted);transition:background-color .15s,border-color .15s}
  .mob-agenda-switch button.on,.mob-mais-switch button.on{background:var(--accent);color:var(--on-accent)}
}

/* respeita "reduzir movimento" */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* =====================================================================
   ALVOS DE TOQUE E MODAIS — auditoria, lote 2

   A regra vale por TIPO DE PONTEIRO (`pointer:coarse`) e nao por largura de
   tela: mouse e preciso em qualquer largura, dedo nao e — e existe telefone
   largo e notebook com tela sensivel ao toque. Largura de tela responderia a
   pergunta errada.
   ===================================================================== */

/* Base (mouse): area confortavel sem inchar a tela. */
.tm-check{min-height:32px}
.tm-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.checklist-items input[type=checkbox]{width:18px;height:18px}
/* Padding cresce a area clicavel; a margem negativa devolve o espaco, entao o
   texto nao se move um pixel. */
.tm-link{padding:6px 5px;margin:-6px -5px}
.checklist-items .remove,.lem-x,.vinc-x,.tg-del{min-width:28px;min-height:28px;
  display:inline-flex;align-items:center;justify-content:center}

@media (pointer:coarse),(max-width:700px){
  /* O 44px do dedo mora aqui, num lugar so: o campo e os botoes que dividem a
     linha com ele leem o mesmo token e crescem juntos. */
  :root{--field-h:44px}
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .icbtn{min-width:44px;min-height:44px}
  .tm-check{min-height:44px}
  /* Sub-abas da Equipe (F3). Entram AQUI, e nao numa regra propria no fim do
     arquivo, porque este bloco e o DONO UNICO do alvo de toque — a descoberta
     do lote 2 foi exatamente essa: dois blocos disputando a mesma decisao, o
     de baixo vencendo calado. Medido: 35px antes desta linha. */
  .eq-subaba{min-height:44px}
  /* Barra de formatacao da descricao: mesma razao das sub-abas acima, e a
     mesma medida. Nasceram com 32px — conferido antes de escrever esta linha. */
  .fmt-bt{min-width:44px;min-height:44px}
  /* Campos de formulario: a altura vem do --field-h acima; o que sobra aqui e
     a fonte de 16px, porque abaixo disso o iOS DA ZOOM sozinho ao focar o
     campo — a tela salta e a pessoa perde o lugar. Nao e estetica, e o que faz
     o formulario ser usavel no celular. */
  .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.chk-text),
  .field textarea,.field select,
  .cargo-item input[type=text],.cargo-novo input,.vinc-novo input[type=text],
  .anexo-add input[type=url],.checklist-input input[type=text],.novo-proj input[type=text]{
    font-size:var(--fs-16)}
  .tm-link{padding:12px 8px;margin:-12px -8px}
  .checklist-items .remove,.lem-x,.vinc-x,.tg-del,.chk-obr,.chk-promover{min-width:44px;min-height:44px}
  /* ⚠️ P0 DO LOTE A — as acoes do card eram INVISIVEIS E CLICAVEIS no dedo.
     `.task-actions` nasce com opacity:0 e so voltava no `.task-card:hover`;
     como nao havia regra nenhuma para pointer:coarse e no dedo NAO EXISTE
     hover, os tres botoes ficavam permanentemente transparentes — porem com
     pointer-events:auto. Medido: faixa de 70x22px no canto superior direito
     de TODO card, e elementFromPoint no centro dela devolvia
     data-action="done". Ou seja: tocar ali CONCLUIA a tarefa sem que nada
     estivesse visivel, enquanto o resto do card abre o modal. E, pelo mesmo
     defeito, nao sobrava nenhum jeito visivel de concluir pelo card.
     No dedo elas passam a ficar sempre visiveis; o hover continua governando
     no mouse, onde ele existe de verdade. */
  .task-actions{opacity:1}
  .task-action{min-width:44px;min-height:44px}
  .btn-sm{min-width:38px}
  .tag-op{min-height:38px}
  .habit-controls .btn{min-height:38px;min-width:38px}
  .tab,.cal-mode,.aba{min-height:40px;display:inline-flex;align-items:center}
  .month-cell{min-height:56px}
}

/* Faixa de resultados FORA do quadro de hoje (P0 da busca, ver app.js).
   Nasce escondida e so aparece quando ha o que mostrar — por isso a linha
   propria de [hidden]: a classe declara display:flex e venceria a regra de
   user agent. Hoje existe o reset global no topo do arquivo, mas a linha fica
   como cinto e suspensorio: foi essa exata armadilha que deixou os habitos
   aparecendo para o colaborador por duas semanas. */
.busca-fora{display:flex;flex-direction:column;gap:var(--e-1);margin-bottom:var(--e-4);
  padding:var(--e-3);background:var(--lane);border-radius:var(--r-lane)}
.busca-fora[hidden]{display:none}
.bf-tit{font-size:var(--fs-12);font-weight:600;color:var(--text-muted);padding:0 var(--e-1) var(--e-1)}
.bf-item{display:flex;align-items:center;gap:var(--e-2);width:100%;text-align:left;
  padding:var(--e-2) var(--e-3);border:1px solid var(--hair);border-radius:var(--r-chip);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-13);
  cursor:pointer;transition:border-color .16s,transform .16s}
.bf-item:hover{border-color:var(--border);transform:translateY(-1px)}
.bf-dot{width:8px;height:8px;border-radius:3px;flex:none}
.bf-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-data{flex:none;font-size:var(--fs-12);color:var(--text-muted);font-variant-numeric:tabular-nums}
.bf-data.atrasada{color:var(--danger);font-weight:600}
@media (pointer:coarse),(max-width:700px){.bf-item{min-height:44px}}

/* Rolar dentro do modal parava na borda e passava a rolar a pagina atras —
   quem le uma lista longa perdia o lugar sem entender por que. */
.modal-backdrop,.modal,.tm-corpo,.dia-lista,.vinc-result{overscroll-behavior:contain}

/* =====================================================================
   MÓDULO "MINHA EQUIPE" — F1 (equipe, membros e convite)

   Sem tamanho fixo e sem cor crua: tudo sai dos tokens do Pacote C e da
   escala de espaço do lote 1 da auditoria. A cor de sistema do módulo é
   --info (azul): terracota continua sendo o SEU trabalho, azul é o que
   passa pela equipe. Isso vai importar na F2, quando os dois quadros
   dividirem a mesma tela.
   ===================================================================== */

/* A aba e o botão do celular nascem com [hidden] e só o JS os revela. O
   atributo sozinho perderia para qualquer regra de display do autor. */
.tab[hidden],.mob-mais-switch button[hidden]{display:none!important}

.eq-topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-4)}
.eq-titulo{font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em}
.eq-sub{font-size:var(--fs-13);color:var(--text-muted);margin-top:2px}

.eq-aviso{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--warn);
  border-radius:var(--r-sm);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4);
  font-size:var(--fs-13);line-height:1.5;color:var(--text-muted)}
.eq-aviso strong{color:var(--text);display:block;margin-bottom:2px}

.eq-lista{display:flex;flex-direction:column;gap:var(--e-3)}

.eq-membro{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--e-4);box-shadow:var(--shadow-sm)}
.eq-membro-topo{display:flex;align-items:flex-start;gap:var(--e-3)}
.eq-ini{width:38px;height:38px;border-radius:50%;background:var(--info);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-14);flex-shrink:0}
.eq-membro-txt{min-width:0;flex:1}
.eq-membro-txt b{display:block;font-size:var(--fs-14)}
.eq-membro-txt span{display:block;font-size:var(--fs-12);color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-membro-txt .eq-detalhe{color:var(--faint);margin-top:1px}
.eq-membro-fim{display:flex;flex-direction:column;align-items:flex-end;gap:var(--e-1);flex-shrink:0}

.eq-chip{font-size:var(--fs-12);padding:2px 9px;border-radius:100px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted)}
.eq-chip.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:var(--ok);color:var(--ok)}
.eq-chip.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);border-color:var(--warn);color:var(--warn)}
.eq-chip.off{background:var(--surface-2);border-color:var(--border);color:var(--faint)}

/* Bloco do convite pendente: o link e o código ficam à mão porque mandar por
   WhatsApp é caminho normal, não plano B — o e-mail cai no spam. */
.eq-convite{margin-top:var(--e-3);padding:var(--e-3);background:var(--surface-2);
  border:1px dashed var(--border);border-radius:var(--r-sm)}
.eq-convite-linha{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-2);flex-wrap:wrap}
.eq-convite-linha:last-of-type{margin-bottom:0}
.eq-rot{font-size:var(--fs-12);color:var(--faint);min-width:46px}
.eq-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-16);font-weight:700;letter-spacing:4px;color:var(--accent)}
.eq-link{flex:1;min-width:150px;font-size:var(--fs-12);padding:7px 9px;min-height:36px;
  border:1px solid var(--field-bd);border-radius:var(--r-xs);background:var(--surface);
  color:var(--text-muted);font-family:inherit}
.eq-convite-dica{font-size:var(--fs-12);color:var(--faint);line-height:1.45;margin-top:var(--e-2)}

.eq-acoes{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;
  margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--border)}

.eq-vazio{text-align:center;padding:var(--e-6) var(--e-4);color:var(--text-muted);
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--r)}
.eq-vazio-dica{font-size:var(--fs-13);color:var(--faint);margin-top:var(--e-2);
  max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.5}

/* Ativação, dentro das Configurações. */
.eq-ativar{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--e-3)}
.eq-ativar p{flex:1;min-width:180px;font-size:var(--fs-13);color:var(--text-muted);line-height:1.45}

/* Faixa de quem ENTROU por convite: o Foco pessoal dele começa vazio, e sem
   uma palavra a tela parece quebrada. Sai de cena quando a F2 der a fila. */
.eq-banner{background:color-mix(in srgb,var(--info) 10%,var(--surface));
  border:1px solid var(--info);border-radius:var(--r);padding:var(--e-3) var(--e-4);
  margin-bottom:var(--e-4);font-size:var(--fs-13);line-height:1.5}
.eq-banner strong{display:block;color:var(--text);margin-bottom:2px}
.eq-banner span{color:var(--text-muted)}
.eq-banner .btn{margin-top:var(--e-2)}

/* ===================== Delegação (F2) ===================== */

/* "Quem faz" no topo do modal: decidir de quem é a tarefa muda prazo, duração
   e checklist, então vem antes deles. */
.tm-quem{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--e-3);margin-bottom:var(--e-3)}
.tm-quem-topo{display:flex;align-items:baseline;gap:var(--e-2);flex-wrap:wrap;margin-bottom:var(--e-2)}
.tm-quem-rot{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text-muted)}
.tm-quem-dica{font-size:var(--fs-12);color:var(--faint)}
.tm-quem-lista{display:flex;flex-wrap:wrap;gap:var(--e-2)}

.quem-op{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;cursor:pointer;
  font:inherit;font-size:var(--fs-13);color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:100px;min-height:38px;
  transition:border-color .12s,background .12s}
.quem-op:hover{border-color:var(--muted)}
/* Selecionado tem borda E fundo: só a cor não sobrevive a quem não distingue
   bem os tons, e este botão é o que decide de quem é o trabalho. */
.quem-op.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.quem-ini{width:26px;height:26px;border-radius:50%;background:var(--info);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-size:var(--fs-12);font-weight:700}
.quem-op.on .quem-ini{background:var(--accent)}

/* A fila de quem executa — o outro ângulo da MESMA tarefa. */
.eq-fila{margin-bottom:var(--e-4)}
.eq-fila-titulo{font-size:var(--fs-14);font-weight:700;margin-bottom:var(--e-3)}
.eq-fila-vazia{font-size:var(--fs-13);color:var(--text-muted);line-height:1.5;
  border:1px dashed var(--border);border-radius:var(--r-sm);padding:var(--e-4);text-align:center}
.fila-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--e-4);margin-bottom:var(--e-3);box-shadow:var(--shadow-sm)}
.fila-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3);margin-bottom:4px}
.fila-topo b{font-size:var(--fs-14);line-height:1.35}
.fila-meta{font-size:var(--fs-12);color:var(--text-muted);margin-bottom:var(--e-2)}
.fila-desc{font-size:var(--fs-13);color:var(--text-muted);line-height:1.5;margin-bottom:var(--e-3)}
.fila-acoes{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.fila-nota{font-size:var(--fs-12);color:var(--faint)}

/* ---- Aprovação e etapas (F2, 2ª fatia) ---- */

/* Etapa e aprovador de cada pessoa escolhida. Fica DENTRO do bloco "quem faz",
   separado por uma linha: são decisões sobre quem já foi escolhido, e sair do
   bloco faria parecer que valem para a tarefa toda. */
.tm-quem-det{margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:var(--e-2)}
/* ARMADILHA: `display:flex` numa classe VENCE o `[hidden]` do navegador, que é
   regra de user agent. Sem estas duas linhas os dois blocos abaixo aparecem
   sempre — e o app não tem reset global de `[hidden]` para me salvar. */
.tm-quem-det[hidden],.aprov-motivo[hidden]{display:none}
.quem-linha{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;font-size:var(--fs-13)}
.quem-linha-nome{font-weight:600;min-width:88px}
.quem-campo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--text-muted)}
.quem-campo select{font:inherit;font-size:var(--fs-13);color:var(--text);background:var(--surface);
  border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:4px 8px;min-height:34px}
.quem-linha-sit{font-size:var(--fs-12);color:var(--ok);font-weight:600}

/* A fila de quem confere. Fundo próprio porque ela pede AÇÃO de quem abre a
   tela — as outras listas da aba são acompanhamento. */
.eq-aprovar .fila-item{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.eq-fila-nota{font-size:var(--fs-12);color:var(--faint);margin-top:calc(-1 * var(--e-2))}
.aprov-motivo{margin-top:var(--e-3);display:flex;flex-direction:column;gap:var(--e-2)}
.aprov-motivo textarea{width:100%;font:inherit;font-size:var(--fs-13);color:var(--text);
  background:var(--surface-2);border:1px solid var(--field-bd);border-radius:var(--r-sm);
  padding:var(--e-2);resize:vertical;min-height:56px}
.aprov-motivo textarea:focus{border-color:var(--accent);outline:none}

/* Responsável pelo passo, dentro da linha do checklist. Estreito de propósito:
   a linha já tem caixa, texto, obrigatório, promover e remover — este seletor
   entra como um rótulo, não como um campo de formulário. */
.chk-dono{flex-shrink:0;max-width:96px;font:inherit;font-size:var(--fs-12);color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--field-bd);border-radius:var(--r-sm);
  padding:3px 4px;min-height:28px}
.chk-dono:hover{border-color:var(--muted)}
.chk-dono:focus{border-color:var(--accent);outline:none}

/* Os passos do colaborador, dentro do item da fila. */
.fila-passos{margin-bottom:var(--e-3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--e-2) var(--e-3)}
.fila-passos-tit{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;color:var(--text-muted);margin-bottom:6px;display:flex;justify-content:space-between;gap:var(--e-2)}
.fila-passos-tit span{text-transform:none;letter-spacing:0;font-weight:600;color:var(--faint)}
.fila-passo{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);line-height:1.4;
  padding:5px 0;cursor:pointer}
.fila-passo input{flex-shrink:0;width:18px;height:18px;cursor:pointer}
.fila-passo.feito span{text-decoration:line-through;color:var(--faint)}
.fila-passo b{color:var(--accent)}

/* O que voltou para ajuste. A borda inteira muda de cor: na lista do
   colaborador é o único item que exige leitura antes de agir. */
.fila-item.fila-ajuste{border-color:var(--warn)}
.fila-ajuste-txt{font-size:var(--fs-13);line-height:1.5;margin-bottom:var(--e-3);
  background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:var(--r-sm);padding:var(--e-2)}

/* ---- Anexos na fila de quem executa (F2, 3ª fatia) ----
   Só o CONTAINER é novo: a lista reusa `.anexo-item`/`.anexo-sub` e a linha de
   anexar reusa `.anexo-add`, os dois do modal do dono. É a mesma lista vista do
   outro lado, e um segundo desenho para ela divergiria na primeira mudança —
   além de me obrigar a repetir o seletor nas 5 regras de campo, que é como os
   3 campos do Lote 4 ficaram no desenho nativo do navegador sem ninguém notar.
   A linha de [hidden] é a mesma precaução do `.conversa` abaixo: a classe
   declara `display:flex`, e sem ela a regra de user agent perderia — é a
   armadilha que deixou os hábitos visíveis para o colaborador por 2 semanas. */
.fila-anexos{display:flex;flex-direction:column;gap:var(--e-2);margin-top:var(--e-2)}
.fila-anexos[hidden]{display:none}
.fila-anexos-lista{display:flex;flex-direction:column;gap:var(--e-1)}
/* O <label> embrulha um input[type=file] escondido, então o foco do teclado
   chega no INPUT, não no label: sem :focus-within, chegar em "Enviar arquivo"
   pelo Tab não mostraria nada na tela. */
.anexo-arq{cursor:pointer}
.anexo-arq:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ---- Conversa da tarefa ---- */
.conversa{margin-top:var(--e-2)}
.conversa[hidden]{display:none}
.conversa-lista{max-height:260px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--e-2);margin-bottom:var(--e-3)}
.conversa-vazia{font-size:var(--fs-12);color:var(--text-muted);line-height:1.5;
  border:1px dashed var(--border);border-radius:var(--r-sm);padding:var(--e-3);text-align:center}
/* A divisória "novas mensagens": onde a leitura parou da última vez. Uma régua
   com o rótulo no meio, e não um destaque em cada balão novo — o que se procura
   ao abrir é UM ponto de partida, e pintar cinco balões não diz qual é o
   primeiro. `align-self:stretch` porque a lista é um flex de coluna e os balões
   têm largura própria; sem ele a régua encolheria até o texto. */
/* ===========================================================================
   HISTÓRICO DE QUEM EXECUTA (F2.5, fatia 3)

   Lista de consulta, não quadro: o que se faz aqui é procurar. Por isso a busca
   e o filtro vêm ANTES da lista, e a linha é compacta.
   =========================================================================== */
.hist-filtros{display:flex;gap:var(--e-2);margin-bottom:var(--e-3);flex-wrap:wrap}
.hist-filtros input[type="search"]{flex:1 1 220px}
.hist-filtros select{flex:0 1 200px}
.hist-linha{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--e-3);margin-bottom:var(--e-2);cursor:pointer;box-shadow:var(--sh-1)}
.hist-linha:hover{box-shadow:var(--sh-2)}
.hist-linha:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hist-topo{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-bottom:4px}
.hist-topo b{font-size:var(--fs-15);flex:1 1 auto;min-width:0}
.hist-meta{font-size:var(--fs-12);color:var(--muted)}
@media (pointer:coarse){ .hist-linha{min-height:44px} }

/* ===========================================================================
   A TAREFA VISTA POR QUEM EXECUTA (F2.5, fatia 2)

   Corpo rolante e rodapé fixo, como o modal do dono: o que rola é o conteúdo,
   nunca o modal inteiro — senão os botões de decisão saem da tela justamente
   numa tarefa com descrição longa, que é quando ler tudo antes importa mais.
   =========================================================================== */
.fm-corpo{max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:var(--e-2);margin-bottom:var(--e-3)}
.fm-cab{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-3);flex-wrap:wrap}
.fm-proj{font-size:var(--fs-13);color:var(--muted);font-weight:600}
.fm-desc{font-size:var(--fs-15);line-height:1.6;color:var(--text);
  background:var(--surface-2);border-radius:var(--r-sm);padding:var(--e-3);margin-bottom:var(--e-3);
  word-break:break-word}
.fm-vazio{font-size:var(--fs-13);color:var(--muted);margin:0 0 var(--e-3);font-style:italic}
/* O pedido de ajuste é a única coisa aqui que exige ação — por isso é o único
   bloco com tinta de aviso. */
.fm-ajuste{border-left:3px solid var(--warn);background:var(--surface-2);
  border-radius:var(--r-sm);padding:var(--e-3);margin-bottom:var(--e-3)}
.fm-ajuste strong{display:block;font-size:var(--fs-12);color:var(--warn-ink);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.fm-ajuste p{margin:0;font-size:var(--fs-14);line-height:1.5}
.fm-dados{display:grid;gap:2px;margin-bottom:var(--e-3)}
.fm-linha{display:flex;justify-content:space-between;gap:var(--e-3);
  font-size:var(--fs-13);padding:5px 0;border-bottom:1px solid var(--border)}
.fm-linha:last-child{border-bottom:0}
.fm-linha span{color:var(--muted)}
.fm-linha b{text-align:right;font-weight:600}
.fm-bloco{margin-top:var(--e-4)}
.fm-bloco h4{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 var(--e-2)}

/* ===========================================================================
   O QUADRO DE QUEM EXECUTA (F2.5)

   Reusa `.kanban`, `.column` e `.cards` do quadro do dono — é a mesma peça,
   com uma coluna a mais. `.kanban-4` só troca o número de colunas; tudo o que
   é aparência (pista, raio, sombra) continua morando num lugar só.
   =========================================================================== */
/* Filtro por projeto (fatia 4) e a tela de quem tem acesso a cada um. */
.eq-proj-filtro{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-bottom:var(--e-3)}
.eq-proj-filtro[hidden]{display:none}
.proj-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;
  font-size:var(--fs-13);padding:6px 12px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--field-bd);color:var(--muted)}
.proj-chip:hover{color:var(--text)}
.proj-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.proj-chip.on .task-pdot{box-shadow:0 0 0 1.5px var(--on-accent)}
/* "limpar" so aparece com 2+ projetos escolhidos. E discreto de proposito:
   borda tracejada e sem preenchimento, para nao competir com os chips que
   carregam a escolha — ele desfaz, nao seleciona. */
.proj-chip-limpa{border-style:dashed;color:var(--faint)}
.proj-chip-limpa:hover{color:var(--text);border-color:var(--muted)}
.proj-linha{display:flex;gap:var(--e-3);align-items:flex-start;flex-wrap:wrap;
  padding:var(--e-3) 0;border-bottom:1px solid var(--border)}
.proj-linha:last-child{border-bottom:0}
.proj-nome{display:flex;align-items:center;gap:6px;font-weight:600;
  font-size:var(--fs-14);flex:0 0 180px;min-width:0}
.proj-membros{display:flex;gap:var(--e-3);flex-wrap:wrap;flex:1 1 200px}
@media (pointer:coarse){ .proj-chip{min-height:44px} }
/* A linha de permissao nasceu com 23,5px no dedo (medido a 375px) — abaixo do
   minimo de toque. Marcar permissao e uma sequencia de toques seguidos, entao
   errar o alvo aqui custa mais que numa acao isolada. */
@media (pointer:coarse){ .perm-item{min-height:44px;align-items:center} }

.eq-quadro{margin-top:var(--e-4)}
.eq-quadro[hidden]{display:none}
.kanban-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Em tela média a 4ª coluna espremeria os cards abaixo do legível: vira 2×2. */
@media (max-width:1100px){ .kanban-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .kanban-4{grid-template-columns:1fr} }
.cq-vazio{color:var(--faint);font-size:var(--fs-13);text-align:center;padding:var(--e-3) 0;margin:0}

/* ===========================================================================
   "SEU TRABALHO" — a lateral de quem executa (portal)

   Cada linha é um NÚMERO grande com o rótulo ao lado, e é botão: o número
   sozinho informa, o botão leva à fila onde a coisa está. Alvo de 44px no dedo
   como o resto do app.
   =========================================================================== */
.mt-linha{display:flex;align-items:baseline;gap:var(--e-2);width:100%;
  background:none;border:0;padding:var(--e-2) 0;font:inherit;color:var(--text);
  text-align:left;cursor:pointer;border-bottom:1px solid var(--border)}
.mt-linha:last-of-type{border-bottom:0}
.mt-linha b{font-size:var(--fs-20);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;min-width:1.4em}
.mt-linha span{font-size:var(--fs-13);color:var(--muted)}
.mt-linha:hover span{color:var(--text)}
.mt-linha.destaque b{color:var(--accent-deep)}
.mt-linha.aviso b{color:var(--accent-deep)}
.mt-linha.aviso span::after{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}
.mt-vazio,.mt-carregando{font-size:var(--fs-13);color:var(--muted);margin:0;padding:var(--e-2) 0}
.mt-equipe{font-size:var(--fs-12);color:var(--faint);margin:var(--e-2) 0 0;line-height:1.5}
@media (pointer:coarse){ .mt-linha{min-height:44px;align-items:center} }

/* O mesmo aviso no botão "Conversa" da FILA — quem executa não tem quadro, e
   sem isto o não lido não existiria para ele. Ponto no canto, e não texto a
   mais: o botão já se chama Conversa. */
.btn.nao-lido{border-color:var(--accent);color:var(--accent-deep);font-weight:700;position:relative}
.btn.nao-lido::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.conversa-divisor{align-self:stretch;display:flex;align-items:center;gap:var(--e-2);
  font-size:var(--fs-11);color:var(--accent-deep);font-weight:700;
  text-transform:lowercase;letter-spacing:.02em}
.conversa-divisor::before,.conversa-divisor::after{content:"";height:1px;flex:1;
  background:var(--accent);opacity:.45}
.cmt{background:var(--surface-2);border-radius:var(--r-sm);padding:var(--e-2) var(--e-3);max-width:92%}
/* O que é MEU encosta na direita e muda de cor: numa conversa de três pessoas,
   descobrir quem falou lendo o nome toda vez cansa. */
.cmt.meu{align-self:flex-end;background:var(--accent-soft)}
.cmt-topo{display:flex;justify-content:space-between;gap:var(--e-2);align-items:baseline;margin-bottom:3px}
.cmt-topo b{font-size:var(--fs-12)}
.cmt-topo span{font-size:var(--fs-11);color:var(--faint);white-space:nowrap}
.cmt-txt{font-size:var(--fs-13);line-height:1.5;word-break:break-word}
.cmt-txt .mencao{color:var(--accent);font-weight:600}
.conversa-nova textarea{width:100%;font:inherit;font-size:var(--fs-13);color:var(--text);
  background:var(--surface);border:1px solid var(--field-bd);border-radius:var(--r-sm);
  padding:var(--e-2);resize:vertical;min-height:52px}
.conversa-nova textarea:focus{border-color:var(--accent);outline:none}
.conversa-acoes{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);
  flex-wrap:wrap;margin-top:6px}
.conversa-mencionar{display:flex;gap:6px;flex-wrap:wrap}
@media (pointer:coarse),(max-width:700px){
  .conversa-nova textarea{font-size:16px}
  .conversa-lista{max-height:200px}
}

/* O número de coisas esperando por você, na aba. Some sozinho quando zera. */
.tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:5px;border-radius:100px;background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-12);font-weight:700;line-height:1;vertical-align:middle}

/* No celular os campos de etapa/aprovador ficam um por linha: lado a lado,
   dois selects e um nome não cabem em 375px sem virar coluna de 30px. */
@media (pointer:coarse),(max-width:700px){
  .quem-linha{align-items:stretch;flex-direction:column;gap:6px}
  .quem-campo{justify-content:space-between}
  .quem-campo select{flex:1;min-height:44px}
  /* A linha inteira do passo é o alvo (o input mora dentro do <label>), então
     o que precisa dos 44px é ela, não a caixinha. */
  .fila-passo{min-height:44px}
  .chk-dono{min-height:36px;max-width:82px}
  /* No modal, o seletor de dono espremia o campo do passo para 120px — quinze
     caracteres à vista. Onde ELE existe (e só onde ele existe, daí o `:has`),
     a linha vira duas: o texto sozinho em cima, dono e ações embaixo. Item de
     checklist de quem não delega continua exatamente como era. */
  .checklist-items li:has(.chk-dono){flex-wrap:wrap;row-gap:4px}
  .checklist-items li:has(.chk-dono) .chk-text{flex:1 1 100%;order:-1}
}

/* ===================== Cadastro profissional (F1.5) ===================== */

.eq-topo-acoes{display:flex;gap:var(--e-2);flex-wrap:wrap}
/* A foto entra no MESMO quadrado das iniciais para a lista não pular de altura
   entre quem tem foto e quem não tem. */
.eq-ini-foto{object-fit:cover;padding:0;background:var(--surface-2)}

/* Modal alto: o corpo rola, o modal não. Sem isto o rodapé com "Salvar" sairia
   da tela num formulário deste tamanho — e o botão que some é o botão que
   ninguém aperta. */
.modal-alto{display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
.modal-alto>.modal-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:var(--e-2);margin-right:calc(var(--e-2) * -1)}

.perfil-sub{font-size:var(--fs-13);color:var(--text-muted);line-height:1.5;margin-bottom:var(--e-3)}
.perfil-secao{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  color:var(--text-muted);margin:var(--e-4) 0 var(--e-2);padding-top:var(--e-3);border-top:1px solid var(--border)}
.modal-corpo>.perfil-secao:first-of-type{border-top:0;padding-top:0;margin-top:var(--e-3)}
.perfil-nota{font-size:var(--fs-12);color:var(--faint);line-height:1.45;margin-bottom:var(--e-2)}

.perfil-aviso{background:color-mix(in srgb,var(--info) 9%,var(--surface));border:1px solid var(--info);
  border-radius:var(--r-sm);padding:var(--e-3);font-size:var(--fs-12);line-height:1.5;
  color:var(--text-muted);margin-bottom:var(--e-3)}
.perfil-aviso strong{color:var(--text)}

.perfil-foto-linha{display:flex;align-items:center;gap:var(--e-4);margin-bottom:var(--e-2)}
.perfil-foto{width:72px;height:72px;border-radius:50%;background:var(--info);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-28);overflow:hidden}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil-foto-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.perfil-foto-acoes small{flex-basis:100%;font-size:var(--fs-12);color:var(--faint)}
/* O <label> faz o papel do botão porque o input de arquivo nativo não se
   estiliza — mas ele precisa PARECER e ser alcançável como botão. */
.perfil-foto-acoes label.btn{cursor:pointer}

.perfil-valor{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--e-3);margin-top:var(--e-4);font-size:var(--fs-13)}
.perfil-valor span{color:var(--text-muted)}
.perfil-valor b{margin-left:var(--e-2);font-size:var(--fs-16)}
.perfil-valor small{display:block;margin-top:4px;font-size:var(--fs-12);color:var(--faint);line-height:1.45}

.perfil-apagar{margin-top:var(--e-4)}
.perfil-carimbo{align-self:center;font-size:var(--fs-12);color:var(--faint);line-height:1.35}

/* --- cargos --- */
.cargos-lista{display:flex;flex-direction:column;gap:var(--e-2);margin-bottom:var(--e-3)}

/* A funcao virou <details> (S0.2): fechada e resumo, aberta e edicao.
   /!\ display:block e NAO flex - flex num <details> poe o summary e o corpo
   lado a lado e o expandir para de fazer sentido. */
.cargo-item{display:block;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden}
.cargo-item>summary{display:flex;align-items:center;gap:var(--e-2);padding:10px 12px;
  cursor:pointer;list-style:none}
.cargo-item>summary::-webkit-details-marker{display:none}
.cargo-item>summary:hover{background:var(--bg)}
.cargo-item>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cargo-nome{font-size:var(--fs-14);font-weight:600;color:var(--text)}
.cargo-selo{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:var(--r-xs);background:var(--bg);color:var(--text-muted)}
.cargo-uso{font-size:var(--fs-12);color:var(--faint);white-space:nowrap;margin-left:auto}
.cargo-conta{font-size:var(--fs-12);color:var(--faint);white-space:nowrap}
.cargo-corpo{padding:var(--e-3) 12px 12px;display:flex;flex-direction:column;gap:var(--e-3);
  border-top:1px solid var(--border)}
.perm-nome-label{display:flex;flex-direction:column;gap:4px;
  font-size:var(--fs-12);color:var(--text-muted)}
.cargo-item .perm-nome-label input[type=text]{width:100%}
.perm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--e-3)}
.perm-grupo h4{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);margin:0 0 4px;font-weight:600}
.perm-item{display:flex;align-items:flex-start;gap:6px;padding:3px 0;cursor:pointer;
  font-size:var(--fs-13);color:var(--text);line-height:1.35}
.perm-item input[type=checkbox]{margin:2px 0 0;flex:none}
.perm-fase{font-style:normal;font-size:var(--fs-11);color:var(--faint)}
.cargo-aviso{font-size:var(--fs-12);color:var(--text-muted);margin:0}
.cargo-acoes{display:flex}
.cargos-vazio{font-size:var(--fs-13);color:var(--text-muted);padding:var(--e-3) 0}
.cargo-novo{display:flex;gap:var(--e-2);align-items:center;
  border-top:1px solid var(--border);padding-top:var(--e-3)}
.cargo-novo input{flex:1;min-width:0}

/* --- minha conta --- */
.conta-atual{font-size:var(--fs-13);color:var(--text-muted);line-height:1.5;margin-bottom:var(--e-3)}
.conta-atual b{color:var(--text)}
.conta-codigo{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:var(--fs-20);letter-spacing:8px;text-align:center;font-weight:700}

@media(max-width:700px){
  .perfil-foto{width:60px;height:60px;font-size:var(--fs-20)}
  .perfil-carimbo{display:none} /* o rodapé é estreito demais; o carimbo cabe na tela larga */
}

/* O alternador do celular ganhou um 4º botão: em tela estreita quatro nomes
   não cabem lado a lado, então ele passa a deslizar em vez de espremer. */
@media(max-width:700px){
  .app[data-mob="mais"] .mob-mais-switch{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mob-mais-switch button{flex:0 0 auto}
}

/* ===================== FATURAMENTO (F3) =============================
   A TROCA DE CASCA E UMA DECISAO SO. As sub-abas nao escondem bloco por
   bloco: elas trocam o `data-eqsub` do container e o CSS decide o que
   pertence a cada secao. Esconder peca por peca ja cobrou caro aqui — todo
   bloco NOVO nasce visivel na secao errada, e ninguem percebe.

   Sem `data-eqsub` (que e o caso do COLABORADOR, que nao tem sub-abas)
   nenhuma regra abaixo aplica e a tela fica exatamente como era. */
#view-equipe[data-eqsub="pessoas"] .eq-de-quadro,
#view-equipe[data-eqsub="pessoas"] .eq-fat,
#view-equipe[data-eqsub="quadro"] .eq-de-pessoas,
#view-equipe[data-eqsub="quadro"] .eq-fat,
#view-equipe[data-eqsub="fechamento"] .eq-de-pessoas,
#view-equipe[data-eqsub="fechamento"] .eq-de-quadro,
#view-equipe[data-eqsub="pessoas"] .eq-ganhos,
#view-equipe[data-eqsub="quadro"] .eq-ganhos,
#view-equipe[data-eqsub="fechamento"] .eq-ganhos,
/* O lado DELE: "Meus ganhos" esconde a fila e o quadro. As secoes de admin nem
   existem na tela dele, mas entram na regra assim mesmo — trocar de conta na
   mesma sessao nao pode deixar um resto da tela anterior visivel. */
#view-equipe[data-eqsub="ganhos"] .eq-de-pessoas,
#view-equipe[data-eqsub="ganhos"] .eq-de-quadro,
#view-equipe[data-eqsub="ganhos"] .eq-fat{display:none}

.eq-subabas{display:flex;gap:var(--e-1);border-bottom:1px solid var(--border);margin:var(--e-3) 0 var(--e-3)}
.eq-subaba{padding:8px 14px;font-size:var(--fs-13);color:var(--text-muted);background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer;font-family:inherit}
.eq-subaba:hover{color:var(--text)}
.eq-subaba.on{color:var(--text);font-weight:700;border-bottom-color:var(--accent)}

/* --- o mes --- */
.fat-mes{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-bottom:var(--e-3)}
.fat-mes h3{margin:0;font-size:var(--fs-20);font-weight:750;letter-spacing:-.01em}
.fat-seta{font-size:var(--fs-16);line-height:1}

/* --- resumo --- */
.fat-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e-2);margin-bottom:var(--e-3)}
.fat-bloco{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.fat-bloco .rot{font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:4px}
.fat-bloco .val{font-size:var(--fs-20);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fat-bloco .sub{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px}
.fat-bloco .val.prop{color:var(--prop)}
.fat-bloco .val.aprov{color:var(--aprov)}
.fat-bloco .val.fech{color:var(--fech)}
.fat-bloco .val.neg{color:var(--danger)}

/* --- uma pessoa --- */
.fat-pessoa{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:var(--e-2);overflow:hidden}
.fat-pessoa-topo{display:flex;align-items:center;gap:var(--e-2);padding:12px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--border)}
.fat-nome{font-weight:700;font-size:var(--fs-14)}
.fat-modelo{font-size:var(--fs-12);color:var(--text-muted);background:var(--surface-2);border-radius:999px;padding:3px 9px;font-weight:600}
.fat-total{margin-left:auto;font-weight:800;font-size:var(--fs-16);font-variant-numeric:tabular-nums}

.fat-tab-wrap{overflow-x:auto}
.fat-tab{width:100%;border-collapse:collapse;font-size:var(--fs-13);min-width:520px}
.fat-tab th{text-align:left;font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:700;padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.fat-tab td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.fat-tab tr:last-child td{border-bottom:0}
.fat-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fat-oq{font-weight:600}
.fat-porque{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px}
/* A referencia — "medido 11h20", "taxa de julho". Menor de proposito: o
   Pomodoro e referencia, nunca a fonte da cobranca. */
.fat-ref{font-size:var(--fs-12);color:var(--faint);font-variant-numeric:tabular-nums}
.fat-desconto td{background:var(--surface-2)}
.fat-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* --- os chips de estado --- */
.fat-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--text-muted)}
.fat-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fat-chip.prop{background:var(--prop-bg);color:var(--prop)}
.fat-chip.aprov{background:var(--aprov-bg);color:var(--aprov)}
.fat-chip.fech{background:var(--fech-bg);color:var(--fech)}

/* --- rodape --- */
.fat-rodape{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-3);padding:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.fat-aviso{font-size:var(--fs-12);color:var(--text-muted);flex:1 1 260px;margin:0}
.fat-vazio{padding:var(--e-4);text-align:center;color:var(--text-muted)}
.fat-contratos{margin-top:var(--e-3);font-size:var(--fs-13)}
.fat-contratos summary{cursor:pointer;color:var(--text-muted);padding:6px 0}
.fat-contratos-dica{color:var(--faint)}
.fat-contrato{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border)}
.fat-contrato:last-child{border-bottom:0}
.fat-contrato .fat-cnome{flex:1 1 140px;font-weight:600}
.fat-contrato input{max-width:130px}
.fat-contrato select{max-width:120px}
.fat-cor{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

/* --- Resumo por projeto (o relatorio do "Referente a") --- */
.fat-rel-grupo{padding:10px 0;border-bottom:1px solid var(--border)}
.fat-rel-grupo:last-child{border-bottom:0}
.fat-rel-topo{display:flex;align-items:center;gap:var(--e-2);font-weight:600;color:var(--text)}
.fat-rel-n{color:var(--faint);font-size:var(--fs-12);font-weight:400;white-space:nowrap}
.fat-rel-total{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.fat-rel-linha{display:flex;align-items:baseline;gap:var(--e-2);padding:3px 0 0 18px;font-size:var(--fs-13);color:var(--text-muted)}
.fat-rel-oq{min-width:0;overflow-wrap:anywhere}
.fat-rel-tarefa{color:var(--faint)}
.fat-rel-quem{color:var(--faint);white-space:nowrap;margin-left:auto}
.fat-rel-val{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- modal de lancamento --- */
.lanc-total{margin:var(--e-2) 0 0;font-size:var(--fs-14);font-weight:700;font-variant-numeric:tabular-nums}
.mb-modelo-dica{display:block;color:var(--text-muted);margin:-4px 0 var(--e-2)}
.opcional{color:var(--faint);font-weight:400}

/* --- MEUS GANHOS (o lado dele) --- */
.gan-nf{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-3);padding:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.gan-nf-txt{font-size:var(--fs-12);color:var(--text-muted);flex:1 1 240px;margin:0}
.gan-proximo{margin-top:var(--e-4)}
.gan-proximo-tit{font-size:var(--fs-14);font-weight:700;margin:0 0 var(--e-2);display:flex;align-items:center;gap:var(--e-2)}

@media (max-width:700px){
  .fat-tab{min-width:420px}
  .fat-total{margin-left:0;width:100%}
}

/* ============ O PAINEL DA TAREFA EM ABAS (Lote C) ==================
   Passos, Conversa e Anexos saem da PILHA e viram destino proprio. Numa
   tarefa com dez passos a conversa ficava empurrada para fora da tela, e
   o anexo que o dono acabou de mandar so aparecia depois de rolar tudo.

   Titulo e descricao ficam FORA das abas de proposito: sao a identidade
   da tarefa e precisam estar visiveis em qualquer aba — nao sao um
   detalhe entre outros. */
.tk-abas{display:flex;gap:2px;border-bottom:1px solid var(--border);
  margin:var(--e-3) 0 var(--e-3);overflow-x:auto;scrollbar-width:none}
.tk-abas::-webkit-scrollbar{display:none}
.tk-aba{font:inherit;font-size:var(--fs-13);font-weight:600;color:var(--text-muted);
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:11px 15px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tk-aba:hover{color:var(--text)}
.tk-aba.on{color:var(--accent-deep);border-bottom-color:var(--accent)}
/* O contador so existe quando ha o que contar: "Passos 0" e um numero que
   nao informa nada, e uma aba com zero em toda tarefa nova vira ruido. */
.tk-aba i{font-style:normal;font-size:var(--fs-12);font-weight:700;
  background:var(--surface-2);color:var(--text-muted);border-radius:999px;
  padding:1px 7px;font-variant-numeric:tabular-nums}
.tk-aba i:empty{display:none}
.tk-aba.on i{background:var(--accent-soft,var(--surface-2));color:var(--accent-deep)}
.tk-aba[hidden]{display:none}
.tk-painel[hidden]{display:none}

/* O TRILHO FOI DESMONTADO (pedido de 30/07). A aba Detalhes chegou a ter uma
   coluna lateral de 262px ("Depende de" + Etiquetas), mas o modal nao e a
   tela inteira: descontada a coluna, sobravam ~330px para o formulario, e as
   grades de 2 e 3 campos tinham de ser desligadas para caber — quebrar as
   grades era o sinal de que a coluna nao cabia ali. Hoje a aba e UMA coluna
   so, e a ordem das secoes mora no index.html (Etiquetas antes, "Depende de"
   abaixo dela). Se um dia o trilho voltar, ele precisa nascer com o modal
   mais largo que a soma das colunas, senao este ciclo se repete. */

/* ============ CABECALHO: logo, busca e avatar ======================
   Os tres itens do mockup da proposta que nenhum lote cobria. */

/* O fundo terracota some quando há imagem: o gradiente atrás de um logo branco
   viraria uma moldura que ninguém desenhou. */
/* ⚠️ COM LOGOTIPO A MARCA DEIXA DE SER UM QUADRADO. O símbolo do app é um
   ícone (27×27 serve), mas logotipo de empresa quase sempre é DEITADO — uma
   palavra —, e espremer um wordmark em 27px de largura transforma o nome num
   borrão de 3mm. Então quem manda passa a ser a ALTURA (o lockup do cabeçalho
   tem uma linha só) e a largura corre livre até 260px.
   O teto encolhe junto com a tela: em 375px, 260px de logo mais os botões não
   cabem, e `min()` resolve sem um segundo bloco de media query. */
.logo .mark:has(img:not([hidden])){
  background:none;box-shadow:none;border-radius:0;
  width:auto;height:auto;max-width:min(260px,45vw)
}
/* ⚠️ A MEDIDA VIVE NA IMAGEM, NÃO NA CAIXA — e isso não é gosto, é
   necessidade. A caixa é `display:grid` e a linha implícita dela é `auto`: a
   linha se dimensiona pelo CONTEÚDO, então um `height:100%` na imagem não tem
   contra o que resolver (a dependência é circular), o navegador o trata como
   `auto`, a largura passa a mandar e a imagem estoura a caixa. Medido: com a
   altura em porcentagem, um logo de 300×80 renderizava 260×69 dentro de uma
   caixa de 32px. Com a altura DEFINIDA aqui, sai 120×32, que é o certo.
   `contain` guarda o caso extremo: num logo muito comprido a largura bate no
   teto e a imagem é encaixada sem deformar — logotipo tem margem própria, e
   esticar a marca de alguém é pior do que mostrá-la menor. */
.logo .mark img{height:32px;width:auto;max-width:min(260px,45vw);object-fit:contain;display:block}
.logo .mark img[hidden]{display:none}

/* A BUSCA. Some no celular: em 375px ela empurraria os botoes do cabecalho
   para fora, e a busca da lateral continua ali. */
.hd-busca{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--field-bd);border-radius:999px;padding:0 14px;
  height:36px;width:min(300px,28vw);margin-left:var(--e-3);flex:0 1 auto}
.hd-busca .ic{width:15px;height:15px;color:var(--faint);flex:none}
.hd-busca input{border:0;background:none;outline:none;font:inherit;
  font-size:var(--fs-13);color:var(--text);width:100%;padding:0}
.hd-busca input::placeholder{color:var(--faint)}
.hd-busca:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
@media (max-width:900px){ .hd-busca{display:none} }
/* ...e o INVERSO, que faltava: acima de 900px quem pergunta e o cabecalho,
   entao o campo da barra de abas sai da tela. Ele NAO sai do DOM — `#search`
   e o MOTOR da busca (o app.js le o valor dele em quatro lugares e o campo
   do cabecalho apenas escreve nele), e abaixo de 900px ele volta a ser a
   unica busca da tela. Sem esta regra as duas aparecem juntas, fazendo a
   mesma pergunta em dois lugares da mesma tela. */
@media (min-width:901px){ .search:has(#search){display:none} }

/* ============ A SAUDACAO EM BLOCO E O MENU DO CABECALHO ==============
   Os dois nasceram do mesmo pedido: deixar o app com a cara do mockup. A
   saudacao saiu do cabecalho e virou o maior texto da tela; os botoes que
   sobravam no cabecalho viraram menu. */

.hd-hero{display:flex;align-items:flex-end;gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-4)}
.hd-hero-tx{min-width:0;flex:1 1 320px}
/* 24px: o topo da escala 12 / 13 / 15 / 24 da proposta. O `#greeting` recebe
   "Boa tarde, <strong>Nome</strong>" do app.js, entao o peso vai na regra base
   E no strong — senao a primeira metade da frase sairia mais leve que a outra. */
.hd-oi{font-size:var(--fs-24,24px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0 0 5px;color:var(--text)}
.hd-oi strong{font-weight:700;color:var(--text)}
.hd-dica{margin:0;font-size:var(--fs-13);color:var(--text-muted);display:flex;align-items:center;gap:7px;line-height:1.45}
.hd-dica > .ic{width:14px;height:14px;color:var(--warn);flex:none}
.hd-dica .tip-tx{min-width:0}
.hd-dica-re{border:0;background:none;padding:2px;color:var(--faint);cursor:pointer;display:inline-flex;flex:none;border-radius:5px}
.hd-dica-re:hover{color:var(--text)}
.hd-dica-re .ic{width:13px;height:13px}
.hd-hero-acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.hd-menu-wrap{position:relative;display:inline-flex}
/* ⚠️ `[hidden]{display:none}` e regra do NAVEGADOR e perde para QUALQUER regra
   de autor — o aviso do topo deste arquivo. Como o menu e os itens declaram
   `display:flex`, sem as duas linhas abaixo o menu nasceria ABERTO e o item
   "Rotina" continuaria visivel para o colaborador (o app.js o esconde com
   `btnRot.hidden = true`). Foi por isso que este bloco ganhou guarda propria. */
.hd-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:210px;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--sh-2)}
.hd-menu[hidden]{display:none}
.hd-menu-it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  border:0;background:none;border-radius:var(--r-xs,6px);cursor:pointer;
  font:inherit;font-size:var(--fs-13);font-weight:500;color:var(--text);text-align:left}
.hd-menu-it[hidden]{display:none}
.hd-menu-it:hover{background:var(--surface-2)}
.hd-menu-it .ic{width:15px;height:15px;color:var(--text-muted);flex:none}
.hd-menu-sep{height:1px;background:var(--border);margin:4px 2px}

/* O `+` da pista. Fica apagado ate o mouse chegar na coluna: e um atalho, nao
   um destino — mas no dedo nao existe hover, entao la ele e sempre visivel. */
.col-mais{margin-left:auto;width:26px;height:26px;border-radius:var(--r-xs,6px);
  border:0;background:transparent;color:var(--faint);display:grid;place-items:center;
  cursor:pointer;opacity:0;transition:opacity .16s,background-color .15s,color .15s}
.column:hover .col-mais,.col-mais:focus-visible{opacity:1}
.col-mais:hover{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.col-mais .ic{width:14px;height:14px}
@media (pointer:coarse),(max-width:700px){
  .col-mais{opacity:1;width:36px;height:36px}
  .col-mais .ic{width:16px;height:16px}
}

@media (max-width:700px){
  /* No celular o quadro precisa comecar cedo — foi o P0 da auditoria. A
     saudacao encolhe e as acoes descem para uma linha propria. */
  .hd-oi{font-size:var(--fs-20,20px)}
  .hd-hero{gap:var(--e-3);margin-bottom:var(--e-3)}
  .hd-hero-acts{margin-left:0;width:100%}
  .hd-hero-acts .btn{flex:1;justify-content:center}
}

/* O AVATAR de quem nao tem foto. Existia so a <img> do Google, entao quem
   criou conta por e-mail nao tinha canto nenhum no cabecalho. */
.avatar-ini{display:grid;place-items:center;background:var(--accent-soft,var(--surface-2));
  color:var(--accent-deep);font-weight:700;font-size:var(--fs-13);
  border:1px solid var(--border);text-transform:uppercase}
.avatar-ini[hidden]{display:none}

/* O editor do logo nas configuracoes. */
.logo-editor{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.logo-previa{width:52px;height:52px;border-radius:var(--r-card);flex:none;
  display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--border);color:var(--accent);overflow:hidden}
.logo-previa svg{width:24px;height:24px}
.logo-previa img{width:100%;height:100%;object-fit:contain}
.logo-acoes{display:flex;gap:var(--e-2);flex-wrap:wrap}