/* style.css - CSS complementar para a tabela da Copa 2026 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --cup-gradient-primary: linear-gradient(135deg, var(--bs-cp-primario, #0077c0), #003e66);
  --cup-gradient-danger: linear-gradient(135deg, var(--bs-cp-vermelho, #FF5C5C), #b30000);
  --cup-glass-bg: rgba(255, 255, 255, 0.85);
  --cup-glass-border: rgba(255, 255, 255, 0.3);
  --cup-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
  /* Classificação — valores padrão (modo claro) */
  --classif-card-bg: #ffffff;
  --classif-card-border: #dee2e6;
  --classif-header-bg: #f8f9fa;
  --classif-table-color: inherit;
}

[data-bs-theme=dark] {
  --cup-glass-bg: rgba(30, 30, 30, 0.85);
  --cup-glass-border: rgba(255, 255, 255, 0.1);
  --cup-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  /* Classificação — modo escuro */
  --classif-card-bg: #1e1e1e;
  --classif-card-border: #3a3a3a;
  --classif-header-bg: #2a2a2a;
  --classif-table-color: #dee2e6;
}

/* ── Classificação: usa variáveis CSS para dark/light automático ─────── */
.classif-card {
  background: var(--classif-card-bg) !important;
  border-color: var(--classif-card-border) !important;
}

.classif-header {
  background: var(--classif-header-bg) !important;
  border-color: var(--classif-card-border) !important;
}

.classif-table {
  color: var(--classif-table-color) !important;
}

.classif-table th,
.classif-table td {
  color: var(--classif-table-color) !important;
  border-color: var(--classif-card-border) !important;
}

.classif-table thead,
.classif-table-head {
  background: var(--classif-header-bg) !important;
}

/* ── Bracket / Chaveamento ───────────────────────────────────────────── */
[data-bs-theme=dark] .bm-box {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
}

[data-bs-theme=dark] .bm-team {
  color: #dee2e6;
}

[data-bs-theme=dark] .bm-sigla {
  color: #dee2e6;
}

[data-bs-theme=dark] .bm-score {
  color: #dee2e6;
}

/* ── Cards de Jogo ───────────────────────────────────────────────────── */
[data-bs-theme=dark] .jogo-card {
  background: var(--cup-glass-bg);
  border-color: var(--cup-glass-border);
}

[data-bs-theme=dark] .badge-grupo {
  background-color: rgba(0, 119, 192, 0.25);
}

body.copa-page {
  font-family: 'Outfit', var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  background-image: 
    radial-gradient(at 0% 0%, rgba(0, 119, 192, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(255, 92, 92, 0.05) 0px, transparent 50%);
  background-attachment: fixed;
}
.cp-teaser:has(.jogo-card) {
    margin-block-end: calc(var(--cp-grade-gap) / 2);
}
#jogos-dia-container {
    margin-block-end: var(--cp-grade-gap);
}
#classificacao-container.cp-teaser {
    margin-block-end: calc(var(--cp-grade-gap) / 2);
}
/* Header de Fase */
.fase-header {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
}

.fase-header h2 {
  font-weight: 700;
  font-size: var(--cp-h2-font-size, 2rem);
  margin: 0;
  background: var(--cup-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fase-header::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--bs-cp-primario, #0077c0), transparent);
  margin-left: 1rem;
  border-radius: 2px;
  opacity: 0.3;
}

/* Container de Jogos */
.jogos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Card de Jogo */
.jogo-card {
  background: var(--cup-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cup-glass-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--cup-glass-shadow);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.jogo-card:hover {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 119, 192, 0.3);
}

[data-bs-theme=dark] .jogo-card:hover {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
}

/* Header do Card */
.jogo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding-bottom: 0.5rem;
}

.badge-grupo {
  background-color: rgba(var(--bs-cp-primario-rgb, 0, 119, 192), 0.1);
  color: var(--bs-cp-primario, #0077c0);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-weight: 600;
}

/* Corpo do Card (Times) */
.jogo-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.time-flag {
  width: 50px;
  height: 35px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-bottom: 0.5rem;
  background-color: var(--bs-gray-200);
  border: 1px solid var(--bs-border-color-translucent);
  transition: transform 0.3s ease;
}

.jogo-card:hover .time-flag {
  transform: scale(1.1);
}

.time-sigla {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--bs-emphasis-color);
}

.time-nome {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  text-align: center;
  /*max-width: 80px;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placar */
.placar-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1.2;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--bs-emphasis-color);
  white-space: nowrap;
  flex-wrap: nowrap;
}

.placar-box span {
  padding: 0 0.5rem;
}

.placar-box .separator {
  color: var(--bs-tertiary-color);
  font-weight: 300;
}

.status-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.7rem;
  padding: 0.3rem 0.8rem;
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.status-agendado {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.status-aovivo {
  background: var(--cup-gradient-danger);
  color: #fff;
  animation: pulse-live 2s infinite;
}

.status-encerrado {
  background-color: var(--bs-success);
  color: #fff;
}

@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Footer do Card */
.jogo-footer {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--bs-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.jogo-footer svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-title { width: 150px; height: 30px; margin-bottom: 2rem; }
.skel-card { height: 180px; width: 100%; border-radius: 1rem; }

/* ==================================
   Estilos da Chave de Mata-mata
   ================================== */

.bracket-scroll-area {
  width: 100%;
  overflow-x: auto;
  padding: 1rem 0 3rem 0;
  -webkit-overflow-scrolling: touch;
}

.bracket-scroll-area::-webkit-scrollbar {
  height: 8px;
}
.bracket-scroll-area::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
  border-radius: 4px;
}
.bracket-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--bs-secondary-bg);
  border-radius: 4px;
}

