/* Calendário FPT — aparência. Telemóvel primeiro, legível ao sol, uma só cor de acção. */

/* Paletas (ver docs/design/ensaios-cor.html). Por omissão, a nacional: verde nos botões e a
   faixa verde e vermelha no topo. data-cores="clube"|"alvo" no <html> troca para as do Clube
   Tiro Torres Vedras; data-tema="claro"|"escuro" fixa o tema, sem ele segue o sistema.
   A ordem dos blocos conta: os escuros de cada paleta vêm depois dos claros. */

:root {
  --fundo: #f6f6f3;
  --superficie: #ffffff;
  --texto: #141414;
  --suave: #4d4d48;
  --linha: #d8d8d0;
  --accao: #1f5c3a;
  --accao-texto: #ffffff;
  --accao-fundo: #e5efe8;
  --escolhido-borda: #a9c6b2;
  --cartao-fundo: #edf4ef;
  --cartao-borda: #c9dccf;
  --regua: #141414;
  --erro: #a3201a;
  --sombra: rgb(0 0 0 / 0.18);
  --selo: var(--accao);
  --selo-texto: var(--accao-texto);
  --faixa: linear-gradient(90deg, #1f5c3a 0 40%, #c8102e 40% 100%);
  --largura: 720px;
  --margem: max(16px, calc((100% - var(--largura)) / 2));
  --raio: 12px;
  color-scheme: light dark;
}
:root[data-tema="claro"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #111212;
    --superficie: #1b1c1c;
    --texto: #f2f2ee;
    --suave: #b6b6af;
    --linha: #36383a;
    --accao: #84c99e;
    --accao-texto: #0b1a11;
    --accao-fundo: #1a3326;
    --escolhido-borda: #3a6a4c;
    --cartao-fundo: #172a20;
    --cartao-borda: #2d4a39;
    --regua: #f2f2ee;
    --erro: #ffb4a9;
    --sombra: rgb(0 0 0 / 0.6);
    --faixa: linear-gradient(90deg, #2f7a4e 0 40%, #b3263a 40% 100%);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #111212;
  --superficie: #1b1c1c;
  --texto: #f2f2ee;
  --suave: #b6b6af;
  --linha: #36383a;
  --accao: #84c99e;
  --accao-texto: #0b1a11;
  --accao-fundo: #1a3326;
  --escolhido-borda: #3a6a4c;
  --cartao-fundo: #172a20;
  --cartao-borda: #2d4a39;
  --regua: #f2f2ee;
  --erro: #ffb4a9;
  --sombra: rgb(0 0 0 / 0.6);
  --faixa: linear-gradient(90deg, #2f7a4e 0 40%, #b3263a 40% 100%);
  color-scheme: dark;
}

:root[data-cores="clube"] {
  --fundo: #f3f6ef;
  --superficie: #ffffff;
  --texto: #16200d;
  --suave: #4c5644;
  --linha: #d4dccb;
  --accao: #234f00;
  --accao-texto: #ffffff;
  --accao-fundo: #e4edd8;
  --escolhido-borda: #b7cba3;
  --cartao-fundo: #eef3e6;
  --cartao-borda: #c8d7b6;
  --regua: #234f00;
  --selo: #ffd803;
  --selo-texto: #111111;
}
@media (prefers-color-scheme: dark) {
  :root[data-cores="clube"]:not([data-tema="claro"]) {
    --fundo: #0f130c;
    --superficie: #181d14;
    --texto: #eef2e8;
    --suave: #aeb8a4;
    --linha: #333b2c;
    --accao: #9ccc6e;
    --accao-texto: #102000;
    --accao-fundo: #233418;
    --escolhido-borda: #3f5a2c;
    --cartao-fundo: #1b2615;
    --cartao-borda: #384d2b;
    --regua: #9ccc6e;
    --selo: #ffd803;
    --selo-texto: #111111;
  }
}
:root[data-cores="clube"][data-tema="escuro"] {
  --fundo: #0f130c;
  --superficie: #181d14;
  --texto: #eef2e8;
  --suave: #aeb8a4;
  --linha: #333b2c;
  --accao: #9ccc6e;
  --accao-texto: #102000;
  --accao-fundo: #233418;
  --escolhido-borda: #3f5a2c;
  --cartao-fundo: #1b2615;
  --cartao-borda: #384d2b;
  --regua: #9ccc6e;
  --selo: #ffd803;
  --selo-texto: #111111;
}

:root[data-cores="alvo"] {
  --fundo: #f6f6f3;
  --superficie: #ffffff;
  --texto: #141414;
  --suave: #4d4d48;
  --linha: #d8d8d0;
  --accao: #234f00;
  --accao-texto: #ffffff;
  --accao-fundo: #fff6c2;
  --escolhido-borda: #ecd36a;
  --cartao-fundo: #fffae0;
  --cartao-borda: #eedc8f;
  --regua: #ffd803;
  --selo: #111111;
  --selo-texto: #ffd803;
}
@media (prefers-color-scheme: dark) {
  :root[data-cores="alvo"]:not([data-tema="claro"]) {
    --fundo: #111211;
    --superficie: #1b1c1b;
    --texto: #f2f2ee;
    --suave: #b6b6af;
    --linha: #36383a;
    --accao: #9ccc6e;
    --accao-texto: #102000;
    --accao-fundo: #3a3410;
    --escolhido-borda: #6b5d1c;
    --cartao-fundo: #26230f;
    --cartao-borda: #4f4720;
    --regua: #ffd803;
    --selo: #ffd803;
    --selo-texto: #111111;
  }
}
:root[data-cores="alvo"][data-tema="escuro"] {
  --fundo: #111211;
  --superficie: #1b1c1b;
  --texto: #f2f2ee;
  --suave: #b6b6af;
  --linha: #36383a;
  --accao: #9ccc6e;
  --accao-texto: #102000;
  --accao-fundo: #3a3410;
  --escolhido-borda: #6b5d1c;
  --cartao-fundo: #26230f;
  --cartao-borda: #4f4720;
  --regua: #ffd803;
  --selo: #ffd803;
  --selo-texto: #111111;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.45;
}

body:has(dialog[open]) { overflow: hidden; }

h1, h2, p { margin: 0; }

a { color: var(--accao); }

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

.escondido {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

[hidden] { display: none !important; }

/* ---------- cabeçalho ---------- */

/* A faixa nacional: 4px no topo, verde 2/5 e vermelho 3/5, como a bandeira. */
.topo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--faixa);
}
.topo {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  padding: 20px var(--margem) 12px;
}
.topo > * { grid-column: 1 / -1; }
.topo > h1 { grid-column: 1; grid-row: 1; }

/* Aparência: um botão que roda auto → claro → escuro. O desenho lê o data-tema do <html>:
   sem ele (auto) é um círculo meio cheio; claro é o sol; escuro, a lua (a máscara morde o círculo). */
.tema {
  grid-column: 2; grid-row: 1;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--suave); background: transparent; cursor: pointer;
  transition: color 0.2s, background 0.2s;
  view-transition-name: tema;
}
.tema:hover { color: var(--texto); background: var(--accao-fundo); }
.tema svg { overflow: visible; }
.tema svg * {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.4, 1), opacity 0.3s;
}
.tema .raios { transform-box: view-box; transform-origin: 12px 12px; transform: rotate(-90deg) scale(0); opacity: 0; }
.tema .mordida { transform: translate(10px, -10px); }
:root[data-tema="claro"] .tema .raios { transform: none; opacity: 1; }
:root[data-tema="claro"] .tema .nucleo { transform: scale(0.55); }
:root[data-tema="claro"] .tema .metade,
:root[data-tema="escuro"] .tema .metade { opacity: 0; }
:root[data-tema="escuro"] .tema .raios { transform: rotate(90deg) scale(0); }
:root[data-tema="escuro"] .tema .mordida { transform: none; }

