/* ===========================================================================
   WAVEFRONT · wavefront.css
   Camada visual do Feixe 03 · Pulso 014 · SPECIALIST-DESIGN-02 · ofício de design

   FONTE DA VERDADE: Wavefront_Design_System_v2_1.md
   Disposição: Wavefront_Superficies_T2_v0_2.md e Wavefront_Superficies_T3_v0_2.md

   Sem passo de compilação. Nenhum recurso externo. Nenhuma fonte da web.
   Só estilo: nada aqui fala com rota, sessão, crédito ou banco.

   WAVEFRONT METHOD · A LUMENOS MODULE · CREATED BY FERNANDO SCHIMMING · © 2026
   =========================================================================== */

/* --- 01 · as fichas ------------------------------------------------------ */

:root{
  /* superfícies — OPÇÃO D, decisão do Condutor no Pulso 014.
     Os três sobem juntos e MANTÊM A MESMA DISTÂNCIA ENTRE SI: é isso que faz
     o cartão continuar parecendo cartão depois de o fundo clarear.
     Antes: #0C1322 · #131B2E · #192238 — o fundo lia preto no telefone.
     O template do roadmap sobe junto, na v0.7. */
  --fundo:#16274D; --bloco:#20335E; --cartao:#2A4173; --campo:#16274D;
  --linha:rgba(255,255,255,.09); --linha-forte:rgba(255,255,255,.18);

  /* texto */
  /* O legível clareou de #7F89A2 para #858FA7: no fundo D o antigo media
     4,19:1 e o piso do sistema é 4,5. Não é escolha — é o mínimo que passa. */
  --txt:#F1F5F9; --txt-suave:#9AA6BE; --txt-apagado:#65708C; --txt-legivel:#858FA7;

  /* marca */
  --laranja:#FF6B3D;
  --gradiente:linear-gradient(90deg,#4D7FFF,#8A63FF,#FF6B3D,#DD3333);
  --frio:linear-gradient(90deg,#4D7FFF,#8A63FF);

  /* ondas — código estrutural, nunca estado de aplicação */
  --onda0:var(--txt-suave); --onda1:#F5B759; --onda15:#5B9BFF; --onda2:#9B7BFF;

  /* estados de aplicação */
  /* O erro clareou de #E45C5C para #E66666, pela mesma razão: media 4,18:1. */
  --feito:#2BAE73; --foco:rgba(241,245,249,.8); --erro:#E66666;
  --recusa:#BA368E; --desabilitado:#65708C;

  /* espaçamento */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  /* forma */
  --raio-bloco:16px; --raio-cartao:12px; --raio-controle:9px;
  --raio-selo:7px; --raio-check:5px; --raio-pilula:99px; --borda:1px;
  --largura:1280px; --leitura:880px; --coluna-form:440px; --lateral:256px;

  /* tipo */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;

  /* movimento */
  --t-estado:150ms; --t-entrada:200ms;
}

/* --- 02 · a base -------------------------------------------------------- */

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

html,body{margin:0;padding:0}

body{
  background:var(--fundo);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* A faixa da marca — o gradiente vive aqui e em mais três lugares, nunca além. */
.faixa{
  position:fixed; top:0; left:0; right:0;
  height:3px; background:var(--gradiente); z-index:50;
}

/* --- 03 · os degraus de tipo -------------------------------------------- */

 /* O título de tela desceu de 32 para 24. Decisão do Condutor, Pulso 014.
    24 NÃO é valor novo: já era o título na tela estreita. O 32 fica reservado
    para as duas coisas que precisam dominar — o título do roadmap e o relógio
    da espera. Um título de 32 px em toda página deixa a ferramenta pesada. */
.t-tela   {font-size:24px;   font-weight:700; letter-spacing:-.02em; line-height:1.6; margin:0}
.t-roadmap{font-size:32px;   font-weight:700; letter-spacing:-.02em; line-height:1.6; margin:0}
.t-secao  {font-size:15.5px; font-weight:650; letter-spacing:-.01em; margin:0}
.t-cartao {font-size:15.5px; font-weight:650; margin:0}
.corpo    {font-size:15px;   line-height:1.6; margin:0}
.corpo-p  {font-size:13.5px; line-height:1.6; margin:0}

.sobrancelha{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--txt-legivel);
}
.rotulo{
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--txt-legivel); display:block;
}
.mono{font-family:var(--mono)}

.suave{color:var(--txt-suave)}
.legivel{color:var(--txt-legivel)}

/* O apagado reprova em contraste de propósito: só decoração desligada.
   NUNCA para texto que a pessoa precise ler. */
.apagado{color:var(--txt-apagado)}

/* A marca-palavra. O GRADIENTE ATRAVESSA A PALAVRA INTEIRA, ponto incluído.
   Decisão do Condutor, Pulso 014. Era um ponto final laranja.
   A razão é medida: uma rampa de quatro paradas dentro de um caractere de
   19 px vira uma cor só, e quase sempre a errada — o mesmo defeito que a
   textura da espera teve na v1.6. A palavra tem largura; o ponto não tinha.
   Este é o QUINTO lugar do gradiente, e ele continua não tendo um sexto.
   NÃO usar o gradiente em texto que não seja a marca. */
.marca,.marca-barra{
  margin:0; color:var(--txt);
  background-image:var(--gradiente);
  -webkit-background-clip:text; background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .marca,.marca-barra{-webkit-text-fill-color:transparent}
}
.marca{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.6}
.marca-barra{font-size:19px;font-weight:650;letter-spacing:-.01em}

/* --- 04 · as colunas ---------------------------------------------------- */

.col-trabalho{max-width:var(--largura); margin:0 auto; padding:0 var(--e5)}
.col-leitura {max-width:var(--leitura);  margin:0 auto; padding:0 var(--e5)}
.col-form    {max-width:var(--coluna-form); margin:0 auto; padding:0 var(--e5)}

.topo-publico{padding-top:var(--e8)}   /* abaixo da faixa, sem barra */
.topo-sessao {padding-top:var(--e6)}   /* abaixo da barra de identidade */
.fim         {padding-bottom:var(--e8)}

/* A tela dividida. Um lado é expressão, o outro é o formulário.
   O painel de expressão usa --bloco para se separar do fundo sem uma terceira
   superfície. NÃO usar em tela com sessão: lá a barra de identidade já diz
   onde a pessoa está, e dividir a tela roubaria largura do trabalho. */
.tela{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.painel-expr{background:var(--bloco); padding:var(--e8) var(--e7);
  display:flex; flex-direction:column}
.painel-form{padding:var(--e8) var(--e7);
  display:flex; align-items:center; justify-content:center}
.painel-form > .dentro{width:100%; max-width:var(--coluna-form)}

/* O esqueleto de roadmap — a camada de expressão do painel esquerdo.
   Mostra o que a ferramenta produz, sem inventar conteúdo: só estrutura.
   As cores de onda aqui são código estrutural de um roadmap, que é o que
   isto representa. NÃO usar cor de onda em nenhum estado de aplicação. */
.esqueleto{margin:auto 0; display:flex; flex-direction:column; gap:var(--e5)}
.esq-onda{border-left:3px solid var(--c); padding-left:var(--e4)}
.esq-selo{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-legivel)}
.esq-barra{display:block;height:10px;border-radius:var(--raio-check);
  background:var(--cartao);margin-top:var(--e2)}

/* A grade da tela de entrada: 880 + 48 + 352 = 1280 */
.grade-entrada{display:grid; grid-template-columns:var(--leitura) 352px; gap:var(--e7)}

/* --- 05 · a casca com sessão -------------------------------------------- */
/* Barra LATERAL. Decisão do Condutor, Pulso 014 — substitui a barra superior
   de 64 px. É o padrão de ferramenta com área de trabalho, e cabe:
   256 + 880 de coluna de leitura + 96 de respiro = 1232, dentro dos 1280.
   NÃO usar nas superfícies públicas: lá não há sessão, e uma barra de
   navegação sem destino é moldura. */

 /* A casca PINTA o fundo. Não basta o body: quando a página roda dentro de
    um visualizador embutido, a propagação do fundo do body para a tela não
    acontece, e a área em volta dos blocos fica com o preto do contêiner. */
.casca{display:grid; grid-template-columns:var(--lateral) 1fr; min-height:100vh;
  background:var(--fundo)}
.conteudo{background:var(--fundo)}
 /* A LATERAL USA O MESMO FUNDO DA PÁGINA. Decisão do Condutor, Pulso 014.
    Antes ela era --bloco e o conteúdo era --fundo: lado a lado, o mais escuro
    perdia o azul e lia como cinza. Com o mesmo fundo nos dois não há
    comparação — e os blocos em --bloco passam a ser as únicas áreas azuis,
    que é onde o azul deve estar. O recorte é o fio, não a cor. */
.lateral{
  background:var(--fundo); border-right:var(--borda) solid var(--linha-forte);
  padding:var(--e5); display:flex; flex-direction:column; gap:var(--e6);
  margin-top:3px;
}
.lateral nav{display:flex; flex-direction:column; gap:var(--e1)}
.lateral .rodape{margin-top:auto; display:flex; flex-direction:column; gap:var(--e3)}
.conteudo{padding:var(--e6) var(--e7) var(--e8); background:var(--fundo)}

/* O item ativo ganha superfície, não sublinhado: numa coluna vertical o fio
   de 2 px some. NÃO usar --foco como marca de ativo — o sistema veta. */
.item{
  font-size:15px; font-weight:650; color:var(--txt-legivel);
  text-decoration:none; height:48px; display:flex; align-items:center;
  padding:0 var(--e3); border-radius:var(--raio-controle);
  transition:color var(--t-estado), background var(--t-estado);
}
.item:hover{color:var(--txt)}
.item.ativo{color:var(--txt); background:var(--bloco)}

/* A pílula do saldo. Só vira erro em ZERO — não há aviso de "acabando". */
.saldo{
  display:inline-flex; align-items:center; gap:var(--e2);
  border:var(--borda) solid var(--linha); border-radius:var(--raio-pilula);
  padding:var(--e2) var(--e3);
}
.saldo .rot{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-legivel)}
.saldo .num{font-family:var(--mono);font-size:15px;color:var(--txt)}
.saldo.zero .num{color:var(--erro)}

