/* =====================================================================
   Sistema de Identificacao e Localizacao de Tumulos
   Valores definidos em design-tokens.md -- nada de hex cru abaixo de :root.
   ===================================================================== */

:root {
  color-scheme: light;

  /* -- superficies e tinta ------------------------------------------- */
  --pergaminho: #FBFAF7;
  --pedra: #F6F4EF;
  --pedra-funda: #EDEAE2;
  --linha: #DCD7CB;
  --linha-forte: #BCB5A4;
  --tinta: #1A1D19;
  --tinta-media: #4C5246;
  --tinta-fraca: #6C7165;

  /* -- acento e estados ---------------------------------------------- */
  --musgo: #3C4A3E;
  --musgo-vivo: #4E6151;
  --musgo-tenue: #E6EAE3;
  --latao: #B0862F;
  --latao-tenue: #F3EAD6;
  --latao-tinta: #7E5D18;
  --barro: #8A4B35;
  --barro-tenue: #F6E9E3;

  /* -- estados do tumulo no mapa -------------------------------------- */
  --cova-vazia: #BCB5A4;
  --cova-vazia-traco: #8A8271;
  --cova-ocupada: #3C4A3E;
  --cova-ocupada-traco: #26301F;

  /* -- tipografia ----------------------------------------------------- */
  --fonte-titulo: Spectral, Georgia, "Times New Roman", serif;
  --fonte-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -- espacamento (grade de 4px) ------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* -- cantos --------------------------------------------------------- */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;

  /* -- elevacao ------------------------------------------------------- */
  --s-1: 0 1px 2px rgba(26, 29, 25, .08), 0 2px 8px rgba(26, 29, 25, .06);
  --s-2: 0 2px 6px rgba(26, 29, 25, .10), 0 12px 32px rgba(26, 29, 25, .12);

  /* -- movimento ------------------------------------------------------ */
  --m-rapido: 140ms cubic-bezier(.2, 0, .2, 1);
  --m-medio: 240ms cubic-bezier(.2, 0, .2, 1);
  --m-painel: 340ms cubic-bezier(.22, 1, .36, 1);

  /* -- medidas -------------------------------------------------------- */
  --painel-w: 396px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --pergaminho: #242823;
    --pedra: #1A1D19;
    --pedra-funda: #131614;
    --linha: #343930;
    --linha-forte: #4B5145;
    --tinta: #EFEDE6;
    --tinta-media: #B4B8AB;
    --tinta-fraca: #8E9486;
    --musgo: #6E8570;
    --musgo-vivo: #83997F;
    --musgo-tenue: #2C332C;
    --latao: #D2A649;
    --latao-tenue: #332C1B;
    --latao-tinta: #DCB35C;
    --barro: #B4694E;
    --barro-tenue: #33211B;
    --s-1: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .28);
    --s-2: 0 2px 6px rgba(0, 0, 0, .40), 0 12px 32px rgba(0, 0, 0, .44);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --pergaminho: #242823;
  --pedra: #1A1D19;
  --pedra-funda: #131614;
  --linha: #343930;
  --linha-forte: #4B5145;
  --tinta: #EFEDE6;
  --tinta-media: #B4B8AB;
  --tinta-fraca: #8E9486;
  --musgo: #6E8570;
  --musgo-vivo: #83997F;
  --musgo-tenue: #2C332C;
  --latao: #D2A649;
  --latao-tenue: #332C1B;
  --latao-tinta: #DCB35C;
  --barro: #B4694E;
  --barro-tenue: #33211B;
  --s-1: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .28);
  --s-2: 0 2px 6px rgba(0, 0, 0, .40), 0 12px 32px rgba(0, 0, 0, .44);
}

/* =========================================================== fundacao */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--pedra);
  color: var(--tinta);
  font: 400 15px/1.55 var(--fonte-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.oculto { display: none !important; }

:focus-visible {
  outline: 2px solid var(--musgo);
  outline-offset: 2px;
}

/* ============================================================== mapa */

/* O mapa e a base: ocupa a viewport inteira, sem moldura. Todo o resto
   flutua por cima -- e por isso nada aqui reserva espaco para o painel. */
#mapa {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--pedra-funda);
}

.leaflet-container {
  background: var(--pedra-funda);
  font-family: var(--fonte-ui);
  outline: none;
}

