/* ============================================================================
   NAVIMAR — aparencia
   ----------------------------------------------------------------------------
   As cores saem da carta nautica de papel: fundo claro cor de papel, terra
   bege, agua rasa verde-agua. O magenta e a cor que a Marinha usa de verdade
   na simbologia de cartas (farois, boias) — por isso e a cor de destaque.

   COMO O TEMA FUNCIONA (tres estados, ver js/tema.js):
     data-tema="auto"   -> obedece o aparelho, pelo @media prefers-color-scheme
     data-tema="claro"  -> forca claro
     data-tema="escuro" -> forca escuro
   Nenhuma regra de componente entra dentro do @media. O @media so troca os
   valores das variaveis la em cima. Assim nada precisa ser escrito duas vezes.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  --fundo:      #EDF2F0;
  --superficie: #FFFFFF;
  --superficie2:#E3EAE7;
  --tinta:      #0C1F27;
  --tinta2:     #4C626B;
  --tinta3:     #7C929A;
  --risco:      #C7D4D0;
  --destaque:   #C4006A;
  --destaque2:  #FCE2EF;
  --boreste:    #0E7F5C;   /* verde — enchendo, rumo, sinal bom */
  --bombordo:   #C0392B;   /* vermelho — vazando, perigo */

  --sombra: 0 1px 2px rgba(12,31,39,.06), 0 12px 32px -12px rgba(12,31,39,.22);
  --escurece-mapa: none;

  --sem: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --carta: Georgia, "Times New Roman", serif;      /* nome de acidente de agua */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* valores do tema escuro, escritos uma vez so e reaproveitados abaixo */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --fundo:      #071620;
    --superficie: #0E242E;
    --superficie2:#16323E;
    --tinta:      #E4EEED;
    --tinta2:     #90A8B0;
    --tinta3:     #6A838C;
    --risco:      #1E3E4B;
    --destaque:   #FF4D9D;
    --destaque2:  #3B0E27;
    --boreste:    #33C79A;
    --bombordo:   #FF6E5F;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.7);
    --escurece-mapa: brightness(.68) saturate(.75) hue-rotate(178deg) invert(.92) contrast(1.05);
  }
}
:root[data-tema="escuro"] {
  --fundo:      #071620;
  --superficie: #0E242E;
  --superficie2:#16323E;
  --tinta:      #E4EEED;
  --tinta2:     #90A8B0;
  --tinta3:     #6A838C;
  --risco:      #1E3E4B;
  --destaque:   #FF4D9D;
  --destaque2:  #3B0E27;
  --boreste:    #33C79A;
  --bombordo:   #FF6E5F;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.7);
  --escurece-mapa: brightness(.68) saturate(.75) hue-rotate(178deg) invert(.92) contrast(1.05);
}

/* ------------------------------------------------------------------ BASE -- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sem);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;                     /* quem rola e o corpo de cada tela */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;            /* nao puxa a pagina para recarregar */
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

h3, h4 { margin: 0; }
p { margin: 0; }

/* foco visivel pelo teclado, sem poluir o toque na tela */
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.oculto { display: none !important; }

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- TELAS --- */
#telas { position: relative; flex: 1; min-height: 0; }

.tela {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--superficie);
}
.tela.tela-ativa { display: flex; }

.sub-tela { position: absolute; inset: 0; display: none; flex-direction: column; }
.sub-tela.sub-ativa { display: flex; }