/* --- 06 · blocos e cartões ---------------------------------------------- */

 /* A borda é --linha-forte, não --linha. Decisão do Condutor, Pulso 014:
    superfície escura sobre superfície escura desaparece, e o sistema não tem
    sombra para separar. A borda é o único recorte disponível. */
.bloco {background:var(--bloco);  border-radius:var(--raio-bloco);  padding:var(--e5);
        border:var(--borda) solid var(--linha-forte)}
.cartao{background:var(--cartao); border-radius:var(--raio-cartao); padding:var(--e4);
        border:var(--borda) solid var(--linha-forte)}

/* O cartão de roadmap. A borda NUNCA é cor de onda: cor de onda é código
   estrutural de dentro do roadmap, não estado de aplicação. */
.cartao-roadmap{display:block; text-decoration:none; color:inherit;
                transition:border-color var(--t-estado)}
 /* O HOVER MUDA A SUPERFÍCIE, NÃO A BORDA. Decisão do Condutor, Pulso 014.
    Uma borda que clareia pisca; uma superfície que sobe um degrau se percebe
    sem chamar atenção. Branco está fora: é a cor do primário sólido, e um
    cartão de borda branca promete ser botão. Gradiente também: cinco lugares,
    e ele não ganha um sexto. */
.cartao-roadmap:hover{background:var(--bloco)}
.cartao-roadmap:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
.cartao-roadmap .titulo{font-size:15.5px;font-weight:650;color:var(--txt);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 /* A data e as contagens sobem de --txt-legivel para --txt-suave: são a única
    forma de distinguir um roadmap de outro na lista, e estavam apagadas. */
.cartao-roadmap .meta{font-family:var(--mono);font-size:12px;color:var(--txt-suave);
  margin:var(--e2) 0 0}
.cartao-roadmap .meta.forte{color:var(--txt)}

.grade-cartoes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4)}

