/* Passaporte de Viagens — estilo caderno de viagem, mobile-first.
   As cores principais vêm de config.json (variáveis definidas no <head>). */

@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("/vendor/fontes/caveat/caveat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url("/vendor/fontes/atkinson/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Edu QLD Hand"; font-weight: 400 700; font-display: swap; src: url("/static/fontes/edu-qld-hand.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url("/vendor/fontes/atkinson/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --fundo: var(--papel);
  --texto: var(--tinta);
  --suave: color-mix(in srgb, var(--tinta) 65%, var(--papel));
  --cartao: #fffaf0;
  --linha: color-mix(in srgb, var(--tinta) 18%, transparent);
  --sombra: 0 2px 4px rgb(0 0 0 / .08), 0 8px 20px rgb(0 0 0 / .08);
  --raio: 6px;
  --titulos: "Caveat", "Segoe Print", cursive;
  color-scheme: light;
}

/* Modo escuro: segue o sistema, ou a escolha no interruptor do topo (data-tema, ver scriptTema em server.js) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #1d1a17;
  --texto: #f1e9da;
  --suave: #c9bca6;
  --cartao: #2a2521;
  --linha: rgb(255 255 255 / .15);
  --terracota: #e0794a;
  --mar: #6fb3cf;
  --oliva: #a9b96b;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 1.0625rem/1.6 "Atkinson", system-ui, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mar); text-underline-offset: 3px; }
a:hover { color: var(--terracota); }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; line-height: 1.1; margin: 1.2em 0 .4em; }
h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); margin-top: .4em; }
h2 { font-size: clamp(1.9rem, 5vw, 2.4rem); }
h3 { font-size: 1.6rem; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--texto); color: var(--fundo); padding: .5rem 1rem; z-index: 2000; }
.saltar:focus { left: 0; }
.visualmente-escondido { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Só aparece a quem chega lá com o teclado (Tab); o leitor de ecrã encontra-o sempre */
.so-teclado:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Estrutura ---------- */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .75rem 1rem .55rem; border-bottom: 2px dashed var(--linha);
}
.marca { position: relative; font-family: var(--titulos); font-size: 1.9rem; font-weight: 700; padding-bottom: .45em; }
.marca a { color: var(--texto); text-decoration: none; }
.marca a:hover { color: var(--terracota); }
/* Assinatura ("by Andreia Mano", config.json → site.assinatura) por baixo do nome; tamanhos do "by" e do nome à parte */
/* "gem" mede ~1.14em em Caveat: a assinatura fica presa ao fim do nome */
.marca-assinatura { position: absolute; left: calc(100% - 1.19em); top: 1.41em; margin-top: -.05em; white-space: nowrap; line-height: 1; font-family: "Edu QLD Hand", var(--titulos); font-weight: 700; }
.marca-by { font-size: .6em; color: var(--terracota); margin-right: .1em; }
.marca-patreia { font-size: .6em; }
/* Telemóveis muito estreitos: nome mais pequeno para a assinatura caber no ecrã */
@media (max-width: 359px) { .marca { font-size: 1.6rem; } }
/* Telemóvel: com um nome comprido a assinatura sairia do ecrã; acaba onde acaba "Viagens" */
@media (max-width: 600px) { .marca-assinatura { left: auto; right: 0; } }
/* Computador: assinatura mais perto do nome */
@media (min-width: 900px) { .marca-assinatura { margin-top: -.4em; } }
/* Ícones desenhados (public/icones): máscara pintada com a cor do texto, do tamanho da letra */
.ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; background: currentColor; mask: center / contain no-repeat; }
.ico-aviao { mask-image: url(../icones/aviao.svg); }
.ico-aviao-lado { mask-image: url(../icones/aviao-lado.svg); } /* o do conjunto "Travel icons", de lado: só no carimbo "Aprovado" da página inicial */
.ico-logo-amano { mask-image: url(../icones/logo-amano.svg); }
/* Logo da A Mano (pedir viagem, sobre mim e rodapé): forma do SVG pintada com a cor do texto, também no tema escuro */
.logo-amano { display: block; width: 100%; aspect-ratio: 415 / 333; background: currentColor; mask: url(../icones/logo-amano.svg) center / contain no-repeat; }
.agencia-caixa { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; padding: .8rem 1rem; border: 1px dashed var(--terracota); border-radius: var(--raio); background: var(--cartao); }
.agencia-caixa p { margin: 0; font-weight: 700; }
.agencia-caixa .logo-amano-caixa { flex: none; width: 150px; color: var(--terracota); }
.logo-amano-sobre { width: min(300px, 80%); margin: 0 auto 1rem; }
@media (min-width: 700px) { .logo-amano-sobre { float: right; width: 300px; margin: 0 0 1rem 1.5rem; } }
.rodape-agencia { display: grid; justify-items: center; gap: .3rem; margin: 1rem 0; color: var(--suave); font-size: .85rem; }
.rodape-agencia p { margin: 0; }
.rodape-agencia .logo-amano-botao { width: 160px; color: var(--texto); }
/* O logo é um botão (abre-o em grande): sem o aspeto de botão */
.logo-amano-botao { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.logo-amano-botao:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; border-radius: 4px; }
/* O logo animado (vídeo de 1000 × 800, com o creme do site à volta): cartão sempre creme, também no tema escuro */
.logo-amano-grande-cartao { width: min(92vw, 640px); overflow: hidden; border-radius: var(--raio); background: #f6efe1; box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.logo-amano-video { display: block; width: 100%; height: auto; }
@media (max-width: 480px) { .agencia-caixa { flex-direction: column; text-align: center; } }
.ico-balao { mask-image: url(../icones/balao.svg); }
.ico-barco { mask-image: url(../icones/barco.svg); }
.ico-bussola { mask-image: url(../icones/bussola.svg); }
.ico-camara { mask-image: url(../icones/camara.svg); }
.ico-carro { mask-image: url(../icones/carro.svg); }
.ico-mala { mask-image: url(../icones/mala.svg); }
.ico-camelo { mask-image: url(../icones/camelo.svg); }
.ico-cavalo { mask-image: url(../icones/cavalo.svg); }
.ico-kayak { mask-image: url(../icones/kayak.svg); }
.ico-nadar { mask-image: url(../icones/nadar.svg); }
.ico-paraquedas { mask-image: url(../icones/paraquedas.svg); }
.ico-snorkeling { mask-image: url(../icones/snorkeling.svg); }
.ico-sup { mask-image: url(../icones/sup.svg); }
.marca-selo { position: relative; z-index: 1; display: inline-block; vertical-align: -.1em; }
.marca-selo img { display: block; width: 1.5em; height: auto; } /* avião a cores (public/icones/aviao-marca.png), já inclinado a subir */
.topo ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
/* Interruptor do tema: lua e sol numa pílula escura, bola branca desliza para cima do tema que não está ativo */
.tema { position: relative; display: flex; align-items: center; justify-content: space-between; width: 58px; height: 30px; padding: 0 7px; border: 0; border-radius: 30px; background: #111; box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; }
.tema-lua { color: dodgerblue; }
.tema-sol { color: gold; }
.tema-bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .4s ease; }
.tema[aria-pressed="true"] .tema-bola { left: 31px; }
@media (prefers-reduced-motion: reduce) { .tema-bola { transition: none; } }
.topo nav a:not(.botao) { color: var(--texto); text-decoration: none; padding: .5rem 0; display: inline-block; }
main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 6rem; }
.estreito { max-width: 640px; margin: 0 auto; }
.centrado { text-align: center; }
.rodape { border-top: 2px dashed var(--linha); padding: 2rem 1rem; text-align: center; color: var(--suave); font-size: .95rem; }
.rodape nav, .rodape-linguas { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; margin: .5rem 0; }
/* Redes sociais: os ícones espreitam por cima da linha e sobem ao passar o rato (efeito do CodePen) */
.redes {
  display: flex; justify-content: center; gap: 0 1.25rem; width: fit-content; height: 3rem; overflow: clip; /* clip: com hidden, o foco do teclado fazia a faixa deslizar */
  margin: 1rem auto; padding: 0 1rem; list-style: none; border-bottom: 1px solid var(--linha);
}
.rede { display: block; position: relative; top: 1.25rem; transition: top 100ms cubic-bezier(.42, 0, .58, 1); }
.rede svg { display: block; width: 2.5rem; height: 2.5rem; }
.rede:hover, .rede:focus-visible { top: .25rem; }
@media (hover: none) { .rede { top: .25rem; } } /* telemóvel: sem rato, os ícones ficam inteiros */
/* Instagram com o gradiente do logótipo (CodePen "New Instagram Logo CSS3 gradient"): quadrado colorido, desenho branco */
.redes .rede-instagram { color: #fff; }
.rede-instagram svg {
  padding: .3rem; border-radius: 22%; background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
@media (max-width: 480px) { .redes { gap: 0 .75rem; padding: 0 .5rem; } .rede svg { width: 2rem; height: 2rem; } }
.redes .rede-facebook { color: #3B5998; }
.redes .rede-whatsapp { color: #25D366; } .redes .rede-email { color: var(--terracota); }
.rodape-autoria { margin: .75rem 0 0; font-size: .85rem; }
.rodape-marca { font-family: var(--titulos); font-size: 1.5rem; margin: 0; }
.rodape-linguas a { padding: .25rem; }
.rodape-linguas a[aria-current] { font-weight: 700; text-decoration: none; }
.destaque { font-size: 1.2rem; color: var(--suave); }
.migalhas { font-size: .95rem; color: var(--suave); margin-top: 1rem; }
.vazio { padding: 2rem; text-align: center; border: 2px dashed var(--linha); border-radius: var(--raio); }
.aviso { background: color-mix(in srgb, var(--terracota) 14%, transparent); border-left: 4px solid var(--terracota); padding: .6rem 1rem; border-radius: var(--raio); }
.aviso-ok { background: color-mix(in srgb, var(--oliva) 18%, transparent); border-color: var(--oliva); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--terracota); color: #fff; font: 700 1.05rem "Atkinson", sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--terracota) 60%, #000);
  transition: transform .15s;
}
.botao:hover { color: #fff; transform: translateY(-2px); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .6; cursor: progress; }
.botao-secundario { background: var(--mar); box-shadow: 0 3px 0 color-mix(in srgb, var(--mar) 60%, #000); }
.botao-pequeno { min-height: 40px; padding: .4rem 1rem; font-size: .95rem; }
.botao-ligacao { background: none; border: 0; padding: .25rem 0; color: var(--mar); font: inherit; text-decoration: underline; cursor: pointer; }
.perigo, .perigo:hover { color: #b3261e; }
[data-tema="escuro"] .perigo, [data-tema="escuro"] .perigo:hover { color: #ff8a80; }
[data-tema="escuro"] :is(.botao, .botao:hover) { color: #1d1a17; } /* cores claras no escuro: texto escuro para manter o contraste */
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Botão sempre visível no telemóvel (página do roteiro) */
/* Barra de partilha fixa (views/partials/partilha-fixa.ejs): no computador colada à esquerda, cada botão abre-se e mostra
   o nome; no telemóvel no fundo do ecrã, só ícones, e o botão "Quero que me organizes" e o "subir/descer" sobem para cima dela */
.partilha-fixa { position: fixed; z-index: 900; display: flex; }
.pf { --pf: #6b7a8f; display: flex; align-items: center; gap: .6rem; height: 44px; padding: 0 12px; border: 0; color: #fff; background: var(--pf);
  font: 700 .9rem/1 "Atkinson", sans-serif; text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer; }
.pf svg { flex: none; width: 20px; height: 20px; }
/* Cores originais de cada rede, como nas barras do ShareThis (não as do site) */
.pf:hover, .pf:focus-visible { color: #fff; } /* o a:hover geral do site pintava o ícone e o nome de laranja */
.pf:focus-visible { outline: 3px solid #fff; outline-offset: -5px; } /* foco do teclado a branco, por dentro (o do site é laranja) */
.pf-whatsapp { --pf: #25D366; } .pf-facebook { --pf: #4267B2; } .pf-x { --pf: #000; } .pf-pdf { --pf: #EC1C24; } /* vermelho dos PDF (Adobe) */
.pf-email { --pf: #7d7d7d; } .pf-copiar { --pf: #4c4c4c; } .pf-nativo { --pf: #95D03A; }
.pf-postal { --pf: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } /* o degradê do Instagram */
.pf-postal-abrir { all: unset; display: flex; align-items: center; cursor: pointer; }
.pf .pf-ig { width: 24px; height: 24px; margin: 0 -2px; } /* um pouco maior que os outros: o traço fino da câmara parecia pequeno */
.pf-postal-abrir:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }
.pf-escolha { display: flex; gap: .3rem; margin-left: auto; } /* encostados à direita do botão aberto */
/* brancos com texto escuro: o branco sobre o amarelo do degradê não se lia */
.pf-escolha a { color: #262626; font-weight: 700; text-align: center; text-decoration: none; padding: .35rem .6rem; border-radius: 4px; background: #fff; }
.pf-escolha a:hover, .pf-escolha a:focus-visible { color: #262626; background: #f0f0f0; outline: 2px solid #262626; outline-offset: -2px; }
@media (min-width: 900px) {
  .partilha-fixa { left: 0; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; }
  .pf { width: 44px; border-radius: 0 6px 6px 0; transition: width .2s ease; }
  .pf-nome { opacity: 0; transition: opacity .2s; }
  .pf:hover, .pf:focus-visible, .pf:focus-within, .pf.copiado, .pf.aberto { width: 190px; }
  .pf:is(:hover, :focus-visible, :focus-within, .copiado, .aberto) .pf-nome { opacity: 1; }
  .pf-nativo { display: none; } /* no computador, o "Partilhar" do sistema quase não existe; fica só no telemóvel */
  .pf-nome:not(.pf-escolha) { flex: 1; text-align: center; } /* o nome centrado no espaço à direita do ícone */
  .pf.recolhido { width: 44px; } /* 3 s depois de usado (public/js/partilha.js), mesmo com o rato por cima */
  .pf.recolhido .pf-nome { opacity: 0; }
}
@media (max-width: 899px) {
  .partilha-fixa { left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--fundo); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); }
  .pf { flex: 1; justify-content: center; height: 48px; padding: 0; }
  .pf-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* só para leitores de ecrã */
  /* Postais: o ícone abre um menu por cima da barra com "Feed" e "Stories" */
  .pf-postal { position: relative; overflow: visible; }
  .partilha-fixa:has(.pf-postal.aberto) { z-index: 1100; } /* o menu fica por cima do "Quero que me organizes" */
  .pf-postal-abrir { width: 100%; height: 100%; justify-content: center; }
  .pf-postal.aberto .pf-escolha { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: auto; height: auto; clip-path: none;
    overflow: visible; flex-direction: column; gap: .3rem; padding: .4rem; border-radius: 8px 8px 0 0; background: var(--pf); }
  .pf-postal.aberto .pf-escolha a { padding: .6rem 1.1rem; }
  body:has(.partilha-fixa) .botao-fixo { bottom: calc(48px + max(1rem, env(safe-area-inset-bottom))); }
  body:has(.partilha-fixa) .rolar { bottom: calc(48px + 1.25rem); }
  body:has(.partilha-fixa) main { padding-bottom: calc(6rem + 48px); }
}
@media (prefers-reduced-motion: reduce) { .pf, .pf-nome { transition: none; } }
@media print { .partilha-fixa { display: none; } }
.botao-fixo { position: fixed; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1000; }
@media (min-width: 900px) { .botao-fixo { left: auto; right: 1.5rem; } }

/* ---------- Início ---------- */
.heroi { position: relative; padding: 2rem 0 1rem; overflow-x: clip; } /* o avião anda até à borda e não pode criar scroll lateral */
.heroi h1 { max-width: 14ch; }
/* No telemóvel o avião fica na linha do carimbo (.heroi-selo) */
.aviao-voo { font-size: 2.5rem; color: var(--mar); animation: voar 9s ease-in-out infinite; }
@keyframes voar { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-40px, 14px) rotate(4deg); } }
.passos { padding-left: 1.2rem; }
.passos li { margin: .5rem 0; }

/* Carimbos */
.carimbo {
  display: inline-block; margin: 0; padding: .2rem .9rem; border: 3px double var(--terracota); border-radius: 8px;
  color: var(--terracota); font: 700 1.6rem var(--titulos); text-transform: uppercase; letter-spacing: .05em;
  transform: rotate(-6deg); opacity: .9;
}
/* Telemóvel: carimbo e avião numa linha entre o título e o texto, à direita */
/* O carimbo sobe para o espaço livre a seguir à última linha do título; o avião pode passar por cima dele */
.heroi-selo { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; margin: -2.6rem -1rem -.25rem 0; }
/* Telemóveis muito estreitos: não há espaço a seguir ao título, o carimbo fica na sua linha */
@media (max-width: 359px) { .heroi-selo { margin-top: -.5rem; } }
.heroi h1 { margin-bottom: 0; }
/* Ecrãs largos: ao lado do título, como antes */
@media (min-width: 900px) {
  .heroi-selo { display: block; margin: 0; }
  .heroi h1 { margin-bottom: .4em; }
  .carimbo-heroi { position: absolute; right: 3rem; top: 4.5rem; }
  .heroi-selo .aviao-voo { position: absolute; top: 1rem; right: 0; }
}
.carimbo-bater { animation: bater .5s cubic-bezier(.2, 1.6, .4, 1) both; font-size: 2.6rem; }
@keyframes bater { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: .9; } }

/* ---------- Postais (lista de roteiros) ---------- */
.postais { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 1rem 0; }
.postal {
  background: var(--cartao); padding: .75rem .75rem 1rem; box-shadow: var(--sombra); border-radius: 3px;
  transform: rotate(-1.5deg); transition: transform .25s ease;
}
.postal:nth-child(even) { transform: rotate(1.2deg); }
.postal:hover, .postal:focus-within { transform: rotate(0) translateY(-4px); }
.postal a { color: inherit; text-decoration: none; }
.postal-foto { position: relative; aspect-ratio: 4 / 3; background: var(--linha); overflow: hidden; }
.postal-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Carimbo do país nos cartões: borda dupla (cheia por fora, tracejada por dentro), país em maiúsculas e a data */
.selo {
  position: absolute; top: .6rem; right: .6rem; padding: 3px; color: var(--mar); transform: rotate(6deg);
  background: color-mix(in srgb, var(--cartao) 90%, transparent); border: 3px solid currentColor; border-radius: 8px;
}
.selo-pais {
  display: flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border: 1.5px dashed currentColor; border-radius: 5px;
  font: 800 .95rem/1 "Atkinson", sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.selo small { display: block; margin-top: 2px; font: 700 .6rem "Atkinson", sans-serif; letter-spacing: .2em; text-align: center; }
.postal-foto .selo-img { width: 6.5rem; height: auto; padding: 0; border: 0; border-radius: 0; background: none; object-fit: contain; } /* imagem do Painel → Selo e postal */
.postal-titulo { margin: .6rem 0 .2rem; font-size: 1.7rem; }
.postal-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; color: var(--suave); font-size: .95rem; }
.postal-meta span + span::before { content: "·"; margin-right: .75rem; }

/* ---------- Filtros e formulários ---------- */
.filtros { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.filtros label { display: flex; flex-direction: column; font-size: .95rem; }
.formulario { display: flex; flex-direction: column; gap: .35rem; }
.formulario label { font-weight: 700; margin-top: .6rem; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--cartao); width: 100%;
  min-height: 44px; padding: .5rem .7rem; border: 2px solid var(--linha); border-radius: var(--raio);
}
input:focus, select:focus, textarea:focus { border-color: var(--mar); }
input[type="checkbox"], input[type="radio"] { width: 1.3rem; min-height: 1.3rem; accent-color: var(--terracota); flex: none; }
[aria-invalid="true"] { border-color: #b3261e; }
.erro { color: #b3261e; margin: 0; font-size: .95rem; }
.caixa { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.formulario .botao { margin-top: 1rem; align-self: flex-start; }
.linha-2, .linha-4 { display: grid; gap: .75rem; }
/* Editor: orçamento por pessoa; o valor e a moeda só aparecem com "Outro valor…" */
.r-orcamento { margin: 1rem 0 0; padding: .75rem 1rem 1rem; border: 1px dashed var(--linha); border-radius: var(--raio); }
.r-orcamento legend { font: 700 1.2rem var(--titulos); padding: 0 .3rem; }
.r-orcamento:not(:has(#r-orc option[value="valor"]:checked)) .r-orc-valor { display: none; }
.filtro-euros { width: 7em; }
@media (min-width: 600px) { .linha-2 { grid-template-columns: 1fr 1fr; } .linha-4 { grid-template-columns: repeat(4, 1fr); } }
.armadilha { position: absolute; left: -9999px; }
fieldset { border: 2px dashed var(--linha); border-radius: var(--raio); padding: 1rem; margin: 1.5rem 0 0; min-width: 0; }
legend { font: 700 1.6rem var(--titulos); padding: 0 .4rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.etiquetas a { display: inline-block; padding: .4rem .9rem; border: 2px solid var(--mar); border-radius: 999px; text-decoration: none; }

/* ---------- Página do roteiro ---------- */
.roteiro-cabecalho h1 { margin-bottom: .2rem; }
.mapa { height: 70vh; min-height: 320px; border-radius: var(--raio); box-shadow: var(--sombra); z-index: 0; }
@media (min-width: 900px) { .mapa { height: 480px; } }
/* Mapa em ecrã inteiro (mapa.js → ecraInteiro): com a API do browser ou, no iPhone, a ocupar a janela */
.mapa-envolvente:fullscreen, .mapa-envolvente.ecra-inteiro { background: var(--fundo); }
.mapa-envolvente.ecra-inteiro { position: fixed; inset: 0; z-index: 3000; }
.mapa-envolvente:fullscreen .mapa, .mapa-envolvente.ecra-inteiro .mapa { height: 100%; min-height: 0; border-radius: 0; }
.com-mapa-inteiro { overflow: hidden; }
.botao-ecra-inteiro { display: grid !important; place-items: center; color: #333 !important; }
.mapa-pequeno { height: 320px; }
.totais { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }
.dia { max-width: 720px; margin: 0 auto; }
/* Título do dia sublinhado; o troço que vem logo a seguir sai do sublinhado (o caminho começa 6 px abaixo do topo, ver caminhos.js) */
.dia-titulo { width: fit-content; padding-bottom: .55rem; /* só até onde acaba o texto */
  /* Traço de pincel terracota, mais grosso no meio e ligeiramente torto; o fundo do traço é o fundo do título */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8C40 6.2 90 5 150 5.3S250 6 300 7.2V8Z' fill='%23b5532a'/%3E%3Cpath d='M2 7.4C60 4.4 120 3.6 180 4.2S270 5.6 298 6.4' fill='none' stroke='%23b5532a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 8px no-repeat; }
:root[data-tema="escuro"] .dia-titulo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8C40 6.2 90 5 150 5.3S250 6 300 7.2V8Z' fill='%23e0794a'/%3E%3Cpath d='M2 7.4C60 4.4 120 3.6 180 4.2S270 5.6 298 6.4' fill='none' stroke='%23e0794a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dia-titulo:has(+ .troco.animado) { margin-bottom: 0; }
.dia-titulo + .troco.animado { margin-top: -6px; }
.dia-titulo small { font-family: "Atkinson", sans-serif; font-size: 1rem; color: var(--suave); margin-left: .5rem; }
.troco { margin: 1rem 0; padding-left: 1rem; border-left: 4px solid var(--linha); color: var(--suave); }
.troco-a_pe { border-color: var(--oliva); } .troco-carro { border-color: var(--terracota); }
.troco-comboio, .troco-barco, .troco-aviao { border-left-style: dashed; }
.troco-barco { border-color: var(--mar); }
.troco-texto { margin: 0; }
/* Troços animados (public/js/troco-animado): desenho de 120 × 140 px à esquerda, texto ao lado */
.troco.animado { display: flex; align-items: center; gap: .75rem; min-height: 140px; margin: 0; padding-left: 0; border-left: 0; }
.troco-desenho { position: relative; flex: none; width: 120px; height: 140px; }
/* Fotos coladas ao troço animado: o caminho sai do fundo de uma foto e chega ao topo da seguinte */
.dia :is(.foto, .grupo):has(+ .troco.animado) { margin-bottom: .25rem; }
.dia .troco.animado + :is(.foto, .grupo) { margin-top: .25rem; }
.troco-desenho svg { display: block; overflow: visible; }
.troco-icone { position: absolute; top: 0; left: 0; width: 24px; height: 24px; offset-anchor: center; opacity: 0; pointer-events: none; }
.troco-icone > span { position: absolute; inset: 0; display: block; }
.troco-icone-substituido { background: currentColor; mask: center / contain no-repeat; } /* desenho trocado no Painel → Ícones */
.troco-icone-aviao { width: 28px; height: 28px; color: var(--mar) !important; } /* azul do céu, como o tracejado (mais claro no tema escuro) */
/* Marcas de sapatos: sola cinzenta às riscas com contorno escuro (no tema escuro, contorno claro: ver em baixo) */
.pegada-sola { stroke: #2b2b2b; stroke-width: .55; }
.pegada-piso { fill: #c4c4c4; }
.pegada-risca { fill: #6e6e6e; }
/* Tema escuro: o preto e as cores escuras dos transportes perdem-se no fundo; ferro, pegadas e rodas ficam claros */
:root[data-tema="escuro"] .pegada-sola { stroke: #e9e1d3; }
:root[data-tema="escuro"] .rasto-roda, :root[data-tema="escuro"] .rasto-carril { stroke: #cfcfcf; }
:root[data-tema="escuro"] .rasto-asfalto { stroke: #5a5a5a; }
:root[data-tema="escuro"] .rasto-travessa { stroke: #b07a45; }
:root[data-tema="escuro"] .troco-icone-barco { color: var(--mar) !important; }
:root[data-tema="escuro"] .rasto-esteira { stroke: var(--mar); }
:root[data-tema="escuro"] .troco-icone-bicicleta { color: #4fc3a1 !important; }
:root[data-tema="escuro"] .rasto-pneu { stroke: #4fc3a1; }
.rasto-voo { fill: none; stroke: var(--mar); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linecap: round; }
.rasto-esteira { fill: none; stroke-width: 2; opacity: .7; }
.rasto-balao { fill: none; stroke-width: 2.6; stroke-dasharray: 0 7; stroke-linecap: round; opacity: .8; } /* pontinhos: o balão vai ao sabor do vento */
.troco-icone-balao { width: 30px; height: 30px; }
:is(.troco-icone-camelo, .troco-icone-cavalo, .troco-icone-sup, .troco-icone-paraquedas, .troco-icone-snorkeling) { width: 30px; height: 30px; }
:is(.troco-icone-camelo, .troco-icone-cavalo, .troco-icone-sup, .troco-icone-paraquedas, .troco-icone-snorkeling, .troco-icone-kayak, .troco-icone-nadar) svg { width: 100%; height: 100%; }
.troco-icone-paraquedas .troco-icone-corpo { transform-origin: 50% 10%; } /* balança pendurado no velame */
.rasto-pata { fill: #c8a26a; opacity: .8; }
.rasto-ferradura { fill: none; stroke: #6d4c33; stroke-width: 1.1; stroke-linecap: round; }
.rasto-esteira-fina { fill: none; stroke: #7cc7e8; stroke-width: 1.4; opacity: .9; } /* azul-claro, como a água */
.rasto-agua { fill: none; stroke-width: 1.8; stroke-dasharray: 5 3; stroke-linecap: round; opacity: .7; }
.rasto-bolha { fill: none; stroke-width: 1; opacity: .8; }
.rasto-paraquedas { fill: none; stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; }
:root[data-tema="escuro"] .rasto-ferradura { stroke: #c9a27e; }
.troco-icone-balao svg { width: 100%; height: 100%; }
.troco-icone-barco { width: 26px; height: 26px; offset-anchor: 50% 78%; } /* barco à vela assente na esteira pelo casco */
.troco-icone-barco svg { width: 100%; height: 100%; }
.troco-icone-comboio { color: #c62828 !important; } /* vermelho e preto (icones.js), destaca-se dos carris */
.rasto-carril { fill: none; stroke: #111; stroke-width: 1.2; } /* ferro */
.rasto-travessa { stroke: #8b5a2b; stroke-width: 1.8; } /* madeira */
.rasto-asfalto { fill: none; stroke: #4a4a4a; stroke-width: 7.2; } /* 2 × RODAS (carro.js): de uma marca de rodas à outra */
.rasto-roda { fill: none; stroke: #111; stroke-width: 1.8; }
.rasto-estrada-meio { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 4 3; }
.rasto-pneu { fill: none; stroke-width: 2; stroke-dasharray: 1.5 1.5; }

/* Molduras (em em, para escalarem nas miniaturas do editor) */
.foto { margin: 1.5rem 0; }
.foto-imagem { position: relative; }
.foto-imagem img { display: block; width: 100%; height: auto; }
/* Foto vertical (views/partials/foto.ejs): caixa 4:5 (no máximo 85% do ecrã, para caber inteira), a foto inteira ao centro e a mesma foto desfocada a encher os lados.
   O desfoque está no invólucro para os filtros (sépia, P&B…) continuarem a aplicar-se às duas imagens */
.foto-vertical-caixa { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 85svh; overflow: hidden; isolation: isolate; } /* a nota, o carimbo e as setas do carrossel ficam por cima */
.foto-vertical-caixa > img { position: relative; z-index: 1; height: 100%; object-fit: contain; }
.foto-fundo { position: absolute; inset: 0; filter: blur(18px) brightness(.92); transform: scale(1.15); }
.foto-fundo img { height: 100%; object-fit: cover; }
.foto figcaption { padding-top: .6rem; display: flex; flex-direction: column; gap: .2rem; }
.foto-local { font: 700 1.6rem var(--titulos); }
.foto-meta { font-size: .9rem; color: var(--suave); }
.foto-mapas { display: inline; margin-left: .5rem; }
.foto-mapas summary { display: inline-flex; align-items: center; gap: .45rem; padding: .1rem .55rem; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; list-style: none; }
.foto-mapas summary::-webkit-details-marker { display: none; }
.foto-mapas summary::after { content: ""; width: .38em; height: .38em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.12em) rotate(45deg); transition: transform .2s; } /* seta fina em V */
.foto-mapas[open] summary::after { transform: translateY(.12em) rotate(-135deg); }
.foto-mapas a { display: inline-block; margin: .45rem .4rem 0 0; padding: .15rem .65rem; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font-size: .85rem; letter-spacing: .02em; text-decoration: none; }
.foto-mapas a::after { content: " ↗"; opacity: .6; }
.foto-mapas a:hover, .foto-mapas a:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .foto-mapas summary::after { transition: none; } }
.moldura-polaroid, .moldura-postal { color: #2b2420; box-shadow: var(--sombra); }
.moldura-polaroid .foto-meta, .moldura-postal .foto-meta { color: #6b5f55; }
.moldura-polaroid a, .moldura-postal a { color: #1f5f7a; }
.moldura-polaroid { background: #fff; padding: .75em .75em 1em; transform: rotate(-.6deg); }
.foto:nth-of-type(even).moldura-polaroid { transform: rotate(.6deg); }
/* Postal: selo no canto e carimbo com a data */
.moldura-postal { background: #fffaf0; padding: .9em; border: 1px solid #e3d6bd; }
.moldura-postal .foto-imagem::after {
  content: "✈"; position: absolute; top: .45em; right: .45em; width: 2.6em; height: 3.1em; display: grid; place-items: center;
  background: var(--terracota); color: #fff; font-size: 1.5em; outline: 3px dashed #fffaf0; outline-offset: -6px;
}
.carimbo-foto { display: none; }
.moldura-postal .carimbo-foto {
  display: grid; place-items: center; align-content: center; position: absolute; top: 3em; right: 5.4em; width: 7em; height: 7em;
  border: 4px double rgb(181 83 42 / .9); border-radius: 50%; color: rgb(181 83 42 / .95); background: rgb(255 250 240 / .55);
  font: 700 .8em "Atkinson", sans-serif; letter-spacing: .08em; transform: rotate(-12deg);
}
.moldura-postal .carimbo-foto .ico { width: 2.2em; height: 2.2em; margin-top: .9em; }
/* Imagens do Painel → Selo e carimbo do postal, no lugar dos desenhos */
.selo-postal { display: none; }
.moldura-postal .selo-postal { display: block; position: absolute; top: .45em; right: .45em; width: 5em; height: 5em; object-fit: contain; }
.moldura-postal.com-selo-img .foto-imagem::after { display: none; }
.moldura-postal .carimbo-img { border: 0; border-radius: 0; background: none; object-fit: contain; }
/* O que o roteiro escolheu levar no postal (estilo "postal"): só o selo, só o carimbo, os dois ou nenhum */
.moldura-postal.postal-carimbo .foto-imagem::after, .moldura-postal.postal-nenhum .foto-imagem::after,
.moldura-postal.postal-carimbo .selo-postal, .moldura-postal.postal-nenhum .selo-postal,
.moldura-postal.postal-selo .carimbo-foto, .moldura-postal.postal-nenhum .carimbo-foto { display: none; }
.carimbo-arco { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; font: 800 13px "Atkinson", sans-serif; letter-spacing: 1.5px; }
.moldura-postal figcaption { font-family: var(--titulos); font-size: 1.25em; }
.moldura-postal .foto-meta { font-family: "Atkinson", sans-serif; font-size: .75em; }
/* Película: fita escura com furos em cima e em baixo */
.moldura-pelicula { background: #161412; color: #f3ead8; padding: 0 .6em .8em; }
.moldura-pelicula .foto-imagem {
  padding: 1.6em 0;
  background:
    repeating-linear-gradient(90deg, #161412 0 .7em, #e9e1cf .7em 1.5em) left 0 top .5em / 100% .6em no-repeat,
    repeating-linear-gradient(90deg, #161412 0 .7em, #e9e1cf .7em 1.5em) left 0 bottom .5em / 100% .6em no-repeat;
}
.moldura-pelicula .foto-meta { color: #cfc4ad; }
.moldura-pelicula a { color: #9fd0e6; }
.moldura-nenhuma img { border-radius: var(--raio); }
/* Selo: a imagem feita no servidor (services/selo.js) já traz o picotado, o bilhete e o carimbo; os filtros não lhe tocam.
   O local e a hora já estão no bilhete. No editor (sem a imagem) a pré-visualização é o picotado em CSS. */
.foto img.foto-selo { filter: none; }
@media (min-width: 601px) { .moldura-selo:has(.foto-selo) figcaption :is(.foto-local, time) { display: none; } } /* no telemóvel o bilhete fica pequeno: o local e a hora continuam por baixo */
.moldura-selo:not(:has(.foto-selo)) .foto-imagem {
  padding: .9em; background: #fdfaf3;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at .5em .5em, #0000 .3em, #000 calc(.3em + .5px)) -.5em -.5em / 1em 1em round;
}
/* Filtros (só CSS: a foto guardada não muda) */
.filtro-retro img { filter: sepia(.35) saturate(1.3) contrast(.95) hue-rotate(-8deg); }
.filtro-pb img { filter: grayscale(1) contrast(1.1); }
.filtro-anos70 img { filter: sepia(.45) saturate(1.6) hue-rotate(-20deg) brightness(1.05); }
.filtro-vintage img { filter: sepia(.6) contrast(.85) brightness(1.08) saturate(.8); }

/* Partilha */
.partilha { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; margin: .5rem 0 1rem; }
.partilha a, .partilha button { padding: .5rem 0; }

/* Modo Play */
.mapa-envolvente { position: relative; }
.play { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin: .75rem 0; }
.play label { display: flex; gap: .4rem; align-items: center; margin: 0; }
.play select { width: auto; }
.play-cartao {
  position: absolute; z-index: 500; left: .75rem; bottom: .75rem; width: min(340px, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem); overflow: auto; font-size: .85rem;
}
@media (max-width: 600px) { .play-cartao { max-height: 60%; } }
.play-cartao .foto { margin: 0; transform: none; }
.play-cartao .foto-local { font-size: 1.3rem; }
.play-cartao figcaption { flex-flow: row wrap; align-items: baseline; column-gap: .5rem; } /* nome e, na mesma linha, a hora e a data */
.play-cartao .foto-nota { order: 1; flex-basis: 100%; }
.play-cartao .grupo-conta, .play-cartao .foto-meta [data-parte="mapa"], .play-cartao .foto-anotacao { display: none; } /* no cartão: nome, nota e hora, sem os links nem o contador do grupo */
.play-cartao .foto-vertical-caixa { aspect-ratio: 4 / 3; } /* baixa como as deitadas, para o cartão caber no mapa */
.play-ver { position: sticky; bottom: 0; display: block; margin: .5rem 0 0; text-align: center; } /* sempre à vista, mesmo com scroll no cartão */
.play-fechar {
  position: absolute; z-index: 1; top: .3rem; right: .3rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .6); color: #fff; font-size: 1.5rem; cursor: pointer;
}
.veiculo > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .4); font-size: 1.3rem; }
/* ---------- Grupos de fotos em carrossel (public/js/grupos.js) ---------- */
.grupo.carrossel { position: relative; margin: 1.5rem 0; }
/* Só a foto que se vê ocupa espaço: o grupo tem a altura dela (com uma vertical no grupo, as deitadas ficavam com espaço vazio
   por baixo e a animação do troço seguinte longe da foto); as outras ficam por cima, escondidas, para o fade */
.grupo.carrossel > .foto { margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.grupo.carrossel > .foto:not(.atual) { position: absolute; top: 0; left: 0; right: 0; }
.grupo.carrossel > .foto.atual { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .grupo.carrossel > .foto { transition: none; } }
.grupo-lado { position: absolute; top: 0; bottom: 0; z-index: 2; width: 30%; padding: 0 .75rem; border: 0; background: none; color: #fff;
  font-size: 2.2rem; text-shadow: 0 1px 4px rgb(0 0 0 / .6); cursor: pointer; opacity: 0; transition: opacity .3s; }
.grupo-anterior { left: 0; text-align: left; }
.grupo-seguinte { right: 0; text-align: right; }
.grupo-anterior::before { content: "‹"; }
.grupo-seguinte::before { content: "›"; }
.grupo:hover .grupo-lado, .grupo-lado:focus-visible { opacity: 1; }
.grupo-lado[aria-disabled="true"] { cursor: default; }
.grupo-lado[aria-disabled="true"]::before { content: none; }
/* Foto em grande (public/js/ampliar.js): carregar fora da foto fecha */
.dia .foto img, .lado-a-lado .foto img { cursor: zoom-in; }
.ampliada { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 3.5rem 1rem 1rem; border: 0; background: none;
  color: #fff; place-items: center; align-content: center; gap: .75rem; }
.ampliada[open] { display: grid; }
.ampliada::backdrop { background: rgb(0 0 0 / .88); }
.ampliada img { max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: 3px; box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.ampliada-moldura { position: relative; max-width: 100%; }
.ampliada-moldura img { display: block; }
.ampliada-moldura:hover .grupo-lado, .ampliada .grupo-lado:focus-visible { opacity: 1; }
.ampliada p { margin: 0; font-family: var(--titulos); font-size: 1.5rem; text-align: center; }
.ampliada p:empty { display: none; }
.ampliada-fechar { position: fixed; top: .75rem; right: .75rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .15); color: #fff; font-size: 1.4rem; cursor: pointer; }
.grupo-lado:focus-visible { outline: 3px solid var(--terracota); outline-offset: -3px; }
/* Nota por cima da foto ao passar o rato (só com rato; no telemóvel fica a legenda) */
.foto-anotacao { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 2.5rem 1rem .8rem; pointer-events: none;
  background: linear-gradient(transparent, rgb(0 0 0 / .65)); color: rgb(255 255 255 / .95); font-size: .95rem; line-height: 1.35;
  text-align: left; text-shadow: 0 0 2px rgb(0 0 0 / .6); opacity: 0; transition: opacity .3s; }
.foto-anotacao:empty { display: none; }
.grupo .foto-anotacao, .ampliada .foto-anotacao { padding-right: 4.5rem; } /* não tapa o contador */
@media (hover: hover) { .foto-imagem:hover .foto-anotacao, .ampliada-moldura:hover .foto-anotacao { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .foto-anotacao { transition: none; } }
.grupo-conta { position: absolute; right: .6rem; bottom: .6rem; z-index: 3; padding: .1rem .55rem; border-radius: 999px;
  background: rgb(0 0 0 / .5); color: #fff; font-size: .8rem; pointer-events: none; }
/* Editor: agrupar fotos */
.grupos-barra { background: var(--cartao); border-radius: var(--raio); padding: .75rem 1rem; margin-bottom: 1rem; }
.grupos-barra h3 { margin-top: 0; }
.grupos-acoes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.grupos-acoes label { display: flex; gap: .4rem; align-items: center; font-weight: 400; margin: 0; }
.grupos-acoes select { width: auto; }
.grupos-estado:empty { display: none; }
.grupo-etiqueta { font-size: .8rem; padding: .05rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--mar) 22%, transparent); }
.foto-editor.em-grupo { border-left: 4px solid var(--mar); padding-left: .5rem; }

/* ---------- Ver as fotos: menu e os modos molho, mural e mesa (public/js/modos-fotos.js) ---------- */
.modos { position: relative; }
.modos[hidden] { display: none; }
.modos-lista { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 1500; min-width: 260px; margin: 0; padding: .4rem; list-style: none;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.modos-lista button { display: flex; gap: .7rem; align-items: center; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 4px; background: none;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.modos-lista button:hover, .modos-lista button:focus-visible { background: color-mix(in srgb, var(--terracota) 14%, transparent); }
.modos-icone { font-size: 1.4rem; }
.modos-lista small { display: block; color: var(--suave); }
.com-modo { overflow: hidden; }
.modo { position: fixed; inset: 0; z-index: 3000; overflow: hidden; background: color-mix(in srgb, var(--fundo) 92%, #000); color: var(--texto); }
.modo[hidden] { display: none; }
.modo-topo { position: sticky; top: 0; z-index: 2000; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; pointer-events: none; }
/* Título longo encolhe com reticências; o contador fica sempre inteiro */
.modo-titulo { display: flex; margin: 0; min-width: 0; font-family: var(--titulos); font-size: 1.6rem; white-space: nowrap; }
#modo-titulo { overflow: hidden; text-overflow: ellipsis; }
.modo-conta { flex: none; }
.modo-conta::before { content: "\00a0·\00a0"; }
.modo-fechar, .modo-setas button { pointer-events: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; box-shadow: var(--sombra); cursor: pointer; font-size: 1.4rem; }
.modo-fechar { background: var(--cartao); color: var(--texto); }
.modo-baixo { position: absolute; bottom: 1.25rem; left: 0; right: 0; z-index: 2000; text-align: center; pointer-events: none; }
.modo-dica { margin: 0 1rem; color: var(--suave); }
.modo-dica:empty { display: none; }
.modo-setas { display: flex; gap: 1rem; justify-content: center; margin-top: .6rem; }
.modo-setas[hidden] { display: none; }
.modo-setas button { background: var(--terracota); color: #fff; }
.modo-setas button:disabled { opacity: .35; cursor: default; } /* molho: na primeira foto e com a mesa vazia */
.polaroid { display: block; padding: 10px 10px 0; border: 0; border-radius: 4px; background: #fffdf7; color: #2b2622; font: inherit; text-align: center;
  box-shadow: 0 10px 30px rgb(0 0 0 / .3); user-select: none; -webkit-user-select: none; }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.polaroid span { display: block; padding: .4rem .25rem .55rem; font-family: var(--titulos); font-size: 1.5rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Molho: todas as fotos na mesma célula, umas por cima das outras */
.modo-molho .modo-palco { position: absolute; inset: 0; display: grid; place-items: center; }
.molho { display: grid; width: min(560px, 88vw, calc(100dvh - 17rem)); perspective: 1000px; touch-action: none; } /* o maior que cabe entre o título e as setas */
.molho .polaroid { grid-area: 1 / 1; transform-style: preserve-3d; cursor: grab; }
/* Mural: grelha com pioneses nas cores do site */
.modo-mural { overflow-y: auto; background: var(--fundo); }
.modo-mural .modo-topo { background: color-mix(in srgb, var(--fundo) 90%, transparent); }
.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
@media (min-width: 800px) { .mural { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.mural .polaroid { --angulo: 3deg; --dur: 1s; --dir: alternate; --pino: var(--terracota);
  position: relative; padding: .5rem .5rem 0; box-shadow: 0 7px 8px rgb(0 0 0 / .3); transform-origin: center .3rem; transform: rotate(calc(var(--angulo) / 3)); cursor: zoom-in; }
.mural .polaroid span { font-size: 1.25rem; }
.mural .polaroid::after { content: ""; position: absolute; top: .25rem; left: calc(50% - .35rem); width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--pino); box-shadow: inset -.1rem -.1rem .3rem rgb(0 0 0 / .5); filter: drop-shadow(.3rem .15rem .2rem rgb(0 0 0 / .5)); }
.mural .polaroid:nth-child(4n) { --pino: var(--mar); --dur: 1.3s; }
.mural .polaroid:nth-child(4n+2) { --pino: var(--oliva); --dur: 1.1s; }
.mural .polaroid:nth-child(4n+3) { --pino: #d9a521; --dur: 1.5s; }
.mural .polaroid:nth-child(4n+1) { --dur: 1.8s; }
.mural .polaroid:nth-child(3n+1) { --angulo: -3.3deg; }
.mural .polaroid:nth-child(3n+2) { --angulo: 2.4deg; }
.mural .polaroid:nth-child(even) { --dir: alternate-reverse; }
.mural.a-baloicar .polaroid { animation: baloicar var(--dur) ease-in-out calc(-.5 * var(--dur)) 5 var(--dir) both, parar 1.5s ease-in-out calc(4.5 * var(--dur)) 1 both; }
@keyframes baloicar { from { transform: rotate(calc(-1 * var(--angulo))); } to { transform: rotate(var(--angulo)); } }
@keyframes parar { to { transform: rotate(calc(var(--angulo) / 3)); } }
/* Mesa: fotos soltas sobre madeira clara */
.modo-mesa { background: color-mix(in srgb, var(--fundo) 85%, #8a6a4a); touch-action: none; }
.modo-mesa .modo-palco { position: absolute; inset: 0; }
.na-mesa { position: absolute; top: 50%; left: 50%; width: min(240px, 55vw); padding: 6px 6px 0; cursor: grab; touch-action: none; transition: rotate .3s ease; }
@media (prefers-reduced-motion: reduce) { .na-mesa { transition: none; } }
.na-mesa:active { cursor: grabbing; }
.linha-tempo { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0 0 1rem; padding: .25rem .1rem .5rem; scroll-snap-type: x proximity; }
.linha-tempo li { flex: 0 0 auto; scroll-snap-align: center; }
.linha-tempo button { padding: 3px; border: 3px solid transparent; border-radius: 6px; background: var(--cartao); cursor: pointer; }
.linha-tempo button[aria-current] { border-color: var(--terracota); }
.linha-tempo img { display: block; width: 80px; height: 60px; object-fit: cover; border-radius: 3px; }

.pedido { max-width: 640px; margin: 3rem auto 0; padding: 1.5rem; background: var(--cartao); border: 3px double var(--terracota); border-radius: var(--raio); }

/* Mapa: pins, avião, legenda, popups */
.pin span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--terracota); color: #fff; font: 700 .9rem "Atkinson", sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .4);
}
.pin-oculto { opacity: .4; }
.aviao-mapa { color: #333; }
.aviao-mapa span { display: block; }
.legenda { background: #fff; color: #222; padding: .4rem .6rem; border-radius: var(--raio); box-shadow: var(--sombra); font-size: .85rem; }
.legenda-traco { display: inline-block; width: 26px; vertical-align: middle; }
.popup-foto p { margin: .3rem 0 0; }

/* ---------- Comunidade ---------- */
.faixa-versao { background: var(--cartao); border-left: 6px solid var(--mar); padding: .75rem 1rem; border-radius: var(--raio); }
.lado-a-lado, .versoes, .avaliacoes { max-width: 900px; margin: 3rem auto 0; }
.par { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 700px) { .par { grid-template-columns: 1fr 1fr; align-items: start; } }
.par .foto { margin-top: .25rem; }
.par-quem { margin: 0; font: 700 1.3rem var(--titulos); color: var(--terracota); }
.estrelas { color: var(--terracota); letter-spacing: .1em; }
.resumo-aval { font-size: 1.1rem; }
.botao-gosto { min-height: 44px; padding: .4rem 1rem; border: 2px solid var(--terracota); border-radius: 999px; background: var(--cartao); color: var(--texto); font: inherit; cursor: pointer; }
.botao-gosto[aria-pressed="true"] { background: color-mix(in srgb, var(--terracota) 15%, var(--cartao)); }
.form-avaliar { margin: 1rem 0 2rem; }
.escolher-estrelas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; border: 0; padding: 0; margin: 0; }
.escolher-estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escolher-estrelas label { font-size: 2.2rem; line-height: 1; color: var(--linha); cursor: pointer; padding: 0 .1rem; margin: 0; }
.escolher-estrelas input:checked ~ label, .escolher-estrelas label:hover, .escolher-estrelas label:hover ~ label { color: var(--terracota); }
.escolher-estrelas input:focus-visible + label { outline: 3px solid var(--mar); outline-offset: 2px; border-radius: 4px; }
.avaliacao { border-top: 1px dashed var(--linha); padding: .75rem 0; }
.avaliacao p { margin: .25rem 0; }
.avaliacao .comentario { white-space: pre-line; }
.denunciar summary { cursor: pointer; color: var(--suave); font-size: .9rem; display: inline-block; padding: .4rem 0; }
.denunciar form { max-width: 420px; }
.denunciar .den-detalhe { display: grid; gap: .25rem; }
.denunciar form:not(:has(select[name="motivo"] option[value="outro"]:checked)) .den-detalhe { display: none; }
.moderar { max-width: 900px; margin: 2rem auto 0; }
.em-linha { display: inline; }
.leaflet-container .leaflet-marker-pane .pin-foto img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 5px rgb(0 0 0 / .45); }
.mapa-grande { height: 75vh; }
.miniatura-moderacao { border-radius: 4px; vertical-align: middle; }
.lista-moderacao li { margin-bottom: .75rem; }
.zona-privada { margin-top: 3rem; }

/* ---------- Passaporte e medalhas ---------- */
.passaporte { background: var(--cartao); border: 2px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem 1.5rem; box-shadow: var(--sombra); }
.carimbos { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
.carimbo-pais, .carimbo-roteiro {
  display: grid; place-items: center; text-align: center; padding: .6rem .9rem; min-width: 7.5rem; min-height: 5.5rem;
  border: 3px double currentColor; border-radius: 50%; transform: rotate(var(--rodar, -4deg)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
/* Rotações "ao acaso" dos carimbos, por posição (sem style="" por causa da CSP) */
.carimbos li:nth-child(5n+1) { --rodar: -10deg; } .carimbos li:nth-child(5n+2) { --rodar: 6deg; }
.carimbos li:nth-child(5n+3) { --rodar: -3deg; } .carimbos li:nth-child(5n+4) { --rodar: 9deg; } .carimbos li:nth-child(5n) { --rodar: -7deg; }
.carimbo-roteiro { border-radius: 10px; color: var(--mar); max-width: 14rem; text-transform: none; }
.carimbo-roteiro a { color: inherit; text-decoration: none; display: grid; }
.carimbo-cor-0 { color: var(--terracota); } .carimbo-cor-1 { color: var(--mar); } .carimbo-cor-2 { color: var(--oliva); }
.carimbo-data { font-size: .8rem; font-weight: 400; opacity: .85; }
.medalhas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); list-style: none; padding: 0; }
.medalha { position: relative; display: grid; justify-items: center; text-align: center; gap: .2rem; padding: .9rem .5rem; border-radius: var(--raio); border: 2px dashed var(--linha); }
.medalha.ganha { border: 2px solid var(--terracota); background: color-mix(in srgb, var(--terracota) 8%, transparent); }
.medalha.por-ganhar { opacity: .55; filter: grayscale(1); }
.medalha-icone { font-size: 2.4rem; line-height: 1; }
.medalha-icone img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--terracota); }
.medalha small { color: var(--suave); }
.medalha-progresso { font-weight: 700; color: var(--terracota); }
.medalha-prova { font-size: .9rem; }
.md-lugares input, .md-lugares select { width: 100%; min-width: 7rem; }
.medalha.nova { animation: bater .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.medalha-nova { position: absolute; top: -.6rem; right: -.4rem; background: var(--terracota); color: #fff; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; transform: rotate(8deg); }

/* ---------- Quiz, jogo, concurso ---------- */
.quiz-pergunta { border: 0; padding: 0; margin: 0 0 2rem; }
.quiz-pergunta legend { font: 700 1.6rem var(--titulos); margin-bottom: .5rem; }
.quiz-pergunta legend small { display: block; font: .9rem "Atkinson", sans-serif; color: var(--suave); }
.quiz-opcoes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.quiz-opcao { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; min-height: 56px; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--cartao); cursor: pointer; font-weight: 400; margin: 0; }
.quiz-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-opcao:has(input:checked) { border-color: var(--terracota); background: color-mix(in srgb, var(--terracota) 12%, var(--cartao)); }
.quiz-opcao:has(input:focus-visible) { outline: 3px solid var(--mar); outline-offset: 2px; }
.quiz-icone { font-size: 2rem; }
.imagem-partilha { width: 100%; height: auto; border-radius: var(--raio); box-shadow: var(--sombra); margin: 1rem 0; }
.cartao-caixa { background: var(--cartao); border-radius: var(--raio); padding: 1rem 1.25rem; margin-top: 1.5rem; }
.jogo-foto { max-width: 520px; margin: 0 auto 1rem; }
/* Ecrã largo: foto à esquerda, mapa à direita */
@media (min-width: 900px) {
  .jogo { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 0 1.5rem; align-items: start; }
  .jogo-estado, .jogo-relogio, .jogo-acoes, .jogo-resultado { grid-column: 1 / -1; }
  .jogo-foto { margin: 0; }
  .jogo-foto[hidden] + .mapa-envolvente { grid-column: 1 / -1; }
}
.jogo-foto img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.mira { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 400; font: 700 2rem/1 monospace; color: var(--terracota); pointer-events: none; text-shadow: 0 0 3px #fff; }
.jogo-acoes { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.jogo-acoes [hidden] { display: none; } /* o .botao tem display próprio e passava por cima do hidden */
.jogo-resultado { font-size: 1.1rem; }
.jogo-relogio { margin: 0 0 .5rem; font-variant-numeric: tabular-nums; color: var(--suave); }
.jogo-aviso { font-weight: 700; }
.jogo-classificacao { margin-top: 2.5rem; }
.jogo-classificacao .suave { color: var(--suave); }
.jogo-classificacao td:nth-child(n+3), .jogo-classificacao th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.jogo-eu td { font-weight: 700; background: color-mix(in srgb, var(--terracota) 10%, transparent); }
.pin-certo span { background: var(--oliva); }
.grelha-concurso { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cartao-concurso { background: var(--cartao); padding: .6rem; border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-concurso img { width: 100%; height: auto; border-radius: 3px; }
.cartao-concurso p { margin: .4rem 0; }
.votos { font-weight: 700; color: var(--terracota); }
.escolher-foto { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; }
.escolher-foto label { position: relative; margin: 0; cursor: pointer; }
.escolher-foto input { position: absolute; top: .4rem; left: .4rem; width: 1.3rem; height: 1.3rem; }
.escolher-foto img { border: 3px solid transparent; border-radius: 4px; }
.escolher-foto label:has(input:checked) img { border-color: var(--terracota); }
.vencedora { max-width: 720px; margin: 2rem auto; }
.vencedora a.foto-imagem { display: block; } /* a foto leva ao concurso desse mês */
.concurso-anteriores ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; }
.concurso-anteriores li::first-letter { text-transform: uppercase; }
.cartoes-brincar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cartao-brincar { display: grid; gap: .3rem; padding: 1.1rem; border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); transition: transform .2s; }
.cartao-brincar:hover { transform: rotate(-1deg) translateY(-3px); }
.cartao-brincar span { font-size: 2.2rem; }
.cartao-brincar small { color: var(--suave); }
.newsletter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; max-width: 720px; margin: 0 auto 1.5rem; }
.newsletter p { flex-basis: 100%; margin: 0; }
.newsletter input[type="email"] { width: auto; flex: 1 1 220px; }
.newsletter small { flex-basis: 100%; }

/* ---------- Editor ---------- */
.zona-largar {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2rem 1rem; text-align: center;
  border: 3px dashed var(--mar); border-radius: var(--raio); cursor: pointer;
}
.zona-largar.ativo, .zona-largar:focus-within { background: color-mix(in srgb, var(--mar) 12%, transparent); }
.zona-largar-icone { font-size: 2.5rem; }
.largar-estado:not(:empty) { font-weight: 700; color: var(--mar); }
.zona-miniaturas { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.zona-miniaturas img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.pendente input:not([type]) { margin-top: .3rem; }
.coords { font-size: .85rem; overflow-wrap: anywhere; }
.percurso-gpx { margin-top: 1.25rem; }
.percurso-gpx h3 { margin-bottom: .25rem; }
.percurso-gpx label:focus-within { outline: 2px solid var(--mar); outline-offset: 2px; }
.lista-pendentes, .lista-fotos { list-style: none; padding: 0; }
.pendente, .foto-editor { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--linha); }
.pendente > div, .foto-editor .campos { flex: 1 1 240px; }
.pendente p { margin: .3rem 0; }
.a-aguardar { outline: 3px solid var(--terracota); }
/* Cortar e enquadrar (public/js/recortar.js): o tamanho da moldura e a posição da foto vêm do JavaScript */
.foto-coluna { display: flex; flex-direction: column; gap: .4rem; width: 160px; }
.botao-recortar { width: 100%; white-space: normal; }
.aguarela-atalhos { display: grid; gap: .4rem; }
.aguarela-atalhos .botao { width: 100%; white-space: normal; text-align: center; }
.recorte { width: min(680px, calc(100vw - 2rem)); border: 0; border-radius: var(--raio); padding: 1rem 1.25rem; background: var(--fundo); color: var(--texto); }
.recorte::backdrop { background: rgb(0 0 0 / .6); }
.recorte h2 { margin: 0 0 .25rem; }
.recorte-ajuda { margin: 0 0 .5rem; font-size: .9rem; }
.recorte-formatos { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .6rem; }
.recorte-formatos [aria-pressed="true"] { font-weight: 700; text-decoration-thickness: 3px; }
.recorte-moldura { position: relative; margin: 0 auto; overflow: hidden; background: #222; cursor: grab; touch-action: none; user-select: none; }
.recorte-moldura:active { cursor: grabbing; }
.recorte-moldura:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; }
.recorte-moldura img { position: absolute; left: 0; top: 0; max-width: none; height: auto; pointer-events: none; }
.recorte-zoom { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; }
.recorte-zoom input { flex: 1; }
.recorte-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.foto-previa { width: 160px; margin: 0; font-size: .45rem; }
.foto-editor .foto-previa img { border-radius: 0; }
.previsao { max-width: 420px; }
.visual-foto { margin-top: .5rem; }
.visual-foto summary { cursor: pointer; color: var(--mar); }
.foto-editor.escondida .foto-previa { opacity: .4; }
.opcoes-foto { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: .5rem; }
.opcoes-foto .ordem { display: flex; gap: .4rem; align-items: center; font-weight: 400; margin: 0; }
.opcoes-foto .ordem input { width: 6rem; }
.troco-editor { padding: .5rem 0 .5rem 1rem; border-left: 4px dashed var(--linha); }
.troco-editor select { width: auto; display: inline-block; }
.separador-dia h3 { margin-bottom: 0; }
.zona-perigo { margin-top: 3rem; padding-top: 1rem; border-top: 2px dashed var(--linha); }

/* ---------- Tabelas e painel ---------- */
.tabela { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tabela th, .tabela td { padding: .5rem .75rem; border-bottom: 1px solid var(--linha); text-align: left; }
.separadores { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
.separadores [aria-current] { font-weight: 700; color: var(--terracota); }
/* Painel → Pessoas e bloqueios */
.ps-caixa { background: var(--cartao); border-radius: var(--raio); padding: 1rem 1.25rem; margin: 1rem 0 2rem; }
.ps-caixa h2 { margin-top: 0; flex-basis: 100%; }
.ps-opcao { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; font-weight: 400; }
.ps-opcao input { width: auto; margin-top: .35rem; }
.ps-opcao small { display: block; color: var(--suave); }
.ps-filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.ps-filtros input { flex: 1; min-width: 220px; width: auto; }
.ps-filtros select { width: auto; }
.ps-tabela td { vertical-align: middle; }
.ps-tabela small { color: var(--suave); }
.ps-etiqueta { display: inline-block; font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap; margin: .1rem .2rem .1rem 0; }
.ps-cliente { background: color-mix(in srgb, var(--oliva) 25%, transparent); }
.ps-pode { background: color-mix(in srgb, var(--mar) 22%, transparent); }
.ps-bloq { background: color-mix(in srgb, #b3261e 22%, transparent); }
.ps-acoes { display: flex; gap: .4rem .9rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.ps-acoes form { display: inline; margin: 0; }
.ps-acoes button { background: none; border: 0; padding: 0; color: var(--mar); text-decoration: underline; cursor: pointer; font: inherit; }
.ps-acoes .perigo { color: #b3261e; }
[data-tema="escuro"] .ps-acoes .perigo { color: #ff8a80; }
.ps-linha-bloq { opacity: .65; }
.ps-form { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: end; }
.ps-form label { display: grid; gap: .25rem; font-weight: 700; }
.ps-form input, .ps-form select { width: auto; }
.ps-form .crescer { flex: 1; min-width: 240px; }
.ps-form .crescer input { width: 100%; }
/* Painel → Medalhas */
.md-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.md-grelha { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); list-style: none; padding: 0; }
.md-cartao { display: grid; grid-template-columns: 64px 1fr; gap: .2rem .8rem; align-items: center; padding: .8rem; background: var(--cartao); border-radius: var(--raio); border-left: 6px solid var(--terracota); }
.md-cartao .medalha-icone { grid-row: span 3; justify-self: center; }
.md-cartao small { color: var(--suave); }
.md-cartao.desligada { border-left-color: var(--linha); opacity: .6; }
.md-acoes { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; font-size: .95rem; }
/* Painel → Votos do concurso: prémio */
.premio-form { display: grid; gap: .6rem; max-width: 40rem; }
.premio-form label:not(.premio-ativo) { display: grid; gap: .2rem; font-weight: 700; }
.premio-form input:not([type="checkbox"]) { width: 100%; }
.premio-ativo { display: flex; gap: .5rem; align-items: center; font-weight: 700; }
/* Painel → Ícones */
.ic-grelha { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); list-style: none; padding: 0; }
.ic-grelha-pequena { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ic-grelha-emojis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ic-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .75rem; border: 1px solid var(--linha); border-radius: var(--raio); }
.ic-cartao small { color: var(--suave); }
.ic-previa { font-size: 3rem; line-height: 1; color: var(--terracota); }
.ic-previa-animacao svg { width: 48px; height: 48px; color: var(--texto); }
.ic-previa-animacao .ico { width: 48px; height: 48px; color: var(--texto); }
.ic-emoji { font-size: 2.2rem; }
.ic-estado { font-size: .85rem; }
/* Painel → Selo e postal (moldura Postal) */
.postal-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 1.5rem; align-items: start; }
.postal-uploads { grid-row: 1; grid-column: 1; }
.postal-exemplo { grid-column: 2; position: sticky; top: 1rem; }
@media (max-width: 800px) { .postal-grelha { grid-template-columns: 1fr; } .postal-uploads, .postal-exemplo { grid-column: 1; grid-row: auto; position: static; } }
.pp-ativo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.pp-img { width: 120px; height: 120px; object-fit: contain; background: repeating-conic-gradient(#0000000d 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.pp-resumo { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.pp-resumo li { display: grid; justify-items: start; gap: .4rem; }
.pp-cartao { position: relative; display: inline-block; width: 12rem; height: 4.5rem; }
.pp-original { display: inline-grid; place-items: center; color: #fff; font-size: 1.6rem; }
.pp-original-selo { width: 2.6em; height: 3.1em; background: var(--terracota); outline: 3px dashed #fffaf0; outline-offset: -6px; }
.pp-original-carimbo { width: 3.4em; height: 3.4em; border: 4px double rgb(181 83 42 / .9); border-radius: 50%; color: rgb(181 83 42 / .95); }
.ic-emoji-form { display: flex; gap: .3rem; align-items: center; }
.ic-emoji-form input[name="emoji"] { width: 3.2em; font-size: 1.2rem; text-align: center; }
.md-etiqueta { font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--mar) 20%, transparent); }
.md-form { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
@media (max-width: 800px) { .md-form { grid-template-columns: 1fr; } }
.md-form fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .5rem 1rem 1rem; margin: 0 0 1rem; }
.md-form legend { font-weight: 700; padding: 0 .4rem; }
.md-linguas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 800px) { .md-linguas { grid-template-columns: 1fr; } }
.md-linguas label, .md-campos label { display: grid; gap: .25rem; font-weight: 700; }
.md-linguas small { font-weight: 400; color: var(--suave); }
.md-icone-escolha { display: flex; gap: 1rem 1.5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.md-emojis { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.md-emojis button { font-size: 1.4rem; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--linha); background: var(--fundo); cursor: pointer; }
.md-emojis input { width: auto; }
.md-upload { display: flex; gap: .75rem; align-items: center; }
.md-upload img[hidden] { display: none; }
.md-upload img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--terracota); }
.md-regra { margin-top: .75rem; }
.md-regra[hidden], .md-campos [hidden], [data-so][hidden] { display: none; }
.md-campos { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: end; margin: .5rem 0; }
.md-campos input, .md-campos select { width: auto; max-width: 100%; }
.md-campos .crescer { flex: 1; }
.md-pesquisa { display: flex; gap: .5rem; }
.md-pesquisa input { flex: 1; }
.md-numero { width: 7rem; }
.md-campos label.caixa { display: flex; font-weight: 400; }
.md-resultados { list-style: none; margin: .25rem 0 .5rem; padding: .5rem .75rem; background: var(--cartao); border-radius: var(--raio); }
.md-resultados li { padding: .2rem 0; }
.md-resultados .botao-ligacao { text-align: left; }
.md-mapa { height: 300px; border-radius: var(--raio); margin: .5rem 0; }
/* Painel → Jogo */
.jogo-admin-fotos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.jogo-admin-fotos li, .jogo-admin-fotos label { display: grid; gap: .25rem; align-content: start; }
.jogo-admin-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.jogo-admin-fotos label { font-weight: 400; cursor: pointer; }
.jogo-admin-mapa { flex-basis: 100%; }
.md-previa { position: sticky; top: 1rem; }
.md-previa .medalhas { grid-template-columns: 1fr; }
.md-ajuda { font-size: .9rem; color: var(--suave); margin: .25rem 0; }
.md-apagar { margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed var(--linha); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.cartao-pedido { background: var(--cartao); padding: 1rem; border-radius: var(--raio); margin-bottom: 1rem; border-left: 6px solid var(--linha); }
.estado-novo { border-left-color: var(--terracota); }
.estado-contactado { border-left-color: var(--mar); }
.estado-fechado { border-left-color: var(--oliva); }
.cartao-pedido .mensagem { white-space: pre-line; }
.linha-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.linha-form label { display: flex; flex-direction: column; }
.linha-form .crescer { flex: 1 1 250px; }
.texto-legal h2 { font-size: 1.8rem; }

/* Menos movimento para quem o pede */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .postal, .postal:nth-child(even), .foto.moldura-polaroid { transform: none; }
}

/* Botões de subir e descer (public/js/rolar.js) */
.rodape { padding-bottom: 6rem; } /* espaço para os botões não taparem o fim */
.rolar { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; }
.rolar[hidden] { display: none; }
.rolar button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s, transform .2s, visibility .2s, border-color .15s;
}
.rolar button.visivel { opacity: 1; visibility: visible; transform: none; }
.rolar button:hover, .rolar button:focus-visible { border-color: var(--terracota); color: var(--terracota); }
@media (prefers-reduced-motion: reduce) { .rolar button { transition: none; } }
/* Painel → Selo das fotos */
.selo-form .caixa { display: block; margin: .6rem 0; }
.selo-exemplos { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
.selo-exemplos img { width: 100%; height: auto; }
@media (max-width: 600px) { .selo-exemplos { grid-template-columns: 1fr; } }
.aguarela-foto { display: grid; gap: .3rem; margin-top: .8rem; justify-items: start; }
.aguarela-previa { width: 10rem; height: auto; border-radius: 4px; box-shadow: var(--sombra); }
.aguarela-botoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Painel: atalhos em cartões, por tema */
.painel-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.painel-grupo { background: var(--cartao); border-radius: var(--raio); padding: .9rem 1rem; box-shadow: var(--sombra); }
.painel-grupo h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.painel-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.painel-grupo a { display: grid; padding: .45rem .6rem; border-radius: 8px; color: var(--texto); text-decoration: none; }
.painel-grupo a:hover, .painel-grupo a:focus-visible { background: color-mix(in srgb, var(--mar) 12%, transparent); }
.painel-grupo a strong { color: var(--mar); }
.painel-grupo small { color: var(--suave); }
.painel-aviso { justify-self: start; margin: .15rem 0; padding: 0 .5rem; border-radius: 999px; background: var(--terracota); color: #fff; font-size: .8rem; font-weight: 700; }
.painel-saltar { font-size: .9rem; color: var(--suave); }
/* "Editar este roteiro" (só o autor e a admin): pílula com contorno, sem sublinhado */
.editar-roteiro { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .95rem; border: 1.5px solid var(--mar); border-radius: 999px;
  color: var(--mar); font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .2s, color .2s; }
.editar-roteiro:hover, .editar-roteiro:focus-visible { background: var(--mar); color: var(--fundo); } /* --fundo: lê-se nos dois temas */
@media (prefers-reduced-motion: reduce) { .editar-roteiro { transition: none; } }
.aguarela-ver { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; }
.aguarela-ver:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
/* Novidades do site (A minha conta e /conta/novidades) */
.novidades-resumo { background: var(--cartao); border-radius: var(--raio); padding: .9rem 1.2rem; margin: 1.5rem 0; }
.novidades-resumo h2 small, .novidades-dia h2 { font-size: 1rem; color: var(--suave); }
.novidades-resumo h2 small { font-family: "Atkinson", sans-serif; margin-left: .4rem; }
.novidades-dia h2 { font-family: "Atkinson", sans-serif; font-weight: 700; margin: 1.6rem 0 .4rem; padding-bottom: .3rem; border-bottom: 2px solid var(--terracota); }
.novidades-resumo ul, .novidades-dia ul { margin: .4rem 0; padding-left: 1.2rem; }
.novidades-resumo li, .novidades-dia li { margin: .35rem 0; }