/* AS PÁGINAS DE PARTILHA: a família, a equipa, o clube, o torneio e o jogo
 * ao vivo (este com a sua folha por cima, ao-vivo.css).
 *
 * São as páginas que saem do clube para fora, para o telemóvel de um pai ou
 * de um avô numa bancada. Quem as recebe não conhece a app, nem tem de a
 * conhecer: a cara que vê é a do CLUBE.
 *
 * O DESENHO COMUM (2026-10-12, pedido do Miguel: "mais bonitos, com as cores
 * e logos do clube, com os patrocínios do clube, o branding da PlayMinder"):
 *   1. em cima, a FAIXA DO CLUBE: a cor principal, o logótipo num azulejo
 *      branco e, a fechar, uma risca na cor secundária (como o equipamento);
 *   2. o conteúdo de cada página, em cartões, pensado para o telemóvel;
 *   3. os PATROCINADORES do clube, em azulejos brancos (um logótipo feito para
 *      fundo branco desaparecia no modo escuro);
 *   4. a ASSINATURA discreta "através do PlayMinder", com o logótipo e a risca
 *      verde-azul da marca. O clube é a estrela; a PlayMinder assina em baixo.
 *
 * AS CORES DO CLUBE NUNCA PINTAM LETRA CRUA. O partilha.js calcula, para cada
 * fundo, a versão da cor que se lê (AA): a letra por cima da cor (--club-ink,
 * --club-2-ink), a cor como texto nos cartões (--club-texto), a cor como
 * traço e símbolo (--club-tinta, 3:1) e as iniciais do emblema. Os testes
 * (tests/corDoClubeNasPartilhas e tests/partilhasComACaraDoClube) medem-no.
 *
 * O TEXTO GRANDE: tudo em rem. A página segue a letra que a pessoa escolheu
 * no browser e, no iPhone, o tamanho do texto do sistema (-apple-system-body).
 *
 * O TEMA segue o telemóvel: claro por omissão (lê-se ao sol, num campo, ao
 * sábado de manhã), escuro se o telemóvel o pedir (uma bancada à noite).
 *
 * As letras da marca (Barlow nos títulos, Inter no texto) vêm do próprio
 * site, com font-display: swap: a CSP não deixa ir ao Google, e cem pais a
 * abrir o mesmo jogo não esperam por uma letra para ver o resultado. */

@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  /* A base é a da marca PlayMinder (docs/marca/LEIA-ME.md): o cinzento claro
     de fundo, o azul noite no texto, o cinzento de texto secundário. */
  --bg: #f4f6f8;
  --card: #ffffff;
  --card-2: #eef2f5;
  --line: #dde4ea;
  --ink: #0d1b2a;
  --muted: #425466;
  --faint: #5f6f80;
  --club: #1f7a4d;
  --club-2: #0d1b2a;
  --club-ink: #ffffff;
  --club-2-ink: #ffffff;
  /* A cor do clube quando pinta LETRAS ou TRAÇOS: a mesma cor, ajustada pelo
     partilha.js só o que for preciso para se ler no fundo onde cai. Os valores
     daqui são os do verde de omissão. */
  --club-emblema: #1f7a4d;
  --club-tinta-claro: #1f7a4d;
  --club-tinta-escuro: #3f9c6d;
  --club-texto-claro: #1f7a4d;
  --club-texto-escuro: #5fbf8d;
  --club-tinta: var(--club-tinta-claro);
  --club-texto: var(--club-texto-claro);
  --ok: #157a4c;
  --live: #c62f2c;
  --pm-verde: #00c896;
  --pm-azul: #0097e6;
  --display: 'Barlow', 'Helvetica Neue', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --raio: 1rem;
  --sombra: 0 1px 2px rgba(13, 27, 42, 0.05), 0 4px 16px rgba(13, 27, 42, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1520;
    --card: #132131;
    --card-2: #1b2d40;
    --line: #26394f;
    --ink: #eaf1f7;
    --muted: #b0bfcd;
    --faint: #8fa1b3;
    --ok: #34d399;
    --live: #f87171;
    --sombra: none;
    --club-tinta: var(--club-tinta-escuro);
    --club-texto: var(--club-texto-escuro);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
/* No iPhone, o tamanho do texto escolhido nas definições: -apple-system-body
   dá à raiz a letra do sistema, e tudo o que está em rem cresce com ela. Só
   em ecrãs de toque, porque no Mac a letra do sistema é a de 13 px. */
@supports (font: -apple-system-body) {
  @media (hover: none) and (pointer: coarse) {
    html { font: -apple-system-body; }
  }
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }

/* ---------------------------------------------------------------------------
   1. A FAIXA DO CLUBE */
.band {
  position: relative;
  background: var(--club);
  color: var(--club-ink);
  padding: calc(env(safe-area-inset-top) + 1.25rem) 1rem 0;
}
.band .in {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: 1.25rem;
}
.crest {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: #ffffff;
  /* Um clube de branco tinha o azulejo branco sobre a faixa branca: o
     contorno fino desenha-o em qualquer cor. */
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.12), 0 2px 8px rgba(13, 27, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crest img { width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; }
.crest.mono {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--club-emblema);
}
.band .quem { min-width: 0; flex: 1; }
.band .tag {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.band .club {
  margin: 0.125rem 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.band .destaque { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
/* A risca do equipamento: a cor secundária, com um fio da principal. Não leva
   texto por cima, por isso pode ser a cor tal e qual. */
.band .riscas {
  height: 0.5rem;
  margin: 0 -1rem;
  background: linear-gradient(90deg, var(--club-2) 0 72%, var(--club) 72% 76%, var(--club-2) 76% 100%);
  box-shadow: inset 0 -1px 0 rgba(13, 27, 42, 0.08);
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 0.875rem 2.5rem;
}

/* ---------------------------------------------------------------------------
   2. OS CARTÕES */

/* O CARTÃO DE ABERTURA: quem é (o atleta, a equipa, o torneio). */
.hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.hero .foto {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1rem;
  object-fit: cover;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero .foto img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
.hero .foto.mono {
  background: var(--club);
  color: var(--club-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
}
.hero .foto svg { width: 2.75rem; height: 2.75rem; color: var(--club-tinta); }
/* O nome ao lado da fotografia, e as etiquetas por baixo, a toda a largura:
   com o texto grande, ao lado da fotografia cada etiqueta partia-se em
   quatro linhas. */
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.hero .who { display: contents; }
.hero h1 { grid-column: 2; }
.hero .sub, .hero .chips { grid-column: 1 / -1; }
.hero .chips { margin-top: 0.125rem; }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero .sub { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  /* 2026-09-29: o nome da equipa é o nome do clube inteiro ("Clube
     Desportivo Exemplar - Sub-13"). Com `nowrap` a etiqueta ia até aos 430 px
     e a página ganhava scroll para o lado num telemóvel de 390. A etiqueta
     nunca passa da largura da linha e o nome comprido quebra DENTRO dela. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.chip .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--club-tinta); flex: none; }
.chip.num { background: var(--ink); color: var(--card); font-family: var(--display); font-weight: 800; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 0.875rem 1rem 0.5rem;
  margin-top: 0.875rem;
}
.card > .head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.625rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.card > h2.head { margin: 0; flex-wrap: wrap; row-gap: 0.125rem; }
.card > .head .ic { display: inline-flex; flex: none; width: 1.25rem; height: 1.25rem; color: var(--club-tinta); }
.card > .head .ic svg { width: 100%; height: 100%; }
.card > .head .n {
  margin-left: auto;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.card > .head .n.q { color: var(--live); }
.head .sub { margin-left: auto; font-family: var(--body); font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.card .note { font-size: 0.875rem; color: var(--muted); padding: 0 0 0.625rem; }
.card .nota { margin: 0.5rem 0 0; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* AS LINHAS DE CALENDÁRIO: o dia grande à esquerda, o resto ao lado. */
.row { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
/* A etiqueta (casa, fora, torneio) e o placar vão para o canto de cima: ao
   lado do texto comiam metade da largura, e com o texto grande cada linha do
   jogo partia-se palavra a palavra. Só o título lhes deixa o lugar. */
.row > .ha, .row > .placar { position: absolute; top: 0.75rem; right: 0; }
.row:has(> .ha) .main .t, .row:has(> .placar) .main .t { padding-right: 5.25rem; }
.row:has(> .ha) .main .k, .row:has(> .placar) .main .k { padding-right: 5.25rem; }
.row .when {
  flex: none;
  width: 3.25rem;
  padding: 0.375rem 0 0.3rem;
  text-align: center;
  border-radius: 0.75rem;
  background: var(--card-2);
}
.row .when:empty { background: transparent; }
.row .when .d { font-family: var(--display); font-size: 1.375rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.row .when .m { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--club-texto); margin-top: 0.2rem; }
.row .main { min-width: 0; flex: 1; }
.row .main .k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--club-texto); margin-bottom: 0.0625rem; }
.row .main .t { font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.row .main .s { font-size: 0.875rem; color: var(--muted); margin-top: 0.125rem; }
.ha {
  flex: none;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
}
.ha.home { color: var(--club-ink); background: var(--club); }
.ha.away { color: var(--muted); background: var(--card-2); }
.ha.torneio { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--club-tinta); }

/* O placar de um resultado: verde ganhou, cinza empatou, discreto perdeu. */
.placar {
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
}
.placar.v { background: var(--ok); color: #ffffff; }
.placar.d { color: var(--muted); }
@media (prefers-color-scheme: dark) { .placar.v { color: #062317; } }

.conv { display: inline-block; margin-top: 0.375rem; font-size: 0.8125rem; font-weight: 700; padding: 0.15rem 0.625rem; border-radius: 999px; }
.conv.sim { color: var(--club-ink); background: var(--club); }
.conv.nao { color: var(--muted); background: var(--card-2); }

/* OS BOTÕES. Pílulas (a marca), 44 px de alto no mínimo: muitos pais usam
   isto com o telemóvel numa mão. O principal é a cor do clube. */
.falta, .desmarcar, .pushbtn, .acordo-assinar, .be-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.falta { margin-top: 0.5rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.desmarcar { min-height: 2.5rem; padding: 0 0.875rem; font-size: 0.875rem; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.falta:disabled, .desmarcar:disabled, .pushbtn:disabled, .acordo-assinar:disabled, .be-enviar:disabled { opacity: 0.6; cursor: default; }
.falta-enviar, .falta-voltar { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.125rem; font: inherit; font-size: 0.9375rem; font-weight: 700; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.falta-enviar { flex: 1 1 8rem; color: var(--club-ink); background: var(--club); border: 0; }
.falta-voltar { color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.falta-enviar:disabled { opacity: 0.6; cursor: default; }
.falta-form { margin-top: 0.5rem; }
.avisei { margin-top: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }

/* "Como foi o treino?": dez botões de 44 px, um toque chega. */
.rpe-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; margin-top: 0.25rem; }
@media (min-width: 30rem) { .rpe-grid { grid-template-columns: repeat(10, 1fr); } }
.rpe, .be {
  min-height: 2.75rem;
  font: inherit;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rpe.on, .be.on { color: var(--club-ink); background: var(--club); border-color: transparent; box-shadow: 0 0 0 2px var(--club-tinta); }
.rpe:disabled { opacity: 0.6; cursor: default; }
.rpe-legenda { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--faint); }

.sched { display: flex; flex-direction: column; gap: 0.375rem; padding: 0 0 0.75rem; }
.sched .sday { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.sched .sday b { color: var(--ink); font-weight: 700; }

/* OS NÚMEROS DA ÉPOCA: quadros com o número grande em cima. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: 0.5rem; padding: 0 0 0.75rem; }
.stats .stat { background: var(--card-2); border-radius: 0.75rem; padding: 0.75rem 0.25rem 0.625rem; text-align: center; min-width: 0; }
.stats .stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.625rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stats .stat span { display: block; margin-top: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--faint); overflow-wrap: anywhere; }

.msg { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.msg .mtop { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.msg .date { font-size: 0.8125rem; font-weight: 600; color: var(--club-texto); }
.msg .body { font-size: 1rem; white-space: pre-wrap; word-break: break-word; }
.msg .body strong { font-weight: 700; }

.push { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0 0 0.75rem; }
.push .txt { flex: 1 1 12rem; min-width: 0; font-size: 0.9375rem; color: var(--muted); }
.push .txt b { color: var(--ink); }
.pushbtn { flex: none; color: var(--club-ink); background: var(--club); border: 0; }
.pushbtn.off { color: var(--ink); background: var(--card-2); border: 1px solid var(--line); }
/* O link para a app (famílias com conta, 2026-10-18): o botão do clube, num <a>. */
a.ir-para-a-app { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }

.empty { color: var(--muted); font-size: 0.9375rem; text-align: center; padding: 1rem 0.5rem 1.25rem; }
.empty .ic { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto 0.375rem; color: var(--faint); }
.empty .ic svg { width: 100%; height: 100%; }
.sem { padding: 0.75rem 0 0.875rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--muted); }

/* O QUE JÁ NÃO ACONTECE: um treino cancelado ou um jogo adiado continua na
   lista para quem o viu antes, a vermelho e com a hora riscada. */
.row.cancelada .conv.nao { color: #ffffff; background: #b42318; }
.row.cancelada .main > .s:not(.motivo) { text-decoration: line-through; }
.row.cancelada .s.motivo { margin-top: 0.25rem; }

/* OS CONVOCADOS no link da equipa: o número em destaque e o nome. */
.convocados { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; padding-bottom: 0.5rem; }
.convocados .cv { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--card-2); color: var(--ink); }
.convocados .cv b { font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--club-texto); font-weight: 800; }
/* O RECADO DO JOGO: concentração, onde e equipamento, por cima dos nomes. */
.recado { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.375rem; margin-top: 0.25rem; }
.recado .rl { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.9375rem; font-weight: 600; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: var(--card-2); color: var(--ink); }
.recado .rl b { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--club-texto); }

/* OS TERMOS POR ASSINAR: o texto inteiro, dois campos e um toque de 44 px. */
.por-assinar { margin-left: auto; padding: 0.2rem 0.625rem; font-family: var(--body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: #ffffff; background: #b42318; border-radius: 999px; }
.acordo-aviso { margin: 0.5rem 0 0.25rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); background: var(--card-2); border-radius: 0.75rem; }
.acordo-texto p { margin: 0.375rem 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.acordo-campo { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.acordo-campo input, .acordo-campo select {
  display: block; width: 100%; margin-top: 0.25rem; min-height: 2.75rem; padding: 0 0.75rem;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 0.75rem;
}
.acordo-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.acordo-assinar, .be-enviar { flex: 1 1 8rem; color: var(--club-ink); background: var(--club); border: 0; }
.acordo-assinar.nao { color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.acordo-mudar { margin-top: 0.5rem; }
.acordo-mudar summary { display: flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 700; color: var(--club-texto); cursor: pointer; }
.acordo .avisei { padding-bottom: 0.5rem; }

/* "Como está hoje?": cinco botões de 44 px por linha. */
.be-intro { margin: 0 0 0.375rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.be-sub { margin-top: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--club-texto); }
.be-linha { margin-top: 0.75rem; }
.be-rotulo { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.be-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; margin-top: 0.375rem; }
.be-pontas { display: flex; justify-content: space-between; gap: 0.625rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--faint); }

/* ---------------------------------------------------------------------------
   O TORNEIO: o campeão, a classificação, os jogos, os marcadores. */
.champ {
  margin-top: 0.875rem;
  background: var(--club);
  color: var(--club-ink);
  border-radius: var(--raio);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.champ .ic { flex: none; width: 2rem; height: 2rem; }
.champ .ic svg { width: 100%; height: 100%; }
.champ .l { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.champ .n { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }

.tabela { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 0.5rem; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); text-align: center; padding: 0.25rem 0.2rem 0.375rem; }
th.n, td.n { text-align: left; }
td { text-align: center; padding: 0.625rem 0.2rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--muted); }
td.pos { color: var(--faint); font-weight: 700; width: 1.5rem; }
td.n { color: var(--ink); font-weight: 600; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.pts { font-family: var(--display); font-weight: 800; font-size: 1.0625rem; color: var(--ink); }
tr.q td.pos { color: var(--ok); }
tr.nossa td { background: color-mix(in srgb, var(--club) 10%, var(--card)); }
tr.nossa td:first-child { box-shadow: inset 3px 0 0 var(--club-tinta); }
tr.nossa td.n { font-weight: 800; }
.legenda { font-size: 0.8125rem; color: var(--faint); padding: 0.25rem 0 0.5rem; }
.legenda .q { color: var(--ok); font-weight: 800; }

/* Um jogo: hora, casa, resultado, fora. Os nossos levam a cor do clube na
   margem, para se encontrarem num calendário com 20 jogos. */
.jogo {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--line);
}
.jogo:first-of-type { border-top: 0; }
.jogo .hora { font-family: var(--display); font-weight: 700; font-size: 0.9375rem; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Nomes compridos partem em duas linhas em vez de "UD Polvore…". */
.jogo .eq { min-width: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--ink); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jogo .eq.r { text-align: right; }
.jogo .eq.nossa { font-weight: 800; }
.jogo .eq.d { color: var(--muted); font-weight: 500; }
.jogo .res {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
}
.jogo .res.vs { color: var(--faint); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; }
.jogo .res.live { background: var(--live); color: #ffffff; }
.jogo .res.live::before { content: ''; display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #ffffff; margin-right: 0.375rem; vertical-align: 0.15em; animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .jogo .res.live::before { animation: none; } }
.jogo .lbl { grid-column: 2 / span 3; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 0 0 0.5rem; }
.jogo .lbl .pen { text-transform: none; letter-spacing: 0; font-weight: 600; }
.jogo .lbl .campo { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.jogo.nossa { box-shadow: inset 3px 0 0 var(--club-tinta); margin-left: -1rem; padding-left: 1.625rem; }
.jogo.sem-hora { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.jogo.sem-hora .lbl { grid-column: 1 / -1; }
.so-nossos .jogo:not(.nossa) { display: none; }
.so-nossos .card.dia:not(.tem-nossos) { display: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; padding: 0.2rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); margin: 0.875rem 0 0; }
.seg button {
  min-height: 2.5rem; padding: 0 1rem; font: inherit; font-size: 0.9375rem; font-weight: 700;
  color: var(--muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed="true"] { color: var(--club-ink); background: var(--club); }

.sc { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; border-top: 1px solid var(--line); }
.sc:first-of-type { border-top: 0; }
.sc .rk { flex: none; width: 1.5rem; text-align: center; font-family: var(--display); font-weight: 800; font-size: 0.9375rem; color: var(--faint); }
.sc .nm { flex: 1; min-width: 0; }
.sc .nm b { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.sc .nm span { display: block; font-size: 0.8125rem; color: var(--muted); }
.sc .v { flex: none; font-family: var(--display); font-weight: 800; font-size: 1.375rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   A PÁGINA DO CLUBE: as equipas, o site (apresentação, notícias, sócios,
   loja) e os contactos que o clube escreveu para aqui. */
.contactos { display: flex; flex-direction: column; padding-bottom: 0.375rem; }
.contacto { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 1rem; overflow-wrap: anywhere; }
.contacto .ic { flex: none; display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--club-tinta); }
.contacto .ic svg { width: 100%; height: 100%; }
.contacto b { display: block; font-weight: 700; }
.contacto .s { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.0625rem; }
a.contacto { font-weight: 600; }

.indice { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
.indice a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.indice.site { position: sticky; top: 0; z-index: 2; margin: 0 -0.875rem; padding: 0.625rem 0.875rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.indice.site::-webkit-scrollbar { display: none; }
.indice.site a { flex: none; }
.equipa { scroll-margin-top: 0.75rem; }
.ancora, .card[id] { scroll-margin-top: 4.5rem; }

.lista-equipas { list-style: none; margin: 0; padding: 0 0 0.375rem; }
.lista-equipas li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--line); }
.lista-equipas b { font-size: 1rem; font-weight: 700; }
.lista-equipas span { font-size: 0.875rem; color: var(--muted); }

.texto { font-size: 1rem; line-height: 1.6; color: var(--ink); padding-bottom: 0.5rem; }
.texto p { margin: 0 0 0.625rem; max-width: 65ch; }
.redes { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0 0.75rem; }
.rede { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.rede .ic { display: inline-flex; width: 1rem; height: 1rem; color: var(--club-tinta); }
.rede .ic svg { width: 100%; height: 100%; }
.rede.whats { background: var(--club); border-color: transparent; color: var(--club-ink); }
.rede.whats .ic { color: inherit; }
.noticias { padding-bottom: 0.375rem; }
.noticia { border-top: 1px solid var(--line); }
.noticia summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.125rem; min-height: 2.75rem; padding: 0.625rem 1.5rem 0.625rem 0; position: relative; }
.noticia summary::-webkit-details-marker { display: none; }
.noticia summary::after { content: ''; position: absolute; right: 0.25rem; top: 1.125rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform 0.15s ease; }
.noticia[open] summary::after { transform: rotate(-135deg); top: 1.375rem; }
.noticia summary .d { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--club-texto); }
.noticia summary .t { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.noticia .texto { padding-top: 0; }
.precos, .produtos { list-style: none; margin: 0; padding: 0 0 0.375rem; }
.precos li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--line); }
.precos b, .produtos b { display: block; font-size: 1rem; font-weight: 700; }
.precos .s, .produtos .s { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.0625rem; }
.precos .preco { flex: none; text-align: right; font-family: var(--display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; padding-bottom: 0.75rem; }
.produto { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.produto .linha { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.produto .preco { font-family: var(--display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .noticia summary::after { transition: none; } }

/* ---------------------------------------------------------------------------
   3. OS PATROCINADORES DO CLUBE. Ao fundo, nunca por cima do conteúdo. Cada
   logótipo num azulejo branco (são desenhados para fundo branco, e no modo
   escuro um logótipo escuro desaparecia); os principais maiores, os de apoio
   mais pequenos. Um nome sem logótipo é uma etiqueta. */
.apoios {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: var(--raio);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
}
.apoios-t { font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.apoios-l { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.625rem; margin-top: 0.75rem; }
.apoio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  text-decoration: none;
  border-radius: 0.75rem;
}
.apoio img {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 6.5rem;
  object-fit: contain;
  padding: 0.375rem 0.625rem;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.1);
  box-sizing: content-box;
}
.apoio.principal img { height: 3.75rem; max-width: 11rem; }
.apoio span { padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; }
.apoio.principal span { font-family: var(--display); font-size: 1.0625rem; }
.apoios-l .quebra { flex-basis: 100%; height: 0; }

/* ---------------------------------------------------------------------------
   4. O RODAPÉ: o que esta página mostra (e não mostra), e a assinatura. */
.foot { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
.foot .lock { font-weight: 700; color: var(--ink); }
.foot .lock .ic { display: inline-flex; width: 0.875rem; height: 0.875rem; vertical-align: -0.1em; margin-right: 0.25rem; }
.foot .lock .ic svg { width: 100%; height: 100%; }
.foot p { margin: 0.25rem auto 0; max-width: 34rem; }
/* O aviso de privacidade às famílias (portal): sempre à vista, alvo de toque de 44px. */
.foot-legal { margin: 1.25rem auto 0; text-align: center; }
.foot-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.25rem 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--club-texto); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.foot-legal a:focus-visible { outline: 2px solid var(--club-tinta); outline-offset: 2px; border-radius: 0.25rem; }

.foot .privacidade a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.foot .privacidade a:focus-visible { outline: 2px solid var(--pm-azul); outline-offset: 2px; border-radius: 0.25rem; }
.assinatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  /* A risca da marca: o verde e o azul da PlayMinder, discreta, por cima. */
  background: linear-gradient(90deg, var(--pm-verde), var(--pm-azul)) top center / 3rem 3px no-repeat;
}
.assinatura img { display: block; width: 7.5rem; height: auto; }
.assinatura:focus-visible { outline: 2px solid var(--pm-azul); outline-offset: 4px; border-radius: 0.5rem; }

.state { text-align: center; padding: 5.5rem 1.5rem; color: var(--muted); font-size: 1rem; }
/* O estado de erro leva a marca por cima e um alvo de toque de 44px (VS-15). */
.state.erro { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.state.erro p { margin: 0; max-width: 28rem; }
.marca-do-erro { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0.25rem 0.5rem; border-radius: 0.5rem; }
.marca-do-erro img { display: block; width: 7.5rem; height: auto; }
.marca-do-erro:focus-visible { outline: 2px solid var(--pm-azul); outline-offset: 4px; }
.spinner {
  width: 1.5rem; height: 1.5rem; margin: 0 auto 0.875rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--club-tinta);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

button:focus-visible,
a.contacto:focus-visible,
.indice a:focus-visible,
.rede:focus-visible,
.apoio:focus-visible,
.noticia summary:focus-visible { outline: 2px solid var(--club-tinta); outline-offset: 2px; }

/* NO COMPUTADOR: a faixa ganha corpo e o emblema cresce; o resto continua
   numa coluna que se lê, porque estas páginas são abertas sobretudo num
   telemóvel. */
@media (min-width: 48rem) {
  .band { padding-top: 2rem; }
  .band .in { padding-bottom: 1.75rem; gap: 1.25rem; }
  .crest { width: 5.5rem; height: 5.5rem; border-radius: 1.25rem; }
  .band .club { font-size: 2.125rem; }
  .wrap { padding-top: 1.5rem; }
}

/* O PRÓXIMO JOGO EM DESTAQUE (link da equipa): a pergunta de quem abre o
   link é "quando é o jogo?", e responde-se em grande. A margem na cor do
   clube (como traço, a tinta que se lê). */
.card.proximo { padding: 1rem 1.125rem 1.125rem; border-left: 0.375rem solid var(--club-tinta); }
.proximo .k { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--club-texto); }
.proximo .adv { margin-top: 0.375rem; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
.proximo .adv .vs { font-weight: 600; font-size: 0.65em; color: var(--muted); }
.proximo .quando { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; margin-top: 0.5rem; font-size: 1rem; font-weight: 600; }
.proximo .quando b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--club-texto); font-variant-numeric: tabular-nums; }
.proximo .onde { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--muted); }