/* O cartão de pedido, na página de aprovação. A nota vem antes do e-mail:
   o e-mail identifica, a nota é o que sustenta a decisão.
   O botão fica a --e6 da nota, para não haver clique de raspão. */
 /* O PADRÃO DE BLOCO COM AÇÃO: texto à esquerda, botão à direita, alinhados
    pelo meio. Decisão do Condutor, Pulso 014 — vale para todo bloco cuja ação
    fica no topo. Botão embaixo do texto só quando ele é a ação da página
    inteira, não a ação daquele bloco. */
.pedido{display:flex; gap:var(--e6); align-items:flex-start}
.pedido.meio{align-items:center}
.pedido .acao .btn{white-space:nowrap}
.pedido .corpo{flex:1; min-width:0}
.pedido .acao{flex:none}
.cartao.aprovado{border-left:3px solid var(--feito); border-radius:0 var(--raio-cartao) var(--raio-cartao) 0}
.cartao.aprovado .corpo{color:var(--txt-suave)}

/* --- 07 · campos -------------------------------------------------------- */

.campo{
  width:100%; background:var(--campo); color:var(--txt);
  border:var(--borda) solid var(--linha); border-radius:var(--raio-controle);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  padding:0 var(--e3);
  transition:border-color var(--t-estado);
}
.campo::placeholder{color:var(--txt-legivel); font-style:italic}
.campo:focus{outline:2px solid var(--foco); outline-offset:2px; border-color:var(--linha-forte)}
.campo:disabled{color:var(--txt-suave); cursor:not-allowed}
.campo.em-erro{border-color:var(--erro)}

/* Campo curto: 48 px = --e3 + linha de 24 + --e3. Acima do piso de toque de 44. */
input.campo{height:48px}

/* Campo longo: 240 px de altura mínima. Um campo baixo diz "escreva pouco",
   e pouco texto é a causa número um de roadmap ruim. */
textarea.campo{min-height:240px; padding:var(--e3); resize:vertical}
textarea.campo.nota{min-height:96px}     /* --e3 + 3 linhas de 24 + --e3 */
textarea.campo.recuado{min-height:120px} /* metade dos 240, durante a espera */

