/* Mapa Regional++ */

:root{
  --mar:#2f4460; --painel:#231b13; --tinta:#f2e6cc; --tinta-suave:#bca783;
  --bronze:#d4a868; --bronze-escuro:#e0b777; --linha:#4a3a28; --vermelho:#c8261e; --campo:#2f2419;
  --aviso-fundo:#4a2a10; --aviso-tinta:#ffd2a6; --pergaminho:#f7eed9; --tinta-pergaminho:#2b2117;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-tap-highlight-color:transparent}
body{height:100%;margin:0;background:var(--mar);color:var(--tinta);
  font-family:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;overflow:hidden}

#palco{position:relative;width:100%;height:100%;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
canvas.a-mover{cursor:grabbing}

#painel{position:absolute;top:14px;left:14px;width:330px;max-height:calc(100% - 28px);overflow:auto;
  background:var(--painel);border:2px solid var(--bronze);border-radius:14px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--bronze) 35%,transparent),0 12px 30px rgba(0,0,0,.35);
  overscroll-behavior:contain}
/* Sem zoom da página ao tocar duas vezes num botão */
#painel,#zoom{touch-action:manipulation}
header{padding:16px 18px 12px;border-bottom:1px solid var(--linha);text-align:center}
h1{font-family:"IM Fell English SC",Georgia,"Times New Roman",serif;font-weight:400;font-size:27px;line-height:1.05;margin:0;letter-spacing:.02em}
.subtitulo{margin:6px 0 0;color:var(--tinta-suave);font-size:13.5px}
section{padding:14px 18px;border-bottom:1px solid var(--linha)}
section:last-child{border-bottom:0}
h2{font-size:14px;font-weight:800;margin:0 0 8px;color:var(--bronze-escuro)}

/* Botões segmentados do modo de medição */
.segmentos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--campo);border:1px solid var(--linha);border-radius:999px;padding:3px}
.segmentos button{border:0;background:transparent;color:var(--tinta);font:inherit;font-weight:700;padding:7px 0;border-radius:999px;cursor:pointer}
.segmentos button[aria-pressed="true"]{background:var(--bronze-escuro);color:#231b13}

.resultado{text-align:center;padding:18px 18px 14px}
.grande{font-family:"IM Fell English SC",Georgia,serif;font-size:44px;line-height:1;margin:0}
.grande small{font-size:22px;margin-left:4px}
.resultado p{margin:6px 0 0;color:var(--tinta-suave);font-size:13.5px}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
td{padding:3px 0}
td:last-child{text-align:right;font-weight:700}

/* Tempo de viagem: nome e velocidades, depois cruzeiro e máxima */
#gruposViagem{margin-bottom:10px}
#avisoMar{margin:0 0 10px}
table.viagem th{font-size:12.5px;font-weight:700;color:var(--tinta-suave);text-align:right;padding:0 0 2px}
table.viagem td{vertical-align:top;padding:4px 0}
table.viagem td+td{text-align:right;font-weight:700;white-space:nowrap;padding-left:8px}
table.viagem td small{display:block;font-size:12.5px;color:var(--tinta-suave)}

.linha{display:flex;gap:8px;flex-wrap:wrap}
.botao{flex:1 1 auto;border:1px solid var(--bronze);background:var(--campo);color:var(--tinta);font:inherit;font-weight:700;
  padding:8px 10px;border-radius:9px;cursor:pointer}
.botao:hover{background:color-mix(in srgb,var(--bronze) 22%,var(--campo))}
.botao.principal{background:var(--bronze-escuro);border-color:var(--bronze-escuro);color:#231b13}
.botao.bloco{display:block;text-align:center}
.ficheiro-escondido{position:absolute;opacity:0;width:1px;height:1px}
button:focus-visible,input:focus-visible,label.botao:focus-within,a:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px}

.aviso{background:var(--aviso-fundo);color:var(--aviso-tinta);border-radius:9px;padding:8px 10px;font-size:14px;margin:10px 0 0}

.conversor{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.conversor label{font-size:12.5px;color:var(--tinta-suave);display:flex;flex-direction:column;gap:3px}
.conversor input{width:100%;font:inherit;padding:7px 8px;border:1px solid var(--linha);border-radius:8px;background:var(--campo);color:var(--tinta)}

#zoom{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px}
#zoom button{width:40px;height:40px;border-radius:10px;border:2px solid var(--bronze);background:var(--painel);color:var(--tinta);font:700 20px/1 "Alegreya Sans",sans-serif;cursor:pointer}
#zoom #zoomTudo{font-size:15px}
#coordenadas{position:absolute;right:14px;bottom:14px;background:var(--painel);color:var(--tinta-suave);border:1px solid var(--bronze);
  border-radius:8px;padding:4px 9px;font-size:13px;font-variant-numeric:tabular-nums}

/* Mensagem enquanto o mapa carrega ou se falhar */
#estado{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);
  background:var(--painel);color:var(--tinta);border:2px solid var(--bronze);border-radius:12px;padding:10px 16px;text-align:center;
  font-variant-numeric:tabular-nums}