/* Troca de cores: um fade curto da página inteira; o botão fica de fora para se ver a animação. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
::view-transition-old(tema) { display: none; }
::view-transition-new(tema) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tema, .tema svg * { transition: none; }
}
.topo h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.topo p { margin-top: 4px; color: var(--suave); font-size: 0.95rem; }
.topo .topo-versao { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* Separador só quando há versão; se a linha quebrar, o "·" fica no fim da primeira. */
#topo-versao:not(:empty)::after { content: " · "; }
.info { color: var(--accao); font-weight: 600; text-decoration: none; white-space: nowrap; }
.info:hover { text-decoration: underline; }

/* ---------- barra de filtros ---------- */

.barra {
  position: sticky; top: 0; z-index: 5;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  padding: 8px var(--margem);
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 0.2s;
}
/* Colada ao topo: uma sombra leve, como se a lista deslizasse por baixo. */
.barra.colada { box-shadow: 0 8px 16px -8px var(--sombra); }
/* Escolha de cores no rodapé: botões com cara de link; o activo fica a negrito. */
.cores { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; }
.cores button {
  font: inherit; color: var(--accao); background: none; border: 0; padding: 2px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.cores button[aria-pressed="true"] { color: var(--texto); font-weight: 600; text-decoration: none; cursor: default; }
/* O aviso destaca-se pela tipografia, sem caixa: cor do texto, "Aviso." a negrito e um traço
   por cima. Fica entre as notas e a versão. */
.rodape-aviso {
  color: var(--texto);
  padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--linha);
}