.linha-erro{font-size:13.5px;color:var(--erro);margin:var(--e1) 0 0}
.contador{font-family:var(--mono);font-size:12px;color:var(--txt-legivel);
          text-align:right;margin:var(--e1) 0 0}
.contador.fora{color:var(--erro)}

/* Envio de arquivo */
.envio{
  border:var(--borda) dashed var(--linha); border-radius:var(--raio-controle);
  padding:var(--e5); text-align:center; color:var(--txt-legivel);
  transition:border-color var(--t-estado);
}
.envio:hover{background:var(--cartao)}
/* Arquivo carregado: a borda deixa de ser tracejada — o convite virou estado. */
.envio.carregado{border-style:solid; border-color:var(--feito); color:var(--txt); text-align:left}
.envio.carregado .nome{font-family:var(--mono); font-size:13.5px; color:var(--txt)}

/* Caixa de marcar. 18 px com raio de 5 — a exceção declarada da escala. */
 /* A caixa alinha pelo CENTRO ÓPTICO da primeira linha do rótulo:
    uma linha de 15 px a 1.6 tem 24 px, e a caixa de 18 px centra em 3 px. */
.check{display:flex; align-items:flex-start; gap:var(--e3)}
.check input{width:18px;height:18px;margin:3px 0 0;flex:none;
  accent-color:var(--feito); border-radius:var(--raio-check)}
.check > div{flex:1; min-width:0}
.check .rot-linha{display:block}
.check .rot-linha{font-size:15px;color:var(--txt)}
.check .bonus{font-size:13.5px;color:var(--txt-legivel);margin:var(--e1) 0 0}

/* --- 08 · botões -------------------------------------------------------- */

.btn{
  font-family:var(--sans); font-size:15px; font-weight:650;
  height:48px; padding:0 var(--e5);
  border-radius:var(--raio-controle); background:transparent;
  cursor:pointer; transition:border-color var(--t-estado), color var(--t-estado);
}
/* Primário: SÓLIDO CLARO. Decisão do Condutor, Pulso 014.
   Mede 16,94:1 — o maior par do sistema.
   Era borda laranja, e o laranja saiu por duas razões: a assinatura estava
   sendo usada 100 vezes maior do que foi desenhada, e "clique" não é a mesma
   ideia que "aqui uma coisa termina e outra começa", que é o que o laranja diz.
   UM SÓLIDO CLARO POR TELA. Dois é a mesma doença um degrau abaixo.
   NÃO usar para ação destrutiva: destrutiva nunca é sólida. */
 /* OS TRÊS DEGRAUS, e o executor escolhe por esta regra:
    btn-1 SÓLIDO CLARO — a ação da página. UM POR TELA, sempre. Numa tela de
      erro cuja única saída é um botão, esse botão é o primário.
    btn-2 BORDA — alternativa, secundária, ou a ação de um bloco.
    btn-txt TEXTO — terciária: ver todos, trocar, desfazer.
    A REGRA DO HOVER, igual nos três: o hover SOBE UM DEGRAU NO MESMO EIXO,
    nunca troca de tipo. Um secundário que fica sólido no hover vira primário
    por um instante, e a hierarquia pisca. */
.btn-1{background:var(--txt); border:var(--borda) solid var(--txt); color:var(--fundo)}
.btn-1:hover{background:#FFFFFF; border-color:#FFFFFF}
.btn-2{border:var(--borda) solid var(--linha-forte); color:var(--txt); background:transparent}
.btn-2:hover{background:var(--cartao)}
.btn-txt{border:0;padding:0;height:48px;color:var(--txt-legivel);font-weight:650;background:none}
.btn-txt:hover{color:var(--txt)}
/* Largura: o botão só ocupa a linha inteira quando a coluna É o formulário.
   Dentro de um bloco largo, ele tem a largura do seu texto. */
.btn.centro{display:block; margin-left:auto; margin-right:auto}
.btn:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
.btn:disabled{background:var(--linha); border-color:transparent;
              color:var(--desabilitado); cursor:not-allowed}
.btn.largura{width:100%}

/* Carregando: a largura TRAVA no valor de repouso, para o botão não pular. */
.btn.carregando{min-width:var(--trava,auto); color:var(--txt-legivel); pointer-events:none}

/* --- 09 · seletor de caminho -------------------------------------------- */
/* Dois rótulos que trocam o formulário sem trocar de página.
   NUNCA usa --foco como marca de ativo, NUNCA usa laranja,
   e NUNCA vira menu suspenso na tela estreita. */

.seletor{display:flex; gap:var(--e5); border-bottom:var(--borda) solid var(--linha)}
.seletor button{
  font-family:var(--sans); font-size:15px; font-weight:650;
  height:48px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--txt-legivel); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--t-estado);
}
.seletor button:hover{color:var(--txt)}
.seletor button[aria-selected="true"]{color:var(--txt); border-bottom-color:var(--txt)}
.seletor button:focus-visible{outline:2px solid var(--foco); outline-offset:2px}