/* Ortofoto: no zoom digital, pixel nitido diz a verdade melhor que borrao. */
.leaflet-container .leaflet-tile { image-rendering: -webkit-optimize-contrast; }

#mapa.desenhando,
#mapa.desenhando .leaflet-interactive { cursor: crosshair; }

/* -------------------------------------------------- pulso da selecao */
@keyframes pulso-cova {
  0%   { stroke-width: 2.5; stroke-opacity: 1;  }
  50%  { stroke-width: 6;   stroke-opacity: .35; }
  100% { stroke-width: 2.5; stroke-opacity: 1;  }
}

.cova-selecionada { animation: pulso-cova 1.9s cubic-bezier(.4, 0, .6, 1) 3; }

/* ====================================================== caixa flutuante
   Linguagem comum da busca, dos controles e da legenda: mesma superficie,
   mesma borda, mesma sombra. */
.flutua {
  background: var(--pergaminho);
  border: 1px solid var(--linha);
  box-shadow: var(--s-1);
}

/* ============================================================== busca */
#busca-wrap {
  position: fixed;
  top: var(--e-4);
  left: var(--e-4);
  width: 372px;
  max-width: calc(100vw - var(--e-4) * 2);
  z-index: 700;
  transition: left var(--m-painel);
}

#busca-caixa {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-3);
  border-radius: var(--r-2);
  transition: box-shadow var(--m-rapido), border-color var(--m-rapido);
}

#busca-caixa:focus-within {
  border-color: var(--musgo);
  box-shadow: var(--s-1), 0 0 0 3px var(--musgo-tenue);
}

.marca {
  font-family: var(--fonte-titulo);
  font-size: 14px;
  color: var(--tinta-media);
  white-space: nowrap;
  padding-right: var(--e-2);
  border-right: 1px solid var(--linha);
}

#busca {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--e-3) 0;
  font-size: 15px;
}

#busca:focus { outline: none; }
#busca::placeholder { color: var(--tinta-fraca); }
#busca::-webkit-search-cancel-button { display: none; }

.busca-acao {
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-1);
  line-height: 1;
  font-size: 17px;
  transition: color var(--m-rapido), background var(--m-rapido);
}

.busca-acao:hover { color: var(--tinta); background: var(--pedra-funda); }

/* ------------------------------------------------------- sugestoes */
#resultados {
  margin-top: var(--e-2);
  border-radius: var(--r-2);
  overflow: hidden;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  display: none;
}

#resultados.aberto { display: block; }

.res-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: none;
  padding: var(--e-3) var(--e-4);
  transition: background var(--m-rapido);
}

.res-item:last-child { border-bottom: 0; }
.res-item:hover, .res-item:focus-visible { background: var(--musgo-tenue); }

.res-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.res-nome i { font-style: italic; color: var(--tinta-media); font-weight: 400; }

.res-onde {
  display: block;
  font-size: 12px;
  color: var(--tinta-fraca);
  margin-top: 2px;
}

.res-estado { padding: var(--e-4); font-size: 13.5px; color: var(--tinta-fraca); }

/* ============================================ controles do mapa (canto) */
#controles {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.ctrl {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-3);
  color: var(--tinta-media);
  font-size: 18px;
  line-height: 1;
  transition: color var(--m-rapido), background var(--m-rapido),
              transform var(--m-rapido);
}

.ctrl:hover { color: var(--tinta); background: var(--pedra); }
.ctrl:active { transform: scale(.94); }
.ctrl.ativo { background: var(--musgo); border-color: var(--musgo); color: var(--pergaminho); }

/* Zoom + e - formam um par visual unico, como no Google Maps. */
.ctrl-par { display: flex; flex-direction: column; border-radius: var(--r-3); overflow: hidden; }
.ctrl-par .ctrl { border: 0; border-radius: 0; box-shadow: none; }
.ctrl-par .ctrl + .ctrl { border-top: 1px solid var(--linha); }

/* -------------------------------------------------------- atribuicao */
.leaflet-control-attribution {
  background: none;
  color: var(--tinta-fraca);
  font: 400 10.5px/1.4 var(--fonte-ui);
  padding: 0 var(--e-4) var(--e-1);
  text-shadow: 0 0 3px var(--pedra), 0 0 6px var(--pedra);
  user-select: none;
}