.barra-linha:first-child { display: flex; align-items: center; gap: 12px; }

.pesquisa {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 0 14px;
  font: inherit; color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: var(--raio);
}
.pesquisa::placeholder { color: var(--suave); }

.barra-desliza {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  /* O overflow corta também na vertical: 6px de folga para as bordas e o anel de foco
     (3px + 2px), compensados pela margem negativa. */
  margin: -6px -16px; padding: 6px 16px;
}
.barra-desliza::-webkit-scrollbar { display: none; }
.barra-desliza > * { flex: 0 0 auto; }

/* Num ecrã largo cabe tudo: quebra a linha em vez de deslizar. */
@media (min-width: 640px) {
  .barra-desliza { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

.filtro, .escolha, .etiqueta, .campo-dia {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  font: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--texto); background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}

.filtro.activo { border-color: var(--escolhido-borda); background: var(--accao-fundo); }

.contagem {
  min-width: 1.4em; height: 1.4em; padding: 0 0.35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: var(--selo); color: var(--selo-texto);
}

.campo-dia { font-weight: 500; padding-right: 6px; }
.campo-dia input {
  min-height: 36px; font: inherit; font-size: 0.95rem;
  color: var(--texto); background: transparent; border: 0;
}
/* Switch: a checkbox desenhada como interruptor. */
.campo-anteriores {
  min-height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.campo-anteriores input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: var(--suave); cursor: pointer; transition: background 0.15s;
}
.campo-anteriores input::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.15s;
}
.campo-anteriores input:checked { background: var(--accao); }
.campo-anteriores input:checked::before { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
  .campo-anteriores input, .campo-anteriores input::before { transition: none; }
}

.etiquetas {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.etiqueta { background: var(--accao-fundo); border-color: var(--escolhido-borda); padding-right: 10px; }
.etiqueta-x { font-size: 0.85em; color: var(--accao); padding: 0 4px; }

/* ---------- folha de escolha ---------- */

.folha {
  border: 0; padding: 0;
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh;
  border-radius: 18px 18px 0 0;
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 -8px 32px rgb(0 0 0 / 0.2);
}
.folha::backdrop { background: rgb(0 0 0 / 0.45); }

.folha-dentro {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 85vh;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom));
}
.folha-titulo { font-size: 1.15rem; }
.folha-titulo:focus { outline: none; }
/* Padding que caiba o anel de foco (3px + 2px), senão o overflow corta-o. */
.folha-valores {
  display: flex; flex-wrap: wrap; gap: 8px;
  overflow-y: auto; padding: 6px; margin: -6px;
}

.escolha[aria-pressed="true"] {
  background: var(--accao); border-color: var(--accao); color: var(--accao-texto);
}
.escolha[aria-pressed="true"]::before { content: "✓"; }

.folha-ver { width: 100%; }

@media (min-width: 640px) {
  .folha {
    margin: auto; width: min(560px, calc(100% - 32px));
    border-radius: 18px;
    box-shadow: 0 12px 48px rgb(0 0 0 / 0.25);
  }
  .folha-dentro { padding: 22px; }
}

/* ---------- botões ---------- */

.botao {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px;
  font: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--texto); background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.botao { gap: 8px; }