/* cabecalho comum das telas de Mares e Rotas */
.cabecalho-tela {
  flex: none;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--risco);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cabecalho-tela .local {
  font-family: var(--carta);
  font-style: italic;
  font-size: 19px;
  line-height: 1.2;
}
.cabecalho-tela .local-sub {
  font-size: 11px;
  color: var(--tinta3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cabecalho-tela .trocar {
  font-size: 11px;
  color: var(--destaque);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.corpo-tela {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------ BARRA INFERIOR --- */
.barra-abas {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--risco);
  background: var(--superficie);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.aba {
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tinta3);
  font-size: 11px;
  position: relative;
}
.aba svg { width: 22px; height: 22px; }
.aba.ligada { color: var(--destaque); font-weight: 600; }
.aba.ligada::before {
  content: "";
  position: absolute;
  top: -1px; left: 22%; right: 22%;
  height: 2px;
  background: var(--destaque);
}

/* ======================================================================
   TELA 1 — NAVEGACAO
   ====================================================================== */
#mapa, #mapa-criar {
  position: absolute;
  inset: 0;
  background: var(--superficie2);
  /* Segurar o dedo no mapa e um gesto NOSSO (marca um waypoint em 3 s).
     Sem estas duas linhas, o Android entende como "selecionar texto" ou
     "abrir imagem" e mostra o menu dele por cima da contagem. */
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* No tema escuro, os ladrilhos do mapa vem claros demais e cegam a bordo.
   O filtro so cai na camada de base — a camada nautica por cima fica intacta. */
.ladrilhos-base { filter: var(--escurece-mapa); }

/* etiquetas do topo */
.flutua-topo {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 62px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1100;
  pointer-events: none;
}
.pilula {
  background: var(--superficie);
  border: 1px solid var(--risco);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  color: var(--tinta2);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.pilula .ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tinta3);
  flex: none;
}
.pilula .ponto.bom { background: var(--boreste); }
.pilula .ponto.fraco { background: #E0A100; }
.pilula .ponto.ruim { background: var(--bombordo); }
.pilula b { color: var(--tinta); font-family: var(--mono); font-weight: 600; }

/* botoes do lado direito do mapa */
.botoes-mapa {
  position: absolute;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1100;
}
.botao-mapa {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--risco);
  display: grid;
  place-items: center;
  color: var(--tinta3);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.botao-mapa svg { width: 19px; height: 19px; }
.botao-mapa.ativo { color: var(--destaque); border-color: var(--destaque); }

/* painel de instrumentos */
.instrumento {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: var(--superficie);
  border: 1px solid var(--risco);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 -2px 16px rgba(0,0,0,.10);
  z-index: 1100;
}
.linha-velocidade { display: flex; align-items: baseline; gap: 10px; }
.velocidade {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.unidade { font-size: 13px; color: var(--tinta2); font-weight: 600; }
.velocidade-alt {
  margin-left: auto;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta2);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.rotulo-sog { font-family: var(--sem); font-size: 9px; color: var(--tinta3); }

.leituras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--risco);
  padding-top: 9px;
}
.leitura { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leitura .rotulo {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta3);
}
.leitura .valor {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chave {
  display: flex;
  border: 1px solid var(--risco);
  border-radius: 8px;
  overflow: hidden;
  font-size: 11px;
  font-family: var(--mono);
  width: fit-content;
}
.chave button { padding: 3px 9px; color: var(--tinta2); }
.chave button.ligado { background: var(--destaque); color: #fff; }

.faixa-rota {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tinta2);
  border-top: 1px solid var(--risco);
  padding-top: 9px;
}
.faixa-rota .amostra {
  width: 16px; height: 3px;
  background: var(--destaque);
  border-radius: 2px;
  flex: none;
}
.faixa-rota #texto-rota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
/* tira a rota do mapa sem precisar ir ate a aba Rotas */
.link-cancelar {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--destaque);
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
}

/* segunda linha: explica o que e a linha verde */
.faixa-legenda {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--tinta3);
  margin-top: -4px;
}
.faixa-legenda .amostra {
  width: 16px; height: 3px;
  border-radius: 2px;
  flex: none;
  background: var(--boreste);
}

/* marcador do barco (desenhado por js/mapa.js) */
.barco-seta, .barco-parado { display: block; }
.barco-seta svg, .barco-parado svg { display: block; overflow: visible; }
.barco-desatualizado { opacity: .45; filter: grayscale(1); }

/* rotulo com a distancia de cada trecho, no modo de desenhar rota */
.rotulo-trecho {
  background: var(--superficie);
  color: var(--destaque);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid var(--risco);
  white-space: nowrap;
}
/* Ponto arrastavel da rota.
   O Leaflet so troca o cursor DEPOIS que o arrasto comecou
   (regra ".leaflet-dragging .leaflet-marker-draggable" no CSS dele), entao
   sem isto aqui nao ha como adivinhar que o ponto pode ser pego. */
.marca-ponto {
  background: var(--destaque);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--superficie);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: grab;
  cursor: -webkit-grab;
  transition: transform .12s ease, box-shadow .12s ease;
}
.marca-ponto:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(196, 0, 106, .22), 0 1px 4px rgba(0,0,0,.35);
}
.leaflet-marker-draggable:active .marca-ponto,
.leaflet-dragging .marca-ponto {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .marca-ponto { transition: none; }
  .marca-ponto:hover { transform: none; }
}

/* ======================================================================
   TELA 2 — MARES
   ====================================================================== */
