/* ==========================================================================
   HoqueiPatins 2026 — compatibilidade com markup externo
   --------------------------------------------------------------------------
   Nem todo o HTML da página sai deste tema. Esta folha alinha com os tokens
   do design system aquilo que vem de fora e que não controlamos:

     1. SportsPress Pro — 71 templates, dos quais o tema só sobrepõe 9.
        Os restantes continuam a imprimir markup `sp-*`, e o tema faz
        dequeue das folhas do próprio plugin (ver functions.php).
     2. Blocos do editor — a barra lateral e o corpo dos artigos são
        conteúdo guardado na base de dados, não templates.
     3. owl.carousel — mantido porque o JS do tema depende dele.

   Sem isto, essas zonas aparecem sem estilo nenhum.
   ========================================================================== */

/* ==========================================================================
   1. SPORTSPRESS
   ========================================================================== */
.sp-template {
  margin-bottom: var(--sp-6);
  color: var(--text);
}
.sp-template a { color: var(--link); }
.sp-template a:hover { color: var(--link-hover); }

/* --- Títulos de bloco ---------------------------------------------------- */
.sp-template h2,
.sp-template h3,
.sp-table-caption {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  color: var(--text);
}

/* --- Tabelas ------------------------------------------------------------- */
.sp-table-wrapper,
.sp-data-table-container {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
.sp-table-caption + .sp-table-wrapper,
.sp-table-caption + .sp-data-table-container { border-radius: 0 0 var(--r-lg) var(--r-lg); }

.sp-scrollable-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.sp-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  margin: 0;
}
table.sp-data-table thead th {
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
/* O nowrap acima serve as colunas de estatísticas (J, V, E, D...). Na tabela
   do recinto o cabeçalho é uma célula só com o nome do pavilhão: a 346 px
   dava scroll horizontal à página inteira em telemóvel. */
table.sp-data-table thead tr > th:only-child { white-space: normal; }

table.sp-data-table tbody td,
table.sp-data-table tfoot td {
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
table.sp-data-table tbody tr:last-child td { border-bottom: 0; }
table.sp-data-table tbody tr:hover > td { background: var(--surface-2); }
table.sp-data-table tfoot td { font-weight: 700; background: var(--surface-2); }

/* A primeira coluna de texto alinha à esquerda (nome de equipa ou jogador) */
table.sp-data-table th.data-name,
table.sp-data-table td.data-name,
table.sp-data-table .sp-team-name { text-align: left; font-weight: 600; }

table.sp-data-table img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-height: 22px;
  margin-right: 6px;
}

.sp-data-table .sp-highlight > td,
.sp-data-table tr.sp-highlight { background: color-mix(in srgb, var(--brand) 10%, transparent); }

.sp-data-table .sp-row-no-0 td { color: var(--text-faint); }

/* --- Ligação "ver tudo" -------------------------------------------------- */
.sp-view-all-link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* --- Resultado e equipas (blocos de evento do plugin) -------------------- */
.sp-event-results,
.sp-event-main { text-align: center; }
.sp-result {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sp-team-name { color: var(--text); }
.sp-event-date,
.sp-event-time,
.sp-event-venue { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Barras de estatística ----------------------------------------------- */
.sp-statistic-bar {
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  height: 6px;
}
.sp-statistic-bar-fill { background: var(--info); height: 100%; display: block; }
.sp-statistic-label { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.sp-statistic-value,
.sp-statistic-ratio { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Quadros de competição ----------------------------------------------- */
.sp-tournament-bracket { color: var(--text); }
.sp-tournament-bracket .sp-event {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
}
.sp-tournament-bracket .sp-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* --- Calendário e selectores --------------------------------------------- */
.sp-calendar td,
.sp-calendar th { border: 1px solid var(--border); padding: var(--sp-2); text-align: center; }
.sp-calendar thead th { background: var(--surface-2); color: var(--text-faint); }

.sp-template select,
.sp-date-selector select,
.sp-template input[type="text"],
.sp-template input[type="search"] {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px var(--sp-3);
  font: inherit;
  font-size: var(--fs-sm);
}
.sp-template select:focus,
.sp-template input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* --- Miscelânea ---------------------------------------------------------- */
.sp-breadcrumb { font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-3); }
.sp-post { margin-bottom: var(--sp-4); }
.sp-desc-tip { color: var(--text-faint); cursor: help; }
.sp-message,
.sp-notice {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.sp-template-gallery img { border-radius: var(--r-md); }

/* ==========================================================================
   2. BLOCOS DO EDITOR
   O conteúdo editorial (barra lateral, corpo dos artigos) é guardado na base
   de dados: não passa por nenhum template do tema.
   ========================================================================== */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: center;
  transition: background var(--transition);
}
.wp-block-button__link:hover { background: var(--brand-hover); color: var(--brand-ink); }

/* Em telemóvel os botões a dois por linha ficam com ~116 px úteis. O core
   impõe word-break: break-word, e faltando 4 px "RESULTADOS" partia o S para
   a linha seguinte. Com menos padding a palavra cabe e o corpo mantém-se. */
@media (max-width: 600px) {
  .wp-block-button__link { padding-left: 8px; padding-right: 8px; }
}

/* Botões escritos no editor como imagem + <br> + legenda. Em flex o <br> não
   conta e cada nó vira um item: a imagem levava a largura toda e a legenda
   caía a prumo, uma letra por linha (e um "<strong>E</strong>UROPEU" ainda
   partia o E do resto). Em bloco o <br> volta a valer e o texto flui. */
.wp-block-button__link:has(img) {
  display: block;
  text-align: center;
}
.wp-block-button__link:has(img) img { margin-left: auto; margin-right: auto; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--brand); color: var(--link); }

/* Botões que são imagens: enquanto existirem, pelo menos não deformam */
.wp-block-image img,
.wp-block-button__link img { max-width: 100%; height: auto; border-radius: var(--r-md); }
/* Uma imagem com link herda a largura do atributo width através do <a>, que
   não tem limite nenhum: a imagem respeitava os 100% de um pai já grande
   demais e saía do artigo. */
.wp-block-image > a,
.entry-content a > img { max-width: 100%; }
.wp-block-image > a { display: block; }
.wp-block-image { margin: 0 0 var(--sp-3); }
.wp-block-image figcaption { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }

.wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 599px) { .wp-block-column { flex-basis: 100% !important; } }

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}
.wp-block-quote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--brand);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.3;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wp-block-table td,
.wp-block-table th { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.wp-block-table thead th { background: var(--surface-2); color: var(--text-faint); text-align: left; }

.wp-block-embed iframe,
.wp-block-video video { max-width: 100%; border-radius: var(--r-md); }
.wp-block-embed__wrapper { position: relative; }

.wp-block-group,
.wp-block-media-text { margin-bottom: var(--sp-4); }

/* ==========================================================================
   3. OWL CAROUSEL
   Mantido porque o JS compilado do tema (all.min.js) o inicializa.
   ========================================================================== */
.owl-carousel .owl-stage { display: flex; align-items: stretch; }
.owl-carousel .owl-item { display: flex; }
.owl-carousel .owl-item > * { width: 100%; }

.owl-nav { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  transition: all var(--transition);
}
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.owl-nav button.disabled { opacity: .35; cursor: default; }

.owl-dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--sp-3); }
.owl-dots button.owl-dot span {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition);
}
.owl-dots button.owl-dot.active span { background: var(--brand); }

/* ==========================================================================
   4. CONTEÚDO LEGADO
   Posts antigos com HTML à mão. Evita que estiquem a página.
   ========================================================================== */
.article-body img,
.entry-content img { max-width: 100%; height: auto; }
.article-body iframe,
.entry-content iframe { max-width: 100%; }
.article-body table,
.entry-content table { max-width: 100%; display: block; overflow-x: auto; }

/* --- Patrocinadores (bloco do SportsPress, fundo claro fixo) ------------- */
.sp-footer-sponsors,
.sp-sponsors {
  background: var(--surface-2) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sp-footer-sponsors img,
.sp-sponsors img { max-height: 54px; width: auto; display: inline-block; }
.sp-footer-sponsors:empty,
.sp-sponsors:empty { display: none; }

/* O SportsPress alterna o fundo das linhas com um cinzento claro fixo, que
   só funciona em tema claro. Os tokens tratam dos dois temas. */
table.sp-data-table tbody tr[style],
table.sp-player-list tbody tr[style],
table.sp-data-table tbody td[style*="background"],
table.sp-player-list tbody td[style*="background"] { background: transparent !important; }
table.sp-player-list tbody tr:nth-child(even) > td { background: var(--surface-2); }
table.sp-player-list tbody tr:hover > td { background: var(--surface-3); }

/* ==========================================================================
   5. AGENDA DO CABEÇALHO (servida pela app Live, em Laravel)
   --------------------------------------------------------------------------
   Em produção o #scheduleContainer é preenchido por AJAX a partir de
   live.hoqueipatins.pt/api/schedule, que devolve o markup do tema ANTIGO
   (.boxAgenda, .teamsName, .logoTeam) e o script que inicializa o
   owl.carousel. Esse HTML não passa por nenhum template deste tema, por
   isso é aqui que ganha o aspecto novo. Quando a app for actualizada para
   devolver .score-pill, o bloco 15 do hp.css trata do resto e isto pode sair.
   ========================================================================== */
.barColor { display: none; }

section.agenda {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) 0;
  position: sticky;
  top: var(--header-h);
  z-index: 40;
}
section.agenda > .wrapper {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
/* A mesma goteira do .wrap: o título e as setas alinham com o logótipo e com o
   botão do tema do cabeçalho. */
@media (min-width: 1400px) { section.agenda > .wrapper { padding-inline: var(--sp-8); } }
@media (min-width: 1800px) { section.agenda > .wrapper { padding-inline: var(--sp-10, 40px); } }
section.agenda .blockAgenda { width: 100%; float: none; }

/* O título "Agenda" vira rótulo discreto, como na barra de jogos do tema */
section.agenda h3.title-section {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin: 0 0 var(--sp-2);
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
}

ul.listGamesAgenda {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Sem o carrossel (JS em falta ou desligado), a lista rola na horizontal */
ul.listGamesAgenda:not(.owl-loaded) {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
ul.listGamesAgenda:not(.owl-loaded) > .agenda-item { flex: 0 0 auto; width: 190px; }
ul.listGamesAgenda .agenda-item { list-style: none; }

/* --- Cartão de jogo ------------------------------------------------------ */
.boxAgenda {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3) 8px;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition);
}
.boxAgenda:hover { border-color: var(--brand); transform: translateY(-1px); }

.boxAgenda .leagueName {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.boxAgenda .leagueName img {
  max-height: 14px !important;
  width: auto !important;
  flex: 0 0 auto;
  display: inline-block !important;
}

.boxAgenda .teamsName { display: grid; gap: 2px; }
.boxAgenda .teamHome,
.boxAgenda .teamAway {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  min-width: 0;
  float: none;
}
.boxAgenda .teamHome > span,
.boxAgenda .teamAway > span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  order: 2;
}
.boxAgenda .result {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 0 auto;
  float: none;
}
/* Casa: escudo antes do nome; fora: o mesmo, para as colunas alinharem */
.boxAgenda .teamHome .result { order: 1; }
.boxAgenda .teamAway .result { order: 1; flex-direction: row-reverse; }
.boxAgenda .result .logoTeam {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  flex: 0 0 auto;
  display: inline-block;
  order: 1;
}
.boxAgenda .numberResult {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: right;
  order: 3;
  position: absolute;
  right: var(--sp-3);
}
.boxAgenda .teamHome,
.boxAgenda .teamAway { position: relative; padding-right: 22px; }

.boxAgenda .clr { display: none; }

.boxAgenda .gameDate {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* O ícone de transmissão é a única <img> desta linha. Dentro do flex roubava
   ~23 px à data e ao estado, que passavam a duas linhas e faziam o cartão
   crescer. Sai do fluxo e fica como selo no canto, alinhado com a liga. */
.boxAgenda .gameDate > img {
  position: absolute; top: 7px; right: var(--sp-3);
  max-height: 12px !important; height: 12px !important; width: auto !important;
}
.boxAgenda .leagueName { padding-right: 22px; }
.boxAgenda .gameDate > span { white-space: nowrap; }
.boxAgenda .live_time:not(:empty) { color: var(--live); font-weight: 700; }

/* Setas de golo (o Font Awesome saiu; o script alterna .up/.down) */
.boxAgenda .arrowGame { display: none; }
.boxAgenda .arrowGame.up,
.boxAgenda .arrowGame.down {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  order: 4;
}
.boxAgenda .arrowGame.up { border-bottom: 5px solid var(--result-win); }
.boxAgenda .arrowGame.down { border-top: 5px solid var(--result-loss); }

/* Com o carrossel activo, o owl trata do deslocamento */
.listGamesAgenda.owl-loaded .owl-item .agenda-item { width: auto; height: 100%; }
/* As setas posicionam-se dentro da própria barra, à direita e centradas.
   Com top negativo subiam para cima dela e iam parar ao lado do menu. Medidas
   a partir da secção, ficavam a 12 px da borda do ecrã e 10 px acima dos
   cartões: a referência é a lista, e as setas ocupam o espaço reservado à
   direita dela (o padding-right do .blockAgenda), que acaba na goteira. */
section.agenda .listGamesAgenda.owl-loaded { position: relative; }
section.agenda .owl-nav {
  position: absolute;
  top: 50%;
  right: -68px;
  transform: translateY(-50%);
  margin: 0;
  gap: 4px;
  z-index: 5;
  pointer-events: none;
}
section.agenda .owl-nav button.owl-prev,
section.agenda .owl-nav button.owl-next {
  width: 28px; height: 28px;
  font-size: var(--fs-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}
/* Espaço à direita para as setas não taparem o último cartão */
section.agenda .blockAgenda { padding-right: 68px; }
@media (max-width: 767px) {
  section.agenda .owl-nav { display: none; }
  section.agenda .blockAgenda { padding-right: 0; }
}

@media (max-width: 1023px) {
  section.agenda { top: var(--header-h); }
}

/* ==========================================================================
   6. LANCE A LANCE (tema e app Live)
   --------------------------------------------------------------------------
   Duas origens, o mesmo markup: templates/timeline-event.php deste tema e
   live.hoqueipatins.pt/api/timeline/{id}, carregado por AJAX na ficha de
   jogo. A app traz larguras em linha com !important (45/10/45) e os ícones
   de acção em PNG — aqui damos-lhes o aspecto do design system.
   ========================================================================== */
table.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-sm);
  margin: 0;
}
tr.commentary-item { border-bottom: 1px solid var(--border); }
tr.commentary-item:last-child { border-bottom: 0; }
tr.commentary-item:hover { background: var(--surface-2); }

tr.commentary-item > td {
  padding: var(--sp-2) var(--sp-3) !important;
  vertical-align: middle;
  color: var(--text-muted);
  line-height: 1.6;
}
/* Coluna do meio: minuto e descrição do lance */
tr.commentary-item > td:nth-child(2) {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-inline: 1px solid var(--border);
}
tr.commentary-item > td:nth-child(2) span { display: block; margin-top: 2px; }

/* Casa à direita, visitante à esquerda — encostados ao centro */
tr.commentary-item > td:first-child { text-align: right !important; }
tr.commentary-item > td:last-child { text-align: left !important; }

tr.commentary-item img {
  width: 17px !important;
  height: 17px !important;
  vertical-align: middle;
  display: inline-block !important;
  margin-inline: 3px;
}

/* Linhas só com nomes (cinco inicial, substituições) ficam mais compactas */
tr.commentary-item br + br { display: none; }

@media (max-width: 767px) {
  /* As larguras vêm em linha com !important: só com !important se vencem */
  tr.commentary-item > td {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 4px var(--sp-3) !important;
    border: 0 !important;
  }
  tr.commentary-item > td:empty { display: none; }
  tr.commentary-item > td:nth-child(2) {
    order: -1;
    background: var(--surface-2);
    font-weight: 700;
  }
  tr.commentary-item { display: flex; flex-direction: column; padding-block: var(--sp-2); }
}

/* --- Base do owl.carousel para listas sem a classe .owl-carousel ---------
   O <ul> da agenda vem da app Live como "listGamesAgenda slider-agenda",
   sem .owl-carousel. O owl.carousel.min.css restringe tudo a essa classe,
   por isso o carrossel inicializava mas os cartões ficavam empilhados.
   Estas são as regras de base do widget, aplicadas por .owl-loaded.
   ------------------------------------------------------------------------ */
.owl-loaded .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.owl-loaded .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
}
.owl-loaded .owl-stage::after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-loaded .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.owl-loaded .owl-item img { transform-style: preserve-3d; }
.owl-loaded.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; user-select: none; }
.owl-loaded .owl-nav.disabled, .owl-loaded .owl-dots.disabled { display: none; }
.owl-loaded .owl-nav .disabled { opacity: .4; cursor: default; }
.owl-loaded.owl-hidden { opacity: 0; }
.owl-loaded .owl-refresh .owl-item { visibility: hidden; }