.bracket-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-width: 1300px; /* Garante que os cards não esmaguem no mobile */
  min-height: 750px; /* Garante altura suficiente para as 8 partidas da Col 1 */
  margin: 0 auto;
}

.bracket-col {
  display: flex;
  flex-direction: column;
  width: 140px;
  margin: 0 10px;
  flex: 1; /* Força a coluna a esticar */
}

.bracket-col-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 2.5rem; /* Fixa altura para evitar quebras de linha desalinharem as colunas */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bracket-matches-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  height: 100%; /* Resolve bug do flexbox para esticar filhos */
  justify-content: flex-start;
  position: relative;
}

.bracket-match-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0%; /* Estica perfeitamente dividindo o espaço igualitariamente */
  min-height: 0;
  position: relative;
}

.bracket-match {
  position: relative;
  padding: 0;
  margin: 0.5rem 0;
  transition: transform 0.2s ease;
  width: 100%;
}

.bm-box {
  background: var(--cup-glass-bg);
  border: 1px solid var(--cup-glass-border);
}

[data-bs-theme=dark] .bm-box {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

.bm-team {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.bm-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 27px;
    margin-right: 6px;
    overflow: clip;
}

.bm-flag img {
  border-radius: 2px;
  border: 1px solid var(--bs-border-color-translucent);
}

.bm-flag-placeholder {
  width: 20px;
  height: 15px;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 2px;
}

.bm-sigla {
  flex-grow: 1;
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--bs-emphasis-color);
}

.bm-score {
  width: auto;
  min-width: 20px;
  text-align: center;
  color: var(--bs-emphasis-color);
  white-space: nowrap;
}

/* ==================================
   Linhas Conectoras do Mata-mata
   ================================== */
:root {
  --bracket-line-color: #adb5bd;
  --bracket-line-width: 2px;
}

[data-bs-theme=dark] {
  --bracket-line-color: #495057;
}

/* LEFT SIDE */
.bracket-col-left .bracket-match::after {
  content: ""; position: absolute;
  right: -10px; top: 50%;
  width: 10px; height: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

.has-left-connector .bracket-match::before {
  content: ""; position: absolute;
  left: -10px; top: 50%;
  width: 10px; height: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

.has-left-connector::before {
  content: ""; position: absolute;
  left: -10px; top: 25%; bottom: calc(25% - var(--bracket-line-width));
  width: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

/* RIGHT SIDE */
.bracket-col-right .bracket-match::before {
  content: ""; position: absolute;
  left: -10px; top: 50%;
  width: 10px; height: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

.has-right-connector::before {
  content: ""; position: absolute;
  right: -10px; top: 25%; bottom: calc(25% - var(--bracket-line-width));
  width: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

/* Ajuste fino de alinhamento solicitado para a área das semifinais */
.center-semis .has-left-connector::before,
.center-semis .has-right-connector::before {
  top: calc(25% + 15px);
  bottom: calc(25% - 7px);
}

.has-right-connector .bracket-match::after {
  content: ""; position: absolute;
  right: -10px; top: 50%; width: 10px;
  height: var(--bracket-line-width);
  background-color: var(--bracket-line-color);
  display: block;
}

/* ==================================
   Center Area (Final, Semifinais, 3º Lugar)
   ================================== */
.bracket-col-center-area {
  display: flex;
  flex-direction: column;
  flex: 3;
  margin: 0 10px;
  position: relative;
}

.center-semis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.center-spacer {
  flex: 1;
}

.center-final {
  position: absolute;
  bottom: calc(50% + 135px);
  left: 33.333%;
  width: 33.333%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-third {
  position: absolute;
  top: calc(50% + 135px);
  left: 33.333%;
  width: 33.333%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bracket-match-center {
  margin: 0;
  width: 100%;
}

.connector-up {
  position: absolute;
  left: 16.666%;
  width: 66.666%;
  bottom: calc(50% + 35px);
  height: 60px;
  border-top: var(--bracket-line-width) solid var(--bracket-line-color);
  border-left: var(--bracket-line-width) solid var(--bracket-line-color);
  border-right: var(--bracket-line-width) solid var(--bracket-line-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  z-index: 0;
}

.connector-up::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: var(--bracket-line-width);
  height: 40px;
  background-color: var(--bracket-line-color);
  transform: translateX(-50%);
}

.connector-down {
  position: absolute;
  left: 16.666%;
  width: 66.666%;
  top: calc(50% + 35px);
  height: 60px;
  border-bottom: var(--bracket-line-width) solid var(--bracket-line-color);
  border-left: var(--bracket-line-width) solid var(--bracket-line-color);
  border-right: var(--bracket-line-width) solid var(--bracket-line-color);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: -1;
}

.connector-down::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--bracket-line-width);
  height: 40px;
  background-color: var(--bracket-line-color);
  transform: translateX(-50%);
}