/* --- 09b · divisor com rótulo -------------------------------------------
   Separa o caminho principal do alternativo. Deriva do fio de --linha e do
   degrau de rótulo de bloco. NÃO usar para separar seções de leitura:
   ali o espaço já separa, e um fio a mais é ruído. */

.divisor{display:flex; align-items:center; gap:var(--e4); margin:var(--e5) 0}
.divisor::before,.divisor::after{content:""; flex:1; height:1px; background:var(--linha)}
.divisor span{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--txt-legivel)}

/* --- 10 · mensagens de sistema ------------------------------------------ */
/* Traço de 3 px à esquerda, fundo do caso a 8%, e o canto reto do lado do traço. */

.msg{
  border-radius:0 var(--raio-controle) var(--raio-controle) 0;
  padding:var(--e4); font-size:15px; border-left:3px solid var(--linha-forte);
}
/* ERRO NO TOPO. Decisão do Condutor, Pulso 014.
   Uma falha da página inteira mora ACIMA do título, na largura do conteúdo:
   é a primeira coisa lida, e não disputa espaço com o que falhou.
   NÃO usar para erro de campo — esse fica colado no campo que o causou. */
.msg.topo{margin-bottom:var(--e6); max-width:none}
.msg + .msg{margin-top:var(--e3)}

/* A MENSAGEM PRESA. Peça 4 do sistema v2.5: quando o campo que falhou sai
   da vista, um aviso prende no alto da coluna de conteúdo até a pessoa
   voltar até ele. Primeiro uso de position:sticky no sistema; 3px abaixo
   dela fica a faixa da marca, que é fixa. */
.msg.presa{position:sticky; top:3px; z-index:40; background:var(--bloco)}
.msg.presa .acoes{display:flex; gap:var(--e2); margin-top:var(--e1)}
.msg-erro  {border-left-color:var(--erro);   background:rgba(230,102,102,.10)}
 /* A RECUSA USA O VERMELHO DO ERRO. Decisão do Condutor, Pulso 014:
    toda mensagem de falha usa a cor do estado, e ninguém precisa aprender
    uma cor a mais para entender que algo não deu certo.
    A ficha --recusa fica SEM USO — ver a seção 15 do canônico. */
.msg-recusa{border-left-color:var(--erro); background:rgba(230,102,102,.10)}
.msg-feito {border-left-color:var(--feito);  background:rgba(43,174,115,.08)}
.msg-aviso {border-left-color:var(--laranja);background:rgba(255,107,61,.08)}
 /* O TÍTULO TOMA A COR DO CASO. Decisão do Condutor, Pulso 014.
    Antes só o traço e o fundo carregavam o caso, e o título saía branco em
    todos — o que fazia um erro ler igual a um aviso. */
.msg strong{display:block}
.msg-erro   strong{color:var(--erro)}
.msg-recusa strong{color:var(--erro)}
.msg-feito  strong{color:var(--feito)}
.msg-aviso  strong{color:var(--laranja)}
.msg .detalhe{font-size:13.5px;margin:var(--e2) 0 0}

/* --- 11 · a espera ------------------------------------------------------ */

.relogio{font-family:var(--mono);font-size:32px;letter-spacing:-.02em;
         color:var(--txt);line-height:1.6;margin:0}

/* O módulo: 16 × 4 células de 10 px, vão --e1 = 220 × 52 px.
   Cada célula pega uma fatia do trecho FRIO da rampa pela posição na coluna.
   JAMAIS preenche numa direção: células acendendo da esquerda para a direita
   são uma barra de progresso disfarçada, e o servidor não emite sinal nenhum. */
.modulo{
  display:grid; grid-template-columns:repeat(16,10px);
  grid-auto-rows:10px; gap:var(--e1); width:220px;
}
.modulo .cel{
  width:10px;height:10px;border-radius:2px;
  background-image:var(--frio); background-size:220px 10px;
  animation:pulso 1800ms ease-in-out infinite;
}
@keyframes pulso{0%,100%{opacity:.15} 50%{opacity:.55}}

/* O carregamento curto — o mesmo material do módulo, em uma linha de seis.
   Para leitura de página, que é rápida. NÃO usar na espera da geração:
   lá o número do relógio é o que importa, e seis células não bastam. */
.modulo.mini{grid-template-columns:repeat(6,10px); width:84px}

/* A espera, centrada. Decisão do Condutor, Pulso 014. */
.espera{max-width:var(--leitura); margin:0 auto; text-align:center}
.espera .modulo{margin-left:auto; margin-right:auto}
.espera textarea{text-align:left}