.cartao-agora {
  margin: 12px 12px 0;
  border: 1px solid var(--risco);
  border-radius: 12px;
  background: var(--superficie2);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cartao-agora .altura {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.cartao-agora .altura small { font-size: 13px; font-weight: 600; }
.cartao-agora .texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cartao-agora .texto .a { font-size: 12px; font-weight: 600; }
.cartao-agora .texto .b { font-size: 11px; color: var(--tinta2); }
.tendencia {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  flex: none;
}
.tendencia svg { width: 15px; height: 15px; }
.tendencia.enchendo { color: var(--boreste); }
.tendencia.vazando { color: var(--bombordo); }

/* ---- a tira dos 10 dias ---- */
.tira-dias {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--risco);
  scrollbar-width: none;
}
.tira-dias::-webkit-scrollbar { display: none; }

.chip-dia {
  flex: none;
  width: 44px;
  padding: 5px 0 6px;
  border-radius: 10px;
  border: 1px solid var(--risco);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--tinta2);
  background: var(--superficie);
}
.chip-dia .semana {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chip-dia .numero {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.chip-dia.escolhido {
  background: var(--destaque);
  border-color: var(--destaque);
  color: #fff;
}

.grafico-mare {
  padding: 6px 4px 0;
  flex: none;
  /* o toque no gráfico é gesto nosso: escolhe a hora ou troca de dia */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
.grafico-mare svg { width: 100%; display: block; }

/* o balãozinho com hora e altura do ponto tocado */
.balao-mare { pointer-events: none; }

.acoes-grafico {
  flex: none;
  display: flex;
  justify-content: center;
  min-height: 22px;
  padding: 0 12px;
}
.voltar-agora {
  font-size: 11px;
  font-weight: 600;
  color: var(--destaque);
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
}

.lista-mare { margin: 6px 12px 0; display: flex; flex-direction: column; }
.linha-mare {
  display: grid;
  grid-template-columns: 20px 62px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--risco);
  font-size: 13px;
}
.linha-mare:first-child { border-top: 0; }
/* tocar numa linha leva a marca do grafico ate aquela hora */
.linha-mare-clique { cursor: pointer; }
.linha-mare-clique:active { background: var(--superficie2); }
.linha-mare .seta { display: grid; place-items: center; }
.linha-mare .seta svg { width: 16px; height: 16px; }
.linha-mare .hora {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.linha-mare .tipo { color: var(--tinta2); }
.linha-mare .metros {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinta2);
}
.linha-mare .amanha { font-size: 10px; color: var(--tinta3); }
.linha-mare.proxima .tipo { color: var(--tinta); font-weight: 600; }
.linha-mare.passada { opacity: .45; }

.nota-fonte {
  margin: auto 12px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--risco);
  font-size: 10px;
  color: var(--tinta3);
  line-height: 1.5;
}

/* aviso de que nao deu para buscar a mare */
.recado-vazio {
  margin: 16px 12px;
  border: 1px solid var(--risco);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  background: var(--superficie2);
}
.recado-vazio h4 { font-size: 14px; }
.recado-vazio p { font-size: 12px; color: var(--tinta2); }

/* ======================================================================
   TELA 3 — ROTAS
   ====================================================================== */
.acao-grande {
  margin: 12px 12px 0;
  background: var(--destaque);
  color: #fff;
  border-radius: 12px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  flex: none;
}
.acao-grande svg { width: 19px; height: 19px; }

.rotulo-lista {
  margin: 18px 14px 8px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta3);
  display: flex;
  justify-content: space-between;
  flex: none;
}

