/* ==========================================================================
   base.css — ESTRUTURA E DENSIDADE comuns a todos os temas.
   Define tamanhos, espaçamento, grelha, alinhamento e anti-clipping.
   NÃO define cores/fontes (isso é de cada tema, carregado a seguir).
   Carregado ANTES do tema para o tema poder personalizar a "pele".
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  line-height: 1.4;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.escondido { display: none !important; }

/* ----------------------------- TOPO ------------------------------------ */
.topo { }
.topo-inner {
  max-width: 1200px; margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
#titulo { margin: 0; font-size: clamp(1.05rem, 0.85rem + 1vw, 1.45rem); line-height: 1.15; font-weight: 800; }
.sub { margin: 3px 0 0; font-size: .78rem; }
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.35em; padding: 0 .4em; border-radius: 999px;
  font-size: .72em; font-weight: 700; line-height: 1; vertical-align: middle;
}

/* --------------------------- CONTROLOS --------------------------------- */
.controlos { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.campo { display: flex; flex-direction: column; gap: 3px; }
.campo > span { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.campo select {
  font: inherit; font-size: .85rem; padding: 6px 28px 6px 10px; border-radius: 8px;
  min-width: 124px; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.botao { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; }

/* barra de navegação dedicada (Escalão / Divisão) — fixa ao topo */
.barra-nav { position: sticky; top: 0; z-index: 20; }
.barra-inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.campo-tabs { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.rotulo { flex: 0 0 auto; min-width: 64px; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.grupo-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { font: inherit; font-size: .92rem; font-weight: 600; padding: 9px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
@media (max-width: 640px) {
  .campo-tabs { flex-direction: column; align-items: stretch; gap: 5px; }
  .grupo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tab { padding: 10px 6px; text-align: center; }
}

/* --------------------------- CONTAINER --------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 16px 20px 36px; }
.explicacao { margin: 0 0 14px; font-size: .85rem; max-width: 80ch; }
#avisos:not(:empty) { margin-bottom: 14px; }
.aviso { border-radius: 8px; padding: 9px 12px; font-size: .85rem; }
.aviso + .aviso { margin-top: 8px; }

/* ----------------- GRELHA DE SÉRIES (cabe 2×2 no ecrã) ----------------- */
.grelha-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 720px) { .grelha-series { grid-template-columns: 1fr; } }

.serie { border-radius: 10px; overflow: hidden; }
.serie > h2 {
  margin: 0; padding: 7px 12px; font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  display: flex; align-items: center; gap: 6px;
}

/* Linhas: compactas mas confortáveis, UMA linha só, nome com elipse, sem clipping.
   Sem numeração — as séries são sorteadas, não são classificação.
   1ª coluna = símbolo do clube (crest), com monograma de fallback. */
.linha {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 5px 14px; min-height: 40px;
}
.crest { position: relative; width: 28px; height: 28px; flex: none; }
.crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.crest-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .58rem; font-weight: 800; letter-spacing: .01em;
  background: #e6e8ee; color: #5b6472;
}
.nome {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .87rem; font-weight: 500;
}
.nome small {
  display: inline-block; font-size: .62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; margin-left: 5px; vertical-align: middle; white-space: nowrap;
}
.meta { white-space: nowrap; font-size: .73rem; }
.lat { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ----------------------------- EDITOR ---------------------------------- */
.editor { border-radius: 10px; padding: 16px; margin-top: 6px; }
.editor-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-barra h2 { margin: 0; font-size: 1.05rem; }
.editor-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-dica { font-size: .8rem; margin: 8px 0 14px; }
.tabela-wrap { overflow-x: auto; border-radius: 8px; }
#tabelaEditor { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 600px; }
#tabelaEditor th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; }
#tabelaEditor td { padding: 5px 10px; vertical-align: middle; }
#tabelaEditor td.centro { text-align: center; }
#tabelaEditor input[type="text"], #tabelaEditor input[type="number"] { font: inherit; width: 100%; padding: 5px 8px; border-radius: 6px; }
#tabelaEditor input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.remover { font: inherit; cursor: pointer; border-radius: 6px; width: 26px; height: 26px; line-height: 1; }

/* ----------------------------- RODAPÉ ---------------------------------- */
.rodape { max-width: 1200px; margin: 0 auto; padding: 14px 20px 26px; font-size: .77rem; }

/* Responsivo: controlos full-width em ecrã estreito */
@media (max-width: 560px) {
  .topo-inner { gap: 10px; }
  .controlos { width: 100%; }
  .campo { flex: 1 1 30%; }
  .campo select { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }