/* Pele calma: fundo quente sem branco estourado, ícones de linha, uma cor de
   destaque só. Mesma direção validada no Argos em 14/07 — nada de salada de
   emoji nem card colorido gritando. */
:root {
  --fundo: #f7f6f3;
  --papel: #fffefc;
  --tinta: #2b2a27;
  --tinta-fraca: #6f6c66;
  --linha: #e5e2dc;
  --destaque: #2f6f5e;
  --destaque-fraco: #e8f0ed;
  --alerta: #a3402f;
  --raio: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1a1917;
    --papel: #222120;
    --tinta: #e8e5df;
    --tinta-fraca: #9b968d;
    --linha: #34322e;
    --destaque: #7fbfa8;
    --destaque-fraco: #23302c;
    --alerta: #e08a78;
  }
}

/* O atributo `hidden` esconde via `display:none` da folha do navegador — e
   QUALQUER `display` declarado aqui ganha dele. Como `.portao` usa
   `display:grid`, a tela de login continuava visível depois do login e o app
   aparecia embaixo dela (bug de 20/07). Esta regra tem que vir antes das
   outras e com !important, senão volta a acontecer na próxima tela que
   declarar display. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round; }

/* ---------- portão ---------- */
.portao { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.cartao {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 32px 28px; max-width: 380px; width: 100%;
}
.marca { width: 44px; height: 44px; color: var(--destaque); stroke-width: 2; }
.marca circle { fill: currentColor; stroke: none; }
.cartao h1 { font-size: 21px; margin: 14px 0 6px; font-weight: 600; }
.sub { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 22px; }
.sub code { font-family: var(--mono); font-size: 13px; }
label { display: block; font-size: 13px; color: var(--tinta-fraca); margin-bottom: 6px; }
input[type=password], input[type=search] {
  width: 100%; padding: 11px 13px; font-size: 16px; color: var(--tinta);
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 8px; font-family: inherit;
}
input:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
button[type=submit] {
  margin-top: 14px; width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--destaque); border: 0; border-radius: 8px; cursor: pointer;
}
.erro { color: var(--alerta); font-size: 14px; margin: 12px 0 0; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: 12px 10px; padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.topo h1 { flex: 1; font-size: 16px; font-weight: 600; margin: 0; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
         background: none; border: 0; color: var(--tinta-fraca); cursor: pointer;
         border-radius: 8px; }
.icone:active { background: var(--linha); }

.busca { display: flex; align-items: center; gap: 8px; padding: 10px;
         border-bottom: 1px solid var(--linha); }
.busca svg { color: var(--tinta-fraca); flex: none; }
.busca input { flex: 1; }

main { padding: 6px 10px 40px; }

/* ---------- árvore ---------- */
.no { border-bottom: 1px solid var(--linha); }
.no:last-child { border-bottom: 0; }
.linha {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 6px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.linha:active { background: var(--destaque-fraco); }
.seta { flex: none; color: var(--tinta-fraca); transition: transform .15s; }
.aberto > .linha .seta { transform: rotate(90deg); }
.rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo .rotulo { font-family: var(--mono); font-size: 14px; }
.contagem { flex: none; font-size: 12px; color: var(--tinta-fraca);
            background: var(--fundo); border: 1px solid var(--linha);
            border-radius: 20px; padding: 1px 8px; }
.filhos { display: none; margin-left: 14px; border-left: 1px solid var(--linha); padding-left: 8px; }
.aberto > .filhos { display: block; }

/* ---------- detalhe ---------- */
.caminho { font-family: var(--mono); font-size: 13px; color: var(--tinta-fraca);
           padding: 4px 6px 14px; word-break: break-all; }
.simbolo { background: var(--papel); border: 1px solid var(--linha);
           border-radius: var(--raio); padding: 13px 14px; margin-bottom: 10px; }
.simbolo h3 { margin: 0; font-size: 15px; font-family: var(--mono); font-weight: 600;
              word-break: break-word; }
.meta { font-size: 12px; color: var(--tinta-fraca); margin-top: 3px; }
.rel { margin-top: 11px; font-size: 14px; }
.rel > span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
              color: var(--tinta-fraca); }
.rel ul { list-style: none; margin: 5px 0 0; padding: 0; }
.rel li { padding: 3px 0; font-family: var(--mono); font-size: 13px; }
.rel li em { font-style: normal; color: var(--tinta-fraca); }
.rel button { background: none; border: 0; padding: 0; color: var(--destaque);
              font: inherit; cursor: pointer; text-align: left; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--linha); }
.aba { flex: 1; padding: 10px; font: inherit; font-size: 14px; font-weight: 600;
       color: var(--tinta-fraca); background: none; border: 0; cursor: pointer;
       border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba.ativa { color: var(--destaque); border-bottom-color: var(--destaque); }

/* ---------- mapa ---------- */
#tela-mapa { position: relative; width: 100%;
             /* topo + abas ≈ 108px; dvh porque a barra do Safari some ao rolar */
             height: calc(100dvh - 108px); overflow: hidden; touch-action: none; }
#mapa { display: block; width: 100%; height: 100%; cursor: grab; }
#mapa:active { cursor: grabbing; }

.aviso-mapa { position: absolute; inset: 0; display: grid; place-items: center;
              color: var(--tinta-fraca); font-size: 14px; pointer-events: none; }

.cartao-no {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.cartao-no strong { font-family: var(--mono); font-size: 14px; word-break: break-word; }
.cartao-no span { font-family: var(--mono); font-size: 12px; color: var(--tinta-fraca);
                  word-break: break-all; }
.cartao-no button { margin-top: 8px; align-self: flex-start; padding: 7px 14px;
                    font: inherit; font-size: 13px; font-weight: 600; color: #fff;
                    background: var(--destaque); border: 0; border-radius: 7px; cursor: pointer; }

.filtros { position: absolute; left: 10px; top: 10px; z-index: 2;
           display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
        font: inherit; font-size: 12px; font-weight: 600; color: var(--tinta-fraca);
        background: var(--papel); border: 1px solid var(--linha); border-radius: 20px;
        cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.chip.ativo { color: var(--tinta); border-color: currentColor; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: currentColor;
          opacity: .35; }
.chip.ativo i { opacity: 1; }

.controles { position: absolute; right: 10px; top: 10px; z-index: 2;
             display: flex; flex-direction: column; gap: 6px; }
.controles .icone { background: var(--papel); border: 1px solid var(--linha);
                    color: var(--tinta); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.vazio { color: var(--tinta-fraca); padding: 30px 6px; text-align: center; }
.rodape { color: var(--tinta-fraca); font-size: 12px; text-align: center;
          padding: 18px 10px 30px; }