/* ---------------------------------------------------------------------------
     Sistema de design — MAP Inspect 3D
     Cor e fonte da marca MAP DRONES (mapdrones.com.br). Tema claro, deliberado:
     software de inspeção predial é ferramenta corporativa, não app noturno.
     Montserrat carrega marca e títulos; a stack de sistema carrega corpo e dados
     (mais legível em tamanho pequeno e sem ar de material de marketing).
     O laranja é gasto num lugar só: a ação primária. Estado usa verde/âmbar/
     vermelho, que não é o acento.
  --------------------------------------------------------------------------- */
  :root {
    --navy:      #131f33;
    --navy-2:    #22344f;
    --orange:    #ff6501;
    --orange-dk: #e85a00;

    /* neutros com viés navy — cinza puro leria como não pensado */
    --bg:     #eef1f5;
    --surface:#ffffff;
    --surface-2:#f7f9fc;
    --border: #dde3ec;
    --hair:   #eaeef4;
  --zebra:#eef2f8;

    /* ---- texto sobre fundo escuro (menu, banner navy, tela de processamento)
       Eram OITO tons fazendo este trabalho, cada um escrito onde fez falta.
       Viraram quatro níveis. As fusões foram escolhidas por distância
       perceptual (Lab): só juntei o que está abaixo de 6, que o olho não separa
       fora de comparação lado a lado.
         #93a3bb (10 usos) e #9aa5b5 (3) -> --tinta-esc-2   (4,8 e 5,7)
       O que estava longe FICOU: #8698b3 está a 9,3 de --tinta-esc-2, e
       #b6c4d6 a 7,3 de --tinta-esc-1 — juntar seria mudar a tela, não organizá-la. */
    --tinta-esc-1:  #cdd6e4;   /* leitura principal sobre navy */
    --tinta-esc-2:  #9fb0c7;   /* secundário: subtítulo, meta, contagem */
    --tinta-esc-2b: #8698b3;   /* um degrau abaixo do 2, onde ele some */
    --tinta-esc-2c: #b6c4d6;   /* um degrau acima do 1, em bloco muito escuro */
    --tinta-esc-3:  #6c7d95;   /* nota, carimbo, unidade */
    --tinta-esc-off:#5b6a82;   /* desativado sobre navy */

    /* ---- azul de informação (faixa de leitura, papel de usuário) */
    --info:    #24447e;
    --info-bg: #eef4ff;
    --info-bd: #cfe0fb;
    /* ---- A COR DO COMENTARIO, e ela atravessa as duas telas -- itens 220 e 203.
       Ele mandou padronizar: "a cor do que e comentario padronizar azul". No visualizador o
       token nasceu como `var(--info)`, e AQUI ISSO NAO SERVE: os dois `--info` divergem --
       #24447e neste arquivo, #1c4d92 no viewer/index.html. Herdar o de ca daria duas cores
       para a mesma coisa, que e exatamente o que ele mandou acabar.
       Por isso o valor e LITERAL, e igual ao de la. `tests/test_o_comentario_do_revisor_tem_saida.py`
       compara os dois arquivos e quebra se um andar sem o outro. */
    --comentario: #1c4d92;
    --comentario-dk: #163a70;

    /* ---- bordas das faixas de estado, que antes eram três âmbares soltos */
    --warn-bd:  #f0d9a8;
    --warn-bd2: #e6d2ac;   /* 6,2 do anterior: fica, é o âmbar mais neutro */
    --bad-bd:   #f0d9d3;
    --bad-bg2:  #fdf8f7;   /* fundo lavado do bloco de risco */

    /* ---- superfícies claras que não são --surface nem --surface-2 */
    --surface-3: #fbfcfe;   /* 1,2 de --surface-2, mas usada como topo de gradiente */
    --inerte-bg: #eef1f6;   /* fundo de campo/botão desativado */

    /* ---- navy mais fundo que --navy, para gradiente e abertura */
    --navy-3: #16233a;
    --navy-4: #0f1a2c;
    --navy-5: #070b14;   /* faixa da lista zebrada; ver .ent-tab. Mesmo tom do visualizador. */
    --ink:    #17202e;
    --ink-2:  #46536a;
    --ink-3:  #616c7e;
    /* Era #7c879a e dava 3,20:1 sobre o fundo do app — abaixo do mínimo de
       4,5:1 para texto normal. E --ink-3 é a cor de TODO o texto secundário:
       rótulo de formulário, contagem, estado vazio, legenda. Em campo, com sol
       na tela do notebook, sumia. Mesmo matiz, só mais escuro: passa a 4,69:1
       no fundo, 5,03:1 na folha e 5,31:1 no branco. Continua bem distante do
       --ink-2 (7,76:1), então os dois níveis de texto seguem distinguíveis. */

    --good:   #10814a; --good-bg:#e3f3ea;
    --warn:   #a86a12; --warn-bg:#fbf0dc;
    --bad:    #c23520; --bad-bg: #fbe7e2;
    /* Cada estado tem DUAS versões: a do tema, para texto escuro sobre branco,
       e a "-claro", que acende sobre navy. Misturar as duas foi o que gerou
       cinco vermelhos e cinco verdes espalhados pelo CSS. */
    --good-claro: #2ee08a;  --warn-claro: #ffa524;  --bad-claro: #ff5a45;
    /* Verde e azul de AÇÃO (baixar backup, verificar serviços, exportações):
       tom médio, legível sobre branco em botão de borda. */
    --acao-verde: #1d7044;  --acao-verde-bd: #bfe0cd;
    --acao-verde-bg: #f2fbf6; --acao-verde-bg2: #e4f6ec;
    --acao-azul: #1c4d92;   --acao-azul-bd: #c2d5ef;
    --acao-azul-bg: #f2f7fd;  --acao-azul-bg2: #e4eefb;

    --sh-1: 0 1px 2px rgba(19,31,51,.05);
    --sh-2: 0 2px 4px rgba(19,31,51,.05), 0 8px 24px rgba(19,31,51,.06);
    --sh-modal: 0 24px 70px rgba(19,31,51,.4);   /* diálogo e cartão flutuante */
    /* Anel de foco laranja. Existiam CINCO alfas para a mesma função — .08,
       .14, .16, .20 e .22 —, um por lugar onde alguém precisou de um realce. */
    --anel-foco: 0 0 0 3px rgba(255,101,1,.16);
    --border-hover: #c6cfdc;   /* borda ao passar o mouse: eram quatro cinzas */
    --sel-bg: #fff7f2;         /* fundo de item selecionado: eram cinco tons */
    /* Transição de estado (hover, foco, seleção). Eram quatro durações fazendo
       exatamente a mesma coisa: .1s, .12s, .14s e .15s. */
    --t: .12s;

    /* escala de espaçamento 4/8 */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

    --brand: "Montserrat", system-ui, sans-serif;
    --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  * { box-sizing: border-box; }

  /* ===================== O ATRIBUTO hidden MANDA ==========================
     Qualquer regra que declare `display` vence o `[hidden]` embutido do
     navegador, porque a folha do autor ganha da folha padrão. O resultado é
     silencioso e traiçoeiro: o JS marca `el.hidden = true`, o atributo está
     lá, e o elemento continua na tela.

     Já aconteceu duas vezes — a faixa de "somente leitura", que aparecia para
     todo mundo, e o filtro de Laudos, que marcava 17 linhas como ocultas e
     mostrava as 17. Esta regra encerra a categoria inteira do problema.

     Se algum dia precisar de um elemento com hidden VISÍVEL (não deveria),
     use outro atributo, não remova esta linha. */
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 14px/1.55 var(--ui);
    -webkit-font-smoothing: antialiased;
    display: grid; grid-template-rows: auto 1fr; min-height: 100vh;
  }
  ::selection { background: rgba(255,101,1,.18); }
  /* O ESTILO DO MENU DO USUARIO MUDOU-SE PARA O `casca.css` em 17/08/2026, item 253.
     Ele morava so aqui, e por isso o menu — que agora existe nas duas telas — sairia sem
     estilo nenhum no visualizador. Terceira metade de peca a ficar para tras em dois dias. */

  /* A REGRA DA TAGLINE E DO USUARIO MUDOU DE ARQUIVO em 17/08/2026, item 252: os dois
     elementos passaram a ser escritos pela CASCA, e o estilo foi junto para o `casca.css`.
     Deixa-lo aqui faria a regra valer so no painel — que e exatamente o defeito que o item
     consertou (uma tela com a foto dele, a outra sem). */

  /* A largura da rail é a coluna do grid (66px ou 214px). Item de grid não
     respeita `width` própria; quem manda é o track. */
  .corpo { display: grid; grid-template-columns: 66px 1fr; min-height: 0; }
  .corpo:has(.rail.aberto) { grid-template-columns: 214px 1fr; }
  .corpo aside { display: none; }

  /* ---------------------------------------- medidor de progresso do projeto
     Responde "quanto deste trabalho está pronto?" antes de qualquer outra coisa
     da tela. Halo obrigatório: medidor sem brilho sobre navy some — e
     `currentColor` lê a propriedade `color`, não o `stroke`, então os dois
     precisam estar no elemento. */
  /* `display: block` não é decoração: .med-anel é um <span>, e span é INLINE —
     largura e altura simplesmente não se aplicam. No banner isso passava
     despercebido porque o pai é flex, o que transforma os filhos em blocos; na
     aba Entregar, com pai comum, o anel saiu com 56x19 e o número escorregou
     para fora dele. */
  /* ------------------------------------------------ medidor de progresso
     Arco ABERTO de 270°, com o vão embaixo — desenho de medidor, não de anel
     fechado. A referência que o Henrique mandou tem três coisas que o meu anel
     não tinha, e as três importam:
       1. o vão embaixo, que dá ao arco um começo e um fim visíveis;
       2. o número em PERCENTUAL, grande, NA COR DO ARCO — em branco ele era só
          um número dentro de um círculo, e não a leitura do medidor;
       3. o rótulo e a fração ABAIXO do anel, não ao lado.
     O mesmo componente serve fundo navy e fundo claro: muda o trilho, que
     precisa de contraste, e o halo, que existe para o arco não sumir no escuro
     e sobre branco só borraria a borda. */
  .medidor { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
  .med-anel { display: block; width: 78px; height: 78px; position: relative; flex: none; }
  .med-anel svg { width: 100%; height: 100%; display: block; overflow: visible; }
  /* 8 na viewBox de 108 dá ~5,8px na tela: traço firme sem estrangular o
     miolo onde o percentual mora. */
  .med-anel path { fill: none; stroke-width: 8; stroke-linecap: round; }
  .med-trilho { stroke: rgba(255,255,255,.12); }
  .med-arco { stroke: var(--good-claro); color: var(--good-claro);
              filter: drop-shadow(0 0 5px currentColor);
              transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
  .med-arco.parcial { stroke: var(--orange); color: var(--orange); }
  /* O número ocupa o miolo do arco, e sobe um pouco: o vão embaixo desloca o
     centro óptico para cima do centro geométrico. */
  .med-num { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%);
             text-align: center; font: 800 21px/1 var(--brand); color: var(--good-claro);
             letter-spacing: -.02em; }
  .med-num.parcial { color: var(--orange); }
  .med-num i { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: .5px; }
  .med-txt { text-align: center; line-height: 1.25; }
  .med-txt b { display: block; font: 700 11.5px/1.25 var(--ui); color: #fff; }
  .med-txt small { display: block; font-size: 10.5px; color: var(--tinta-esc-2c); }

  /* No banner do projeto, encostado à direita, antes das ações. */
  .pr-medidor { margin-left: auto; padding-right: var(--s4); }
  /* .fly-data segue em uso pela biblioteca de Laudos; o menu suspenso de
     Recentes foi substituído pela tela Projetos ordenada por data. */
  .rel-acoes { display: flex; gap: 8px; flex: none; }

  /* ---------------------------------------------------------- barra lateral */
  aside {
    background: var(--surface); border-right: 1px solid var(--border);
    padding: var(--s5) var(--s4); overflow-y: auto; height: calc(100vh - 60px);
    display: flex; flex-direction: column; gap: var(--s4);
  }
  .eyebrow {
    font-family: var(--brand); font-weight: 700; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    display: flex; align-items: center; justify-content: space-between;
  }
  .eyebrow .conta { color: var(--ink-3); font-family: var(--ui); font-weight: 600;
                    letter-spacing: 0; }

  .lista { display: flex; flex-direction: column; gap: var(--s2); }
  .item {
    padding: var(--s3) var(--s4); border-radius: 9px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    display: flex; flex-direction: column; gap: 6px; transition: .14s ease;
  }
  .item:hover { border-color: var(--border-hover); box-shadow: var(--sh-2); transform: translateY(-1px); }
  .item.sel { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
  .item .nome { font-weight: 600; font-size: 14px; color: var(--ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .item .meta { display: flex; align-items: center; gap: var(--s2);
                font-size: 12px; color: var(--ink-3); }

  /* ---------------------------------------------------------- pílula de estado */
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px; border-radius: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .s-aguardando_upload, .s-pronta_para_processar { color: var(--ink-3); background: var(--hair); }
  .s-na_fila, .s-processando { color: var(--warn); background: var(--warn-bg); }
  .s-concluida { color: var(--good); background: var(--good-bg); }
  .s-falhou, .s-cancelada { color: var(--bad); background: var(--bad-bg); }