/* ═══════════════════════════════════════════════════════════════════════
   Portal de Apontamentos — SISTEMA VISUAL ISG
   Derivado do Manual de Identidade Visual da marca ISG (voadora, 34 pp.).

   As três decisões que governam tudo o que vem abaixo:

   1. BASE CLARA.  A proporção de uso do manual (p. 12) é branco ~50%,
      grafite ~40%, laranja um fio e vermelho/amarelo uma lasca. Uma
      interface escura inteira não é a marca — é outra marca.
   2. LARANJA É AÇÃO, NUNCA DECORAÇÃO.  O manual permite laranja, amarelo e
      vermelho "somente em detalhes", e cita explicitamente botões, linhas e
      ícones de aplicativos. Então o laranja marca o que se clica, e nada
      mais.
   3. A RAMPA DE STATUS É A RAMPA DA MARCA.  O símbolo vai do vermelho ao
      amarelo passando pelo laranja. Os quatro estados do apontamento
      herdam essa ordem — não foi escolhida cor nova nenhuma para eles.

   Onde o manual não decide (fundo de campo, cor de sucesso, escala de
   espaçamento), a escolha está marcada com « DERIVADO » e explicada.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Tipografia da marca ─────────────────────────────────────────────────
   Outfit para títulos, Instrument Sans para subtítulos e texto corrido
   (manual p. 18-19). Arquivos hospedados aqui e não no Google: o portal
   roda em rede interna, e uma fonte que depende de internet é uma marca
   que some justamente onde não há internet. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;                 /* arquivo variável: um só para todos os pesos */
  font-display: swap;
  src: url("/static/fontes/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fontes/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fontes/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fontes/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Cores institucionais, exatamente como estão no manual (p. 11) ──── */
  --isg-grafite:  #282828;   /* RGB 40,40,40    · Pantone 426 C        */
  --isg-vermelho: #FF2800;   /* RGB 255,40,0    · Pantone Bright Red C */
  --isg-laranja:  #FF8300;   /* RGB 255,131,0   · Pantone 151 C        */
  --isg-amarelo:  #FFDE00;   /* RGB 255,222,0   · Pantone Yellow C     */
  --isg-cinza:    #C9C9C9;   /* RGB 201,201,201 · Pantone Cool Gray 3C */

  /* Sombras e luzes de cada cor — também do manual, coluna da esquerda de
     cada faixa. É delas que saem os tons de texto: o laranja puro sobre
     branco dá 2,5:1, e as sombras existem exatamente para isso. */
  --grafite-2: #4E4E4E;  --grafite-3: #7E7E7E;
  --grafite-4: #A9A9A9;  --grafite-5: #D4D4D4;

  --vermelho-sombra: #801400;  --vermelho-escuro: #BF1E00;
  --vermelho-luz:    #FF5333;  --vermelho-claro:  #FF7E66;

  --laranja-sombra:  #804200;  --laranja-escuro:  #BF6200;
  --laranja-luz:     #FF9C33;  --laranja-claro:   #FFCD99;

  --amarelo-sombra:  #806F00;  --amarelo-escuro:  #BFA700;
  --amarelo-luz:     #FFEB66;  --amarelo-claro:   #FFF8CC;

  --cinza-sombra:    #656565;  --cinza-escuro:    #979797;
  --cinza-luz:       #DFDFDF;  --cinza-claro:     #F4F4F4;

  /* ── Papéis ─────────────────────────────────────────────────────────
     « DERIVADO » O manual define as cores, não os papéis de interface.
     A distribuição abaixo é a proporção da p. 12 traduzida em superfícies. */
  --fundo:       #F4F4F4;          /* o cinza claro do manual — nunca cinza inventado */
  --superficie:  #FFFFFF;          /* o branco dos 50% */
  --superficie-2:#FAFAFA;          /* um degrau, para blocos dentro de blocos */
  --superficie-escura: var(--isg-grafite);   /* os 40% de grafite */
  --borda:       #E2E2E2;
  --borda-forte: var(--cinza-luz);

  /* Tinta. Todos os valores conferidos contra --superficie (branco). */
  --tinta:       var(--isg-grafite);   /* 14,7:1 */
  --tinta-2:     var(--grafite-2);     /*  8,6:1 */
  --tinta-fraca: var(--cinza-sombra);  /*  5,8:1 — o mínimo aceito aqui */
  --tinta-clara: #FFFFFF;              /* sobre grafite: 14,7:1 */
  --tinta-clara-2: var(--isg-cinza);   /* sobre grafite: 9,7:1 */

  /* Ação. Laranja preenchido com lettering grafite é o par que o próprio
     manual valida na p. 15: sobre laranja, o logo entra preto ✓, branco ✗.
     Dá 5,97:1 — acessível e literalmente o que a marca manda. */
  --acao:            var(--isg-laranja);
  --acao-hover:      var(--laranja-escuro);
  --acao-ativa:      var(--laranja-sombra);
  --tinta-sobre-acao: var(--isg-grafite);
  --tinta-acao:      var(--laranja-sombra);   /* laranja legível como texto: 7,8:1 */
  --acao-veu:        rgba(255, 131, 0, .12);  /* "luz" do laranja, permitida no manual */
  /* O anel de foco: laranja escuro da rampa, 4,2:1 sobre branco e 3,9:1
     sobre o --fundo (o puro dava 2,47:1 — ver a regra de :focus-visible). */
  --anel-foco:       var(--laranja-escuro);

  /* Estados do apontamento — a rampa do símbolo, na ordem do símbolo. */
  --pendente:        var(--isg-laranja);
  --pendente-tinta:  var(--laranja-sombra);
  --pendente-veu:    rgba(255, 131, 0, .14);

  --respondido:      var(--isg-amarelo);
  --respondido-tinta:var(--amarelo-sombra);
  --respondido-veu:  rgba(255, 222, 0, .22);

  --reaberto:        var(--isg-vermelho);
  --reaberto-tinta:  var(--vermelho-escuro);
  --reaberto-veu:    rgba(255, 40, 0, .10);

  --aceito:          var(--grafite-3);        /* encerrado recua: nenhum acento */
  --aceito-tinta:    var(--grafite-2);
  --aceito-veu:      rgba(40, 40, 40, .07);

  /* Semânticos de sistema. Reaproveitam a rampa acima — só o verde é novo. */
  --atencao:       var(--isg-amarelo);
  --atencao-tinta: var(--amarelo-sombra);
  --atencao-veu:   rgba(255, 222, 0, .20);
  --perigo:        var(--isg-vermelho);
  --perigo-tinta:  var(--vermelho-escuro);
  --perigo-veu:    rgba(255, 40, 0, .09);

  /* « DERIVADO » A paleta ISG não tem verde, e confirmar precisa de uma cor
     que não signifique "atenção". O manual usa um ✓ verde nas próprias
     páginas de regra (pp. 9, 15, 16) para dizer "assim está certo" — este
     verde é aquele ✓, escurecido até 5,4:1 sobre branco. Uso restrito a
     confirmação; nunca decora, nunca vira superfície. */
  --sucesso:       #0A7A50;
  --sucesso-tinta: #06603E;
  --sucesso-veu:   rgba(10, 122, 80, .10);
  /* ── Os passos do proponente ────────────────────────────────────────
     A prestação, vista por quem entrega: seis passos que particionam as
     pastas de uma etapa (ver consultas.passo_da_pasta). Cor nenhuma é nova —
     são a rampa da marca relida com a pergunta dele:

       corrigir  laranja   a ISG apontou; é o mesmo laranja do apontamento
       rascunho  amarelo   subiu e não entregou — a "estrela que brilha"
       falta     cinza     nada ainda; é o vão da régua, não uma faixa
       entregue  grafite   saiu da mão dele e está retida do outro lado
       conferida verde     o único ✓ da paleta
       naoexec   cinza-luz declarado e fora da fila — recua, como o --aceito

     Os três últimos são redefinidos dentro da .chamada, que é campo escuro:
     mesmo papel, outro fundo. É por isso que eles são TOKENS e não cores
     escritas na regra — a régua e os recortes leem os mesmos nomes, e cada
     contexto decide o valor. */
  --passo-corrigir:  var(--isg-laranja);
  --passo-rascunho:  var(--isg-amarelo);
  --passo-falta:     var(--grafite-4);
  --passo-entregue:  var(--grafite-2);
  --passo-conferida: var(--sucesso);
  --passo-naoexec:   var(--cinza-luz);

  /* ── Tipografia ─────────────────────────────────────────────────────
     Outfit nos títulos e nos números; Instrument Sans no resto. */
  --fonte-titulo: "Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fonte-texto:  "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fonte-mono:   "Consolas", "SF Mono", "Courier New", monospace;

  /* A escala tinha pouco contraste entre os degraus: h1 a 22px sobre corpo
     de 14,5px é meio degrau, e uma tela em que tudo tem quase o mesmo
     tamanho não tem hierarquia — o olho não sabe onde pousar primeiro.
     Abriu-se o intervalo: o título de página cresce, o corpo cresce um
     pouco, e entre eles cabem os degraus intermediários. É a proporção das
     páginas do manual, onde o título ocupa de fato o alto da folha. */
  --t-display:  clamp(34px, 5vw, 52px);     /* só a tela de entrada */
  --t-h1:       clamp(26px, 3.2vw, 34px);
  --t-h2:       21px;
  --t-h3:       17px;
  --t-h4:       12.5px;                      /* rótulo de bloco, caixa alta */
  --t-corpo:    15px;
  --t-peq:      13.5px;
  --t-legenda:  12px;
  --t-botao:    14.5px;

  /* Números que se lê de relance — valor do apontamento, total em aberto,
     contador do resumo. Outfit, porque é a fonte que o manual reserva para o
     que precisa ter presença, e grande o bastante para ser achado sem ler a
     linha inteira. */
  --t-cifra:    20px;
  --t-cifra-gr: 30px;

  --l-apertada: 1.1;    /* títulos grandes */
  --l-titulo:   1.22;
  --l-corpo:    1.6;

  /* ── Espaçamento ────────────────────────────────────────────────────
     « DERIVADO » Escala de 4 em 4. O manual mede a área de proteção do logo
     em múltiplos de x (p. 7); manter uma unidade só evita os 11px e 13px
     avulsos que fazem uma tela parecer montada aos pedaços. */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e7: 32px;  --e8: 40px;
  --e9: 48px;  --e10: 64px;

  /* ── Forma ──────────────────────────────────────────────────────────
     Os quadros de traçado esportivo do manual (p. 21) têm canto arredondado
     suave; o crachá e os key visuals, o mesmo. Nada de pílula em card. */
  --r-min: 3px;  --r-peq: 6px;  --r: 10px;  --r-gr: 14px;  --r-pill: 999px;

  /* ── Elevação ───────────────────────────────────────────────────────
     O manual constrói hierarquia com LINHA, não com sombra — as peças são
     planas e demarcadas. Sombra aqui é só para o que flutua de verdade. */
  --sombra-1: 0 1px 2px rgba(40, 40, 40, .06);
  --sombra-2: 0 4px 14px rgba(40, 40, 40, .10);
  --sombra-3: 0 24px 60px rgba(40, 40, 40, .28);

  /* ── Tempo ──────────────────────────────────────────────────────────
     « DERIVADO » O manual não fala de movimento — ele é um manual de peça
     parada. Mas fala de RITMO: os traçados esportivos "trazem unidade,
     ritmo e estrutura" (p. 21). O que está abaixo é essa frase levada a
     sério, e a régua é a mesma dos espaçamentos: poucos valores, sempre
     os mesmos.

     Três durações, e é só. Uma tela que anima em quatro velocidades
     diferentes não parece animada, parece desmontada.

       toque  ·  hover, foco, troca de cor. É o --transicao de sempre.
       gesto  ·  algo entra, sai ou atravessa.
       cena   ·  a tela inteira se apresenta. Uma vez por visita.

     Duas curvas: a padrão, e uma que freia forte no fim — para o que
     CHEGA em algum lugar (a estrela, o cartão que pousa, o flare). */
  --transicao: .16s cubic-bezier(.4, 0, .2, 1);
  --t-gesto: .42s;
  --t-cena:  .9s;
  --curva:       cubic-bezier(.4, 0, .2, 1);
  --curva-saida: cubic-bezier(.16, 1, .3, 1);

  --topo-altura: 66px;

  /* A mesma chevron do sprite de ícones, para os poucos lugares onde a seta
     precisa nascer de um ::before/::after (um <summary> não aceita filho
     antes do conteúdo sem mexer no HTML de todas as telas). Entra como
     máscara, e não como background-image, justamente para continuar herdando
     a cor por currentColor — um SVG de fundo teria a cor gravada dentro. */
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO ESCURO
   ═══════════════════════════════════════════════════════════════════════

   Pedido do Rodrigo (19/09/2026). Vale registrar a tensão antes da solução:
   a decisão 1 deste arquivo é "base clara" — branco ~50%, grafite ~40%, e o
   comentário da época é direto: "o portal era azul-escuro de ponta a ponta,
   e azul não existe na paleta". Uma interface inteiramente escura, se
   inventasse cinza-chumbo ou azul-meia-noite do nada, seria exatamente
   aquele erro de novo — outra marca, não a ISG.

   A saída é não inventar nada: o modo escuro AQUI é a mesma proporção
   50/40 invertida, com as MESMAS duas cores. Onde o claro é branco com
   texto grafite, o escuro é grafite com texto claro — e o portal já tinha
   a metade disso pronta. O `.topo` e a `.chamada` são grafite com
   `--tinta-clara` desde sempre (são os "40%" do manual, aplicados a um
   bloco); e os pares "sobre grafite" já existem, contraste medido, nos
   comentários deste arquivo (`--tinta-clara`: 14,7:1; `--tinta-clara-2`:
   9,7:1; grafite-4 sobre grafite: 6,3:1). O modo escuro só generaliza o que
   o `.topo` já fazia num bloco só para a PÁGINA inteira.

   Só duas coisas são « DERIVADAS » de verdade, porque o manual não define
   nada mais escuro que o próprio grafite (`--isg-grafite`, o mais escuro
   da paleta): o tom do FUNDO da página (um degrau abaixo do grafite, para
   os cartões em grafite terem contra o que se destacar — a mesma função
   que o cinza-claro faz no modo claro contra o branco) e o degrau de
   `--superficie-2` (um passo acima do grafite, para bloco dentro de
   bloco). Nenhum dos dois é `#000000` nem cinza neutro inventado — são o
   próprio grafite, escurecido e clareado pela regra que o manual já usa
   para as sombras e luzes de cada cor (metade do canal, para a sombra).

   E os selos de status (pendente/respondido/reaberto/aceito, atenção,
   perigo) trocam a metade ESCURA da rampa pela metade CLARA: no claro, o
   texto do selo é `--laranja-sombra` sobre um véu bem claro; sobre um véu
   translúcido que agora senta em cima de grafite quase preto, aquele
   mesmo tom escuro desapareceria dentro do próprio fundo. A cor do véu
   não muda — é a mesma rampa, só a ponta que vira texto troca de lado.

   Mecanismo: um atributo `data-theme` na tag `<html>`, e não
   `prefers-color-scheme` sozinho — o Rodrigo pediu para ALTERNAR, e isso
   é escolha da pessoa, não só do sistema operacional dela. O JavaScript
   (função `aplicarTema` em apontamentos.js, chamada antes de qualquer
   outra coisa, de um `<script>` inline no `<head>` do base.html) decide:
   o que está salvo no `localStorage`, ou, na falta disso, o que o sistema
   operacional prefere. Um `<script>` inline e não um dos 44 manipuladores
   que este projeto evita: aqui não é eventos crescendo — é o mínimo para
   não haver um flash de tela clara antes do CSS aplicar o escuro. */
:root[data-theme="dark"] {
  /* Um degrau abaixo do grafite (metade de cada canal, a mesma fórmula das
     sombras do manual) — para o cartão em grafite ter contra o que se
     destacar, como o cinza-claro faz contra o branco no modo claro. */
  --fundo:        #141414;
  --superficie:   var(--isg-grafite);
  /* Um degrau acima do grafite — bloco dentro de bloco, como o --superficie-2
     claro é um degrau acima do branco. */
  --superficie-2: #333333;
  --superficie-escura: var(--isg-grafite);
  --borda:        #3A3A3A;
  --borda-forte:  var(--grafite-2);

  /* `--cinza-claro` e `--cinza-luz` são cores da PALETA (o manual as chama
     assim, ao lado de laranja e vermelho) — e por isso ficaram de fora da
     troca acima, que só mexeu nos papéis semânticos. Só que o resto deste
     arquivo usa as duas, cruas, como fundo de coisa pequena e discreta:
     o número ao lado do mês, o selo "tranquilo", o hover de um botão
     fantasma — umas 50 regras. Sem redefini-las aqui, cada uma delas
     continuava um quadrado CLARO (a cor não muda) num texto que TROCOU
     para claro também (por herdar --tinta-fraca) — texto claro sobre
     fundo claro, ilegível. Foi o que o Rodrigo viu no financeiro
     (19/09/2026): o número ao lado de cada mês, sumindo.

     Os valores seguem a mesma relação do claro: --cinza-luz continua mais
     PRESENTE que --cinza-claro (lá, DFDFDF é mais escuro que F4F4F4; aqui,
     invertido, o mais presente é o mais CLARO dos dois). */
  --cinza-claro: #333333;
  --cinza-luz:   #454545;

  /* Os mesmos pares "sobre grafite" que o resto do arquivo já mede e usa no
     `.topo` e na `.chamada` — generalizados para a página inteira. */
  --tinta:        var(--tinta-clara);
  --tinta-2:      var(--tinta-clara-2);
  --tinta-fraca:  var(--grafite-4);      /* 6,3:1 sobre grafite — ver nota acima */

  /* Ação: o laranja continua sendo o laranja — ação não muda de cor porque a
     tela ficou escura, e o par laranja+letra grafite (manual p. 15) já
     funciona nos dois fundos. Só o laranja-como-TEXTO precisa clarear, pela
     mesma razão dos selos logo abaixo. */
  --tinta-acao:   var(--laranja-luz);
  /* No grafite o laranja puro já dá 6:1 (7,5:1 sobre o fundo #141414). */
  --anel-foco:    var(--isg-laranja);

  /* A ponta clara da rampa, para ler sobre o véu translúcido em cima de um
     fundo quase preto. O véu (a cor de fundo do selo) continua o mesmo.

     Laranja e vermelho subiram um degrau a mais na rampa (09/10/2026,
     medido): com a "luz", o vermelho dava 4,27:1 sobre o véu vermelho no
     cartão grafite ("Reaberto", "Alta", "Retorno atrasado") e o laranja
     4,48:1 sobre o véu laranja no bloco-dentro-de-bloco (#333) das pastas
     de foto. O véu escurece o fundo, e a "luz" não sobrava para os dois.
     O "claro" de cada um (#FF7E66, #FFCD99) é o tom seguinte do MESMO
     manual — nenhuma cor nova — e passa de 5,5:1 nos dois lugares. */
  --pendente-tinta:   var(--laranja-claro);
  --respondido-tinta: var(--amarelo-luz);
  --reaberto-tinta:   var(--vermelho-claro);
  --aceito-tinta:     var(--grafite-4);
  --atencao-tinta:    var(--amarelo-luz);
  --perigo-tinta:     var(--vermelho-claro);
  /* O verde não tem "luz" definida (é a única cor fora do manual, ver a nota
     de --sucesso acima) — clareado à mão até 8,2:1 sobre o grafite escurecido
     do fundo, o mesmo padrão de medir-e-marcar do resto do arquivo. */
  --sucesso-tinta:    #3DDBA0;

  /* As sombras do manual são "profundidade contra grafite ~40%", pensadas
     para um fundo claro por baixo; sobre um fundo já escuro elas ficam
     invisíveis. Mais alfa, para a mesma função (dizer o que flutua). */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, .45);
  --sombra-3: 0 24px 60px rgba(0, 0, 0, .6);
}

/* `.selo-rascunho` escreve as duas cores cruas — fundo `--cinza-luz`, texto
   `--grafite-2` — e não por token semântico (ver a regra logo abaixo de
   onde ele nasce). Com `--cinza-luz` redefinido acima, fundo e texto
   ficariam os dois em cima do mesmo cinza-escuro: a única badge do arquivo
   que colide assim, porque "rascunho" não é um dos quatro estados da rampa
   e não tem um par "-tinta" próprio para herdar. */
:root[data-theme="dark"] .selo-rascunho { color: var(--tinta-clara-2); }

/* ── O item SELECIONADO no escuro (22/09/2026) ─────────────────────────
   No claro, "selecionado" é pintar de grafite: o mês aberto, o projeto
   escolhido, o recorte ativo, o botão grafite, o contador do grupo. Só que
   no escuro `--superficie` também é grafite — o item selecionado ficava da
   MESMA cor do cartão em que ele mora (medido: #282828 sobre #282828), e o
   hover, que usa `--cinza-claro` (#333), ficava mais visível que a
   seleção. O olho lia a coisa ao contrário. Regressão do modo escuro de
   19/09, pega na varredura de UI.

   A saída não é inverter para um chip claro: cada um desses itens tem
   filhos afinados para fundo ESCURO (número em amarelo, idade em
   `--tinta-clara-2`, contador com véu branco), e trocar o fundo para claro
   exigiria reescrever todos eles. Sobe-se um degrau de grafite, para
   `--grafite-2` — continua escuro, então todos os filhos continuam lendo
   (branco 8,6:1, amarelo 6,7:1, cinza-claro 5,3:1), e agora fica acima
   do hover e do cartão, na ordem certa: cartão < hover < selecionado. O fio
   em `--grafite-4` desenha a borda que a diferença de tom sozinha (1,6:1)
   não desenharia. */
:root[data-theme="dark"] .mes-item.ativo,
:root[data-theme="dark"] .cartao-projeto.ativo,
:root[data-theme="dark"] .recorte.ativo,
:root[data-theme="dark"] .botao.grafite,
:root[data-theme="dark"] .cabeca-grupo .quantos {
  background: var(--grafite-2);
  border-color: var(--grafite-4);
  box-shadow: inset 0 0 0 1px var(--grafite-4);
}
:root[data-theme="dark"] .cartao-projeto.ativo:hover,
:root[data-theme="dark"] .botao.grafite:hover {
  background: var(--cinza-sombra);
}

/* O verde de confirmação no escuro. `.cor-sucesso` e companhia pintam
   texto com `--sucesso` (#0A7A50), que existe para fundo BRANCO (5,4:1);
   sobre o grafite do cartão escuro ele cai para 2,75:1 — "e-mail
   confirmado", o zero verde dos avisos, o badge do mês limpo. O par
   `-tinta` já foi clareado para o escuro (#3DDBA0, 8,2:1); o que faltava era
   os textos verdes usarem ele. Fica aqui, e não trocando o token, porque
   `--sucesso` também é FUNDO de botão verde, e ali o tom escuro é o certo
   nos dois temas. */
:root[data-theme="dark"] .cor-sucesso,
:root[data-theme="dark"] .badge-mes.limpo,
:root[data-theme="dark"] .nota-aceito { color: var(--sucesso-tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + var(--e4));
  -webkit-text-size-adjust: 100%;
  /* Sem isto, o <select>, a caixa de marcar e a barra de rolagem seguem o
     tema do SISTEMA OPERACIONAL, não o `data-theme` desta página — e
     alguém com o Windows/macOS em modo escuro via um <select> com fundo
     preto e texto preto por cima, ilegível, mesmo depois de escolher o
     tema claro aqui dentro. `color-scheme` é o que diz ao navegador qual
     paleta NATIVA usar; sem declará-lo, o navegador adivinha pelo SO. */
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--l-corpo);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Escala tipográfica ──────────────────────────────────────────────── */
h1, h2, h3, h4, .t-display {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.t-display { font-size: var(--t-display); line-height: var(--l-apertada); letter-spacing: -.03em; }
h1 { font-size: var(--t-h1); line-height: var(--l-apertada); margin: 0 0 var(--e2); letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); line-height: var(--l-titulo); margin: var(--e8) 0 var(--e3); letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); line-height: var(--l-titulo); margin: var(--e5) 0 var(--e2); }

/* ── A régua tricolor no alto do título da página ─────────────────────
   O manual fecha o cabeçalho de cada página com um fio vermelho → laranja →
   amarelo (p. 19). Aqui ele vira a marca de abertura de cada tela: um traço
   curto acima do h1.

   É o que faz a tela ser reconhecível como ISG antes de o logo entrar no
   campo de visão — que é exatamente a função que o manual dá ao elemento
   gráfico (p. 21). E nasce de um ::before, sem tocar em template nenhum.

   Fica fora da porta de entrada (que já tem a régua inteira no cartão) e da
   caixa de entrada (cujo h1 divide a linha com a barra de ferramentas). */
h1:not(.porta-titulo)::before {
  content: "";
  display: block;
  width: 40px; height: 4px;
  margin-bottom: var(--e3);
  border-radius: var(--r-min);
  background: linear-gradient(90deg,
              var(--isg-vermelho), var(--isg-laranja) 46%, var(--isg-amarelo));
}
.cabeca-entrada h1::before { display: none; }
.painel-estado h1::before { margin-left: auto; margin-right: auto; }

/* Rótulo de bloco: o "TIPOGRAFIA" / "CORES" do canto das páginas do manual —
   caixa alta, peso normal, muito espaçado. É o que organiza sem gritar. */
h4, .rotulo-bloco {
  font-family: var(--fonte-texto);
  font-size: var(--t-h4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tinta-fraca);
  margin: var(--e5) 0 var(--e2);
}

.subtitulo {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-fraca);
  margin: 0 0 var(--e7);
  max-width: 68ch;
  text-wrap: pretty;
}
.dica { font-size: var(--t-legenda); color: var(--tinta-fraca); margin-top: var(--e1); }
small, .legenda { font-size: var(--t-legenda); color: var(--tinta-fraca); }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

a {
  color: var(--tinta-acao);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }

code {
  font-family: var(--fonte-mono);
  font-size: .92em;
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-radius: var(--r-min);
  padding: 1px 5px;
}

/* Números em coluna alinham pelo dígito, como em planilha. */
.numero, .ap-valor, .valor, .valor-forte, .valor-grupo, .conta,
.quantos, .selo, .selo-prazo, .espera, .badge-mes, .contador, .conta-falas {
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   ÍCONES

   Traçados de linha na grade de 24, no mesmo vocabulário dos traçados
   esportivos do manual (p. 21): linha fina, geométrica, sem preenchimento.

   A regra que faz o sistema funcionar é `stroke: currentColor`. É ela que
   permite um ícone dentro de um botão vermelho sair branco, dentro de um
   selo amarelo sair grafite, e dentro de um link laranja sair laranja — sem
   nenhuma variante de arquivo. Era exatamente o que o emoji não fazia: o 🗑
   continuava azul dentro do botão vermelho de excluir.

   O tamanho vem do atributo width/height do próprio <svg> (posto pelo macro
   `icone`), e não daqui — assim o mesmo desenho serve de 11px num selo a
   30px numa tela vazia.
   ═══════════════════════════════════════════════════════════════════════ */

.i {
  display: inline-block;
  vertical-align: -.125em;      /* alinha o desenho com a linha de base do texto */
  flex-shrink: 0;               /* nunca amassa dentro de um flex apertado */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O sprite (`partes/icones.html`, uma vez por página no `base.html`). Some
   da tela sem `display: none`, que em alguns navegadores impede o `<use>` de
   achar o símbolo: fica 0×0 e fora do fluxo. Os `width`/`height` 0 também
   estão como atributo no próprio `<svg>`, para valerem se este arquivo não
   carregar; o `position` só pode vir daqui. Era um `style=` no template até
   07/10/2026 — saiu para a CSP poder recusar estilo inline. */
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Dentro de um contêiner flex (botão, selo, item de lista) o alinhamento já
   vem do `align-items`, e o deslocamento da linha de base atrapalha. */
.botao .i, .selo .i, .selo-prazo .i, .selo-urgencia .i, .selo-novo .i,
.conta-falas .i, .badge-mes .i, .aviso .i, .item-gaveta .i,
.rotulo-bloco .i, .vazio .i, .marca .i, .anexo .i {
  vertical-align: 0;
}

/* A chevron que gira ao abrir um <details>. */
.i.giro { transition: transform var(--transicao); }
details:not([open]) > summary .i.giro { transform: rotate(-90deg); }

/* Só para leitor de tela: some da tela sem sumir da árvore de acessibilidade.
   Um botão cujo conteúdo é apenas um ícone precisa de nome acessível — ou
   por aqui, ou por aria-label. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   ELEMENTO GRÁFICO DA MARCA — traçados esportivos (manual p. 21)

   As linhas que demarcam quadra, pista e piscina. No manual servem de
   moldura, máscara e grade. Aqui têm duas funções e nenhuma a mais:
   marcar o alto de uma superfície (como a linha de largada) e separar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Marcação de raia: o tick da linha de fundo da quadra. Serve de separador
   com identidade, no lugar de mais um <hr> cinza. */
.tracos {
  height: 8px;
  background-image: linear-gradient(90deg, var(--borda-forte) 1px, transparent 1px);
  background-size: 12px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  border: 0;
  margin: var(--e5) 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   CABEÇALHO E NAVEGAÇÃO

   A faixa grafite é a metade escura da proporção do manual. O logo entra
   na versão negativa (p. 13), com folga lateral suficiente para respeitar
   a grade de segurança de 1,5x (p. 7).
   ═══════════════════════════════════════════════════════════════════════ */

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e4);
  min-height: var(--topo-altura);
  padding: 0 var(--e6);
  background: var(--isg-grafite);
  color: var(--tinta-clara);
  /* O fio tricolor fecha a faixa, como no cabeçalho das páginas do manual. */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,
                var(--isg-vermelho), var(--isg-laranja) 46%, var(--isg-amarelo)) 1;
}

.topo .marca {
  display: flex; align-items: center; gap: var(--e3);
  color: var(--tinta-clara);
  text-decoration: none;
  flex-shrink: 0;
}
.topo .marca:hover { text-decoration: none; }
/* 26px de altura mantém o logo bem acima da redução máxima digital de 10px
   definida no manual (p. 7). */
.topo .marca img { height: 30px; width: auto; display: block; }
.topo .marca span {
  font-family: var(--fonte-titulo);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tinta-clara-2);
  padding-left: var(--e3);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.topo .espaco { flex: 1; }

.topo nav.abas-topo { display: flex; align-items: center; gap: var(--e1); }

/* Aba: o ativo é marcado por uma linha laranja embaixo — a linha de
   demarcação da quadra, não uma caixa colorida. */
.topo .aba {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e3);
  height: calc(var(--topo-altura) - 2px);
  font-size: var(--t-peq); font-weight: 500;
  color: var(--tinta-clara-2);
  background: none; border: 0; border-radius: 0;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}
.topo .aba::after {
  content: "";
  position: absolute; left: var(--e2); right: var(--e2); bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--isg-laranja);
  transform: scaleX(0);
  transition: transform var(--transicao);
}
.topo .aba:hover { color: var(--tinta-clara); background: rgba(255, 255, 255, .06); text-decoration: none; }
.topo .aba:hover::after { transform: scaleX(.45); }
.topo .aba.ativa { color: var(--tinta-clara); font-weight: 600; }
.topo .aba.ativa::after { transform: scaleX(1); }

/* Contador da aba: pílula laranja com lettering grafite — o par validado
   pelo manual para tudo que se apoia sobre laranja. */
.topo .aba .quantos {
  min-width: 19px; text-align: center;
  padding: 1px var(--e2);
  border-radius: var(--r-pill);
  background: var(--isg-laranja);
  color: var(--tinta-sobre-acao);
  font-size: var(--t-legenda); font-weight: 700;
}

.topo .quem {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq);
  color: var(--tinta-clara-2);
  white-space: nowrap;
}
.topo .quem strong { color: var(--tinta-clara); font-weight: 600; }

/* Selo "ISG": quem fala pela casa. Amarelo é a cor da estrela do símbolo —
   o topo da rampa — e sobre grafite dá 11,9:1. */
.selo-papel {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 2px var(--e2);
  border-radius: var(--r-pill);
  background: var(--isg-amarelo);
  color: var(--isg-grafite);
}

/* Botão de sair, dentro da faixa escura. */
.topo .botao.fantasma {
  border-color: rgba(255, 255, 255, .26);
  color: var(--tinta-clara);
  background: transparent;
}
.topo .botao.fantasma:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .45);
}

/* A gaveta do mobile está DENTRO do .topo, mas é uma superfície clara — o
   branco de cima vazava para cá e o botão "Sair" ficava branco no branco,
   invisível. Aqui a tinta volta a ser a da superfície de baixo. */
.topo .menu-mobile .gaveta .botao.fantasma {
  background: var(--superficie);
  border-color: var(--borda-forte);
  color: var(--tinta);
}
.topo .menu-mobile .gaveta .botao.fantasma:hover {
  background: var(--cinza-claro);
  border-color: var(--grafite-4);
  color: var(--tinta);
}

/* ── Menu de telas estreitas ─────────────────────────────────────────
   <details> nativo: abre sem JavaScript, já vem com teclado e leitor de
   tela. Escondido no desktop. */
.menu-mobile { display: none; position: relative; }
.menu-mobile > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-peq);
  cursor: pointer;
  color: var(--tinta-clara);
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary::after {
  content: "";
  width: 16px; height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.menu-mobile[open] > summary::after {
  box-shadow: none;
  transform: rotate(45deg);
  position: relative;
}
.menu-mobile[open] > summary::before {
  content: "";
  position: absolute;
  width: 16px; height: 2px; background: currentColor;
  transform: rotate(-45deg);
}
.menu-mobile .gaveta {
  position: absolute; right: 0; top: calc(100% + var(--e2));
  min-width: 230px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra-2);
  padding: var(--e2);
  z-index: 50;
}
.menu-mobile .gaveta a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
  border-radius: var(--r-peq);
  color: var(--tinta);
  font-size: var(--t-corpo); font-weight: 500;
}
.menu-mobile .gaveta a:hover { background: var(--cinza-claro); text-decoration: none; }
.menu-mobile .gaveta a.ativa {
  background: var(--acao-veu);
  color: var(--tinta-acao); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--isg-laranja);
}
.menu-mobile .gaveta .quantos {
  min-width: 19px; text-align: center;
  padding: 1px var(--e2); border-radius: var(--r-pill);
  background: var(--isg-laranja); color: var(--tinta-sobre-acao);
  font-size: var(--t-legenda); font-weight: 700;
}
.menu-mobile .gaveta .separador {
  height: 1px; background: var(--borda); margin: var(--e2) var(--e3);
}
.menu-mobile .gaveta .quem-mobile {
  padding: var(--e3); font-size: var(--t-peq); color: var(--tinta-fraca);
}
.menu-mobile .gaveta .quem-mobile strong { display: block; color: var(--tinta); font-size: var(--t-corpo); }

/* ── O interruptor de tema ────────────────────────────────────────────
   Os dois ícones (e, na gaveta, os dois rótulos) vivem os dois no HTML o
   tempo todo; quem escolhe qual aparece é o `data-theme` da <html> — o
   mesmo atributo que o script inline do <head> já escreve antes da
   primeira pintura. CSS puro, e não JS trocando `display` no clique: assim
   o ícone certo já nasce certo, sem esperar o apontamentos.js terminar de
   carregar. */
:root[data-theme="dark"]      .icone-para-escuro,
:root[data-theme="dark"]      .rotulo-para-escuro { display: none; }
:root:not([data-theme="dark"]) .icone-para-claro,
:root:not([data-theme="dark"]) .rotulo-para-claro { display: none; }

.botao-tema { display: inline-flex; }

/* O botão da gaveta é uma linha igual às outras (`.menu-mobile .gaveta a`),
   só que <button> em vez de <a> — não navega, alterna. Reseta os padrões de
   botão e copia o resto da régua visual da gaveta, para não abrir uma
   segunda linguagem de item de menu numa lista que já tem uma. */
.item-gaveta-tema {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%;
  padding: var(--e3);
  border: 0; border-radius: var(--r-peq);
  background: none;
  color: var(--tinta);
  font: inherit; font-size: var(--t-corpo); font-weight: 500;
  text-align: left; cursor: pointer;
}
.item-gaveta-tema:hover { background: var(--cinza-claro); }


/* ═══════════════════════════════════════════════════════════════════════
   ESTRUTURA
   ═══════════════════════════════════════════════════════════════════════ */

.conteudo {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e8) var(--e6) var(--e10);
}
.conteudo.estreito { max-width: 460px; }

/* Container: a superfície branca dos 50%. Demarcada por linha, não por
   sombra — é assim que o manual constrói as peças. */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e6);
  margin-bottom: var(--e4);
}
/* `overflow-x: auto`, e não `hidden`. Com hidden, uma tabela mais larga que
   o painel não some parcialmente — ela é DECEPADA, sem barra de rolagem e
   sem nada na tela dizendo que há conteúdo do lado de fora. Foi assim que o
   "Liberar sem código" virou "Liberar ser": o botão estava lá, 263px além
   da borda, e o painel simplesmente não o desenhava.
   
   O `auto` mantém os cantos arredondados clipados e devolve a rolagem
   quando ela é necessária — que é o comportamento que o media query de tela
   estreita já dava, e que faltava em todas as outras larguras. */
.painel.plano { padding: 0; overflow-x: auto; }

/* Tela vazia. Deixou de ser um parágrafo cinza solto: ganha um ícone grande
   e apagado, uma primeira linha em destaque dizendo o estado, e a saída
   (link ou botão) por último. Uma tela vazia é uma resposta — "não há nada"
   — e não uma falha; por isso o ícone é neutro, e verde só quando o vazio é
   de fato uma boa notícia (nada na fila). */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  text-align: center;
  color: var(--tinta-fraca);
  padding: var(--e9) var(--e5);
  font-size: var(--t-peq);
  text-wrap: pretty;
}
.vazio p { margin: 0; max-width: 46ch; }
.vazio strong { color: var(--tinta-2); font-size: var(--t-corpo); }
.vazio a { font-weight: 600; }

.icone-vazio {
  color: var(--grafite-4);
  margin-bottom: var(--e1);
}
.icone-vazio.ok { color: var(--sucesso); opacity: .55; }

/* Chat de dúvidas: pergunta alinhada à direita (o que "eu" mandei), resposta
   da equipe à esquerda — a mesma leitura de qualquer app de mensagens. */
.chat-mensagens { display: flex; flex-direction: column; gap: var(--e3);
                  max-height: 420px; overflow-y: auto; padding: var(--e2) var(--e1); }
.bolha { max-width: 82%; padding: var(--e3) var(--e4); border-radius: var(--r);
        white-space: pre-wrap; font-size: var(--t-corpo); }
/* Letra grafite, e não branca, sobre o laranja (22/09/2026): branco sobre
   `--acao` dá 2,5:1 e a própria pergunta de quem escreve ficava difícil de
   reler. Grafite dá 6:1 — o par do manual, o mesmo dos botões. */
.bolha-pergunta { align-self: flex-end; background: var(--acao); color: var(--tinta-sobre-acao);
                  border-bottom-right-radius: var(--r-min); }
.bolha-resposta { align-self: flex-start; background: var(--superficie);
                  border: 1px solid var(--borda);
                  border-bottom-left-radius: var(--r-min); }
.bolha-sistema { align-self: center; color: var(--tinta-fraca);
                 font-size: var(--t-legenda); text-align: center;
                 padding: var(--e1) var(--e3); max-width: 90%; }
.bolha-pendente { font-style: italic; }
.chat-encerrado { margin-top: 2px; }

/* Quem perguntou/respondeu e quando — legenda pequena embaixo da bolha,
   alinhada pro mesmo lado dela. */
.chat-linha { display: flex; flex-direction: column; }
.chat-linha-pergunta { align-items: flex-end; }
.chat-linha-resposta { align-items: flex-start; }
.chat-legenda { font-size: var(--t-legenda); color: var(--tinta-fraca);
               margin-top: 2px; padding: 0 var(--e2); }

.chat-form { display: flex; gap: var(--e2); align-items: flex-end;
            margin-top: var(--e3); }
.chat-form textarea { flex: 1; min-height: 42px; resize: none; }

.chat-anexar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; min-height: 38px; flex-shrink: 0;
  border: 1px solid var(--borda-forte); border-radius: var(--r-peq);
  background: var(--superficie); cursor: pointer; font-size: 16px;
  transition: background var(--transicao), border-color var(--transicao);
}
.chat-anexar:hover { background: var(--cinza-claro); border-color: var(--grafite-4); }
.chat-anexo-selecionado {
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  padding: 2px var(--e2) 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-anexo-selecionado[hidden] { display: none; }
.chat-anexo-link {
  font-size: var(--t-legenda); align-self: inherit;
  padding: 0 var(--e2); margin-top: 2px;
}

/* Chat flutuante — botão redondo no canto, painel que abre por cima do
   conteúdo. z-index 60: acima do topo/menu (40/50), abaixo do modal (100). */
.chat-flutuante { position: fixed; right: var(--e5); bottom: var(--e5); z-index: 60; }

.chat-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  /* Ícone grafite sobre o laranja, pelo mesmo par dos botões (22/09/2026):
     o branco dava 2,5:1, abaixo até dos 3:1 que um ícone precisa. */
  background: var(--acao); color: var(--tinta-sobre-acao); font-size: 24px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transicao), background var(--transicao);
}
.chat-fab:hover { transform: scale(1.06); background: var(--laranja-luz); }

.chat-painel {
  position: absolute; right: 0; bottom: 68px;
  width: 360px; height: 480px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 120px);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-painel[hidden] { display: none; }

/* Puxador no canto superior esquerdo — o painel cresce "pra cima e pra
   esquerda" porque fica ancorado embaixo à direita (bottom/right fixos). */
.chat-redimensionar {
  position: absolute; top: 0; left: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 1; touch-action: none;
  background-image: repeating-linear-gradient(
    135deg, var(--tinta-clara-2) 0 1.5px, transparent 1.5px 5px);
  opacity: .55;
}
.chat-redimensionar:hover { opacity: .9; }

.chat-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e3) var(--e4); background: var(--isg-grafite);
  color: var(--tinta-clara);
}
.chat-titulo-bloco { display: flex; flex-direction: column; min-width: 0; }
.chat-subtitulo { font-size: var(--t-legenda); color: var(--tinta-clara-2);
                  margin-top: 1px; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; }
.chat-subtitulo:empty { display: none; }
.chat-acoes-cabecalho { display: flex; align-items: center; gap: var(--e2);
                        flex-shrink: 0; }
.chat-fechar, .chat-trocar, .chat-expandir {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px; opacity: .85;
}
.chat-fechar:hover, .chat-trocar:hover, .chat-expandir:hover { opacity: 1; }
.chat-expandir[aria-pressed="true"] { opacity: 1; }

/* Escolha antes da conversa, em dois passos: qual projeto e, depois, se a
   dúvida é financeira ou qualitativa. O assunto decide quem atende do outro
   lado, então nunca é adivinhado — ver base.html. */
.chat-escolha[hidden], .chat-conversa[hidden], .chat-passo[hidden] { display: none; }
.chat-lista-projetos { display: flex; flex-direction: column; gap: var(--e2);
                       padding: 0 var(--e4) var(--e3); }
.chat-lista-projetos .botao { justify-content: flex-start; text-align: left; }

/* O botão do assunto carrega uma segunda linha explicando o que cai em cada
   um: "Financeira" e "Qualitativa" sozinhos são rótulos internos da ISG, e
   quem escolhe é o proponente. */
/* Seletor com a lista junto, e não a classe sozinha: `.botao` vem DEPOIS
   deste bloco no arquivo e centraliza o conteúdo — com a mesma
   especificidade, quem estivesse por último ganharia. */
.chat-lista-projetos .chat-opcao-assunto {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding-block: var(--e2); text-align: left;
}
.chat-lista-projetos .chat-opcao-assunto small {
  font-weight: 400; font-size: var(--t-legenda); color: var(--tinta-fraca);
  line-height: 1.35; white-space: normal;
}
.chat-voltar { margin: 0 var(--e4) var(--e3); }

/* A conversa e a lista de mensagens crescem pra ocupar a altura que o
   painel tiver — é o que faz redimensionar (arrastando ou pelo botão)
   mostrar mais conversa em vez de sobrar espaço em branco. */
.chat-conversa { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-painel [data-duvidas-lista] {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 var(--e4); margin-top: var(--e2);
}
.chat-painel .chat-mensagens { max-height: none; }
.chat-painel .chat-form { flex-shrink: 0; padding: var(--e3) var(--e4) var(--e4); margin-top: 0; }

/* "Aumentar" o chat — atalho de um clique pro mesmo redimensionamento que
   dá pra fazer arrastando o puxador; o botão só pula pra um tamanho maior
   fixo, mais rápido que ajustar na mão. */
.chat-painel.expandido { width: 560px; height: 640px; }

@media (max-width: 480px) {
  .chat-flutuante { right: var(--e3); bottom: var(--e3); }
  .chat-redimensionar { display: none; }
  .chat-painel, .chat-painel.expandido {
    position: fixed; right: 12px; left: 12px; bottom: 84px;
    width: auto; max-width: none; height: 70vh;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   BOTÕES

   Primário laranja com lettering grafite (5,97:1). É o mesmo par que o
   manual prescreve para o logo sobre fundo laranja na p. 15.
   ═══════════════════════════════════════════════════════════════════════ */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 10px var(--e5);
  min-height: 42px;
  background: var(--acao);
  color: var(--tinta-sobre-acao);
  border: 1px solid transparent;
  border-radius: var(--r-peq);
  font-family: var(--fonte-texto);
  font-size: var(--t-botao); font-weight: 600; line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), transform .06s ease, box-shadow var(--transicao);
}
/* Hover CLAREIA o laranja e mantém a letra grafite (22/09/2026). Antes ele
   escurecia para `--acao-hover` e trocava a letra para branco: 4,2:1, abaixo
   dos 4,5:1 que o texto de 14,5px pede — o botão principal de cada tela
   reprovava justamente no instante em que a pessoa ia clicar nele. Grafite
   sobre `--laranja-luz` dá 6,8:1, e a letra deixa de piscar de cor no
   hover, que é o par que o manual valida (p. 15: sobre laranja, o logo
   entra preto). */
.botao:hover { background: var(--laranja-luz); color: var(--tinta-sobre-acao); text-decoration: none; }
.botao:active { transform: translateY(1px); }

.botao.fantasma {
  background: var(--superficie);
  border-color: var(--borda-forte);
  color: var(--tinta);
}
.botao.fantasma:hover { background: var(--cinza-claro); border-color: var(--grafite-4); color: var(--tinta); }

/* Grafite: a ação séria e definitiva, quando o laranja já está em uso ao
   lado e dois laranjas competiriam. */
.botao.grafite { background: var(--isg-grafite); color: var(--tinta-clara); }
.botao.grafite:hover { background: var(--grafite-2); color: var(--tinta-clara); }

.botao.verde { background: var(--sucesso); color: #fff; }        /* aceitar */
.botao.verde:hover { background: var(--sucesso-tinta); color: #fff; }

/* Reabrir. O vermelho puro (#FF2800) preenchido com branco dá 3,78:1 e
   reprova no WCAG para texto de 14px — medido, não estimado. A sombra do
   vermelho, que está na própria rampa do manual, dá 6,2:1 e é exatamente o
   uso que ele prevê para botões. */
.botao.vermelho { background: var(--vermelho-escuro); color: #fff; }
.botao.vermelho:hover { background: var(--vermelho-sombra); color: #fff; }

.botao.pequeno { padding: 6px var(--e3); min-height: 34px; font-size: var(--t-peq); }
.botao.largo { width: 100%; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* ── O rótulo comprido na tela mínima ──────────────────────────────────
   O `white-space: nowrap` lá em cima é o certo em tela normal: rótulo de
   botão quebrado em duas linhas parece defeito, e todos os rótulos do portal
   cabem. Todos, menos numa largura: "Liberar e mostrar ao proponente" mede
   283 px, e em 280 px de tela ele não cabe de jeito nenhum — vaza, e leva a
   página inteira para a rolagem lateral junto.

   Abaixo de 340 px, então, rótulo comprido quebra. Só existe uma escolha
   nessa largura — quebrar ou vazar — e quebrar é a que deixa o botão
   inteiramente clicável.

   340 px e não 360: em 360 tudo ainda cabe, e mexer onde não precisa é como
   se estragam telas que estavam boas. */
@media (max-width: 340px) {
  .botao { white-space: normal; }
}

kbd {
  display: inline-block; min-width: 18px; text-align: center;
  font-family: var(--fonte-texto); font-size: 10.5px; font-weight: 700;
  padding: 1px 5px;
  background: rgba(40, 40, 40, .06);
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: var(--r-min);
  color: var(--tinta-fraca);
}
.botao kbd { background: rgba(255, 255, 255, .28); border-color: rgba(40, 40, 40, .2); color: inherit; }
/* Sobre o grafite da chamada a rampa inverte (MARCA.md): a tecla em
   --tinta-fraca dava 2,53:1 ali. Pastilha clara translúcida e letra clara. */
.chamada kbd {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: var(--tinta-clara);
}


/* ═══════════════════════════════════════════════════════════════════════
   FORMULÁRIOS
   ═══════════════════════════════════════════════════════════════════════ */

label {
  display: block;
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-2);
  margin: var(--e4) 0 var(--e1);
}

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=tel], input[type=number], input[type=file],
select, textarea {
  width: 100%;
  padding: 9px var(--e3);
  min-height: 38px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.4;
  transition: border-color var(--transicao), box-shadow var(--transicao),
              background var(--transicao);
}
textarea { min-height: 96px; resize: vertical; padding-top: var(--e2); }

input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }

input[type=text]:hover, input[type=email]:hover, input[type=password]:hover,
input[type=search]:hover, input[type=date]:hover, select:hover, textarea:hover {
  border-color: var(--grafite-4);
}

/* Foco laranja: o mesmo laranja da ação, para o olho aprender uma cor só.

   O laranja do anel é `--anel-foco`, e não o puro (09/10/2026, medido): o
   #FF8300 sobre branco dá 2,47:1 e sobre o --fundo 2,27:1 — abaixo dos 3:1
   que a WCAG pede para indicador de foco (é marca gráfica, não texto). No
   claro o anel usa o laranja ESCURO da rampa (4,2:1 sobre branco, 3,9:1
   sobre o fundo), que ainda se lê como laranja; no escuro, o puro já dá
   6:1 sobre o grafite e continua. Ver o par em [data-theme="dark"]. */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--anel-foco);
  box-shadow: 0 0 0 3px var(--acao-veu);
}

/* Anel de foco visível — e só para quem navega por teclado. */
:focus-visible {
  outline: 2px solid var(--anel-foco);
  outline-offset: 2px;
  border-radius: var(--r-min);
}

/* O campo de arquivo escondido (`.visualmente-oculto`) recebe o foco, mas
   não aparece — quem precisa acender é o que se vê: a área de soltar ou o
   botão "Anexar" que vem logo depois dele no HTML. Sem isto, o Tab parava
   num lugar invisível. O chat tem o campo DENTRO do rótulo, daí o
   `:has()` — e não `:focus-within`, que acenderia também no clique do
   mouse (clicar no rótulo foca o campo). */
.visualmente-oculto:focus-visible + .area-solta,
.visualmente-oculto:focus-visible + .botao,
.chat-anexar:has(input:focus-visible) {
  outline: 2px solid var(--anel-foco);
  outline-offset: 2px;
}
.visualmente-oculto:focus-visible + .area-solta {
  border-color: var(--anel-foco);
  color: var(--tinta-2);
}

/* A seta nativa do <select> não segue tema nenhum; esta é grafite. */
select {
  appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  padding-right: var(--e7);
}
select::-ms-expand { display: none; }
input[type=search] { appearance: none; }

input[type=checkbox], input[type=radio] {
  accent-color: var(--isg-laranja);
  cursor: pointer;
  width: 16px; height: 16px;
}

.obrigatorio { color: var(--tinta-acao); font-weight: 700; }

.linha-form { display: flex; gap: var(--e3); flex-wrap: wrap; }
.linha-form > * { flex: 1; min-width: 170px; }

.linha-campos { display: flex; gap: var(--e3); flex-wrap: wrap; }
/* A data ficou bem mais larga que os 128px de antes porque ela passou a
   carregar uma linha embaixo: o mês da prestação, que sai dela. A medida não
   é do campo, é da FRASE — "Entra em Dezembro de 2026." pede 201px, e uma
   frase que quebra em duas linhas empurra o formulário inteiro a cada tecla
   digitada na data. Ver .mes-derivado. */
.linha-campos .c-data   { flex: 0 0 210px; }
.linha-campos .c-valor  { flex: 0 0 148px; }
.linha-campos .c-credor { flex: 1 1 230px; }

/* O mês da prestação, escrito embaixo da data enquanto se digita.
   Não é rótulo nem campo: é a CONSEQUÊNCIA da data, mostrada no lugar onde
   ela é decidida. O par Mês/Ano saiu do formulário (o mês é sempre o do
   pagamento), e sem esta linha a pessoa só descobriria em que mês o
   apontamento caiu depois de salvar — inclusive quando ele cai num mês que
   não é o da tela em que ela está.

   Some quando o campo está vazio, em vez de ocupar espaço dizendo nada. */
.mes-derivado {
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  margin: var(--e1) 0 0;
  min-height: 1.2em;
}
.mes-derivado:empty { min-height: 0; }
/* Data pela metade: o aviso muda de cor porque, sem ela, não há mês nenhum —
   e o formulário vai recusar. É informação, não erro ainda: quem está no
   meio da digitação não levou bronca, só ainda não terminou. */
.mes-derivado.incompleta { color: var(--tinta-acao); }


/* ═══════════════════════════════════════════════════════════════════════
   AVISOS

   Faixa de cor à esquerda + véu claro do mesmo tom. O texto nunca usa a
   cor pura: usa a sombra dela, que é o que o manual reservou para isso.
   ═══════════════════════════════════════════════════════════════════════ */

.aviso {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--isg-grafite);
  border-radius: var(--r-peq);
  background: var(--superficie);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  font-size: var(--t-peq);
}
.aviso a { font-weight: 600; }

/* O ícone carrega o sentido junto com a cor: quem não distingue vermelho de
   verde, e a impressão em preto e branco, continuam sabendo o que é o quê.

   Só o aviso que TEM ícone vira flex, e por isso a classe é explícita. O
   `.aviso` continua sendo um bloco de texto comum, porque a maioria deles é
   um parágrafo com <strong> e <a> soltos no meio — num contêiner flex cada
   um desses viraria um item próprio, lado a lado, e a frase se desmontaria.
   Foi exatamente o que aconteceu quando esta regra valia para todos. */
.aviso.com-icone {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
}
.aviso.com-icone > .i { margin-top: 2px; }
.aviso.com-icone > :last-child { min-width: 0; }
.aviso.ok > .i      { color: var(--sucesso); }
.aviso.erro > .i    { color: var(--perigo-tinta); }
.aviso.atencao > .i { color: var(--atencao-tinta); }
.aviso.ok      { border-left-color: var(--sucesso); background: var(--sucesso-veu); border-color: rgba(10,122,80,.2); }
.aviso.erro    { border-left-color: var(--perigo);  background: var(--perigo-veu);  border-color: rgba(255,40,0,.22); }
.aviso.atencao { border-left-color: var(--isg-amarelo); background: var(--atencao-veu); border-color: rgba(191,167,0,.3); }

/* O recado da última ação, preso no pé da tela quando a volta cai numa
   âncora (ver ligarRecadoNaAncora no apontamentos.js): sem isto ele ficava
   no alto da página, fora da vista no celular.

   Fica ACIMA do botão do chat (56px + folga) para não cobri-lo, e com
   largura de leitura no desktop. O véu de cor dos avisos é translúcido —
   flutuando sobre o conteúdo, ele precisa da superfície por baixo, senão o
   texto do cartão atravessa o recado. Sombra só aqui: é o que flutua de
   verdade (MARCA.md, elevação). */
.aviso.flutuante {
  position: fixed;
  left: var(--e3); right: var(--e3);
  bottom: calc(var(--e3) + 56px + var(--e3));
  max-width: 560px;
  margin: 0 auto;
  z-index: 70;
  box-shadow: var(--sombra-3);
}
.aviso.flutuante.ok      { background: linear-gradient(var(--sucesso-veu), var(--sucesso-veu)), var(--superficie); }
.aviso.flutuante.erro    { background: linear-gradient(var(--perigo-veu), var(--perigo-veu)), var(--superficie); }
.aviso.flutuante.atencao { background: linear-gradient(var(--atencao-veu), var(--atencao-veu)), var(--superficie); }
@media print { .aviso.flutuante { position: static; box-shadow: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   SELOS E CONTADORES
   ═══════════════════════════════════════════════════════════════════════ */

/* inline-flex, e não inline-block, porque vários destes selos carregam um
   ícone antes do texto (prazo, urgência, novidade). Com inline-block o SVG
   assenta na linha de base e fica um ou dois pixels abaixo do texto; com
   flex + center os dois se alinham pelo meio, que é onde o olho espera. */
.selo, .selo-prazo, .espera, .quantos, .selo-rascunho, .selo-devolvido,
.selo-novo, .conta-falas {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--t-legenda); font-weight: 700;
  line-height: 1.5;
  padding: 2px var(--e2);
  border-radius: var(--r-pill);
  white-space: nowrap;
  /* Um selo nunca deve ser o que estoura a largura de um cartão estreito.
     Se o rótulo for longo demais, ele corta em reticências em vez de
     empurrar o resto da linha para fora da tela. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Os quatro estados, na ordem da rampa do símbolo. */
.selo.pendente   { background: var(--pendente-veu);   color: var(--pendente-tinta); }
.selo.respondido { background: var(--respondido-veu); color: var(--respondido-tinta); }
.selo.reaberto   { background: var(--reaberto-veu);   color: var(--reaberto-tinta); }
.selo.aceito     { background: var(--aceito-veu);     color: var(--aceito-tinta); }

.selo-prazo.atrasado  { background: var(--reaberto-veu);   color: var(--reaberto-tinta); }
.selo-prazo.hoje      { background: var(--pendente-veu);   color: var(--pendente-tinta); }
.selo-prazo.perto     { background: var(--respondido-veu); color: var(--respondido-tinta); }
.selo-prazo.tranquilo { background: var(--cinza-claro);    color: var(--tinta-fraca); }

.espera { background: var(--cinza-claro); color: var(--tinta-fraca); font-size: var(--t-legenda); }
.espera.parada       { background: var(--pendente-veu); color: var(--pendente-tinta); }
.espera.muito-parada { background: var(--reaberto-veu); color: var(--reaberto-tinta); }

.quantos { background: var(--cinza-claro); color: var(--tinta-fraca); }

/* Novidade desde a última visita: amarelo — a estrela do símbolo, o que
   brilha. Sobre amarelo, lettering grafite (manual p. 15). */
.selo-novo {
  background: var(--isg-amarelo); color: var(--isg-grafite);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
}

.selo-rascunho { background: var(--cinza-luz); color: var(--grafite-2);
                 text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.selo-devolvido { background: var(--reaberto-veu); color: var(--reaberto-tinta);
                  text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }

/* Tela de Revisão: o que fica ao redor do apontamento em conferência. */
.rodape-validacao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  margin: -4px 0 var(--e4); padding: 0 var(--e3) var(--e3);
}
.rodape-validacao .dica { margin: 0; }

/* A proposta do analista vem ANTES do detalhe: é a pergunta que a revisora
   está respondendo, e ler o caso todo sem saber o que se propôs é ler duas
   vezes. */
.proposta-analista {
  display: flex; align-items: center; gap: var(--e2);
  flex-wrap: wrap; margin-bottom: var(--e3);
}
/* .selo-nao-enviada saiu em 18/09/2026, junto com as duas ocorrências dele
   em partes/cartao.html — ver o comentário lá para o porquê. */
.conta-falas { background: var(--cinza-claro); color: var(--tinta-fraca); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════
   ABAS E FILTROS
   ═══════════════════════════════════════════════════════════════════════ */

.abas { display: flex; gap: var(--e1); flex-wrap: wrap; margin-bottom: var(--e5);
        border-bottom: 1px solid var(--borda); }
/* O que precisa do proponente em cada projeto: o véu e a tinta do estado
   "pendente", porque é exatamente isso que o número conta (a bola está com
   ele). Ver proponente/painel.html. */
.abas .aba .quantos.pendentes {
  margin-left: var(--e2);
  background: var(--pendente-veu); color: var(--pendente-tinta);
}
.aba {
  position: relative;
  padding: var(--e2) var(--e4);
  font-size: var(--t-peq); font-weight: 500;
  color: var(--tinta-fraca);
  background: none; border: 0;
  cursor: pointer;
  transition: color var(--transicao);
}
.aba::after {
  content: ""; position: absolute; left: var(--e2); right: var(--e2); bottom: -1px;
  height: 2px; background: var(--isg-laranja);
  transform: scaleX(0); transition: transform var(--transicao);
}
.aba:hover { color: var(--tinta); text-decoration: none; }
.aba.ativa { color: var(--tinta); font-weight: 600; }
.aba.ativa::after { transform: scaleX(1); }

.filtros {
  display: flex; gap: var(--e4); flex-wrap: wrap; align-items: flex-end;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e5);
}
.filtros label { margin: 0 0 var(--e1); font-size: var(--t-legenda); }
.filtros .campo { flex: 1; min-width: 150px; }
.filtros .botao { align-self: flex-end; }


/* ═══════════════════════════════════════════════════════════════════════
   TABELAS
   ═══════════════════════════════════════════════════════════════════════ */

table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
th, td {
  text-align: left;
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
thead th {
  font-size: var(--t-legenda); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-fraca);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda-forte);
  white-space: nowrap;
  padding-top: var(--e3); padding-bottom: var(--e3);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: var(--superficie-2); }
/* A primeira coluna é o nome da coisa — projeto, pessoa, momento. É por ela
   que se percorre a tabela, então ela carrega o peso. */
tbody td:first-child { color: var(--tinta); }

/* Editar/Excluir ao lado do nome do projeto, em partes/tabela_projetos.html.
   Sempre visíveis, e não só ao passar o mouse: quem abre esta tabela no
   celular não tem hover — um controle que só aparece nele fica
   inalcançável no toque, que é o caso comum aqui (ver a regra de
   responsividade). */
.acoes-linha-projeto {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: var(--e2);
  /* Sobe 1px: os ícones são quadrados de 26px, e o texto do rótulo ao lado
     (a fonte de título, com ascendentes altos) os deixava parecendo
     "afundados" um pixel abaixo da linha de base. */
  vertical-align: -2px;
}

/* O <button> do Editar e o <a> do Excluir são o MESMO desenho, e por isso
   uma classe só — a diferença de elemento (um não navega, o outro navega)
   não deveria custar uma segunda folha de regras para manter igual à
   primeira. `background: none; border: none` zera o estilo nativo do
   <button>, que sem isso desenha uma caixa cinza com borda em relevo — foi
   o quadrado que sobrava aqui antes desta correção (19/09/2026). */
.icone-linha-projeto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: none; border: none; border-radius: 50%;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.icone-linha-projeto:hover,
.icone-linha-projeto:focus-visible {
  background: var(--cinza-claro); color: var(--tinta);
  text-decoration: none;
}
.icone-linha-projeto:focus-visible {
  outline: 2px solid var(--anel-foco); outline-offset: 1px;
}

/* Excluir fica no MESMO tom neutro que Editar em repouso — de propósito:
   uma lixeira vermelha o tempo todo, numa linha por projeto, grita "cuidado"
   antes mesmo de alguém pensar em apagar algo, e o portal reserva cor cheia
   para o que se está prestes a fazer, não para o que só existe na tela (a
   mesma regra que tira o acento de um apontamento "aceito"). O vermelho
   chega no hover e no foco — exatamente quando a intenção é real. */
.icone-linha-projeto.perigoso:hover,
.icone-linha-projeto.perigoso:focus-visible {
  background: var(--perigo-veu); color: var(--perigo-tinta);
}


/* ═══════════════════════════════════════════════════════════════════════
   RESUMO NUMÉRICO
   ═══════════════════════════════════════════════════════════════════════ */

/* O resumo numérico vira uma fileira de cartões, e não três números soltos
   no branco. Cada um é um bloco delimitado, como as faixas de cor da p. 11
   do manual: o número grande em cima, o rótulo em caixa alta embaixo. */
.resumo {
  display: flex; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e6);
}
.resumo .item {
  flex: 1 1 150px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--borda-forte);
  /* `--r-gr`, e não `--r`: é o raio que `.painel` e `.filtros` já usam. Estes
     cartões dividem a tela com os dois — na Dados, `.filtros` fica logo acima
     deles —, e dois raios diferentes lado a lado leem como descuido, não como
     hierarquia. */
  border-radius: var(--r-gr);
  padding: var(--e5);
}
.resumo .numero {
  font-family: var(--fonte-titulo);
  /* Peso 600, não 700, e numeral tabular. Os dois vêm da mesma ideia: uma
     fileira de cartões numéricos precisa que os números se COMPAREM, e o que
     atrapalha a comparação é cada dígito ter uma largura própria ("72,0h"
     mais estreito que "30" só porque o 1 é fino) e o traço grosso demais
     empastar o decimal. Tabular-nums alinha as colunas; 600 mantém a presença
     do Outfit sem transformar cada número num grito — é a diferença entre um
     painel e um relatório impresso, e esta tela é impressa. */
  font-size: var(--t-cifra-gr); font-weight: 600; line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.resumo .rotulo {
  font-size: var(--t-legenda); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-fraca);
  margin-top: var(--e1);
}
/* A cor do número sobe para o fio do topo do cartão: assim o bloco inteiro
   se lê de longe, e não só o dígito. */
.resumo .item:has(.cor-atencao) { border-top-color: var(--isg-amarelo); }
.resumo .item:has(.cor-sucesso) { border-top-color: var(--sucesso); }
.resumo .item:has(.cor-perigo)  { border-top-color: var(--isg-vermelho); }
/* `.cor-atencao` e `.cor-perigo` já existem (seção NOTAS E LINHAS DE APOIO,
   mais abaixo) com a sombra certa de cada cor — usadas aqui sem redefinir
   nada, no número de "dias do mais antigo" da tela Dados. */

/* ── Dados (18/09/2026, redesenhada no mesmo dia) ───────────────────────
   Era "Indicadores de Desempenho" — três blocos empilhados, sem gráfico. O
   Rodrigo pediu a tela de verdade: nome novo (`admin/dados.html`, rota
   `/admin/dados`), gráficos em SVG puro (sem Chart.js — esta tela é
   IMPRESSA para o gestor, e canvas pintado por script muitas vezes não sai
   no papel) e o botão de limpar dados de teste. `.acoes-indicadores` virou
   `.acoes-dados`; nada mais neste arquivo dependia do nome antigo.

   O rodapé de ações (Imprimir · Exportar CSV) é a única tela do admin com
   duas ações soltas fora de um formulário — os outros rodapés de ação são
   de diálogo (.dialogo-rodape) ou de detalhe (.detalhe-acoes). Uma fileira
   simples, alinhada à direita: são ações sobre a tela inteira, não sobre um
   item dela, então não fazem sentido presas a uma seção específica. */
.acoes-dados {
  display: flex; justify-content: flex-end; gap: var(--e3);
  margin-top: var(--e6);
}

/* ── Gráficos SVG ────────────────────────────────────────────────────
   Nenhuma cor nova: as barras neutras usam a rampa de cinza do grafite
   (`--grafite-3`), e a única exceção é "Por status", que herda as MESMAS
   quatro cores dos selos de apontamento (pendente/respondido/reaberto/
   aceito) — não é decoração nova, é o mesmo significado já usado no
   restante do portal. O laranja da marca fica de fora de propósito: ele
   marca o que se clica (regra 2 do sistema visual), e uma barra de gráfico
   não é ação — usá-lo aqui decoraria, que é justamente o que a regra
   proíbe. */
/* ── O ar entre as seções (21/09/2026) ─────────────────────────────────
   Uma tela inteira de números precisa de mais respiro que uma tela de lista:
   sem intervalo, "Volume mensal" e "Distribuições" viram um bloco só de
   gráficos, e o olho não sabe onde uma pergunta termina e a outra começa. O
   `--e9` aqui somado ao `margin-top: var(--e8)` que todo `h2` já tem dá o
   intervalo cheio entre a última caixa de uma seção e o título da próxima —
   sem valor novo, os dois já estão na régua. */
.secao-grafico { margin-bottom: var(--e9); }
.grafico { display: block; width: 100%; height: auto; }
.grafico-mensal { max-width: 100%; }
/* Dois fios finos atrás das barras, na metade e no topo da barra mais alta.
   O número já está escrito acima de cada barra — o fio não repete isso, ele
   responde outra pergunta: "este mês chegou perto do maior?", que só a altura
   responde e que o olho erra sem uma referência. Ficam em `--borda` (o tom
   mais apagado que o arquivo tem) e são desenhados ANTES das barras, para
   passarem por baixo delas e nunca por cima de um valor. Somem quando a série
   é toda zero: grade sobre gráfico vazio é enfeite, não medida. */
.grafico-grade { stroke: var(--borda); stroke-width: 1; }
/* Em telas largas o wrapper não faz nada (o SVG já cabe em 100%). Abaixo de
   640px (ver @media perto do fim do arquivo) ele vira a janela de rolagem:
   ver o comentário no macro `grafico_mensal`, em dados.html. */
.grafico-mensal-rolagem { max-width: 100%; }
.grafico-eixo { stroke: var(--borda-forte); stroke-width: 1; }
.grafico-barra-vazia { fill: var(--borda-forte); }
.grafico-rotulo-valor {
  font-size: 9px; font-weight: 600; fill: var(--tinta-2);
  font-family: var(--fonte-texto);
}
.grafico-rotulo-eixo {
  font-size: 8px; fill: var(--tinta-fraca);
  font-family: var(--fonte-texto);
}
/* ── A segunda série: linha por cima das barras ────────────────────────
   Barra para o que chega, linha para o ritmo de quem fecha. O porquê de
   serem um gráfico só, e não dois lado a lado, está no macro
   `grafico_mensal` de `admin/dados.html`.

   `vector-effect: non-scaling-stroke` é o que impede a linha de engordar: o
   SVG é esticado pelo viewBox, e sem isso a espessura do traço estica junto
   — a mesma linha sairia fina no celular e gorda no monitor largo. */
.grafico-linha {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* O ponto tem um anel da cor do CARTÃO em volta, não da cor da linha: onde a
   linha passa por cima de uma barra, é esse anel que separa os dois e evita
   a mancha em que não se distingue mais o que é ponto e o que é barra. */
.grafico-ponto { stroke: var(--superficie); stroke-width: 1.5; }
.grafico-rotulo-linha {
  font-size: 8px; font-weight: 600; font-family: var(--fonte-texto);
}
.legenda-grafico {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  margin: 0 0 var(--e3); font-size: var(--t-legenda);
  color: var(--tinta-fraca);
}
.chave-serie { display: inline-flex; align-items: center; gap: var(--e2); }
/* ── A cor de cada marca gráfica, por classe (07/10/2026) ──────────────
   Até aqui a cor de legenda e de barra entrava num `style="background: …"`
   escrito pelo template, e eram esses atributos que seguravam o
   `'unsafe-inline'` no `style-src` da CSP. Agora o template escreve só o
   NOME do token (`cor-marca-pendente-tinta`), a classe põe o token em
   `--cor-marca`, e cada peça (chave da legenda, barra de distribuição,
   barra da fila por idade) pinta com `var(--cor-marca)`.

   Nenhuma cor nova: são exatamente os tokens que `admin/dados.html` já
   usava, e o `-tinta` de cada um continua trocando de ponta sozinho no modo
   escuro, porque `--cor-marca` só aponta para ele. Token novo no template
   precisa de uma linha nova aqui — sem ela a peça cai no `--grafite-3`, que
   é o neutro de sempre, e não some. */
.cor-marca-grafite-3        { --cor-marca: var(--grafite-3); }
.cor-marca-tinta-fraca      { --cor-marca: var(--tinta-fraca); }
.cor-marca-sucesso-tinta    { --cor-marca: var(--sucesso-tinta); }
.cor-marca-pendente-tinta   { --cor-marca: var(--pendente-tinta); }
.cor-marca-respondido-tinta { --cor-marca: var(--respondido-tinta); }
.cor-marca-reaberto-tinta   { --cor-marca: var(--reaberto-tinta); }
.cor-marca-aceito-tinta     { --cor-marca: var(--aceito-tinta); }
.cor-marca-perigo-tinta     { --cor-marca: var(--perigo-tinta); }
.marca-serie {
  display: inline-block; border-radius: var(--r-min);
  background: var(--cor-marca, var(--grafite-3));
}
.marca-barra { width: 11px; height: 11px; }
/* A chave da linha é um traço, e não outro quadrado: a legenda deve parecer
   o que está desenhada no gráfico, senão ela é uma tabela de cores e não uma
   legenda. */
.marca-linha { width: 14px; height: 3px; border-radius: var(--r-pill); }

/* ── O realce por coluna (21/09/2026) ──────────────────────────────────
   O fundo de cada coluna é transparente no repouso e acende de leve quando o
   ponteiro entra nela. Serve para uma coisa só: segurar o olho na mesma
   vertical enquanto se lê a barra em cima e os dois números embaixo — doze
   meses numa faixa rolável é onde se perde a linha mais fácil.

   O realce é `:hover` em CSS puro, sem JS nenhum: assim ele funciona antes
   de o script carregar, e continua funcionando se o script falhar. O
   JavaScript só entra para a etiqueta, que precisa de posição. */
.grafico-fundo-coluna { transition: fill var(--transicao); }
.grafico-coluna:hover .grafico-fundo-coluna,
.grafico-coluna.ativa .grafico-fundo-coluna { fill: var(--cinza-claro); }

/* A etiqueta do toque. Nasce escondida e só o JS a mostra — sem script ela
   nunca aparece, e é por isso que ela não pode conter nada que já não esteja
   escrito no desenho (ver o comentário nos `data-*` do macro). */
.etiqueta-grafico {
  position: absolute; z-index: 3; pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -100%);
  background: var(--superficie-escura); color: var(--tinta-clara);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  padding: var(--e2) var(--e3);
  font-size: var(--t-legenda); line-height: 1.45;
  white-space: nowrap;
  box-shadow: var(--sombra-2);
  transition: opacity var(--transicao);
}
.etiqueta-grafico.visivel { opacity: 1; visibility: visible; }
/* No escuro, `--superficie-escura` É o grafite do próprio cartão: a etiqueta
   sairia grafite sobre grafite, invisível justamente no tema em que ela mais
   flutua. Sobe um degrau (`--superficie-2`, o mesmo que o arquivo usa para
   bloco dentro de bloco) e a tinta vira a clara de sempre. */
:root[data-theme="dark"] .etiqueta-grafico {
  background: var(--superficie-2); color: var(--tinta);
  /* Um degrau acima só separa a etiqueta do cartão em 1,2:1 — é o fio que
     faz o recorte, e no escuro ele precisa ser mais forte que `--borda-forte`
     (1,4:1) para desenhar a caixa. `--grafite-3` dá 3,1:1. */
  border-color: var(--grafite-3);
}
.etiqueta-grafico strong { display: block; font-family: var(--fonte-titulo); }
.etiqueta-grafico .num { font-variant-numeric: tabular-nums; }

.grade-graficos-mensais {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5);
}
.grade-distribuicoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5);
}

/* ── Cada gráfico dentro de um cartão (21/09/2026) ─────────────────────
   Até aqui `.bloco-grafico` não era nada: `min-width: 0` e só. Os gráficos
   ficavam soltos sobre o cinza da página, sem nada dizendo onde um termina e
   o outro começa — e numa grade de dois por dois isso é o suficiente para a
   legenda de um parecer do outro.

   O tratamento não é inventado aqui: é o MESMO de `.painel` (fundo de
   superfície, fio de borda, `--r-gr`, `--e6` de respiro por dentro), que
   "Fila por idade" e "Tempos, em detalhe" já usam nesta mesma tela. Isso
   também é o que faz a página funcionar: o cinza de `--fundo` atrás e o
   branco do cartão à frente já bastam para separar — sem sombra nenhuma, que
   é a regra deste arquivo desde o começo (o manual constrói hierarquia com
   linha, não com elevação).

   No escuro nada disso precisa mudar: os dois são token, e o cartão vira
   grafite sobre o fundo um degrau abaixo, a mesma relação invertida. */
.bloco-grafico {
  min-width: 0;
  /* `relative` por causa da etiqueta do gráfico mensal, que é posicionada
     dentro do cartão — ver `.etiqueta-grafico`. */
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e6);
}
/* O `h3` já traz `margin-top: var(--e5)` da escala geral; encostado no topo
   do cartão, esse espaço vira um buraco acima do título. */
.bloco-grafico h3 { margin-top: 0; margin-bottom: var(--e1); }

/* ── Distribuição: rótulo em cima, barra fina embaixo (21/09/2026) ─────
   Esta era a peça com SVG esticado por baixo de uma lista HTML, e o porquê
   de ela ter deixado de ser isso está por extenso no macro
   `grafico_distribuicao`, em `admin/dados.html` — em resumo: o rótulo ficava
   POR CIMA da barra, e o rótulo da maior barra de cada gráfico (sempre o
   primeiro da lista, que vem ordenada) saía em 2,2:1 no claro e 1,4:1 no
   escuro. Diluir a barra num véu resolvia para todas as cores menos o
   amarelo, que diluído em grafite anda na direção do texto claro em vez de
   fugir dele.

   Agora cada linha tem duas fileiras: rótulo e número lado a lado, e a barra
   ocupando a largura inteira logo abaixo. O texto nunca mais encosta em cor,
   então as barras voltam a CHEIO — o laranja de "pendente" é laranja de
   novo, e não um véu. O desenho não é novo nesta tela: é o mesmo da "Fila
   por idade", algumas regras abaixo.

   A barra é fina (6px) de propósito. É o COMPRIMENTO que mede aqui;
   grossura nunca mediu nada, e uma tarja alta só rouba a atenção do número
   que está escrito ao lado dela. */
.lista-distribuicao { list-style: none; margin: 0; padding: 0; }
.lista-distribuicao li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--e3); row-gap: var(--e2);
  padding: var(--e3) 0;
  font-size: var(--t-peq);
}
.lista-distribuicao li + li { border-top: 1px solid var(--borda); }
/* `overflow-wrap: anywhere` porque um rótulo pode ser uma sigla comprida sem
   espaço nenhum ("Fundação Aurora.CEE12") dentro de meia coluna de cartão —
   sem isto ele empurra a grade e o número sai do cartão. */
.lista-distribuicao .rotulo-linha {
  color: var(--tinta-2); min-width: 0; overflow-wrap: anywhere;
}
.lista-distribuicao .valor-linha {
  font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums;
  font-size: var(--t-corpo);
  white-space: nowrap;
}
/* A fatia em porcentagem, ao lado do número absoluto. Fica em peso e tom
   menores porque é a leitura de apoio: o número é o dado, a porcentagem é o
   que ele significa dentro daquele gráfico. O ponto separador entra por
   `::before` para não virar mais um nó de texto que um leitor de tela
   anuncia como "ponto". */
.lista-distribuicao .parte-linha {
  margin-left: var(--e2);
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: var(--t-legenda); color: var(--tinta-fraca);
}
.lista-distribuicao .parte-linha::before { content: "· "; }
/* Realce da linha inteira sob o ponteiro: não diz nada de novo, só segura o
   olho entre o rótulo, o número e a barra, que ficam em fileiras
   diferentes. O `-8px` devolve à faixa acesa a largura que o `padding` do
   cartão tiraria, para o realce ir de ponta a ponta. */
@media (hover: hover) {
  .lista-distribuicao li {
    margin: 0 -8px; padding-left: 8px; padding-right: 8px;
    border-radius: var(--r-peq);
    transition: background var(--transicao);
  }
  .lista-distribuicao li:hover { background: var(--superficie-2); }
}

/* ── O anel de proporção ───────────────────────────────────────────────
   Terceiro formato da tela. O `rotate(-90deg)` põe o começo do traço às 12
   horas: sem ele um anel de 25% começa às 3 horas, que ninguém lê como um
   quarto. */
.grade-aneis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e5);
  margin-bottom: var(--e6);
}
.item-anel {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--e1);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e5);
}
.moldura-anel { position: relative; width: 104px; max-width: 100%; }
.anel { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 9; }
/* `--fundo` no trilho, e não um cinza escolhido à parte: é o mesmo tom que
   `.trilho-linha` e `.barra-distribuicao` já usam como "o que falta". Os três
   gráficos da tela passam a ter um sulco só. E mede melhor — contra o fundo
   de página o arco dá 3,7:1 no claro e 4,5:1 no escuro, contra 3,0 e 2,4 do
   cinza que estava aqui antes. */
.anel-trilho { stroke: var(--fundo); }
.anel-valor {
  stroke: var(--grafite-3); stroke-linecap: round;
  transition: stroke-dashoffset var(--t-gesto) var(--curva-saida);
}
.anel-atencao { stroke: var(--atencao-tinta); }
/* O número mora NO MEIO do anel, e é ele o dado — o anel é a moldura. Daí o
   `aria-hidden` no SVG: quem ouve a tela recebe o número e o rótulo, e não
   um desenho descrito duas vezes. */
.numero-anel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: var(--t-cifra);
  font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rotulo-anel {
  margin-top: var(--e2);
  font-size: var(--t-legenda); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-fraca);
}
.lista-distribuicao .trilho-linha {
  grid-column: 1 / -1;
  display: block; height: 6px; border-radius: var(--r-min);
  background: var(--fundo); overflow: hidden;
}
/* A barra é um `<svg width="NN%">` vazio (ver o macro `grafico_distribuicao`
   em `admin/dados.html`): a largura vem do atributo, que a CSP não conta como
   estilo inline; o resto é caixa comum e vem daqui. */
.lista-distribuicao .barra-linha {
  display: block; height: 100%; border-radius: inherit;
  background: var(--cor-marca, var(--grafite-3));
}
.distribuicao-projetos .lista-distribuicao .rotulo-linha { font-size: var(--t-corpo); }

/* Fila por idade: só quatro linhas, e uma barra simples em CSS já resolve
   sem o peso de outro gráfico. A barra preenchida é um `<svg width="NN%">`
   vazio pelo mesmo motivo da `.barra-linha` acima — o SVG é só a caixa que
   carrega a largura sem `style=`; o desenho é este CSS. */
.linha-distribuicao {
  display: grid; grid-template-columns: 110px 1fr 48px;
  align-items: center; gap: var(--e3);
  padding: var(--e2) 0;
}
.linha-distribuicao + .linha-distribuicao { border-top: 1px solid var(--borda); }
.rotulo-distribuicao { font-size: var(--t-peq); color: var(--tinta-2); }
.barra-distribuicao {
  display: block; height: 14px; border-radius: var(--r-min);
  background: var(--fundo); overflow: hidden;
}
.barra-distribuicao-preenchida {
  display: block; height: 100%;
  background: var(--cor-marca, var(--grafite-3));
}
.valor-distribuicao {
  text-align: right; font-family: var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   O CARTÃO DE APONTAMENTO

   Peça central do portal. A faixa colorida à esquerda diz o estado; a cor
   vem da rampa da marca e de mais lugar nenhum.
   ═══════════════════════════════════════════════════════════════════════ */

.apontamento {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  /* A faixa de estado passou de 4px para 5px e o cartão ganhou canto maior e
     mais ar por dentro. Numa lista de vinte, o que se procura primeiro é a
     cor da faixa: ela precisa ter corpo suficiente para ser vista de relance
     na largura toda da coluna, sem virar um risco. */
  border-left: 5px solid var(--aceito);
  border-radius: var(--r-gr);
  padding: var(--e5) var(--e6);
  margin-bottom: var(--e4);
  transition: border-color var(--transicao), box-shadow var(--transicao),
              transform var(--transicao);
}
/* Levantar 1px no hover é o que diz "isto é uma peça, e ela responde" — o
   cartão inteiro é clicável no cabeçalho. Sombra continua discreta: o manual
   constrói com linha, e a sombra aqui só marca a peça que está sob o cursor. */
.apontamento:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }

.apontamento.st-pendente   { border-left-color: var(--pendente); }
.apontamento.st-respondido { border-left-color: var(--respondido); }
.apontamento.st-reaberto   { border-left-color: var(--reaberto); }
/* Aceito é o único estado que a faixa mostra em VERDE, e não na rampa da
   marca. O grafite dizia "encerrado, recua" e cumpria isso bem demais: na aba
   Resolvidos, onde todo cartão está aceito, a coluna inteira virava uma
   sequência de riscos cinzas indistinguíveis da borda do próprio cartão — e o
   que a tela precisa dizer ali é "isto deu certo", não "isto não importa
   mais". O verde é o mesmo do ✓ de confirmação (--sucesso), e continua sendo
   a única cor de fora da paleta, pelo mesmo motivo de sempre. */
.apontamento.st-aceito     { border-left-color: var(--sucesso); }
/* Atrasado passa por cima do estado: é a informação mais urgente do cartão. */
.apontamento.atrasado      { border-left-color: var(--reaberto); }

/* Rascunho: tracejado. Existe no portal, o proponente ainda não vê. */
.apontamento.rascunho {
  border-style: dashed;
  border-left-style: solid;
  background: var(--superficie-2);
}

.ap-numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-legenda); font-weight: 700;
  color: var(--tinta-fraca);
  letter-spacing: .02em;
}

/* ── O cabeçalho do cartão ────────────────────────────────────────────
   Antes as três informações — data, valor, credor — tinham o mesmo peso e o
   mesmo tamanho, numa fileira. Três coisas com a mesma voz é o mesmo que
   nenhuma em destaque: o olho tinha de ler as três para achar a que
   interessava.

   A DATA teve depois uma etiqueta própria, cinza, separada acima de todo o
   resto do cartão (a peça que ainda existe em
   admin/partes/detalhe_entrada.html). Voltou para dentro do cabeçalho de
   identidade por decisão do Rodrigo (17/09/2026): ela é a data do PAGAMENTO
   — decide o mês em que o apontamento vive, é o que se confere contra o
   extrato e o que se procura no comprovante —, e uma informação dessas não
   podia ficar do tamanho de metadado só porque mora na mesma linha do
   credor. Fica então PRIMEIRA da linha, no mesmo peso visual do credor: a
   ordem de leitura é DATA → CREDOR → documento fiscal → VALOR.

   O documento fiscal é o único que continua discreto: ele localiza um
   comprovante específico depois de já se saber do que se trata — não é o
   que se procura primeiro numa lista. */
.ap-cabecalho {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e1) var(--e4);
  margin: var(--e2) 0 var(--e3);
}

/* O retângulo em volta da linha de identidade, só no financeiro (ver o
   comentário no template). Pedido do Rodrigo (18/09/2026): a etiqueta cinza
   de data já tinha saído do topo do cartão, e a data voltou a crescer
   DENTRO do cabeçalho — mas ainda pouco. Este fundo é o que faz a linha
   parecer um bloco próprio, e não mais uma continuação da tira de selos
   acima: mesmo raciocínio da etiqueta antiga (separar visualmente), só que
   sem tirar a data da ordem de leitura do credor e do valor.

   `--cinza-claro`, e não `--superficie-2`: o degrau de `--superficie-2`
   (FAFAFA) é sutil demais sobre o branco do cartão — quase não se vê, e um
   retângulo que não se vê não é destaque. `--cinza-claro` (F4F4F4) é a
   mesma cor que a etiqueta antiga de data usava, e por isso já sabemos que
   ela se lê bem aqui.

   Sem cor de status: a rampa de estado já está na faixa colorida da borda
   do cartão, e pintar o retângulo também bagunçaria qual das duas diz o quê. */
.ap-cabecalho-pagamento {
  padding: var(--e2) var(--e3);
  border-radius: var(--r-peq);
  background: var(--cinza-claro);
}

/* O grupo ícone + "Pagamento em" + data. Um só bloco flex porque os três
   precisam andar juntos quando a linha quebra em tela estreita — separados,
   o rótulo podia ficar orfão numa linha e a data sozinha na próxima. */
.ap-data-grupo {
  display: inline-flex; align-items: center;
  gap: 4px;
}
.ap-data-grupo .i { color: var(--tinta-fraca); flex-shrink: 0; }
/* Pequeno e sem peso, de propósito (pedido do Rodrigo, 19/09/2026): ele só
   diz DE QUE data se trata — quem carrega a linha é o número ao lado. */
.ap-data-rotulo {
  font-size: 11px; font-weight: 400;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.ap-data-cabecalho {
  font-family: var(--fonte-titulo);
  /* A MAIOR letra da linha — maior que o credor (19px) e que o valor
     (--t-cifra, 20px). É a informação que o Rodrigo pediu para o
     proponente ver primeiro: a data do pagamento decide o mês em que o
     apontamento vive e é o que se confere contra o extrato. */
  font-size: 23px; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Documento fiscal: era 13px, e sobrava espaço ao lado dele na linha (pedido
   do Rodrigo, 19/09/2026). Sobe para o tamanho do corpo do texto — ainda o
   degrau mais discreto da linha (cor fraca, peso normal), só deixa de ser
   pequeno demais para ler de relance. */
.ap-nf-cabecalho {
  font-size: var(--t-corpo);
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.ap-credor {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-size: 19px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.ap-valor {
  margin-left: auto;
  font-family: var(--fonte-titulo);
  font-size: var(--t-cifra); font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
  white-space: nowrap;
}
/* Metadados: ocupam a linha inteira embaixo, separados por um ponto médio
   desenhado no CSS — assim o template não carrega pontuação decorativa. */
.ap-meta {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
}
.ap-meta:empty { display: none; }
.ap-meta > * + *::before {
  content: "·";
  margin-right: var(--e2);
  color: var(--grafite-4);
}
.ap-data, .ap-nf { min-width: 0; }

/* ── A data do pagamento, no alto do cartão ───────────────────────────
   Primeira linha da dobra, acima do número e dos selos, nas duas pontas —
   ISG e proponente. O porquê está em partes/cartao.html; aqui fica o porquê
   do desenho.

   RÓTULO PEQUENO, NÚMERO GRANDE. A data é o que se procura; "PAGAMENTO EM"
   é o que explica de que data se trata, e só precisa ser lido uma vez. Com
   os dois do mesmo tamanho, a etiqueta inteira vira um bloco de texto que
   o olho lê em vez de reconhecer.

   CINZA, E NÃO A RAMPA DE ESTADO. Ela não é situação nem alerta — cor de
   estado aqui brigaria com o selo que está na linha logo abaixo, e a faixa
   colorida da borda do cartão já diz o estado. O que a data precisa é sair
   do tom de metadado (tinta-fraca, o mesmo da nota fiscal), não virar
   semáforo.

   TABULAR, porque é número em coluna: com dez cartões empilhados os dias
   alinham pelo dígito, e é isso que permite varrer a lista de cima a baixo
   procurando uma data. */
.data-topo {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  max-width: 100%;
  margin-bottom: var(--e1);
  padding: 2px var(--e3) 3px var(--e2);
  border-radius: var(--r-peq);
  background: var(--cinza-claro);
}
.data-topo .i { color: var(--tinta-fraca); align-self: center; flex-shrink: 0; }
.data-topo .rotulo {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.data-topo .dia {
  font-family: var(--fonte-titulo);
  font-size: 17px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  white-space: nowrap;
}

.ap-descricao {
  color: var(--tinta-2);
  white-space: pre-wrap;
  margin: var(--e2) 0;
  max-width: 78ch;
}

/* A solicitação é o pedido — o texto que o proponente tem de cumprir.
   Fundo laranja claríssimo e um fio laranja à esquerda: é o único bloco de
   texto do cartão que ganha cor, porque é o único que exige ação. */
.ap-solicitacao {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  color: var(--tinta);
  font-weight: 500;
  background: var(--acao-veu);
  border-left: 3px solid var(--isg-laranja);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e2) var(--e3);
  margin: var(--e3) 0 0;
}
.ap-solicitacao {
  padding: var(--e3) var(--e4);
  font-size: 15px;
  line-height: 1.55;
}
.ap-solicitacao > .i {
  color: var(--tinta-acao);
  margin-top: 4px;          /* desce o ícone até a altura da primeira linha */
}
/* O pre-wrap fica no texto, e não no bloco: no bloco ele preservaria também
   a quebra de linha que o Jinja deixa entre o ícone e o <span>. */
.ap-solicitacao > span { white-space: pre-wrap; min-width: 0; }

.ap-rodape {
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}
.acoes-card { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* Apontamento em análise: trancado para o proponente. Cinza, e não uma cor de
   alerta — é estado de espera, não falha dele. O cadeado carrega o recado
   sozinho para quem só bate o olho. */
.ap-rodape.trancado {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--grafite-4);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e3);
  font-size: var(--t-peq);
  color: var(--tinta-2);
}
.ap-rodape.trancado .cadeado { font-size: 15px; line-height: 1.35; flex-shrink: 0; }
.ap-rodape.trancado strong { color: var(--tinta); }

/* ── Recolher e abrir ────────────────────────────────────────────────── */
.dobra > summary { list-style: none; }
.dobra > summary::-webkit-details-marker { display: none; }

.cabeca-dobra {
  display: flex; align-items: flex-start; gap: var(--e3);
  cursor: pointer;
  border-radius: var(--r-peq);
  margin: calc(var(--e1) * -1) calc(var(--e2) * -1) 0;
  padding: var(--e1) var(--e2);
  transition: background var(--transicao);
}
.cabeca-dobra:hover { background: var(--cinza-claro); }
.dobra > summary:focus-visible { outline: 2px solid var(--anel-foco); outline-offset: 1px; }

.cabeca-dobra .seta {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  color: var(--tinta-fraca);
  font-size: 11px;
  border-radius: var(--r-min);
  transition: transform var(--transicao), color var(--transicao), background var(--transicao);
}
.cabeca-dobra:hover .seta { color: var(--tinta); background: var(--cinza-luz); }
.dobra:not([open]) .cabeca-dobra .seta { transform: rotate(-90deg); }

.resumo-dobra { flex: 1; min-width: 0; }
.resumo-dobra .ap-cabecalho { margin-bottom: 0; }
.dobra:not([open]) .ap-cabecalho { margin-bottom: 2px; }
.corpo-dobra { padding-top: var(--e1); }

.controles-dobra {
  display: flex; gap: var(--e2); align-items: center; justify-content: flex-end;
  margin: 0 0 var(--e2);
}
.controles-dobra .dica { margin: 0; }

/* Miniatura do print no canto do cartão, como no app de desktop. */
.miniatura-card {
  float: right;
  margin: 0 0 var(--e3) var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  background: var(--superficie);
  padding: 3px;
  transition: border-color var(--transicao);
}
.miniatura-card:hover { border-color: var(--isg-laranja); }
.miniatura-card img {
  display: block; width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--r-min);
}

/* Motivo da reabertura: a instrução do que ainda falta. Vermelho, no alto. */
/* O motivo da reabertura é a instrução do que ainda falta — é o texto mais
   importante do cartão para quem vai responder. Ganhou corpo de bloco, não
   de nota de rodapé. */
.motivo-reabertura {
  background: var(--reaberto-veu);
  border: 1px solid rgba(255, 40, 0, .24);
  border-left: 4px solid var(--isg-vermelho);
  border-radius: var(--r-peq);
  padding: var(--e4) var(--e5);
  margin: var(--e4) 0 var(--e2);
}
.motivo-reabertura .texto { font-size: 15px; line-height: 1.55; }
.motivo-reabertura .cabeca {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-legenda); font-weight: 700;
  color: var(--reaberto-tinta);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: var(--e1);
}
.motivo-reabertura .texto { white-space: pre-wrap; color: var(--tinta); }

/* O pedido repetido junto do campo de resposta. */
.relembrar {
  background: var(--cinza-claro);
  border-left: 3px solid var(--isg-laranja);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
  font-size: var(--t-peq);
}
.relembrar .rotulo {
  display: block;
  font-size: var(--t-legenda); text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-fraca);
  margin-bottom: 2px;
}
.relembrar .pedido { color: var(--tinta); font-weight: 600; white-space: pre-wrap; }


/* ═══════════════════════════════════════════════════════════════════════
   CONVERSA
   Quem fala pela ISG e quem fala pelo projeto se distinguem pelo fio
   lateral: grafite de um lado, laranja do outro.
   ═══════════════════════════════════════════════════════════════════════ */

.conversa {
  margin-top: var(--e3);
  border-top: 1px solid var(--borda);
  padding-top: var(--e3);
}
.fala {
  background: var(--cinza-claro);
  border-left: 3px solid var(--grafite-4);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e2);
}
.fala.da-isg { border-left-color: var(--isg-grafite); }
.fala.do-proponente { border-left-color: var(--isg-laranja); }
.fala .autor { font-size: var(--t-peq); font-weight: 700; }
.fala .quando { font-size: var(--t-legenda); color: var(--tinta-fraca); margin-left: var(--e2); }
.fala .texto { white-space: pre-wrap; margin-top: var(--e1); color: var(--tinta-2); line-height: 1.55; }


/* ═══════════════════════════════════════════════════════════════════════
   ANEXOS
   ═══════════════════════════════════════════════════════════════════════ */

.anexos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); align-items: flex-start; }

.anexo {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  padding: 5px var(--e3);
  font-size: var(--t-peq);
  color: var(--tinta);
  transition: border-color var(--transicao), background var(--transicao);
}
.anexo:hover { border-color: var(--isg-laranja); background: var(--acao-veu); text-decoration: none; }
.anexo .peso { color: var(--tinta-fraca); font-size: var(--t-legenda); }

.miniatura {
  max-width: 156px; max-height: 112px;
  border-radius: var(--r-peq);
  border: 1px solid var(--borda-forte);
  display: block;
  background: var(--superficie);
  transition: transform var(--transicao), border-color var(--transicao);
}
a:hover > .miniatura { transform: scale(1.02); border-color: var(--isg-laranja); }

/* O × que tira o anexo da resposta ainda não enviada.

   Fica SOBRE a peça, no canto, e não como um botão ao lado: numa fila de seis
   miniaturas, seis botões "Remover" enfileirados dobram a largura da tira e
   ainda deixam ambíguo qual botão é de qual arquivo. Em cima da imagem, a
   ligação é o próprio lugar.

   Discreto até o cursor chegar — é uma ação destrutiva ao lado de uma
   miniatura que se clica para AMPLIAR, e um × de peso igual convida ao clique
   errado. No toque não há hover, então ele nasce visível o bastante para ser
   alcançado (.5 de opacidade, e o alvo tem 22px). */
.anexo-removivel { position: relative; display: inline-block; }
.tirar-anexo {
  position: absolute; top: 3px; right: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta-fraca);
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--transicao), background var(--transicao),
              border-color var(--transicao), color var(--transicao);
}
.anexo-removivel:hover .tirar-anexo,
.tirar-anexo:focus-visible { opacity: 1; }
.tirar-anexo:hover {
  background: var(--perigo-veu);
  border-color: var(--perigo);
  color: var(--perigo-tinta);
}
.anexo-removivel .form-tirar-anexo { display: contents; }
/* Sobre o cartão de arquivo (que não é imagem) o × encostaria no peso do
   arquivo; o cartão abre espaço à direita para ele. */
.anexo-removivel > .anexo { padding-right: var(--e7); }

/* Arrastar e soltar: a moldura tracejada vira uma linha de quadra laranja
   quando o arquivo está por cima. */
.area-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--r-peq);
  padding: var(--e4);
  text-align: center;
  color: var(--tinta-fraca);
  font-size: var(--t-peq);
  cursor: pointer;
  background: var(--superficie-2);
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.area-solta strong { color: var(--tinta-2); }
.area-solta .icone-solta { color: var(--grafite-4); transition: color var(--transicao); }
.area-solta:hover { border-color: var(--grafite-4); color: var(--tinta-2); }
.area-solta:hover .icone-solta { color: var(--tinta-2); }
.area-solta.por-cima {
  border-color: var(--isg-laranja);
  border-style: solid;
  background: var(--acao-veu);
  color: var(--tinta-acao);
}
.area-solta.por-cima .icone-solta,
.area-solta.por-cima strong { color: var(--tinta-acao); }
/* Na versão compacta (as caixas do movimento mensal) o ícone fica ao
   lado do texto: empilhado, ele dobraria a altura de cada uma das cinco. */
.area-solta.compacta { flex-direction: row; justify-content: center; }
.caixa-anexos.por-cima { border-color: var(--isg-laranja); background: var(--acao-veu); }


/* ═══════════════════════════════════════════════════════════════════════
   TELA DO PROPONENTE
   ═══════════════════════════════════════════════════════════════════════ */

/* A chamada de abertura responde "o que eu tenho que fazer?" antes de tudo.
   Fundo grafite: é a peça mais importante da tela dele, e o grafite é o que
   o manual usa para o bloco que carrega a mensagem principal (p. 25). */
/* A chamada é a peça de abertura do proponente — a única coisa que ele lê
   antes de decidir o que fazer. Estava do tamanho de um aviso; virou o bloco
   que o manual desenha na p. 25: campo grafite ocupando a largura, título
   grande, subtítulo em cinza claro, e o grafismo dos arcos no canto. */
.chamada {
  position: relative;
  overflow: hidden;
  background: var(--isg-grafite);
  color: var(--tinta-clara);
  border-radius: var(--r-gr);
  padding: var(--e8) var(--e7);
  margin-bottom: var(--e6);
  border-top: 4px solid var(--isg-laranja);
}
.chamada.tudo-certo { border-top-color: var(--sucesso); }
.chamada.atencao    { border-top-color: var(--isg-vermelho); }
.chamada h2 {
  margin: 0 0 var(--e3);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: var(--l-apertada);
  color: var(--tinta-clara);
  letter-spacing: -.03em;
  max-width: 22ch;          /* título de hero quebra cedo, não atravessa a tela */
}
.chamada p {
  margin: 0;
  color: var(--tinta-clara-2);
  font-size: 16px;
  max-width: 62ch;
  text-wrap: pretty;
}
.chamada .destaque-atraso { color: var(--vermelho-luz); font-weight: 600; }
.chamada .destaque-novo   { color: var(--isg-amarelo); }

/* ── Os dois passos da rodada ──────────────────────────────────────────
   Numerada de verdade (<ol>), e não dois parágrafos com "1." digitado: o
   número é a informação — são dois atos EM ORDEM —, e um <ol> é o que
   anuncia isso a quem usa leitor de tela, que ouve "lista de 2 itens".

   O `max-width` é o mesmo do parágrafo acima para as duas colunas de texto
   terminarem na mesma régua; sem ele a lista atravessaria a chamada
   inteira e passaria por baixo dos arcos da marca. */
.passos-rodada {
  margin: var(--e4) 0 0;
  padding-left: var(--e5);
  max-width: 62ch;
  color: var(--tinta-clara-2);
  font-size: 16px;
  text-wrap: pretty;
}
.passos-rodada li + li { margin-top: var(--e3); }
.passos-rodada strong  { color: var(--tinta-clara); }
/* O marcador acompanha o destaque, senão o número fica mais apagado que o
   texto que ele numera. */
.passos-rodada::marker,
.passos-rodada li::marker { color: var(--isg-laranja); font-weight: 600; }

/* Arcos da marca no canto direito da chamada — o mesmo grafismo da capa,
   discreto o bastante para não disputar com o texto. */
.chamada::after {
  content: "";
  position: absolute; right: -110px; top: -140px;
  width: 420px; height: 420px;
  pointer-events: none;
  opacity: .62;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Cg stroke-width='1.4'%3E%3Ccircle cx='400' cy='400' r='120' stroke='%23FF2800'/%3E%3Ccircle cx='400' cy='400' r='175' stroke='%23FF6A00'/%3E%3Ccircle cx='400' cy='400' r='230' stroke='%23FF9C00'/%3E%3Ccircle cx='400' cy='400' r='285' stroke='%23FFC400'/%3E%3Ccircle cx='400' cy='400' r='340' stroke='%23FFDE00'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.chamada > * { position: relative; z-index: 1; }

/* Barra de progresso: prestação de contas é longa, ver o avanço acalma.
   O preenchimento usa o degradê do símbolo. */
.progresso {
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
  margin: var(--e6) 0 var(--e2);
  max-width: 620px;
}
/* `display: block` porque o `.feito` do painel agora é um `<svg width="NN%">`
   (a largura sem `style=`, para a CSP), e SVG nasce inline: sentado na linha
   de base, ele descia alguns pixels dentro da pista de 10px. Num `<div>` a
   regra não muda nada. */
.progresso .feito {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--isg-vermelho), var(--isg-laranja) 55%, var(--isg-amarelo));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.progresso-rotulo {
  display: flex; justify-content: space-between;
  max-width: 620px;
  font-size: var(--t-peq); color: var(--tinta-clara-2);
}
.progresso-rotulo strong {
  color: var(--tinta-clara);
  font-family: var(--fonte-titulo); font-size: 15px;
}

/* Seções por situação */
.secao { margin-bottom: var(--e5); }
.secao > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) 0;
  border-bottom: 2px solid var(--borda-forte);
}
.secao > summary::-webkit-details-marker { display: none; }
/* A seta era um "▸" tipográfico, que muda de desenho e de peso conforme a
   fonte disponível. Virou a mesma chevron dos ícones, aplicada como máscara
   para herdar a cor por currentColor — ver --chevron, mais abaixo.
   Seta é componente de interface: mínimo de 3:1 (WCAG 1.4.11), não os
   4,5:1 de texto. #7E7E7E sobre branco dá 4,06:1. */
.secao > summary::before {
  content: "";
  width: 14px; height: 14px; flex-shrink: 0;
  align-self: center;
  background-color: var(--grafite-3);
  -webkit-mask: var(--chevron) no-repeat center / 14px;
          mask: var(--chevron) no-repeat center / 14px;
  transform: rotate(-90deg);
  transition: transform var(--transicao);
}
.secao[open] > summary::before { transform: rotate(0deg); }
.secao > summary:hover .rotulo-secao { color: var(--tinta-acao); }
.secao .rotulo-secao {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -.02em;
  transition: color var(--transicao);
}
.secao .explicacao { font-size: var(--t-legenda); color: var(--tinta-fraca); flex: 1; }
.secao .corpo-secao { padding-top: var(--e4); }
/* A seção que exige ação é a única marcada em laranja. */
.secao.agir > summary { border-bottom-color: var(--isg-laranja); }
.secao.agir .quantos { background: var(--pendente-veu); color: var(--pendente-tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   BARRA DE ENVIO EM LOTE
   Impossível de não ver enquanto houver rascunho — dos dois lados.
   ═══════════════════════════════════════════════════════════════════════ */

.barra-envio {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 5px solid var(--isg-laranja);
  border-radius: var(--r-gr);
  padding: var(--e5) var(--e6);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra-1);
}
.barra-envio.destaque { border-left-color: var(--sucesso); }
.barra-envio .miolo-envio { flex: 1; min-width: 230px; }
.barra-envio strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em;
}
.barra-envio .dica { margin: 2px 0 0; }
.barra-envio .botao { white-space: nowrap; }


/* (As regras de `.abas-entrada` e `.aba-contador` que moravam aqui saíram em
   22/09/2026 junto com as abas falsas — ver o comentário no topo de
   admin/entrada.html.) */

/* ═══════════════════════════════════════════════════════════════════════
   CAIXA DE ENTRADA DA ISG — lista densa + painel de detalhe
   ═══════════════════════════════════════════════════════════════════════ */

.cabeca-entrada {
  display: flex; gap: var(--e4); align-items: flex-start; flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.cabeca-entrada h1 { margin: 0; }
.resumo-entrada { margin: var(--e1) 0 0; color: var(--tinta-fraca); font-size: var(--t-peq); }
.resumo-entrada strong {
  font-family: var(--fonte-titulo);
  color: var(--tinta); font-size: var(--t-h3); font-weight: 700;
}
.resumo-entrada .espera { margin-left: var(--e2); }

.ferramentas {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  margin-left: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: var(--e2);
}
.ferramentas input[type=search], .ferramentas select {
  width: auto; min-height: 34px; padding: 6px var(--e3);
  font-size: var(--t-peq);
  background-color: var(--superficie-2);
  border-color: transparent;
}
.ferramentas select { padding-right: var(--e6); }
.ferramentas input[type=search] { min-width: 190px; }
.ferramentas input[type=search]:hover, .ferramentas select:hover { border-color: var(--borda-forte); }

/* ── "Filtros" que se abre (22/09/2026) ────────────────────────────────
   O porquê está em admin/entrada.html. Aqui: o <summary> se parece com os
   botões fantasma ao lado (é a mesma classe), sem o triângulo nativo, e o
   corpo aberto continua na mesma faixa no desktop e quebra embaixo no
   celular. Aberto, o <details> ganha a linha inteira da barra (a busca fica
   na de cima) e o <summary> vira o rótulo da fileira de filtros.

   `display: flex` no próprio <details> é o que põe o rótulo e os filtros
   lado a lado (conferido no Chrome 152). Navegador que ainda não aceita
   <details> como contêiner flex desenha o corpo na linha de baixo do
   rótulo — fica uma fileira a mais e nada quebra, então a regra entra
   sem plano B. */
.mais-filtros[open] {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
/* No desktop a barra mora à direita do título, estreita; com os filtros
   abertos ela quebrava em três alturas (medido: 170px). Aberta, ela ganha a
   largura da tela e os cinco filtros cabem numa fileira só. */
.cabeca-entrada .ferramentas:has(.mais-filtros[open]) { flex-basis: 100%; margin-left: 0; }
.mais-filtros > summary {
  display: inline-flex; vertical-align: middle;
  list-style: none; cursor: pointer; user-select: none;
}
.mais-filtros > summary::-webkit-details-marker { display: none; }
.mais-filtros[open] > summary {
  background: var(--cinza-claro); border-color: var(--grafite-4);
}
.conta-filtros {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--e1);
  border-radius: var(--r-pill);
  background: var(--isg-grafite); color: var(--tinta-clara);
  font-size: var(--t-legenda); font-weight: 700;
}
:root[data-theme="dark"] .conta-filtros { background: var(--grafite-2); }
.corpo-filtros {
  display: inline-flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
  vertical-align: middle;
}
.corpo-filtros select {
  width: auto; min-height: 34px; padding: 6px var(--e6) 6px var(--e3);
  font-size: var(--t-peq);
  background-color: var(--superficie-2); border-color: transparent;
}

/* "Voltar à fila" só existe quando a fila não está ao lado — ver a regra
   no @media de 1000px, mais abaixo. */
.voltar-fila { display: none; }

/* ── Faixa de projetos ──────────────────────────────────────────────── */
.faixa-projetos {
  display: flex; gap: var(--e2); align-items: stretch;
  margin: 0 0 var(--e4);
  padding-bottom: var(--e1);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
  scroll-snap-type: x proximate;
}
.faixa-projetos::-webkit-scrollbar { height: 7px; }
.faixa-projetos::-webkit-scrollbar-track { background: transparent; }
.faixa-projetos::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: var(--r-pill); }

.cartao-projeto {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "pulso nome conta" "pulso idade idade";
  align-items: center;
  gap: 1px var(--e2);
  min-width: 138px;
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-peq);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao), transform .08s ease;
}
.cartao-projeto:hover { text-decoration: none; border-color: var(--grafite-4); background: var(--superficie-2); }
.cartao-projeto:active { transform: translateY(1px); }

.cartao-projeto .nome {
  grid-area: nome;
  font-family: var(--fonte-titulo);
  font-size: var(--t-peq); font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
}
.cartao-projeto .conta {
  grid-area: conta;
  min-width: 22px; text-align: center;
  font-size: var(--t-legenda); font-weight: 700;
  padding: 1px var(--e2); border-radius: var(--r-pill);
  background: var(--cinza-claro); color: var(--tinta-fraca);
}
.cartao-projeto .idade { grid-area: idade; font-size: var(--t-legenda); color: var(--tinta-fraca); white-space: nowrap; }

.cartao-projeto .pulso {
  grid-area: pulso;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sucesso);
  align-self: center;
}
.cartao-projeto .pulso.parada { background: var(--isg-laranja); }
.cartao-projeto .pulso.muito-parada { background: var(--isg-vermelho); }

/* ── Botão de baixar enquanto o servidor monta o arquivo ──────────────
   Gerar o Word de uma etapa cheia leva dezenas de segundos. O botão fica
   apagado e com o relógio girando: apagado porque não aceita mais clique
   (um segundo clique é a MESMA espera duas vezes), e girando porque uma
   tela parada é indistinguível de uma tela travada.

   `pointer-events` não entra aqui de propósito: o JS é quem recusa o
   clique, e desligá-lo no CSS esconderia o cursor de "não pode". */
.baixando {
  opacity: .6;
  cursor: progress;
}
.baixando svg {
  animation: girando 1.1s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes girando { to { transform: rotate(360deg); } }

/* Quem prefere menos movimento não recebe o giro — o texto "Gerando…" já
   diz o que está acontecendo. */
@media (prefers-reduced-motion: reduce) {
  .baixando svg { animation: none; }
}

/* Só o projeto mais parado pulsa: se todos piscassem, nenhum chamaria. */
.cartao-projeto.muito-parada .pulso {
  box-shadow: 0 0 0 0 rgba(255, 40, 0, .55);
  animation: pulsar 2.2s ease-out infinite;
}
@keyframes pulsar {
  70%  { box-shadow: 0 0 0 7px rgba(255, 40, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 40, 0, 0); }
}

.cartao-projeto.todos {
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome conta";
  min-width: 0;
}
.cartao-projeto.todos .nome { color: var(--tinta-fraca); }

.cartao-projeto.ativo {
  background: var(--isg-grafite);
  border-color: var(--isg-grafite);
  color: var(--tinta-clara);
}
.cartao-projeto.ativo .nome { color: var(--tinta-clara); }
.cartao-projeto.ativo .idade { color: var(--tinta-clara-2); }
.cartao-projeto.ativo .conta { background: var(--isg-laranja); color: var(--tinta-sobre-acao); }
.cartao-projeto.ativo:hover { background: var(--grafite-2); border-color: var(--grafite-2); }

/* ── Duas colunas ───────────────────────────────────────────────────── */
.entrada {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--e4);
  align-items: start;
}

.fila {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  overflow: hidden;
  position: sticky; top: calc(var(--topo-altura) + var(--e2));
  max-height: calc(100vh - var(--topo-altura) - var(--e6));
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}
.fila::-webkit-scrollbar { width: 9px; }
.fila::-webkit-scrollbar-track { background: transparent; }
.fila::-webkit-scrollbar-thumb {
  background: var(--borda-forte); border-radius: var(--r-pill);
  border: 2px solid var(--superficie);
}

.grupo-fila { border-bottom: 1px solid var(--borda); }
.grupo-fila:last-of-type { border-bottom: none; }

.cabeca-grupo {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--cinza-claro);
  border-bottom: 1px solid var(--borda);
}
/* Grudar no topo só faz sentido dentro da coluna com rolagem própria da
   Caixa de entrada (.fila) — fora dali, "top: 0" prenderia atrás do
   cabeçalho fixo do site em vez de embaixo dele. */
.fila .cabeca-grupo { position: sticky; top: 0; z-index: 2; }
.cabeca-grupo .marca-grupo {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0; cursor: pointer; font-weight: 400; flex: 1; min-width: 0;
}
.cabeca-grupo .nome-projeto {
  font-size: var(--t-legenda); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cabeca-grupo .quantos { background: var(--isg-grafite); color: var(--tinta-clara); }
.cabeca-grupo .valor-grupo { font-size: var(--t-legenda); color: var(--tinta-fraca); }

/* Uma linha da fila: alta o bastante para duas informações, baixa o
   bastante para caber oito na tela. */
.item-fila {
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e3);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.item-fila + .item-fila { border-top: 1px solid var(--borda); }
.item-fila:hover { background: var(--superficie-2); }
.item-fila.aberto {
  background: var(--acao-veu);
  border-left-color: var(--isg-laranja);
}
.item-fila.aberto + .item-fila { border-top-color: transparent; }
.item-fila:has(input[data-marca]:checked) { background: var(--sucesso-veu); }
.item-fila > input[type=checkbox] { flex-shrink: 0; }

.alvo-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--e2);
  padding: var(--e2) 0;
  color: inherit; text-decoration: none;
}
.alvo-item:hover { text-decoration: none; }

/* ── Novo card redesenhado da entrada ───────────────────────────────── */
.card-entrada-cabeca {
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  justify-content: space-between;
}
.credor-grande {
  flex: 1;
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-corpo);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-entrada-lado {
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  flex-shrink: 0;
  white-space: nowrap;
}
.valor-fila {
  font-family: var(--fonte-titulo);
  font-size: var(--t-corpo);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.data-fila {
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-peq);
}

/* Informação sobre a resposta recebida do proponente */
.card-entrada-resposta {
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  margin-top: -2px;
}
.data-resposta {
  font-weight: 700;
  color: var(--tinta-2);
}

/* Preview truncado da resposta */
.card-entrada-preview {
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* (`.progresso-card` e `.passo-*` saíram em 22/09/2026 com os três
   pontinhos de cor fixa — ver o comentário no lugar deles, em
   admin/entrada.html.) */

/* Rodapé com urgência, tipo, anexos e espera */
.card-entrada-rodape {
  display: flex;
  gap: var(--e2);
  align-items: center;
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  min-width: 0;
}
/* O tipo encolhe com reticências, e é o ÚNICO que encolhe: o selo de
   urgência e a espera são os sinais de triagem da linha, e cortá-los para
   caber o tipo inteiro inverteria a prioridade. O nome completo fica no
   `title`. */
.card-entrada-rodape .tipo-fila {
  color: var(--tinta-fraca);
  /* `max-width: none` desfaz o `.tipo-fila { max-width: 34% }` da lista
     antiga, que cortava "Necessidade de carimbo" em "Necessidade de…" com
     metade da linha sobrando. Aqui quem limita é o espaço de verdade. */
  min-width: 0; flex: 0 1 auto; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-entrada-rodape .selo-urgencia { flex-shrink: 0; }
.card-entrada-rodape .clipe {
  font-size: 10px;
}
.card-entrada-rodape .espera {
  margin-left: auto;
  font-weight: 700;
}
/* 22/09/2026: aqui estavam `--isg-amarelo` e `--isg-vermelho` crus como
   COR DE LETRA, por cima do véu laranja que `.espera.parada` já traz. O
   amarelo puro sobre o véu claro dava 1,1:1 — o "há 3 dias" de cada item
   da Caixa de entrada, a tela que a equipe mais usa, simplesmente não se
   lia. É a regra do MARCA.md ("texto colorido? nunca a cor pura") que
   estas duas linhas quebravam. Sem elas, vale o par `-tinta` da regra
   geral de `.espera.parada` / `.muito-parada`, que já troca de ponta no
   modo escuro. */

/* ── Responsividade do novo card em mobile ────────────────────────── */
@media (max-width: 540px) {
  .card-entrada-cabeca {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
  }
  .card-entrada-lado {
    width: 100%;
    justify-content: flex-start;
  }
  .card-entrada-preview {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}

/* Fila de dúvidas: pessoa → projeto → pergunta. A pendente nasce aberta
   (é o trabalho) e a decidida nasce recolhida (é consulta). */
.duvida-item { border-top: 1px solid var(--borda); }
.duvida-item summary {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3); cursor: pointer; list-style: none;
}
.duvida-item summary::-webkit-details-marker,
.duvida-item summary::marker { display: none; content: ""; }
.duvida-item[open] summary { border-bottom: 1px solid var(--borda); }
.duvida-item:hover summary { background: var(--superficie-2); }
.duvida-numero { font-weight: 700; color: var(--tinta-fraca); flex-shrink: 0; }
.duvida-resumo-pergunta {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.duvida-resumo-meta {
  display: flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  font-size: var(--t-legenda); color: var(--tinta-fraca);
}
.duvida-corpo { padding: 0 var(--e3) var(--e3); }

/* ── A linha do resumo no celular ──────────────────────────────────────
   Achado medindo, não olhando: abaixo de 390 px esta era a ÚNICA tela do
   portal com rolagem horizontal. Em 320 px ela vazava 68 px; em 280, 108.

   A causa é o `flex-shrink: 0` do bloco de meta aqui em cima. Ele está certo
   no desktop — sem ele, data e selos seriam espremidos até virar reticências,
   e um selo cortado não informa nada. Mas "não encolha" numa linha que não
   cabe não some: EMPURRA. E empurrar dentro de um flex é o que produz
   rolagem lateral na página inteira.

   No celular a linha vira duas: a pergunta em cima, com o ponto de status, e
   a meta inteira embaixo, podendo quebrar entre os selos. Nada encolhe e nada
   vaza — só deixou de ser uma linha só, que é o que 320 px comportam.

   A pergunta também passa a quebrar, em até duas alturas. Numa linha só com
   reticências, a 320 px, ela mostrava umas cinco palavras — e o resumo existe
   justamente para dar para ler sem abrir. */
@media (max-width: 480px) {
  .duvida-item summary { flex-wrap: wrap; row-gap: var(--e2); }
  .duvida-resumo-pergunta {
    white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* `flex: 1 0 100%` é o que joga a meta para a linha de baixo: base de 100%
     não cabe ao lado de nada. */
  .duvida-resumo-meta { flex: 1 0 100%; flex-wrap: wrap; row-gap: var(--e1); }
}

.barra-selecao {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  padding: var(--e3);
  background: var(--isg-grafite);
  position: sticky; bottom: 0;
  animation: subir .16s ease-out;
  box-shadow: 0 -8px 20px rgba(40, 40, 40, .18);
}
.barra-selecao[hidden] { display: none; }
.barra-selecao .contador {
  font-size: var(--t-peq); font-weight: 700; white-space: nowrap;
  color: var(--tinta-clara);
}
.barra-selecao input[type=text] {
  flex: 1; min-width: 110px; min-height: 30px;
  padding: 5px var(--e3); font-size: var(--t-peq);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: var(--tinta-clara);
}
.barra-selecao input[type=text]::placeholder { color: rgba(255, 255, 255, .5); }
.barra-selecao input[type=text]:focus { background: rgba(255, 255, 255, .16); }
.barra-selecao .botao.fantasma {
  background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--tinta-clara);
}
.barra-selecao .botao.fantasma:hover { background: rgba(255, 255, 255, .12); }
@keyframes subir {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Painel de detalhe ──────────────────────────────────────────────── */
.painel-detalhe { min-width: 0; }
[data-painel-detalhe] { transition: opacity .18s ease; }
[data-painel-detalhe][aria-busy="true"] { opacity: .45; transition: opacity .1s; }

.detalhe {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  overflow: hidden;
}
.detalhe-cabeca {
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}
.detalhe-cabeca .trilha {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.detalhe-cabeca .pedaco {
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-radius: var(--r-min);
  padding: 1px var(--e2);
}
.detalhe-cabeca .pedaco.projeto {
  color: var(--tinta); font-weight: 700;
  background: var(--superficie); border-color: var(--borda-forte);
}
.detalhe-cabeca .pedaco.projeto:hover {
  text-decoration: none; border-color: var(--isg-laranja); color: var(--tinta-acao);
}
.detalhe-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 26px; font-weight: 700; line-height: var(--l-apertada);
  letter-spacing: -.03em;
}
.detalhe-meta {
  display: flex; gap: var(--e4); flex-wrap: wrap; align-items: baseline;
  margin-top: var(--e1); font-size: var(--t-peq); color: var(--tinta-fraca);
}
.detalhe-meta .valor-forte {
  font-family: var(--fonte-titulo);
  color: var(--tinta); font-weight: 700; font-size: var(--t-cifra);
  letter-spacing: -.02em;
}
/* "Documento fiscal" antes do número: o rótulo recua, o número é o dado. */
.detalhe-meta .rotulo-meta {
  font-size: var(--t-legenda); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  margin-right: var(--e1);
}

.detalhe-corpo { padding: var(--e1) var(--e5) var(--e3); }
.detalhe-secao { margin-bottom: var(--e1); }
.detalhe-secao > summary { list-style: none; cursor: pointer; }
.detalhe-secao > summary::-webkit-details-marker { display: none; }
.detalhe-secao > summary .rotulo-bloco::after {
  content: "";
  width: 13px; height: 13px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--chevron) no-repeat center / 13px;
          mask: var(--chevron) no-repeat center / 13px;
  transform: rotate(-90deg);
  transition: transform var(--transicao);
}
.detalhe-secao[open] > summary .rotulo-bloco::after { transform: rotate(0deg); }
.rotulo-bloco { display: flex; align-items: center; gap: var(--e3); }

/* A resposta é o que há de novo na tela — é ela que precisa saltar. */
.resposta-recebida {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--isg-laranja);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: 2px var(--e4) var(--e4);
  margin: var(--e4) 0 var(--e1);
}
.resposta-recebida .quem {
  display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.resposta-recebida .autor { font-size: var(--t-corpo); font-weight: 700; }
.resposta-recebida .quando { font-size: var(--t-peq); color: var(--tinta-fraca); }
.resposta-recebida .texto-resposta { white-space: pre-wrap; color: var(--tinta-2); }
.resposta-recebida .sem-anexo {
  margin: var(--e3) 0 0;
  font-size: var(--t-peq); font-weight: 600;
  color: var(--atencao-tinta);
}

/* A decisão: bloco grafite no pé do painel. Separa visualmente "ler" de
   "decidir", e é a única parte escura da coluna. */
.detalhe-acoes {
  padding: var(--e4) var(--e5) var(--e5);
  border-top: 1px solid var(--borda);
  background: var(--isg-grafite);
}
.detalhe-acoes .rotulo-bloco { color: var(--tinta-clara-2); margin-top: 0; }
.detalhe-acoes label { color: var(--tinta-clara-2); }
.detalhe-acoes textarea {
  min-height: 68px;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  color: var(--tinta-clara);
}
.detalhe-acoes textarea::placeholder { color: rgba(255, 255, 255, .45); }
.detalhe-acoes textarea:focus { background: rgba(255, 255, 255, .12); }
.detalhe-acoes .botao.fantasma {
  background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--tinta-clara);
}
.detalhe-acoes .botao.fantasma:hover { background: rgba(255, 255, 255, .12); }
.botoes-decisao { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.botoes-decisao kbd { margin-left: var(--e1); }


/* ═══════════════════════════════════════════════════════════════════════
   ÁREA DE TRABALHO DA ISG — meses + painel do mês
   ═══════════════════════════════════════════════════════════════════════ */

.area-trabalho {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: var(--e5);
  align-items: start;
}

.barra-meses {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: var(--e2);
  position: sticky; top: calc(var(--topo-altura) + var(--e2));
}

.seletor-ano {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e1) var(--e2) var(--e3);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--e2);
}
.seletor-ano .ano {
  font-family: var(--fonte-titulo);
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
.seletor-ano a {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--tinta-fraca);
  border-radius: var(--r-min);
  font-size: 12px; line-height: 1;
}
.seletor-ano a:hover { background: var(--cinza-claro); color: var(--tinta); text-decoration: none; }

.mes-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 7px var(--e3);
  margin-bottom: 1px;
  border-radius: var(--r-peq);
  font-size: var(--t-peq);
  color: var(--tinta-2);
  transition: background var(--transicao), color var(--transicao);
}
.mes-item:hover { background: var(--cinza-claro); color: var(--tinta); text-decoration: none; }
.mes-item.ativo {
  background: var(--isg-grafite);
  color: var(--tinta-clara);
  font-weight: 600;
}
.mes-item.ativo .badge-mes { color: var(--isg-amarelo); }
.mes-item.vazio { color: var(--tinta-fraca); font-weight: 400; }

/* Colisão de nomes com a `.vazio` global — a dos painéis de estado vazio,
   que é `flex-direction: column; align-items: center; text-align: center`.
   Ela vem depois no arquivo e vence, virando o item de lado.

   Ficou escondido enquanto mês vazio não desenhava badge: com um filho só,
   coluna e linha dão o mesmo resultado. A barra de conversas de /admin/duvidas
   põe um ✔ no item sem pendência, e aí o nome e o ✔ empilharam. */
.mes-item.vazio {
  flex-direction: row;
  align-items: center;
  text-align: left;
}

/* Mês vazio E selecionado ao mesmo tempo: aqui a rampa do cinza INVERTE.
   Sobre branco, o discreto é o tom escuro (#656565); sobre o grafite do item
   selecionado, aquele mesmo tom dá 2,5:1 e o nome do mês some. O discreto
   sobre escuro é o tom CLARO — #C9C9C9 dá 9,7:1 e continua recuado diante do
   branco puro do item selecionado com conteúdo.

   É a mesma armadilha descrita em MARCA.md para a assinatura da tela de
   login; ela escapou aqui porque exige as duas classes juntas, e a revisão
   original nunca caiu num mês vazio que estivesse aberto. */
.mes-item.ativo.vazio { color: var(--tinta-clara-2); }

.badge-mes {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--t-legenda); font-weight: 700; white-space: nowrap;
}
.badge-mes.pendentes { color: var(--pendente-tinta); }
.badge-mes.limpo { color: var(--sucesso); }

.barra-meses .divisor { border-top: 1px solid var(--borda); margin: var(--e2) var(--e1); }

/* Cabeçalho do mês */
.barra-mes {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e4);
}
.barra-mes .titulo {
  flex: 1; min-width: 190px;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -.025em;
}
/* O "·" que separa PROJETO · MÊS · ANO é texto, e texto responde por 4,5:1.
   O #7E7E7E dava 4,06:1 — passa como elemento gráfico, reprova como texto.
   #656565 é o degrau seguinte da mesma rampa (5,8:1) e continua mais quieto
   que o título ao lado, que é todo o trabalho que este ponto tem a fazer. */
.barra-mes .titulo .sep { color: var(--tinta-fraca); font-weight: 400; margin: 0 var(--e2); }

.resumo-linha {
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-fraca);
  white-space: nowrap; align-self: center;
}
.resumo-linha .pendente { color: var(--pendente-tinta); }
.resumo-linha .analisar { color: var(--respondido-tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.fundo-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(40, 40, 40, .55);
  display: none;
  overflow-y: auto;
  padding: var(--e7) var(--e4);
}
.fundo-modal.aberto { display: block; }

.modal {
  background: var(--superficie);
  border-radius: var(--r-gr);
  max-width: 700px; margin: 0 auto;
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
/* O fio tricolor no alto do modal: a mesma assinatura do cabeçalho. */
.modal .faixa {
  height: 4px;
  background: linear-gradient(90deg,
              var(--isg-vermelho), var(--isg-laranja) 46%, var(--isg-amarelo));
}
.modal .cabeca {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5) var(--e3);
  border-bottom: 1px solid var(--borda);
}
.modal .cabeca h2 {
  margin: 0; flex: 1;
  font-size: var(--t-h3); font-weight: 700;
}
.modal .cabeca .contexto { color: var(--tinta-fraca); font-weight: 400; font-size: var(--t-peq); }
.modal .corpo { padding: var(--e1) var(--e5) var(--e4); max-height: 64vh; overflow-y: auto; }
.modal .rodape {
  display: flex; gap: var(--e2); justify-content: flex-end;
  padding: var(--e3) var(--e5) var(--e4);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}
.fechar-modal {
  background: transparent; border: none; cursor: pointer;
  color: var(--tinta-fraca); font-size: 22px; line-height: 1;
  padding: 0 var(--e1);
  border-radius: var(--r-min);
}
.fechar-modal:hover { color: var(--tinta); }

.caixa-anexos {
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  padding: var(--e3);
  margin-bottom: var(--e3);
  transition: border-color var(--transicao), background var(--transicao);
}
.caixa-anexos.colando { border-color: var(--isg-laranja); }
.caixa-anexos .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-bottom: var(--e2); }

.linha-anexo {
  display: flex; align-items: center; gap: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-peq);
  padding: var(--e2);
  margin-bottom: var(--e1);
}
.linha-anexo img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--r-min);
  background: var(--cinza-claro);
  flex-shrink: 0;
}
.linha-anexo .icone {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: var(--cinza-claro);
  border-radius: var(--r-min);
}
.linha-anexo .info { flex: 1; min-width: 0; }
.linha-anexo .nome {
  font-size: var(--t-peq); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linha-anexo .quando { font-size: 10px; color: var(--tinta-fraca); }
.linha-anexo.saindo { opacity: .4; }
.linha-anexo.saindo .nome { text-decoration: line-through; }

.aviso-colar { font-size: var(--t-legenda); color: var(--tinta-fraca); margin: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   TEXTO DO E-MAIL — como vai sair
   ═══════════════════════════════════════════════════════════════════════ */

.corpo-email {
  background: var(--isg-grafite);
  color: var(--tinta-clara-2);
  border-radius: var(--r-peq);
  padding: var(--e4);
  margin: var(--e3) 0 0;
  font-family: var(--fonte-mono);
  font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap;
  overflow-x: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   PORTA DE ENTRADA — entrar · cadastrar · código · recuperar · redefinir

   A composição é a "anatomia da identidade" do manual (p. 25): campo com o
   grafismo de um lado, campo liso do outro, logotipo negativo no alto,
   título em Outfit, legenda em Instrument Sans, e um fio da rampa marcando a
   junção. Ver partes/porta.html para o porquê de cada peça.
   ═══════════════════════════════════════════════════════════════════════ */

/* O `.conteudo` do base.html é uma coluna de 460px com respiro em volta.
   Aqui ele atrapalha: a porta é a única tela do portal que sangra de borda a
   borda, porque é o campo de cor que faz a composição. */
body.porta { background: var(--superficie); }
body.porta .conteudo { max-width: none; margin: 0; padding: 0; }

.porta-moldura {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
  min-height: 100dvh;   /* no celular, a barra do navegador não corta a tela */
}

/* ── O campo da marca ──────────────────────────────────────────────── */
.porta-marca {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--isg-grafite);
  color: var(--tinta-clara);
  padding: clamp(32px, 5vh, 56px) clamp(32px, 6vw, 88px);
}
/* O logo no alto, a assinatura no pé, e a frase da marca no terço de baixo —
   que é onde o olho pousa depois de ler o logo, e onde o manual a põe. */
.porta-discurso { margin-top: auto; padding-bottom: var(--e8); }
.porta-marca > * { position: relative; z-index: 1; }

/* `align-self` é obrigatório aqui: `.porta-marca` é um flex em coluna, e o
   padrão `stretch` esticava a imagem até a largura da coluna inteira — com
   a altura fixa em 44px, o logo saía achatado de ponta a ponta. */
.porta-logo { height: 44px; width: auto; align-self: flex-start; display: block; }

.porta-lema {
  font-family: var(--fonte-titulo);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: var(--l-apertada);
  color: var(--tinta-clara);
  margin: 0 0 var(--e4);
  max-width: 15ch;      /* título de hero quebra cedo, não atravessa a coluna */
  text-wrap: balance;
}
.porta-explica {
  margin: 0;
  color: var(--tinta-clara-2);
  font-size: 16px;
  line-height: var(--l-corpo);
  max-width: 42ch;
  text-wrap: pretty;
}

/* Sobre grafite o discreto é o tom CLARO: #7E7E7E dava 3,63:1 — medido;
   #A9A9A9 dá 6,3:1 e continua recuado. */
.porta-assinatura {
  margin: 0;
  font-size: var(--t-legenda);
  color: var(--grafite-4);
  letter-spacing: .04em;
}

/* ── O fio da junção ───────────────────────────────────────────────────
   O manual desenha um fio fino da rampa exatamente na costura dos dois
   campos (p. 25). Aqui ele faz o mesmo trabalho que faz lá: diz que são dois
   campos de uma composição só, e não duas telas coladas. */
.porta-marca::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 3px; z-index: 2;
  background: linear-gradient(180deg,
              var(--isg-amarelo) 0%, var(--isg-laranja) 54%, var(--isg-vermelho) 100%);
}

/* ── Os traçados esportivos ────────────────────────────────────────────
   O elemento gráfico do manual (p. 21): "as linhas que demarcam quadras,
   pistas, piscinas", que tornam a comunicação "reconhecível mesmo antes do
   logo ser visto". Aqui é a CURVA DA PISTA — as raias descem retas e dobram
   para a esquerda, cada uma no seu raio. É o desenho da capa do manual.

   ── O que estava errado ───────────────────────────────────────────
   O arco vinha com sweep-flag 0, e isso não é detalhe de notação: com 0 o
   centro do arco cai em (r, 400) em vez de (0, 400−r). A tangente no começo
   passa a ser HORIZONTAL enquanto a reta que chega ali é vertical — um canto
   de 90° no lugar da curva — e a raia sai dobrando para o lado errado,
   cruzando as vizinhas. Era o que a tela mostrava: umas retas e umas curvas
   subindo, sem relação nenhuma entre si.

   Com sweep-flag 1 o centro é (0, 400−r): tangente vertical no começo
   (emenda lisa com a reta) e horizontal no fim (sai reta pela lateral). É a
   mesma conta em toda raia, e é o que faz as sete serem concêntricas.

   A reta segue até 400 depois da curva porque na capa ela segue: a raia não
   acaba na dobra. É a continuação que faz o desenho ler como pista, e não
   como um feixe de ganchos.

   O degradê é um só, na diagonal e em coordenadas de usuário, para a rampa
   atravessar o conjunto — amarelo no alto à direita, vermelho no pé à
   esquerda — em vez de se repetir igual dentro de cada raia. */
/* ── Onde ele mora agora ──────────────────────────────────────────
   A geometria explicada acima não mudou uma vírgula; o que mudou foi a
   HOSPEDAGEM. Era um `background-image` com o SVG numa data URI, e agora
   é um <svg> no documento (ver partes/porta.html).

   O motivo é único: imagem de fundo não anima. A marcação da quadra — as
   raias se desenhando uma atrás da outra — precisa de `stroke-dashoffset`,
   e isso só existe para quem está no DOM. A animação em si está lá embaixo,
   na seção MOVIMENTO.

   `z-index: 0` é obrigatório: `.porta-marca > *` levanta todo filho direto
   para a camada 1, e sem isto o desenho subiria junto e passaria por cima
   do logo em vez de ficar atrás. Como ::before, ele nascia embaixo de graça. */
.porta-raias {
  position: absolute;
  z-index: 0;
  /* ── ONDE ELE FICA, E POR QUÊ ──────────────────────────────────────
     No terço de CIMA, e não atrás do texto.

     Ele morava embaixo, no mesmo lugar da frase e da legenda, e a legenda
     em cinza-claro passava por cima de sete linhas — dava para ler, mas
     custava. Baixar a opacidade só troca um problema por outro: apaga o
     elemento gráfico para salvar o texto, e o manual pede o contrário
     (p. 21: "reconhecível mesmo antes do logo ser visto").

     Os dois têm campo próprio agora. O desenho entra cortado pelo alto,
     dobra, e sai pela lateral esquerda antes de o texto começar — que é o
     que uma raia faz. O logo fica por cima das retas quietas do topo: é
     uma marca branca e cheia, e é como a capa do manual compõe.

     Sem mask e sem véu: o desenho termina porque ACABA — toda raia dobra
     e sai —, e não porque foi apagado.

     ── A PROPORÇÃO ────────────────────────────────────────────────
     Travada pelo aspect-ratio: `background-size: 100% 100%` estica o SVG
     nos dois eixos, e qualquer caixa fora de 400×720 deformaria a curva.
     Deformar o elemento gráfico é o mesmo pecado de deformar o logo. */
  /* Encostado na borda esquerda e ocupando toda a folga até o texto: a
     -17vw sobravam duas raias num canto, e duas raias soltas não são a
     curva da pista — são um risco. */
  left: clamp(-90px, -7vw, -40px);
  top: -110px;
  height: 76%;
  width: auto;                /* quem manda na largura é o aspect-ratio */
  aspect-ratio: 400 / 720;
  pointer-events: none;
  opacity: .8;
}

/* ── O campo do formulário ─────────────────────────────────────────── */
.porta-forma {
  display: flex; align-items: center; justify-content: center;
  padding: var(--e9) clamp(24px, 5vw, 72px);
}
.porta-miolo { width: 100%; max-width: 384px; }

/* Alinhado à esquerda, e não centralizado: é assim que o manual compõe — não
   há uma peça centralizada nele —, e é também como um formulário se lê.
   Título, rótulo e campo dividem a mesma margem, e o olho desce por uma
   coluna só em vez de zigue-zaguear entre centro e esquerda. */
.porta-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 700; letter-spacing: -.03em;
  line-height: var(--l-apertada);
  margin: 0 0 var(--e2);
}
.porta-sub {
  color: var(--tinta-fraca);
  font-size: var(--t-corpo);
  margin: 0 0 var(--e7);
  text-wrap: pretty;
}
.porta-sub-colada { margin-top: calc(-1 * var(--e5)); }
.porta-pe {
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.porta-pe a { font-weight: 600; }

/* ── Empilhado ─────────────────────────────────────────────────────────
   Abaixo de 900px as duas colunas não cabem lado a lado sem espremer o
   formulário. O campo da marca vira uma FAIXA no alto: mantém o logo e a
   frase, perde a explicação — que na vertical só empurra os campos para fora
   da primeira tela — e encolhe os traçados junto. */
@media (max-width: 900px) {
  .porta-moldura { grid-template-columns: 1fr; min-height: 0; }
  .porta-marca {
    padding: var(--e7) var(--e5) var(--e6);
    gap: var(--e6);
    min-height: 224px;
  }
  .porta-discurso { padding-bottom: 0; }
  .porta-explica { display: none; }
  /* A largura é o que mantém a frase fora do desenho: ele ocupa a direita
     da faixa, e sem este teto a segunda linha ia parar embaixo das raias —
     que é exatamente o que esta separação veio resolver. */
  .porta-lema {
    font-size: clamp(20px, 5.6vw, 27px);
    max-width: 62%; margin-bottom: 0;
  }
  .porta-logo { height: 34px; }
  .porta-assinatura { display: none; }
  /* O fio passa a ser a costura horizontal entre a faixa e o formulário. */
  .porta-marca::after {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 3px;
    background: linear-gradient(90deg,
                var(--isg-vermelho) 0%, var(--isg-laranja) 46%, var(--isg-amarelo) 100%);
  }
  /* Na faixa deitada os dois campos ficam LADO A LADO, e não um sobre o
     outro: o texto é curto e alinhado à esquerda, então o desenho passa
     para a direita. Sai do caminho da frase sem precisar desbotar. */
  .porta-raias {
    left: auto; right: clamp(-90px, -12vw, -30px);
    top: -120px; height: 200%;
  }
  .porta-forma { padding: var(--e8) var(--e5) var(--e9); align-items: flex-start; }
}

@media print {
  /* Ninguém imprime uma tela de login; se imprimir, sai só o formulário. */
  .porta-marca { display: none; }
  .porta-moldura { display: block; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE

   Mobile não é o desktop encolhido. O que muda de verdade: a navegação
   vira gaveta, as duas colunas viram uma, os meses viram uma tira
   horizontal, e os alvos de toque chegam a 44px.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .entrada { grid-template-columns: 1fr; }
  /* A fila deixa de ter rolagem própria quando as colunas viram uma
     (22/09/2026). Antes ela era uma janela de 440px com rolagem DENTRO da
     página que também rola — no celular o polegar arrastava ora a fila, ora
     a página, e o item aberto carregava lá embaixo, depois da fila inteira,
     sem nada na tela mostrando que alguma coisa tinha acontecido. Agora a
     fila corre junto com a página.

     `overflow: clip`, e não `hidden`: os dois recortam os cantos
     arredondados, mas só o `hidden` cria contêiner de rolagem — e aí o
     cabeçalho de cada projeto (sticky) grudaria no topo da FILA, que não
     rola mais, em vez de grudar embaixo do cabeçalho do site. */
  .fila { position: static; max-height: none; overflow: clip; }
  .fila .cabeca-grupo { top: var(--topo-altura); }
  .ferramentas { margin-left: 0; width: 100%; }
  .ferramentas input[type=search] { flex: 1; }
  .voltar-fila {
    display: inline-flex; align-items: center; gap: var(--e1);
    margin: var(--e3) var(--e5) 0;
    font-size: var(--t-peq); font-weight: 600;
  }
}
/* Atalhos de teclado não servem a quem não tem teclado: no toque, a linha
   "J / K percorrer · A aceitar" só ocupa espaço. */
@media (hover: none) {
  .linha-atalhos { display: none; }
}

@media (max-width: 900px) {
  .area-trabalho { grid-template-columns: 1fr; }
  .barra-meses { position: static; padding: var(--e3); }
  /* Os doze meses viram uma tira que rola — em vez de doze linhas
     empurrando o conteúdo do mês para baixo da dobra. */
  .barra-meses .lista-meses {
    display: flex; gap: var(--e1);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--e1);
  }
  .barra-meses .lista-meses .mes-item {
    flex: 0 0 auto; margin: 0;
    border: 1px solid var(--borda);
    gap: var(--e1);
  }
}

@media (max-width: 780px) {
  /* A navegação sai da faixa e vira gaveta. */
  .topo nav.abas-topo { display: none; }
  .topo .quem { display: none; }
  .topo form.sair-topo { display: none; }
  .menu-mobile { display: block; }
}

@media (max-width: 640px) {
  :root { --topo-altura: 56px; }
  .conteudo { padding: var(--e5) var(--e4) var(--e9); }
  .topo { padding: 0 var(--e4); gap: var(--e2); }
  .topo .marca span { display: none; }

  h2 { margin-top: var(--e6); }

  /* Alvo de toque: 44px é o mínimo confortável com o polegar. O `.pequeno`
     também: era 36px aqui, e "pequeno" é para o desktop, onde o dedo não
     entra. A 375px (07/10/2026) os 36px eram o "Começar <mês>" do movimento,
     o "Abrir/Recolher todos" e o interruptor de tema do cabeçalho. A letra
     continua a do pequeno; só a altura vai ao mínimo. */
  .botao { min-height: 44px; padding: var(--e3) var(--e5); }
  .botao.pequeno { min-height: 44px; }
  /* 16px evita o zoom automático do iOS ao focar um campo. */
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=date], select, textarea { min-height: 44px; font-size: 16px; }

  .apontamento { padding: var(--e3) var(--e4); }
  .ap-cabecalho { gap: var(--e1) var(--e3); font-size: 15px; }
  .ap-data, .ap-valor { min-width: 0; }
  .miniatura-card { float: none; margin: 0 0 var(--e3); display: inline-block; }

  .chamada { padding: var(--e5) var(--e4); }
  .chamada::after { right: -140px; opacity: .35; }

  .filtros { padding: var(--e3); }
  .filtros .campo { min-width: 100%; }
  .filtros .botao { width: 100%; }

  .barra-envio { padding: var(--e4); }
  .barra-envio .botao { width: 100%; }

  .cartao-projeto { min-width: 124px; }
  .modal .corpo { max-height: none; }
  .fundo-modal { padding: var(--e4) var(--e2); }
  .modal .rodape { flex-direction: column-reverse; }
  .modal .rodape .botao { width: 100%; }

  .resumo { gap: var(--e5); }
  .detalhe-corpo, .detalhe-cabeca, .detalhe-acoes { padding-left: var(--e4); padding-right: var(--e4); }

  /* Tabela larga rola dentro do próprio painel — a página nunca rola na
     horizontal. */
  /* A rolagem agora vale em qualquer largura (ver .painel.plano); aqui
     resta só impedir que a tabela se esprema até ficar ilegível. */
  .painel.plano table { min-width: 620px; }

  /* Tela Dados: as duas colunas de gráfico viram uma. Sem isto, um gráfico
     de 375px de largura útil espremido em meia coluna fica ilegível. */
  .grade-graficos-mensais, .grade-distribuicoes { grid-template-columns: 1fr; }
  .linha-distribuicao { grid-template-columns: 90px 1fr 40px; gap: var(--e2); }
  /* O cartão de gráfico aperta por dentro no celular: `--e6` de cada lado
     come 48px de uma tela de 375px, e é largura que o gráfico precisa mais
     que a moldura. */
  .bloco-grafico { padding: var(--e4); }
  .secao-grafico { margin-bottom: var(--e7); }

  /* "Volume mensal" no celular: doze meses no viewBox nativo não cabem em
     375px sem o texto sumir — o `qa` mediu 4,7px de altura real. Em vez de
     encolher, o gráfico rola: o wrapper vira a janela de rolagem, o SVG
     mantém o tamanho nativo (mesma técnica da tabela larga de
     `.painel.plano`, algumas linhas acima) e o texto sai do tamanho de
     sempre, só que em duas telas de dedo em vez de uma.

     O tamanho nativo vem pela ALTURA: 176px é `alto + 46` do macro
     `grafico_mensal`, e com `width: auto` o SVG tira a largura da proporção
     do próprio viewBox — sai em `larg_total` sem que ninguém a escreva. Até
     07/10/2026 a largura vinha num `style="--largura-mensal: …"` do
     template, e era um dos atributos que seguravam o `'unsafe-inline'` no
     `style-src` da CSP. Mudou a altura do desenho lá, mude o 176 aqui. */
  .grafico-mensal-rolagem {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .grafico-mensal-rolagem .grafico-mensal {
    width: auto; height: 176px; max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Impressão ──────────────────────────────────────────────────────── */
@media print {
  /* O papel é sempre claro (21/09/2026).

     O modo escuro que entrou em 19/09 é escolha de TELA, e ele vazava para a
     impressão: quem estivesse no escuro e mandasse imprimir a tela Dados —
     que existe para ser impressa e levada ao gestor — tirava cartões em
     grafite com tinta clara por cima, isto é, folhas quase pretas e texto
     que some. Foi regressão minha, e não do modo escuro em si: o `@media
     print` daqui já zerava o fundo do `body` e da `.chamada`, de uma época em
     que fundo escuro só existia nesses dois lugares.

     A correção devolve, e só para o papel, os valores CLAROS de cada token
     que `:root[data-theme="dark"]` troca — nenhum valor novo, são os mesmos
     que o `:root` do topo deste arquivo declara. Fica aqui em vez de num
     seletor por tela porque a pergunta não é "qual tela", é "qual mídia". */
  :root[data-theme="dark"] {
    --fundo: #F4F4F4;
    --superficie: #FFFFFF;
    --superficie-2: #FAFAFA;
    --superficie-escura: var(--isg-grafite);
    --borda: #E2E2E2;
    --borda-forte: var(--cinza-luz);
    --cinza-claro: #F4F4F4;
    --cinza-luz: #DFDFDF;
    --tinta: var(--isg-grafite);
    --tinta-2: var(--grafite-2);
    --tinta-fraca: var(--cinza-sombra);
    --tinta-acao: var(--laranja-sombra);
    --pendente-tinta: var(--laranja-sombra);
    --respondido-tinta: var(--amarelo-sombra);
    --reaberto-tinta: var(--vermelho-escuro);
    --aceito-tinta: var(--grafite-2);
    --atencao-tinta: var(--amarelo-sombra);
    --perigo-tinta: var(--vermelho-escuro);
    --sucesso-tinta: #06603E;
  }
  /* Sem isto o navegador continua pintando <select>, caixa de marcar e barra
     de rolagem pela paleta escura nativa, mesmo com os tokens já claros. */
  html, :root[data-theme="dark"] { color-scheme: light; }
  .topo, .ferramentas, .barra-selecao, .detalhe-acoes, .controles-dobra,
  .filtros, .menu-mobile, .barra-envio, .acoes-dados,
  .zona-risco { display: none !important; }
  body, body.porta { background: #fff; }
  .painel, .apontamento, .detalhe { box-shadow: none; break-inside: avoid; }
  .chamada { background: #fff; color: #000; border: 1px solid #ccc; }
  /* A lista dos dois passos entra junto: no papel a chamada vira branca, e
     sem esta linha ela sairia em cinza-claro sobre branco, ilegível. */
  .chamada h2, .chamada p, .chamada .passos-rodada,
  .chamada .passos-rodada strong { color: #000; }
  /* Tela Dados: cada bloco de gráfico não pode ser cortado ao meio pela
     quebra de página, e a Zona de risco (o botão de limpar) não tem por
     que ir ao papel — é a ação mais destrutiva do portal, não um dado. */
  .bloco-grafico, .secao-grafico, .resumo .item { break-inside: avoid; }
  /* O cartão de gráfico no papel: o fio de borda basta para delimitar, e a
     margem cheia da tela só desperdiçaria folha. */
  .bloco-grafico { padding: var(--e4); box-shadow: none; }
  .secao-grafico { margin-bottom: var(--e6); }
  .item-anel, .grade-aneis { break-inside: avoid; }
  /* A etiqueta do gráfico mensal é resposta a um ponteiro, e no papel não há
     ponteiro nenhum: se o papel saísse com ela aberta, sairia com um retângulo
     escuro tapando um mês. Tudo o que ela diz já está impresso ao lado. */
  .etiqueta-grafico { display: none !important; }
  /* Nenhuma coluna sai acesa: o realce é rastro do ponteiro, não dado. */
  .grafico-coluna .grafico-fundo-coluna { fill: transparent !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TIPO E URGÊNCIA

   Duas classificações novas no cartão, e as duas precisam conviver com os
   selos de status sem disputar com eles.

   O tipo é NEUTRO de propósito: é uma etiqueta de arquivo, não um estado.
   Se "Reembolso" também fosse colorido, a cor deixaria de significar
   "precisa de atenção" e passaria a significar "tem selo".

   A urgência só aparece quando foge do padrão. Média é o valor de nascença
   de todo apontamento — um selo presente em todos não distingue nada.
   ═══════════════════════════════════════════════════════════════════════ */

.selo-tipo {
  display: inline-block;
  font-size: var(--t-legenda); font-weight: 600;
  line-height: 1.5;
  padding: 2px var(--e2);
  border-radius: var(--r-min);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  color: var(--tinta-2);
  white-space: nowrap;
}

.selo-urgencia {
  display: inline-block;
  font-size: var(--t-legenda); font-weight: 700;
  line-height: 1.5;
  padding: 2px var(--e2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.selo-urgencia.alta  { background: var(--reaberto-veu); color: var(--reaberto-tinta); }
.selo-urgencia.baixa { background: var(--cinza-claro);  color: var(--tinta-fraca); }

/* Na fila densa da caixa de entrada não cabe um selo inteiro: o tipo entra
   como texto e a urgência alta, como um único triângulo. */
.tipo-fila {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 34%;
}
.marca-urgente {
  color: var(--reaberto-tinta);
  font-size: 9px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   MOVIMENTO MENSAL — a grade dos doze meses

   Mesma metáfora da barra lateral da ISG: prestação de contas se pensa por
   mês. Ver os doze de uma vez responde "o que ainda falta mandar?" sem
   ninguém precisar lembrar de cabeça.
   ═══════════════════════════════════════════════════════════════════════ */

.grade-meses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--e3);
  align-items: start;
}

.cartao-mes {
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--borda-forte);
  border-radius: var(--r);
  padding: var(--e4);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
/* Mês entregue e ainda com a ISG: amarelo, o mesmo "está na nossa fila" do
   apontamento respondido. Mês fechado: grafite, como todo resolvido. */
.cartao-mes.entregue { border-top-color: var(--respondido); }
.cartao-mes.entregue.fechado { border-top-color: var(--aceito); background: var(--superficie-2); }
.cartao-mes:hover { box-shadow: var(--sombra-1); }
/* O cartão com o formulário aberto ocupa a largura toda da grade: um campo
   de arquivo espremido em 230px é onde se erra o anexo. */
.cartao-mes.abrindo {
  grid-column: 1 / -1;
  border-color: var(--isg-laranja);
  border-top-color: var(--isg-laranja);
  box-shadow: var(--sombra-2);
}

.cartao-mes .mes-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em;
}
.cartao-mes .mes-estado { display: flex; gap: var(--e1); flex-wrap: wrap; }
.cartao-mes .mes-dado { font-size: var(--t-legenda); color: var(--tinta-fraca); }
.cartao-mes .anexos { margin-top: 0; }
.cartao-mes .anexo { font-size: var(--t-legenda); padding: 3px var(--e2); }
.cartao-mes .botao { align-self: flex-start; }
.cartao-mes.abrindo .botao[data-abrir-movimento] { display: none; }

.retorno-isg {
  background: var(--cinza-claro);
  border-left: 3px solid var(--aceito);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e2) var(--e3);
  font-size: var(--t-peq);
}
.retorno-isg > summary {
  display: flex; align-items: center; gap: var(--e2);
  cursor: pointer; font-weight: 600;
  list-style: none;
}
.retorno-isg > summary::-webkit-details-marker { display: none; }
.retorno-isg > summary::after {
  content: "";
  width: 13px; height: 13px; flex-shrink: 0;
  background-color: var(--tinta-fraca);
  -webkit-mask: var(--chevron) no-repeat center / 13px;
          mask: var(--chevron) no-repeat center / 13px;
  transform: rotate(-90deg);
  transition: transform var(--transicao);
}
.retorno-isg[open] > summary::after { transform: rotate(0deg); }
.retorno-isg .texto { white-space: pre-wrap; margin-top: var(--e2); color: var(--tinta-2); }

.form-movimento {
  border-top: 1px solid var(--borda);
  padding-top: var(--e3);
  margin-top: var(--e1);
}
.form-movimento[hidden] { display: none; }

/* Rascunho: os arquivos estão aí, a ISG não recebeu nada. Tracejado — o mesmo
   vocabulário do apontamento em rascunho, do outro lado do portal. */
.cartao-mes.rascunho {
  border-style: dashed;
  border-top-style: solid;
  border-top-color: var(--isg-laranja);
  background: var(--superficie-2);
}

.acoes-mes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* Os documentos como lista de conferência: é ela que responde "o que
   ainda falta juntar?" sem ninguém precisar lembrar de cabeça. */
.lista-documentos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--t-legenda);
}
.lista-documentos li {
  display: flex; align-items: center; gap: var(--e2);
  color: var(--tinta-fraca);
}
.lista-documentos li.tem { color: var(--tinta-2); }
.lista-documentos .marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; flex-shrink: 0;
}
.lista-documentos li.tem .marca { color: var(--sucesso); }
.lista-documentos li.falta .marca { color: var(--grafite-4); }
.lista-documentos .rotulo {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-documentos .quantos {
  background: var(--cinza-claro); color: var(--tinta-fraca);
  font-size: 10px; padding: 0 5px; border-radius: var(--r-pill);
}

/* Uma caixa por documento no formulário. O fio à esquerda separa as quatro
   sem transformar o formulário numa pilha de molduras. */
.caixas-documento { display: flex; flex-direction: column; gap: var(--e3); }
.caixa-documento {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e3);
  background: var(--superficie);
}
.caixa-documento .cabeca-doc {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.caixa-documento .nome-doc {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: var(--t-peq); letter-spacing: -.01em;
}
/* A sigla é como a equipe fala no dia a dia — é ela que faz o proponente
   reconhecer, na mão, o documento que a tela está pedindo. */
.caixa-documento .sigla-doc {
  font-family: var(--fonte-mono); font-size: 10.5px;
  color: var(--tinta-fraca);
  background: var(--cinza-claro);
  border-radius: var(--r-min); padding: 1px 5px;
}
.caixa-documento .selo { margin-left: auto; }
.caixa-documento .anexos { margin: 0 0 var(--e2); }

/* A linha que explica a caixa, quando o nome não basta — hoje só a do
   extrato da conta corrente de movimento, que é "o movimento mensal, onde
   aconteceram os pagamentos". Ver models.NOTA_DOCUMENTO. */
.caixa-documento .nota-doc {
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  margin: calc(var(--e2) * -1) 0 var(--e2);
  line-height: var(--l-apertada);
}

/* ── As duas formas de entregar o mês ──────────────────────────────────
   Os quatro extratos separados, OU tudo num PDF. Não é uma quinta caixa: é
   a outra forma de entregar a mesma coisa, e o desenho precisa dizer isso
   antes de qualquer texto — daí o "ou" com os fios dos dois lados, que é
   como se escreve uma alternativa e não uma continuação da lista. */
.grupo-entrega { transition: opacity .15s ease; }
/* O caminho que a pessoa NÃO escolheu não some: ele apaga. Sumir tiraria a
   volta atrás (e o arquivo que já esteja lá dentro); apagar diz "não é por
   aqui agora" e continua clicável. */
.grupo-entrega.apagado { opacity: .45; }
.grupo-entrega.apagado:hover,
.grupo-entrega.apagado:focus-within { opacity: 1; }

.titulo-entrega {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.titulo-entrega strong {
  font-family: var(--fonte-titulo); font-size: var(--t-peq);
  letter-spacing: -.01em;
}
.titulo-entrega .dica { margin: 0; }

.ou-entrega {
  display: flex; align-items: center; gap: var(--e3);
  margin: var(--e4) 0;
  color: var(--tinta-fraca); font-size: var(--t-legenda);
  text-transform: uppercase; letter-spacing: .08em;
}
.ou-entrega::before, .ou-entrega::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}

/* A caixa da alternativa usa o laranja da ação no fio: ela não é mais um
   item da lista acima, é a outra porta. */
.caixa-pdf-unico { border-left-color: var(--isg-laranja); }

.area-solta.compacta { padding: var(--e2); font-size: var(--t-legenda); }

/* Lado da ISG: os documentos do mês, um a um. Uma lista corrida de
   anexos obrigava a abrir arquivo por arquivo para descobrir se o extrato da
   conta investimento de captação tinha vindo. */
.documentos-recebidos {
  display: flex; flex-direction: column; gap: var(--e2);
  margin-top: var(--e2);
}
.doc-recebido {
  border-left: 3px solid var(--borda-forte);
  padding: var(--e1) 0 var(--e1) var(--e3);
}
.doc-recebido.tem { border-left-color: var(--sucesso); }
.doc-recebido.falta { border-left-color: var(--isg-vermelho); }
.doc-rotulo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-2);
}
.doc-recebido.falta .doc-rotulo { color: var(--tinta-fraca); }
.doc-rotulo .marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; flex-shrink: 0;
}
.doc-recebido.tem .doc-rotulo .marca { color: var(--sucesso); }
.doc-recebido.falta .doc-rotulo .marca { color: var(--grafite-4); }
.doc-recebido .anexos { margin-top: var(--e1); }


/* ═══════════════════════════════════════════════════════════════════════
   CÓDIGO DE ACESSO
   ═══════════════════════════════════════════════════════════════════════ */

/* Seis dígitos espaçados: o olho confere um a um contra o e-mail, e o erro
   de digitação aparece antes de enviar. */
.campo-codigo {
  font-family: var(--fonte-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .34em;
  text-align: center;
  text-indent: .34em;      /* compensa o espaço que sobra depois do último dígito */
  padding: var(--e3);
  min-height: 56px;
}

/* O código à mostra enquanto o envio de verdade está desligado. Desenhado
   para parecer o que é — um andaime —, e não uma parte normal da tela. */
.codigo-teste {
  font-family: var(--fonte-mono);
  font-size: 26px; font-weight: 700; letter-spacing: .22em;
  text-align: center;
  margin: var(--e3) 0 0;
  padding: var(--e3);
  background: var(--isg-grafite);
  color: var(--isg-amarelo);
  border-radius: var(--r-peq);
  user-select: all;        /* um clique seleciona o código inteiro */
}


/* ═══════════════════════════════════════════════════════════════════════
   EM CONSTRUÇÃO — a tela qualitativa

   A faixa listrada é o traçado esportivo em outra função: aqui ela demarca
   uma área que ainda não está pronta, como a linha que fecha uma raia.
   ═══════════════════════════════════════════════════════════════════════ */

.em-construcao { padding: 0; overflow: hidden; }
.em-construcao .faixa-obra {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--isg-amarelo) 0 12px,
    var(--isg-grafite) 12px 24px);
}
.em-construcao .miolo-obra { padding: var(--e6); }
.em-construcao h2 { margin-bottom: var(--e2); }

.lista-obra {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e3);
}
.lista-obra li {
  padding-left: var(--e5);
  position: relative;
  color: var(--tinta-2);
}
/* O marcador é um traço, não um bullet: a lista descreve o que vai existir,
   e um traço lê como item de plano em vez de item de menu. */
.lista-obra li::before {
  content: "";
  position: absolute; left: 0; top: .7em;
  width: 12px; height: 2px;
  background: var(--isg-laranja);
}
.lista-obra strong { color: var(--tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   TRILHA DE AUDITORIA
   ═══════════════════════════════════════════════════════════════════════ */

.tabela-logs { font-size: var(--t-peq); }
.tabela-logs td { vertical-align: top; }
.tabela-logs .quando-log {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-logs .dica { margin-top: 1px; }
.tabela-logs .selo { font-weight: 600; }

/* Tentativa de entrada negada é a única linha que pede ação. O fio vermelho
   à esquerda permite achá-la rolando, sem ler linha por linha. */
.linha-suspeita { background: var(--reaberto-veu); }
.linha-suspeita:hover { background: rgba(255, 40, 0, .14); }
.linha-suspeita td:first-child { box-shadow: inset 3px 0 0 var(--isg-vermelho); }


/* ── Ajustes de tela estreita para o que entrou agora ─────────────────── */

@media (max-width: 640px) {
  /* minmax(0, …), e não `1fr` puro: `1fr` é minmax(auto, 1fr), e o `auto`
     deixa a coluna crescer até a largura mínima do conteúdo. O nome de
     arquivo escolhido (`.linha-anexo .nome`, em nowrap) entra nessa conta
     inteiro — "WhatsApp Image 2026-10-07 at 14.32.11.png" levava a página a
     527px no celular (07/10/2026). Com mínimo 0 a coluna fica na tela e o
     nome corta em reticências, como já fazia no desktop, onde o mínimo é
     o 230px fixo. */
  .grade-meses { grid-template-columns: minmax(0, 1fr); }
  .cartao-mes.abrindo { grid-column: auto; }
  .campo-codigo { font-size: 24px; letter-spacing: .26em; text-indent: .26em; }
  .em-construcao .miolo-obra { padding: var(--e5) var(--e4); }
  .tabela-logs { min-width: 680px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES QUE PASSARAM A CARREGAR ÍCONE

   Ajustes de alinhamento nos lugares onde entrou um <svg> no meio do texto.
   Todos têm a mesma causa: um SVG é um bloco em linha e, sem `align-items`,
   assenta na linha de base — um ou dois pixels abaixo de onde o olho espera
   ver o desenho.
   ═══════════════════════════════════════════════════════════════════════ */

.selo-urgencia { display: inline-flex; align-items: center; gap: 2px; }

.marca-urgente { display: inline-flex; align-items: center; }

.alvo-item .clipe { display: inline-flex; align-items: center; }

.ap-rodape.trancado .cadeado {
  display: inline-flex; align-items: center;
  color: var(--grafite-3);
  flex-shrink: 0;
}

.linha-anexo .icone { color: var(--tinta-fraca); }

.fechar-modal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  transition: color var(--transicao), background var(--transicao);
}
.fechar-modal:hover { background: var(--cinza-claro); }

.chat-fechar, .chat-trocar, .chat-expandir {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px;
  border-radius: var(--r-min);
}

/* O clipe do chat: o campo de arquivo fica escondido atrás dele, e o nome
   acessível vem do .visualmente-oculto dentro do <label>. */
.chat-anexar { color: var(--tinta-fraca); }
.chat-anexar:hover { color: var(--tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   ABRIR E FECHAR — o <details> como bloco de ação

   Estes gatilhos existiam com estilo escrito na mão em cada template
   (`style="cursor:pointer;font-weight:600;color:…"`, repetido em cinco
   arquivos). Viraram classe por uma razão prática: quando o foco de teclado
   passou a precisar de contorno visível, havia cinco lugares para corrigir.
   ═══════════════════════════════════════════════════════════════════════ */

.dobra-acao { display: block; }

.gatilho-acao {
  display: flex; align-items: center; gap: var(--e2);
  list-style: none;
  cursor: pointer;
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-acao);
  padding: var(--e1) var(--e2);
  margin: 0 calc(var(--e2) * -1);
  border-radius: var(--r-peq);
  transition: background var(--transicao), color var(--transicao);
}
.gatilho-acao::-webkit-details-marker { display: none; }
.gatilho-acao:hover { background: var(--acao-veu); }

.form-dentro-dobra { margin-top: var(--e3); }

/* Um <summary> desenhado como botão. O `display` vem da própria classe
   .botao; aqui só se apaga o triângulo nativo e se devolve o cursor. */
.dobra-botao { display: inline-block; }
.dobra-botao > summary { cursor: pointer; list-style: none; }
.dobra-botao > summary::-webkit-details-marker { display: none; }

.form-devolver { margin-top: var(--e3); min-width: 300px; max-width: 520px; }

/* Todo <summary> é clicável — a regra genérica evita esquecer o cursor num
   gatilho novo, que é o tipo de detalhe que só se percebe quando o mouse
   passa por cima e nada acontece. */
summary { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════════════
   CAMPO DE BUSCA COM LUPA

   A lupa estava no rótulo ("🔎 Buscar"), onde é decoração. Dentro do campo
   ela é o que faz a caixa ser reconhecida como busca antes de alguém ler o
   rótulo — é a convenção que todo mundo já tem na cabeça.
   ═══════════════════════════════════════════════════════════════════════ */

.campo-com-icone { position: relative; display: flex; align-items: center; }
.campo-com-icone > .i {
  position: absolute; left: var(--e3);
  color: var(--tinta-fraca);
  pointer-events: none;          /* o clique atravessa e cai no campo */
  transition: color var(--transicao);
}
.campo-com-icone input { padding-left: calc(var(--e3) + 16px + var(--e2)); }
.campo-com-icone:focus-within > .i { color: var(--isg-laranja); }


/* ═══════════════════════════════════════════════════════════════════════
   MEDIDAS DE CAMPO E DE COLUNA

   Larguras que estavam escritas em `style=` dentro dos templates. Trazidas
   para cá porque medida repetida em HTML é medida que diverge: o mesmo
   filtro "Tipo" tinha 210px numa tela e 230px na outra, sem motivo nenhum.
   ═══════════════════════════════════════════════════════════════════════ */

.campo-busca  { flex: 2; min-width: 190px; }
.campo-medio  { max-width: 220px; }
.campo-curto  { max-width: 150px; }
.campo-ano    { max-width: 110px; }
.campo-largo  { flex: 2; }

.c-tipo     { flex: 1 1 260px; }
.c-urgencia { flex: 0 0 150px; }

.linha-campos.com-folga { margin-top: var(--e1); }

.select-auto       { width: auto; }
/* `padding` no shorthand aqui é armadilha: o `select` reserva
   `padding-right: var(--e7)` para a seta desenhada no background, e o
   shorthand zera essa reserva — o texto passa POR BAIXO da seta. Foi o que
   aconteceu quando o nome do projeto ficou longo ("ILTP.CCRAR2"): a seta
   caía em cima das últimas letras. Por isso o padding-right vem depois,
   sempre. */
.select-mini { width: auto; font-size: var(--t-legenda); padding: 4px 6px; min-height: 30px; }
.select-mini { padding-right: 28px; }
/* No celular, o mini volta ao tamanho de campo. A regra geral dos 44px e dos
   16px (seção RESPONSIVO) vem ANTES daqui no arquivo e é de tipo, `select`;
   esta é de classe e vencia — o seletor de etapa do modo por bloco medido a
   375px tinha 30px de altura e letra de 11,5px, que é a que faz o iOS dar
   zoom ao focar. Pequeno é para o desktop, onde o dedo não entra. */
@media (max-width: 640px) {
  .select-mini { min-height: 44px; font-size: 16px; }
}

/* O "Ir" dos seletores que enviam sozinhos (`data-enviar-ao-mudar`, ver o
   apontamentos.js). Ele é pequeno porque no desktop quase nunca aparece:
   só sem JavaScript, ou depois de uma troca pelo teclado. No celular, sem
   JavaScript, ele é o ÚNICO jeito de aplicar o filtro — e o `.pequeno` de
   36px ficava abaixo dos 44px do polegar.

   A barra `.ferramentas` caía na mesma armadilha do `.select-mini` acima: a
   altura de 34px é de classe e vencia a regra de tipo dos 44px/16px da seção
   RESPONSIVO. Medido a 375px em /admin/movimentos (06/10/2026): seletores
   de 34px com letra de 13px, a que faz o iOS dar zoom ao focar. */
@media (max-width: 640px) {
  .botao.botao-ir { min-height: 44px; min-width: 44px; }
  .ferramentas select, .ferramentas input[type=search] {
    min-height: 44px; font-size: 16px;
  }
}

.textarea-curto { min-height: 68px; }
.textarea-alto  { min-height: 110px; }

.rotulo-inline { margin: 0; font-size: var(--t-legenda); }

/* ── A tabela de contas ────────────────────────────────────────────────
   `table-layout: fixed` é o ponto. No layout automático (o padrão) a largura
   declarada no <th> é só uma sugestão — quem decide é o conteúdo. Por isso
   dar 110px à coluna de situação não encolhia nada: a coluna crescia com o
   botão, empurrava o total para 1118px, e o que passava da borda do painel
   simplesmente não era desenhado. Era assim que "Liberar sem código" virava
   "Liberar ser".

   Fixo, a soma das colunas é sempre a largura disponível, e o que não couber
   quebra ou trunca DENTRO da própria célula. Em porcentagem, e não em pixel,
   para acompanhar a janela em vez de brigar com ela. */
.tabela-contas { table-layout: fixed; width: 100%; }

/* A repartição não é estética, é por quem PRECISA de quanto:
   · função   — vocabulário fixo e curto, mas truncar "Proponente" em "Proj"
                é perda pura: não há como adivinhar o resto. Ganha o que
                precisa para nunca cortar.
   · situação — o botão "Liberar sem código" é o item mais largo da tabela.
   · e-mail   — quebra em várias linhas sem perder nada, então cede espaço.
   · projetos — trunca com reticências e o nome inteiro fica no `title`. */
th.col-nome     { width: 13%; }
th.col-email    { width: 18%; }
th.col-funcao   { width: 19%; }
th.col-projetos { width: 18%; }
th.col-acesso   { width: 12%; }
th.col-situacao { width: 20%; }

/* E-mail é a coluna que mais empurrava: um endereço é uma palavra só para o
   navegador, e sem isto ele estoura a célula em vez de quebrar. */
.tabela-contas td:nth-child(2) { overflow-wrap: anywhere; }

/* Os botões de ação quebram em duas linhas em vez de vazar. Numa coluna
   estreita, "Liberar sem código" em duas linhas é legível; cortado ao meio,
   não é. */
.tabela-contas .botao { white-space: normal; text-align: left; }

/* O select da função tem piso: o papel é o dado da coluna, e um "Qua…" no
   lugar de "Qualitativa" não informa nada. O teto de 190px do grupo vale
   para o de projetos, onde truncar é aceitável (o nome inteiro está no
   `title`); aqui o piso é que manda. */
/* 120px: "Proponente" mede 74px nesta fonte, mais 12 de recuo à esquerda,
   28 reservados para a seta e uma folga. Medido, não estimado — com 96px o
   "e" final sumia sem que `scrollWidth` acusasse nada. */
.tabela-contas td:nth-child(3) .grupo-controle select { min-width: 120px; }


/* ═══════════════════════════════════════════════════════════════════════
   TELA DE SENHA REDEFINIDA — exibição e cópia da senha provisória
   ═══════════════════════════════════════════════════════════════════════ */

.painel-senha-provisoria {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  padding: var(--e6);
  margin: var(--e6) 0;
}

.linha-senha-provisoria {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e3);
}

.senha-display {
  flex: 1;
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  word-break: break-all;
  padding: var(--e3);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-peq);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.linha-senha-provisoria .botao {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .linha-senha-provisoria {
    flex-direction: column;
    align-items: stretch;
  }

  .linha-senha-provisoria .botao {
    width: 100%;
  }
}

/* Troca obrigatória: validação no cliente */
.validacao-sinal {
  margin: var(--e4) 0 var(--e3);
  font-size: var(--t-corpo);
}

.validacao-sinal .aviso {
  margin: 0;
}

/* O "Tudo certo" usa o verde do `.aviso.ok`, mas sem a chegada (o corredor
   e o flare da seção 8c). Aquilo celebra um envio que ATRAVESSOU; aqui
   nada foi enviado ainda, e a conferência vai e volta a cada tecla — a
   comemoração tocaria de novo toda vez que a pessoa corrigisse um
   caractere. */
.validacao-sinal .aviso.ok::before,
.validacao-sinal .aviso.ok::after { content: none; }

/* Desabilita botão enquanto há erros */
button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════════
   AGRUPAMENTOS EM LINHA
   ═══════════════════════════════════════════════════════════════════════ */

/* A fila de selos no alto do cartão. Quebra em várias linhas em vez de
   alargar o cartão: com tipo, urgência, prazo, "novo" e o estado da
   validação, um apontamento pode carregar seis selos ao mesmo tempo. */
.tira-selos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  min-width: 0;
}
.tira-selos .dica { margin: 0; }

.barra-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.barra-acoes.com-folga { margin-top: var(--e3); }

.item-gaveta { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; }

.form-inline { margin: 0; }
.form-inline-campos {
  display: flex; gap: var(--e1); align-items: center; margin: 0;
  flex-wrap: wrap;
}
.form-inline-campos.com-folga { margin-top: var(--e2); }
.form-vinculo { display: inline; }
.form-liberar { min-width: 280px; }
.form-solto { margin-top: var(--e3); }
.form-solto-curto { margin-top: var(--e1); }

.botao-solto { margin-top: var(--e3); }
.botao-enviar-resposta { margin-top: var(--e3); }

.empurra-direita { margin-left: auto; }


/* ═══════════════════════════════════════════════════════════════════════
   NOTAS E LINHAS DE APOIO
   ═══════════════════════════════════════════════════════════════════════ */

/* As três cores de texto que apareciam escritas à mão nos templates. Todas
   usam a SOMBRA da cor, nunca a cor pura — regra do sistema: cor pura
   preenche, sombra escreve. */
.cor-atencao { color: var(--atencao-tinta); }
.cor-sucesso { color: var(--sucesso); }
.cor-perigo  { color: var(--perigo-tinta); }

.dica.cor-atencao, .dica.cor-sucesso, .dica.cor-perigo {
  display: flex; align-items: flex-start; gap: var(--e1);
}
.dica.cor-atencao .i, .dica.cor-sucesso .i, .dica.cor-perigo .i {
  margin-top: 2px;
}

.dica.em-linha { display: inline; margin: 0; font-weight: 400; }

.nota-aceito {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--sucesso); font-weight: 600;
}
.nota-atencao {
  display: inline-flex; align-items: baseline; gap: var(--e1);
  color: var(--atencao-tinta);
}

/* Link que leva adiante ("Ver os acessos →"). A seta era um caractere solto
   no fim da frase; virou ícone e ganha um empurrãozinho no hover — o mesmo
   gesto de "vá por aqui" que o texto já faz. */
.link-seguir {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-weight: 600;
}
.link-seguir .i { transition: transform var(--transicao); }
.link-seguir:hover .i { transform: translateX(2px); }

.linha-recorte  { margin: calc(var(--e2) * -1) 0 var(--e4); }
.linha-atalhos  { margin-top: var(--e3); }
.linha-atalhos.direita { text-align: right; margin-top: var(--e5); }
.linha-novidades { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e3); }
.linha-para { margin: 0 0 var(--e2); }
.linha-projeto-informado { margin-top: var(--e2); }
.lista-suspeitos { margin-top: var(--e2); }
.lista-suspeitos .dica { margin: 2px 0; }

.texto-corrido { white-space: pre-wrap; }
.mensagem-teste { margin-top: var(--e2); white-space: pre-wrap; }
.conversa-anterior { margin-top: var(--e2); }
.aviso-embutido { margin: var(--e2) 0; }
.linha-anexo-duvida { margin: 0 0 var(--e3); }

.ap-cabecalho-aviso { margin: var(--e2) 0 2px; }
.ap-rodape.bloco { display: block; }
.rotulo-bloco.sem-folga-topo { margin-top: 0; }
.motivo-reabertura.com-folga { margin-top: var(--e2); }

.miolo-envio .dica { display: block; margin: 2px 0 0; }

.conta-titulo {
  margin-left: var(--e2);
  color: var(--tinta-fraca); font-weight: 400; font-size: var(--t-peq);
  font-family: var(--fonte-texto);
}

/* O ✓ da chamada "Tudo em dia" fica BRANCO, e não verde: sobre o grafite o
   verde de sucesso dá 3,0:1, no limite do mínimo para elemento gráfico. O
   branco dá 14,7:1, e quem carrega o sentido de "está tudo certo" ali é a
   frase, não a cor. */
.icone-chamada { flex-shrink: 0; }
.chamada h2 { display: flex; align-items: center; gap: var(--e3); }


/* ═══════════════════════════════════════════════════════════════════════
   ABAS LOCAIS — dentro de uma página, não no cabeçalho

   A tela de Revisão reaproveitava `.abas-topo`, que é desenhada para viver
   sobre o grafite do cabeçalho: fora dali o texto claro sobre fundo claro
   quase sumia. Esta classe é a mesma ideia sobre superfície clara.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── As duas prestações do projeto, no topo da tela dele ──────────────
   Nível 1: Financeiro · Qualitativa. Abaixo dele, quando se está na
   qualitativa, vem o nível 2 (.abas-locais) com as telas dela.

   Precisa ser MAIOR que as de dentro. Empilhados com o mesmo tamanho e o
   mesmo peso, os dois níveis se leem como duas fileiras irmãs — e a
   pergunta que a tela responde ("em qual das duas prestações eu estou?")
   fica indistinguível de "qual tela da qualitativa eu abri?".

   O fio fica só no nível de baixo quando ele existe: dois traços de largura
   inteira a poucos pixels um do outro empilham ruído no alto de toda tela
   de projeto. Sozinho (na tela financeira), o nível 1 mantém o seu. */
.abas-prestacao { margin-bottom: 0; }
.abas-prestacao .aba {
  font-size: var(--t-h3);
  font-weight: 600;
  padding: var(--e2) var(--e4) var(--e3);
  letter-spacing: -.01em;
}
.abas-prestacao .aba.ativa { font-weight: 700; }
.abas-prestacao:has(+ .abas-locais) { border-bottom-color: transparent; }
/* Sem :has() (navegador antigo) os dois fios aparecem — feio, não quebrado.
   O nível 2 encosta no 1 de qualquer jeito. */
.abas-prestacao + .abas-locais { margin-top: 0; }

.abas-locais {
  display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap;
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}
.abas-locais .aba {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4);
  font-size: var(--t-peq); font-weight: 500;
  color: var(--tinta-fraca);
  text-decoration: none;
}
.abas-locais .aba::after {
  content: ""; position: absolute; left: var(--e2); right: var(--e2); bottom: -1px;
  height: 2px; background: var(--isg-laranja);
  transform: scaleX(0); transition: transform var(--transicao);
}
.abas-locais .aba:hover { color: var(--tinta); text-decoration: none; }
.abas-locais .aba.ativa { color: var(--tinta); font-weight: 600; }
.abas-locais .aba.ativa::after { transform: scaleX(1); }
.abas-locais .quantos { background: var(--cinza-claro); color: var(--tinta-fraca); }
.abas-locais .aba.ativa .quantos { background: var(--pendente-veu); color: var(--pendente-tinta); }


/* ═══════════════════════════════════════════════════════════════════════
   TELA DE REVISÃO E TABELA DE USUÁRIOS
   ═══════════════════════════════════════════════════════════════════════ */

.painel-revisao { margin-bottom: var(--e4); }

.cabeca-lote {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); flex-wrap: wrap;
}
.nome-lote { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; }
.cabeca-lote .dica { margin: 0 0 0 var(--e1); }
.lote-itens { margin-top: var(--e3); }

.linha-usuario { display: flex; gap: var(--e4); flex-wrap: wrap; align-items: flex-start; }
.dados-usuario { flex: 1; min-width: 220px; }
.nome-usuario { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; }

/* O vínculo de projeto é um botão que REMOVE — e um botão destrutivo não
   pode parecer uma etiqueta neutra. Só no hover ele se assume vermelho:
   antes disso, o que interessa é ler a lista de projetos. */
.botao-vinculo {
  cursor: pointer;
  font-family: var(--fonte-texto);
  margin: 0 var(--e1) var(--e1) 0;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.botao-vinculo .i { opacity: .5; transition: opacity var(--transicao); }
.botao-vinculo:hover {
  border-color: var(--isg-vermelho);
  background: var(--reaberto-veu);
  color: var(--reaberto-tinta);
}
.botao-vinculo:hover .i { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   TEXTO QUE NÃO QUEBRA A TELA

   Nome de arquivo e nome de credor vêm de fora e podem ser qualquer coisa —
   inclusive uma palavra de 80 caracteres sem espaço, que num flex sem
   `min-width: 0` empurra o cartão inteiro para fora da largura da tela.
   ═══════════════════════════════════════════════════════════════════════ */

.nome-anexo {
  min-width: 0;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-credor, .ap-descricao, .fala .texto, .texto-resposta,
.detalhe-titulo, .bolha {
  overflow-wrap: anywhere;
}

.resumo-dobra, .miolo-envio, .alvo-item, .linha-anexo .info { min-width: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   AJUSTES DE TELA ESTREITA PARA O QUE ENTROU AGORA
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Num cartão de 320px, 32ch de nome de arquivo é mais do que cabe. */
  .nome-anexo { max-width: 22ch; }

  .campo-busca, .campo-medio, .campo-curto, .campo-ano, .campo-largo,
  .c-tipo, .c-urgencia { max-width: none; min-width: 100%; flex: 1 1 100%; }

  .form-devolver { min-width: 0; }
  .form-liberar { min-width: 100%; }

  .linha-atalhos.direita { text-align: left; }

  /* A tabela de usuários rola dentro do painel; as larguras fixas de coluna
     virariam colunas espremidas se valessem aqui. */
  .painel.plano table { min-width: 760px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PORTA DE ENTRADA E TELAS DE ESTADO

   "Conta bloqueada", "Quase lá", "Página não encontrada", "Nenhum projeto
   ainda" eram quatro variações do mesmo painel centralizado, cada uma com o
   espaçamento escrito à mão no template. Viraram um componente só, com um
   ícone grande e apagado no alto — o mesmo desenho das telas vazias, porque
   é a mesma situação: não há conteúdo, e a tela precisa dizer por quê.
   ═══════════════════════════════════════════════════════════════════════ */

.painel-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: var(--e9);
  padding: var(--e9) var(--e6);
}
.painel-estado h1 { margin-bottom: var(--e2); }
.painel-estado .subtitulo { margin-bottom: 0; text-wrap: pretty; }

.icone-estado { color: var(--grafite-4); margin-bottom: var(--e3); }
.icone-estado.perigo { color: var(--perigo-tinta); opacity: .8; }

.form-estado { margin-top: var(--e6); }

.botao-porta { margin-top: var(--e5); }
.linha-esqueci { margin-top: var(--e2); text-align: right; }
.porta-sub-colada { margin-top: calc(var(--e1) * -1.5); }

/* O aviso de "envio desligado" é um bloco de texto corrido, e não uma frase
   curta: centralizar deixaria três linhas com o bordo direito irregular. */
.aviso.alinhado-esquerda { text-align: left; }
.dica.com-folga { margin-top: var(--e2); }
.sem-folga-topo { margin-top: 0; }
.sem-folga-baixo { margin-bottom: 0; }
/* A regra da senha, solta abaixo do formulário da troca obrigatória: o
   mesmo respiro do `.form-estado`, para ela ler como nota da tela e não como
   legenda do último campo. */
.dica.dica-apos-form { margin-top: var(--e6); }
/* O botão que encerra uma tela de confirmação (ex.: "Voltar à lista de
   usuários" depois de redefinir uma senha): afastado do aviso logo acima,
   para o aviso ser lido antes de alguém sair dali. */
.acao-fim-tela { margin-top: var(--e8); }

.form-sair-gaveta { margin: 0; padding: 0 var(--e1) var(--e1); }
.dica-chat { margin: var(--e3) var(--e4) var(--e2); }
.dica-chat.sem-folga-baixo { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   LARGURAS DE COLUNA DAS TABELAS

   Estavam em `style="width:…"` no <th>. Uma largura de coluna é decisão de
   layout, e layout mora aqui — inclusive para poder ser desligada numa
   tela estreita, que é onde ela atrapalha.
   ═══════════════════════════════════════════════════════════════════════ */

th.col-quando { width: 130px; }
th.col-quem   { width: 180px; }
th.col-acao   { width: 190px; }
th.col-onde   { width: 120px; }

th.col-num        { width: 110px; }
th.col-aguardando { width: 130px; }
th.col-analisar   { width: 120px; }
th.col-aceitos    { width: 90px; }
/* Sem largura fixa, ao contrário das de cima. As outras reservam espaço para
   um número que ainda não chegou; esta já sabe o seu tamanho — são sempre os
   mesmos dois botões. Uma largura escrita aqui só poderia errar para mais
   (rouba da coluna do projeto, que é a que precisa) ou para menos (o `nowrap`
   ignora e estoura a tabela assim mesmo). Medido: 180px viravam 224px na
   tela e empurravam a tabela 27px para fora do painel. */

/* ── Editar e excluir na linha do projeto ──────────────────────────────
   `white-space: nowrap` para os dois botões não quebrarem um sob o outro no
   meio da tabela: empilhados, a linha do projeto fica com o dobro da altura
   das outras e a tabela perde a régua horizontal que a torna legível.

   O "Excluir" só ganha vermelho no hover, e não em repouso. Uma coluna
   inteira de vermelho numa tabela de projetos normais transforma a lista
   num aviso permanente — e cor de alerta que está sempre acesa deixa de
   alertar. O vermelho aparece quando o ponteiro chega, que é o instante em
   que ele ainda serve para alguma coisa. */
.acoes-projeto { white-space: nowrap; }
.acoes-projeto .botao { margin-right: var(--e2); }
.acoes-projeto .botao:last-child { margin-right: 0; }

.acoes-projeto .acao-excluir:hover {
  background: var(--perigo-veu);
  border-color: var(--perigo);
  color: var(--perigo-tinta);
}

/* O rótulo de texto só cabe em tela larga, e 1100px não é chute: com os dois
   rótulos a célula mede 224px, e num notebook de 1024px isso põe a tabela
   27px para fora do painel — o Painel inteiro ganha barra de rolagem lateral
   por causa de dois botões. Abaixo disso sobram os ícones, que continuam
   sendo alvo de toque inteiro; o nome de cada link está no `aria-label`, e
   não no texto que some, então esconder o rótulo não cega o leitor de tela. */
@media (max-width: 1100px) {
  .acoes-projeto .botao span { display: none; }
  .acoes-projeto .botao { padding: 6px var(--e2); }
}


/* ═══════════════════════════════════════════════════════════════════════
   TELA DE CONFIGURAÇÃO DO E-MAIL

   Era a tela com mais estilo escrito à mão do portal: 36 atributos `style=`
   num arquivo só. O padrão que mais se repetia era o rótulo de escolha
   (rádio ou caixa) com `cursor:pointer` — e "cursor de mão em tudo que se
   clica" é regra do sistema, não decisão de uma tela.
   ═══════════════════════════════════════════════════════════════════════ */

/* Rótulo que embrulha um rádio ou uma caixa. A área de clique é o rótulo
   inteiro, e não só o quadradinho de 16px: é a diferença entre acertar de
   primeira e errar duas vezes no celular. */
.escolha {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--tinta);
  padding: var(--e1) 0;
  border-radius: var(--r-min);
}
.escolha:hover { color: var(--tinta-acao); }
.escolha input { flex-shrink: 0; }
.escolha-solta { margin-top: var(--e4); }

.linha-escolhas { margin-bottom: var(--e1); }

/* A coluna de ajuda fica fixa em 340px: é texto de apoio, e texto de apoio
   largo demais compete com o formulário que está sendo preenchido. */
.area-email { grid-template-columns: 1fr 340px; }

.lista-simples { margin: var(--e2) 0 0; padding-left: 18px; }
.lista-arejada { line-height: 1.9; margin: 0; }

.titulo-ajuda { margin: 0 0 var(--e2); font-size: 15px; }

.dica-bloco  { margin-bottom: var(--e4); }
.dica-ajuda  { margin: 0 0 var(--e2); }
.sem-folga   { margin: 0; }
.com-folga-topo { margin-top: var(--e3); }
.aviso-bloco { margin-bottom: var(--e3); }

@media (max-width: 900px) {
  /* Abaixo disto a coluna de ajuda vai para debaixo do formulário, em vez de
     espremer os dois lados. */
  .area-email { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   O QUE A AUDITORIA DE TELA ENCONTROU

   Depois do redesign, um script percorreu 10 telas em 4 larguras (375, 768,
   1024 e 1440) medindo contraste, transbordo horizontal e alvo de toque —
   2.630 elementos. O que segue são as correções do que ele achou. Três dos
   quatro problemas eram antigos: só apareceram porque desta vez a medição
   incluiu larguras intermediárias e um mês vazio aberto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. O cabeçalho da ISG transbordava entre 781px e ~1150px ──────────
   Com oito itens de menu, mais o nome da pessoa e o botão Sair, a faixa
   passava de 1024px — e a página inteira ganhava rolagem horizontal. A
   gaveta só entra em 780px, então essa faixa de larguras (um notebook de
   1024, uma janela pela metade num monitor grande) ficava quebrada.

   Duas travas: a faixa nunca deixa nada escapar, e o menu encolhe rolando
   por dentro em vez de empurrar o resto para fora. */
.topo { overflow: hidden; }

/* ── E o preço que este `overflow: hidden` cobrava no celular ──────────
   Ele resolvia a faixa de 781px para cima e QUEBRAVA tudo abaixo de 780.

   A gaveta do menu é um filho `position: absolute` do `.topo`. Um pai com
   overflow escondido recorta filho posicionado dentro dele, e o `.topo` tem
   56 px de altura: a gaveta abria com 230×570 px, inteira fora da área
   visível do pai, e era descartada no desenho.

   O sintoma não parecia recorte nenhum. O `<details>` abria de verdade — o
   ícone até virava um ✕, provando que o estado mudou —, mas nada aparecia.
   Quem usa lê isso como "o botão não faz nada", e quem procura o defeito vai
   olhar o JavaScript, que nesse menu nem existe: ele é um `<details>` nativo.

   A trava de cima continua onde precisa. Abaixo de 780px ela não tem nada a
   conter — `nav.abas-topo` está `display: none` justamente aqui, que é o
   motivo de a gaveta existir — então o recorte só fazia estrago. */
@media (max-width: 780px) {
  .topo { overflow: visible; }
}

.topo nav.abas-topo {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;              /* a barra de rolagem sobre o grafite
                                         seria mais feia do que útil */
}
.topo nav.abas-topo::-webkit-scrollbar { display: none; }

/* Abaixo de 1150px o nome de quem está logado sai da frente: é a informação
   menos necessária da faixa — a pessoa sabe quem ela é — e é o que sobra de
   espaço para o menu, que é para onde ela precisa ir. */
@media (max-width: 1150px) {
  .topo .quem { display: none; }
}

/* ── 2. A tira de meses não rolava; empurrava a página ─────────────────
   Em tela estreita os doze meses viram uma tira horizontal com
   `overflow-x: auto`. Só que o item de grade que a contém nasce com
   `min-width: auto`, e um item de grade com min-width automático se recusa
   a ficar menor que o conteúdo. Resultado: a tira media 1025px dentro de
   uma tela de 375, e quem rolava para o lado era a página.

   `min-width: 0` é o que devolve ao contêiner o direito de encolher — e só
   então o `overflow-x` do filho passa a valer. Vale para as duas telas de
   duas colunas, pelo mesmo motivo. */
.area-trabalho > *, .entrada > * { min-width: 0; }
.barra-meses .lista-meses { min-width: 0; }

/* ── 3. Alvo de toque do gatilho de dobra ──────────────────────────────
   "Responder", "Analisar a resposta", "Dar o retorno": o rótulo tinha 28px
   de altura. Abaixo de 640px tudo que se toca vai a 44px, que é o mínimo
   confortável com o polegar. */
@media (max-width: 640px) {
  .gatilho-acao { min-height: 44px; }
}

/* ── 4. Contraste ─────────────────────────────────────────────────────
   A tecla de atalho dentro de um botão colorido: fundo branco a 28% sobre o
   verde, com a letra também branca — 3,17:1. Virou o contrário, que é como
   uma tecla se parece de verdade: pastilha clara, letra grafite. Sobre o
   verde dá 11,9:1, e sobre o vermelho e o laranja também passa com folga. */
.botao kbd {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(40, 40, 40, .28);
  color: var(--isg-grafite);
}

/* O selo "Vence em N dias" dava 4,49:1 sobre a superfície levemente cinza
   dos painéis (#FAFAFA) — passava sobre branco puro e reprovava por dois
   centésimos ali. O amarelo já está no tom mais escuro que o manual oferece
   (#806F00, a sombra), então quem clareia é o véu: menos amarelo por baixo,
   mesma leitura, 5,1:1. */
:root { --respondido-veu: rgba(255, 222, 0, .16); }


/* ── 5. Últimos dois achados da medição ───────────────────────────────

   A linha de resumo do mês ("7 apontamentos · 2 para analisar · em aberto:
   R$ 25.324,25") tinha `white-space: nowrap`, que no desktop impede a frase
   de quebrar no meio de um número. Numa tela de 375px ela media 337px numa
   coluna de 344 e saía pela direita — a última fonte de rolagem horizontal
   do portal. Abaixo de 640px ela passa a quebrar e ocupa a linha inteira.

   E os doze meses da tira horizontal tinham 34px de altura: abaixo do
   mínimo de 44px para o polegar, e são justamente o controle mais tocado
   da tela no celular. */
@media (max-width: 640px) {
  .resumo-linha {
    white-space: normal;
    flex-basis: 100%;
    align-self: flex-start;
  }
  .barra-meses .lista-meses .mes-item { min-height: 44px; }
  /* Eram 40px: ainda abaixo do mínimo ("O ano inteiro" e as setas do ano,
     medidos a 375px em 07/10/2026). */
  .mes-item { min-height: 44px; }
  .seletor-ano a { width: 44px; height: 44px; }
}

/* ── 6. Alvos de toque abaixo de 44px (medidos em 07/10/2026) ──────────
   Medição a 375px no financeiro do proponente (cartões abertos), no
   movimento mensal (um mês aberto) e no chat de dúvidas. Rótulo de campo
   não entra na conta: quem recebe o toque é o campo, que já tem 44px.
   O que estava abaixo, e quanto media:

   - a área de soltar das caixas do movimento: 38px;
   - o logo (link para o início): 30px; a gaveta: 38×38;
   - as abas de projeto: 38px;
   - o cartão de anexo: 34px; o × que tira o anexo da resposta: 22×22;
   - o resumo da conversa recolhida: 36px;
   - os botões do cabeçalho do chat: 28×28; o clipe de anexar: 38×38;
   - a caixa de texto do chat: 42px — a regra `.chat-form textarea` é de
     classe e vencia a regra de tipo dos 44px (a mesma armadilha do
     `.select-mini`).

   E o que o `qa` mediu depois, no painel e na tela do projeto da ISG:

   - Editar e Excluir de cada linha do painel: 26×26, a 2px um do outro.
     Errar o toque no lápis abria a exclusão. No celular os dois vão a
     44×44 e se afastam 16px (o dobro do mínimo de 8): a distância é a
     proteção, e não um menu a mais — Excluir continua à vista, só longe;
   - o nome do projeto nessa mesma linha: link inline quebrado em duas
     linhas de ~19px. Vira bloco de 44px, e os dois ícones descem para a
     linha de baixo, onde há espaço para eles se afastarem;
   - o nome do instituto no cabeçalho do grupo: 27px;
   - o "Interno" do cartão do apontamento: 76×23. Só o de rótulo; o
     `.compacto` flutua sobre miniatura e na linha do movimento, e lá um
     botão de 44 cobriria o que ele marca.

   Tudo só abaixo de 640px: no desktop o ponteiro é fino, e a densidade
   da tela vale mais que a folga. */
@media (max-width: 640px) {
  .area-solta.compacta { min-height: 44px; }
  .topo .marca { min-height: 44px; }
  .menu-mobile > summary { width: 44px; height: 44px; }
  .botao-tema { min-width: 44px; justify-content: center; }
  .aba { display: inline-flex; align-items: center; min-height: 44px; }
  .anexo { min-height: 44px; }
  .dobra-conversa > summary { min-height: 44px; }
  .chat-fechar, .chat-trocar, .chat-expandir { min-width: 44px; min-height: 44px; }
  .chat-anexar { width: 44px; min-height: 44px; }
  .chat-form textarea { min-height: 44px; }

  .nome-linha-projeto {
    display: flex; align-items: center; min-height: 44px;
  }
  .acoes-linha-projeto { display: flex; gap: var(--e4); margin-left: 0; }
  .icone-linha-projeto { width: 44px; height: 44px; }
  .cabeca-instituto a { display: inline-flex; align-items: center; min-height: 44px; }
  .gatilho-interno:not(.compacto) { min-height: 44px; padding-inline: var(--e3); }

  /* O × continua com 22px de desenho: ele fica SOBRE a peça, e um círculo
     de 44 cobriria metade de uma miniatura (ver a regra dele em ANEXOS).
     Cresce só a área que recebe o toque, transparente, centrada no
     desenho. Se ela pegar um pedaço do nome do arquivo, o pior que
     acontece é a pergunta de confirmação (`data-confirmar`), e não a
     remoção. */
  .tirar-anexo::after {
    content: ""; position: absolute; inset: -11px;
  }
}

/* ── Zona de risco ────────────────────────────────────────────────
   Apagar todos os apontamentos de um projeto. Recolhida por padrão e
   discreta enquanto fechada: a borda vermelha só aparece depois de aberta,
   porque um bloco vermelho permanente no fim de toda tela de projeto vira
   ruído — e ruído que se aprende a ignorar é exatamente o que não se quer
   num botão destrutivo. */
.zona-risco {
  margin: var(--e6) 0 var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  background: var(--superficie);
}
.zona-risco > summary {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  cursor: pointer;
  color: var(--tinta-fraca);
  font-size: var(--t-peq);
  font-weight: 600;
  list-style: none;
  border-radius: var(--r-gr);
}
.zona-risco > summary::-webkit-details-marker { display: none; }
.zona-risco > summary:hover { color: var(--perigo-tinta); }
.zona-risco[open] {
  border-color: var(--perigo);
  background: var(--perigo-veu);
}
.zona-risco[open] > summary {
  color: var(--perigo-tinta);
  border-bottom: 1px solid var(--perigo);
  border-radius: var(--r-gr) var(--r-gr) 0 0;
}
/* `overflow-wrap: anywhere`: o miolo repete o nome do projeto ou do
   proponente no parágrafo, no "Digite <nome> para liberar" e no botão.
   Nome sem espaço que não cabe na linha quebra no meio em vez de empurrar
   a página — medido a 375px com um rótulo de uma palavra só, o "Digite"
   levava a página a 614px. Palavra que cabe não é tocada. */
.miolo-risco { padding: var(--e4); overflow-wrap: anywhere; }
.miolo-risco p { margin: 0 0 var(--e2); }

.form-risco { margin-top: var(--e3); }
.form-risco label { display: block; margin-bottom: var(--e1); font-size: var(--t-peq); }
.linha-risco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  margin-bottom: var(--e1);
}
.linha-risco input[type="text"] { flex: 1 1 220px; min-width: 0; }
/* O botão da zona de risco é o único do portal cujo rótulo carrega um dado
   de tamanho livre: "Excluir o projeto “INSTITUTO.SIGLA”". O nome ali é a
   confirmação visual de QUAL projeto se apaga, então reticências estão
   fora — e com o `nowrap` geral do `.botao` ele media 351px numa linha de
   310 a 375px de tela, e empurrava a página 8px para o lado (07/10/2026).

   Aqui ele quebra, em qualquer largura: a quebra só acontece quando o
   rótulo não cabe, então no desktop nada muda. `overflow-wrap: anywhere`
   é para o nome sem espaço nenhum (um rótulo comprido de uma palavra só),
   que sem isso continuaria vazando mesmo com a quebra liberada. */
.linha-risco .botao {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: left;
}
/* Desabilitado precisa PARECER desabilitado: sem isto o vermelho continua
   convidando o clique que não vai acontecer. */
.linha-risco button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Fila de dúvidas: pessoa → projeto → pergunta ─────────────────
   Dois níveis porque são duas perguntas de quem revisa: "quem está
   esperando?" e "sobre qual projeto?". A ficha de projeto no cabeçalho da
   pessoa responde as duas de relance. */
.pessoa-duvidas {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  margin-bottom: var(--e4);
  overflow: hidden;
}
/* Quem não tem nada esperando recua para o fundo em vez de sumir: o
   histórico ainda serve, mas não pode competir com quem espera. */
.pessoa-duvidas.sem-pendencia { opacity: .72; }
.pessoa-duvidas.sem-pendencia:hover { opacity: 1; }

.cabeca-pessoa {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--isg-grafite);
  color: var(--tinta-clara);
}
.cabeca-pessoa .espaco { flex: 1; }
.nome-pessoa {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h4); font-weight: 700;
  color: #fff;
}

.fichas-projeto { display: flex; gap: var(--e2); flex-wrap: wrap; }
.ficha-projeto {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 2px var(--e2);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  font-size: var(--t-legenda);
  color: var(--tinta-clara);
  text-decoration: none;
}
.ficha-projeto:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
/* Só a ficha com pendência ganha cor. Se todas ganhassem, nenhuma
   chamaria atenção — que é o único motivo de existir a cor aqui. */
.ficha-projeto.com-pendencia {
  border-color: var(--isg-laranja);
  color: #fff;
  font-weight: 600;
}
/* Pílula verde sólida, e não texto verde solto: o cabeçalho da pessoa é
   grafite, e o verde do sistema sobre ele dá 2.75:1 — reprova no AA. O véu
   (--sucesso-veu) não resolve, porque é translúcido e sobre fundo escuro
   continua escuro. O par que passa é o mesmo do .botao.verde: fundo
   --sucesso, tinta branca. */
.selo-ok {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 2px var(--e2); border-radius: var(--r-pill);
  font-size: var(--t-legenda); font-weight: 600;
  background: var(--sucesso); color: #fff;
}

.bloco-projeto { border-top: 1px solid var(--borda); }
.cabeca-projeto {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) var(--e4);
  background: var(--superficie-2);
}
.cabeca-projeto .nome-projeto {
  font-weight: 700; font-size: var(--t-peq);
  letter-spacing: .02em; text-transform: uppercase;
}
.cabeca-projeto .contagens { margin-left: auto; }
.quantos.alerta { background: var(--pendente-veu); color: var(--pendente-tinta); }

/* O sinal de estado. Um ponto, e não um texto, porque numa lista de vinte o
   que se procura é a cor — o rótulo escrito vem no selo, à direita. */
.ponto-status {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.ponto-status.pendente   { background: var(--isg-laranja); }
.ponto-status.respondida { background: var(--sucesso); }
.ponto-status.encerrada  { background: var(--tinta-clara-2); }

.duvida-item .quando {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.selo-duvida {
  padding: 1px var(--e2); border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.selo-duvida.respondida { background: var(--sucesso-veu); color: var(--sucesso-tinta); }
.selo-duvida.encerrada  { background: var(--cinza-claro);  color: var(--tinta-fraca); }

/* O assunto da dúvida. Cor discreta de propósito: ele orienta a leitura da
   fila, mas não é um estado — quem grita na linha continua sendo a espera. */
.selo-duvida.assunto-financeira  { background: var(--cinza-claro); color: var(--tinta-2); }
.selo-duvida.assunto-qualitativa { background: var(--acao-veu);    color: var(--tinta-acao); }
/* Escrita e parada no portão da revisora: o proponente ainda não vê nada. */
/* Letra em --tinta-2, e não na sombra do amarelo (09/10/2026): o
   #806F00 sobre o véu amarelo, numa linha de fundo já cinza, dava 4,37:1 —
   e o amarelo do manual não tem tom mais escuro que a sombra. Quem carrega
   o "estado" é o véu; a letra só precisa ser lida. */
.selo-duvida.aguardando {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--respondido-veu); color: var(--tinta-2);
}

.resolvidas-projeto { border-top: 1px solid var(--borda); }
.resolvidas-projeto > summary {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4);
  cursor: pointer; list-style: none;
  font-size: var(--t-legenda); color: var(--tinta-fraca);
}
.resolvidas-projeto > summary::-webkit-details-marker,
.resolvidas-projeto > summary::marker { display: none; content: ""; }
.resolvidas-projeto > summary:hover { color: var(--tinta); background: var(--superficie-2); }
.resolvidas-projeto[open] > summary { border-bottom: 1px solid var(--borda); }

.resposta-dada {
  border-left: 3px solid var(--sucesso);
  padding-left: var(--e3);
  margin: 0 0 var(--e2);
}
.assinatura-revisao { margin: 0; }

@media (max-width: 640px) {
  .cabeca-pessoa { padding: var(--e3); }
  .cabeca-projeto { padding: var(--e2) var(--e3); }
  .cabeca-projeto .contagens { margin-left: 0; flex-basis: 100%; }
  .resolvidas-projeto > summary { padding: var(--e2) var(--e3); }
}

/* ── Barra lateral de conversas (/admin/duvidas) ──────────────────
   Reusa .barra-meses da tela de projeto: mesma coluna, mesmo item, mesmo
   badge. O que muda é o agrupamento — pessoa no lugar do ano, projeto no
   lugar do mês. */
.barra-conversas { padding-top: var(--e2); }
.grupo-conversa + .grupo-conversa {
  border-top: 1px solid var(--borda);
  margin-top: var(--e2); padding-top: var(--e2);
}
.rotulo-pessoa {
  display: flex; align-items: center; gap: var(--e1);
  padding: var(--e1) var(--e2);
  font-size: var(--t-legenda); font-weight: 700;
  color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .03em;
}
.rotulo-pessoa .nome {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O projeto é o item clicável; recuado, para a hierarquia pessoa → projeto
   ser visível sem precisar de linha nenhuma. */
.item-conversa { padding-left: var(--e4); }

.titulo-conversa {
  margin: 0; font-size: var(--t-h3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resumo-conversa {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-left: auto;
}

/* ── Caixa "isso resolveu?" no chat do proponente ─────────────────
   Responder não é o mesmo que sanar. Ela fecha o ciclo do lado dele. */
.caixa-resolveu {
  margin: var(--e3) 0 var(--e1);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--superficie-2);
}
.pergunta-resolveu {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e2); font-size: var(--t-peq);
}
.botoes-resolveu { display: flex; gap: var(--e2); flex-wrap: wrap; }
.botoes-resolveu form { margin: 0; }
.marca-confirmada { color: var(--sucesso-tinta); }
.marca-confirmada .i { vertical-align: -2px; }

/* Liberação de entrada sem código, na tabela de Usuários. Verde porque é um
   estado concedido e temporário, não um alerta — o alerta seria deixá-la
   ligada, e para isso existe o prazo no próprio rótulo. */
.selo-dispensa {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 2px var(--e2); border-radius: var(--r-pill);
  font-size: var(--t-legenda); font-weight: 600; white-space: nowrap;
  background: var(--sucesso-veu); color: var(--sucesso-tinta);
}
.linha-sigilo { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }

/* Ponto no botão do chat quando a ISG respondeu e o proponente ainda não deu
   por resolvido. Um ponto, e não um número: aqui a pergunta é "tem resposta
   nova?", que é sim ou não — a contagem exata está dentro da conversa. */
/* O ::after é absoluto, então o botão precisa ser o bloco de referência —
   sem isto o ponto se ancora no ancestral posicionado mais próximo e vai
   parar fora do botão. */
.chat-fab.com-resposta { position: relative; }
.chat-fab.com-resposta::after {
  content: "";
  position: absolute; top: 6px; right: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--isg-amarelo);
  border: 2px solid var(--isg-laranja);
}

/* ── Qualitativa ──────────────────────────────────────────────────
   O código do item vira etiqueta própria, e não texto colado no nome: numa
   lista de vinte e três itens é por ele que o olho procura, e é ele que se
   fala ao telefone ("manda a foto do 6.46"). */
.codigo-item {
  display: inline-flex; align-items: center;
  padding: 1px var(--e2); border-radius: var(--r-min);
  background: var(--cinza-claro); color: var(--tinta-2);
  font-size: var(--t-legenda); font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.resumo-lista {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e3);
  font-size: var(--t-peq); color: var(--tinta-fraca);
}

/* Conferência da lista colada */
.tabela-rolavel { overflow-x: auto; margin-bottom: var(--e4); }
.tabela-conferir { width: 100%; min-width: 720px; }
.tabela-conferir input[type="text"], .tabela-conferir select { width: 100%; }
.tabela-conferir .col-marcar { width: 40px; }
.tabela-conferir .col-codigo { width: 90px; }
.tabela-conferir .col-tipo   { width: 210px; }
.entrada-mini { font-variant-numeric: tabular-nums; }

.painel-ignoradas > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq); font-weight: 600; color: var(--tinta-fraca);
}
.painel-ignoradas > summary::-webkit-details-marker,
.painel-ignoradas > summary::marker { display: none; content: ""; }
.lista-ignoradas {
  margin: var(--e2) 0 0; padding-left: var(--e4);
  font-size: var(--t-peq); color: var(--tinta-fraca);
}
.lista-ignoradas li { margin-bottom: 2px; }

.acoes-mes { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Larguras dos campos do modal qualitativo. Mesmo mecanismo do modal
   financeiro (.c-data / .c-valor / .c-credor): a .linha-campos é flex, e é
   cada campo que declara quanto ocupa. Sem isto eles nascem com a largura do
   conteúdo e sobra um vão à direita — o "desproporcional" que se via. */
.linha-campos .c-codigo   { flex: 0 0 110px; }
.linha-campos .c-item     { flex: 1 1 260px; }
.linha-campos .c-etapa    { flex: 0 0 150px; }
.linha-campos .c-tipo     { flex: 1 1 240px; }
.linha-campos .c-urgencia { flex: 0 0 130px; }
.linha-campos .c-obs      { flex: 1 1 260px; }
.linha-campos .c-prazo    { flex: 0 0 170px; }
/* Um <select> de 660px para escolher entre "Etapa 1" e "Etapa 6" anuncia
   uma escolha muito maior do que ela é. */
.c-etapa-lista { max-width: 220px; }

/* ── As pastas de foto da qualitativa ─────────────────────────────
   Uma pasta por item do plano, agrupada pela categoria da planilha. Com 79
   itens em quatro categorias, o que decide a leitura é a cor da situação: o
   olho procura onde ainda falta, não o que já está certo. */
.grupo-pastas {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  margin-bottom: var(--e3);
  overflow: hidden;
}
.grupo-pastas > summary {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  cursor: pointer; list-style: none;
  background: var(--superficie-2);
}
.grupo-pastas > summary::-webkit-details-marker,
.grupo-pastas > summary::marker { display: none; content: ""; }
.grupo-pastas > summary:hover { background: var(--cinza-claro); }
.grupo-pastas[open] > summary { border-bottom: 1px solid var(--borda); }
.grupo-pastas .espaco { flex: 1; }

.cod-categoria {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 1px var(--e1);
  border-radius: var(--r-min);
  background: var(--isg-grafite); color: #fff;
  font-size: var(--t-legenda); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nome-categoria {
  font-family: var(--fonte-titulo);
  font-size: var(--t-peq); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}

.lista-pastas { display: flex; flex-direction: column; }
.pasta {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda);
  border-left: 3px solid transparent;
}
.pasta:first-child { border-top: none; }
/* A faixa à esquerda é a situação. Pasta vazia fica sem cor de propósito:
   numa lista de 79 a maioria começa vazia, e colorir todas não distinguiria
   nada — o que precisa saltar é o que a ISG apontou. */
.pasta.sit-apontada  { border-left-color: var(--isg-laranja); background: var(--pendente-veu); }
.pasta.sit-analise   { border-left-color: var(--respondido); }
.pasta.sit-conferida { border-left-color: var(--sucesso); }
.pasta.sit-enviada   { border-left-color: var(--borda-forte); }

.cabeca-pasta {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.cabeca-pasta .espaco { flex: 1; }
.nome-item { font-weight: 600; min-width: 0; }
.conta-fotos {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.selo-enviada {
  padding: 1px var(--e2); border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600;
  background: var(--cinza-claro); color: var(--tinta-fraca);
}

/* O pedido da ISG vem acima das miniaturas: é a instrução do que fazer, e
   enterrá-la embaixo das fotos obrigaria a rolar para descobrir. */
.pedido-isg {
  display: flex; gap: var(--e2); align-items: flex-start;
  margin: 0 0 var(--e2); padding: var(--e2) var(--e3);
  border-left: 3px solid var(--isg-laranja);
  background: var(--superficie);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  font-size: var(--t-peq);
}
.pedido-isg .i { flex-shrink: 0; color: var(--pendente-tinta); margin-top: 2px; }

.tira-fotos {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.tira-fotos .foto {
  display: block; width: 84px; height: 84px;
  border: 1px solid var(--borda); border-radius: var(--r-peq);
  overflow: hidden; background: var(--cinza-claro);
}
.tira-fotos .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira-fotos .foto:hover { border-color: var(--isg-laranja); }
.foto-com-acao { position: relative; }
.foto-com-acao form { position: absolute; top: 3px; right: 3px; margin: 0; }
.tirar-foto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  cursor: pointer;
}
.tirar-foto:hover { background: var(--vermelho-escuro); }

/* A caixa de marcar, para tirar várias fotos de uma vez.

   Fica no canto ESQUERDO, oposto ao ×: os dois são destrutivos e ficam sobre
   uma miniatura de 100px — vizinhos, o dedo no celular erra qual dos dois
   pegou, e errar aqui é apagar sem passar pela seleção.

   Nasce quase transparente e aparece no hover da peça, como o ×. Marcada,
   fica cheia e opaca: o estado precisa ser legível mesmo com a barra rolada
   para fora da tela. */
.marca-foto {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: .45;
  transition: opacity var(--transicao);
}
.foto-com-acao:hover .marca-foto,
.marca-foto:focus-within,
.foto-com-acao.marcada .marca-foto { opacity: 1; }

.marca-foto input { position: absolute; opacity: 0; width: 100%; height: 100%;
                    margin: 0; cursor: pointer; }
.marca-foto span {
  width: 18px; height: 18px;
  border: 2px solid #fff;
  border-radius: var(--r-min);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  transition: background var(--transicao), border-color var(--transicao);
}
.marca-foto input:checked + span {
  background: var(--isg-laranja);
  border-color: var(--isg-laranja);
}
/* O visto, desenhado em CSS: um ✓ de texto herdaria a fonte e desalinharia
   dentro de 18px. */
.marca-foto input:checked + span::after {
  content: ""; display: block;
  width: 4px; height: 8px;
  margin: 1px auto 0;
  border: solid var(--tinta-sobre-acao);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.marca-foto input:focus-visible + span { outline: 2px solid var(--anel-foco);
                                         outline-offset: 2px; }

/* A foto marcada recua um pouco e ganha moldura laranja — a tira inteira
   passa a mostrar o que sai no próximo clique. */
.foto-com-acao.marcada .foto img {
  outline: 3px solid var(--isg-laranja);
  outline-offset: -3px;
  opacity: .78;
}

/* A barra da seleção. Fixa no rodapé e só quando há algo marcado, como a
   da caixa de entrada: barra fixa com botão desligado é peso morto ocupando
   a tela. */
.barra-selecao-fotos {
  position: fixed;
  left: 50%; bottom: var(--e5);
  transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--isg-grafite);
  color: var(--tinta-clara);
  border-radius: var(--r-gr);
  box-shadow: var(--sombra-3);
}
/* E some quando não há nada marcado. Sem esta linha o `display: flex` acima
   vence o `[hidden] { display: none }` do navegador — regra de tipo, de
   especificidade menor —, e a barra ficava PERMANENTE na tela dizendo
   "1 foto marcada" com zero fotos marcadas: o "Limpar" não tinha o que
   limpar e o "Remover" era barrado pela própria trava. É a mesma pegadinha
   já anotada no aviso dispensável, lá embaixo, e a regra vale para toda
   classe que define `display`. */
.barra-selecao-fotos[hidden] { display: none; }

.barra-selecao-fotos .conta-marcadas {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: var(--t-peq);
  white-space: nowrap;
}
.barra-selecao-fotos .botao.fantasma {
  color: var(--tinta-clara-2); border-color: var(--grafite-3);
}
.barra-selecao-fotos .botao.fantasma:hover {
  color: var(--tinta-clara); background: var(--grafite-2);
}

@media (max-width: 640px) {
  .barra-selecao-fotos {
    left: var(--e3); right: var(--e3); bottom: var(--e3);
    transform: none;
    justify-content: space-between;
  }
}

.form-fotos, .acoes-pasta {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
}
.form-fotos input[type="file"] { flex: 1 1 220px; min-width: 0; font-size: var(--t-legenda); }
.form-apontar {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  flex: 1 1 340px; margin: 0;
}
.entrada-apontar { flex: 1 1 180px; min-width: 0; }

.lista-catalogo { display: flex; flex-direction: column; }
.linha-catalogo {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--t-peq);
}
.linha-catalogo:first-child { border-top: none; }
.linha-catalogo.desativado { opacity: .5; text-decoration: line-through; }

.resumo .numero .de { font-size: .6em; color: var(--tinta-fraca); font-weight: 400; }

@media (max-width: 640px) {
  .grupo-pastas > summary, .pasta, .linha-catalogo { padding-left: var(--e3); padding-right: var(--e3); }
  .tira-fotos .foto { width: 72px; height: 72px; }
}

/* ── O alvo de foto: miniatura, clique e arrastar no mesmo lugar ───
   O <input type="file"> nativo não se estiliza, e era ele que desenhava o
   "Escolher Arquivos / Nenhum arquivo escolhido" tomando a linha inteira em
   cada uma das 79 pastas. Um <label> em volta de um input escondido fica do
   tamanho de uma miniatura e responde a clique E a arrastar. */
.form-fotos { display: contents; }
.alvo-foto {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  width: 84px; height: 84px;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--r-peq);
  background: var(--superficie-2);
  color: var(--tinta-fraca);
  font-size: 10.5px; font-weight: 600; line-height: 1.15;
  text-align: center; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao),
              color var(--transicao);
}
.alvo-foto:hover {
  border-color: var(--isg-laranja);
  background: var(--pendente-veu);
  color: var(--pendente-tinta);
}
.alvo-foto input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
/* Foco visível no teclado: o input está escondido, então quem recebe o anel
   é o label — sem isto, navegar por Tab passa por 79 alvos invisíveis. */
.alvo-foto:focus-within {
  border-color: var(--isg-laranja);
  box-shadow: 0 0 0 3px var(--pendente-veu);
}
.alvo-foto.arrastando {
  border-color: var(--isg-laranja); border-style: solid;
  background: var(--pendente-veu); color: var(--pendente-tinta);
}
.alvo-foto .i { flex-shrink: 0; }

/* A pasta inteira é alvo de arrastar: 84px é preciso demais para quem está
   com cinco fotos selecionadas e a mão no mouse. */
.pasta.arrastando-pasta {
  background: var(--pendente-veu);
  outline: 2px dashed var(--isg-laranja);
  outline-offset: -4px;
}
/* Enquanto sobe: foto de câmera tem megabytes, e tela parada é
   indistinguível de tela travada. */
.pasta.subindo { opacity: .6; pointer-events: none; }
.pasta.subindo .alvo-foto { border-style: solid; border-color: var(--isg-laranja); }

.dica-arrastar { margin: var(--e1) 0 0; font-size: var(--t-legenda); }
/* Uma dica por pasta em 79 pastas é ruído; só a primeira de cada categoria
   diz como faz — depois disso a pessoa já sabe. */
.pasta ~ .pasta .dica-arrastar { display: none; }

.tira-fotos { align-items: flex-start; }
.selo.aceito .i { vertical-align: -1px; margin-right: 2px; }
/* O atributo hidden do HTML perde para qualquer regra de autor que declare
   display — e .botao declara inline-flex. Sem este !important o botão
   "Enviar" continuava na tela depois de o JavaScript o esconder, e a pasta
   ficava com dois caminhos para a mesma coisa. */
.botao[hidden] { display: none !important; }

/* ── Etapas, subtítulo e a trava de entrega ───────────────────────
   A especificação (o que vinha entre parênteses na planilha) fica sob o
   nome, e menor: o nome identifica o item na conversa, a medida é o que se
   confere contra o contrato. Juntos numa linha, o nome ficava longo demais
   para caber na pasta. */
.sub-item {
  display: block;
  font-size: var(--t-legenda); font-weight: 400;
  color: var(--tinta-fraca);
}
.nome-item { line-height: 1.25; }

.selo-travado {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px var(--e2); border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: var(--cinza-claro); color: var(--tinta-2);
}
/* Pasta travada: some o tracejado do alvo de upload, e o cinza diz que ali
   não se mexe mais. Sem sinal visual, o proponente clicaria no vazio. */
.pasta.travada { background: var(--superficie-2); }

.linha-destrancar { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.linha-destrancar > div { flex: 1; min-width: 200px; }
.linha-destrancar form { margin: 0; }

/* Gerenciar etapas */
.form-etapa .linha-etapa { display: flex; gap: var(--e2); flex-wrap: wrap; }
.form-etapa .linha-etapa input[type="text"] { flex: 1 1 240px; min-width: 0; }

.lista-etapas {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  overflow: hidden;
  margin-bottom: var(--e3);
}
.linha-etapa-existente {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda);
}
.linha-etapa-existente:first-child { border-top: none; }
.form-renomear {
  display: flex; gap: var(--e2); align-items: center;
  flex: 1 1 300px; margin: 0;
}
.form-renomear input[type="text"] { flex: 1 1 160px; min-width: 0; }
.uso-etapa {
  display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: var(--t-legenda); color: var(--tinta-fraca);
}
.nao-exclui { display: inline-flex; align-items: center; gap: 3px; }

/* Editar item direto na linha do catálogo */
.linha-catalogo { gap: var(--e2); }
.linha-catalogo .ed-codigo { flex: 0 0 84px; }
.linha-catalogo .ed-nome   { flex: 2 1 200px; min-width: 0; }
.linha-catalogo .ed-sub    { flex: 1 1 140px; min-width: 0; }

@media (max-width: 640px) {
  .linha-etapa-existente { padding: var(--e3); }
  .linha-catalogo { flex-wrap: wrap; }
  .linha-catalogo .ed-codigo, .linha-catalogo .ed-nome,
  .linha-catalogo .ed-sub { flex: 1 1 100%; }
}
/* Etapa em avaliação: o aviso ocupa a largura e explica. Sem ele, a tela só
   perde os botões — e tela que perde botão sem dizer por que faz a pessoa
   procurar o que quebrou. */
.aviso-avaliacao { align-items: flex-start; }
.aviso-avaliacao .dica { display: block; margin-top: var(--e1); }

/* Recortes da conferência. Abas de filtro, não menu suspenso: com quatro
   opções e a contagem em cada uma, o que interessa é ver de relance onde
   ainda há trabalho — uma lista suspensa esconderia justamente isso. */
.recortes-pasta {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.recorte {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-pill);
  background: var(--superficie);
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-2); text-decoration: none;
}
.recorte:hover { border-color: var(--isg-laranja); color: var(--tinta); text-decoration: none; }
.recorte.ativo {
  background: var(--isg-grafite); border-color: var(--isg-grafite);
  color: #fff;
}
.recorte .quantos { background: var(--cinza-claro); color: var(--tinta-fraca); }
.recorte.ativo .quantos { background: rgba(255,255,255,.18); color: #fff; }
/* Dois escopos na zona de risco: empilhados e com a consequência escrita
   embaixo do rótulo. Lado a lado, dois botões vermelhos quase iguais são
   convite para clicar no errado. */
.escopos-risco {
  display: flex; flex-direction: column; gap: var(--e2);
  align-items: flex-start;
  margin: var(--e3) 0 var(--e2);
}
.escopos-risco .botao {
  flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left;
}
.sub-botao {
  font-size: var(--t-legenda); font-weight: 400; opacity: .85;
}

/* ── "Não executada" ─────────────────────────────────────────────
   Cinza, e sem faixa de cor à esquerda: o item saiu da fila dos dois lados,
   e cor aqui competiria com o que ainda pede alguma coisa. */
.pasta.sit-nao_executada {
  background: var(--superficie-2);
  border-left-color: transparent;
}
.pasta.sit-nao_executada .nome-item,
.pasta.sit-nao_executada .codigo-item { opacity: .6; }
.selo-nao-exec {
  padding: 1px var(--e2); border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: var(--cinza-claro); color: var(--tinta-fraca);
}
.dica-nao-exec { display: flex; gap: var(--e1); align-items: flex-start; }
.dica-nao-exec .i { flex-shrink: 0; margin-top: 2px; }

/* O botão fica do tamanho do alvo de foto, ao lado dele: é a outra resposta
   para a mesma pergunta, e escondê-la num menu esconderia metade dela. */
.form-nao-exec { margin: 0; }
.botao-nao-exec {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  width: 84px; height: 84px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-peq);
  background: transparent; color: var(--tinta-fraca);
  font-size: 10.5px; font-weight: 600; line-height: 1.15;
  text-align: center; cursor: pointer;
}
.botao-nao-exec:hover {
  border-color: var(--tinta-fraca); border-style: solid;
  background: var(--cinza-claro); color: var(--tinta);
}
.botao-nao-exec.desfazer {
  border-color: var(--isg-laranja); color: var(--pendente-tinta);
}
.botao-nao-exec .i { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   CAIXA DE ENTRADA DA QUALITATIVA

   Uma tabela por projeto, uma linha por etapa. Não há decisão aqui — a
   tela despacha para as pastas, que é onde se vê a foto. Por isso a
   coluna de ação tem dois destinos e nenhum botão de aceitar.
   ═══════════════════════════════════════════════════════════════════════ */

.titulo-projeto-entrada {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e2);
}
.titulo-projeto-entrada a { text-decoration: none; color: inherit; }
.titulo-projeto-entrada a:hover { color: var(--tinta-acao); }

.celula-itens-entrada { max-width: 34ch; }
.item-entrada { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.col-acao { white-space: nowrap; text-align: right; }
.col-acao .link-seguir { display: block; margin-top: 4px; }


/* Criar conta da equipe: painel recolhido na tela de Usuários. Recolhido
   porque aquela tela abre para despachar quem está esperando — criar conta
   é o trabalho ocasional, e um formulário aberto empurraria a fila para
   baixo da dobra. */
.painel-criar-conta > summary {
  display: flex; align-items: center; gap: var(--e2);
  cursor: pointer; list-style: none;
}
.painel-criar-conta > summary::-webkit-details-marker,
.painel-criar-conta > summary::marker { display: none; content: ""; }
.painel-criar-conta > summary:hover { color: var(--tinta-acao); }
.painel-criar-conta[open] > summary {
  margin-bottom: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borda);
}
.form-nova-conta .linha-form { margin-bottom: var(--e2); }


/* ═══════════════════════════════════════════════════════════════════════
   A BARRA DOS BLOCOS

   Dois níveis na mesma coluna: o assunto (rótulo) e, dentro dele, as etapas.
   O rótulo NÃO é clicável de propósito — não existe "abrir o bloco", existe
   abrir uma etapa dele. Um título que parece link e recusa o clique ensina
   a desconfiar da tela.
   ═══════════════════════════════════════════════════════════════════════ */

.barra-blocos .grupo-bloco + .grupo-bloco { margin-top: var(--e3); }
.barra-blocos .rotulo-bloco {
  padding: var(--e2) var(--e3) 4px;
  font-size: var(--t-legenda); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-fraca);
}
.barra-blocos .mes-item { padding-left: var(--e4); }

/* O bloco sem catálogo: área de envio em cima, fotos embaixo. */
.painel-bloco-livre { padding: var(--e4); }
.painel-bloco-livre .form-bloco { margin-bottom: var(--e3); }
.painel-bloco-livre .vazio { padding: var(--e4) 0 var(--e2); }
.dica-bloco { margin: 0 0 var(--e3); }
.tira-bloco { flex-wrap: wrap; }


/* O EXEMPLO DA ISG, no topo do bloco de divulgação.

   Fundo levemente diferente e borda tracejada: é material de referência, não
   entrega. Sem essa distinção a faixa vira "mais uma tira de fotos", e o
   proponente conta as do exemplo como se já fossem dele. */
.painel-modelo {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie-2);
  border-style: dashed;
}
.cabeca-modelo {
  display: flex; align-items: baseline; gap: var(--e2);
  flex-wrap: wrap; margin-bottom: var(--e2);
}
.cabeca-modelo strong { display: inline-flex; align-items: center; gap: 6px; }
/* ── As regras das marcas oficiais ────────────────────────────────────
   O que o órgão exige da divulgação, no painel do exemplo. É texto para
   LER antes de produzir a peça, e não legenda de foto: por isso ganha o
   corpo normal, e não o tamanho de dica.

   Os marcadores são traços, e não bolinhas: o documento de origem lista
   assim, e quem confere a peça contra a tela está comparando linha a linha
   com aquele papel. */
.regras-marcas {
  list-style: none;
  margin: 0 0 var(--e3);
  padding: 0;
  font-size: var(--t-peq);
  line-height: var(--l-corpo);
  color: var(--tinta-2);
}
.regras-marcas li {
  position: relative;
  padding-left: var(--e4);
  margin-bottom: var(--e2);
}
.regras-marcas li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--tinta-fraca);
}
.regras-marcas li:last-child { margin-bottom: 0; }

/* A observação que fecha o painel. Em destaque porque não é mais uma regra
   entre as outras: é a que, descumprida, invalida a peça DEPOIS de pronta —
   e o custo de descobrir tarde é reimprimir o banner. */
.observacao-marcas {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: var(--e2) var(--e3);
  font-size: var(--t-peq);
  line-height: var(--l-corpo);
  color: var(--atencao-tinta);
  background: var(--atencao-veu);
  border-left: 3px solid var(--atencao);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
}
.observacao-marcas svg { flex-shrink: 0; margin-top: 2px; }

.tira-modelo { flex-wrap: wrap; margin-bottom: var(--e2); }
.form-modelo { display: flex; align-items: center; gap: var(--e2); }
.alvo-foto.pequeno { width: 84px; height: 56px; }


/* ═══════════════════════════════════════════════════════════════════════
   POPOUT DA FOTO

   A foto por cima da tela, e não numa aba nova: quem confere não perde a
   pasta em que estava, percorre as vizinhas com as setas e tem o botão de
   baixar a um clique. Sem JavaScript, o link continua abrindo o arquivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* O vão lateral de 84px é onde as setas moram. Ele existe no padding, e
   nao como espaco entre irmaos de flex, porque irma de flex a seta perdia:
   ver o comentario em .popout-seta. */
.popout-foto {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 84px var(--e5);
  background: rgba(20, 20, 20, .88);
}
.popout-foto[hidden] { display: none; }
body.com-popout { overflow: hidden; }

.popout-imagem {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-peq);
  background: var(--superficie);
}

.popout-barra {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3);
  color: var(--tinta-clara);
}
.popout-nome {
  flex: 1; min-width: 0;
  font-size: var(--t-legenda);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "2 de 6" — o que diz que existe para onde andar. Vem antes das setas na
   ordem de leitura porque é ele que dá o motivo de olhar para elas. */
.popout-conta {
  flex-shrink: 0;
  font-size: var(--t-legenda); font-variant-numeric: tabular-nums;
  padding: 2px var(--e2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  color: var(--tinta-clara);
}
.popout-conta[hidden] { display: none; }

.popout-acoes { display: flex; align-items: center; gap: var(--e2); }
.popout-fechar {
  border: 0; background: none; cursor: pointer;
  color: var(--tinta-clara); font-size: 28px; line-height: 1;
  padding: 0 var(--e2);
}
.popout-fechar:hover { color: var(--isg-laranja); }

/* ── As setas ─────────────────────────────────────────────────────────
   Já existiam, já andavam pelas fotos e já respondiam às setas do teclado —
   e foram reportadas como INEXISTENTES. Eram 12% de branco sem contorno,
   com um "‹" de fonte dentro, encostadas na borda da tela: no meio de um
   fundo escuro com uma foto clara no centro, o olho não achava nem a borda
   do botão nem o traço do glifo.

   Botão que se procura é botão que não existe. Agora tem corpo próprio
   (grafite sólido), contorno claro, sombra e a chevron de traço 2px do
   sprite — o mesmo peso de linha do resto do portal. */
/* Sobreposta e ancorada na borda — NAO um irmao de flex da imagem.
   Antes eram tres itens numa linha flex: [seta] [imagem] [seta]. A imagem
   tem max-width:100% e, sendo elemento substituido, nao encolhe abaixo do
   tamanho intrinseco: ela tomava a largura inteira e empurrava as duas
   setas para fora do viewport. Medido: numa janela de 900px a seta da
   esquerda ficava em x = -44 e a da direita terminava em 944 — as duas
   invisiveis, e so a partir de ~1050px de largura elas reapareciam. Como
   o zoom do navegador encolhe o viewport em pixels de CSS, dava
   exatamente o sintoma relatado: "dependendo do zoom a seta some".

   Ancorada na borda, a seta nao disputa largura com nada e esta sempre
   la, em qualquer zoom e em qualquer tamanho de janela. */
.popout-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 76px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--r);
  background: rgba(40, 40, 40, .82);
  box-shadow: var(--sombra-2);
  color: var(--tinta-clara);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              transform var(--transicao);
}
.popout-seta:hover {
  background: var(--isg-laranja);
  border-color: var(--isg-laranja);
  color: var(--isg-grafite);
}
.popout-seta.anterior { left: var(--e4); }
.popout-seta.proxima  { right: var(--e4); }
/* O translateY tem de ser repetido: transform nao acumula, e sem ele o
   clique jogaria a seta meia altura para baixo. */
.popout-seta:active { transform: translateY(-50%) scale(.94); }
.popout-seta:focus-visible {
  outline: 2px solid var(--anel-foco); outline-offset: 3px;
}
.popout-seta[hidden] { display: none; }

/* Numa tela estreita o vão lateral comeria a foto inteira: as setas descem
   para as quinas de baixo, onde o polegar já está. */
@media (max-width: 640px) {
  .popout-foto { padding: 56px var(--e2) 84px; }
  .popout-seta {
    top: auto; bottom: var(--e4); transform: none;
    width: 64px; height: 56px;
  }
  .popout-seta:active { transform: scale(.94); }
  .popout-seta.anterior { left: var(--e4); }
  .popout-seta.proxima { right: var(--e4); }
}


/* O exemplo é REFERÊNCIA, e referência não ocupa meia tela: miniatura como
   as outras fotos, e o clique abre — no popout, se for imagem; no
   visualizador do navegador, se for PDF. Já esteve aberto na página, e o
   que se via era a área de envio empurrada para baixo da dobra. */
.modelo-documento {
  display: inline-flex; align-items: center; gap: var(--e2);
  max-width: 15rem;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda); border-radius: var(--r2);
  background: var(--superficie); text-decoration: none; color: inherit;
}
.modelo-documento:hover { border-color: var(--acao); }
.modelo-documento span { display: flex; flex-direction: column; min-width: 0; }
.modelo-documento strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-legenda);
}


/* Baixar tudo fica na fila dos recortes, mas não é um recorte: empurrado
   para a direita e sem o fundo de "filtro ativo", para não parecer mais uma
   forma de recortar a lista. */
.recorte-baixar {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
}




/* "Não executada": ação da pasta, e não um slot da tira de fotos. O
   <summary> vira botão, e o clique abre a justificativa em vez de marcar
   na hora — marcar sem dizer por que era o que fazia a ISG perguntar
   depois exatamente o que o selo deveria ter respondido. */
/* Fechado: botão de texto no fim da linha do alvo de envio, discreto —
   é a saída, não o caminho. Aberto: ocupa a linha inteira, porque escrever
   a justificativa numa coluna de 120px seria escrever por uma fresta. */
.tira-fotos > .nao-exec { margin-left: auto; align-self: center; }
.tira-fotos > .nao-exec[open] {
  flex-basis: 100%; margin-left: 0; margin-top: var(--e2);
}
.nao-exec > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none; width: auto;
  padding: 5px var(--e2);
  border-radius: var(--r1);
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  white-space: nowrap;
}
.nao-exec > summary:hover {
  background: var(--cinza-claro); color: var(--tinta-2);
}
.nao-exec > summary::-webkit-details-marker,
.nao-exec > summary::marker { display: none; content: ""; }
.nao-exec[open] > summary {
  margin-bottom: var(--e2); color: var(--tinta-2); font-weight: 600;
}
.nao-exec .form-nao-exec {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e3);
  border: 1px solid var(--borda); border-radius: var(--r2);
  background: var(--superficie-2);
}
.nao-exec .form-nao-exec .dica { margin: 0; }
.acoes-nao-exec {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}

.linha-nao-exec {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin-top: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px dashed var(--borda-forte); border-radius: var(--r2);
  background: var(--superficie-2);
}
.motivo-nao-exec {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0; flex: 1; min-width: 12rem;
  font-size: var(--t-legenda); color: var(--tinta-2);
}


/* "Guardar no banco de dúvidas": a caixa fica ao lado do botão de liberar,
   porque é no mesmo clique que a resposta existe. O seletor de escopo só
   acorda com a caixa marcada — ver ligarGuardarNoBanco. */
.guardar-banco {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin: var(--e2) 0 var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda); border-radius: var(--r2);
  background: var(--superficie-2);
}
.marca-guardar { display: flex; align-items: flex-start; gap: var(--e2); cursor: pointer; }
.marca-guardar span { display: flex; flex-direction: column; }
.marca-guardar .dica { margin: 0; }
.guardar-banco select { margin-left: auto; }
.guardar-banco select:disabled { opacity: .5; }

.selo-duvida.no-banco {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--acao-veu); color: var(--tinta-acao);
}

/* A tela do banco: uma linha por resposta, com a resposta inteira atrás de
   um clique — julgar pela pergunta é julgar metade. */
.linha-banco > summary { cursor: pointer; list-style: none; }
.linha-banco > summary::-webkit-details-marker,
.linha-banco > summary::marker { display: none; content: ""; }
.linha-banco > summary strong { display: block; }
.linha-banco > summary .dica { display: block; }
.linha-banco[open] > summary { margin-bottom: var(--e2); }


/* "Gerar Word" fica na fila dos recortes, ao lado do .zip, mas não é um
   recorte nem um irmão do zip: o zip é deste bloco, o Word é da etapa
   inteira. Por isso o contorno, que o separa dos filtros sem gritar. */
.recorte-word {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--acao); color: var(--tinta-acao);
}
.recorte-word:hover { background: var(--acao-veu); }

.painel-cabecalho > summary {
  display: flex; align-items: center; gap: var(--e2);
  cursor: pointer; list-style: none;
}
.painel-cabecalho > summary::-webkit-details-marker,
.painel-cabecalho > summary::marker { display: none; content: ""; }
.painel-cabecalho[open] > summary {
  margin-bottom: var(--e3); padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borda);
}


/* ═══════════════════════════════════════════════════════════════════════
   NOVO PROJETO NA BARRA FIXA, E O DIÁLOGO

   O formulário de criar projeto vivia no rodapé do Painel, depois da tabela.
   Para criar o segundo projeto era preciso voltar ao Painel e rolar a página
   inteira — e criar projeto não pertence ao Painel, pertence ao portal.
   Subiu para a faixa, onde está alcançável de qualquer tela.

   O botão é a única ação laranja da faixa. Isso é deliberado: numa barra
   inteira de texto, um bloco de cor é a coisa que se acha sem procurar, e
   aqui há exatamente uma ação para achar.
   ═══════════════════════════════════════════════════════════════════════ */

.topo .botao-novo-projeto {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 var(--e4);
  font-size: var(--t-peq);
}

/* O <dialog> nativo já centraliza sozinho e já tem fundo inerte; o que falta
   é só a aparência da superfície e uma largura que não estoure no celular. */
.dialogo {
  width: min(560px, calc(100vw - var(--e6)));
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-gr);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.dialogo::backdrop { background: rgba(31, 31, 31, .48); }

/* O diálogo de excluir projeto (partes/dialogo_excluir_projeto.html) é o
   único "quente" desta lista — todos os outros (novo/editar projeto,
   editar instituto) mudam cadastro; este apaga sem volta. Uma fieira
   vermelha no alto é a mesma linguagem da `.chamada` (fio laranja) e do
   `.zona-risco[open]` (borda vermelha): a cor entra só quando a ação é de
   verdade, e aqui ela é desde o primeiro instante em que o diálogo abre —
   diferente do ícone de lixeira da linha, que fica neutro até o hover. */
.dialogo-risco { border-top: 4px solid var(--perigo); }
/* O nome do projeto entra três vezes no diálogo (título, aviso, "Digite").
   Um rótulo de uma palavra só, mais largo que a tela, alargava o diálogo
   por dentro e levava o × de fechar para fora do alcance (medido a 375px).
   Mesmo motivo e mesma regra do `.miolo-risco`. */
.dialogo-risco { overflow-wrap: anywhere; }

.dialogo-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
}
.dialogo-cabecalho strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
}

.dialogo-miolo { padding: var(--e5); }
.dialogo-miolo .linha-form { margin-bottom: var(--e3); }
.dialogo-miolo label { display: block; margin-bottom: var(--e1); font-size: var(--t-peq); }
.dialogo-miolo input[type="text"] { width: 100%; }

.dialogo-rodape {
  display: flex; justify-content: flex-end; gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
  border-radius: 0 0 var(--r-gr) var(--r-gr);
}

/* Abaixo de 780px a faixa já entregou a navegação para a gaveta; o rótulo
   do botão vai junto e sobra o ícone, que continua sendo alvo de toque
   inteiro. A entrada "Novo projeto" da gaveta cobre quem preferir o texto. */
@media (max-width: 780px) {
  .topo .botao-novo-projeto span { display: none; }
  .topo .botao-novo-projeto { padding: 0 var(--e3); }
}

/* O "Editar" ao lado do título do projeto e do instituto.

   Morava DENTRO do <h1>, e o leitor de tela anunciava o título como
   "Fundação Aurora.CEE12 Editar" — o nome da página com um verbo colado.
   Saiu para o lado (09/10/2026): o título fica só o nome, e a linha flex
   põe o botão na altura da última linha do título, quebrando para baixo
   quando o nome é comprido demais para dividir a faixa a 375px. */
.titulo-com-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2) var(--e3);
  margin: 0 0 var(--e2);
}
.titulo-com-acao > h1 { margin: 0; }
.botao-editar-projeto {
  min-height: 30px;
  padding: 0 var(--e3);
  font-size: var(--t-legenda);
  font-weight: 600;
}

/* Dois blocos na mesma zona de risco — esvaziar e excluir. Precisam de uma
   separação de verdade: são ações de tamanho muito diferente, e ler o texto
   do segundo achando que é continuação do primeiro é o erro possível aqui. */
.risco-divisor {
  margin: var(--e5) 0;
  border: 0;
  border-top: 1px solid var(--perigo);
  opacity: .5;
}

/* O que a exclusão leva junto. Lista, e não frase corrida: o que se procura
   aqui é um número por linha ("tem movimento mensal? tem foto?"), e numa
   frase de seis itens separados por vírgula nenhum deles se acha. */
.lista-estrago {
  margin: 0 0 var(--e3);
  padding-left: var(--e5);
  font-size: var(--t-peq);
  color: var(--tinta-2);
}
.lista-estrago li { margin-bottom: 2px; }


/* ═══════════════════════════════════════════════════════════════════════
   PROJETOS AGRUPADOS POR INSTITUTO

   A tabela do painel era uma lista corrida de siglas — "CCRAR2", "CEE12",
   "JAV 11" — e nenhuma delas diz de quem é. Agrupada, a primeira pergunta
   da equipe ("o que temos do ILTP?") se responde de relance, e o cabeçalho
   do grupo é a porta da página daquele instituto.

   O cabeçalho é tipográfico e não uma faixa colorida: são dois ou três por
   tela, e três faixas de cor competiriam com os selos de status, que são o
   que de fato precisa saltar aqui.
   ═══════════════════════════════════════════════════════════════════════ */

/* O h2 traz `margin: var(--e8) 0 var(--e3)` de fábrica. Num flex, essa
   margem de topo empurra só ele e o botão sobe — daí a margem migrar para o
   contêiner e o h2 ficar sem margem nenhuma aqui dentro. */
.cabeca-secao {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap;
  margin: var(--e8) 0 var(--e3);
}
.cabeca-secao h2 { margin: 0; }

.grupo-instituto { margin-bottom: var(--e6); }

.cabeca-instituto {
  display: flex; align-items: baseline; gap: var(--e2);
  flex-wrap: wrap;
  margin: var(--e4) 0 var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borda);
}
.cabeca-instituto strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  letter-spacing: -.01em;
}
.cabeca-instituto a { color: var(--tinta); text-decoration: none; }
.cabeca-instituto a:hover strong { color: var(--tinta-acao); }
.cabeca-instituto .quantos { margin-left: auto; }

/* O vazio de um instituto sem projeto é uma linha, não a caixa alta do
   vazio geral: são vários por tela, e a caixa cheia repetida empurraria os
   institutos que têm projeto para fora da primeira dobra. */
.vazio.compacto {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: var(--e3);
  padding: var(--e2) var(--e4);
  min-height: 0;
  font-size: var(--t-peq);
}
.vazio.compacto .i { display: none; }

/* A apresentação do assistente, na primeira mensagem da conversa. Fica em
   linha própria: colada no aviso, "Olá! Sou o assistente da ISG. A sua
   pergunta foi enviada…" vira um parágrafo só e a saudação some no meio. */
.bolha-abertura { display: block; margin-bottom: 2px; }


/* ═══════════════════════════════════════════════════════════════════════
   CONTROLE EM GRUPO — o campo e o botão que o confirma, colados

   Na tabela de usuários, trocar a função e vincular projeto eram um <select>
   e um botão soltos lado a lado. Numa célula estreita os dois quebravam
   linha e a coluna virava uma pilha de widgets sem relação aparente — dava
   para ler como "uma função, e um botão qualquer embaixo".

   Colados, com uma borda só em volta, eles se leem como o que são: um campo
   e a confirmação dele. É o mesmo desenho de um campo de busca com a lupa
   embutida, e resolve o empilhamento porque o par nunca se separa.
   ═══════════════════════════════════════════════════════════════════════ */

.grupo-controle {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  max-width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.grupo-controle:hover { border-color: var(--grafite-4); }
/* O foco marca o GRUPO, não só o campo de dentro: com a borda do select
   removida, um anel só nele apareceria dentro de outra borda. */
.grupo-controle:focus-within {
  border-color: var(--isg-laranja);
  box-shadow: 0 0 0 3px var(--acao-veu);
}

.grupo-controle select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  /* Teto para o select não empurrar a coluna: a tabela é `auto layout`, e
     ali o `width` do <th> é só sugestão — quem manda é o conteúdo. Sem o
     teto, "Fundação Aurora - CEE12" na lista de projetos esticava a coluna
     inteira e empurrava a última para fora do painel. */
  max-width: 190px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  min-height: 34px;
  /* 28px à direita, e não var(--e5): a seta mora em `right 12px` e tem
     12px de largura, então ocupa de 12 a 24px da borda. Com 20px o texto
     encostava nela — que é como "ILTP.CCRAR2" aparecia com a seta em
     cima do "2". */
  padding: 4px 28px 4px var(--e3);
  font-size: var(--t-peq);
}
.grupo-controle select:hover { border-color: transparent; }
.grupo-controle select:focus { outline: none; box-shadow: none; }
.grupo-controle select:focus-visible { outline: none; }

.grupo-controle button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px;
  padding: 0 var(--e2);
  border: 0;
  border-left: 1px solid var(--borda);
  border-radius: 0;
  background: var(--superficie-2);
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.grupo-controle button:hover {
  background: var(--acao-veu);
  color: var(--tinta-acao);
}

/* Enquanto o valor não muda não há o que confirmar, e o botão diz isso
   ficando de lado. Quem escolhe outra função o vê acender — é o retorno de
   "agora sim, falta clicar". Ligado por JS (ligarConfirmaMudanca); sem ele
   a classe nunca entra e o botão fica sempre ativo, que é o certo. */
.grupo-controle.em-repouso button { opacity: .45; }
.grupo-controle.em-repouso button:hover {
  background: var(--superficie-2);
  color: var(--tinta-fraca);
}
.grupo-controle.mudou button {
  background: var(--acao);
  color: var(--tinta-sobre-acao);
  border-left-color: var(--acao);
}
.grupo-controle.mudou { border-color: var(--isg-laranja); }


/* ── Os projetos de uma pessoa ────────────────────────────────────────
   Cada pastilha é um <form> próprio (o clique remove o vínculo), e por isso
   o espaçamento não podia vir de margem no botão: com o rótulo longo
   ("ILTP.CCRAR2") elas empilhavam tortas. Aqui quem espaça é o container,
   que é o trabalho dele. */
.lista-vinculos {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  margin-bottom: var(--e2);
}
.lista-vinculos form { margin: 0; display: contents; }

.pastilha-vinculo {
  display: inline-flex; align-items: center; gap: var(--e1);
  /* Mesmo motivo do select acima: numa tabela de layout automático, a
     pastilha mais larga define a largura da coluna. Com teto ela trunca (o
     nome inteiro fica no `title`) em vez de esticar a tabela. */
  max-width: min(100%, 200px);
  padding: 3px var(--e2) 3px var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-legenda);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao),
              color var(--transicao);
}
/* O nome trunca; o ✕ nunca. Numa coluna estreita, encolher o ícone junto
   com o texto tirava o alvo do clique antes de tirar a legibilidade. */
.pastilha-vinculo > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pastilha-vinculo .i { flex: 0 0 auto; opacity: .45; transition: opacity var(--transicao); }
.pastilha-vinculo:hover {
  border-color: var(--isg-vermelho);
  background: var(--reaberto-veu);
  color: var(--reaberto-tinta);
}
.pastilha-vinculo:hover .i { opacity: 1; }

/* "Nenhum" não é um estado neutro: sem vínculo a pessoa entra e não vê
   apontamento nenhum. O texto diz a consequência, não só a contagem. */
.sem-vinculo {
  display: flex; align-items: center; gap: var(--e1);
  margin-bottom: var(--e2);
  color: var(--atencao-tinta);
  font-size: var(--t-legenda);
  line-height: 1.35;
}
.sem-vinculo .i { flex: 0 0 auto; }

.grupo-controle.com-folga { margin-top: var(--e1); }


/* ═══════════════════════════════════════════════════════════════════════
   O QUINTO GRUPO DA BARRA LATERAL — "Entregas da etapa"

   A barra continua sendo bloco → etapa, como sempre foi. O que entrou foi
   um grupo a mais no fim dela, para a planilha de beneficiários e o relato.

   Um separador acima, e só nele: os quatro blocos são variações da mesma
   pergunta ("de que assunto é esta foto?") e devem se ler como uma lista
   contínua; o quinto responde outra ("o que mais esta etapa me deve?"), e a
   linha é o que marca a troca de assunto sem precisar de um título maior.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── As duas listas da barra ──────────────────────────────────────────
   "Etapas" (todas, para escolher) e, embaixo, o que existe dentro da
   escolhida. Um <select> chegou a ocupar o lugar da primeira e escondia
   justamente a informação que faz escolher: quantas etapas existem, quais
   já têm foto, quais estão devendo o relato. Ver partes/barra_blocos.html. */
.grupo-barra + .grupo-barra {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}

/* Um projeto pode ter até vinte e quatro etapas (qualitativa.MAX_ETAPAS), e
   vinte e quatro linhas empurrariam os destinos para fora da tela — o
   oposto do que a lista serve. Depois de ~12, ela rola por dentro. */
.lista-etapas-barra { max-height: 316px; overflow-y: auto; }

/* Os dois sinais da etapa: quantas fotos já há, e o pino do que falta e não
   é foto. Juntos num grupo para não brigarem pelo alinhamento à direita. */
.sinais-etapa { display: inline-flex; align-items: center; gap: var(--e2); }

/* O nome da etapa escolhida titula a segunda lista — sem caixa alta, porque
   "Etapa 1" é um nome próprio aqui, não um rótulo de seção. */
.grupo-destinos > .rotulo-bloco { text-transform: none; letter-spacing: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   AS ENTREGAS DA ETAPA — a planilha de beneficiários e o relato.

   Empilhadas em largura cheia, e não lado a lado. Em duas colunas de 440px
   as duas coisas que mais importam não cabiam: o campo "o que precisa ser
   corrigido?" chegava truncado no meio da frase, e o relato — que é texto,
   para ler — ficava numa coluna estreita ao lado de um cartão que só tem um
   nome de arquivo dentro. As duas entregas não se comparam entre si; não há
   por que colocá-las lado a lado.
   ═══════════════════════════════════════════════════════════════════════ */

.entregas-etapa {
  display: flex; flex-direction: column; gap: var(--e5);
  margin-bottom: var(--e6);
}
.cabeca-entregas { margin-bottom: calc(var(--e2) * -1); }
.cabeca-entregas h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2); font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 2px;
}
.cabeca-entregas .dica { margin: 0; max-width: 70ch; }

.cartao-entrega {
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  /* A borda de cima carrega o estado: laranja enquanto falta, vermelha
     quando veio errada, verde quando foi conferida. Dá para varrer os dois
     painéis de longe sem ler uma palavra. */
  border-top: 3px solid var(--pendente);
  border-radius: var(--r);
}
.cartao-entrega.entregue  { border-top-color: var(--sucesso); }
.cartao-entrega.apontada  { border-top-color: var(--reaberto); }

/* ── Cabeçalho ────────────────────────────────────────────────────────── */
.cartao-entrega > header {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
}
.icone-entrega {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 38px; height: 38px;
  border-radius: var(--r-peq);
  background: var(--cinza-claro);
  color: var(--tinta-2);
}
.titulo-entrega { flex: 1; min-width: 180px; }
.titulo-entrega strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.titulo-entrega .dica { margin: 0; font-size: var(--t-peq); }
/* Quem escreveu e quando, à direita do título: é dado de procedência, e
   procedência acompanha o cabeçalho, não o rodapé de quem confere. */
.meta-relato { margin: 0; font-size: var(--t-legenda); text-align: right; }

/* ── O pedido da ISG ──────────────────────────────────────────────────── */
.pedido-entrega {
  margin: 0;
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
}

/* ── Miolo ────────────────────────────────────────────────────────────── */
.miolo-entrega {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e5);
}

/* A ausência, em UMA linha. Era uma caixa de 140px para dizer uma frase —
   e vazio que ocupa espaço de conteúdo é o que fazia a tela parecer oca. */
.sem-entrega {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0;
  font-size: var(--t-peq); color: var(--tinta-fraca);
}
.sem-entrega .i { flex-shrink: 0; }

.arquivo-entregue {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--cinza-claro);
  border-radius: var(--r-peq);
}
.link-arquivo {
  display: flex; align-items: center; gap: var(--e3);
  flex: 1; min-width: 0;
  color: var(--tinta);
}
.link-arquivo:hover { text-decoration: none; color: var(--tinta-acao); }
.link-arquivo > span { min-width: 0; }
.link-arquivo strong {
  display: block; font-size: var(--t-corpo); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-arquivo .dica { margin: 0; font-size: var(--t-legenda); }

/* ── O envio, do lado do proponente ───────────────────────────────────── */
.form-planilha {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
/* O <input type="file"> nativo desenha "Escolher arquivo / Nenhum arquivo
   selecionado" com a fonte do sistema, e não há como estilizá-lo. Mesma
   solução do alvo de foto: um label que o veste. */
.alvo-planilha {
  flex: 1; min-width: 220px; max-width: 420px;
  display: flex; align-items: center;
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-peq);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.alvo-planilha:hover,
.alvo-planilha:focus-within { border-color: var(--acao); background: var(--acao-veu); }
.alvo-planilha input[type="file"] {
  /* Não `display:none`: assim ele some do foco por teclado, e o campo
     obrigatório fica inalcançável para quem navega com Tab. */
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.rotulo-planilha {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq); font-weight: 600; color: var(--tinta-2);
}

/* ── O relato ─────────────────────────────────────────────────────────── */
.form-relato { display: flex; flex-direction: column; gap: var(--e3); }
.form-relato textarea { width: 100%; resize: vertical; }
.rodape-relato {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.rodape-relato .dica { margin: 0; }
.acoes-relato { display: flex; align-items: center; gap: var(--e2); }

/* `pre-wrap` preserva os parágrafos que a pessoa escreveu — sem ele o texto
   vira um bloco só, que é exatamente o que ninguém lê. */
.relato-lido {
  white-space: pre-wrap;
  max-height: 380px; overflow-y: auto;
  padding: var(--e4) var(--e5);
  background: var(--cinza-claro);
  border-radius: var(--r-peq);
  font-size: var(--t-corpo); line-height: var(--l-corpo);
}
.link-relato { align-self: flex-start; }

/* ── O rodapé de conferência da ISG ───────────────────────────────────── */
.conferencia-entrega {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: 0 0 var(--r) var(--r);
}
.rotulo-conferencia {
  display: inline-flex; align-items: center; gap: var(--e2);
  flex: none;
  font-size: var(--t-legenda); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* Conferida: a faixa recua para nota de rodapé — o trabalho acabou, e o que
   sobra é o caminho de volta para quem conferiu por engano. */
.conferencia-entrega.resolvida { background: var(--sucesso-veu); }
.conferencia-entrega.resolvida .rotulo-conferencia { color: var(--sucesso-tinta); }

/* O campo ocupa o que sobra: era ele que chegava truncado no meio da frase
   quando os três controles disputavam 440px. */
.form-apontar {
  display: flex; align-items: center; gap: var(--e2);
  flex: 1; min-width: 260px;
}
.form-apontar input[type="text"] { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  .cartao-entrega > header,
  .miolo-entrega,
  .conferencia-entrega,
  .pedido-entrega { padding-left: var(--e4); padding-right: var(--e4); }
  /* Numa tela estreita os três controles empilham em vez de espremer. */
  .conferencia-entrega { align-items: stretch; }
  .form-apontar { flex-wrap: wrap; }
}


/* ── As duas saídas da pasta sem foto ─────────────────────────────────
   "Não executada" e "Não há fotos", na mesma linha do alvo de envio: são as
   outras respostas possíveis para a pergunta que o alvo faz ("o que houve
   com este item?"), e as três têm de aparecer juntas.

   Botão de texto, discreto, empurrado para a direita — não um ladrilho como
   o alvo. Quando eram do mesmo tamanho e ao lado, pareciam mais um slot de
   foto; são a saída, não o caminho. Ver partes/… e o #dlg-sem-foto. */
.sem-foto-gatilho {
  display: inline-flex; align-items: center; gap: var(--e1);
  margin-left: auto;
  padding: 5px var(--e2);
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-peq);
  font-family: inherit; font-size: var(--t-legenda); font-weight: 600;
  color: var(--tinta-fraca);
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
/* Só o PRIMEIRO é empurrado para a direita; o segundo cola nele, para os
   dois se lerem como um par de saídas e não como dois botões soltos. */
.sem-foto-gatilho + .sem-foto-gatilho { margin-left: 0; }
.sem-foto-gatilho:hover { background: var(--cinza-claro); color: var(--tinta); }
.sem-foto-gatilho:focus-visible {
  outline: 2px solid var(--acao); outline-offset: 1px;
}

/* O diálogo herda `.dialogo`; só o campo precisa de altura de verdade. */
#dlg-sem-foto textarea { width: 100%; resize: vertical; }
#dlg-sem-foto [data-sem-foto-item] {
  font-weight: 600; color: var(--tinta);
  margin-bottom: var(--e3);
}


/* ── Os dois modos de olhar a prestação de fotos ──────────────────────
   "Por etapa" responde "o que falta na Etapa 1?" — o trabalho do dia a dia.
   "Por bloco" responde "as fotos de divulgação do projeto inteiro, onde
   estão?" — a pergunta que aparece no fim, e que antes exigia abrir etapa
   por etapa e guardar de cabeça.

   Duas abas no alto da barra, e não um menu: são duas opções e uma delas
   está sempre ativa. Segmentado, para se lerem como um par. */
.modos-visao {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: var(--e3);
  padding: 2px;
  background: var(--cinza-claro);
  border-radius: var(--r-peq);
}
.modo-visao {
  padding: 6px var(--e2);
  border-radius: calc(var(--r-peq) - 1px);
  text-align: center;
  font-size: var(--t-legenda); font-weight: 600;
  color: var(--tinta-fraca);
  transition: background var(--transicao), color var(--transicao);
}
.modo-visao:hover { color: var(--tinta); text-decoration: none; }
.modo-visao.ativo {
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
}

/* ── Uma etapa dentro da visão por bloco ──────────────────────────────
   Cada etapa é uma seção nomeada — a resposta só serve se disser de qual
   etapa é cada coisa. */
.etapa-secao { margin-bottom: var(--e6); }
.cabeca-etapa-secao {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--borda-forte);
}
.cabeca-etapa-secao h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.cabeca-etapa-secao .espaco { flex: 1; }

/* Quanto falta, numa linha discreta sob as fotos. Já foi um painel próprio,
   com barra de progresso, e aquilo dava a um dado de APOIO o mesmo peso
   visual das fotos — que são o que a pessoa veio ver no modo por bloco. */
.numeros-discretos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin: var(--e3) 0 0;
}
.numeros-discretos .sep { margin: 0 var(--e2); opacity: .45; }
.numeros-discretos .i { color: var(--sucesso); margin-right: 3px; }


/* ── O X dos avisos de estado ─────────────────────────────────────────
   Discreto e no canto: fechar é a saída, não a ação principal do aviso. O
   `.aviso` já é flex, então basta empurrá-lo para a direita. Ver
   ligarAvisosDispensaveis em apontamentos.js para por que a dispensa é
   lembrada — e por que ela expira quando o estado muda. */
/* O aviso que se pode fechar vira linha: o `.aviso` cru é um bloco, e o
   botão caía embaixo do texto em vez de ir para a quina. `.com-icone` e
   `.linha-destrancar` já são flex e não são afetados por isto. */
.aviso[data-dispensavel] {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
}
.aviso[data-dispensavel] > .i { margin-top: 2px; flex-shrink: 0; }
.aviso[data-dispensavel] > div { flex: 1; min-width: 0; }
/* E some quando dispensado. Sem esta linha o `display: flex` acima vence o
   `[hidden] { display: none }` do navegador — que é regra de tipo, de
   especificidade menor —, e o aviso continuava na tela depois do clique
   com o atributo `hidden` posto. Toda vez que uma classe define `display`,
   o `[hidden]` daquele elemento precisa ser reafirmado. */
.aviso[data-dispensavel][hidden] { display: none; }

.fechar-aviso {
  align-self: flex-start;
  margin-left: auto;
  flex-shrink: 0;
  border: 0; background: none; cursor: pointer;
  padding: 2px;
  border-radius: var(--r-min);
  color: inherit; opacity: .5;
  transition: opacity var(--transicao), background var(--transicao);
}
.fechar-aviso:hover { opacity: 1; background: rgba(40, 40, 40, .08); }
.fechar-aviso:focus-visible { opacity: 1; outline: 2px solid currentColor; }


/* ── A tira do catálogo na visão por bloco ────────────────────────────
   Miniatura com o código da pasta embaixo. Sem o rótulo seria um monte de
   imagens sem dizer de que item cada uma é — e conferir é exatamente casar
   a foto com o item do plano de trabalho. */
.foto-com-rotulo {
  margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  width: 84px;
}
.foto-com-rotulo figcaption {
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* ── As pastas na visão POR BLOCO ──────────────────────────────────────
   As fotos dos itens saíam numa tira única, com o nome do item numa legenda
   embaixo de cada miniatura (o `.foto-com-rotulo` acima, que continua servindo
   onde a mistura é o assunto). Aqui elas passaram a vir em pastas, na ordem do
   catálogo — a mesma leitura da tela de trabalho.

   O nome da pasta é um cabeçalho de PESO BAIXO de propósito: ele organiza, mas
   quem se olha nesta tela é a foto. Um título forte a cada seis miniaturas
   viraria uma lista de títulos com fotos no meio.

   Só as pastas COM foto chegam até aqui. As vazias são assunto da lista de
   baixo, que é onde se pergunta o que falta. */
.pastas-com-foto {
  display: flex; flex-direction: column; gap: var(--e4);
}
.pasta-com-foto .tira-fotos { margin-bottom: 0; padding-top: var(--e2); }

/* A pasta virou <details>. O marcador nativo sai: quem anuncia o dobrar é a
   linha inteira do nome, que já é clicável e já tem o contador — uma seta do
   navegador ao lado seria um segundo anúncio da mesma coisa, com desenho que
   não é o do portal. */
.pasta-com-foto > summary { cursor: pointer; list-style: none; }
.pasta-com-foto > summary::-webkit-details-marker { display: none; }
.pasta-com-foto > summary:hover { color: var(--tinta); }
.pasta-com-foto > summary:hover .i { color: var(--isg-laranja); }
/* Fechada, o nome perde o traço de baixo: ele separava o nome das fotos, e
   sem fotos à vista não há o que separar. */
.pasta-com-foto:not([open]) > summary { border-bottom-color: transparent; }

.nome-pasta-foto {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e2);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-texto);
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-2);
}
.nome-pasta-foto .i { flex: 0 0 auto; color: var(--tinta-fraca); }
/* O nome encolhe e corta; o contador, não — é ele que diz o tamanho da pasta,
   e um número pela metade não informa nada. */
.nome-pasta-foto > span:not(.quantos-na-pasta) {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.quantos-na-pasta {
  flex: 0 0 auto; margin-left: auto;
  padding: 1px var(--e2);
  border-radius: var(--r-pill);
  background: var(--cinza-claro);
  font-size: var(--t-legenda); font-weight: 700;
  color: var(--tinta-fraca);
}

/* ── Os arquivos que acompanham o relato ───────────────────────────────
   O relato é texto, e o texto é o corpo da entrega. Estes vêm DEPOIS dele no
   cartão, e separados por um fio: sem a separação, a área de anexo colava na
   caixa de escrever e as duas viravam um formulário só de duas partes — que
   é exatamente o que elas não são. Uma se lê, a outra se baixa. */
.anexos-do-relato {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.rotulo-anexos {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-texto);
  font-size: var(--t-h4); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca);
}

/* ── Os documentos do plano de divulgação ──────────────────────
   Dois campos no mesmo painel, e a linha entre eles é o que os separa: sem
   ela, "Arquivo do layout aprovado" e "Outras comprovações" viram uma pilha
   só, e o arquivo subido no campo de baixo parece ter ido no de cima. */
.campo-documento + .campo-documento {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.campo-documento > .rotulo-anexos { margin-bottom: var(--e1); }
/* A dica explica O QUE vai ali, e por isso fica colada no título, acima da
   lista — lida depois dos arquivos, chegaria tarde. */
.campo-documento > .dica { margin: 0 0 var(--e3); }

/* ── De quem é o projeto, no diálogo do "Novo projeto" ────────────
   O campo de cadastrar a casa nova aparece POR BAIXO da lista, recuado e com
   um filete à esquerda: ele não é um terceiro campo do formulário, é a
   continuação da escolha feita logo acima. Sem a marcação, um campo que
   aparece do nada no meio do diálogo parece mais uma linha a preencher. */
.instituto-novo {
  margin-top: var(--e3);
  padding-left: var(--e3);
  border-left: 2px solid var(--laranja);
}
.instituto-novo > .dica { margin-bottom: 0; }

/* O botão "Editar" do bloco do instituto no Painel. É um <a> com cara de
   botão — leva a outra tela, e só um link faz o meio-clique abrir em aba
   nova, que é como se compara dois institutos lado a lado.

   SEM `margin-left: auto`, e isso importa: quem já empurra para a direita é
   o `.quantos` (logo acima). Com os dois pedindo o espaço livre, o flex o
   divide entre eles e o contador para no MEIO da linha, solto, longe tanto
   do nome quanto da borda. Um auto só, e o botão vem colado atrás dele.

   `align-self` porque a linha alinha por baseline, boa para o nome e a
   razão social; um botão com padding alinhado pela baseline do texto dele
   fica alguns pixels abaixo dos dois. */
.cabeca-instituto > .botao { align-self: center; }

/* ── As caixas de tipo do apontamento ───────────────────────
   Era um <select> de escolha única e virou um conjunto de caixas, porque um
   apontamento pode ser "dúvida" E "profissionais" ao mesmo tempo.

   `fieldset` sem moldura: ele existe pelo <legend>, que é o que amarra o
   grupo inteiro a um rótulo para o leitor de tela — sete caixas soltas com
   um <label> acima são sete perguntas independentes para quem não vê a
   tela. A borda padrão do fieldset sairia do desenho do resto do modal. */
.campo-tipos {
  margin: var(--e3) 0 0;
  padding: 0;
  border: 0;
}
.campo-tipos > legend {
  padding: 0;
  margin-bottom: var(--e2);
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-2);
}
.caixas-tipo { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }

/* Cada caixa é um alvo inteiro, e não um quadradinho de 13px com texto ao
   lado: o <label> envolve os dois, então clicar na palavra marca. Num
   formulário que se preenche várias vezes por tarde, mirar o quadradinho é
   o tipo de atrito que faz a pessoa desistir de classificar. */
.caixa-tipo {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 4px var(--e2) 4px var(--e1);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-min);
  background: var(--superficie);
  font-size: var(--t-peq);
  cursor: pointer;
  /* O alvo de toque no celular: 32px é o mínimo confortável com as caixas
     lado a lado, e sem isto duas linhas de caixas ficam grudadas. */
  min-height: 32px;
}
.caixa-tipo:hover { border-color: var(--tinta-acao); }
.caixa-tipo input { margin: 0; }
/* `:has` para a caixa marcada ficar evidente de relance — com sete lado a
   lado, procurar qual está marcada olhando os quadradinhos é lento. Onde o
   navegador não tem `:has`, o quadradinho nativo continua dizendo tudo: a
   marcação é reforço, nunca a única pista. */
.caixa-tipo:has(input:checked) {
  border-color: var(--tinta-acao);
  background: var(--acao-veu);
  font-weight: 600;
}
/* O foco do teclado tem de aparecer no rótulo inteiro, senão ele fica preso
   ao quadradinho e some dentro da pílula. */
.caixa-tipo:focus-within { outline: 2px solid var(--tinta-acao); outline-offset: 2px; }

/* Dois selos de tipo no mesmo cartão, agora que o apontamento pode ter mais
   de um: sem o gap eles encostam e se leem como uma palavra só. */
.selo-tipo + .selo-tipo { margin-left: var(--e1); }

/* Na visão POR BLOCO os mesmos campos vêm compactos: aí são dez etapas na
   mesma página, e o painel inteiro repetido dez vezes viraria parede. */
.documentos-no-bloco {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}
.documentos-no-bloco .rotulo-anexos { font-size: var(--t-dica); }
.documentos-no-bloco .sem-entrega { margin: 0 0 var(--e2); }

/* ── Enviar de dentro da visão POR BLOCO ───────────────────────────────
   Este modo era só de leitura. Passou a aceitar envio, e o envio aqui tem
   uma exigência que a tela de trabalho não tem: não pode roubar a tela.
   Lá a pessoa veio para subir foto, e o alvo grande é o assunto; aqui ela
   veio para achar ONDE falta, e o alvo é o que ela usa depois de achar. */

/* No bloco livre: o alvo normal, mas com o nome da etapa colado nele. A
   tela mostra até dez etapas iguais, e um campo de envio sem dizer para
   qual delas é seria um convite a errar. */
.form-envio-no-bloco { margin-top: var(--e3); }
.alvo-do-envio { align-self: center; }
.alvo-do-envio strong { color: var(--tinta-2); }

/* Na lista de pastas: um `+` do tamanho do texto, no fim da linha. Com
   setenta e nove linhas, o quadrado de miniatura da tela de trabalho
   viraria uma parede de caixas e o nome do item sumiria entre elas. */
.envio-na-linha { flex: 0 0 auto; margin-left: var(--e2); }
.alvo-linha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-min);
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao),
              background var(--transicao);
}
.alvo-linha:hover {
  border-style: solid; border-color: var(--isg-laranja);
  background: var(--acao-veu); color: var(--tinta-acao);
}
/* O input nativo não se estiliza e desenharia "Escolher arquivos / Nenhum
   arquivo escolhido" no meio da linha. Fica invisível dentro do <label>,
   que é quem recebe o clique — e continua alcançável pelo teclado, porque
   `display: none` o tiraria da ordem de foco. */
.alvo-linha input[type=file] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.alvo-linha:focus-within {
  border-style: solid; border-color: var(--isg-laranja);
  outline: 2px solid var(--anel-foco); outline-offset: 2px;
}
.pasta-linha { position: relative; }

@media (max-width: 560px) {
  /* Na tela estreita a linha já quebra; o alvo vai junto, sem margem que o
     empurre para fora. */
  .envio-na-linha { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A FICHA DO CONTRATO

   Uma tira de dados logo abaixo do nome do projeto: processo, SLI, vigência,
   PCF e o dia combinado da entrega mensal. Aparece igual para a ISG e para o
   proponente — é o que decide se uma despesa entra ou não, e ele é quem paga
   o erro de gastar fora da vigência.

   Tira, e não tabela: são cinco dados curtos que se leem de relance, e uma
   tabela de duas colunas para cinco linhas ocuparia meia tela para dizer o
   mesmo. Em telas estreitas ela quebra sozinha, sem media query.
   ═══════════════════════════════════════════════════════════════════════ */

.ficha-projeto {
  display: flex; flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  align-items: baseline;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-peq);
}

.dado-ficha { display: flex; align-items: baseline; gap: var(--e2);
              flex-wrap: wrap; }
.dado-ficha .rotulo {
  font-size: var(--t-legenda);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-fraca);
}
.dado-ficha strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-peq);
  color: var(--tinta);
  /* Tabular: as datas ficam alinhadas entre si, e "11/11" não fica mais
     estreito que "30/09" na mesma linha. */
  font-variant-numeric: tabular-nums;
}
.dado-ficha .dica-ficha { font-size: var(--t-legenda); color: var(--tinta-fraca); }
.dado-ficha.falta { color: var(--atencao-tinta); }
.dado-ficha.falta .dica-ficha { color: var(--atencao-tinta); }

/* Vigente × encerrada. O selo existe porque saber se a vigência está aberta
   exigia comparar duas datas de cabeça, toda vez que a tela abria. */
.selo-vigencia {
  font-size: var(--t-legenda); font-weight: 600;
  padding: 1px var(--e2);
  border-radius: var(--r-min);
  text-transform: lowercase;
}
.selo-vigencia.aberta  { background: var(--sucesso-veu); color: var(--sucesso-tinta); }
.selo-vigencia.fechada { background: var(--aceito-veu);  color: var(--aceito-tinta); }

/* A ficha dentro dos diálogos de criar e editar, recolhida. Nem todo projeto
   nasce com o contrato em mãos, e cinco campos a mais abertos por padrão
   fariam o diálogo de "criar projeto" parecer um cadastro de sistema. */
.dobra-ficha { margin-top: var(--e4); border-top: 1px solid var(--borda);
               padding-top: var(--e3); }
.dobra-ficha > summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-peq); font-weight: 600;
  color: var(--tinta-acao);
  padding: var(--e1) 0;
}
.dobra-ficha > summary::-webkit-details-marker,
.dobra-ficha > summary::marker { display: none; content: ""; }
.dobra-ficha > summary::before { content: "+ "; font-weight: 700; }
.dobra-ficha[open] > summary::before { content: "− "; }
.dobra-ficha > summary:hover { text-decoration: underline; }

/* ── O que falta, no próprio rótulo da dobra ───────────────────────────
   Substitui a dobra que abria sozinha quando o projeto tinha campo vazio.
   Abrir sozinha fazia o mesmo botão "Editar" dar telas diferentes conforme
   o projeto — lido como instabilidade, não como cobrança —, e ainda por
   cima mostrava os sete campos sem dizer quais eram os vazios. Esta linha
   diz, e deixa a dobra fechada.

   Cor de atenção e não de erro, a mesma do "falta preencher" da ficha (ver
   .dado-ficha.falta): ficha incompleta é pendência de cadastro, não defeito
   — o projeto funciona sem ela. `text-decoration: none` porque o summary
   inteiro sublinha no hover, e sublinhar um aviso o faz parecer clicável
   por si. */
.falta-na-dobra {
  margin-left: var(--e2);
  font-weight: 500;
  color: var(--atencao-tinta);
  text-decoration: none;
}
.dobra-ficha > summary:hover .falta-na-dobra { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   BUSCAR ITEM DENTRO DAS PASTAS DE FOTO

   Com 79 pastas em quatro categorias, achar "o cavalete" é rolar a tela até
   reconhecer o nome — e é rolando que se lança foto na pasta vizinha.
   ═══════════════════════════════════════════════════════════════════════ */

.busca-pastas {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
}
.busca-pastas:focus-within { border-color: var(--isg-laranja); }
.rotulo-busca-pastas { display: inline-flex; color: var(--tinta-fraca); }
.busca-pastas input {
  flex: 1; min-width: 0;
  border: 0; padding: var(--e1) 0;
  background: transparent;
  font-size: var(--t-peq); color: var(--tinta);
}
.busca-pastas input:focus { outline: none; }

/* A contagem do resultado. Fica ao lado do campo, e não abaixo: uma linha
   que aparece e some empurraria a lista inteira a cada tecla. */
.conta-busca-pastas {
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* As duas guardas do filtro. Toda classe que define `display` precisa
   reafirmar o `[hidden]`, senão ela vence a regra do navegador e o item
   continua na tela depois de filtrado — ver a barra de seleção de fotos,
   que foi exatamente assim que quebrou. `.pasta` e `.grupo-pastas` não
   declaram display hoje, mas ficam aqui pelo mesmo motivo: a próxima
   pessoa que der um `display: flex` a elas não vai lembrar disto. */
.pasta[hidden] { display: none; }
.grupo-pastas[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   RECOLHER A CONVERSA DO APONTAMENTO

   Um apontamento que foi e voltou três vezes acumula oito falas, e elas
   empurram para fora da tela justamente o que se abriu o cartão para ver.
   O que NUNCA se esconde é o registro: quem falou por último e quando fica
   no resumo, recolhida ou não.
   ═══════════════════════════════════════════════════════════════════════ */

.dobra-conversa { margin-top: var(--e3); }
.dobra-conversa > summary {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) 0;
  cursor: pointer; list-style: none;
  font-size: var(--t-legenda);
  color: var(--tinta-fraca);
  border-top: 1px solid var(--borda);
}
.dobra-conversa > summary::-webkit-details-marker,
.dobra-conversa > summary::marker { display: none; content: ""; }
.dobra-conversa > summary:hover { color: var(--tinta); }
.dobra-conversa > summary:focus-visible {
  outline: 2px solid var(--anel-foco); outline-offset: 2px;
}

/* A contagem é o que se lê primeiro — dá o tamanho do histórico antes de
   abri-lo. Por isso ganha o peso do título, e não o do rodapé. */
.dobra-conversa .quantas-falas {
  font-family: var(--fonte-titulo); font-weight: 600;
  color: var(--tinta);
}
/* Quem falou por último, e quando. Some em tela estreita: ali o cartão já
   está justo, e a contagem sozinha responde "tem conversa?". */
.dobra-conversa .ultima-fala { color: var(--tinta-fraca); }

/* A seta gira ao abrir — é o mesmo sinal das outras dobras do portal. */
.dobra-conversa > summary .giro { transition: transform var(--transicao); }
.dobra-conversa[open] > summary .giro { transform: rotate(180deg); }

/* Recolhida, a linha da conversa não precisa da borda de cima duas vezes. */
.dobra-conversa > .conversa { margin-top: 0; border-top: 0; padding-top: 0; }

@media (max-width: 560px) {
  .dobra-conversa .ultima-fala { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   OS PASSOS DO PROPONENTE — a régua e os recortes

   A tela onde ele anexa as fotos tinha uma barra de progresso de uma cor só,
   "com foto / total", e nenhum filtro. As duas coisas falhavam na mesma
   pergunta: uma pasta cheia de fotos que ele nunca entregou contava como
   feita na barra, e não havia como listá-las. A barra podia chegar a 100%
   com a ISG sem ter recebido nada.

   O que entra no lugar: uma régua em faixas, uma por passo, e uma fileira de
   recortes que é ao mesmo tempo o FILTRO e a LEGENDA da régua — mesma
   palavra, mesma cor, mesma contagem. Ter os números duas vezes, em dois
   vocabulários, era o que fazia a pessoa conferir um contra o outro.
   ═══════════════════════════════════════════════════════════════════════ */

/* A LINHA DA BUSCA — procurar à esquerda, andamento à direita.

   A régua mora aqui, e não numa faixa própria, por uma conta de largura: as
   oito pílulas do filtro pedem ~730px, e a coluna de trabalho tem ~850. Elas
   ocupam a linha delas inteira, e qualquer coisa ao lado as derrubaria — que
   é o empilhamento de que esta tela veio fugir.

   A caixa de procurar, ao contrário, sempre teve uma linha inteira só para
   ela e sobrava espaço à direita. A régua entra ali: custa zero pixel de
   altura e fica na margem direita, onde o olho a encontra sem procurar. */
.linha-busca {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  margin-bottom: var(--e3);
}
.linha-busca .busca-pastas { flex: 1 1 260px; margin-bottom: 0; }
.andamento {
  display: flex; align-items: center; gap: var(--e3);
  /* `auto` à esquerda: quando o recorte esvazia a busca some, e sem isto o
     andamento escorregaria para a margem esquerda. Ele fica onde estava. */
  flex: none; min-width: 0; margin-left: auto;
}
.andamento-rotulo {
  margin: 0; white-space: nowrap;
  font-size: var(--t-peq); color: var(--tinta-fraca);
}
.andamento-rotulo strong {
  margin-left: var(--e2);
  font-family: var(--fonte-titulo); font-size: 15px; color: var(--tinta);
}

.regua-passos {
  display: flex;
  flex: none;
  width: 150px;
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  /* O vão do fim É o "sem foto" — não há faixa para ele. Hachurado, e não
     uma cor lisa a mais: vazio tem de parecer vazio, e uma sexta faixa
     cinza ao lado das outras duas cinzas só se distinguiria por medição. */
  background-color: var(--cinza-luz);
  background-image: repeating-linear-gradient(-45deg,
      transparent 0 4px, rgba(40, 40, 40, .12) 4px 8px);
}
.regua-passos .faixa {
  height: 100%;
  /* 3px de piso: uma pasta em setenta e nove dá menos de um pixel e meio em
     telas estreitas, e faixa que some é dado que sumiu. */
  min-width: 3px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
/* O fio entre faixas vizinhas. Sem ele, "entregue" e "conferida" coladas
   viram um bloco só quando as duas são claras. */
.regua-passos .faixa + .faixa { box-shadow: inset 1px 0 0 rgba(40, 40, 40, .45); }

.faixa.passo-corrigir  { background: var(--passo-corrigir); }
.faixa.passo-rascunho  { background: var(--passo-rascunho); }
.faixa.passo-entregue  { background: var(--passo-entregue); }
.faixa.passo-conferida { background: var(--passo-conferida); }
.faixa.passo-naoexec   { background: var(--passo-naoexec); }

/* ── Os recortes, versão do proponente ─────────────────────────────────
   Herdam tudo de .recorte (a fileira de pílulas da conferência da ISG). O
   que muda é a bolinha de cor, que amarra cada pílula à sua faixa na régua,
   e o corte que separa "com você" de "com a ISG". */
.recortes-passo { align-items: stretch; }
.ponto-passo {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--passo-falta);
  /* O anel existe para o amarelo e o cinza-luz: sobre branco, sem borda,
     eles somem. */
  box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .2);
}
.recorte.passo-corrigir  .ponto-passo { background: var(--passo-corrigir); }
.recorte.passo-rascunho  .ponto-passo { background: var(--passo-rascunho); }
.recorte.passo-falta     .ponto-passo { background: var(--passo-falta); }
.recorte.passo-entregue  .ponto-passo { background: var(--passo-entregue); }
.recorte.passo-conferida .ponto-passo { background: var(--passo-conferida); }
.recorte.passo-naoexec   .ponto-passo { background: var(--passo-naoexec); }
/* Pílula ativa é grafite: ali o anel escuro desaparece e o claro assume. */
.recorte.ativo .ponto-passo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }

/* A fronteira entre o que é trabalho e o que é espera. Um fio, e não um
   rótulo "com você / com a ISG": os dois rótulos ocupariam mais linha do que
   os próprios recortes, e a ordem já diz. */
.corte-recortes {
  width: 1px; align-self: stretch; flex: none;
  margin-inline: var(--e2);
  /* --borda-forte some sobre o cinza do fundo da página; este é o primeiro
     degrau que ainda se enxerga ali sem virar um traço preto. */
  background: var(--grafite-4);
}

/* "Falta você" é o atalho dos três primeiros de uma vez — o botão em que se
   trabalha até ele zerar. Contornado de laranja porque é o único recorte
   desta fileira que é uma AÇÃO sugerida, e não um corte neutro. */
.recorte-falta-voce { border-color: var(--isg-laranja); color: var(--tinta-acao); }
.recorte-falta-voce .i { color: var(--isg-laranja); }
.recorte-falta-voce.ativo {
  background: var(--isg-laranja); border-color: var(--isg-laranja);
  color: var(--tinta-sobre-acao);
}
.recorte-falta-voce.ativo .i { color: var(--tinta-sobre-acao); }
.recorte-falta-voce.ativo .quantos {
  background: rgba(40, 40, 40, .18); color: var(--tinta-sobre-acao);
}

/* ── Os mesmos passos no cabeçalho da categoria ────────────────────────
   A categoria dobrada precisa dizer o que tem dentro sem ser aberta. Mesmas
   palavras e mesmas cores dos recortes: é a mesma contagem, um nível abaixo. */
.quantos.passo-corrigir { background: var(--pendente-veu);   color: var(--pendente-tinta); }
.quantos.passo-rascunho { background: var(--respondido-veu); color: var(--respondido-tinta); }
.quantos.passo-falta    { background: var(--cinza-claro);    color: var(--tinta-fraca); }

/* ── A pasta que está por entregar ─────────────────────────────────────
   O ponto cego que abriu esta seção: `sit-enviada` pintava com a MESMA faixa
   cinza a pasta entregue e a pasta que ele subiu e esqueceu de mandar. Vem
   depois de .pasta.sit-* de propósito — mesma especificidade, e aqui o passo
   ganha. */
.pasta.passo-rascunho { border-left-color: var(--isg-amarelo); }
/* E o selo deixa de ser um cinza entre outros cinzas: sobre amarelo,
   lettering grafite (manual p. 15). */
.pasta.passo-rascunho .selo-rascunho {
  background: var(--isg-amarelo); color: var(--isg-grafite);
}

@media (max-width: 720px) {
  /* Em coluna estreita a fileira quebra em várias linhas, e um fio vertical
     no meio de uma quebra vira um traço solto no branco. */
  .corte-recortes { display: none; }
  /* E o andamento desce para a linha dele, com a régua na largura toda —
     que é onde a proporção se lê melhor de qualquer forma. */
  .andamento { width: 100%; }
  .regua-passos { flex: 1; width: auto; }
}



/* ═══════════════════════════════════════════════════════════════════════
   A ETAPA QUE DOBRA — modo "por bloco", fotos dos itens

   A tela despejava a tira inteira de fotos de CADA etapa, uma embaixo da
   outra. Com dez etapas isso é uma rolagem de centenas de miniaturas em que
   o nome da etapa — o que se está procurando — passa voando no meio.

   Agora ela é um índice: uma linha por etapa, com a contagem, e a que se
   abre traz as fotos e a lista das pastas. O nome da etapa é o botão, e a
   chevron ao lado dele diz que ali se abre.
   ═══════════════════════════════════════════════════════════════════════ */

.dobra-etapa {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--tinta); text-decoration: none;
}
.dobra-etapa:hover { color: var(--tinta-acao); text-decoration: none; }
.dobra-etapa .i { color: var(--tinta-fraca); transition: transform var(--transicao); }
/* Fechada, a chevron aponta para a direita — o mesmo sinal dos <details> do
   resto do portal (ver `.i.giro`). Aqui a dobra é um link, e não um
   <details>, então o estado vem da classe e não do seletor [open]. */
.dobra-etapa .i.fechada { transform: rotate(-90deg); }
.dobra-etapa:hover .i { color: var(--tinta-acao); }

/* Recolhida, a seção é uma linha só: o fio de baixo do cabeçalho já separa
   uma etapa da seguinte, e a margem cheia entre elas abriria buracos numa
   lista que agora é para ser corrida. */
.etapa-secao:not(.etapa-aberta) { margin-bottom: var(--e4); }
.linha-recolhida { margin-top: 0; }

/* ── A lista de pastas da etapa aberta ────────────────────────────────
   Uma linha por item, e não o cartão da tela de trabalho: aqui não se sobe
   nem se apaga foto. É densa de propósito — são setenta e nove. */
.pastas-da-etapa { margin-top: var(--e3); }
.grupo-compacto { margin-bottom: var(--e2); }
.pasta-linha {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) var(--e4);
  border-top: 1px solid var(--borda);
  border-left: 3px solid transparent;
}
.pasta-linha:first-child { border-top: none; }
.pasta-linha .espaco { flex: 1; }
/* As mesmas faixas da tela de trabalho, para a mesma pasta não mudar de cor
   conforme a porta por onde se entra nela. */
.pasta-linha.sit-apontada  { border-left-color: var(--isg-laranja); background: var(--pendente-veu); }
.pasta-linha.sit-analise   { border-left-color: var(--respondido); }
.pasta-linha.sit-conferida { border-left-color: var(--sucesso); }
.pasta-linha.passo-rascunho { border-left-color: var(--isg-amarelo); }
.pasta-linha.sit-nao_executada { background: var(--superficie-2); }
.pasta-linha.sit-nao_executada .nome-item,
.pasta-linha.sit-nao_executada .codigo-item { opacity: .6; }
.pasta-linha.passo-rascunho .selo-rascunho {
  background: var(--isg-amarelo); color: var(--isg-grafite);
}
/* A pasta sem foto nenhuma: o círculo vazio ocupa a coluna da contagem, para
   a linha não ficar com um buraco onde as outras têm um número. */
.conta-fotos.nenhuma { color: var(--grafite-4); }

@media (max-width: 560px) {
  .pasta-linha { padding-inline: var(--e3); gap: var(--e2); }
}


/* ── As etapas desdobradas dentro do assunto ──────────────────────────
   Modo "por bloco": clicar em "Fotos dos itens" abre, POR BAIXO DELE, a
   lista das etapas. Ali é onde a escolha mora — a lista "Etapas" do alto da
   barra fica oculta neste modo, porque lá ela trocaria o recorte de todos os
   assuntos, e aqui ela escolhe qual etapa do catálogo desdobrar.

   Indentado e com um fio à esquerda: sem isso, as etapas leriam como mais
   quatro assuntos irmãos de "Fotos dos itens", que é exatamente a confusão
   que o nível de dentro existe para não ter. */
.sub-etapas {
  margin: 2px 0 var(--e2) var(--e4);
  padding-left: var(--e3);
  border-left: 2px solid var(--borda-forte);
}
.sub-etapa {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  padding: 5px var(--e3);
  margin-bottom: 1px;
  border-radius: var(--r-peq);
  font-size: var(--t-legenda);
  color: var(--tinta-2);
  transition: background var(--transicao), color var(--transicao);
}
.sub-etapa:hover { background: var(--cinza-claro); color: var(--tinta); text-decoration: none; }
/* Aberta, ela recua para o contorno em vez do preenchimento grafite do item
   de cima: dois blocos pretos empilhados fariam o pai e o filho disputarem
   qual dos dois é "onde eu estou". */
.sub-etapa.ativo {
  background: var(--acao-veu);
  border: 1px solid var(--isg-laranja);
  padding: 4px calc(var(--e3) - 1px);
  color: var(--tinta-acao); font-weight: 600;
}

/* A chevron do assunto que desdobra. Fechado aponta para a direita, como em
   todo <details> do portal; aberto, para baixo. */
.mes-item.com-desdobra .i.giro { transition: transform var(--transicao); }
.mes-item.com-desdobra .i.giro.fechada { transform: rotate(-90deg); }
.mes-item.com-desdobra .i { color: var(--tinta-fraca); }
.mes-item.com-desdobra.ativo .i { color: var(--tinta-clara-2); }

/* Abaixo de 900px a barra deixa de ser coluna e vira uma tira que rola (ver
   o @media lá em cima). As etapas desdobradas têm de virar tira junto: como
   bloco, elas empilhavam de pé no meio de uma fileira horizontal e partiam a
   linha ao meio. O fio da esquerda, que na coluna era a indentação, aqui vira
   o divisor vertical que diz de qual assunto elas são. */
@media (max-width: 900px) {
  .sub-etapas {
    display: flex; gap: var(--e1); flex: 0 0 auto;
    margin: 0 0 0 var(--e1);
    padding-left: var(--e3);
    /* Na coluna o fio é indentação e pode ser leve; aqui ele é o único
       sinal de que estas duas pílulas pertencem à anterior. */
    border-left-color: var(--grafite-4);
  }
  .sub-etapa {
    flex: 0 0 auto; margin: 0;
    border: 1px solid var(--borda);
    white-space: nowrap;
  }
  .sub-etapa.ativo { border-color: var(--isg-laranja); padding: 5px var(--e3); }
}

@media (max-width: 640px) {
  /* O mesmo piso de alvo dos itens da barra: dedo, e não cursor. */
  .sub-etapa { min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   APONTAMENTO INTERNO — o canal da ISG com a ISG

   A quarta conversa do portal, e a única que não atravessa o balcão. Ver
   models.NotaInterna e partes/botao_interno.html.

   O desenho tem uma tarefa acima das outras: deixar claro, em toda
   aparição, que aquilo NÃO vai para o proponente. Por isso o gatilho é
   cinza e quieto — nada de laranja, que nesta interface quer dizer "ação
   sobre o apontamento dele" — e por isso o cadeado aparece no diálogo.
   ═══════════════════════════════════════════════════════════════════════ */

.gatilho-interno {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 3px var(--e2);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: var(--t-legenda); font-weight: 600;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
/* Tracejado, e não sólido: é a borda de "rascunho, coisa nossa" — o mesmo
   vocabulário do alvo de envio de foto. Nenhum botão que fala com o
   proponente tem esta borda. */
.gatilho-interno:hover {
  border-color: var(--grafite-3); color: var(--tinta-2);
  border-style: solid;
}
.gatilho-interno .i { color: var(--tinta-fraca); }
.gatilho-interno:hover .i { color: var(--tinta-2); }

/* Compacto: numa tira de miniaturas o rótulo dobraria a altura da tira. */
.gatilho-interno.compacto { padding: 3px; gap: 2px; }

/* Já tem nota: o tracejado vira sólido e o número aparece. É a diferença
   entre "dá para apontar aqui" e "alguém já apontou aqui" — e a segunda é
   a que precisa parar o olho. */
.gatilho-interno.tem-nota {
  border-style: solid; border-color: var(--grafite-4);
  color: var(--tinta-2);
}
.gatilho-interno .quantos { background: var(--cinza-claro); color: var(--tinta-fraca); }

/* Na foto o botão flutua no canto, como o × de remover: a miniatura é o
   conteúdo, e o que se faz com ela fica por cima dela. */
.foto-com-acao { position: relative; }
.foto-com-acao .gatilho-interno {
  position: absolute; left: 4px; bottom: 4px; z-index: 2;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(2px);
}

/* ── O diálogo ─────────────────────────────────────────────────────── */
/* O item, antes do campo: é ele que responde "de que estou falando?", e
   quem escreve precisa ver isso ANTES de escrever. */
.alvo-da-nota {
  margin: 0 0 var(--e4);
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--grafite-4);
  background: var(--superficie-2);
  font-size: var(--t-peq); font-weight: 600; color: var(--tinta-2);
}
.alvo-da-nota:empty { display: none; }

/* ── A tela do canal ───────────────────────────────────────────────── */
.escrever-interno { margin-bottom: var(--e4); }
.linha-envio-interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e3);
}
.linha-envio-interno .dica { margin: 0; }

/* Mural, e não fila: sem numeração à vista, sem status, sem dono. */
.mural-interno { list-style: none; margin: var(--e4) 0 0; padding: 0; }

.nota-interna {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--grafite-4);
  border-radius: 0 var(--r-peq) var(--r-peq) 0;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e2);
}
.cabeca-nota {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.cabeca-nota .espaco { flex: 1; }
.cabeca-nota .quem { font-size: var(--t-peq); }
.cabeca-nota .quando {
  font-size: var(--t-legenda); color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.projeto-da-nota {
  font-size: var(--t-legenda); font-weight: 600;
  padding: 1px var(--e2); border-radius: var(--r-pill);
  background: var(--cinza-claro); color: var(--tinta-fraca);
}

/* O item de que a nota fala. Linha própria e clicável: é o caminho de volta
   ao trabalho, e sem ele o canal seria um mural de frases sem endereço. */
.alvo-nota {
  display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
  padding: 3px var(--e3) 3px var(--e2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-peq);
  font-size: var(--t-peq);
  color: var(--tinta-2); text-decoration: none;
}
a.alvo-nota:hover { border-color: var(--isg-laranja); color: var(--tinta); text-decoration: none; }
.alvo-nota .tipo-alvo {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 10px; font-weight: 700; color: var(--tinta-fraca);
}
.alvo-nota .nome-alvo { font-weight: 600; }
/* O item sumiu do portal. A nota fica — o rótulo foi congelado justamente
   para isto —, mas sem prometer um link que não leva a lugar nenhum. */
.alvo-nota.sumiu { border-style: dashed; color: var(--tinta-fraca); }
.alvo-nota.sumiu .nome-alvo { font-weight: 400; text-decoration: line-through; }
.alvo-nota .dica { margin: 0; }

.texto-nota {
  margin: 0;
  white-space: pre-wrap;      /* quebra de linha escrita é quebra de linha lida */
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .cabeca-nota { gap: var(--e2); }
  .nota-interna { padding: var(--e3); }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOVIMENTO

   Derivado do Manual de Identidade Visual, como o resto deste arquivo. O
   manual não fala de animação — é um manual de peça parada —, mas entrega
   o vocabulário inteiro, e não sobra nada a inventar:

     · TRAÇADOS ESPORTIVOS (p. 21). O único elemento gráfico da marca, e o
       manual diz para que serve: as linhas "trazem unidade, RITMO e
       estrutura". Uma linha que se desenha sozinha é a animação que essa
       frase pede. Toda animação daqui é uma dessas linhas sendo marcada,
       varrida ou atravessada.
     · A RAMPA vermelho → laranja → amarelo (p. 11) é a direção do tempo.
       O que começa é vermelho; o que chega é amarelo.
     · O FLARE (p. 23) é a luz da conquista — o manual escolheu essa imagem
       para "sonho realizado". Então o flare é confirmação, e só isso.
     · A ANATOMIA DA IDENTIDADE (p. 25) é um campo grafite encostado num
       campo claro, com o fio da rampa na costura. Em movimento, é a
       cortina de entrada.

   ── O QUE NÃO ESTÁ AQUI, E POR QUÊ ───────────────────────────────────
   Nenhuma figura desenhada. Corredor, bola, apito: nada disso existe no
   manual. A marca tem atleta em FOTOGRAFIA (p. 23), nunca em ilustração —
   e um elemento inventado, numa interface que vai durar anos, envelhece
   antes do resto.

   ── A REGRA DO LOGO ──────────────────────────────────────────────────
   A p. 09 proíbe girar, distorcer, recolorir e aplicar efeitos. Aqui o
   símbolo é REVELADO (um clip que sobe), nunca transformado: o que fica
   parado no fim é o arquivo oficial, na proporção oficial. Ver
   /static/simbolo-isg.svg, extraído da arte vetorial da p. 08.

   ── ACESSIBILIDADE ───────────────────────────────────────────────────
   O bloco prefers-reduced-motion lá de cima já zera a duração de tudo. O
   que está no fim desta seção são os casos em que zerar não basta — uma
   cortina de tela inteira em 0,01 ms é um flash, e flash é pior que
   animação.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1 · A MARCAÇÃO DA QUADRA ──────────────────────────────────────────
   A porta de entrada não aparece: ela é DEMARCADA. As sete raias se
   desenham de dentro para fora, uma atrás da outra, como as linhas
   passadas antes do jogo.

   O pathLength="1" está no HTML (partes/porta.html) e é o que permite um
   stroke-dasharray: 1 servir as sete raias, que têm comprimentos bem
   diferentes — a de raio 60 e a de raio 360 não medem nem perto do mesmo.

   backwards, e não forwards: o estado final é o normal (traço inteiro,
   offset 0), e quem precisa de ajuda é o COMEÇO — sem o fill para trás, as
   raias com atraso apareceriam inteiras por um quadro antes de sumir para
   se desenhar. */
.porta-raias path {
  stroke-dasharray: 1;
  animation: marcar-raia var(--t-cena) var(--curva) backwards;
}
.porta-raias path:nth-child(2) { animation-delay: .06s; }
.porta-raias path:nth-child(3) { animation-delay: .12s; }
.porta-raias path:nth-child(4) { animation-delay: .18s; }
.porta-raias path:nth-child(5) { animation-delay: .24s; }
.porta-raias path:nth-child(6) { animation-delay: .30s; }
.porta-raias path:nth-child(7) { animation-delay: .36s; }
@keyframes marcar-raia { from { stroke-dashoffset: 1; } }


/* ── 2 · A VIRADA DE CAMPO ─────────────────────────────────────────────
   Entre apertar Entrar e o painel aparecer existe uma espera de servidor, e
   hoje ela é tela parada com botão apertado — que é o estado em que as
   pessoas clicam de novo. A cortina é a resposta imediata a esse clique.

   ── POR QUE SÓ ENTRA, E NUNCA SAI ─────────────────────────────────
   A versão de estudo (testes/movimento.html) faz o ciclo inteiro: entra,
   segura, sai. Aqui não dá, e o motivo é o navegador: num POST comum a
   página velha continua na tela até a resposta chegar, e então é TROCADA.
   Quem faz a cortina sair é a navegação.

   Se a animação tivesse fase de saída, uma resposta rápida cortaria a
   cortina no meio — pior do que não ter cortina nenhuma. Então ela entra em
   300 ms, cobre, e fica cobrindo: o que está por baixo já não importa.

   ── E SE A ESPERA FOR LONGA ───────────────────────────────────────
   Depois que o símbolo termina de se revelar, ele respira devagar. Uma tela
   100% imóvel por oito segundos lê como travada; a respiração custa uma
   keyframe e diz "ainda estou aqui".

   z-index 120: acima do 100 dos diálogos. A porta não tem diálogo nenhum,
   mas uma cortina que alguma coisa consegue furar não é cortina. */
.cortina-entrada {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--isg-grafite);
  transform: translateX(-101%);
  visibility: hidden;
}
/* O fio da rampa na borda de ataque — a mesma costura da p. 25, agora
   correndo na frente do campo grafite em vez de parada entre os dois. */
.cortina-entrada::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: -3px; width: 3px;
  background: linear-gradient(180deg,
              var(--isg-amarelo) 0%, var(--isg-laranja) 54%, var(--isg-vermelho) 100%);
}
.cortina-simbolo { width: clamp(76px, 11vw, 116px); height: auto; }

/* A revelação. O retângulo do clip nasce achatado no pé do desenho e cresce
   para cima — e para cima é a direção da rampa do próprio símbolo (vermelho
   embaixo, amarelo em cima). Sai vermelho, passa pelo laranja e termina na
   estrela, que é a ordem em que o manual conta a marca (p. 06).

   transform-box: fill-box é obrigatório em SVG: sem ele a origem do
   transform é o sistema de coordenadas do <svg> inteiro, e o 50% 100% cai
   em outro lugar que não o pé do retângulo. */
.cortina-simbolo .revelo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

/* ── O ACERTO DE TEMPO, DEPOIS DE MEDIR ───────────────────────────
   O login responde em torno de 350 ms — a maior parte é a conferência da
   senha, que é lenta de propósito —, e nesse instante o navegador TROCA a
   página. Tudo o que a cortina tiver para fazer depois disso não acontece.

   A primeira versão varria em 300 ms e só então começava a revelar o
   símbolo. Resultado na prática: dava tempo de ver a varredura e mais nada.
   Pior, o símbolo aparecia por uma fração de segundo antes do corte, e um
   pedaço de logo piscando é exatamente o que a p. 09 não quer.

   Agora a cortina faz uma coisa só, e rápido: cobre em 220 ms. O que ela
   está cobrindo deixa de importar, e a apresentação de verdade acontece na
   tela seguinte — ver A ENTRADA EM QUADRA, aqui embaixo. As duas emendam
   sozinhas: as duas são o mesmo grafite.

   O símbolo só entra em cena aos 600 ms. Numa rede normal ele nunca vai ser
   visto, e é essa a intenção; ele existe para a conexão ruim, o servidor
   ocupado, o dia em que o login demora quatro segundos — e aí a tela tem o
   que mostrar em vez de um retângulo cinza parado. */
body.entrando .cortina-entrada {
  visibility: visible;
  animation: virada-entra .22s var(--curva) forwards;
}
body.entrando .cortina-simbolo .revelo {
  animation: revelar .74s var(--curva) .6s forwards;
}
body.entrando .cortina-simbolo {
  animation: respirar 2.6s ease-in-out 1.5s infinite;
}
@keyframes virada-entra { to { transform: translateX(0); } }
@keyframes revelar      { to { transform: scaleY(1); } }
@keyframes respirar     { 50% { opacity: .5; } }


/* ── 2b · A ENTRADA EM QUADRA ──────────────────────────────────────────
   A outra metade da cortina — e, na prática, a metade que as pessoas veem.

   A cortina cobre a espera do servidor e quem a tira da frente é a
   navegação: ela não pode ter final, e com uma resposta de 350 ms mal tem
   começo. Esta acontece na tela NOVA, com o painel já montado atrás. O tempo
   é inteiramente nosso e nada depende da velocidade do servidor.

   É onde a quadra cabe: ela é MARCADA linha por linha, como as linhas
   passadas antes do jogo (p. 21), segura um instante, e sobe.

   ── OS 350 ms DE PAUSA NÃO SÃO SOBRA ──────────────────────────────
   Sem eles a quadra termina de se desenhar e já sai, e o desenho nunca chega
   a ser LIDO — vira um borrão laranja. Com eles dá tempo de reconhecer que
   aquilo é uma quadra, que é o ponto inteiro da peça.

   ── A LINHA DO TEMPO ──────────────────────────────────────────────
     0,00 s  a quadra começa a ser marcada (as cinco linhas, 90 ms entre elas)
     0,70 s  desenho pronto
     1,05 s  o véu sobe, 500 ms, levando o fio da rampa na borda de fuga
     1,25 s  os cartões entram (a peça 5 já cuida disso sozinha)
     1,55 s  acabou

   Quem quiser a versão curta: trocar o desenho no base.html pelas quatro
   raias da pista e cortar os atrasos pela metade. Um segundo no total, menos
   presença. A quadra ficou porque a porta de entrada JÁ tem raias — repetir
   o mesmo desenho nas duas telas soma menos do que mostrar o outro.

   O véu termina fora da tela, então não precisa de JS para sumir: não há o
   que remover nem clique para atrapalhar. Durante a animação ele bloqueia
   mesmo — o painel atrás ainda não pode ser lido nem clicado. */
.veu-chegada {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: var(--isg-grafite);
  animation: subir-veu .5s var(--curva) 1.05s forwards;
}
/* O fio da rampa na borda de fuga: a última coisa que sai da tela, e a
   assinatura da marca na saída (p. 19). */
.veu-chegada::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg,
              var(--isg-vermelho), var(--isg-laranja), var(--isg-amarelo));
}
@keyframes subir-veu { to { transform: translateY(-101%); } }

.veu-quadra {
  width: clamp(200px, 26vw, 320px);
  height: auto;
}
.veu-quadra rect, .veu-quadra line, .veu-quadra circle, .veu-quadra path {
  fill: none;
  stroke: var(--isg-laranja);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  animation: marcar-raia .7s var(--curva) backwards;
}
.veu-quadra .q2 { animation-delay: .09s; }
.veu-quadra .q3 { animation-delay: .18s; }
.veu-quadra .q4 { animation-delay: .27s; }
.veu-quadra .q5 { animation-delay: .36s; }
/* As cordas de bandeirinhas da piscina e outras linhas de apoio: existem no
   traçado, mas não são o que define o desenho. Meio traço a menos e um pouco
   de transparência bastam para elas ficarem atrás sem sumir. */
.veu-quadra .fina { stroke-width: .9; opacity: .6; }


/* ── 3 · O FLARE DA CONFIRMAÇÃO ────────────────────────────────────────
   Manual p. 23: flare é a luz intensa que entra na lente, e o manual diz
   para que ela serve — "conquista, superação", "sonho realizado". Então ela
   marca o que foi CONCLUÍDO, e nada mais: nunca em hover, nunca de enfeite.

   O alvo é o aviso de sucesso, que é o único elemento do portal que só
   existe no instante seguinte a algo dar certo. Um selo "aceito" fica na
   tela o dia inteiro; o aviso, não.

   position: absolute no ::after é o que o mantém fora do fluxo — sem isso
   ele viraria mais um item do flex de .aviso.com-icone e empurraria o
   texto para o lado.

   ── POR QUE A LUZ CRESCE ATÉ 1, E NÃO PASSA DISSO ─────────────────
   A versão de estudo estoura a caixa: vai a 1.35 e transborda, que é o que
   um flare faz numa lente. Para transbordar sem sujar o canto arredondado
   seria preciso `overflow: hidden` no aviso — e aviso TEM LINK dentro
   ("veja o apontamento", "tente de novo"). O anel de foco do portal é um
   outline com 2px de afastamento: ele mora FORA da borda do link, e num
   pai com overflow escondido ele é cortado justamente para quem navega por
   teclado e depende dele para saber onde está.

   Um efeito de 600 ms não vale o preço de um anel de foco pela metade.
   Aqui a luz nasce a 0.8 e para em 1: cresce e apaga dentro da própria
   caixa, sem nada para recortar. */
.aviso.ok { position: relative; }
.aviso.ok::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(140px 90px at 6% 50%,
              rgba(255, 222, 0, .5), rgba(255, 131, 0, .2) 42%, transparent 72%);
  animation: flare .6s var(--curva-saida);
}
@keyframes flare {
  0%   { opacity: 0; transform: scale(.8); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}


/* ── 4 · A RAIA DE PROGRESSO ───────────────────────────────────────────
   A barra já usava a rampa da marca. O que faltava era a pista: o listrado
   correndo no sentido do avanço, que é o que diferencia "está subindo" de
   "parou nos 62%".

   ── POR QUE A LISTRA É RETA, E NÃO INCLINADA ──────────────────────
   Listra inclinada é o clichê da barra de progresso, e foi a primeira
   tentativa. Só que ela não emenda: um repeating-linear-gradient em ângulo,
   ladrilhado numa caixa de largura arbitrária, deixa costura visível a cada
   volta, e corrigir isso exige casar o tamanho do ladrilho com o período do
   ângulo — conta que quebra a cada ajuste de altura.

   Com 90° o período é horizontal: um ladrilho de 14px contém exatamente um
   ciclo, e deslocar 14px emenda sozinho, para sempre. A 10px de altura a
   diferença entre reta e inclinada não se enxerga; a costura, sim. */
.progresso .feito {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .22) 0 5px, rgba(255, 255, 255, 0) 5px 14px),
    linear-gradient(90deg,
      var(--isg-vermelho), var(--isg-laranja) 55%, var(--isg-amarelo));
  background-size: 14px 100%, 100% 100%;
  animation: correr-raia .7s linear infinite;
}
@keyframes correr-raia { to { background-position: 14px 0, 0 0; } }


/* ── 5 · ENTRADA EM QUADRA ─────────────────────────────────────────────
   Os cartões entram em fila: 45 ms de diferença, 6 px de subida.

   É o gesto mais curto do sistema porque é o que mais se repete. Quem abre
   o painel vinte vezes por dia não pode assistir a um espetáculo em nenhuma
   delas — o limite aqui não é o bom gosto, é a vigésima vez.

   ── backwards, E NUNCA forwards ───────────────────────────────────
   Com forwards o valor animado fica GRAVADO no elemento depois do fim, e
   valor de animação vence declaração normal: o transform: translateY(-1px)
   do hover do cartão simplesmente pararia de funcionar, para sempre, em
   todos os cartões. Com backwards o fill só vale para trás — durante o
   atraso —, e no fim o cartão volta a obedecer o CSS de sempre.

   O atraso para de crescer no oitavo. Numa lista de quarenta, um atraso
   proporcional deixaria o último cartão esperando quase dois segundos para
   existir; e ninguém percebe escalonamento depois do oitavo item. */
.apontamento { animation: entrar-quadra .28s var(--curva-saida) backwards; }
.apontamento:nth-child(2) { animation-delay: .045s; }
.apontamento:nth-child(3) { animation-delay: .090s; }
.apontamento:nth-child(4) { animation-delay: .135s; }
.apontamento:nth-child(5) { animation-delay: .180s; }
.apontamento:nth-child(6) { animation-delay: .225s; }
.apontamento:nth-child(7) { animation-delay: .270s; }
.apontamento:nth-child(n+8) { animation-delay: .315s; }
@keyframes entrar-quadra { from { opacity: 0; transform: translateY(6px); } }


/* ── 6 · A RAMPA DE ESTADO ─────────────────────────────────────────────
   O estado do apontamento não salta de cor: ele CAMINHA pela rampa, na
   ordem do manual (p. 11). Rascunho, enviado, em análise, aceito.

   Vale nas telas que trocam pedaço sem recarregar — o painel de detalhe da
   caixa de entrada é a principal. Onde a página recarrega inteira a
   transição não tem de onde partir e simplesmente não acontece: custo zero,
   e no dia em que aquela tela virar parcial, ela já está pronta. */
.selo, .selo-prazo, .selo-rascunho, .selo-devolvido, .selo-urgencia {
  transition: background var(--t-gesto) var(--curva),
              color var(--t-gesto) var(--curva);
}


/* ── 8 · O CORREDOR ────────────────────────────────────────────────────
   A única figura desenhada do portal, e vale dizer de onde ela vem: o
   manual NÃO tem figura humana ilustrada. Tem atleta em FOTOGRAFIA (p. 23),
   e é de lá que sai a licença — o capítulo inteiro fala de "conquista,
   superação e desafio" e de "sensação de avanço". O corredor é essa frase
   desenhada, e é uma decisão de marca tomada por quem é dono dela, não uma
   interpretação minha do manual.

   Ele aparece em dois lugares, e os dois são o mesmo momento: o esforço de
   quem entrega. No BOTÃO, atravessando. Na ESPERA de um envio, correndo no
   lugar enquanto o arquivo sobe.

   ── O DESENHO ─────────────────────────────────────────────────────
   Duas poses empilhadas numa figura só de 22×52, e a máscara mostra uma de
   cada vez. Duas, e não uma: pose única deslizando lê como patinação, não
   como corrida — e a alternância a 10 quadros por segundo é o mínimo para o
   olho ler passada.

   ── POR QUE background-position, E NÃO transform ──────────────────
   Porque são DUAS coisas ao mesmo tempo no mesmo elemento: ele atravessa E
   troca de pose. Dois `transform` na mesma regra brigam — o último ganha.
   Com `background-position-x` para a travessia e `background-position-y`
   para a pose, são duas propriedades independentes e duas animações que não
   se atrapalham. E como é fundo, ele nasce recortado pela própria caixa do
   botão: entra e sai pelas bordas sem precisar de `overflow: hidden`, que
   cortaria o anel de foco. */
:root {
  --corredor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 52' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='4.5' r='2.4' fill='white' stroke='none'/%3E%3Cpath d='M12.5 7.5 L9 16'/%3E%3Cpath d='M12 9.5 L16.5 12 L15.5 15.5'/%3E%3Cpath d='M11.5 10 L6.5 8.5'/%3E%3Cpath d='M9 16 L5.5 21 L3 25'/%3E%3Cpath d='M9 16 L13.5 19 L12.5 25'/%3E%3Ccircle cx='13.5' cy='30.5' r='2.4' fill='white' stroke='none'/%3E%3Cpath d='M12.5 33.5 L9 42'/%3E%3Cpath d='M12 35.5 L15.5 39 L17 42'/%3E%3Cpath d='M11.5 36 L7.5 37.5'/%3E%3Cpath d='M9 42 L8.5 47 L7.5 51'/%3E%3Cpath d='M9 42 L11.5 46 L15.5 49'/%3E%3C/svg%3E");
  /* O mesmo desenho em verde, para o fundo claro do aviso de sucesso:
     um corredor branco ali seria um vulto. Segunda figura e nao um
     `filter` sobre a primeira — filtro para chegar a uma cor exata e
     uma conta ilegivel que ninguem consegue ajustar depois. */
  --corredor-verde: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 52' fill='none' stroke='%231B6B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='4.5' r='2.4' fill='%231B6B3A' stroke='none'/%3E%3Cpath d='M12.5 7.5 L9 16'/%3E%3Cpath d='M12 9.5 L16.5 12 L15.5 15.5'/%3E%3Cpath d='M11.5 10 L6.5 8.5'/%3E%3Cpath d='M9 16 L5.5 21 L3 25'/%3E%3Cpath d='M9 16 L13.5 19 L12.5 25'/%3E%3Ccircle cx='13.5' cy='30.5' r='2.4' fill='%231B6B3A' stroke='none'/%3E%3Cpath d='M12.5 33.5 L9 42'/%3E%3Cpath d='M12 35.5 L15.5 39 L17 42'/%3E%3Cpath d='M11.5 36 L7.5 37.5'/%3E%3Cpath d='M9 42 L8.5 47 L7.5 51'/%3E%3Cpath d='M9 42 L11.5 46 L15.5 49'/%3E%3C/svg%3E");
}

/* ── 8a · No hover do botão ENTRAR, e só nele ──────────────────────────
   Ele valeu para todo botão do portal por um tempo, e foi tirado.

   O motivo é o que eu já tinha medido antes de ele ser escolhido, e que só
   ficou evidente com o portal em uso: o botão tem 34 a 42 px de altura e um
   rótulo atravessado no meio, então o corredor passa POR TRÁS do texto. Num
   "Enviar" de 86 px ele aparece por um terço de segundo, espremido, e o que
   se vê não é uma corrida — é sujeira passando atrás da palavra.

   No Entrar do login nada disso acontece: o botão é `largo`, ocupa a coluna
   inteira do formulário, e o corredor tem pista de verdade para atravessar.
   É também o único botão do portal que alguém olha antes de apertar, em vez
   de caçar no meio de uma tela cheia.

   Os outros botões ficaram sem animação de hover — só a troca de cor. Não
   entrou raia de volta no lugar: o pedido foi tirar, e um botão que só muda
   de cor no hover não está faltando nada.

   A classe vem do template (templates/entrar.html) e existe só lá. */
.botao.com-corredor { position: relative; isolation: isolate; }
.botao.com-corredor::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 26px; margin-top: -13px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--corredor);
  background-repeat: no-repeat;
  background-size: 22px 52px;
  background-position-x: -26px;    /* parado fora da borda esquerda */
  background-position-y: 0;
  opacity: 0;
}
.botao.com-corredor:hover::after {
  animation: corredor-cruza .62s var(--curva),
             corredor-passo .2s steps(1) infinite;
}
@keyframes corredor-cruza {
  0%   { background-position-x: -26px; opacity: 0; }
  14%  { opacity: .92; }
  86%  { opacity: .92; }
  100% { background-position-x: calc(100% + 26px); opacity: 0; }
}
@keyframes corredor-passo {
  0%, 49%   { background-position-y: 0; }
  50%, 100% { background-position-y: -26px; }
}

/* ── 8b · A PROVA: a espera de um envio ────────────────────────────────
   Subir doze fotos da qualitativa, quatro extratos do movimento mensal ou
   responder um apontamento com anexo leva segundos de verdade — e nesses
   segundos a tela fica parada com o botão apertado, que é o estado em que
   as pessoas clicam de novo.

   Aqui o corredor tem espaço: a tela inteira, e não 42 px atrás de um
   rótulo. Ele corre NO LUGAR e a pista passa por baixo — quem dá a
   velocidade são os marcos de distância, não as raias, porque raia lisa
   deslizando não se enxerga.

   Roda em laço porque a espera é indeterminada de verdade: o portal sobe
   arquivo no POST comum, sem upload assíncrono, então não existe
   porcentagem honesta para mostrar. Quem encerra é a navegação — a mesma
   lógica da cortina do login. */
.prova-envio {
  position: fixed; inset: 0; z-index: 115;
  display: none;
  place-items: center;
  background: var(--isg-grafite);
}
body.enviando .prova-envio { display: grid; animation: prova-abre .2s var(--curva); }
@keyframes prova-abre { from { opacity: 0; } }

.prova-pista {
  position: absolute; left: 0; right: 0; bottom: 22%;
  height: 88px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .34) 0 3px, transparent 3px 120px),
    linear-gradient(180deg,
      transparent 0 27px, rgba(255, 255, 255, .16) 27px 28px,
      transparent 28px 57px, rgba(255, 255, 255, .16) 57px 58px,
      transparent 58px 87px, rgba(255, 255, 255, .16) 87px 88px);
  background-size: 120px 100%, 100% 100%;
}
body.enviando .prova-pista { animation: pista-corre .5s linear infinite; }
@keyframes pista-corre { to { background-position: -120px 0, 0 0; } }

/* O corredor grande é o MESMO desenho do botão, só que ampliado — uma
   figura só no portal inteiro. Corre no lugar: a pista é que anda. */
.prova-corredor {
  position: absolute; left: 34%; bottom: calc(22% + 26px);
  width: 44px; height: 52px;
  background-image: var(--corredor);
  background-repeat: no-repeat;
  background-size: 44px 104px;
  background-position: 0 0;
}
body.enviando .prova-corredor {
  animation: corredor-passo-gr .2s steps(1) infinite,
             corredor-pulo .2s steps(1) infinite;
}
@keyframes corredor-passo-gr {
  0%, 49%   { background-position-y: 0; }
  50%, 100% { background-position-y: -52px; }
}
/* O pulo de 2 px no mesmo compasso das pernas. Sem ele as pernas trocam e o
   corpo desliza — é o que separa correr de patinar. */
@keyframes corredor-pulo {
  0%, 49%   { transform: translateY(0); }
  50%, 100% { transform: translateY(-2px); }
}

.prova-texto {
  position: absolute; top: 24%; left: 0; right: 0;
  margin: 0; padding: 0 var(--e5);
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(17px, 2.4vw, 22px); font-weight: 700;
  color: var(--tinta-clara);
}
.prova-texto span {
  display: block; margin-top: var(--e2);
  font-family: var(--fonte-texto);
  font-size: var(--t-peq); font-weight: 400;
  color: var(--isg-cinza);
}

/* ── 8c · A CHEGADA: o aviso de sucesso ────────────────────────────────
   A outra metade da história, na tela seguinte. Ele atravessou a espera;
   aqui ele cruza a linha.

   Divide o aviso com o flare de propósito, e na ordem certa: o corredor
   atravessa em 1,1 s e o flare acende aos 0,8 s — no instante do
   cruzamento, e não no fim. É a luz da chegada (p. 23), não um brilho
   solto. */
.aviso.ok::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 26px; margin-top: -13px;
  pointer-events: none;
  background-image: var(--corredor);
  background-repeat: no-repeat;
  background-size: 22px 52px;
  background-position-x: -26px;
  background-position-y: 0;
  opacity: 0;
  background-image: var(--corredor-verde);
  /* Seis repeticoes, e nao `infinite`: 6 x 0,2 s cobre a travessia de 1,1 s
     e para. Um laco infinito num elemento que ja sumiu continua acordando o
     compositor de graca, para sempre, em toda tela que tiver um aviso. */
  animation: corredor-cruza 1.1s var(--curva),
             corredor-passo .2s steps(1) 6;
}


/* ── 7 · QUEM PEDIU PARA A TELA FICAR QUIETA ───────────────────────────
   O bloco global lá de cima zera a duração de tudo, e para quase tudo isso
   basta: a animação salta para o fim, e o resultado é a tela pronta.

   Estes quatro, não. Uma cortina de tela inteira em 0,01 ms é um flash
   preto, e um clip que salta é o símbolo piscando. Aqui eles são
   desligados de verdade, e não acelerados. */
@media (prefers-reduced-motion: reduce) {
  .cortina-entrada,
  body.entrando .cortina-entrada,
  .veu-chegada { display: none; }
  .cortina-simbolo .revelo { transform: none; }
  .aviso.ok::after { display: none; }
  .progresso .feito {
    animation: none;
    background-image: linear-gradient(90deg,
      var(--isg-vermelho), var(--isg-laranja) 55%, var(--isg-amarelo));
    background-size: 100% 100%;
  }
  /* O corredor não tem versão parada que faça sentido: figura imóvel no meio
     de uma pista não comunica "enviando", comunica "travou". Some, e o texto
     ao lado passa a carregar o recado sozinho — que é o que ele já faz para
     quem usa leitor de tela. */
  .botao.com-corredor::after, .aviso.ok::before,
  .prova-corredor { display: none; }
  .prova-pista { animation: none; }
}


/* ── ALVOS DE TOQUE QUE A CONFERÊNCIA MEDIU (09/10/2026) ──────────────
   A regra da casa é 44px abaixo de 640px (MARCA.md, Responsividade). A
   medição a 375px achou controles abaixo dela — a maior parte na tela de
   fotos do proponente, que é justamente a que ele usa no telefone:
     · "Não executada" / "Não há fotos": 25px de altura;
     · os recortes (Tudo, Falta você…) e o Por etapa / Por bloco: 31–32px;
     · o × de remover foto (20px) e a caixa de marcar (22px), na mesma
       miniatura;
     · o × dos avisos dispensáveis: 18px;
     · na porta, "Esqueci minha senha" e "Voltar ao início": 15–17px;
     · na ISG, a pastilha de vínculo (25px) e os botões e seletores da
       tabela de Usuários (34px), o "Voltar à fila" e os "seguir" (22px).
   O desenho dos que vivem sobre a miniatura não cresce — uma caixa de 44px
   cobriria a foto inteira. Cresce a ÁREA de toque, por um ::after
   invisível, como o `.tirar-anexo` já fazia. Na miniatura de 72px as duas
   áreas se encostam no meio sem se sobrepor (a caixa vai de 0 a 36px, o ×
   de 37 a 72), e a metade de baixo continua abrindo a foto. */
@media (max-width: 640px) {
  .sem-foto-gatilho,
  .recorte,
  .modo-visao,
  .pastilha-vinculo,
  .voltar-fila,
  .link-seguir { min-height: 44px; }
  .modo-visao { display: flex; align-items: center; justify-content: center; }
  .link-seguir { display: inline-flex; align-items: center; }

  .tirar-foto { position: relative; }
  .tirar-foto::after,
  .marca-foto::after {
    content: "";
    position: absolute;
    inset: -11px;
  }

  .fechar-aviso {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: calc(-1 * var(--e3));
    margin-right: calc(-1 * var(--e3));
  }

  .linha-esqueci a,
  .porta-pe a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }

  .tabela-contas .grupo-controle,
  .tabela-contas .grupo-controle select,
  .tabela-contas .grupo-controle button { min-height: 44px; }
  .tabela-contas .grupo-controle button { min-width: 44px; }

  /* A caixa de marcar da Caixa de entrada vai a 24px — o mínimo da WCAG
     2.5.8 —, e não a 44: ela divide a linha com o link do item inteiro, e
     uma caixa maior empurraria o credor para a segunda linha em toda a
     fila. Quem não alcança a caixa abre o item e decide lá. */
  .item-fila > input[type=checkbox],
  .marca-grupo input[type=checkbox] { width: 24px; height: 24px; }
}