.leaflet-control-attribution a { color: inherit; }
.leaflet-bottom.leaflet-left { z-index: 500; }

/* =========================================================== legenda */
#legenda {
  position: fixed;
  left: var(--e-4);
  bottom: var(--e-6);
  z-index: 600;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2);
  font-size: 12px;
  color: var(--tinta-media);
  transition: opacity var(--m-medio), transform var(--m-medio);
}

#legenda div { display: flex; align-items: center; gap: var(--e-2); }
#legenda div + div { margin-top: var(--e-2); }

/* Some quando o painel ocupa o mesmo canto -- duas caixas empilhadas ali
   seriam ruido. */
body.painel-aberto #legenda {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--e-2));
}

.marca-cova {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  flex: none;
}

.marca-vazia { background: var(--cova-vazia); border: 1px solid var(--cova-vazia-traco); }
.marca-ocupada { background: var(--cova-ocupada); }
.marca-ativa { background: var(--latao); }

/* ====================================================== painel lateral
   Desliza da esquerda. Nunca empurra o mapa: o mapa continua inteiro
   atras dele, como no Google Maps. */
#painel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--painel-w);
  max-width: 100vw;
  z-index: 800;
  display: flex;
  flex-direction: column;
  background: var(--pergaminho);
  border-right: 1px solid var(--linha);
  box-shadow: var(--s-2);
  transform: translateX(-102%);
  transition: transform var(--m-painel);
  will-change: transform;
}

#painel.aberto { transform: translateX(0); }

/* Com o painel aberto, a busca desce para nao ficar por baixo dele. */
body.painel-aberto #busca-wrap { left: calc(var(--painel-w) + var(--e-4)); }

#painel-rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.painel-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pergaminho);
  border-bottom: 1px solid var(--linha);
  padding: var(--e-5) var(--e-5) var(--e-4);
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.painel-cab h2 { font-size: 27px; line-height: 1.2; }

.painel-cab .sub {
  font-size: 12px;
  color: var(--tinta-fraca);
  margin-top: var(--e-1);
  font-variant-numeric: tabular-nums;
}

.fechar {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  color: var(--tinta-fraca);
  font-size: 19px;
  line-height: 1;
  transition: color var(--m-rapido), background var(--m-rapido);
}

.fechar:hover { color: var(--tinta); background: var(--pedra-funda); }

.painel-corpo { padding: var(--e-5); }

/* ======================================================== estado vazio */
.estado-inicial { padding: var(--e-7) var(--e-5); }

.estado-inicial h2 {
  font-size: 22px;
  margin-bottom: var(--e-3);
}

.estado-inicial p {
  margin: 0 0 var(--e-3);
  color: var(--tinta-media);
  font-size: 14px;
  max-width: 34ch;
}

/* ============================================================ fichas
   Dentro do painel nada tem sombra: separacao por borda e por respiro. */
.ficha {
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  margin-bottom: var(--e-4);
  overflow: hidden;
  background: var(--pergaminho);
}

.ficha-cab {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--pedra);
  border-bottom: 1px solid var(--linha);
  padding: var(--e-3) var(--e-4);
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  transition: background var(--m-rapido);
}

button.ficha-cab:hover { background: var(--pedra-funda); }

.ficha-cab .ordem {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* O nome da pessoa e o conteudo mais importante do painel -- maior que o
   numero do sepulcro, que e apenas o endereco dela. */
.ficha-cab .titulo {
  flex: 1;
  min-width: 0;
}

.ficha-cab .nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}

/* Linha de vida no formato lapidar: 1923 - 1987. */
.ficha-cab .vida {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.ficha-cab .seta {
  flex: none;
  color: var(--tinta-fraca);
  font-size: 11px;
  margin-top: 7px;
  transition: transform var(--m-rapido);
}

.ficha-cab[aria-expanded="true"] .seta { transform: rotate(90deg); }

.ficha-corpo { padding: var(--e-4); }
.ficha-cab[aria-expanded="false"] + .ficha-corpo { display: none; }

/* ----------------------------------------------------- lista de dados */
dl.dados { margin: 0; display: grid; grid-template-columns: 116px 1fr; gap: var(--e-2) var(--e-3); }

dl.dados dt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-fraca);
  line-height: 1.5;
}

