/* Home do campeonato. Usa apenas variaveis de variaveis.css. */

/* aba ativa */
#second-menu .nav-link.active { border-bottom-color: var(--laranja); font-weight: 600; }

/* base */
.home-campeonato { font-family: var(--font-corpo); font-variant-numeric: tabular-nums; }
.home-campeonato h2 { font-family: var(--font-titulo); font-weight: 700; margin: 0; }
.home-box { background: #fff; border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.home-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.home-sec-head a { font-size: .875rem; font-weight: 600; color: var(--verde-escuro); text-decoration: none; }
.home-sec-head a:hover { text-decoration: underline; }
.home-cont { font-size: .875rem; color: var(--petroleo); }
.home-campeonato a:focus-visible,
.home-campeonato button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* numeros */
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.home-stat { padding: 14px 16px; border-left: 1px solid var(--cinza-claro); }
.home-stat:first-child { border-left: 0; }
.home-stat b { display: block; font-family: var(--font-titulo); font-size: 1.9rem; line-height: 1; }
.home-stat span { font-size: .8rem; color: var(--petroleo); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 575.98px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stat:nth-child(3) { border-left: 0; }
  .home-stat:nth-child(n+3) { border-top: 1px solid var(--cinza-claro); }
}

/* destaque */
.home-destaque { background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%); color: #fff; border-radius: var(--radius-lg); padding: 20px 24px; }
.home-destaque-topo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: rgba(255, 255, 255, .85); }
.home-destaque-topo strong { color: var(--laranja); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.home-confronto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-block: 18px; }
.home-time, .home-campeao { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-family: var(--font-titulo); font-size: 1.35rem; line-height: 1.1; }
.home-campeao { margin-block: 18px; font-size: 1.6rem; }
.home-destaque .home-time, .home-destaque .home-time-nome, .home-destaque .home-resultado { color: #fff; }
/* estilos.css força h1-h5 em marinho com !important; o nome da equipe no card é um h2 */
.home-destaque h2.home-time-nome { color: #fff !important; }
.home-escudo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--petroleo-light); border: 2px solid rgba(255, 255, 255, .25); }
.home-escudo-iniciais { display: grid; place-items: center; font-size: 1.2rem; }
.home-resultado { font-family: var(--font-titulo); font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.home-x { font-family: var(--font-titulo); font-size: 1.75rem; color: rgba(255, 255, 255, .6); }
.home-contagem { display: flex; justify-content: center; gap: 10px; }
.home-contagem[hidden] { display: none; }
.home-contagem div { background: rgba(255, 255, 255, .1); border-radius: var(--radius-sm); padding: 6px 10px; text-align: center; min-width: 56px; }
.home-contagem b { display: block; font-family: var(--font-titulo); font-size: 1.4rem; line-height: 1; }
.home-contagem small { font-size: .7rem; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .06em; }
.home-destaque-acoes { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* abas e jogos */
.home-tabs { display: flex; border-bottom: 1px solid var(--cinza-claro); }
.home-tabs button { background: none; border: 0; padding: 12px 16px; font-weight: 600; color: var(--petroleo); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.home-tabs button[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--laranja); }
.home-filtro-local { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid var(--cinza-claro); }
.home-fl { flex-shrink: 0; background: #fff; border: 1px solid var(--cinza-claro); border-radius: 999px; padding: 4px 12px; font-size: .875rem; color: var(--azul); display: inline-flex; align-items: center; }
.home-fl:hover { border-color: var(--petroleo-light); }
.home-fl.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.home-dia { background: var(--cinza-claro); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--petroleo); padding: 6px 16px; }
.home-dia[hidden], .home-jogo[hidden], .home-vazio[hidden] { display: none; }
.home-jogo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--cinza-claro); color: inherit; text-decoration: none; }
.home-jogo:hover { background: var(--cinza-claro); }
.home-jogo-a { text-align: right; font-weight: 600; }
.home-jogo-b { font-weight: 600; }
.home-vitoria { color: var(--verde-escuro); }
.home-placar { font-family: var(--font-titulo); font-size: 1.35rem; min-width: 72px; text-align: center; background: var(--cinza-claro); border-radius: var(--radius-sm); padding: 2px 8px; }
.home-placar-hora { font-family: var(--font-corpo); font-size: 1rem; font-weight: 600; background: none; }
.home-jogo-meta { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--petroleo); margin-top: -6px; }
.home-selo { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--cinza-claro); padding: 1px 6px; border-radius: var(--radius-sm); margin-right: 6px; }
.home-vazio { margin: 0; padding: 20px 16px; text-align: center; color: var(--petroleo); }
.home-pin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pin); margin-right: 6px; }
.home-pin-lg { width: 14px; height: 14px; margin: 4px 0 0; flex: none; align-self: flex-start; }

