/* =====================================================================
   SelectImob One — TOKENS DE DESIGN (fonte única de cor/tema/tipografia).
   Mudou o navy ou o laranja? Muda AQUI e a plataforma inteira acompanha.
   Regra: nenhum hex solto nas outras folhas — só var(--token).
   Espelha o futuro resources/css/tokens.css do app Laravel.
   ===================================================================== */

/* Fontes SELF-HOSTED (23/09/2026, perf): eram carregadas de
   fonts.googleapis.com/fonts.gstatic.com em CADA layout que as usa — DNS +
   conexão TLS a mais, e o CSS remoto bloqueava a descoberta do woff2 até
   ele mesmo chegar. Arquivos em public/app/fontes/ (subsets latin +
   latin-ext só — cobre PT-BR; os outros subsets do Google nunca eram
   usados aqui). Licença: SIL Open Font License 1.1 (as três — Bricolage
   Grotesque, Hanken Grotesk e Archivo são da Google Fonts, todas OFL).

   `tokens.css` é a FONTE ÚNICA dos tokens de fonte (`--font-display`/
   `--font-ui`) e é carregado por TODOS os layouts que usam Bricolage
   Grotesque + Hanken Grotesk (shell.blade.php, layouts/assinatura.blade.php)
   e por Archivo (layouts/auth.blade.php) — por isso os @font-face moram
   aqui, não espalhados. `captador/layout.blade.php` é standalone (não
   carrega tokens.css, tem o próprio <style>) e por isso repete o
   @font-face de Archivo/IBM Plex Mono ali — ver o comentário nesse
   arquivo. Pesos: só os REALMENTE usados nas folhas desta plataforma
   (conferido com grep em font-weight/var(--font-*) antes de baixar). */
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/bricolage-grotesque-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/bricolage-grotesque-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fontes/bricolage-grotesque-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fontes/bricolage-grotesque-800-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fontes/hanken-grotesk-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fontes/hanken-grotesk-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fontes/hanken-grotesk-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fontes/hanken-grotesk-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fontes/hanken-grotesk-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fontes/hanken-grotesk-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/hanken-grotesk-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/hanken-grotesk-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fontes/archivo-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fontes/archivo-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fontes/archivo-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fontes/archivo-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fontes/archivo-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fontes/archivo-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/archivo-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fontes/archivo-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fontes/archivo-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fontes/archivo-800-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#002c64; --navy-2:#06213f; --accent:#ff9600;
  --bg:#0a1322; --surf:#0e1a2d; --surf-2:#13233b; --sel:#16273f;
  --line:#1c2c46; --line-2:#283a56;
  --ink:#eaf0f8; --ink-2:#a6b3c9; --muted:#68789a; --on-navy:#c3d4ee;
  --accent-ink:#ffb44d;
  /* Trilho lateral — ciente do tema. No ESCURO o navy da marca (#002c64)
     destoava, "brilhando" sobre o canvas quase-preto; aqui ele fica um navy
     profundo, coeso com o fundo (sidebar levemente mais escura que o canvas,
     padrão de dark UI) mas ainda com o tom da marca no topo. No CLARO (abaixo)
     volta ao navy cheio, que sobre o branco é a identidade.
     27/07/2026: era um GRADIENTE (`--rail-1`→`--rail-2`). Virou cor CHAPADA
     (`--rail`) — ver o comentário em shell.css `.rail-in`. Os dois tokens do
     degradê saíram junto: token que ninguém lê é dívida, não flexibilidade. */
  --rail:#0b2447; --rail-line:rgba(255,255,255,.07);
  /* v4: trilho com profundidade (navy rico + brilho laranja no topo), nos 2 temas.
     Navy fixo aqui de propósito — é o trilho de marca, não acompanha o canvas. */
  /* v4.1 (retune de harmonia): navy CHAPADO (o brilho laranja no fundo brigava
     com o navy). O acento na lateral é DOURADO-âmbar, não laranja puro — navy+ouro
     harmoniza; navy+laranja-saturado vibra. Tons do trilho abaixo. */
  --rail-bg:#101f3c;
  /* Redesign 2026-09: o trilho recua (tinta apagada) e ganha um degrau de
     profundidade; o painel da área tem cabeçalho e coluna de ferramentas com
     superfícies próprias, senão no escuro tudo achata numa cor só. */
  --rail-bg-2:#0b1830;
  --on-rail:rgba(198,211,232,.68); --on-rail-dim:rgba(198,211,232,.55); --on-rail-faint:rgba(198,211,232,.38);
  --surf-head:#16243c;   /* cabeçalho do painel */
  --surf-recuo:#0c1524;  /* coluna de ferramentas, rebaixada (mais escura que o painel) */
  --accent-on:#1a1200;   /* tinta sobre o âmbar sólido */
  /* tinta sobre o --bom sólido (badge "feito"/"cumprido" preenchido) — o
     teal médio dos dois temas (dark #2fb39a / light #0e7c66) tem contraste
     suficiente com branco fixo nos dois; não precisa virar por tema, mesmo
     raciocínio do --accent-on acima. Fix round 1/5 da Task 4 (assinaturas-
     redesign): tirou o `#fff` solto de `.asn-step.done .asn-step-num`. */
  --bom-on:#fff;
  --rail-gold:#e9b45f; --rail-gold-ink:#f0cd8c;
  --rail-gold-soft:rgba(233,180,95,.13); --rail-gold-soft2:rgba(233,180,95,.18);

  /* COLUNA DE FERRAMENTAS — azul próprio (09/09/2026, Gustavo: *"essa aba
     lateral está muito feia, acho que ficaria melhor com um tom azul
     (diferente do menu lateral)"*).

     Ela usava o MESMO dourado do trilho, e é por isso que as duas colunas se
     confundiam: o trilho é NAVEGAÇÃO ENTRE ÁREAS e a coluna é NAVEGAÇÃO
     DENTRO da área — dois níveis diferentes com o mesmo acento leem como um
     nível só.

     O azul é da família do navy da marca, mas CLARO o bastante para viver
     sobre a superfície rebaixada: o navy cheio (#002c64) sobre o canvas
     quase-preto do tema escuro some, e é a mesma razão pela qual o trilho já
     tem um navy próprio (`--rail-*`). No tema claro ele escurece para manter
     contraste — ver o bloco do tema claro no fim do arquivo. */
  --col-azul:#5aa9ff; --col-azul-ink:#8ec5ff;
  --col-azul-soft:rgba(90,169,255,.13); --col-azul-soft2:rgba(90,169,255,.20);

  /* FUNDO NAVY — nos DOIS temas (09/09/2026, Gustavo: *"o navy que eu tinha
     comentado era no bg, e não na barrinha"*, com a captura do tema escuro:
     *"queria que ficasse que nem no tema escuro"*).
     
     Ou seja: a coluna não acompanha o tema. Ela é uma faixa de marca, como o
     trilho — e é isso que a separa do canvas de trabalho, que é claro no tema
     claro. Por isso as tintas dela (`--col-*-ink`) são fixas também: definir
     por tema faria texto escuro sobre navy no tema claro. */
  --col-surf:#0b1a2e;
  --col-ink:#e8eef7;      /* nome da ferramenta */
  --col-ink-2:#9fb2cc;    /* rótulo de grupo, item em preparo */
  --col-line:rgba(255,255,255,.10);

  /* ---------------------------------------------------------------------
     FORÇA DA OPORTUNIDADE — a MESMA escala rege o selo do card e a cor do
     pino no mapa, então lista e mapa falam a mesma língua sem o usuário
     precisar decorar duas legendas. Os cortes (5% / 3%) são os do
     `tierDe()` em oportunidades-map.js e vêm do dado real, não do gosto.
     Medido em 27/07/2026 sobre os 564 com coordenada: 20 fortes (≥5%),
     42 médias (3–5%), 502 sem vantagem relevante. É essa distribuição que
     justifica a decisão de cor: se tudo fosse laranja (como estava), 564
     pinos idênticos não informariam NADA. Assim, 62 pinos pedem atenção e
     o resto recua — o laranja volta a significar dinheiro na mesa.
     Hex fixos (não tema-aware) porque vivem sobre o tile do mapa, que é
     claro nos dois temas. --------------------------------------------- */
  --op-forte:#f97316; --op-media:#d9a227; --op-baixa:#3f5d8a;
  /* eco dos mesmos tons para texto dentro do card (precisa de contraste
     sobre a superfície, não sobre o mapa) */
  --op-forte-ink:#ffb44d; --op-media-ink:#e8c05a; --op-baixa-ink:#8ea4c6;

  /* LIQUIDEZ (`udata_fit`) — escala PRÓPRIA, não reaproveita a do desconto
     acima de propósito: são dois eixos independentes, e pintar liquidez de
     laranja faria "gira rápido" parecer "desconto forte" no mesmo card.
     Verde/âmbar/cinza; cinza (e não vermelho) na baixa porque pouco giro
     não é defeito do imóvel, só é menos giro. */
  --liq-alta:#3fb950; --liq-media:#d29922;

  /* ---------------------------------------------------------------------
     VALÊNCIA — bom / meio / ruim (31/07/2026, home v4). Antes disso a
     plataforma não tinha como dizer "isto tende a não vender" nem "isto está
     acima do preço": o laranja da marca fazia as duas pontas, e vermelho não
     existia. Agora o laranja é MARCA/AÇÃO (link, selo, realce) e a valência
     tem paleta própria.

     ⚠️ O "bom" é verde-AZULADO, não verde puro, e isso foi MEDIDO, não
     escolhido a olho: verde puro (#1a7f37) contra o vermelho (#b3372e) dá
     ΔE 2,3 em deuteranopia — indistinguível para ~8% dos homens. O
     verde-azulado sobe para ΔE 10,5 e continua lendo como "positivo".
     Validador: skill `dataviz`, scripts/validate_palette.js.

     ⚠️ SABIDO E NÃO CORRIGIDO AQUI: o trio de liquidez logo abaixo
     (--liq-alta verde × --liq-media âmbar) reprova no mesmo teste — ΔE 3,9
     (deuteranopia, tema claro) e 5,1 (protanopia, escuro), contra piso 8.
     Onde há rótulo em texto junto, passa; a pastilha de 3 traços SEM rótulo
     (tabela do Radar) não passa. É defeito real, de issue própria — não foi
     mexido junto para não misturar duas mudanças na mesma entrega.
     --------------------------------------------------------------------- */
  --bom:#2fb39a; --meio:#d29922; --ruim:#e0574a; --neutro:#3a4a68;

  /* ---------------------------------------------------------------------
     SIGNATÁRIOS — a paleta que dá cor a cada pessoa no editor de
     posicionamento (`.asn-pos-campo[data-cor]`).

     Não é decoração: num documento com quatro assinantes, "de quem é esta
     caixa" precisa ser respondível de longe. O rótulo dentro da caixa
     continua dizendo o nome — a cor NUNCA é o único portador da informação;
     ela só encurta a leitura de quem já sabe quem é quem.

     Seis tons porque seis é o limite prático de distinção confiável — acima
     disso o ciclo repete, e o rótulo é quem desempata. O primeiro é o laranja
     da marca: o signatário mais comum é um só, e ele merece a cor de casa.
     --------------------------------------------------------------------- */
  --sig-0:#ff9600; --sig-1:#3d8ef7; --sig-2:#2fb39a;
  --sig-3:#b06ae8; --sig-4:#e0574a; --sig-5:#d2a119;

  /* PAPEL — a folha de um PDF renderizado na tela. Não segue o tema: papel é
     branco nos dois, e inverter a página de um documento no tema escuro
     mostraria uma coisa que o documento não é. Por isso os dois tokens são
     iguais no claro e no escuro, e existem só para nenhum hex escapar para
     fora deste arquivo. */
  --papel:#ffffff; --papel-ink:#64748b;

  /* ---------------------------------------------------------------------
     FLUXO (entraram × saíram) — UMA cor só, e isso é decisão, não economia.

     Neste gráfico quem codifica identidade é a POSIÇÃO: entrada sobe, saída
     desce, as duas em torno de um eixo visível. Cor seria um SEGUNDO
     codificador dizendo a mesma coisa — e, pior, um terceiro significado numa
     tela onde verde/vermelho já significam "abaixo/acima do mercado". Entrar
     e sair não é bom nem ruim (um imóvel que sai pode ter sido vendido), e
     pintar de verde/vermelho afirmaria uma valência que o dado não tem.

     Tentei antes dois azuis (in/out) e MEDI com o validador da skill
     `dataviz`: no tema escuro nenhum par de um mesmo matiz fechava ao mesmo
     tempo a faixa de luminosidade (L 0,43–0,77) e o piso de ΔE 15 para visão
     normal. Insistir seria forçar a ferramenta para resolver um problema que
     não existe — a regra de paleta categórica vale quando a COR carrega a
     identidade, e aqui ela não carrega.

     A saída usa um tom do MESMO azul rebaixado contra a superfície: lê como
     "a mesma coisa, espelhada", não como outra categoria. Como esse tom fica
     abaixo de 3:1, o gráfico traz rótulo direto no hover e uma tabela
     equivalente — o alívio que a própria skill exige quando o contraste avisa.
     --------------------------------------------------------------------- */
  --fluxo:#4a8fd6;
  /* Cor por pessoa (K12 "A vez de quem", 07/10): quem está com a vez num chamado da manutenção. Você = o laranja da
     ação; proprietário azul; inquilino roxo; profissional petróleo. `-bg` é o fundo do cartão/avatar claro, `-fio` a borda. */
  --pessoa-voce:#ffb44d; --pessoa-voce-bg:rgba(255,150,0,.12);
  --pessoa-prop:#79adff; --pessoa-prop-bg:rgba(110,168,255,.12); --pessoa-prop-fio:rgba(110,168,255,.32); --pessoa-prop-ink:#d6e6ff;
  --pessoa-inq:#c39af3; --pessoa-inq-bg:rgba(185,140,240,.13); --pessoa-inq-fio:rgba(185,140,240,.32);
  --pessoa-prest:#5cc8d5; --pessoa-prest-bg:rgba(79,195,209,.12); --pessoa-prest-fio:rgba(79,195,209,.3);
  --pessoa-on:#0a1322;
  /* texto pequeno: o --muted dá 2,9:1 sobre branco e reprova em AA em tudo
     abaixo de 18px. Este passa (≈4,9:1 no claro, ≈5,0:1 no escuro). */
  --muted-2:#7889ab;

  /* tipografia — redesign v4: Sora na interface inteira. Sem monospace
     ("robótico", decisão do Gustavo); número alinha por font-variant-numeric:
     tabular-nums, não por fonte. --font-mono aponta pra Sora só pra não quebrar
     folhas legadas que ainda referenciam o token. Ver docs/design/design-system.md §3. */
  --font-display:"Bricolage Grotesque",Sora,system-ui,sans-serif;
  --font-ui:"Hanken Grotesk",Sora,system-ui,sans-serif;
  --font-mono:var(--font-ui);
  --tnum:"tnum" 1;

  /* =====================================================================
     MATÉRIA — raio, fio, elevação e movimento (31/07/2026).

     Por que isto virou token: a plataforma inteira desenhava o mesmo
     retângulo — `background:var(--surf); border:1px solid var(--line);
     border-radius:12px` — repetido em doze lugares por tela. Tecnicamente
     certo, visualmente anônimo; o Gustavo resumiu duas vezes em "muito
     simples, sem identidade". Cor e fonte já eram token; SUPERFÍCIE não era,
     e é ela que faz uma tela parecer feita ou montada.

     Estas variáveis são a resposta, e valem para o shell inteiro — mudou
     aqui, mudou em Captação, Radar, Saúde e Início ao mesmo tempo.
     ===================================================================== */

  /* --- RAIO CONCÊNTRICO (casca + núcleo) -----------------------------
     Um cartão premium não é uma caixa: é uma peça dentro de uma bandeja.
     A casca tem `--folga` de respiro; o núcleo usa raio = casca − folga.
     Se os dois usarem o mesmo raio, a curva interna "aperta" e o conjunto
     lê como dois retângulos empilhados em vez de uma peça só usinada. */
  --folga:4px;
  /* A cor da BANDEJA. Tem que ser um degrau ENTRE o canvas e o núcleo, senão
     o conjunto não lê como peça assentada — foi o que aconteceu na primeira
     tentativa: usei `--surf-2`, que no tema claro é mais CLARO que o canvas e
     igual ao núcleo branco, e a moldura simplesmente sumiu.
     Escuro: canvas #0a1322 < bandeja < núcleo #0e1a2d (elevado = mais claro).
     Claro:  bandeja mais ESCURA que o canvas (lê como rebaixo/aro) e o núcleo
     branco por cima é o que sobe. */
  --bandeja:#0c1626;
  --r-casca:18px;
  --r-nucleo:14px;   /* = --r-casca − --folga. Mudou um, muda o outro. */
  --r-peca:9px;      /* peças pequenas DENTRO do núcleo (selo, botão, thumb) */
  --r-pilula:999px;

  /* --- FIO ------------------------------------------------------------
     Nunca um cinza chapado de 1px: o fio é a própria tinta diluída, então
     ele acompanha o tema sozinho (branco translúcido no escuro, preto
     translúcido no claro) e recua em vez de desenhar uma grade. */
  --fio: var(--ink); --fio: color-mix(in srgb,var(--ink) 10%,transparent);
  --fio-forte: var(--ink); --fio-forte: color-mix(in srgb,var(--ink) 18%,transparent);

  /* --- ELEVAÇÃO -------------------------------------------------------
     Duas camadas: um contato curto e apertado (a peça encostando na mesa)
     e um halo longo e muito difuso (a luz de ambiente). Sombra única e
     dura — `0 2px 4px rgba(0,0,0,.3)` — é a assinatura de UI barata.
     No ESCURO a sombra quase não lê, então o que dá volume é o `--realce`:
     um fio de luz na aresta de cima, como acontece em material real. */
  --el-1:0 1px 1px rgba(6,14,28,.16), 0 3px 10px -6px rgba(6,14,28,.22);
  --el-2:0 2px 3px rgba(6,14,28,.14), 0 14px 34px -14px rgba(6,14,28,.30);
  --el-3:0 4px 6px rgba(6,14,28,.13), 0 30px 64px -22px rgba(6,14,28,.38);
  --realce:inset 0 1px 0 rgba(255,255,255,.055);

  /* --- MOVIMENTO ------------------------------------------------------
     `ease`/`ease-in-out` são o default do navegador e leem como massa
     nenhuma. Esta curva sai rápido e chega devagar (freio longo), que é
     como coisa com peso se comporta. Uma curva só na plataforma inteira. */
  --mov:cubic-bezier(.32,.72,0,1);
  --mov-curto:cubic-bezier(.2,.8,.25,1);
  --t1:.16s; --t2:.28s; --t3:.55s;

  /* --- GRÃO -----------------------------------------------------------
     Ruído fino por cima de tudo (fixo, sem eventos — ver `.app::after` em
     shell.css). Custa 1 elemento e é o que impede as superfícies chapadas
     de lerem como preenchimento de vetor. Opacidade minúscula de propósito:
     se dá pra ver o grão, está errado. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{
  --bg:#eef2f7; --surf:#ffffff; --surf-2:#f6f8fc; --sel:#eef3fb;
  --line:#e3e8f1; --line-2:#d2dae7;
  --ink:#0a1c33; --ink-2:#44536d; --muted:#8492aa; --accent-ink:#d97800;
  /* Claro: navy da marca cheio (sobre o canvas branco = identidade). */
  --rail:#002c64; --rail-line:rgba(255,255,255,.09);
  /* No claro o painel é papel: cabeçalho branco e coluna de ferramentas um
     degrau abaixo. O trilho continua navy nos dois temas. */
  --surf-head:#ffffff; --surf-recuo:#f5f7fa;
  /* A COLUNA NÃO VIRA no tema claro: ela é faixa de marca, como o trilho.
     Os tokens `--col-*` ficam com os valores do bloco de cima — repeti-los
     aqui com valores claros era o que fazia a coluna virar cinza-azulada e
     perder a identidade (09/09/2026). */
  /* No claro os tons de texto do selo precisam escurecer pra manter contraste
     sobre superfície branca (o mesmo laranja que brilha no escuro reprova em
     AA sobre #fff). O pino do mapa NÃO muda — o tile é claro nos dois temas. */
  --op-forte-ink:#c2560a; --op-media-ink:#8a6410; --op-baixa-ink:#5a6e91;
  /* mesma razão: os tons da liquidez escurecem no claro pra manter AA */
  --liq-alta:#1a7f37; --liq-media:#8a6410;
  --bom:#0e7c66; --meio:#9a6a00; --ruim:#c03a2b; --neutro:#c8d2e0; --muted-2:#64728c;
  /* Signatários no CLARO: os mesmos seis, escurecidos o suficiente para o
     rótulo ficar legível sobre a folha branca do PDF. */
  --sig-0:#d97706; --sig-1:#1d6fd8; --sig-2:#0e7c66;
  --sig-3:#8b46c9; --sig-4:#c03a2b; --sig-5:#9a6a00;
  --fluxo:#1f5390;
  --pessoa-voce:#a35800; --pessoa-voce-bg:#fff4e3;
  --pessoa-prop:#1f5fc4; --pessoa-prop-bg:#edf3fd; --pessoa-prop-fio:#c8d9f5; --pessoa-prop-ink:#0b2a5c;
  --pessoa-inq:#7c3fbf; --pessoa-inq-bg:#f4eefb; --pessoa-inq-fio:#e0d0f3;
  --pessoa-prest:#0d6e7d; --pessoa-prest-bg:#e8f4f6; --pessoa-prest-fio:#c3e2e7;
  --pessoa-on:#ffffff;

  /* No CLARO a sombra é o que dá volume (no escuro era o realce). Ela pode
     ser mais presente, mas continua difusa e AZULADA — sombra cinza-neutra
     sobre um canvas azulado suja a cor; puxar o navy da marca faz a peça
     parecer apoiada nesta mesa, não recortada de outra. */
  --bandeja:#e7ebf2;
  --el-1:0 1px 1px rgba(10,28,51,.05), 0 3px 10px -5px rgba(10,28,51,.10);
  --el-2:0 1px 2px rgba(10,28,51,.05), 0 12px 30px -12px rgba(10,28,51,.16);
  --el-3:0 2px 4px rgba(10,28,51,.05), 0 28px 60px -20px rgba(10,28,51,.20);
  --realce:inset 0 1px 0 rgba(255,255,255,.9);
}
@media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#eef2f7; --surf:#fff; --ink:#0a1c33; } }

