/* Everything and the kitchen sink */

.tabela_videos,.tb_pdf{
    margin: auto;
    width: fit-content;
    background-color: white;
}

.tabela_videos .thumb_video{
    max-width: 180px !important;
}

.tbf_tabela_videos .thumb_video{
    width: 100%;
    height: 100% !important;
}



.indice_exercicio{
    position: absolute;
    top: 0;
    font-size: small;
    margin: 0;
    right: 5px;
    padding: 0px 8px;
    border: 1px solid grey;
    background-color: gray;
    color: white;
    font-weight: 600;
}

.rodape_exercicio{
    position:absolute;
    bottom:0;
    font-size:small;
    width:100%;
    margin:0;
    left:0;
}

.content_treino{
    background-image: url(https://www.marioxuxa.com.br/wp-content/uploads/2020/07/slide-dmx-pedaleria-min.jpg);
    background-size: cover;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
  
  .flex-item {
    flex-basis: 50%;
    padding: 10px;
    box-sizing: border-box;
  }

  .tbf_tabela_videos{
    background-color: white;
  }

  .tbf_tabela_videos .detalhe_exercicio {
    display: flex;
    flex-direction: column;
  }

  .tbf_tabela_videos .video_exercicio{
    display: flex;
    flex-direction: column;
  }
  
  .tbf_tabela_videos .row {
    display: flex;
    flex-direction: row;
    margin: 0;
    /*border: 1px solid goldenrod;*/
  }

  .tbf_tabela_videos .row.row_exercicio {
    width: 100%;
  }
  
  .tbf_tabela_videos .column {
    margin: 0;
  }

  .tbf_tabela_videos .column {
    flex-basis: 25%;
    background-color: white;
  }

  .wrap_indice .cell{
    justify-content: end;
  }

  .wrap_indice {
    flex-basis: 10%;
    background-color: antiquewhite;
  }
  
  .wrap_titulo {
    flex-basis: 60%;
    background-color: floralwhite;
  }
  
  .wrap_rodape_exercicio {
    flex-basis: 30%;
    font-size: small;
  }

  .wrap_video{
    flex-basis: 90%;
  }
  
  .wrap_grupo{
    flex-basis: 90%;
  }

  .p_indice_exercicio{
    margin: 0;
    text-align: right;
    background: beige;
    width: fit-content;
    padding: 10px 15px;    
  }

  .wrap_rodape_exercicio .column {
    text-align: center;
    border: 1px solid antiquewhite;
    /*background-color: chocolate;*/
  }

  .wrap_rodape_exercicio .column span{
    background-color: chocolate;
  }


  .playBtn {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .wp-video-popup {
    position: relative;
  }

  .tbf_tabela_videos .cell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .tbf_tabela_videos p {
    margin: 0;
    /*margin-bottom: 15px;*/
  }
  
  .tbf_tabela_videos .grupo_exercicio {
    text-align: center;
    margin: 0;
  }

  .displaynone{
    display: none !important;
  }

  .wrap_rodape_exercicio span{
    width: 100%;
    text-transform: uppercase;
    color: white;
    font-weight: 500;   

  }

  .wrap_rodape_exercicio .rodape_val{
    background-color: white !important;
    color: black;
  }

  @media screen and (max-width: 500px) {
    /* Adjust the number of columns for smaller screens */
    .tbf_tabela_videos .row {
      display: block;
    }
  
    .tbf_tabela_videos .flex-item {
      width: 100%;
    }

    .tbf_tabela_videos .row.row_exercicio {
      border: 1px solid lightgrey;
    }    

    /* Adjust the number of columns for smaller screens */
    .tbf_tabela_videos .column {
      flex-basis: 50%;
      width: 25%;
    }

    .tbf_tabela_videos .row_exercicio .flex-item {
      flex-basis: 100%;
      width: 100%;
    }    
  }
  
  /* Quebra entre seções */
/* Stack de cores com fundos escuros e predominâncias bem definidas */

/* AZUL ESCURO - Cor 1, 5, 9 */
tr.row_color_1, tr.row_color_5, tr.row_color_9 {
    color: #e3f2fd; /* Azul muito claro para contraste */
}

.tbf_tabela_videos .row.row_exercicio.row_color_1, 
.tbf_tabela_videos .row.row_exercicio.row_color_5,
.tbf_tabela_videos .row.row_exercicio.row_color_9 {
    background-color: #1a237e; /* Azul escuro predominante */
}

/* VERDE ESCURO - Cor 2, 6, 10 */
tr.row_color_2, tr.row_color_6, tr.row_color_10 {
    color: #e8f5e8; /* Verde muito claro para contraste */
}

.tbf_tabela_videos .row.row_exercicio.row_color_2, 
.tbf_tabela_videos .row.row_exercicio.row_color_6,
.tbf_tabela_videos .row.row_exercicio.row_color_10 {
    background-color: #1b5e20; /* Verde escuro predominante */
}

/* VERMELHO ESCURO - Cor 3, 7, 11 */
tr.row_color_3, tr.row_color_7, tr.row_color_11 {
    color: #ffebee; /* Rosa muito claro para contraste */
}

.tbf_tabela_videos .row.row_exercicio.row_color_3, 
.tbf_tabela_videos .row.row_exercicio.row_color_7, 
.tbf_tabela_videos .row.row_exercicio.row_color_11 {
    background-color: #b71c1c; /* Vermelho escuro predominante */
}

/* CINZA ESCURO NEUTRO - Cor 4, 8, 12 */
tr.row_color_4, tr.row_color_8, tr.row_color_12 {
    color: #f5f5f5; /* Cinza muito claro para contraste */
}

.tbf_tabela_videos .row.row_exercicio.row_color_4, 
.tbf_tabela_videos .row.row_exercicio.row_color_8, 
.tbf_tabela_videos .row.row_exercicio.row_color_12 {
    background-color: #424242; /* Cinza escuro neutro (sem tom azulado) */
}

/* Opcional: Adicionar um padding extra para melhorar a legibilidade */
.tbf_tabela_videos .row.row_exercicio {
    padding: 12px 16px;
    transition: all 0.2s ease;
}

/* Opcional: Efeito hover sutil para melhorar a interação */
.tbf_tabela_videos .row.row_exercicio:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}
  /* Fim Quebra entre seções */
  
  .sections_group .wprt-container{
    background-color: white;
    width: 80%;
    margin: 15px auto;
    /* text-align: center; */
    padding: 15px;
    border: 10px solid #ff6600d1;    
  }
  

@media screen and (min-width: 768px) {
    .tabela_videos, .tbf_tabela_videos{
        margin: 25px auto;
        width: 80%;
    }
}
/* Página de listagem de treinos por aluno */
/* Estilos para a página de treinos do aluno */
.titulo-aluno {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 2.5em;
}

.lista-treinos {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna */
    gap: 20px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Ocupa 100% em telas menores */
}


.treino-item {
    background-color: white;
    width: 80%;
    margin: 15px auto;
    /* text-align: center; */
    padding: 15px;
    border: 10px solid #ff6600d1;    
}

.treino-item:hover {
    transform: translateY(-5px);
}

.treino-item h2 {
    margin-top: 0;
    color: #3498db;
}

.treino-item h2 a {
    text-decoration: none;
    font-size: 0.6em;    
}

.treino-meta {
    margin: 10px 0;
    font-size: 0.9em;
    color: #7f8c8d;
}

.grupos-musculares {
    background: #ecf0f1;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.treino-excerpt {
    margin: 15px 0;
    color: #34495e;
}

.treino-item .button {
    display: inline-block;
    background: #ff6600d1;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.treino-item .button:hover {
    background: chocolate;
    color: white;
}

/* Novo link para todos os treinos no treino "single". */
div.ver-todos-treinos{
background-color: white;
    width: fit-content;
    margin: 25px auto !important;
    text-align: center;
    /*padding: 15px;*/
    border: 10px solid #ff6600d1;  

}

div.ver-todos-treinos a{
    display: inline-block;
    background: #ff6600d1;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
    margin: 15px;
}

div.ver-todos-treinos a:hover{
  background: chocolate;
  color: white;
}