dl.dados dd {
  margin: 0;
  font-size: 14px;
  word-break: break-word;
}

dl.dados dd.numero { font-variant-numeric: tabular-nums; }

.ausente { color: var(--tinta-fraca); font-style: italic; }

/* ============================================================== fotos */
.fotos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
}

.fotos img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  display: block;
  border-radius: var(--r-1);
  border: 1px solid var(--linha);
  cursor: zoom-in;
  transition: transform var(--m-rapido), border-color var(--m-rapido);
}

.fotos img:hover { transform: scale(1.04); border-color: var(--linha-forte); }

.foto-adm { position: relative; margin: 0; }

.foto-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--pergaminho);
  color: var(--barro);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: var(--s-1);
}

/* ================================================ informacao complementar */
.info-item { padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.info-item:first-child { padding-top: 0; }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }

.info-meta {
  font-size: 12px;
  color: var(--tinta-fraca);
  margin-bottom: var(--e-1);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.info-item p { margin: 0; font-size: 14px; white-space: pre-wrap; }

/* =========================================================== botoes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-2);
  background: var(--pergaminho);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--m-rapido), border-color var(--m-rapido),
              color var(--m-rapido);
}

.btn:hover { background: var(--pedra-funda); border-color: var(--tinta-fraca); }

.btn-primario {
  background: var(--musgo);
  border-color: var(--musgo);
  color: var(--pergaminho);
}

.btn-primario:hover { background: var(--musgo-vivo); border-color: var(--musgo-vivo); }

.btn-perigo { color: var(--barro); border-color: var(--linha-forte); }
.btn-perigo:hover { background: var(--barro-tenue); border-color: var(--barro); }

.btn-peq { padding: var(--e-1) var(--e-3); font-size: 13px; }

.btn-largo { width: 100%; }

.acoes {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--e-4);
}

/* ======================================================== formularios */
.campo { margin-bottom: var(--e-4); }

.campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-media);
  margin-bottom: var(--e-1);
}

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-1);
  background: var(--pedra);
  font-size: 14.5px;
  transition: border-color var(--m-rapido), box-shadow var(--m-rapido),
              background var(--m-rapido);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--pergaminho);
  border-color: var(--musgo);
  box-shadow: 0 0 0 3px var(--musgo-tenue);
}

.campo textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }

.nota {
  font-size: 12px;
  color: var(--tinta-fraca);
  margin: calc(var(--e-2) * -1) 0 var(--e-4);
  line-height: 1.5;
}

/* ============================================================ avisos */
.aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-1);
  font-size: 13.5px;
  margin-bottom: var(--e-4);
  border-left: 3px solid;
}

.aviso-erro { background: var(--barro-tenue); color: var(--barro); border-color: var(--barro); }
.aviso-ok { background: var(--musgo-tenue); color: var(--musgo); border-color: var(--musgo); }
.aviso-info { background: var(--latao-tenue); color: var(--latao-tinta); border-color: var(--latao); }

/* ============================================================ modais */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 29, 25, .42);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: var(--e-5);
  animation: surge var(--m-medio);
}

@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 470px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--pergaminho);
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  box-shadow: var(--s-2);
  padding: var(--e-5);
  animation: sobe var(--m-medio) cubic-bezier(.22, 1, .36, 1);
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(var(--e-3)); }
  to { opacity: 1; transform: none; }
}

.modal h3 { font-size: 20px; margin-bottom: var(--e-1); }

.modal .sub {
  color: var(--tinta-media);
  font-size: 13.5px;
  margin: 0 0 var(--e-5);
}

#visor-foto { background: rgba(26, 29, 25, .82); cursor: zoom-out; }
#visor-foto img { max-width: 92vw; max-height: 88vh; display: block; border-radius: var(--r-1); }

/* =========================================================== tabelas */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: var(--e-3) 0;
}

.tabela th, .tabela td {
  padding: var(--e-2) var(--e-3);
  text-align: left;
  border-bottom: 1px solid var(--linha);
}

.tabela thead th {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-fraca);
  background: var(--pedra);
}

.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ======================================================== indicadores */
.kpi-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.tile {
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  padding: var(--e-3) var(--e-4);
  background: var(--pedra);
}