/* iPhone (Gustavo, 28/09/2026: "cores estranhas e bugadas" e "zoom ao clicar
   duas vezes rápido — ruim para contar as chaves no termo"):
   - toque duplo não dá zoom (touch-action: manipulation) — o +/− das chaves
     aceita toques rápidos sem a página crescer;
   - campo com fonte < 16px faz o Safari dar zoom ao focar — 16px no celular;
   - o Safari pinta botão/campo do jeito dele (azul, cinza, cantos) se não
     mandarmos o contrário (appearance: none);
   - color-scheme diz ao sistema qual tema está ativo, senão os controles
     nativos (datas, selects, barras de rolagem) vêm no tema errado. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:root { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}

/* Teclado do iPhone (28/09/2026): o vão que o Safari abre ao subir o teclado
   mostrava um fundo cinza — o fundo da página é o MESMO da tela. */
html, body { background: var(--bg); }

/* iPhone (28/09/2026, "dá uma bugada quando arrasto a tela para baixo já no
   topo"): o "elástico" do Safari puxava a PÁGINA inteira (topo e barra junto).
   A página não quica; só a área de conteúdo rola. */
html, body { overscroll-behavior: none; }
.canvas, .fl-corpo, .asn-dlg-posicoes { overscroll-behavior-y: none; }
/* O elástico no topo do conteúdo fica, mas sem arrastar o topo/barra (28/09). */
.canvas { -webkit-overflow-scrolling: touch; }

/* Contornos laranjas "do nada" no celular (28/09/2026): é o anel de FOCO, que
   existe para quem navega pelo teclado. No toque ele aparecia em títulos (o
   shell foca o título da tela nova) e em botões. Em tela de toque, sem anel;
   no computador com teclado, continua. */
[tabindex="-1"]:focus { outline: none; }
@media (hover: none) and (pointer: coarse) {
  :focus, :focus-visible { outline: none !important; }
}