/* Notificação dos créditos, no canto inferior direito. Cor de pergaminho, porque o logo tem letras pretas.
   Medidas em em: o font-size define o tamanho de tudo. Em ecrãs baixos não passa 3/4 da altura
   e, se não houver espaço à direita do mapa, o app.js encolhe-a. */
.creditos{position:absolute;right:14px;bottom:14px;z-index:2;font-size:min(27px,3.7vh);width:19em;max-width:calc(100% - 28px);
  padding:.89em 1.04em .96em;background:var(--pergaminho);color:var(--tinta-pergaminho);
  border:.15em solid var(--bronze);border-radius:1.04em;
  box-shadow:0 0 0 .37em color-mix(in srgb,var(--bronze) 35%,transparent),0 .89em 2.2em rgba(0,0,0,.35);
  text-align:center;line-height:1.4;
  /* Tocar e segurar só segura a notificação: sem deslizar, menu nem seleção de texto */
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.creditos a{color:var(--vermelho);font-weight:700}
.creditos img{display:block;-webkit-user-drag:none}
.creditos .bandeiras{display:flex;justify-content:center;gap:.59em}
.creditos .bandeiras img{height:4.74em;width:auto;border-radius:.22em;box-shadow:0 .07em .22em rgba(43,33,23,.4)}
.creditos .logo{display:block;width:14.6em;max-width:100%;margin:.74em auto 0}
.creditos .logo img{width:100%;height:auto}
.creditos p{margin:.59em 0 0}

#pega{display:none}
.escondido{display:none!important}

/* Telemóvel: o painel passa para o fundo do ecrã e muda de altura pela pega */
@media (max-width:700px){
  #painel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:var(--altura-painel,52%);border-radius:16px 16px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Fica colada ao topo do painel quando o conteúdo desliza */
  #pega{display:block;position:sticky;top:0;z-index:1;height:26px;background:var(--painel);touch-action:none;cursor:ns-resize}
  #pega::before{content:"";position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--tinta-suave)}
  #pega:focus-visible{outline:3px solid var(--vermelho);outline-offset:-3px}
  #coordenadas{bottom:auto;top:14px;right:64px}
  #estado{top:25%}
  /* Créditos com a largura toda, por cima do painel: bandeiras e logo numa linha e o texto por baixo,
     meio por meio. As colunas seguem a largura/altura de cada imagem, para ficarem todas da mesma altura. */
  .creditos{left:10px;right:10px;bottom:30px;width:auto;max-width:none;font-size:min(14px,2.4vh);
    display:grid;grid-template-columns:minmax(0,1.426fr) minmax(0,1.5fr) minmax(0,2.224fr);grid-template-rows:1fr 1fr;
    gap:.6em .55em;align-items:center}
  .creditos .bandeiras{display:contents}
  .creditos .bandeiras img{width:100%;height:auto}
  .creditos .logo{width:auto;margin:0}
  .creditos p{grid-column:1 / -1;margin:0}
  .grande{font-size:36px}
  /* Abaixo de 16px o iPhone faz zoom à página ao escrever */
  .conversor input{font-size:16px}
}
@media (prefers-reduced-motion:no-preference){.botao,.segmentos button{transition:background .15s}}