.tile-valor {
  font-family: var(--fonte-titulo);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tile-rotulo { font-size: 12px; color: var(--tinta-fraca); margin-top: var(--e-1); }

.medidor-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  margin-bottom: var(--e-2);
}

.medidor-topo b { font-variant-numeric: tabular-nums; }
.medidor-trilho { height: 8px; border-radius: var(--r-1); background: var(--pedra-funda); overflow: hidden; }
.medidor-fill { height: 100%; background: var(--musgo); border-radius: var(--r-1); min-width: 3px; }
.gr-nota { font-size: 12px; color: var(--tinta-fraca); margin-top: var(--e-2); }

/* ====================================================== barra da equipe
   Tres caixas fixas disputam a faixa de cima: a busca (esquerda, 372px), esta
   barra (direita) e nada mais. A barra cresce para a ESQUERDA, entao sem um
   teto ela passa por baixo da busca e depois sai da tela. O teto abaixo
   reserva a largura da busca e as goteiras; quando nao cabe, a barra dobra em
   linhas em vez de vazar -- e por isso que ela tem flex-wrap. */
#barra {
  position: fixed;
  top: var(--e-4);
  right: calc(var(--e-4) + 52px);

  /* Abaixo de #busca-wrap (700): a lista de resultados desce sobre a barra e
     precisa cobri-la, nao ser coberta. */
  z-index: 690;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* linhas dobradas ficam junto da borda direita */
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-3);
  border-radius: var(--r-2);
  font-size: 13px;
  max-width: calc(100vw - 372px - 52px - var(--e-4) * 3);
}

/* Com o painel aberto a busca se desloca para a direita dele e sobra menos
   espaco; a barra aceita dobrar mais em vez de invadi-la. */
body.painel-aberto #barra {
  max-width: calc(100vw - var(--painel-w) - 372px - 52px - var(--e-4) * 4);
}

/* Os botoes sao o conteudo acionavel: nunca encolhem nem se partem. */
#barra .btn { flex: none; }

/* O e-mail e o dado menos util da barra -- corta com reticencias antes de
   empurrar qualquer botao. */
#barra .quem {
  flex: none;
  min-width: 0;
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-fraca);
  font-size: 12px;
}

/* A dica troca de texto conforme o modo ("Arraste sobre um tumulo para
   desenhar", "N tumulo(s) selecionado(s)"). Em linha propria ela cresce sem
   empurrar os botoes para fora da tela. */
#barra .dica {
  flex: 1 0 100%;
  order: 9;
  text-align: right;
  color: var(--latao-tinta);
  font-size: 12px;
  line-height: 1.35;
}

/* Vazias nao viram linha nem goteira sobrando. */
#barra .quem:empty, #barra .dica:empty { display: none; }

/* ======================================================== carregamento
   Estado proprio, nao um spinner: tres tracos que respiram, na cor do
   acento, sobre a mesma base de pergaminho do resto da interface. */
#carregando {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  background: var(--pedra);
  transition: opacity var(--m-medio), visibility var(--m-medio);
}

#carregando.saiu { opacity: 0; visibility: hidden; }

.carregando-miolo { text-align: center; max-width: 30ch; padding: var(--e-5); }

.carregando-titulo {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--e-2);
}

.carregando-texto { font-size: 13.5px; color: var(--tinta-fraca); }

.tracos {
  display: flex;
  justify-content: center;
  gap: var(--e-1);
  margin-bottom: var(--e-5);
}

.tracos span {
  width: 3px;
  height: 26px;
  background: var(--musgo);
  border-radius: 1px;
  animation: respira 1.5s ease-in-out infinite;
}

.tracos span:nth-child(2) { animation-delay: .18s; }
.tracos span:nth-child(3) { animation-delay: .36s; }

@keyframes respira {
  0%, 100% { opacity: .22; transform: scaleY(.55); }
  50% { opacity: 1; transform: scaleY(1); }
}


/* ============================================ onde estou e caminho a pe */

/* Ponto azul da posicao. Azul e o unico lugar do sistema onde ele aparece:
   e "voce", nao um estado da sepultura, e nao pode ser confundido com o
   musgo (cadastrado) nem com o latao (selecionado). */
.marca-eu { filter: drop-shadow(0 1px 3px rgba(26, 29, 25, .45)); }

