/* --- lista da Importar: o que aparece acima de 200 fotos -----------------
     Cabeçalho e linhas compartilham a MESMA variável de colunas — separados,
     saem de registro no primeiro ajuste. */
  .imp-lista { --lst-cols: 26px minmax(0,1fr) 84px 78px;
               border: 1px solid var(--border); border-radius: 12px;
               background: var(--surface); overflow: hidden; margin-top: var(--s4); }
  .lst-cab, .lst-lin { display: grid; grid-template-columns: var(--lst-cols); gap: 8px; align-items: center; }
  /* GRUDADO NO TOPO, e DENTRO do contêiner que rola. Fora dele o cabeçalho fica
     15px mais largo que as linhas — a largura da barra de rolagem — e as duas
     últimas colunas saem de registro. Medido antes do conserto: 15,0px. De
     quebra, ele fica à vista durante as 889 linhas, que é quando serve. */
  .lst-cab { position: sticky; top: 0; z-index: 1;
             padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
             font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
             color: var(--ink-3); font-weight: 700; }
  .lst-cab span:nth-child(3) { text-align: right; }
  .lst-cab span:nth-child(4) { text-align: center; }
  .lst-rolo { max-height: 58vh; overflow-y: auto; }
  .lst-lin { padding: 7px 12px; border-bottom: 1px solid var(--hair); font-size: 12.5px; cursor: pointer; }
  .lst-lin:nth-child(even) { background: var(--zebra); }
  .lst-lin:hover { background: var(--hair); }
  .lst-lin b { font-weight: 500; color: var(--ink);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lst-lin .tam { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .cx { width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid #c3ccda; background: var(--surface);
        display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; }
  .lst-lin.on .cx { background: var(--orange); border-color: var(--orange); color: #fff; }
  .cracha { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
            text-align: center; background: var(--warn-bg); color: var(--warn); }
  .cracha.nova { background: var(--good-bg); color: var(--good); }
  .lst-pe { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
            margin-top: var(--s3); font-size: 12px; color: var(--ink-3); }
  .lst-pe button { margin-left: auto; }
  /* Sob a grade o rodapé não tem a moldura da lista, então ganha a dele. */
  .imp-grade + .lst-pe { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
  .imp-mini .chk { position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border-radius: 8px;
                   background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
                   font-size: 13px; font-weight: 800; color: transparent; }
  .imp-mini.on .chk { background: var(--orange); color: #fff; }
  /* --- foto que já está no projeto ---------------------------------------
     Reimportar a mesma pasta não duplica arquivo (o disco grava pelo nome e
     sobrescreve), mas ninguém sabia disso olhando a tela. O crachá fica no
     canto oposto ao ✓ para os dois não brigarem. */
  .imp-mini.repetida { border-color: var(--warn); }
  .imp-mini .ja { position: absolute; left: 4px; bottom: 4px; height: 17px; padding: 0 6px;
                  border-radius: 7px; background: var(--warn-bg); color: var(--warn);
                  font-size: 10.5px; font-weight: 700; line-height: 17px; }
  /* Repetida e fora da seleção: esmaece, para o olho separar o que vai subir
     do que vai ficar como está. */
  .imp-mini.repetida:not(.on) img { opacity: .42; filter: grayscale(.5); }
  /* Item 454: TODA foto tirada esmaece, nao so a repetida — a grade e a conferencia do que
     sobe, e o olho tem de separar as duas coisas sem ler marca por marca. */
  .imp-mini:not(.on) img { opacity: .42; filter: grayscale(.5); }
  .imp-mini.chao { border-color: #8b1a1a; }
  .imp-mini.chao.on { border-color: var(--orange); }
  .imp-mini .imp-selo { display: none; position: absolute; left: 4px; bottom: 4px; height: 17px;
                        padding: 0 6px; border-radius: 7px; font-size: 10.5px; font-weight: 700;
                        line-height: 17px; }
  .imp-mini.chao .imp-selo.chao { display: block; background: #8b1a1a; color: #fff; }
  .imp-mini.termica:not(.chao) .imp-selo.termica { display: block; background: var(--navy); color: #fff; }
  .imp-mini.repetida .imp-selo { bottom: 24px; }
  /* O CARTAO DE RETOMAR O ENVIO — item 263, metade A.
     Contorno LARANJA e nao ambar: nao e aviso de risco, e a acao principal do momento — a
     unica coisa que a pessoa quer fazer depois de o envio cair. Mesma familia do `.imp-repet`
     logo abaixo, com a borda de duas cores para separar as duas conversas. */
  #impRetomar { border: 2px solid var(--orange); border-radius: 12px; overflow: hidden;
                margin-bottom: var(--s3); }
  #impRetomar .ret-topo { background: #fff5ee; padding: 12px 14px;
                          display: flex; align-items: center; gap: 10px;
                          border-bottom: 1px solid var(--borda); }
  #impRetomar .ret-ico { font-size: 16px; flex: none; }
  #impRetomar .ret-topo b { font-size: 13px; }
  /* `auto` no primeiro botao empurra os dois para a direita sem margem em cada um. */
  #impRetomar .ret-topo button:first-of-type { margin-left: auto; }
  #impRetomar .ret-contas { display: grid; grid-template-columns: repeat(3, 1fr);
                            gap: 1px; background: var(--borda); }
  #impRetomar .ret-contas > div { background: var(--surface); padding: 10px 14px; }
  #impRetomar .ret-contas b { display: block; font: 800 19px/1.15 var(--brand), sans-serif;
                              font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
  #impRetomar .ret-contas b.ok { color: var(--good); }
  #impRetomar .ret-contas b.falta { color: var(--orange); }
  #impRetomar .ret-contas small { color: var(--ink-3); font-size: 10.5px;
                                  text-transform: uppercase; letter-spacing: .05em; }
  .imp-repet { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: 10px;
               padding: 10px 12px; display: grid; gap: 8px; }
  .imp-repet > p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--warn); }/* `text-transform: none` não é enfeite: a regra global de <label> é
     CAIXA-ALTA, e sem isto a explicação do rádio vira um berreiro. Mesmo
     contorno de .du-convite e .du-papel. */
  .imp-repet label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
                     font-size: 12.5px; font-weight: 600; letter-spacing: 0;
                     color: var(--ink); text-transform: none; }
  .imp-repet label input { margin-top: 2px; flex: none; accent-color: var(--orange); }
  /* Nota sob o rótulo do campo. Os mesmos números valem no diálogo do assinante:
     o padrão já existia aqui, e inventar um segundo tamanho seria só divergência. */
  .imp-repet label small,
  .du-campos label small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400;
                           line-height: 1.4; color: var(--ink-3); text-transform: none; }

  /* Mostradores circulares (conta-giros) no banner: limites e espaço livre. */
  /* Zona de arraste em dois terços, mostradores no terço restante: o banner
     volta ao padrão (ícone, título, chips) e os círculos ficam junto do que
     eles medem — quanto cabe e quanto já entrou. */
  .imp-entrada { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr);
                 gap: var(--s5); align-items: stretch; }
  .imp-esq { display: flex; flex-direction: column; }
  .imp-esq #solta { flex: 1; display: flex; flex-direction: column;
                    align-items: center; justify-content: center; }
  @media (max-width: 900px) { .imp-entrada { grid-template-columns: 1fr; }
  }

  .mostradores { display: flex; gap: var(--s4); flex: none; margin-left: auto; }
  /* Painel escuro à esquerda, no mesmo navy da barra do topo: os medidores
     ganham o contraste para o qual foram desenhados e a tela fica com um peso
     visual à esquerda, que é por onde a leitura começa. */
  .imp-entrada .mostradores { margin: 0; justify-content: space-around; align-items: center;
                              background: var(--navy); border-radius: 12px;
                              padding: var(--s5) var(--s3); flex-wrap: wrap; gap: var(--s3); }
  /* Arco com brilho e trilho mais visível: no escuro, um traço fino e opaco
     some. O glow vem do próprio traço, então acompanha a cor do estado. */
  .imp-entrada .mos-arco { filter: drop-shadow(0 0 5px currentColor); stroke-width: 8; }
  .imp-entrada .mos-trilho { stroke: rgba(255,255,255,.10); stroke-width: 8; }
  .imp-entrada .mos-centro b { font-size: 20px; }
  .imp-entrada .mos-rot { color: var(--tinta-esc-2c); font-size: 10.5px; }
  .imp-entrada .mos-rot span { color: var(--tinta-esc-2b); }
  /* A caixa tinha 78px cravados — a largura do disco — e o rótulo, com
     `white-space: nowrap`, transbordava dela. Linha que transborda para de
     obedecer ao `text-align: center`: ela encosta na borda esquerda da caixa e
     cresce para a direita. Resultado: "Fotos deste mapa" e "cabem mais 1.000 de
     1.000" começavam no MESMO x, alinhados à esquerda, com a legenda 20,7px
     fora do centro do disco.
     Agora a caixa é uma coluna que se dimensiona pelo conteúdo e centra os
     filhos: o disco continua com 78px, e cada linha do rótulo se centra nele
     porque não transborda mais de nada. */
  .mostrador { position: relative; display: flex; flex-direction: column;
               align-items: center; text-align: center; }
  .mostrador svg { width: 78px; height: 78px; display: block; flex: none; }
  .mos-trilho { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 7; stroke-linecap: round; }
  .mos-arco { fill: none; stroke-width: 7; stroke-linecap: round;
              transition: stroke-dasharray .5s ease; }
  .mos-centro { position: absolute; top: 0; left: 0; right: 0; height: 78px;
                display: flex; align-items: center; justify-content: center; }
  .mos-centro b { font-family: var(--brand); font-weight: 800; font-size: 20px; line-height: 1;
                  font-variant-numeric: tabular-nums; }
  .mos-centro small { font-size: 10px; margin-left: 1px; opacity: .75; }
  .mos-rot { font-size: 10px; color: var(--tinta-esc-2); line-height: 1.3; margin-top: -6px;
             white-space: nowrap; }
  .mos-rot span { display: block; color: var(--tinta-esc-3); font-size: 10px;
                  font-variant-numeric: tabular-nums; }
  /* Some só no banner apertado; dentro da .imp-entrada eles têm coluna própria. */
  @media (max-width: 1180px) { .cta-banner .mostrador:nth-child(3) { display: none; } }
  @media (max-width: 980px) { .cta-banner .mostradores { display: none; }
  }

  /* Painel de envio: velocidade e tempo restante durante a importação. */
  #impEnvio { margin-top: var(--s4); }
  .env-cab { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
             background: var(--surface-2); border: 1px solid var(--border);
             border-radius: 12px; padding: 14px 18px; }
  .env-pct { font-family: var(--brand); font-weight: 800; font-size: 34px; color: var(--navy);
             line-height: 1; font-variant-numeric: tabular-nums; }
  .env-pct small { font-size: 16px; color: var(--ink-3); margin-left: 2px; }
  .env-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
  .env-info b { font-size: 13px; color: var(--ink); }
  .env-info span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .env-metricas { display: flex; gap: var(--s5); }
  .env-metricas div { display: flex; flex-direction: column; gap: 2px; }
  .env-metricas small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
  .env-metricas b { font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; }

  /* --- prova de que o envio não congelou ---------------------------------
     A barra andava de lote em lote: com 889 fotos eram 45 saltos de ~170 MB, e
     entre um e outro NADA se movia. O dono concluiu que tinha travado, e tinha
     razão em concluir. Agora quatro coisas se mexem sozinhas, e cada uma
     sobrevive a um tipo diferente de parada. */
  .env-agora { font-size: 12px; color: var(--ink-3); margin-top: 2px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .env-agora b { color: var(--ink-2); font-weight: 600; }
  .env-vivo { display: flex; align-items: center; gap: 7px; flex: none;
              font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--good); }
  .env-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--good);
                animation: env-pulso 1.4s ease-in-out infinite; }
  @keyframes env-pulso { 0%, 100% { opacity: 1; transform: scale(1); }
                         50%      { opacity: .3; transform: scale(.72); } }
  /* Listras que correm dentro da barra: mesmo que a porcentagem fique parada
     num arquivo grande, o olho vê movimento e não conclui "travou". */
  .barra.andando i { background-image: linear-gradient(115deg,
      rgba(255,255,255,.32) 25%, transparent 25%, transparent 50%,
      rgba(255,255,255,.32) 50%, rgba(255,255,255,.32) 75%, transparent 75%);
    background-size: 22px 22px; animation: env-listra .9s linear infinite; }
  @keyframes env-listra { to { background-position: 22px 0; } }
  @media (prefers-reduced-motion: reduce) {
    .env-vivo i, .barra.andando i, .fx-vivo i, .fx-fio { animation: none; }
  }

  /* --- faixa de envio: o acompanhamento FORA da tela Importar --------------
     Trocar de tela durante o envio nunca parou nada — ele seguia rodando por
     baixo. O que sumia era o painel, junto com a tela, e não havia por onde
     voltar a vê-lo: quem clicava em "Projetos" no meio de 889 fotos ficava
     sem saber se ainda estava indo. O acompanhamento passa a morar aqui,
     fora de qualquer tela, e some sozinho quando o envio acaba.

     NAVY, e não branco, de propósito: a barra de estado ("Tudo salvo.") é
     branca e ocupa este mesmo rodapé. Duas faixas claras empilhadas leriam
     como uma coisa só. */
  #envioFaixa { position: fixed; left: 66px; right: 0; bottom: 0; z-index: 60;
                padding: 0 24px 14px 16px; }
  /* O menu abre para 214px e a faixa acompanha. Irmão adjacente porque ela
     mora FORA do `.corpo` — dentro dele viraria uma terceira coluna do grid. */
  .corpo:has(.rail.aberto) + #envioFaixa { left: 214px; }
  .fx-in { display: flex; align-items: center; gap: 22px; position: relative; overflow: hidden;
           background: var(--navy); border-radius: 12px; padding: 12px 18px;
           box-shadow: 0 10px 26px rgba(19,31,51,.30); }
  /* O fio é a mesma barra listrada de hoje, com 3px: mostra o avanço e
     continua correndo mesmo quando a porcentagem para num arquivo grande. */
  .fx-fio { position: absolute; left: 0; top: 0; height: 3px; background: var(--orange);
            background-image: linear-gradient(115deg,
              rgba(255,255,255,.32) 25%, transparent 25%, transparent 50%,
              rgba(255,255,255,.32) 50%, rgba(255,255,255,.32) 75%, transparent 75%);
            background-size: 22px 22px; animation: env-listra .9s linear infinite;
            transition: width var(--t); }
  /* Sobre navy o --good apaga: mesmo matiz, sem luminosidade. Família clara. */
  .fx-vivo { display: flex; align-items: center; gap: 7px; flex: none; color: var(--good-claro);
             font-size: 11px; font-weight: 700; letter-spacing: .06em; }
  .fx-vivo i { width: 8px; height: 8px; border-radius: 50%; background: currentColor;
               animation: env-pulso 1.4s ease-in-out infinite; }
  .fx-pct { font-family: var(--brand); font-weight: 800; font-size: 26px; color: #fff;
            line-height: 1; flex: none; font-variant-numeric: tabular-nums; }
  .fx-pct small { font-size: 13px; color: var(--tinta-esc-2); margin-left: 2px; }
  .fx-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
  .fx-info b { font-size: 13px; font-weight: 600; color: #fff; }
  .fx-info span { font-size: 11.5px; color: var(--tinta-esc-2); font-variant-numeric: tabular-nums;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-met { display: flex; gap: 24px; flex: none; }
  .fx-met div { display: flex; flex-direction: column; gap: 2px; }
  .fx-met small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--tinta-esc-3); }
  .fx-met b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
  /* Botão de 32px sobre navy: a regra base de botão é para fundo claro, então
     a cor vem daqui — sem mexer em altura, fonte ou raio, que são da base. */
  #envioVer { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff; }
  #envioVer:hover:not(:disabled) { background: rgba(255,255,255,.18); }
  @media (max-width: 1180px) { .fx-met div:nth-child(3) { display: none; }
  }
  @media (max-width: 980px)  { .fx-met { display: none; }
  }
  /* A faixa flutua sobre a tela e tapava a última fileira de cartões — medido:
     78,8px de altura contra os 24px de folga da folha. Enquanto ela existe, a
     folha reserva o espaço; some junto com ela e nada fica escondido. */
  body.com-faixa-envio .folha { padding-bottom: 92px; }

  /* Fotos já no projeto: lista leve (não miniaturas) com download por item. */
  #fotosBusca { max-width: 340px; }
  .fotos-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* A conferência das fotos (14/10/2026, print aprovado): o cartão navy com uma linha por
     achado. Prefixo `conf-` porque `.it` e `.cab` sozinhos colidiriam com outras telas. */
  .conf-fotos { margin-top: var(--s4); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; background: var(--surface); }
  .conf-fotos .cab { background: var(--navy); color: #fff; padding: 8px 14px; font-weight: 700;
    font-size: 13px; display: flex; justify-content: space-between; }
  .conf-fotos .cab span { font-weight: 400; color: var(--tinta-esc-2); }
  .conf-fotos .it { display: flex; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px; }
  .conf-fotos .it small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
  .conf-fotos .it i { flex: 0 0 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px;
    font-weight: 800; color: #fff; display: grid; place-items: center; margin-top: 1px; }
  .conf-fotos .it i.ruim { background: var(--bad); }
  .conf-fotos .it i.atencao { background: var(--warn); }
  .conf-fotos .it i.bom { background: var(--good); }
  .conf-fotos .acoes { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px;
    border-top: 1px solid var(--border); background: var(--surface-2); }
  /* Os voos do projeto (20/10/2026, print aprovado): o voo é a subpasta das fotografias. O
     prefixo voo- e voos- evita colidir com o .barra e o .vc de outras telas. Sem voo nenhum, o
     bloco vira uma linha só (.voos-convite) e o projeto parece o de sempre. */
  #blocoVoos:not(:empty) { margin-top: var(--s4); }
  .voos-convite { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; }
  .voos-convite .vc-ico { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
    background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; }
  .voos-convite .vc-ico svg { width: 16px; height: 16px; }
  .voos-convite span { display: block; color: var(--ink-3); font-size: 12.5px; }
  .voos-convite button { margin-left: auto; flex: none; }
  .voos-bloco { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
  .voos-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .voos-cab h2 { margin: 0; }
  .voos-cab span { color: var(--ink-3); font-size: 12.5px; }
  .voos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); }
  .voo-cartao { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer;
    background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .voo-cartao:hover { border-color: #b9c4d3; }
  .voo-cartao:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .voo-cartao.aberto { border: 1.5px solid var(--orange); background: #fffaf6; box-shadow: 0 0 0 3px rgba(255,101,1,.10); }
  .voo-cartao.todas { background: var(--surface-2); }
  .voo-cartao.todas.aberto { background: #fffaf6; }
  .voo-cartao.sem .vc-nota { color: var(--warn); }
  .voo-cartao .vc-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .voo-cartao .vc-nome svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
  .voo-cartao.aberto .vc-nome svg { color: var(--orange); }
  .voo-cartao .vc-nome b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voo-cartao .vc-sub { color: var(--ink-3); font-size: 12px; }
  .voo-cartao .vc-nota { color: var(--ink-3); font-size: 11.5px; }
  .voo-cartao .vc-acoes { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .voo-cartao .vc-acoes button { padding: 3px 9px; font-size: 12px; }
  /* "Virar voo" (24/10/2026, print aprovado): o botão laranja-vazado do cartão "Sem voo". */
  .voo-cartao .vc-acoes button.virar { border: 1.5px solid var(--orange); color: #b04500; background: var(--surface); }
  /* O modelo de cada cartão — etapa 3 de vários voos (23/10/2026): a linha do estado e o
     Processar laranja dentro do cartão, como no print aprovado. */
  .voo-cartao .vc-modelo { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink-3); margin-top: 4px; }
  .voo-cartao .vc-sem { color: var(--ink-3); }
  .voo-cartao .vc-selo { font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .3px; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--ink-3); white-space: nowrap; }
  .voo-cartao .vc-selo.pronto { background: #e3f4ea; color: var(--good); }
  .voo-cartao .vc-selo.na_fila, .voo-cartao .vc-selo.processando, .voo-cartao .vc-selo.trazendo { background: #e8eef8; color: var(--info); }
  .voo-cartao .vc-selo.falhou { background: #fff3df; color: var(--warn); }
  /* O modelo no disco que nenhum job deste projeto fez (24/10/2026): âmbar, como o falhou —
     é para processar de novo, não para entregar. */
  .voo-cartao .vc-selo.herdado { background: #fff3df; color: var(--warn); }
  .voo-cartao .vc-mapa { color: var(--ink-3); font-size: 11.5px; text-align: right; }
  .voo-cartao .vc-proc:empty { display: none; }
  /* Marcações por pasta (24/10/2026): as linhas dos diálogos de excluir pasta, apagar o mapa e
     limpar fotos sem voo e de processar de novo — o que SAI em vermelho, o que FICA
     em verde, como no print aprovado. */
  .conf-linhas { margin-top: 2px; }
  /* A linha de sugestão do "Virar voo", logo abaixo do campo do nome (pedirTexto, `ajuda`). */
  .dlg-ajuda { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 0; }
  .conf-linha { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
    border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.45; }
  .conf-linha:first-child { border-top: 0; padding-top: 0; }
  .conf-linha .ci { width: 22px; flex: none; text-align: center; }
  .conf-linhas .sai { color: var(--bad); font-weight: 600; }
  .conf-linhas .fica { color: var(--good); font-weight: 600; }
  .voo-novo { border: 1.5px dashed #c6d0dc; border-radius: 12px; background: transparent; color: var(--ink-3);
    display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; min-height: 74px; }
  .voo-novo span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed #b4c0cf;
    display: grid; place-items: center; font-size: 17px; }
  .voo-novo:hover { border-color: var(--orange); color: var(--orange); }
  #solta .solta-voo { color: var(--orange); }
  .fotos-do-voo { font-size: 12.5px; color: #b04500; background: #fff0e5; border-radius: 999px; padding: 2px 10px; }
  .conf-fotos.conferindo { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    color: var(--ink-3); font-size: 13px; }
  .conf-fotos .giro { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border);
    border-top-color: var(--orange); animation: giraToast .8s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .conf-fotos .giro { animation: none; } }
  /* A GEOMETRIA DO VOO (26/10/2026, print aprovado): o sub-cabeçalho laranja-claro com o selo
     da régua inicial, o desenho de frente e de lado, e o "No revoo" de cada aviso. O prefixo
     geo- evita colidir com as outras telas. */
  .conf-fotos .geo-sub { padding: 6px 14px; background: #fffaf6; border-top: 1px solid var(--border);
    font: 700 11px/1.6 Inter, system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase;
    color: #b04500; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .conf-fotos .geo-sub small { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--warn); background: #fff3e0; border: 1px solid #f1d39b; border-radius: 999px; padding: 0 8px; }
  .conf-fotos .geo-desenho { padding: 10px 14px 4px; border-top: 1px solid var(--border);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .conf-fotos .geo-desenho figure { margin: 0; }
  .conf-fotos .geo-desenho figcaption { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .conf-fotos .geo-desenho svg { width: 100%; height: 190px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; }
  .geo-desenho .geo-pontos, .geo-desenho .geo-raios circle { fill: #2f6fd6; }
  .geo-desenho .geo-raios line { stroke: #2f6fd6; stroke-width: 2; }
  .geo-desenho .geo-sem-foto { fill: var(--bad); opacity: .12; }
  .geo-desenho .geo-limite { stroke: var(--bad); stroke-dasharray: 4 3; }
  .geo-desenho .geo-parede { fill: #e3dccf; stroke: #b9ad99; }
  .geo-desenho text, .geo-desenho .geo-t { font: 9px Inter, system-ui, sans-serif; fill: var(--ink-2); }
  .geo-desenho .geo-t-ruim { fill: var(--bad); font-weight: 700; }
  .geo-desenho .geo-t-bom { fill: var(--good); }
  .conf-fotos .it .geo-revoo { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2);
    background: #f3f7fc; border-left: 3px solid var(--info); padding: 3px 8px; border-radius: 0 6px 6px 0; }
  .conf-fotos .it .geo-revoo b { color: var(--info); }
  /* A LINHA DA ALTURA DO PRÉDIO (05/11/2026, print aprovado): azul, porque é pergunta e não aviso.
     O desenho ganha o topo dado, cheio se digitado e tracejado se estimado. */
  .conf-fotos .geo-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px;
    border-top: 1px solid var(--border); background: #f3f7fc; font-size: 12.5px; }
  .conf-fotos .geo-alt > i { flex: 0 0 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px;
    font-weight: 800; color: #fff; display: grid; place-items: center; }
  .conf-fotos .geo-alt > i.info { background: var(--info); }
  .conf-fotos .geo-alt > i.bom { background: var(--good); }
  .conf-fotos .geo-alt > i.estimada { background: var(--warn); }
  .conf-fotos .geo-alt-dica { flex: 1 1 calc(100% - 30px); font-weight: 600; color: var(--info); }
  .conf-fotos .geo-alt label { margin: 0; font-weight: 600; color: var(--ink-2); }
  .conf-fotos .geo-alt label small { font-weight: 400; color: var(--ink-3); }
  .conf-fotos .geo-alt-in { display: inline-flex; align-items: center; gap: 5px; }
  .conf-fotos .geo-alt-in input { width: 72px; height: 28px; padding: 0 8px; text-align: right; }
  .conf-fotos .geo-alt-ou { color: var(--ink-3); }
  .conf-fotos .geo-alt-ok { color: var(--good); font-weight: 600; font-size: 11.5px; }
  .conf-fotos .geo-alt-chip { background: #fff6e6; border: 1px solid #f1d39b; color: var(--warn); border-radius: 999px;
    padding: 1px 9px; font-weight: 600; font-size: 11.5px; }
  .conf-fotos .geo-alt-nota { flex: 1 1 100%; color: var(--ink-3); font-size: 11.5px; }
  .geo-desenho .geo-predio { stroke: var(--navy); stroke-width: 1.5; }
  .geo-desenho .geo-predio.estimado { stroke-dasharray: 5 3; }
  .fotos-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--s3) 0; }
  .fotos-barra #fotosBusca { flex: 1 1 220px; width: auto; }
  .fotos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
  .fotos-acoes [hidden] { display: none; }
  #fotosAcoesDaSelecao { display: contents; }
  .fotos-selo { background: var(--info-bg); color: var(--navy); }
  .fotos-selo[hidden] { display: none; }
  #fotosBarraSel .aviso-desfoque { margin: 0 0 var(--s3); }
  .foto-linha.marcada { background: #f3f8ff; }
  .foto-linha input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange);
                                       cursor: pointer; margin: 0; }
  /* Em colunas: cada foto ocupa pouco, e uma coluna só deixava um deserto entre
     o nome e o tamanho. */
  .foto-lista { max-height: 440px; overflow-y: auto; padding: 2px;
                display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
                gap: 8px; align-content: start; }
  .foto-linha { display: grid; grid-template-columns: 18px minmax(0,1fr) 74px 30px 30px;
                align-items: center; gap: 10px; padding: 8px 12px;
                border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
                cursor: pointer; transition: border-color var(--t), background var(--t); }
  .foto-linha:hover { background: var(--surface-2); border-color: var(--border-hover); }
  .foto-linha svg { width: 20px; height: 20px; color: var(--ink-3); }
  .foto-nome { font-size: 13px; color: var(--ink); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
  .foto-tam { font-size: 12px; color: var(--ink-3); text-align: right;
              font-variant-numeric: tabular-nums; }
  .imp-conf-pe .lin { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
  .imp-conf-pe .lin b { color: var(--ink); font-variant-numeric: tabular-nums; }

  /* AS TRES ABAS DO ENTREGAR — item 105.
   *
   * Substituiu o `.ent-cols`, que punha os tres blocos em duas colunas desencontradas: medi
   * 310px de buraco embaixo a esquerda, porque a coluna da direita somava ~1.003px e a da
   * esquerda 693. Em aba, cada bloco usa os 1.470px de largura util — e o minimo de cada um
   * e 648, 681 e 657.
   *
   * O seletor REUSA o `.pj-modo` da tela Projetos (segmentado claro, item ativo em navy).
   * Nao inventei controle novo: o app ja tinha o padrao, e dois controles diferentes para a
   * mesma funcao e a coisa que faz uma interface parecer costurada.
   *
   * 16px de folga acima e abaixo, o padrao entre blocos. */
  .ent-abas { display: flex; margin: var(--s4) 0; }
  .ent-abas .pj-modo button { cursor: pointer; }
  /* A contagem dentro da aba ("Comentarios 1") herda a cor do botao, para nao brigar com o
   * navy do selecionado nem com o cinza do nao selecionado. */
  .ent-abas .pj-modo button b { margin-left: 5px; font-variant-numeric: tabular-nums; }
  /* O painel nao tem moldura propria: quem tem e a `section.bloco` dentro dele. Sem isto
   * apareceriam duas bordas concentricas em volta do mesmo conteudo. */
  .ent-painel[hidden] { display: none; }

  /* A TABELA DE LINKS DO ENTREGAR — item 103, versão 3, aprovada por ele.
   *
   * Substituiu uma lista de `flex` que ele achou olhando: "veja como as linhas estão
   * bagunçadas". Medido antes de mexer: o estado desviava 473,3px de linha para linha, o
   * destinatário 446,7px e as aberturas 316,2px, com alturas alternando entre 38,3 e 50px.
   * A causa era o endereço ser elástico — tudo depois dele flutuava.
   *
   * As larguras não são chutadas:
   *   158px no estado   — cabe "revogado" + "em 12/08" sem quebrar
   *   118px na revisão  — uma data em dd/mm/aaaa
   *   214px nas aberturas — cabe "116×" + "26/07/2026 às 05:48", o pior caso real dele
   *   158px nas ações   — os dois botões somam 122,5px E a célula tem 12px de folga de cada
   *                       lado. Na v2 eu pus 128 e eles QUEBRARAM DE LINHA: sobravam 104.
   *                       Foi ele quem viu.
   *
   * `height: 40px` fixo em cada célula, e não `padding`: com padding, uma célula de conteúdo
   * mais alto (o selo) empurraria só a linha dela, e as alturas voltariam a alternar. */
  /* A ULTIMA COLUNA MEDE O CONTEUDO, e nao um numero que eu escrevi a mao.
     Ela era `158px`, calculada para DOIS botoes (copiar 69,8 + revogar 80,9 + 24 de
     padding). Depois entrou o `enviar`, e ninguem revisitou: os tres somam 233,1 px, sobram
     134, e o primeiro comecava **87,2 px antes** do inicio da coluna — em cima do "nao
     aberto" da coluna Aberturas. Ele viu na tela e apontou com uma seta.
     `max-content` faz a coluna acompanhar o que ela guarda, inclusive quando o botao muda
     de texto (`enviar` -> `reenviar`) ou quando entrar um quarto. Numero escrito a mao em
     largura de coluna com botao dentro erra na primeira mudanca. */
  .ent-grade { display: grid;
               grid-template-columns: minmax(0,1fr) 158px 118px 214px max-content;
               align-items: center; border: 1px solid var(--border);
               border-radius: 10px; overflow: hidden; margin-top: var(--s3); }
  .ent-grade > div { height: 40px; padding: 0 12px; display: flex; align-items: center;
                     min-width: 0; font-size: 12.5px; color: var(--ink);
                     border-top: 1px solid var(--hair); }
  .ent-grade > div.eg-cab { height: 34px; border-top: 0; background: var(--surface-2);
                            font: 600 10.5px/1 system-ui;
                            letter-spacing: .05em; text-transform: uppercase;
                            color: var(--ink-3); }
  .ent-grade > div.dir { justify-content: flex-end; }
  /* A linha revogada recua INTEIRA, não só o selo: o estado é do link todo. */
  .ent-grade > div.off { color: #98a1af; }

  .eg-quem { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eg-quem.sem { font-weight: 400; color: var(--ink-3); }
  /* O e-mail embaixo do nome, na mesma célula. `display:block` para quebrar a linha, e a
   * altura da célula (40px) aguenta as duas porque as fontes são 12,5 e 11. */
  .eg-email { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              font-variant-numeric: normal; }
  /* A célula do nome passou a ter duas linhas: alinha pelo topo em vez do centro, senão o
   * nome desce e desalinha com as outras colunas. */
  .ent-grade > div:first-child, .ent-grade > div:nth-child(6n+1) { align-items: center; }
  .eg-quem.sem code { font: 11.5px ui-monospace, Consolas, monospace; color: var(--ink-2); }
  .eg-ap { margin-left: 6px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
  .eg-n { font-weight: 600; font-variant-numeric: tabular-nums; }
  /* "não aberto" é o único estado acionável da coluna — o revisor não recebeu ou não achou o
   * link. Por isso tem peso, e os outros não. Não é vermelho: não é erro, é "confere se chegou". */
  .eg-n.nao-aberto { color: var(--ink-2); }
  .eg-vazio { color: #b4bcc8; }
  .eg-acoes { display: flex; gap: 6px; justify-content: flex-end; }
  .ent-pe-nota { margin: var(--s2) 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

  /* As fotos do projeto: a seta, a lixeira, a grade e a foto aberta (06/11/2026). */
  .foto-acao { position: relative; display: inline-flex; align-items: center; justify-content: center;
               width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border);
               background: #fff; color: var(--ink-2); cursor: pointer; }
  .foto-acao svg { width: 16px; height: 16px; }
  .foto-acao:hover { border-color: var(--orange); color: var(--orange); }
  .foto-acao.lixo { color: var(--bad); }
  .foto-acao.lixo:hover { border-color: var(--bad); color: var(--bad); }
  .foto-acao:disabled { opacity: .5; cursor: default; }
  .foto-acao::after { content: attr(data-dica); position: absolute; top: calc(100% + 5px); right: 0; z-index: 3;
                      padding: 3px 8px; border-radius: 6px; background: var(--navy); color: #fff;
                      font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
                      opacity: 0; transition: opacity var(--t); }
  .foto-acao:hover::after, .foto-acao:focus-visible::after { opacity: 1; }
  .foto-grade { max-height: 70vh; overflow-y: auto; padding: 2px; display: grid; gap: 10px; align-content: start;
                grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .foto-mini { position: relative; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
  .foto-mini:hover { border-color: var(--border-hover); }
  .foto-mini.marcada { border-color: var(--orange); background: #f3f8ff; }
  .foto-mini-abrir { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 0;
                     background: var(--surface-2); cursor: zoom-in; }
  .foto-mini-abrir img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .foto-mini-marca { position: absolute; top: 7px; left: 7px; width: 18px; height: 18px; margin: 0;
                     accent-color: var(--orange); cursor: pointer; }
  .foto-mini-acoes { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; opacity: 0; transition: opacity var(--t); }
  .foto-mini:hover .foto-mini-acoes, .foto-mini:focus-within .foto-mini-acoes { opacity: 1; }
  @media (hover: none) { .foto-mini-acoes { opacity: 1; } }
  .foto-mini-pe { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; }
  .foto-mini-pe .foto-nome { font-size: 11.5px; }
  .foto-mini-pe .foto-tam { font-size: 11.5px; white-space: nowrap; }
  /* Abaixo do #toast (300), de propósito: o "Desfazer" da exclusão aparece por cima da foto aberta. */
  .foto-visor { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center;
                padding: 64px 72px 24px; background: rgba(9, 14, 24, .94); }
  .foto-visor-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
  .foto-visor-erro { margin: 0; color: #fff; font-size: 14px; }
  .foto-visor-topo { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center;
                     gap: 14px; padding: 0 16px; color: #fff; }
  .foto-visor-nome { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .foto-visor-conta { font-size: 12.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .foto-visor-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
  .foto-visor-bt { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
                   background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .foto-visor-bt svg { width: 16px; height: 16px; }
  .foto-visor-bt:hover { color: var(--orange); }
  .foto-visor-bt.lixo { color: var(--bad); }
  .foto-visor-bt.lixo:hover { background: #fdeeee; color: var(--bad); }
  .foto-visor-bt:disabled { opacity: .6; cursor: default; }
  .foto-visor-fechar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
                       margin-left: 6px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 9px; background: transparent; color: #fff; cursor: pointer; }
  .foto-visor-fechar svg { width: 18px; height: 18px; }
  .foto-visor-seta { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
                     width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
  .foto-visor-seta:hover { background: rgba(255, 255, 255, .28); }
  .foto-visor-seta svg { width: 20px; height: 20px; }
  .foto-visor-seta.esq { left: 14px; }
  .foto-visor-seta.dir { right: 14px; }