/* classificacao */
.home-grupos { padding: 12px 16px 0; gap: 6px; }
.home-grupos .nav-link { padding: 4px 12px; font-size: .875rem; color: var(--azul); }
.home-grupos .nav-link.active { background: var(--azul); color: #fff; }
.home-tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.home-tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--petroleo); font-weight: 600; text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--cinza-claro); }
.home-tabela td { text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--cinza-claro); }
.home-tabela tr:last-child td { border-bottom: 0; }
.home-tabela th:nth-child(2), .home-tabela td:nth-child(2) { text-align: left; }
.home-pos { width: 40px; font-weight: 600; }
.home-classifica .home-pos { box-shadow: inset 3px 0 0 var(--verde); }
.home-pts { font-weight: 700; }
.home-forma { display: inline-flex; gap: 3px; }
.home-forma i { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza-claro); }
.home-forma i.v { background: var(--verde); }
.home-forma i.e { background: var(--petroleo-light); }
.home-forma i.d { background: var(--laranja-escuro); }
.home-legenda { font-size: .8rem; color: var(--petroleo); padding: 10px 16px; border-top: 1px solid var(--cinza-claro); }
.home-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--verde); margin-right: 6px; }

/* classificacao completa (aba Classificacao) */
.cl-tabela { font-size: .9rem; }
.cl-tabela th, .cl-tabela td { padding: 10px 6px; white-space: nowrap; }
.cl-tabela .cl-equipe { white-space: normal; min-width: 120px; font-weight: 600; }
.cl-tabela .home-pos { width: 40px; min-width: 40px; }
.cl-desclassificada { background: color-mix(in srgb, var(--laranja) 20%, #fff); }
.home-legenda .cl-legenda-desc::before { background: var(--laranja); }
.cl-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-rodape > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 575.98px) {
  .cl-sec { display: none; }
  .cl-expandida .cl-sec { display: table-cell; }
  .cl-expandida .cl-tabela .cl-equipe { white-space: nowrap; }
  .cl-expandida .cl-tabela .home-pos,
  .cl-expandida .cl-tabela .cl-equipe { position: sticky; background: #fff; z-index: 1; }
  .cl-expandida .cl-tabela .home-pos { left: 0; }
  .cl-expandida .cl-tabela .cl-equipe { left: 40px; box-shadow: 2px 0 0 var(--cinza-claro); }
  .cl-expandida .cl-tabela tr.cl-desclassificada .home-pos,
  .cl-expandida .cl-tabela tr.cl-desclassificada .cl-equipe { background: color-mix(in srgb, var(--laranja) 20%, #fff); }
}

/* listas laterais */
.home-lista { list-style: none; margin: 0; padding: 0; }
.home-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--cinza-claro); }
.home-lista li:last-child { border-bottom: 0; }
.home-rk { width: 20px; font-weight: 700; color: var(--petroleo); }
.home-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--cinza-claro); display: grid; place-items: center; font-weight: 600; font-size: .8rem; flex: none; }
.home-nome { flex: 1; min-width: 0; }
.home-nome b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-nome small { display: block; color: var(--petroleo); font-size: .8rem; }
.home-nome a { font-size: .875rem; font-weight: 600; color: var(--verde-escuro); }
.home-valor { font-family: var(--font-titulo); font-size: 1.4rem; }
.home-cartao { width: 12px; height: 16px; border-radius: 2px; display: inline-block; flex: none; }
.home-cartao.am { background: var(--laranja); }
.home-cartao.vm { background: var(--vermelho); }
.home-contagem-cartao { display: inline-flex; align-items: center; gap: 8px; min-width: 52px; justify-content: flex-end; font-family: var(--font-titulo); font-size: 1.25rem; }
.home-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-mini .home-box { padding: 14px 16px; }
.home-mini small { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--petroleo); }
.home-mini b { display: block; font-weight: 600; margin-top: 2px; }
.home-mini span { font-family: var(--font-titulo); font-size: 1.5rem; }
.home-locais li { align-items: flex-start; }

@media (prefers-reduced-motion: reduce) { .home-campeonato * { transition: none !important; } }