/* --- 12 · a atribuição -------------------------------------------------- */
/* P3 · em toda renderização, sem exceção e sem abreviação. */

.atribuicao{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--txt-legivel); line-height:1.6;
}

/* --- 13 · utilidades de espaço ------------------------------------------ */

.e1{margin-top:var(--e1)} .e2{margin-top:var(--e2)} .e3{margin-top:var(--e3)}
.e4{margin-top:var(--e4)} .e5{margin-top:var(--e5)} .e6{margin-top:var(--e6)}
.e7{margin-top:var(--e7)} .e8{margin-top:var(--e8)}
.vazio{color:var(--txt-legivel); font-size:15px}
/* O grupo de ação: o botão e a linha que o explica andam juntos, e o grupo
   inteiro se separa do que vem depois. */
.grupo-acao{margin-bottom:var(--e7)}

/* --- 14 · a tela estreita ----------------------------------------------- */
/* Ponto de quebra único: 980 px. Desenhada no mesmo ato que a larga. */

@media (max-width:980px){
  .col-trabalho,.col-leitura,.col-form{padding:0 var(--e5)}
  .topo-publico{padding-top:var(--e5)}
  .t-tela,.marca{font-size:24px}

  /* Os estímulos vão para CIMA do campo, nunca para baixo:
     abaixo do campo, a pessoa já escreveu. */
  .grade-entrada{grid-template-columns:1fr; gap:var(--e5)}
  .grade-entrada .estimulos{order:-1}

  .grade-cartoes{grid-template-columns:1fr}

  /* A tela dividida vira uma coluna. O painel de expressão continua em cima,
     porque é ele que diz o que é isto — mas o esqueleto sai: ele explica
     numa tela larga e vira enfeite numa estreita. */
  .tela{grid-template-columns:1fr; min-height:0}
  .painel-expr{padding:var(--e5)}
  .painel-form{padding:var(--e5)}
  .esqueleto{display:none}

  /* A lateral vira faixa superior. NADA de menu sanfona: são quatro destinos,
     e esconder quatro destinos é esconder o produto.
     DUAS LINHAS FIXAS: marca e sair em cima, abas embaixo.
     A faixa NÃO estica: era o --rodape com margin-top:auto que a inchava. */
  .casca{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .lateral{border-right:0; border-bottom:var(--borda) solid var(--linha-forte);
    flex-direction:row; flex-wrap:wrap; align-items:center;
    column-gap:var(--e4); row-gap:0;
    height:auto; align-self:start; padding:var(--e3) var(--e5) 0}
  .lateral .marca-barra{flex:1; min-width:0}
  .lateral nav{flex-direction:row; gap:var(--e5); width:100%; order:3;
    overflow-x:auto; margin-top:var(--e3)}
  /* Na faixa estreita o ativo é FIO, não caixa preenchida: uma pílula cheia
     numa linha horizontal lê como botão selecionado, não como página atual. */
  .lateral .item{font-size:13.5px; padding:0; border-radius:0;
    border-bottom:2px solid transparent; margin-bottom:-1px; height:44px;
    white-space:nowrap}
  .lateral .item.ativo{background:none; border-bottom-color:var(--txt)}
  .lateral .rodape{margin:0; flex-direction:row; align-items:center; order:2}
  .conteudo{padding:var(--e5)}

  .btn{width:100%}
  /* A linha de texto-mais-botão EMPILHA. Lado a lado num telefone, o texto
     fica numa coluna estreita e o título de 32 px quebra palavra a palavra. */
  .pedido{flex-direction:column; align-items:stretch; gap:var(--e4)}
  .pedido .acao{width:100%}
  .seletor{gap:var(--e4)}
  textarea.campo{min-height:240px}   /* não encolhe */
  .modulo{grid-template-columns:repeat(8,10px); width:108px}
  .relogio{font-size:32px}           /* não encolhe: é o que domina a tela */
}

/* --- 15 · movimento reduzido -------------------------------------------- */
/* O módulo para; o relógio continua, porque relógio é texto que muda. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* --- 16 · impressão ----------------------------------------------------- */

@media print{
  body{background:#fff;color:#000}
  .faixa,.barra,.btn,.modulo{display:none}
  .marca,.marca-barra{background:none;-webkit-text-fill-color:currentColor;color:#000}
  .atribuicao{color:#000}
}

/* ==========================================================================
   Edicao fora da moldura: menu de mais acoes (peca 1) e janela de confirmar
   (peca 5), sistema de design v2.5, secao 08. Pulso 031, passo 6.1, bloco 1.
   As tres fichas abaixo viviam tambem em edit.css, que morreu no Pulso 031, passo 6.2, bloco 4c.
   ========================================================================== */
:root{
  --veu:var(--linha);
  --menu-min:calc(var(--coluna-form)/2);
  --cobertura:color-mix(in srgb,var(--fundo) 80%,transparent);
}

.wf-card-wrap{position:relative;display:flex}
.wf-card-wrap>.cartao{flex:1;min-width:0}
.wf-card-wrap .titulo{padding-right:var(--e6)}
.wf-card-wrap.is-open{z-index:10}

.wf-menu-trigger{position:absolute;top:var(--e3);right:var(--e3);box-sizing:border-box;width:var(--e6);height:var(--e6);display:grid;place-items:center;padding:0;border:0;border-radius:var(--raio-controle);background:transparent;color:var(--txt-suave);font:15px/1 var(--sans);cursor:pointer}
.wf-menu-trigger:hover,.wf-menu-trigger.is-open{background:var(--veu)}
.wf-menu-trigger:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.wf-menu-trigger:disabled{color:var(--desabilitado);background:transparent;cursor:default}

.wf-menu{position:absolute;top:calc(var(--e3) + var(--e6) + var(--e1));right:var(--e3);z-index:20;box-sizing:border-box;min-width:var(--menu-min);padding:var(--e1) 0;background:var(--fundo);border:1px solid var(--txt-legivel);border-radius:var(--raio-cartao);font-size:13.5px}
.wf-menu[hidden]{display:none}
.wf-menu-item{display:block;box-sizing:border-box;width:calc(100% - 2*var(--e1));margin:0 var(--e1);padding:var(--e2) var(--e3);border:0;border-radius:var(--raio-controle);background:transparent;color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.wf-menu-item:hover{background:var(--veu)}
.wf-menu-item:focus-visible{background:var(--veu);outline:2px solid var(--foco);outline-offset:2px}
.wf-menu-item.is-danger{color:var(--erro)}
.wf-menu-item.is-danger:hover,.wf-menu-item.is-danger:focus-visible{color:var(--txt);box-shadow:inset 0 0 0 1px var(--erro)}
.wf-menu-sep{height:1px;margin:var(--e1) 0;background:var(--linha)}

.wf-dialog-cover{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--e4);background:var(--cobertura)}
.wf-dialog{box-sizing:border-box;width:100%;max-width:var(--coluna-form);padding:var(--e5);background:var(--fundo);border:1px solid var(--txt-legivel);border-radius:var(--raio-bloco);color:var(--txt)}
.wf-dialog-title{margin:0 0 var(--e2);font-size:15.5px;font-weight:650;line-height:1.6;letter-spacing:0}
.wf-dialog-text{margin:0;font-size:13.5px;color:var(--txt-suave)}
.wf-dialog-actions{display:flex;justify-content:flex-end;gap:var(--e3);margin-top:var(--e5)}
.wf-btn{box-sizing:border-box;min-width:calc(var(--e8)*2);padding:var(--e2) var(--e4);border:1px solid var(--linha-forte);border-radius:var(--raio-controle);background:transparent;color:var(--txt);font:650 13.5px/1.6 var(--sans);text-align:center;cursor:pointer}
.wf-btn:hover{background:var(--veu)}
.wf-btn:focus-visible{outline:none;border-color:var(--foco)}
.wf-btn.is-danger{border-color:var(--erro);color:var(--erro)}
.wf-btn.is-danger:hover{color:var(--txt);background:var(--veu)}
.wf-btn.is-danger:focus-visible{border-color:var(--foco);color:var(--txt);background:var(--veu)}
.wf-btn:disabled{cursor:default}
.wf-btn:not(.is-danger):disabled{color:var(--desabilitado)}
.wf-inline-error{margin-top:var(--e1);padding:var(--e2) var(--e3);background:var(--fundo);border-left:3px solid var(--erro);border-radius:var(--raio-controle);font-size:13.5px;color:var(--txt)}
.wf-inline-error-title{color:var(--erro);font-weight:650}

@media (max-width:980px){
  .wf-card-wrap .titulo{padding-right:var(--e7)}
  .wf-menu-trigger{width:var(--e7);height:var(--e7)}
  .wf-menu{left:0;right:0;min-width:0;top:calc(var(--e3) + var(--e7) + var(--e1))}
  .wf-menu-item{padding:var(--e3)}
  .wf-dialog-cover{padding:var(--e5)}
  .wf-dialog-actions{flex-direction:column}
  .wf-btn{width:100%;padding:var(--e3)}
}

/* ==========================================================================
   Barra da lista de roadmaps: pecas 1 e 6 do sistema de design v2.5, secao
   08; disposicao das telas v0.4.1, 8.4 e 8.7. Pulso 031, passo 6.1, bloco 2.
   As larguras da busca e do seletor vem do prototipo aprovado v0.29.
   ========================================================================== */
.wf-list-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);margin:var(--e5) 0}
.wf-list-bar>input.campo{width:260px}
.wf-list-bar .campo::placeholder{font-style:italic;color:var(--txt-legivel)}
.wf-list-bar-gap{flex:1}
.wf-folder-line{display:flex;align-items:center;gap:var(--e2)}
.wf-select{position:relative;display:block;width:220px}
.wf-select select{appearance:none;-webkit-appearance:none;color-scheme:dark;width:100%;height:48px;padding-right:var(--e6);cursor:pointer}
.wf-select::after{content:"\25BE";position:absolute;right:var(--e3);top:50%;transform:translateY(-50%);color:var(--txt-suave);pointer-events:none}
.wf-folder-menu{position:relative;display:inline-flex}
.wf-folder-menu[hidden]{display:none}
.wf-folder-menu.is-open{z-index:10}
.wf-folder-menu>.wf-menu-trigger{position:relative;top:auto;right:auto}
.wf-folder-menu>.wf-menu{top:calc(100% + var(--e1));right:0}
.wf-check{position:relative;display:inline-flex;align-items:center;gap:var(--e2);font-size:13.5px;color:var(--txt);cursor:pointer}
.wf-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.wf-check-box{flex:none;box-sizing:border-box;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--linha-forte);border-radius:var(--raio-check);background:var(--fundo);color:var(--fundo);font-size:12px;line-height:1}
.wf-check input:checked+.wf-check-box{background:var(--feito);border-color:var(--feito)}
.wf-check input:focus-visible+.wf-check-box{outline:2px solid var(--foco);outline-offset:2px}

@media (max-width:980px){
  .wf-list-bar{position:relative;flex-direction:column;align-items:stretch}
  .wf-list-bar>input.campo,.wf-list-bar>.btn,.wf-folder-line{width:100%}
  .wf-select{flex:1;width:auto}
  .wf-list-bar-gap{display:none}
  .wf-folder-menu{position:static}
  .wf-folder-menu>.wf-menu{left:var(--e4);right:var(--e4);top:auto;min-width:0}
}

/* Janelas com campo (mover e nova pasta). Pulso 031, passo 6.1, bloco 3. */
.wf-dialog-field{margin-top:var(--e4)}
.wf-dialog-field .rotulo{margin-bottom:var(--e1)}
.wf-dialog .wf-select{width:100%}
.wf-dialog input.campo{box-sizing:border-box;width:100%}

/* A coluna de conteudo nunca fica mais larga que a tela. Numa grade, a coluna
   cresce ate caber o conteudo mais largo, e os controles de edicao dentro do
   corpo do roadmap alargavam a pagina inteira no celular (medido no Pulso 031:
   tela de 390, pagina de 490). So age quando algum conteudo passa da borda. */
main.conteudo{min-width:0}

/* ==========================================================================
   Texto editavel no lugar (peca 3), sistema de design v2.5, secao 08.
   Pulso 033, passo 6.3, bloco 5. Vale para o titulo do cabecalho e para
   todo texto editavel do corpo do roadmap. So fichas da pagina inteira:
   os apelidos do corpo nao valem no cabecalho.
   Repouso sem sinal; a forma so aparece com a edicao ligada. O recheio e
   compensado por margem negativa, para nada se mexer. A borda de foco e
   um contorno para dentro: nao ocupa espaco e nao e anel externo.
   Campo com falha ou conflito nao ganha o veu: a peca 4 manda.
   ========================================================================== */
.wf-editable{outline:none}
.wf-editable[contenteditable="true"]{
  cursor:text;
  border-radius:var(--raio-controle);
  padding:var(--e1) var(--e2);
  margin:calc(-1 * var(--e1)) calc(-1 * var(--e2));
}
@media (hover:hover){
  .wf-editable[contenteditable="true"]:not(.wf-field-error):not(.wf-field-conflict):hover{background:var(--veu)}
}
.wf-editable[contenteditable="true"]:focus{background:var(--campo);outline:1px solid var(--foco);outline-offset:-1px}

/* ==========================================================================
   O cabecalho da tela do roadmap, como o prototipo aprovado (v0.29):
   sem caixa, so o fio embaixo; o ponto laranja depois do titulo; a
   assinatura em gradiente; vao entre as acoes; na tela estreita, o
   titulo menor e as acoes dividindo a largura. Pulso 033, passo 6.4.
   ========================================================================== */
.wf-doc-header{padding:var(--e5) 0;border-bottom:1px solid var(--linha)}
.wf-doc-header .sobrancelha{background:var(--gradiente);-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-doc-header .t-roadmap .pt{color:var(--laranja)}
.wf-doc-header .acao{display:flex;gap:var(--e2)}
@media (max-width:980px){
  .wf-doc-header .t-roadmap{font-size:24px}
  .wf-doc-header .acao .btn{flex:1}
}