.icone { flex: 0 0 auto; }
.botao-principal { background: var(--accao); border-color: var(--accao); color: var(--accao-texto); }
.botao-texto { background: transparent; border-color: transparent; color: var(--accao); padding: 0 10px; }
.botao:disabled { opacity: 0.55; cursor: default; }

/* ---------- cartão ---------- */

.conteudo { padding: 16px var(--margem) 8px; }

.cartao-zona { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cartao-zona:empty { display: none; }

/* O cartão de subscrever tem um tom leve da paleta, para se destacar sem gritar. */
.cartao {
  background: var(--cartao-fundo);
  border: 1.5px solid var(--cartao-borda); border-radius: var(--raio);
  padding: 16px;
  --vao: 10px;
  display: flex; flex-direction: column; gap: var(--vao);
}
.cartao-titulo { font-size: 1.1rem; font-weight: 700; }
.cartao-n { color: var(--suave); font-size: 0.95rem; margin-top: -6px; }

.cartao-discreto {
  background: transparent; border-style: dashed; border-color: var(--linha); padding: 12px 14px; --vao: 8px;
}
.cartao-discreto .cartao-titulo { font-size: 1rem; font-weight: 400; }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 479px) {
  /* No telemóvel o Subscrever ocupa a linha toda; o resto fica por baixo. */
  .acoes .botao-principal { flex: 1 1 100%; }
}

/* "Como fazer" abre e fecha a deslizar. Fechado, a margem negativa anula o vão do cartão e
   o visibility tira-o do teclado e dos leitores de ecrã (só depois de acabar de fechar). */
.como {
  display: grid; grid-template-rows: 0fr;
  margin-top: calc(-1 * var(--vao, 0px));
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s 0.25s;
}
.como.aberto {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 0.25s ease, visibility 0s;
}
/* O padding de 6px dá espaço ao anel de foco do endereço, que o overflow cortaria. */
.como-dentro { overflow: hidden; min-height: 0; padding: 0 6px 6px; margin: 0 -6px -6px; }
.como-corpo {
  margin-top: var(--vao, 0px);
  border-top: 1px solid var(--linha); padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.95rem;
}
@media (prefers-reduced-motion: reduce) { .como, .como.aberto { transition: none; } }
.como-url { color: var(--suave); }
.url {
  width: 100%; min-height: 44px; padding: 0 12px;
  font: 0.85rem ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--texto); background: var(--fundo);
  border: 1.5px solid var(--linha); border-radius: 10px;
}

.compacta { list-style: none; margin: 0; padding: 0; }
.compacta li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--linha);
}
.compacta-nome { font-weight: 600; flex: 1 1 12rem; }
.compacta-n { font-weight: 400; color: var(--suave); }

.erro { color: var(--erro); font-weight: 600; }

/* ---------- agenda ---------- */

/* A agenda é uma folha de papel sobre o fundo. */
.agenda {
  margin-top: 8px; padding: 16px 16px 4px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px -10px var(--sombra);
}
@media (min-width: 640px) { .agenda { padding: 22px 24px 8px; } }
.mes:last-child .prova:last-child { border-bottom: 0; }

.mes + .mes { margin-top: 24px; }
.mes-titulo {
  font-size: 1.15rem; font-weight: 700;
  padding-bottom: 6px; border-bottom: 2px solid var(--regua);
}

.provas { list-style: none; margin: 0; padding: 0; }
.prova {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.prova-data { font-weight: 700; font-variant-numeric: tabular-nums; }
.prova-nome { font-weight: 600; }
.prova-meta { color: var(--suave); font-size: 0.92rem; margin-top: 2px; }
.prova.passada { opacity: 0.6; }

.total { margin: 12px 0 0; color: var(--suave); font-size: 0.92rem; }
.aviso { padding: 24px 0; color: var(--suave); }
.aviso.erro { color: var(--erro); }

/* ---------- rodapé ---------- */

.rodape {
  margin-top: 32px; padding: 20px var(--margem) 40px;
  border-top: 1px solid var(--linha);
  color: var(--suave); font-size: 0.88rem;
  display: flex; flex-direction: column; gap: 8px;
}
/* As linhas de referência do fim (versão, arquivo, cores): ao centro, com um traço por cima
   como o do aviso. */
.rodape-fim {
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  border-top: 1px solid var(--linha); padding-top: 12px; margin-top: 4px;
}