/* Circulo da margem de erro do GPS. Respira devagar para dizer "aproximado",
   sem piscar. */
@keyframes pulso-precisao {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.area-precisao { animation: pulso-precisao 3.4s ease-in-out infinite; }

/* Tracejado ate a cova. Pontos redondos e espacados, caminhando. */
.trilha {
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .75));
}

@keyframes anda-trilha { to { stroke-dashoffset: -26; } }

.trilha { animation: anda-trilha 1.5s linear infinite; }
.trilha-reta { animation-duration: 2.4s; }

/* ------------------------------------------- aviso de caminho no painel */
.trilha-caixa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  text-align: left;
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-5);
  border: 1px solid #C3D6E8;
  border-left: 3px solid #2A6FB0;
  border-radius: var(--r-1);
  background: #EDF3F9;
  color: #1C4D7C;
  font: inherit;
  cursor: pointer;
  transition: background var(--m-rapido);
}

.trilha-caixa:hover { background: #E2ECF6; }
.trilha-texto { flex: 1; min-width: 0; }

.trilha-lupa {
  flex: none;
  font-size: 17px;
  opacity: .5;
  transition: opacity var(--m-rapido);
}

.trilha-caixa:hover .trilha-lupa { opacity: 1; }

.trilha-seta { font-size: 25px; line-height: 1; flex: none; }
.trilha-caixa b { font-weight: 600; }
.trilha-sub { font-size: 12px; opacity: .88; }
.trilha-margem { color: var(--latao-tinta); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .trilha-caixa {
    background: #1B2733;
    border-color: #2F4A63;
    border-left-color: #5C9BD6;
    color: #BBD5EC;
  }
  :root:not([data-tema="claro"]) .trilha {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
  }
}

:root[data-tema="escuro"] .trilha-caixa:hover { background: #22303D; }
:root[data-tema="escuro"] .trilha-caixa {
  background: #1B2733;
  border-color: #2F4A63;
  border-left-color: #5C9BD6;
  color: #BBD5EC;
}

:root[data-tema="escuro"] .trilha {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

@media (prefers-reduced-motion: reduce) {
  .trilha, .area-precisao { animation: none; }
}

/* ============================================================= aviso */
#toast {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  transform: translate(-50%, var(--e-3));
  z-index: 1100;
  max-width: min(92vw, 460px);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2);
  background: var(--tinta);
  color: var(--pedra);
  font-size: 13.5px;
  box-shadow: var(--s-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-medio), transform var(--m-medio);
}

#toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* Campo-isca do formulario publico: fora da tela, nao "display:none" --
   alguns robos pulam campos ocultos por display. */
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   TABLET E CELULAR
   Uso em campo. O painel deixa de vir da esquerda e passa a subir do
   rodape, como a folha do Google Maps.
   ===================================================================== */
@media (max-width: 880px) {
  #busca-wrap {
    top: var(--e-3);
    left: var(--e-3);
    right: var(--e-3);
    width: auto;
    max-width: none;
  }

  body.painel-aberto #busca-wrap { left: var(--e-3); }

  .marca { display: none; }
  #busca { font-size: 16px; }   /* 16px evita o zoom automatico do iOS */

  #painel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 62svh;
    border-right: 0;
    border-top: 1px solid var(--linha);
    border-radius: var(--r-3) var(--r-3) 0 0;
    transform: translateY(102%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #painel.aberto { transform: translateY(0); }

  /* Puxador, para a folha se anunciar como arrastavel. */
  #painel::before {
    content: "";
    position: absolute;
    top: var(--e-2);
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--linha-forte);
    z-index: 3;
  }

  .painel-cab { padding: var(--e-5) var(--e-4) var(--e-3); }
  .painel-cab h2 { font-size: 23px; }
  .painel-corpo { padding: var(--e-4); }

  #controles { bottom: var(--e-4); right: var(--e-3); transition: bottom var(--m-painel); }

  /* Alvos de toque de pelo menos 44px (Apple) -- o dedo nao e um cursor. */
  .fechar {
    width: 44px;
    height: 44px;
    margin-top: calc(var(--e-2) * -1);
    margin-right: calc(var(--e-2) * -1);
  }
  .busca-acao { min-width: 44px; min-height: 44px; }

  #legenda { left: var(--e-3); bottom: var(--e-6); }

  /* Antes a barra dividia canto E altura com #controles (mesmo right, mesmo
     bottom): uma cobria a outra. O rodape tambem nao serve -- o painel sobe
     dali e a legenda ja mora no canto esquerdo. Sobra a faixa de cima, que e
     onde um menu deve estar: a barra vira uma segunda linha sob a busca.
     Os 64px sao a altura da caixa de busca com o campo em 16px (o tamanho
     que evita o zoom automatico do iOS). */
  #barra {
    top: calc(var(--e-3) + 64px);
    left: var(--e-3);
    right: var(--e-3);
    bottom: auto;
    max-width: none;
    justify-content: flex-start;
  }

  body.painel-aberto #barra { max-width: none; }

  /* Numa largura de celular os quatro botoes ja ocupam a linha inteira. */
  #barra .quem { flex: 1 0 100%; max-width: none; }
  #barra .dica { text-align: left; }

  /* Com 8px de folga lateral em vez de 12px os quatro botoes ainda cabem numa
     linha so a 360px, a largura dos celulares mais estreitos em uso. Sem isto
     o "Sair" cai sozinho numa segunda linha. */
  #barra .btn-peq { padding: var(--e-1) var(--e-2); min-height: 44px; }

  .linha-dupla { grid-template-columns: 1fr; gap: 0; }
  .campo input, .campo select, .campo textarea { font-size: 16px; padding: var(--e-3); }
  .acoes .btn { flex: 1 1 auto; padding: var(--e-3) var(--e-4); }
  .fotos img { width: 84px; height: 84px; }

  .modal-fundo { padding: 0; place-items: end center; }

  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-3) var(--r-3) 0 0;
    padding: var(--e-5) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  }

  .kpi-linha { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ folha inferior (em pe)
   Mesmas condicoes de Folha.modoFolha() em js/folha.js. */
@media (max-width: 880px) and (orientation: portrait),
       (max-width: 880px) and (min-height: 501px) {
  :root { --folha-h: 62svh; }

  #painel { height: var(--folha-h); }
  #painel.aberto.recolhida {
    transform: translateY(calc(100% - var(--folha-espiada, 96px) - env(safe-area-inset-bottom, 0px)));
  }
  #painel.arrastando { transition: none; }

  /* O cabecalho e a alca da folha: arrastar ali nao rola a pagina. */
  #painel .painel-cab { touch-action: none; cursor: grab; }

  /* Os botoes acompanham o topo da folha. Com ela cheia so cabe o do
     caminho -- os cinco empilhados passariam por tras da busca, ou para fora
     da tela num celular de 640px. Zoom se faz com os dedos; os demais voltam
     ao recolher a folha. */
  body.painel-aberto #controles { bottom: calc(var(--folha-h) + var(--e-3)); }
  body.painel-aberto:not(.folha-recolhida) #controles > :not(#ctrl-eu) { display: none; }
  body.folha-recolhida #controles {
    bottom: calc(var(--folha-espiada, 96px) + env(safe-area-inset-bottom, 0px) + var(--e-3));
  }
}

@media (max-width: 420px) and (orientation: portrait),
       (max-width: 420px) and (min-height: 501px) {
  :root { --folha-h: 68svh; }
}

/* --------------------------------------------- celular deitado
   Com 390px de altura, a folha inferior deixaria uma fresta de mapa. Volta
   o painel lateral do computador, mais estreito. */
@media (max-width: 880px) and (orientation: landscape) and (max-height: 500px) {
  #painel {
    top: 0;
    right: auto;
    width: min(360px, 55vw);
    height: auto;
    border-top: 0;
    border-right: 1px solid var(--linha);
    border-radius: 0;
    transform: translateX(-102%);
    padding-left: env(safe-area-inset-left, 0px);
  }

  #painel.aberto { transform: translateX(0); }
  #painel::before { display: none; }

  body.painel-aberto #busca-wrap { left: calc(min(360px, 55vw) + var(--e-3)); }
  body.painel-aberto #barra { left: calc(min(360px, 55vw) + var(--e-3)); }

  #controles { bottom: var(--e-3); right: calc(var(--e-3) + env(safe-area-inset-right, 0px)); }
}

/* ============================================= movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .cova-selecionada { animation: none; stroke-width: 4; }
}