.cartoes-rota { margin: 0 12px; display: flex; flex-direction: column; gap: 9px; }
.cartao-rota {
  border: 1px solid var(--risco);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--superficie);
  text-align: left;
  width: 100%;
}
.cartao-rota.em-uso { border-color: var(--destaque); background: var(--destaque2); }
.miniatura {
  width: 58px; height: 46px;
  flex: none;
  border-radius: 8px;
  background: var(--superficie2);
  border: 1px solid var(--risco);
  overflow: hidden;
}
.miniatura svg { width: 100%; height: 100%; display: block; }
.info-rota { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.info-rota .nome {
  font-family: var(--carta);
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-rota .dados {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta2);
  font-variant-numeric: tabular-nums;
}
.info-rota .selo {
  font-size: 10px;
  color: var(--destaque);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tres-pontos { margin-left: auto; color: var(--tinta3); display: grid; place-items: center; flex: none; padding: 6px; }
.tres-pontos svg { width: 18px; height: 18px; }

/* desenhando a rota */
.dica {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px; right: 12px;
  background: var(--tinta);
  color: var(--fundo);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 11px;
  line-height: 1.45;
  z-index: 1100;
}
.barra-construtor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--risco);
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1100;
}
.numeros-construtor { display: flex; align-items: baseline; gap: 12px; }
.numeros-construtor .n {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.numeros-construtor .s { font-size: 11px; color: var(--tinta2); line-height: 1.2; }
.numeros-construtor .distancia {
  margin-left: auto;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.numeros-construtor .tempo { font-weight: 400; color: var(--tinta2); font-size: 11px; }

.botoes-construtor { display: grid; grid-template-columns: 42px 42px 1fr; gap: 8px; }
.botao-quadrado {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--risco);
  display: grid;
  place-items: center;
  color: var(--tinta2);
}
.botao-quadrado svg { width: 18px; height: 18px; }
.botao-quadrado.principal {
  background: var(--destaque);
  color: #fff;
  border-color: var(--destaque);
  font-weight: 600;
  font-size: 14px;
}
.botao-quadrado[disabled] { opacity: .4; }
.voltar-lista {
  font-size: 12px;
  color: var(--tinta3);
  text-align: center;
  padding: 2px;
}

/* ======================================================================
   TELA 4 — WAYPOINTS
   ====================================================================== */
.instrucao-pontos {
  margin: 12px 12px 4px;
  border: 1px dashed var(--risco);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--tinta2);
  line-height: 1.45;
}
.instrucao-pontos svg { width: 22px; height: 22px; flex: none; color: var(--destaque); }
.instrucao-pontos b { color: var(--tinta); }

.cartoes-ponto { margin: 8px 12px 0; display: flex; flex-direction: column; gap: 9px; }
.cartao-ponto {
  border: 1px solid var(--risco);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--superficie);
  width: 100%;
}
.cartao-ponto .alfinete {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--superficie2);
  display: grid;
  place-items: center;
  color: var(--tinta2);
}
.cartao-ponto .alfinete svg { width: 20px; height: 20px; }
.info-ponto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.info-ponto .nome {
  font-family: var(--carta);
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-ponto .dados {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tinta2);
  font-variant-numeric: tabular-nums;
}

/* ---- o alfinete desenhado no mapa ---- */
.marca-waypoint { position: relative; width: 24px; height: 32px; }
.marca-waypoint svg {
  width: 24px; height: 32px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.etiqueta-waypoint {
  position: absolute;
  left: 50%;
  top: 33px;
  transform: translateX(-50%);
  background: var(--superficie);
  border: 1px solid var(--risco);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}

/* ---- o alvo com a contagem de 3 segundos ---- */
.alvo-contagem {
  position: relative;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
}
.alvo-contagem svg {
  position: absolute;
  inset: 0;
  width: 64px; height: 64px;
  /* comeca o traco no topo, e nao na direita */
  transform: rotate(-90deg);
}
.alvo-contagem .anel-fundo {
  fill: rgba(196, 0, 106, .16);
  stroke: var(--superficie);
  stroke-width: 3;
}
.alvo-contagem .anel-progresso {
  fill: none;
  stroke: var(--destaque);
  stroke-width: 5;
  stroke-linecap: round;
  /* 2 x pi x 28 = 176: a volta inteira do circulo */
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: fecha-anel 3s linear forwards;
}
.alvo-contagem .numero-contagem {
  position: relative;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--destaque);
  text-shadow: 0 1px 3px var(--superficie);
}
@keyframes fecha-anel {
  from { stroke-dashoffset: 176; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .alvo-contagem .anel-progresso { animation-duration: 3s; }
}

/* ======================================================================
   CARTOES, FOLHAS E AVISOS
   ====================================================================== */
.cartao-flutuante {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border: 1px solid var(--risco);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--sombra);
  z-index: 1200;
}
.topo-cartao { display: flex; gap: 11px; align-items: flex-start; }
.icone-cartao {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--destaque2);
  color: var(--destaque);
}
.icone-cartao svg { width: 20px; height: 20px; }
.cartao-flutuante h4 { font-size: 14px; }
.cartao-flutuante p { font-size: 12px; color: var(--tinta2); line-height: 1.5; }