/* Cada cartão ocupa toda a altura da célula do carrossel */
.listGamesAgenda.owl-loaded .owl-item > .agenda-item { height: 100%; display: block; }
.listGamesAgenda.owl-loaded .owl-item .boxAgenda { height: 100%; }

/* ==========================================================================
   LANCE A LANCE (HTML da app Live)
   O .MinutoAoMinuto é substituído por AJAX pelo HTML de live.hoqueipatins.pt:
   uma tabela de 45/10/45 com as larguras no atributo, as imagens a 20 px por
   style inline e um <style> que pinta o minuto de #ddd — cinzento claro sobre
   o tema escuro. O markup não é nosso; isto dá-lhe o aspecto da proposta.
   ========================================================================== */
.MinutoAoMinuto table.table {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.MinutoAoMinuto tr.commentary-item > td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-muted);
  line-height: 1.5;
}
.MinutoAoMinuto tr.commentary-item:last-child > td { border-bottom: 0; }
.MinutoAoMinuto tr.commentary-item:hover > td { background: var(--surface-2); }

/* As medidas vêm no atributo style de cada imagem. */
.MinutoAoMinuto tr.commentary-item img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 5px;
}

/* O minuto: o #ddd do <style> da app não se lê no tema escuro. */
.MinutoAoMinuto tr.commentary-item div.time {
  display: inline-block;
  background-color: var(--surface-3) !important;
  color: var(--text-muted);
  padding: 1px 7px !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.MinutoAoMinuto tr.commentary-item div.time:empty { display: none; }

@media (max-width: 599px) {
  .MinutoAoMinuto table.table { font-size: var(--fs-xs); }
  .MinutoAoMinuto tr.commentary-item > td { padding: 6px 4px; }
}


/* ==========================================================================
   TABELAS DE ESTATÍSTICAS SEM DADOS
   Numa época que ainda não começou, os quadros saem só com os cabeçalhos e o
   corpo vazio — parecem avariados. O <tbody> traz espaços, por isso :empty não
   serve; o que o distingue é não ter nenhuma linha.
   ========================================================================== */
.old-table.sem-dados::after,
.table-responsive.sem-dados::after {
  content: "Ainda não há dados para esta época.";
  display: block;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
}
/* Dentro de .table-responsive há sempre um .old-table: sem isto a mensagem
   aparecia duas vezes. */
.table-responsive.sem-dados:has(.old-table)::after { content: none; }


/* ==========================================================================
   CARREGAMENTOS POR AJAX
   O hp_LoadingToggle do all.min.js marca com .loadingBox o bloco que vai ser
   refeito (uma classificação, um quadro, os jogos de um dia) e junta-lhe no
   fim um .spinLoading com "A carregar...". Sem estilo, o aviso caía por baixo
   da tabela antiga, quase sempre fora de vista, e parecia que o clique não
   tinha feito nada. Passa a véu por cima do bloco, com o aviso numa pílula.
   ========================================================================== */
/* Um bloco ainda vazio (o primeiro carregamento de um widget) precisa de
   altura para o aviso se ver. */
.loadingBox { min-height: 8rem; }
/* O all.min.js tira o .loadingBox mas não apaga o aviso: quem o apaga é o
   conteúdo novo. Fora do carregamento fica escondido. */
.spinLoading { display: none; }
.loadingBox > .spinLoading {
  display: block;
  position: absolute;
  inset: 0;
  /* Acima das células fixas das tabelas (até 3) e abaixo do selector de
     época (20) e da barra de jogos (40). */
  z-index: 10;
  padding: var(--sp-8) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: inherit;
  cursor: progress;
  /* Uma resposta rápida não chega a piscar o véu. */
  animation: hp-veu-aparece .2s ease-out .15s both;
}
@keyframes hp-veu-aparece { from { opacity: 0; } }
/* No topo do bloco, junto dos controlos que o pediram. Com sticky, dentro de
   um .tableResponsive (overflow: auto) a distância contava a partir dele e o
   aviso descia para o fundo do ecrã. */
.loadingBox > .spinLoading .iconLoad {
  display: flex;
  justify-content: center;
}
.loadingBox > .spinLoading .loadingContent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
/* O SVG do tema antigo tem o traço azul-escuro fixo, que desaparece no tema
   escuro: o indicador é desenhado com as cores do tema. */
.loadingBox > .spinLoading .loadingContent img,
.loadingBox > .spinLoading .loadingContent br { display: none; }
.loadingBox > .spinLoading .loadingContent::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: hp-a-carregar .7s linear infinite;
}
@keyframes hp-a-carregar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loadingBox > .spinLoading .loadingContent::before { animation-duration: 2s; }
}