/* site.placar.css */

/* INÍCIO - Acordion customizado dos filtros de placar. Somente aplicado aos filtros de placar */
#divFiltrosPlacar .accordion-button::after {
  display: none !important;
}

#divFiltrosPlacar .toggle-icon {
  transition: transform 0.3s ease;
}

#divFiltrosPlacar .accordion-button:not(.collapsed) .toggle-icon {
  transform: rotate(180deg);
}

#divFiltrosPlacar .accordion-body {
 padding: 0 !important;
} 

/* Ajusta a altura para combinar com o Bootstrap 5 */
.select2-container .select2-selection--single {
  height: calc(2.375rem + 2px); /* mesma altura do .form-select */
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.75rem;
}

/* FIM - Acordion customizado dos filtros de placar. Somente aplicado aos filtros de placar */

/* Cards dos placares (exclusivo) */
.placar-card {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #ffffffcc !important;
  border-radius: 12px;
  border: none;
  min-height: 250px;
  /* Altura mínima fixa */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Conteúdo distribuído no card */
}

.placar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.placar-card .titulo,
.placar-card .placar-numero {
  color: #004d40;
  font-weight: bold;
}

.placar-card .placar-numero {
  font-size: 1.8rem;
}


.card {
  width: 100%;
  /* Ocupa 100% da largura do container pai */
  margin: 0;
  /* Remove margens */
}

.card-highlight {
	border: 2px solid #ffc107; /* amarelo */
	box-shadow: 0 0 10px #ffc107;
	transition: box-shadow 0.4s, border 0.4s;
}


/* Remove qualquer padding extra da row */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* Scroll horizontal nos cards em dispositivos móveis */
@media (max-width: 768px) {
  #placares {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  #placares>div {
    min-width: 280px;
    flex-shrink: 0;
  }
}

/* #placares {
  padding-top: 0 !important;
  margin-top: 0 !important;
} */


/* Ajustes responsividade botões do card */
.btn-card-action {
  font-size: 0.8rem !important;
  /* tamanho padrão */
  padding: 0.5rem 1rem;
  /* espaço interno confortável */
  white-space: nowrap;
  /* evita quebra de linha */
}

/* Telas médias (tablets) */
@media (max-width: 1380px) {
  .btn-card-action {
    font-size: 0.60rem !important;
    padding: 0.2rem 0.2rem;
    white-space: nowrap;
  }
}

/* Telas intermediárias (desktops) */
@media (min-width: 990px) and (max-width: 1190px) {
  .btn-card-action {
    font-size: 0.53rem !important;
    padding: 0.2rem 0.2rem;
    white-space: nowrap;
  }
}

/* Telas pequenas (celulares) */
@media (max-width: 990px) {
  .btn-card-action {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.2rem;
    white-space: nowrap;
  }
}



/* Telas pequenas (celulares) */
/* @media (max-width: 576px) {
  .btn-card-action {
    font-size: 11px !important;
    padding: 0.2rem 0.2rem;
    white-space: nowrap;
  }
} */

.btn-esportivo {
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-verde-jogo {
  background-color: #00695c;
  border: none;
  color: white;
}

.btn-verde-jogo:hover {
  background-color: #004d40;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.placar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 1rem;
}

.team-name {
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  font-size: 1rem;
  /* padding: 0 4px; */
}



.placar-numero {
  font-size: 1.6rem;
  min-width: 50px;
  text-align: center;
}


/* Telas médias (tablets) */
/* @media (max-width: 1380px) {
  .team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    font-size: 0.8rem;
  }

  .placar-numero {
    font-size: 1rem !important;
    min-width: 50px;
    text-align: center;
  }

} */

/* Telas intermediárias  */
@media (min-width: 576px) and (max-width: 1380px) {
  .team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-size: 1.2rem;
  }

  .placar-numero {
    font-size: 1.4rem !important;
    min-width: 50px;
    text-align: center;
  }
}

/* Telas pequenas (celulares) */
@media (max-width: 576px) {
  .team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    font-size: .90rem;
  }

  .placar-numero {
    font-size: 1.4rem !important;
    min-width: .6rem;
    text-align: center;
  }

}

/* Estilo para as bandeiras */
.bandeira-time {
  vertical-align: middle;
  /* Alinha a bandeira com o texto */
  border-radius: 4px;
  /* Arredonda as bordas */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Sombra suave */
}


.btn-detalhes {
  background-color: rgba(76, 175, 80, 0.8);
  /* verde suave com transparência */
  color: white;
  border: none;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-detalhes:hover {
  background-color: rgba(51, 161, 56, 0.4);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Botão Acompanhar (já existente - apenas ajustando tamanho menor) */
.btn-acompanhar {
  background-color: rgba(1, 155, 137, 0.4);
  /* verde escuro com transparência */
  color: white;
  border: none;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-acompanhar:hover {
  background-color: rgba(1, 109, 91, 0.4);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-status-jogo {
  background-color: rgba(255, 153, 0, 0.555);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.3s ease;

  display: inline-flex;           /* 👈 fundamental */
  align-items: center;            /* verticalmente alinhado */
  justify-content: center;        /* horizontalmente alinhado */
  line-height: 1.2;
}

.btn-status-jogo:hover {
  background-color: rgba(255, 152, 0, 0.555);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.iniciarPartida {
  background-color: rgba(0, 128, 0, 0.7);
}

.iniciarPartida:hover {
  background-color: rgba(0, 128, 0, 0.9);
}

.retomarPartida {
  background-color: rgba(255, 204, 0, 0.65);
}

.retomarPartida:hover {
  background-color: rgba(255, 204, 0, 0.85);
}

.iniciarIntervalo {
  background-color: rgba(180, 130, 70, 0.6);
}

.iniciarIntervalo:hover {
  background-color: rgba(180, 130, 70, 0.8);
}

.retornarIntervalo {
  background-color: rgba(0, 102, 85, 0.65);
}

.retornarIntervalo:hover {
  background-color: rgba(0, 102, 85, 0.85);
}

.encerrarPartida {
  background-color: rgba(160, 0, 0, 0.493);
}

.encerrarPartida:hover {
  background-color: rgba(160, 0, 0, 0.658);
}