.botoes-cartao { display: flex; gap: 8px; }
.botao {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--risco);
  color: var(--tinta2);
}
.botao.principal { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao.perigo { background: var(--bombordo); border-color: var(--bombordo); color: #fff; }

/* folha que sobe de baixo */
.fundo-folha {
  position: fixed;
  inset: 0;
  background: rgba(6, 18, 25, .55);
  z-index: 1300;
  display: flex;
  align-items: flex-end;
}
.folha {
  background: var(--superficie);
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alca {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--risco);
  margin: 0 auto 4px;
  flex: none;
}
.folha h3 { font-size: 17px; }
.folha .explica { font-size: 12px; color: var(--tinta2); line-height: 1.5; }

/* ---- coordenada com o botãozinho de copiar ao lado ---- */
.linha-coordenada {
  display: flex;
  align-items: center;
  gap: 6px;
}
.linha-coordenada .coordenada {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta2);
  font-variant-numeric: tabular-nums;
}

/* Discreto de propósito: fica apagadinho até a pessoa passar por cima ou
   tocar. Não é o assunto da tela, é uma comodidade. */
.btn-copiar {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--tinta2);
  opacity: .45;
  transition: opacity .15s ease, background .15s ease;
}
.btn-copiar:hover, .btn-copiar:focus-visible { opacity: 1; background: var(--superficie2); }
.btn-copiar svg { width: 15px; height: 15px; display: block; }
.btn-copiar.miudo { width: 20px; height: 20px; vertical-align: -5px; margin-left: 3px; }
.btn-copiar.miudo svg { width: 12px; height: 12px; }

/* troca do desenho de "copiar" para o "certo" quando copiou */
.btn-copiar .icone-certo { display: none; }
.btn-copiar.copiado { opacity: 1; color: var(--boreste); }
.btn-copiar.copiado .icone-copia { display: none; }
.btn-copiar.copiado .icone-certo { display: block; }

@media (prefers-reduced-motion: reduce) {
  .btn-copiar { transition: none; }
}

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta3);
  font-weight: 600;
}
.campo input, .campo select {
  border: 1px solid var(--risco);
  border-radius: 9px;
  padding: 11px;
  background: var(--superficie);
  color: var(--tinta);
  width: 100%;
}

.lista-portos { display: flex; flex-direction: column; gap: 6px; }
.item-porto {
  border: 1px solid var(--risco);
  border-radius: 10px;
  padding: 11px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.item-porto.escolhido { border-color: var(--destaque); background: var(--destaque2); }
.item-porto .nome-porto { font-size: 14px; font-weight: 600; }
.item-porto .dado-porto { font-size: 11px; color: var(--tinta2); font-family: var(--mono); }

.item-menu {
  border: 1px solid var(--risco);
  border-radius: 10px;
  padding: 13px;
  text-align: left;
  font-size: 14px;
  width: 100%;
}
.item-menu.perigo { color: var(--bombordo); border-color: var(--bombordo); }

/* recado curto que aparece e some */
.aviso {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  background: var(--tinta);
  color: var(--fundo);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
  z-index: 1400;
  box-shadow: var(--sombra);
}

/* ======================================================================
   MOVIMENTO — so dois pulsos, os dois ligados a dado ao vivo
   ====================================================================== */
@keyframes pulso {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pulso { animation: pulso 2.6s ease-out infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .pulso { animation: none; opacity: .3; }
}

/* ======================================================================
   AJUSTES NO LEAFLET para casar com o resto
   ====================================================================== */
.leaflet-container { background: var(--superficie2); font-family: var(--sem); }
.leaflet-control-attribution {
  background: rgba(255,255,255,.75);
  font-size: 9px;
}
:root[data-tema="escuro"] .leaflet-control-attribution { background: rgba(7,22,32,.75); color: #90A8B0; }
:root[data-tema="escuro"] .leaflet-control-attribution a { color: #90A8B0; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] .leaflet-control-attribution { background: rgba(7,22,32,.75); color: #90A8B0; }
  :root[data-tema="auto"] .leaflet-control-attribution a { color: #90A8B0; }
}
/* os controles de zoom padrao ficam escondidos: o espaco e curto e os botoes
   proprios ja fazem o servico. Pinca com dois dedos continua funcionando. */
.leaflet-control-zoom { display: none; }

/* A atribuicao do OpenStreetMap tem de continuar visivel (e exigencia da
   licenca), mas ficaria escondida atras do painel de instrumentos. Entao ela
   sobe: a altura do painel na tela de navegacao, e a da barra no modo de
   desenhar rota. */
#mapa .leaflet-bottom { bottom: 158px; }
#mapa-criar .leaflet-bottom { bottom: 118px; }