/* ---------------------------------------------------------- conteúdo */
  main { overflow-y: auto; height: calc(100vh - 60px); padding: 0; }
  /* A "folha" limita a largura de leitura. Telas de formulário puro ficam numa
     coluna estreita; telas de painel (Conta, Projetos, Resultados…) recebem
     .ampla e ocupam a área útil, sem sobrar vão nas laterais. */
  .folha { max-width: 1080px; margin: 0 auto; padding: var(--s6) var(--s7); }
  .folha.ampla { max-width: 1760px; }

  /* Nome do projeto dobrado no subtítulo do banner das telas de etapa, onde o
     título é o nome da etapa e não do projeto. Substitui a faixa branca que
     existia acima e repetia o banner. */
  .cta-sub .sub-proj { color: #fff; font-weight: 700; }

  /* progresso circular do processamento */
  .anel { position: relative; width: 132px; height: 132px; flex: none; }
  .anel svg { transform: rotate(-90deg); display: block; }
  .anel .trilho { fill: none; stroke: var(--hair); stroke-width: 11; }
  .anel .arco { fill: none; stroke: var(--orange); stroke-width: 11; stroke-linecap: round;
                transition: stroke-dashoffset .6s ease; }
  .anel.rodando .arco { animation: pulso 1.7s ease-in-out infinite; }
  /* O ANEL DE UM VOO PARADO — item 429, 16/09/2026. Ele cancelou um voo e a tela mostrou
     "90%" em laranja vivo ao lado de CANCELADA; o número é fato (é onde parou), a cor é
     que prometia movimento. Cinza, e com a palavra que o explica logo abaixo. */
  .anel.parado .arco { stroke: var(--ink-3); animation: none; }
  .anel.parado .pct b { color: var(--ink-3); }
  @keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
  .anel .pct { position: absolute; inset: 0; display: flex; flex-direction: column;
               align-items: center; justify-content: center; font-family: var(--brand); }
  .anel .pct b { font-weight: 800; font-size: 28px; color: var(--navy); line-height: 1; }
  .anel .pct small { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
  /* Console do processamento: painel navy com o anel e as etapas do motor. É o
     coração da tela, e em fundo escuro ele lê como instrumento — não como mais
     um cartão branco. */
  /* Faixa cheia com anel, etapas, números e ações — tudo o que se olha
     enquanto processa, numa peça só. Em duas colunas sobrava um buraco de
     355px na esquerda; faixa não deixa vão porque cresce com o conteúdo. */
  /* As etapas ocupam a largura do próprio texto (auto), não uma fração fixa:
     com 1.1fr sobravam 482px de vão entre elas e os números. Agora os números
     tomam o resto e cabem seis em vez de quatro. */
  .proc-console { display: grid; align-items: center; gap: var(--s5) var(--s6);
                  grid-template-columns: auto auto minmax(0, 1fr);
                  grid-template-areas: "anel etapas numeros" "acoes acoes acoes";
                  background: linear-gradient(135deg, var(--navy-3) 0%, var(--navy-4) 100%);
                  border-radius: 12px; padding: 22px 26px; position: relative;
                  overflow: hidden; margin-top: var(--s4); }
  .proc-console > .proc-anelbox { grid-area: anel; display: flex; flex-direction: column;
                                  align-items: center; gap: 12px; position: relative; z-index: 1; }
  /* O estado é a resposta que a tela existe para dar: "posso seguir para o 3D?".
     Por isso vai grande, com cor e ícone, e não escondido num chip. */
  .proc-estado { display: flex; flex-direction: column; align-items: center; gap: 3px;
                 padding: 9px 16px; border-radius: 12px; min-width: 168px; text-align: center;
                 border: 1px solid; }
  .proc-estado svg { width: 22px; height: 22px; }
  .proc-estado b { font-family: var(--brand); font-weight: 800; font-size: 16px;
                   text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
  .proc-estado span { font-size: 10.5px; opacity: .8; line-height: 1.3; }
  .proc-estado.ok    { color: var(--good-claro); background: rgba(46,224,138,.10); border-color: rgba(46,224,138,.34); }
  .proc-estado.indo  { color: var(--warn-claro); background: rgba(255,165,36,.10); border-color: rgba(255,165,36,.34); }
  .proc-estado.ruim  { color: var(--bad-claro); background: rgba(255,90,69,.10);  border-color: rgba(255,90,69,.34); }
  .proc-estado.espera{ color: var(--tinta-esc-2); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
  .proc-estado.indo svg { animation: giraEstado 1.4s linear infinite; }
  @keyframes giraEstado { to { transform: rotate(360deg); } }
  /* O anel perdeu o rótulo interno: quem diz o estado agora é a peça abaixo. */
  .proc-console .anel .pct b { color: #fff; font-size: 30px; }
  .proc-console > .proc-etapas { grid-area: etapas; }
  .proc-numeros { grid-area: numeros; display: grid; gap: 9px; position: relative;
                  z-index: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1500px) { .proc-numeros { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  /* As fotos que ficaram fora do mapa (20/10/2026, a proposta aprovada): ambar, porque e aviso
     e nao erro. O mapa saiu; so falta um pedaco, e quem decide refazer e a pessoa. */
  .fora-mapa { margin-top: var(--s4); background: #FFF4E5; border-left: 4px solid #B45309;
               border-radius: 10px; padding: 12px 16px; color: #5A3A0C; font-size: 13px; line-height: 1.5; }
  .fora-mapa h4 { margin: 0 0 4px; font-size: 14px; color: #3E2806; }
  .fora-mapa p { margin: 0; }
  .fora-mapa b { color: #3E2806; }
  .fora-mapa .fazer { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E6C99A; }
  .fora-mapa .acoes { margin-top: 10px; display: flex; gap: 8px; }
  .fora-mapa .acoes button { background: var(--surface); border: 1px solid #E6C99A; color: #3E2806; }
  .fotos-fora-filtro { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                       background: #FFF4E5; border-left: 4px solid #B45309; border-radius: 8px;
                       padding: 8px 12px; margin-bottom: var(--s3); color: #5A3A0C; font-size: 13px; }
  .proc-acoes { grid-area: acoes; display: flex; align-items: center; gap: var(--s2);
                flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.09);
                padding-top: var(--s4); position: relative; z-index: 1; }
  .proc-acoes button:not(.principal) { background: rgba(255,255,255,.07); color: var(--tinta-esc-1);
                                       border-color: rgba(255,255,255,.14); }
  .proc-acoes button:not(.principal):hover:not(:disabled) { background: rgba(255,255,255,.13);
                                                            color: #fff; }
  .proc-acoes button:disabled { opacity: .4; }
  /* O PROCESSAR AVANCADO, item 462: branco com borda laranja, ao lado do laranja cheio.
     Parente da acao principal (borda da mesma cor), mas um degrau abaixo. Os dois
     seletores repetem o not(.principal) de cima de proposito: sem ele, a regra generica
     das acoes ganharia na especificidade e o botao voltaria a ser cinza. */
  .proc-acoes button.proc-avancado:not(.principal) { background: var(--surface); color: var(--navy, #131f33);
                                                     border: 2px solid var(--orange); font-weight: 600; }
  .proc-acoes button.proc-avancado:not(.principal):hover:not(:disabled) { background: #fff4ec;
                                                                          color: var(--navy, #131f33); }
  .proc-job { margin-left: auto; font-size: 11.5px; color: var(--tinta-esc-3);
              font-variant-numeric: tabular-nums; }
  @media (max-width: 1240px) {
    .proc-console { grid-template-columns: auto 1fr;
                    grid-template-areas: "anel etapas" "numeros numeros" "acoes acoes"; }
  }
  .proc-grid { margin-top: var(--s4); grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  /* As duas colunas fecham na mesma linha: o último bloco de cada uma estica e
     seu conteúdo se distribui, em vez de deixar vão embaixo. */
  .proc-grid .cta-col > section.bloco:last-child { flex: 1; display: flex; flex-direction: column; }
  .proc-grid .proc-guia .guia-lista { flex: 1; justify-content: space-evenly; }
  .proc-grid .cta-col:first-child .mod-previa { flex: 1; }
  .proc-console::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px;
                         height: 220px; border-radius: 50%; pointer-events: none;
                         background: radial-gradient(circle, rgba(255,101,1,.16), transparent 70%); }
  .proc-console .anel { flex: none; }
  .proc-console .anel .trilho { stroke: rgba(255,255,255,.12); }
  .proc-console .pct b { color: #fff; }
  .proc-console .pct small { color: var(--tinta-esc-2); }

  /* Etapas do motor, ao lado do anel: o aluno vê o que a máquina faz agora. */
  /* AS ETAPAS EM DUAS COLUNAS — pedido dele em 16/09/2026, olhando o voo dividido:
     *"isso poderia estar dividido em duas colunas, acho que iria melhorar a diagramação"*.
     Estava certo: desde o item 429 são SETE etapas, e não quatro. Medido no DOM, cada uma
     ocupa 56px — 392px empilhadas, num painel que precisa caber nos 738px de altura do
     notebook dele, com o anel, os medidores e os cartões.

     🔴 A ORDEM DESCE E SOBE (`grid-auto-flow: column` com 4 linhas): 1-2-3-4 na esquerda,
     5-6-7 na direita. Em zigue-zague a etapa ATUAL saltaria de lado a cada troca, e é ela
     que a pessoa procura na tela.

     Abaixo de 900px volta a uma coluna: em painel estreito, duas colunas quebram o nome da
     etapa no meio, e o nome é a informação.

     ⚠️ Quantas LINHAS é o `style` inline que a tela calcula (metade dos passos, arredondando
     para cima): a lista tem 7 com o andamento medido e 4 na lista de reserva, e um número
     fixo aqui deixaria a reserva numa coluna só.

     🔴 E este comentário já cobrou o preço DUAS vezes, hoje. Primeiro por fechar duas
     vezes: o fecha-comentário sobrando engoliu a regra seguinte, e o bloco ficou em
     `display: block` com a folha inteira parecendo certa. Depois porque, ao EXPLICAR isso,
     escrevi o fecha-comentário literal aqui dentro — e ele fechou de novo, no mesmo lugar.

     A regra da casa vale para CSS como vale para a crase no `app.js`: **cite o nome, nunca
     os caracteres**. E quem acha isto é perguntar ao NAVEGADOR quais regras ele conseguiu
     ler (`document.styleSheets`), em vez de reler o arquivo — no arquivo tudo parece certo. */
  .proc-etapas { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
                 gap: 2px 18px; flex: 1; min-width: 240px; position: relative; z-index: 1; }
  @media (max-width: 900px) {
    .proc-etapas { grid-auto-flow: row; grid-template-rows: none; }
  }
  .proc-etapa { display: flex; align-items: center; gap: 11px; padding: 7px 10px;
                border-radius: 9px; transition: background var(--t); }
  .proc-etapa.agora { background: rgba(255,101,1,.14); }
  .pe-marca { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex;
              align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
              background: rgba(255,255,255,.1); color: var(--tinta-esc-2); }
  .pe-marca svg { width: 13px; height: 13px; }
  .proc-etapa.ok .pe-marca { background: var(--good); color: #fff; }
  .proc-etapa.agora .pe-marca { background: var(--orange); color: #fff;
                                animation: pe-pulsa 1.4s ease-in-out infinite; }
  @keyframes pe-pulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(255,101,1,.45) }
                        50% { box-shadow: 0 0 0 7px rgba(255,101,1,0) } }
  .pe-txt b { display: block; font-size: 13px; color: #fff; font-weight: 600; }
  .pe-txt small { font-size: 11.5px; color: var(--tinta-esc-2b); }
  .proc-etapa.espera .pe-txt b { color: #7b8ca6; font-weight: 500; }

  /* Prévia do modelo 3D, na coluna da direita. */
  .mod-previa { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
                background: var(--navy-2); display: flex; align-items: center; justify-content: center; }
  .mod-previa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mod-previa svg { width: 42px; height: 42px; color: rgba(255,255,255,.35); }
  .mod-selo { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-size: 10.5px;
              font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff;
              background: rgba(16,129,74,.92); padding: 3px 9px; border-radius: 20px; }
  .mod-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
                 margin-top: var(--s3); }
  .mod-numeros > div { background: var(--surface-2); border-radius: 9px; padding: 9px 6px;
                       text-align: center; }
  .mod-numeros b { display: block; font-family: var(--brand); font-weight: 700; font-size: 18px;
                   color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
  .mod-numeros small { font-size: 10.5px; color: var(--ink-3); }
  .mod-numeros .apagado b { color: var(--ink-3); }

  /* OS PEDAÇOS DO VOO DIVIDIDO POR NÓS — item 421. Uma linha por pedaço, com barra
     própria: são tarefas independentes, e o que a pessoa precisa saber é quantas já
     fecharam. Fica dentro do console de processamento, sobre o navy. */
  .pedacos { margin: var(--s3) 0; padding: 10px 12px; border-radius: 10px;
             background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
  .pedacos-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pedacos-cab b { font-size: 12.5px; color: var(--tinta-esc-1); }
  .pedacos-cab span { font-size: 10.5px; color: var(--tinta-esc-2); }
  .pedacos-lista { display: grid; gap: 6px; margin-top: 8px; }
  .pedaco { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; }
  .pedaco > b { font-size: 11px; color: var(--tinta-esc-2); font-variant-numeric: tabular-nums; }
  .pedaco small { font-size: 10.5px; color: var(--tinta-esc-2); white-space: nowrap; }
  .pedaco-barra { height: 6px; border-radius: 4px; background: rgba(255,255,255,.12);
                  overflow: hidden; }
  .pedaco-barra i { display: block; height: 100%; background: var(--orange);
                    transition: width .4s ease; }
  .pedaco.ok .pedaco-barra i { background: #2ea36a; }
  .pedaco.ok small { color: #8fd3b0; }
  .pedaco.ruim .pedaco-barra i { background: #d9534f; }
  .pedaco.espera .pedaco-barra i { background: rgba(255,255,255,.22); }

  /* REFAZER SÓ UM PEDAÇO — item 423. Aparece apenas enquanto a reconstrução estiver
     guardada no motor; o backend é quem sabe do prazo. As opções são botões de linha
     inteira porque cada uma tem título e explicação, e chip não comporta as duas. */
  .refaz { margin-top: var(--s4); border-top: 1px solid var(--border); padding-top: var(--s3); }
  .refaz-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .refaz-cab b { font-size: 13px; color: var(--navy); }
  .refaz-prazo { font-size: 10.5px; color: var(--ink-3); }
  .refaz-nota { margin: 4px 0 8px; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  .refaz-lista { display: grid; gap: 6px; }
  .refaz-op { display: grid; gap: 1px; text-align: left; width: 100%; padding: 8px 12px;
              background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
              cursor: pointer; }
  .refaz-op:hover { border-color: var(--orange); background: var(--surface); }
  .refaz-op b { font-size: 12.5px; color: var(--navy); }
  .refaz-op small { font-size: 11px; color: var(--ink-3); line-height: 1.4; }

  /* Números do processamento, dentro do console: vidro sobre o navy. */
  /* A COLUNA DOS NUMEROS: cartoes em cima, medidores da maquina embaixo. Item 139.
     O grid-area mudou de dono -- era do .proc-numeros, agora e do envelope. O painel e
     align-items: center, e aquela coluna era a mais BAIXA das tres: os medidores entraram no vao
     que ja existia, e o painel continua com a mesma altura. */
  .proc-col-numeros { grid-area: numeros; display: flex; flex-direction: column; gap: 12px;
                      min-width: 0; position: relative; z-index: 1; }
  .proc-col-numeros > .proc-numeros { grid-area: auto; }
  /* Vazio o bloco desaparece: :empty cobre quem nao e administrador e a maquina que nao sabe medir. */
  /* OS QUATRO VELOCIMETROS: largura inteira da coluna, e nao encolhidos num canto.
     Ele mandou "melhora a distribuicao e os tamanhos" em 08/08/2026, e o print mostrava os
     quatro amontoados no canto direito com um vao enorme a esquerda.

     A CAUSA ERA HERANCA: `#procMedidores` tem a classe `.mostradores`, que traz
     `flex: none; margin-left: auto` — regra escrita para o BANNER DA IMPORTAR, onde os
     mostradores ficam de proposito no terco direito, encostados. Aqui eles sao a faixa
     inteira, e as duas linhas faziam o oposto do que a tela precisa: encolher ao conteudo e
     empurrar para a direita. Por isso a largura e o `margin-left` sao redeclarados.

     `flex: 1 1 0` em cada um: quatro fatias IGUAIS da largura, entao cada disco cai no
     centro da sua fatia e a faixa fica alinhada com os cartoes de baixo. Com
     `space-around` eles se distribuiam pelo tamanho de cada um, e ficavam fora de registro.
     E se um dia a maquina nao souber medir algum (o `pct` nulo esconde o mostrador), os que
     sobrarem se redistribuem sozinhos — coisa que uma grade de quatro colunas fixas nao faz.

     O disco cresceu de 78 para 96px porque agora ha lugar: sao ~268px de fatia. */
  .proc-maquina { display: flex; align-items: flex-start; gap: var(--s3);
                  width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .proc-maquina:empty { display: none; }
  .proc-maquina .mostrador { flex: 1 1 0; min-width: 0; }
  .proc-maquina .mostrador svg { width: 96px; height: 96px; }
  .proc-maquina .mos-centro { height: 96px; }
  .proc-maquina .mos-centro b { font-size: 25px; }
  .proc-maquina .mos-centro small { font-size: 12px; }
  .proc-maquina .mos-arco { filter: drop-shadow(0 0 5px currentColor); stroke-width: 8; }
  .proc-maquina .mos-trilho { stroke: rgba(255,255,255,.10); stroke-width: 8; }
  .proc-maquina .mos-rot { color: var(--tinta-esc-2); font-size: 11.5px; margin-top: -7px; }
  /* O rotulo pode passar da fatia ("livres 265 de 491 GB" tem 21 caracteres). Sem soltar o
     `nowrap` herdado, ele estoura a coluna em vez de quebrar. */
  .proc-maquina .mos-rot span { font-size: 11px; white-space: normal; }
  /* Abaixo de 1100px de coluna quatro discos de 96px nao cabem lado a lado sem esmagar o
     rotulo: eles voltam a duas fileiras de dois. */
  @media (max-width: 1500px) {
    .proc-maquina { flex-wrap: wrap; }
    .proc-maquina .mostrador { flex: 1 1 calc(50% - var(--s3)); }
  }
  /* CARTAO DE UMA LINHA: rotulo como prefixo, e a nota foi para o title. De 76 px para 33 px. */
  .proc-cartao { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
                 border-radius: 9px; padding: 7px 12px; display: flex; align-items: baseline;
                 gap: 8px; }
  .proc-cartao small { margin-bottom: 0 !important; flex: none; }
  .proc-cartao b { font-size: 15px !important; }
  .proc-cartao small { display: block; font-size: 10px; text-transform: uppercase;
                       letter-spacing: .06em; color: var(--tinta-esc-2b); margin-bottom: 4px; }
  .proc-cartao b { display: block; font-family: var(--brand); font-weight: 700; font-size: 16px;
                   color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .proc-cartao i { display: block; font-style: normal; font-size: 10.5px; color: var(--tinta-esc-3);
                   margin-top: 3px; }

  /* Arquivos gerados: cartões em colunas (2 ou 3 conforme a largura). Em lista
     única sobrava um deserto branco à direita de cada linha. */
  .asset-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
                 gap: 10px; }
  .asset-linha { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 11px;
                 align-items: center; padding: 12px 14px; border: 1px solid var(--border);
                 border-radius: 12px; background: var(--surface); transition: border-color var(--t), box-shadow var(--t); }
  .asset-linha:hover { border-color: var(--border-hover); box-shadow: var(--sh-1); }
  .asset-ico { height: 34px; border-radius: 9px; background: var(--navy); color: #fff;
               display: flex; align-items: center; justify-content: center;
               font-size: 10px; font-weight: 800; letter-spacing: .04em; }
  .asset-id { min-width: 0; }
  .asset-id b { display: block; font-size: 13px; color: var(--ink); font-weight: 600;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asset-id small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.35;
                    margin-top: 2px; }
  .asset-tam { grid-column: 2; font-size: 11.5px; color: var(--ink-3);
               font-variant-numeric: tabular-nums; margin-top: 2px; }
  .asset-baixar { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center;
                  justify-content: center; height: 32px; padding: 0 12px; border-radius: 9px;
                  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
                  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .asset-baixar:hover { border-color: var(--orange); color: var(--orange); }

  /* Guia do processamento, na coluna da direita: ocupa o espaço que sobrava e
     responde as dúvidas de quem está aprendendo. */
  .proc-guia p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 var(--s3); }
  .guia-lista { list-style: none; margin: 0; padding: 0; display: flex;
                flex-direction: column; gap: 7px; }
  .guia-lista li { font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
                   padding-left: 18px; position: relative; }
  .guia-lista li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 6px;
                           height: 6px; border-radius: 50%; background: var(--orange); }
  .guia-lista li b { color: var(--ink); }

  /* Passo a passo ilustrado: quatro desenhos simples explicam a fotogrametria
     melhor que um parágrafo — e preenchem a coluna que ficava vazia. */
  .ilus-passos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
                 margin: var(--s3) 0 var(--s4); }
  .ilus-passo { background: var(--surface-2); border: 1px solid var(--border);
                border-radius: 9px; padding: 10px 12px 12px; }
  .ilus-passo svg { width: 100%; height: 52px; display: block; margin-bottom: 7px; }
  .ilus-passo b { display: block; font-size: 11.5px; color: var(--navy); font-weight: 700;
                  margin-bottom: 3px; }
  .ilus-passo small { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; display: block; }
  .i-foto { fill: #fff; stroke: var(--ink-3); stroke-width: 1.1; }
  .i-linha { stroke: #b9c2cf; stroke-width: 1; fill: none; stroke-dasharray: 2.5 2.5; }
  .i-ponto { fill: var(--orange); }
  .i-malha { fill: none; stroke: var(--navy-2); stroke-width: 1.2; stroke-linejoin: round; }
  .i-tex1 { fill: #c9a227; stroke: var(--navy-2); stroke-width: .8; }
  .i-tex2 { fill: #9aa7b8; stroke: var(--navy-2); stroke-width: .8; }
  .i-tex3 { fill: var(--orange); opacity: .85; stroke: var(--navy-2); stroke-width: .8; }

  /* telas de Configurações / Conta */
  .tela-titulo { font-family: var(--brand); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0 0 4px; }