/* monitor.css - Estilos específicos para a página de visualização de monitor */

.monitor-container.presentation-mode {
  padding: 0;
}

.monitor-controls {
  display: flex;
  gap: 0.5rem;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  height: calc(100vh - 100px);
}

/* New Slot Header Styles */
.slot-header {
  padding: 10px;
}

.aluno-foto {
  width: 95px !important;
  /* Larger photo */
  height: 95px !important;
  border-width: 3px !important;
}

.aluno-nome {
  font-size: 1.3rem !important;
  /* Larger name */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.aluno-nome-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  /* Enable truncation */
  margin-left: 10px;
}

.treino-info {
  flex: 1;
  font-size: 0.8em !important;
  color: var(--text-light);
  text-transform: uppercase;
  white-space: nowrap;
  /* Impede quebra de linha */
  overflow: hidden;
  /* Esconde o conteúdo que ultrapassar */
  text-overflow: ellipsis;
}


.header-progress-container {
  display: flex;
  flex-direction: column;
  /* Stacked bars */
  gap: 5px;
  margin-top: 5px;
  width: 70%;
  min-width: 100px;
  max-width: 160px;
  opacity: 0.7;
  transition: scale 0.3s ease;
  scale: 0.9;
}

.header-progress-container:hover {
  transition: scale 0.3s ease;
  scale: 1.08;
  opacity: 1;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.progress-icon {
  font-size: 0.9em;
  color: #888;
  width: 16px;
  /* Fixed width for alignment */
  text-align: center;
}

.header-progress-bar {
  height: 14px;
  /* Slightly taller for text */
  border-radius: 7px;
  background-color: #f0f0f0;
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: help;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-progress-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease;
}

/* Discreet Colors */
.bar-blue {
  background-color: #90CAF9;
}

/* Soft Blue */
.bar-green {
  background-color: #A5D6A7;
}

/* Soft Green */
.bar-orange {
  background-color: #fbd59a;
}

/* Soft Orange */
.bar-red {
  background-color: #f0b2b2;
}

/* Soft Red */

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 600;
  color: #444;
  /* Dark gray for contrast */
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  /* Halo for readability */
}

/* Tooltip styles handled via title attribute for simplicity, or we can add custom tooltip CSS later if native is insufficient. */

/* Modal Progress Bars (Larger) */
.modal-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.modal-progress-icon {
  font-size: 1.4em;
  /* Larger Icon */
  color: #777;
  width: 30px;
  text-align: center;
}

.modal-progress-bar-bg {
  height: 24px;
  /* Much taller */
  border-radius: 12px;
  background-color: #f0f0f0;
  flex: 1;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.modal-progress-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.6s ease;
}

.modal-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: #444;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}


.presentation-mode .monitor-grid {
  height: 100vh;
  gap: 0;
}



.presentation-mode {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--border-color);
}

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  gap: 5px;
  box-shadow: 0px 2px 5px #00000047;
  z-index: 1000;
}

.slot-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.slot-content.empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .btn-select-aluno {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
} */

.btn-select-aluno {
  background-color: var(--primary-color);
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  flex-grow: 1;
}

.btn-select-aluno:hover {
  background-color: var(--primary-dark);
}

/* Aluno selecionado */
.aluno-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  align-items: center;
}

.aluno-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.aluno-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.treino-tipo {
  font-weight: 500;
  color: var(--primary-color);
}

/* Exercícios */
/* Estilos base para os itens de exercício na lista do monitor */
.exercicios-list .exercicio-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
  padding: 0.5em;
  border-bottom: 1px solid #eeeeee00;
  min-width: 0;
  /* Permite encolhimento interno */
}

.exercicios-list .exercicio-numero {
  margin-right: 0.75em;
  font-weight: bold;
  color: #333;
  min-width: 1.5em;
  /* Garante espaço para o número */
  text-align: right;
  padding-top: 0.1em;
  /* Ajuste fino vertical */
}

.exercicios-list .exercicio-info {
  flex: 1;
  min-width: 0;
  /* Essencial para truncar texto em flex */
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.exercicios-list .exercicio-linha-principal {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.exercicios-list .exercicio-nome {
  grid-area: 1 / 1;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 80px;
  /* Garante que o texto não "bata" seco nos detalhes iniciais */
  min-width: 0;
  z-index: 1;
}

/* Expansão ao passar o mouse */
.exercicio-nome:hover {
  overflow: visible;
  white-space: nowrap;
  z-index: 20;
  /* Fica acima de tudo */
  background-color: var(--card-background, #fff);
  box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
  padding-right: 15px;
  width: max-content;
}

/* Garante que o container de exercícios não esconda o hover */
.exercicios-list,
.exercicios-grupo {
  overflow: visible !important;
}

.exercicios-list .exercicio-detalhes {
  grid-area: 1 / 1;
  justify-self: end;
  display: flex;
  gap: 0;
  /* Removido o gap global */
  white-space: nowrap;
  color: #555;
  font-size: 1.1em;
  font-weight: bold;
  flex-shrink: 0;
  background-color: var(--card-background, #fff);
  padding-left: 15px;
  z-index: 10;
  position: relative;
  /* Sombra interna para suavizar a transição do nome por baixo */
  box-shadow: -15px 0 15px var(--card-background, #fff);
}


.exercicios-list {
  font-size: 0.85em;
  color: #777;
  /* background-color: #f9f9f9; */
  padding: 0.25em 0.25em;
  border-radius: 4px;
}

.exercicios-list .desafio-label {
  font-weight: bold;
  margin-right: 0.3em;
}

/* Ajustes para telas menores (Mobile) */
@media (max-width: 768px) {
  .exercicios-list {
    font-size: 14px;
    /* Pode ajustar o tamanho da fonte base para mobile */
  }

  .exercicios-list .exercicio-item {
    padding: 0.4em;
  }


  .exercicios-list .exercicio-nome {
    margin-right: 0.5em;
    /* Reduzir margem em mobile */
    font-size: 1em;
    /* Ajustar se necessário */
  }

  .exercicios-list .exercicio-detalhes {
    gap: 0.5em;
    /* Reduzir espaçamento entre detalhes */
    font-size: 0.85em;
    /* Se os detalhes ainda estiverem muito compridos, permitir quebra */
    /* white-space: normal; */
    /* flex-wrap: wrap; */
  }

  .exercicios-list {
    font-size: 0.8em;
  }
}

/* Estilos para títulos de grupos de exercícios, se houver */
.exercicios-list .exercicios-grupo-titulo {
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  color: #333;
  font-size: 1.05em;
}

.exercicios-list .exercicios-separador {
  height: 0px;
  background-color: #ddd;
  margin: 0.5em 0;
}

.exercicio-desafio {
  display: flex;
  gap: 0;
  /* Removido o gap global */
  align-items: baseline;
  background-color: #ffe0b2;
  border-left: 3px solid #ff9800;
  border-radius: 0 4px 4px 0;
  margin-left: auto;
  padding: 3px 7px;
  font-size: 0.9em;
  color: #444;
  white-space: nowrap;
  cursor: pointer;
}

/* Destaque para o Modo Desafio (Toda a linha) */
.exercicio-item.is-challenge-highlight {
  background-color: #fff9c4 !important;
  /* Amarelo claro */
  border-right: 5px solid #fbc02d !important;
  /* Amarelo ouro */
  border-radius: 4px;
  margin: 2px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.exercicio-item.is-challenge-highlight .exercicio-nome {
  color: #f57f17 !important;
  /* Laranja escuro para o nome */
  font-weight: bold !important;
}

.exercicio-item.is-challenge-highlight .exercicio-detalhes {
  color: #e65100 !important;
  /*background-color: #fff9c4 !important;*/
}

/* Espaçamento padronizado: Gap apenas para a carga */
.exercicio-carga {
  margin-left: 0.75em;
}

.desafio-label {
  font-weight: bold;
  color: #e65100;
  font-size: 0.85em;
  text-transform: uppercase;
}

.desafio-series {
  font-weight: bold;
  color: #d32f2f;
}

.desafio-repeticoes {
  font-weight: bold;
  color: #388e3c;
}

.desafio-carga {
  font-weight: bold;
  color: #f57c00;
  background-color: #fff8e1;
  padding: 1px 5px;
  border-radius: 3px;
}




/* Melhorar o layout do modal de seleção de aluno */
#modal-select-aluno .modal-content {
  max-width: 600px;
}

/* Melhorar o campo de busca */
#search-aluno-modal {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Container de busca */
.search-container {
  position: absolute;
  box-shadow: 2px 5px 11px lightgray;
  background-color: transparent;
  border-radius: 10px;
  width: 400px;
  justify-self: center;
  margin-top: 10px;
}

/* Modais específicos */
.alunos-list-modal {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
  /* Espaço para a barra de rolagem */
}

.aluno-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  /* border-bottom: 1px solid var(--border-color); */
  cursor: pointer;
  transition: background-color 0.2s;
  gap: 1.25rem;
  /* Aumentar o espaçamento entre foto e nome */
}

.aluno-item:hover {
  background-color: rgba(71, 173, 178, 0.1);
  transition: background-color 0.2s;
}

/* ============================
   Modal Unificado Add Aluno Slot
   ============================ */

.header-switch-container {
  background-color: #f9f9f9;
  padding: 5px;
  border-radius: 5px;
}

#modal-add-aluno-slot .modal-content {
  max-width: 90vw;
  width: 1200px;
  max-height: 90vh;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

#add-aluno-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

#add-aluno-modal-header .left-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#add-aluno-modal-header .right-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#step-select-aluno {
  /*padding-top: 1rem;*/
}

#search-aluno-add-slot {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

#alunos-list-add-slot {
  padding-top: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  overflow-y: auto;
  max-height: 65vh;
}

#step-details {
  display: flex;
  gap: 1.5rem;
  padding-top: 1rem;
  flex-grow: 1;
  overflow: hidden;
  /* Important for child scrolling */
}

.details-col {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 5px;
}

.details-col-left {
  flex: 1;
  min-width: 300px;
  border-right: 1px solid #eee;
  padding-right: 1.5rem;
}

.details-col-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.add-aluno-student-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

#add-aluno-foto {
  border-radius: 50%;
  object-fit: cover;
}

#add-aluno-nome {
  font-size: 1.5rem;
  font-weight: 600;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.25rem;
}

#add-aluno-historico-treinos .info-table {
  width: 100%;
  font-size: 0.9rem;
}

#add-aluno-historico-treinos .info-table th,
#add-aluno-historico-treinos .info-table td {
  padding: 6px 8px;
}

#add-aluno-historico-treinos .desempenho-indicadores {
  justify-content: center;
}

.selection-list-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.5rem;
  background-color: #fafafa;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 150px;
}

.selection-item {
  padding: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 0.25rem;
  border: 1px solid transparent;
}

.selection-item:hover {
  background-color: #e9e9e9;
}

.selection-item.selected {
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  border-color: var(--primary-color-dark);
}

.selection-item.curinga-item {
  background-color: #f0f8ff;
  border: 1px dashed #aed6f1;
}

.selection-item.curinga-item:hover {
  background-color: #e0f0ff;
}

.selection-item.curinga-item.selected {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}


#add-aluno-exercicios-list ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

#add-aluno-exercicios-list li {
  padding: 0;
}

#modal-add-aluno-slot .modal-footer {
  margin-top: auto;
  /* Push footer to the bottom */
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.ficha-item-with-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ficha-item-with-switch.inactive .text-content {
  color: #999;
  text-decoration: line-through;
}

.ficha-item-with-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ficha-item-with-switch .text-content {
  flex-grow: 1;
  cursor: pointer;
  padding: 0.75rem;
  /* Re-add padding here for click area */
}

.ficha-item-with-switch .switch-container {
  padding-right: 0.75rem;
  /* Add some padding to the right of the switch */
}

/* Switch styles used in the modal */
.switch-container {
  flex-shrink: 0;
  margin-left: 1rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  /* smaller */
  height: 24px;
  /* smaller */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  /* smaller */
  width: 18px;
  /* smaller */
  left: 3px;
  /* adjusted */
  bottom: 3px;
  /* adjusted */
  background-color: white;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--primary-color);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.slider:before {
  transform: translateX(20px);
  /* adjusted */
}

.slider.round {
  border-radius: 24px;
  /* adjusted */
}

.slider.round:before {
  border-radius: 50%;
}

.aluno-item:last-child {
  border-bottom: none;
}

.aluno-item .aluno-foto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-color);
  flex-shrink: 0;
}

.aluno-item .aluno-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Melhorar as informações do aluno */
.aluno-item .aluno-info {
  flex: 1;
}

.aluno-item .aluno-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
}

/* Adicionar informações adicionais do aluno */
.aluno-item .aluno-info p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

.fichas-list-modal {
  max-height: 400px;
  overflow-y: auto;
}

.ficha-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition);
}

.ficha-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Responsividade */
@media (max-width: 992px) {
  .monitor-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .monitor-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }
}

/* Adicionar ao monitor.css */

.treinos-list-modal {
  max-height: 400px;
  overflow-y: auto;
}

.treino-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition);
}

.treino-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.treino-item h4 {
  margin: 0 0 0.5rem;
  color: var(--primary-color);
}

.treino-item p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.btn-trocar-treino {
  margin-right: 0.5rem;
}

/* Melhorar o layout dos botões no cabeçalho do slot */
.aluno-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.aluno-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-color);
  /* Borda na foto */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.aluno-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aluno-nome-container {
  flex: 1;
  min-width: 0;
  /* Importante para que o text-overflow funcione */
  max-width: calc(100% - 30px);
  /* Evita que o texto se estenda demais */
}

.slot-actions {
  display: flex;
  gap: 0.50rem;
  margin-left: auto;
  margin-right: 40px;
  /* Espaço para o botão de liberar slot */
  align-self: flex-start;
}

.btn-avaliacao {
  grid-area: avaliacao;
}

.btn-trocar-treino {
  grid-area: trocar-treino;
}

.btn-trocar {
  grid-area: trocar;
}

.btn-avaliacao,
.btn-trocar-treino,
.btn-trocar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  /* padding: 0.25rem 0.5rem; */
  color: var(--primary-color);
  transition: color 0.3s;
}

.btn-avaliacao:hover,
.btn-trocar-treino:hover,
.btn-trocar:hover {
  color: var(--primary-dark);
}

@media (max-width: 768px) {
  .aluno-info {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "foto nome nome"
      "foto treino treino"
      "avaliacao trocar-treino trocar";
    gap: 0.5rem;
  }
}

/* Estilos para grupos de exercícios */
.exercicios-grupo {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 0.45rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding-left: 5px;
  margin-left: -5px;
  /* Optional: to counteract padding if it misaligns */
  transition: background-color 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
  cursor: pointer;
}

.exercicios-grupo.selected-grupo {
  border: 2px solid var(--primary-color);
  border-left: 7px solid var(--primary-color);
  /* A distinct blue, change as needed */
  background-color: #f0f0f0 !important;
  /* A light blueish background, change as needed */
  /* Adjust padding if the border pushes content too much, 
     or if you want more space between border and content */
  padding-left: 8px;
  margin-left: -12px;
  /* Optional: to counteract padding if it misaligns, adjust based on your layout */
  margin-right: -12px;
  box-shadow: 2px 3px 10px #4aa7ab78;
}

/* Optional: Style for when hovering over a non-selected group */
.exercicios-grupo:not(.selected-grupo):hover {
  background-color: #f0f0f0;
  /* Light gray hover effect */
}


.exercicios-grupo:nth-child(odd) {
  background-color: #f9f9f9;
}

.exercicios-separador {
  height: 1px;
  background-color: #e0e0e0;
  margin: 15px 0;
}

/* .exercicios-separador {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.75rem 0;
  position: relative;
} */

.exercicios-separador::before {
  /* content: '•••'; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-color);
  padding: 0 0.75rem;
  color: var(--text-light);
  font-size: 0.8rem;
  letter-spacing: 2px;
}

/* Ajustes nos itens de exercício */
.exercicio-item {
  display: flex;
  align-items: center;
  /* Alinhar checkbox com o texto */
  padding: 0.5rem 0;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
}

.exercicio-item:last-child {
  border-bottom: none;
}

.exercicio-checkbox-label {
  display: flex;
  align-items: center;
  flex-grow: 1;
  /* Para que o label ocupe o espaço e o texto do exercício fique ao lado */
}

.exercicio-checkbox-label input[type="checkbox"] {
  /* Esconder o checkbox padrão */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Dimensões do novo checkbox */
  margin-right: 0.85rem;
  /* Ajuste leve na margem para o novo tamanho */
  min-width: 20px;
  /* Novo tamanho mínimo */
  width: 20px;
  /* Novo tamanho */
  height: 20px;
  /* Novo tamanho */
  flex-shrink: 0;
  /* Impede que o checkbox encolha */
  cursor: pointer;
  /* Melhora a usabilidade indicando que é clicável */

  /* Estilo da "caixa" do checkbox (estado desmarcado) */
  background-color: transparent;
  border: 2px solid #ccc;
  /* Cor da borda quando desmarcado */
  border-radius: 4px;
  position: relative;
  /* Para posicionar o pseudo-elemento ::after */
  outline: none;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Estilo quando o checkbox está marcado */
.exercicio-checkbox-label input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Criando o "check" (marca de verificação) com pseudo-elemento */
.exercicio-checkbox-label input[type="checkbox"]:checked::after {
  content: ' ';
  position: absolute;
  left: 5px;
  /* Ajuste para centralizar o check */
  top: 0px;
  /* Ajuste para centralizar o check */
  width: 5px;
  height: 10px;
  border: solid white;
  /* Cor do "check" */
  border-width: 0 3px 3px 0;
  /* Espessura das linhas do "check" */
  transform: rotate(45deg);
}

/* ===========================================
   CHECKBOX 3 ESTADOS - Estado "Fazendo" (data-state="1")
   =========================================== */

/* Estado "Fazendo" - Círculo laranja */
.exercicio-checkbox-label input[type="checkbox"][data-state="1"] {
  background-color: transparent;
  border-color: #ff9800;
  border-width: 3px;
}

/* Círculo interno no estado "Fazendo" */
.exercicio-checkbox-label input[type="checkbox"][data-state="1"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: #ff9800;
  border-radius: 50%;
  border: none;
}

/* Estado "Finalizado" com data-state="2" (sobrescreve o checked padrão) */
.exercicio-checkbox-label input[type="checkbox"][data-state="2"] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.exercicio-checkbox-label input[type="checkbox"][data-state="2"]::after {
  content: ' ';
  position: absolute;
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  background-color: transparent;
  border: solid white;
  border-width: 0 3px 3px 0;
  border-radius: 0;
  transform: rotate(45deg);
}

/* Estado Vazio com data-state="0" */
.exercicio-checkbox-label input[type="checkbox"][data-state="0"] {
  background-color: transparent;
  border-color: #ccc;
}

.exercicio-checkbox-label input[type="checkbox"][data-state="0"]::after {
  content: none;
}


.exercicios-grupo .exercicio-numero {
  background-color: var(--primary-color);
  color: white;
  /* width: 10px;
  height: 30px; */
  border-radius: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  flex-shrink: 0;
  padding: 2px;
}

.exercicio-texto {
  flex: 1;
  font-size: 1rem;
  line-height: 1.4;
}

/* Modo de apresentação */
.presentation-mode .exercicios-grupo {
  background-color: white;
  border: 1px solid var(--border-color);
}

.presentation-mode .exercicios-separador::before {
  background-color: white;
}

/* Estilos para grupos com título */
.exercicios-grupo-titulo {
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.exercicios-grupo.has-title {
  padding-top: 0.5rem;
}

/* Estilo para grupo ativo */
.exercicios-grupo.grupo-ativo {
  border-left: 3px solid var(--primary-color);
}

/* Adicionar ao CSS */
.star-rating {
  display: flex;
  gap: 0.5rem;
  direction: rtl;
  /* Inverte a direção para facilitar o efeito de hover */
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 1.8rem;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input:checked~label {
  color: #ffc107;
}

.rating-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.rating-item {
  text-align: center;
}

.rating-item>label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.star-rating-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.star-rating-option input {
  display: none;
}

.star-rating-option label {
  font-size: 1.8rem;
  color: #ccc;
  transition: color 0.2s;
}

.star-rating-option input:checked+label {
  color: #ffc107;
}

.star-rating-option .rating-value {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Adicionar ao CSS */


/* Adicionar bordas entre as seções do formulário de avaliação */

#modal-avaliacao .form-section:first-child {
  /* Remove a borda e padding da primeira seção */
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.atividades {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 5px;
  padding-top: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.desempenho {
  background-color: white;
  border-radius: var(--border-radius);
  padding-bottom: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.activity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Estilizando os ícones de atividade como botões */
.activity-emoji {
  font-size: 2rem;
  text-align: center;
  cursor: pointer;
  padding: 0.5rem;
  /* Adiciona um pouco de padding para área de clique */
  border-radius: 50%;
  /* Torna o fundo circular se houver */
  transition: color 0.2s ease-in-out, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.2s ease-in-out;
  color: #a0a0a0;
  /* Cor cinza inicial */
  width: 50px;
  /* Largura fixa */
  height: 50px;
  /* Altura fixa */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  /* Borda transparente para manter o tamanho */
  -webkit-tap-highlight-color: transparent;
  /* Added this line */
}

.activity-emoji:active {
  outline: none;
  background-color: transparent;
  /* Precaution for any brief background change on tap */
}

.activity-emoji:hover {
  transform: scale(1.1);
  color: #777;
  /* Cor cinza um pouco mais escura no hover */
}

.activity-emoji.selected-activity {
  color: var(--primary-color);
  /* Cor primária quando selecionado */
  /* Efeito de glow */
  box-shadow: 0 0 12px var(--primary-color-transparent);
  /* Use uma variável CSS para a cor primária com transparência */
  /* ou text-shadow: 0 0 8px var(--primary-color); se preferir glow no texto */
  border: 2px solid var(--primary-color);
  /* Borda da cor primária quando selecionado */
}

/* Responsividade */
@media (max-width: 768px) {
  .activities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Adicionar ao monitor.css */
.ultimo-treino-container {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.85rem;
}

.ultimo-treino-label {
  color: var(--primary-color);
  font-weight: 500;
  margin: 0 0 0.25rem 0;
}

.observacoes-label {
  color: var(--text-light);
  font-style: italic;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Aumentar o tamanho do modal para acomodar mais informações */
#modal-select-ficha .modal-content {
  max-width: 650px;
}

.ficha-item {
  transition: background-color 0.2s;
}

.ficha-item:hover .ultimo-treino-container {
  color: inherit;
}

/* Estilo dos botões de ação */
.btn-action {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--primary-color);
  transition: all 0.2s;
}

.btn-action:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.btn-action.btn-avaliacao {
  background-color: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.3);
}

.btn-action.btn-avaliacao:hover {
  background-color: #2ecc71;
  color: white;
}

/* Ajustar as cores dos botões para usar a cor da academia */
.btn-action.btn-trocar-treino {
  background-color: rgba(71, 173, 178, 0.1);
  color: var(--primary-color);
  border-color: rgba(71, 173, 178, 0.3);
}

.btn-action.btn-trocar-treino:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-action.btn-trocar {
  background-color: rgba(71, 173, 178, 0.1);
  color: var(--primary-color);
  border-color: rgba(71, 173, 178, 0.3);
}

.btn-action.btn-trocar:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Botão para liberar slot */
/*
.btn-liberar-slot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  transition: all 0.2s;
}*/

.btn-liberar-slot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
}

.btn-liberar-slot:hover {
  background-color: #e74c3c;
  color: white;
}

/* Botão de edição de exercícios */
.btn-edit-exercicios {
  position: absolute;
  top: 76px;
  right: 44px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(71, 173, 178, 0.1);
  border: 1px solid rgba(71, 173, 178, 0.3);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
  transition: all 0.2s;
}

.btn-edit-exercicios:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Estilos para o modal de edição */
#modal-edit-exercicios .modal-content {
  width: 90%;
  max-width: 800px;
}

#edit-exercicios {
  /* font-family: monospace; */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Mesma fonte do site */
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Novo Switch de Desafio no Header do Modal */
.edit-exercicios-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.desafio-switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdfae6;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #f9e79f;
}

.desafio-switch-container .switch-label-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9a7d0a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.curinga-item {
  background-color: rgba(71, 173, 178, 0.05);
  border-left: 3px solid var(--primary-color);
}

.curinga-item:hover {
  background-color: rgba(71, 173, 178, 0.15);
}

/* Estilos para o container de slots */
.monitor-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  padding: 12px;
  width: 100%;
  height: calc(100vh - 80px);
  /* Altura total menos o header */
  /*overflow: auto;*/
  /* Novas propriedades para centralização vertical quando em uma linha */
  flex-wrap: wrap;
  /* Permite que os slots quebrem para a próxima linha */
  align-items: center;
  /* Centraliza verticalmente se houver apenas uma linha de slots */
  justify-content: center;
  /* Centraliza horizontalmente os slots */
}

/* Definir tamanho mínimo e máximo para os slots */
.monitor-slot {
  min-height: 300px;
  height: 100%;
  /* Ocupar toda a altura disponível */
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--card-background);
  box-shadow: var(--shadow);
  position: relative;
}

/* Ajustar o layout para diferentes quantidades de slots */
@media (min-width: 768px) {
  .monitor-container.slots-1 {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .monitor-container.slots-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }

  .monitor-container.slots-3,
  .monitor-container.slots-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    /* Distribuir altura igualmente */
  }

  .monitor-container.slots-5,
  .monitor-container.slots-6 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, 1fr);
  }

  .monitor-container.slots-7,
  .monitor-container.slots-8,
  .monitor-container.slots-9,
  .monitor-container.slots-10 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .monitor-container.slots-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .monitor-container.slots-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .monitor-container.slots-5,
  .monitor-container.slots-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .monitor-container.slots-7,
  .monitor-container.slots-8 {
    grid-template-columns: repeat(4, 1fr);
  }

  .monitor-container.slots-9,
  .monitor-container.slots-10 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Ajuste automático para modo paisagem */
@media (orientation: landscape) {
  .monitor-container {
    grid-auto-rows: minmax(0, 1fr);
    /* Distribuir altura igualmente */
    max-height: calc(100vh - 80px);
  }

  /* Ajustar para duas linhas */
  .monitor-container.slots-5,
  .monitor-container.slots-6,
  .monitor-container.slots-7,
  .monitor-container.slots-8 {
    grid-template-rows: repeat(2, 1fr);
  }

  /* Ajustar para três linhas */
  .monitor-container.slots-9,
  .monitor-container.slots-10 {
    grid-template-rows: repeat(3, 1fr);
  }
}

/* Estilos para o botão de fechar slot */
.btn-close-slot {
  background-color: var(--border-color);
  /* Vermelho #f44336;*/
  border: none;
  color: white;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  line-height: 1;
  font-weight: bold;
}

.btn-close-slot:hover {
  background-color: var(--text-light);
  /* Vermelho #d32f2f;*/
}

/* Estilos para o botão de adicionar slot */
#btn-add-slot {
  background-color: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
  margin-right: 0.1rem;
}

#btn-add-slot:hover {
  background-color: #2ecc71;
  color: white;
}

/* Estilos melhorados para os botões de ação no header */
.btn-icon-header {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-icon-header:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-icon-header .icon {
  font-size: 18px;
}

/* Estilo específico para o botão de adicionar slot */
#btn-add-slot {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

#btn-add-slot:hover {
  background-color: rgba(46, 204, 113, 0.3);
}

/* Estilo específico para o botão de tela cheia */
#btn-fullscreen {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
}

#btn-fullscreen:hover {
  background-color: rgba(52, 152, 219, 0.3);
}

/* Responsividade para os botões */
@media (max-width: 768px) {
  .btn-icon {
    margin-right: 0.5rem;
  }

  .btn-icon .icon {
    font-size: 16px;
  }
}

/* Estilos para campos lado a lado no modal de avaliação */
.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row .form-group {
  flex: 1;
}

#fitcoins {
  text-align: center;
  font-weight: bold;
}

/* Estilos para o header do campo de exercícios */
.edit-exercicios-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Estilos para o sub modal de Treinos Curinga */
.sub-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  /* Aumentado de 80% */
  max-width: 900px;
  /* Aumentado de 800px */
  height: 85vh;
  /* Definir altura máxima */
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 3100;
  display: flex;
  flex-direction: column;
}

.sub-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.sub-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background-color: var(--primary-color);
  color: white;
  z-index: 2;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.sub-modal-header h4 {
  margin: 0;
  font-size: 1.2rem;
}

.btn-close-sub {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.sub-modal-body {
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.curinga-filtro {
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 600px;
  /* Aumentado */
  display: flex;
  justify-content: center;
}

.curinga-filtro input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.curinga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  /* Cards maiores */
  gap: 1rem;
  max-height: calc(85vh - 180px);
  /* Altura ajustada considerando cabeçalho e filtro */
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Melhorias nos cards de treinos curinga */
.curinga-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* Melhorar a aparência ao passar o mouse */
.curinga-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #f0f7ff;
}

/* Melhorar a aparência quando selecionado */
.curinga-card.selected {
  border: 2px solid var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.05);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
  transform: translateY(-2px);
}

.curinga-nome {
  font-weight: 600;
  margin-bottom: 1rem;
  /* Aumentado de 0.75rem */
  color: var(--primary-color);
  font-size: 1.2rem;
  /* Aumentado de 1.1rem */
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.curinga-exercicios {
  font-size: 1rem;
  /* Aumentado de 0.9rem */
  color: #555;
  max-height: 220px;
  /* Aumentado de 150px */
  overflow-y: auto;
  white-space: pre-line;
  line-height: 1.5;
  padding: 0.5rem 0;
  flex-grow: 1;
  /* Faz o conteúdo ocupar o espaço disponível */
}

.sub-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 2;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Estilos para o botão flutuante */
.fab {
  position: fixed;
  z-index: 999;
  /* Menor que os modais (1000) */
  bottom: 15px;
  /* Posição correta na parte inferior */
  left: 15px;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
}

.fab:hover {
  opacity: 1;
  /* Volta à opacidade total ao passar o mouse */
}

.fab__btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--primary-color, #2196F3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  transition: background-color 0.3s, transform 0.3s;
}

.fab__icon-wrapper i {
  font-size: 18px;
  /* Reduzido de 24px */
}

.fab__btn:hover {
  background-color: var(--primary-color-dark, #1976D2);
  transform: scale(1.05);
}

.fab__icon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, transform 0.3s;
}

.fab__icon-times {
  opacity: 0;
  transform: rotate(-90deg);
}

.fab--is-open .fab__icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.fab--is-open .fab__icon-times {
  opacity: 1;
  transform: rotate(0);
}

/* Garantir que o popover esteja fechado por padrão */
.fab__popover {
  position: absolute;
  bottom: 52px;
  left: 0;
  width: 180px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* Só mostrar o popover quando a classe .fab--is-open estiver presente */
.fab--is-open .fab__popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab__popover-inner {
  padding: 8px 0;
}

.fab__popover-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.fab__popover-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.fab__popover-btn i {
  margin-right: 12px;
  color: var(--primary-color, #2196F3);
}

/* Estilos para cabeçalhos fixos em todos os modais */
.modal-header {
  position: sticky;
  top: 0;
  background-color: (--primary-color);
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal-body {
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Estilos para o modal de informações do aluno */
.info-aluno-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-aluno-perfil {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.info-aluno-foto-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary-color);
}

.info-aluno-foto-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-aluno-dados {
  flex: 1;
}

.info-aluno-dados h2 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
}

.info-aluno-progresso {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.progress-bar-container {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
  width: 0%;
  transition: width 0.5s ease;
}

.info-section {
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  padding: 1rem;
}

.info-section h4 {
  margin: 0 0 0.75rem 0;
  color: var(--primary-color);
  font-size: 1rem;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.5rem;
}

.info-content {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-color);
}

.info-content.scrollable {
  max-height: 360px;
  overflow-y: auto;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

.info-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background-color: #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.info-table tr:last-child td {
  border-bottom: none;
}

/* Estilos para a seção de personalização do card (ultra-compacta) */
.info-card-customization {
  padding: 0;
}

.customization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  align-items: center;
}

.color-options,
.border-style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: transform 0.2s;
}

.color-option:hover,
.border-style-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  box-shadow: 0 0 0 2px var(--primary-color);
}

.border-style-option {
  padding: 0.25rem 0.75rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.8rem;
}


/* Estilos para a seção de personalização do card (mais compacta) */
.info-card-customization {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.customization-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customization-row label {
  width: 80px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.customization-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customization-item label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.color-options {
  display: flex;
  gap: 0.25rem;
}

.color-option {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: transform 0.2s;
  padding: 0;
  margin: 0;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  box-shadow: 0 0 0 2px var(--primary-color);
}

.border-style-select,
.border-width-select {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 0.8rem;
  background-color: #fff;
  width: 100%;
}

#btn-reset-card-style {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
}

/* Indicar que foto e nome do aluno são clicáveis */
.aluno-foto,
.aluno-nome {
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Opcional: adicionar um efeito sutil ao passar o mouse */
.aluno-foto:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.aluno-nome:hover {
  color: var(--primary-color);
  transition: color 0.2s ease;
}

/* Estilos para o botão de ícone */
.btn-icon {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  color: #666;
  font-size: 18px;
}

.btn-icon:hover {
  transform: scale(1.1);
}

/* Estilos para o toggle de background */
.background-toggle {
  display: flex;
  align-items: center;
}

.toggle-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.toggle-label {
  cursor: pointer;
  width: 40px;
  height: 20px;
  background: #ccc;
  display: block;
  border-radius: 100px;
  position: relative;
}

.toggle-label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-checkbox:checked+.toggle-label {
  background: var(--primary-color, #3498db);
}

.toggle-checkbox:checked+.toggle-label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

/* Indicadores de desempenho */
.desempenho-indicadores {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.indicador {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.indicador-1 {
  background-color: #e74c3c;
  /* Vermelho para nota 1 */
}

.indicador-2 {
  background-color: #f3a96c;
  /* Laranja claro */
}

.indicador-3 {
  background-color: #ffd666;
  /* Amarelo */
}

.indicador-4 {
  background-color: #abc978;
  /* Verde claro */
}

.indicador-5 {
  background-color: #57bb8a;
  /* Verde */
}

/* Customização da grid para ser mais compacta */
.customization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  align-items: center;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-width: 150px;
}

/* Estilo para o cabeçalho da seção com botão alinhado */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.section-header h4 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1rem;


}

/* Botão de ícone pequeno e redondo */
.btn-icon-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  color: #777;
  font-size: 12px;
}

.btn-icon-small:hover {
  background-color: #e0e0e0;
  transform: scale(1.1);
}

/* Garantir que o seletor de cores sempre tenha duas linhas */
.color-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  max-width: 100%;
}

/* Ajuste para alinhamento dos botões na barra superior */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
  margin: 0;
  /* Remover margens que possam estar causando desalinhamento */
}

/* Ajustar os botões de tela cheia e adicionar slot para terem as mesmas dimensões */
#btn-fullscreen,
#btn-add-slot {
  width: 25px;
  height: 25px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 50%;
  border: 0;
}

/* Garantir que todos os ícones tenham o mesmo tamanho */
.btn-logout i,
#btn-fullscreen i,
#btn-add-slot i {
  font-size: 16px;
}

/* Estilos para o Modal de Playlist */
#modal-playlist .modal-content {
  max-width: 700px;
  width: 90%;

}

.playlist-editor-section,
.combined-playlist-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
}

.playlist-editor-section h4,
.combined-playlist-section h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

#playlist-aluno-select {
  margin-bottom: 1rem;
}

#playlist-bandas,
#playlist-musicas,
#combined-playlist-display {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 80px;
}

#btn-save-playlist {
  margin-top: 0.5rem;
}

.form-group-inline {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group-inline label {
  margin-bottom: 0;
}

.btn-icon-header i {
  color: var(--text-color);
}

/* Estilos para a seleção de slots na playlist combinada (GRID ANTERIOR - AGORA BOTÕES) */
.slot-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* Ajuste minmax para melhor responsividade */
  gap: 0.75rem;
  /* Aumentar um pouco o gap */
  margin-top: 0.5rem;
  padding: 0.75rem;
  /* Aumentar um pouco o padding */
  background-color: #f0f0f0;
  border-radius: var(--border-radius);
  border: 1px solid #e0e0e0;
  /* Adicionar uma borda sutil */
}

.slot-selection-grid div {
  /* Container para cada checkbox + label */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Aumentar o gap entre checkbox e label */
}

.slot-selection-grid input[type="checkbox"] {
  width: auto;
  /* Garante que o checkbox não ocupe 100% da largura */
  transform: scale(1.1);
  /* Aumentar um pouco o tamanho do checkbox */
}

/* Novos estilos para botões de seleção de slot */
.slot-selection-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #f0f0f0;
  border-radius: var(--border-radius);
  border: 1px solid #e0e0e0;
}

.btn-slot-aluno {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  border: 1px solid var(--primary-color);
  background-color: #fff;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.btn-slot-aluno.selected {
  background-color: var(--primary-color);
  color: #fff;
}

/* Estilos para Abas no Modal (adicionar ou ajustar) */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.tab-button {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1rem;
  color: var(--text-light);
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-bottom-color 0.2s;
}

.tab-button:hover {
  color: var(--text-color);
}

.tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.tab-content-container .tab-pane {
  display: none;
  /* Esconde todos os painéis por padrão */
}

.tab-content-container .tab-pane.active {
  display: block;
  /* Mostra apenas o painel ativo */
}

/* Ícone do Spotify no botão */
#btn-create-spotify-playlist .fa-spotify {
  margin-right: 0.5rem;
}

.btn-spotify {
  background-color: #1ED760;
}

/* Styles for the container of the Spotify bands playlist actions */

.playlist-bands-actions {
  /* Container for the Spotify bands playlist button and input */
  display: flex;
  /* Ensure flex layout */
  align-items: center;
  /* Vertically align items */
  flex-wrap: nowrap;
  /* Crucial: Prevents items from wrapping to the next line */
  gap: 0.75rem;
  /* Defines the space between the button and the input group */
}


/* Push the input container to the right */
.playlist-bands-actions #tracks-per-band-container {
  margin-left: auto;
  /* Push this item to the right */
  /* d-flex and align-items-center are already applied via HTML classes */
}

.mr-2 {
  align-self: end;
}

/* Estilos para o container dos grupos de avaliação (Antes, Durante, Depois) */
.rating-group {
  display: flex;
  flex-direction: column;
  /* Empilha os itens verticalmente */
  gap: 20px;
  /* Espaçamento entre "Antes", "Durante" e "Depois" */
  align-items: center;
  /* Centraliza os itens no container */
  margin-bottom: 20px;
  /* Espaçamento abaixo do grupo de avaliação */
}

/* Estilos para cada item de avaliação (ex: o bloco "Antes") */
.rating-item {
  display: flex;
  flex-direction: row;
  /* Label ao lado dos emojis */
  align-items: center;
  /* Centraliza o label e os emojis */
  width: 100%;
  /* Faz com que cada item ocupe a largura disponível */
  justify-content: space-between;
  /* Espaça o label e os emojis */
  padding: 5px 10px;
  /* Adiciona um pouco de padding */
}

/* Estilo para o texto "Antes", "Durante", "Depois" */
.rating-item>label {
  margin-bottom: 0;
  /* Removido, pois agora está ao lado */
  margin-right: 15px;
  /* Espaçamento entre o texto e os emojis */
  font-weight: bold;
  font-size: 1.1em;
  color: var(--text-color-dark);
  /* Ajuste a cor conforme seu tema */
  flex-shrink: 0;
  /* Evita que o label encolha demais */
}

/* Estilos para o container dos emojis */
.emoji-rating {
  display: flex;
  flex-direction: row-reverse;
  /* Importante para a seleção da direita para a esquerda */
  justify-content: flex-end;
  /* Alinha os emojis à direita dentro do seu container */
}

.emoji-rating input[type="radio"] {
  display: none;
  /* Esconde o input de rádio real */
}

.emoji-rating label {
  font-size: 2.2rem;
  /* Tamanho dos emojis - ajuste conforme necessário */
  color: #d0d0d0;
  /* Cor dos emojis não selecionados */
  cursor: pointer;
  padding: 0 4px;
  /* Pequeno espaçamento entre os emojis */
  transition: color 0.2s ease-in-out, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  text-shadow: none;
  /* Garante que não haja sombra de texto que possa interferir */
}

.emoji-rating label:hover {
  transform: scale(1.15);
  /* Efeito de zoom no hover */
}

/* Efeito de hover: colore o emoji sob o mouse e os anteriores (à direita no DOM) */
.emoji-rating label:hover,
.emoji-rating label:hover~label {
  color: #FFD700;
  /* Dourado para hover */
  /* transform: scale(1.15); */
}

/* Efeito de seleção: colore o emoji selecionado e os anteriores */
.emoji-rating input[type="radio"]:checked~label {
  color: #FFC107;
  /* Amarelo mais vibrante para selecionado */
}

/* Destaque adicional para o emoji EXATAMENTE selecionado */
.emoji-rating input[type="radio"]:checked+label {
  transform: scale(1.25);
  /* Aumenta um pouco mais o selecionado */
  text-shadow: 0 0 12px var(--primary-color);
  /* Adiciona um brilho sutil */
  border: 1px solid var(--background-color);
  border-radius: 50%;
}

/* Attempt to remove touchscreen selection artifact on emoji ratings */
.emoji-rating input[type="radio"]:focus,
.emoji-rating input[type="radio"]:active,
.emoji-rating label:focus,
.emoji-rating label:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  background-color: transparent !important;
  /* Added to ensure no unexpected background appears */
}

/* Specifically for the hidden radio buttons, ensure they are not causing any visual side effects */
.emoji-rating input[type="radio"] {
  /* -webkit-appearance: none; */
  /* Already display: none, but this can help in some cases if it wasn't */
  /* appearance: none; */
  /* opacity: 0; */
  /* Already display: none */
  /* position: absolute; */
  /* To ensure it's out of flow if it somehow renders */
  /* pointer-events: none; */
  /* To prevent any interaction if it becomes visible */
}

/* Ajustes para o modal de avaliação em geral, se necessário */
#modal-avaliacao .modal-content {
  max-width: 550px;
  min-height: 872px;
  /* Ajuste a largura se necessário */
}

#modal-avaliacao .form-section h4 {
  text-align: center;
  /* Centraliza o título "Como você se sente?" */
  margin-bottom: 5px;
}

/* Estilos para o container do switch e o texto do label */
.acompanhamento-section {
  /* border-top: 1px solid var(--border-color-light, #e0e0e0); */
  /* Removido pois já tem borda de form-section */
  /* padding-top: 1rem; */
  /* Removido pois já tem padding de form-section */
  margin-top: 0.25rem;
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Coloca o texto à esquerda e o switch à direita */
  padding: 0.5rem 0;
  /* Ajuste o padding vertical conforme necessário */
}

.switch-label-text {
  font-weight: 500;
  color: var(--text-color-dark);
  margin-right: 1rem;
  /* Espaço entre o texto e o switch */
}

/* Estilos para o Switch Toggle Moderno */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  /* Largura do switch */
  height: 26px;
  /* Altura do switch */
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  /* Cor do switch desligado */
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  /* Altura do botão deslizante */
  width: 20px;
  /* Largura do botão deslizante */
  left: 3px;
  /* Posição inicial do botão */
  bottom: 3px;
  /* Posição inicial do botão */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.switch-slider {
  background-color: var(--primary-color);
  /* Cor do switch ligado */
}

input:focus+.switch-slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.switch-slider:before {
  -webkit-transform: translateX(24px);
  /* Distância que o botão desliza */
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Estilo arredondado para o slider e o botão */
.switch-slider.round {
  border-radius: 26px;
  /* Metade da altura para ser totalmente arredondado */
}

.switch-slider.round:before {
  border-radius: 50%;
}

/* Ajustes responsivos para o modal de avaliação em telas menores */
@media (max-width: 600px) {
  /* Ponto de quebra para celulares */

  .rating-item {
    flex-direction: column;
    /* Empilha o label da pergunta e os emojis */
    align-items: flex-start;
    /* Alinha o label da pergunta à esquerda */
    gap: 10px;
    /* Espaço entre o label da pergunta e os emojis */
    padding: 10px 10px;
    /* Ajustar padding se necessário */
  }

  .rating-item>label {
    /* Label da pergunta (ex: "Como cheguei?") */
    margin-right: 0;
    /* Remove a margem direita que era para layout em linha */
    width: 100%;
    /* Faz o label ocupar a largura para melhor alinhamento */
    text-align: left;
    /* Garante que o texto do label esteja à esquerda */
    font-size: 1em;
    /* Ajustar tamanho da fonte se necessário */
  }

  .emoji-rating {
    justify-content: space-around;
    /* Distribui os emojis na largura disponível */
    width: 100%;
    /* Garante que o container dos emojis ocupe a largura */
    padding-top: 5px;
    /* Pequeno espaço acima dos emojis */
  }

  .emoji-rating label {
    /* Labels dos emojis individuais */
    font-size: 2.3rem;
    /* Aumentar um pouco os emojis para facilitar o toque */
    padding: 0 5px;
    /* Ajustar o espaçamento entre emojis se necessário */
  }

  /* Ajustar o grid de atividades para menos colunas */
  .activities-grid {
    /* grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));  */
    /* Mais flexível para diferentes larguras */
    gap: 0.5rem;
  }

  .activity-emoji {
    font-size: 1.6rem;
    /* Ajustar tamanho dos ícones de atividade */
    width: 40px;
    height: 40px;
  }

  /* Ajustar o form-row para empilhar em telas menores */
  .form-row {
    flex-direction: column;
    gap: 0;
    /* Remover gap se os form-groups já tiverem margem */
  }

  .form-row .form-group {
    margin-bottom: 1rem;
    /* Adicionar margem inferior para separar os campos empilhados */
  }

  .form-row .form-group:last-child {
    margin-bottom: 0;
  }
}

/* --- Styles for Exercise Icon Marking --- */

/* Floating Icon Menu */
.exercise-icon-menu {
  position: absolute;
  /* Positioned by JavaScript */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping */
  max-width: 260px;
  /* Force wrap after ~5 icons */
  gap: 8px;
  z-index: 1050;
  /* Above most other content */
  opacity: 0;
  /* Initially hidden, JS will make it visible after positioning */
  transition: opacity 0.1s ease-in-out;
}

.icon-menu-title {
  /* Optional title for the menu */
  font-size: 0.9em;
  font-weight: 600;
  color: #333;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  text-align: center;
  width: 100%;
}

.icon-menu-item {
  font-size: 1.8em;
  /* Size of icons in the menu */
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.2s, transform 0.2s;
}

.icon-menu-item:hover {
  background-color: #f0f0f0;
  transform: scale(1.1);
}

.icon-menu-item.remove-icon-option {
  color: #888;
  /* Distinct color for the remove option */
}

.icon-menu-item.remove-icon-option:hover {
  color: #e74c3c;
  /* Red on hover for remove */
  background-color: #fceaea;
}

/* Number Icon Styling */
.exercise-number-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
  line-height: normal;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s;
}

.exercise-number-icon:hover {
  /*transform: scale(1.1);*/
}

/*Displayed Icon positioning and styling*/
.exercicio-item {
  position: relative;
  /* overflow: visible; /* Default, should be fine */
}

.exercicio-info {
  position: relative;
  /* Positioning context for the icon */
  padding-right: 4px;
  /* Make space for the icon to sit next to text, before it visually goes "under" exercicio-grupo */
}

.exercicio-display-icon {
  position: absolute;
  top: 50%;
  right: -30px;
  /* Adjust this value carefully. Negative means icon's left edge is to the right of exercicio-info's content box.
                   A value like -10px to -15px might work for 30% overlap depending on icon size.
                   If icon is 20px wide, -10px means 10px of it is "outside" exercicio-info. */
  transform: translateY(-50%);
  font-size: 1.5em;
  opacity: 0.85;
  z-index: 0;
  /* Icon is behind exercicio-grupo's content, but above exercicio-info's background */
}

/* exercicios-grupo is the "card" that should partially hide the icon */
.exercicios-grupo {
  position: relative;
  /* Ensure it has a background to hide the icon.
     This should be handled by existing styles like .exercicios-grupo:nth-child(odd)
     or a general card background (e.g., background-color: white; or var(--card-background); )
     If not, it MUST have an opaque background for the effect to work. */
  z-index: 1;
  /* Higher than .exercicio-display-icon's z-index (which is 0 relative to exercicio-info) */
  /* This ensures exercicio-grupo's background is on top of the icon. */
}


/* Clickable series/reps/load styling (cursor:pointer is set in JS) */
.exercicio-series:hover,
.exercicio-repeticoes:hover,
.exercicio-carga:hover {
  text-decoration: underline;
  /* Add a visual cue on hover */
}

/* --- End of Styles for Exercise Icon Marking --- */

.exercicio-detalhes {
  /* This is the container for non-challenge series/reps/load */
  cursor: pointer;
}

/* --- Estilos para o Novo Modal de Adicionar Aluno --- */

/* Layout principal do modal com duas colunas */
.add-aluno-slot-content {
  display: flex;
  gap: 1.5rem;
  min-height: 500px;
  /* Altura mínima para o conteúdo */
}

/* Coluna da esquerda (busca e detalhes) */
.add-aluno-slot-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Coluna da direita (seleção de ficha e treino) */
.add-aluno-slot-selection-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: var(--border-radius);
}

/* Estilo para a lista de alunos na busca */
.add-aluno-slot-lista-alunos {
  max-height: 450px;
  overflow-y: auto;
  margin-top: 1rem;
}

/* Estilo para os detalhes do aluno (passo 2) */
.add-aluno-slot-detalhes-aluno {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.aluno-info-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.aluno-foto-details {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.aluno-nome-details {
  font-size: 1.4rem;
  font-weight: 600;
}

.history-table-container {
  flex-grow: 1;
  overflow-y: auto;
  margin-top: 1rem;
}

/* Estilo para a lista de fichas no novo modal */
.add-aluno-slot-fichas-list {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  max-height: 200px;
  overflow-y: auto;
}

/* Estilo para cada item de ficha na lista do novo modal */
.ficha-item-add-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.ficha-item-add-slot:last-child {
  border-bottom: none;
}

.ficha-item-add-slot:hover {
  background-color: #f0f8ff;
  /* Light alice blue */
}

.ficha-item-add-slot.selected {
  background-color: #e6f2ff;
  border-left: 3px solid var(--primary-color);
  padding-left: calc(0.75rem - 3px);
}

.ficha-item-add-slot .ficha-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ficha-item-add-slot .ficha-data {
  font-weight: 500;
}

.ficha-item-add-slot.inactive .ficha-data {
  color: #888;
  font-style: italic;
}

/* Esconder o texto de status, pois o switch já o indica */
.ficha-item-add-slot .status-text {
  display: none;
}

/* Container do switch para garantir que não afete o clique no item */
.ficha-item-add-slot .switch-container {
  flex-shrink: 0;
  padding-left: 1rem;
}

/* Estilos para o Switch (mais discreto) dentro do modal */
#modal-add-aluno-slot .switch {
  position: relative;
  display: inline-block;
  width: 38px;
  /* Reduzido */
  height: 20px;
  /* Reduzido */
}

#modal-add-aluno-slot .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#modal-add-aluno-slot .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

#modal-add-aluno-slot .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  /* Reduzido */
  width: 14px;
  /* Reduzido */
  left: 3px;
  /* Ajustado */
  bottom: 3px;
  /* Ajustado */
  background-color: white;
  transition: .4s;
}

#modal-add-aluno-slot input:checked+.slider {
  background-color: var(--primary-color);
}

#modal-add-aluno-slot input:checked+.slider:before {
  transform: translateX(18px);
  /* Reduzido */
}

/* Formato arredondado */
#modal-add-aluno-slot .slider.round {
  border-radius: 20px;
  /* Metade da altura */
}

#modal-add-aluno-slot .slider.round:before {
  border-radius: 50%;
}

/* Estilo para a lista de treinos */
.add-aluno-slot-treinos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.treino-item-add-slot {
  flex: 1;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.treino-item-add-slot:hover {
  background-color: #f0f0f0;
}

.treino-item-add-slot.selected {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  font-weight: 500;
}

.treino-item-add-slot small {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Estilo para a pré-visualização dos exercícios */
.add-aluno-slot-exercicios-preview {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

.add-aluno-slot-exercicios-preview ul {
  padding-left: 1.2rem;
  margin: 0;
}

.add-aluno-slot-exercicios-preview li {
  margin-bottom: 0.25rem;
}

/* Styles for the new unified modal */
#modal-add-aluno-slot .modal-content.large {
  max-width: 1350px;
  width: 95%;
}

#modal-add-aluno-slot .modal-body {
  padding: 1.0rem;
  padding-bottom: 0;
  padding-right: 0;
}

.add-aluno-details-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
}

.details-col,
.selection-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.selection-section {
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  padding: 1rem;
  border: 1px solid var(--border-color);
}

.selection-section h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  font-size: 1rem;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}

.selection-list {
  max-height: 170px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.selection-item {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
  background-color: #fff;
}

.selection-item:hover {
  background-color: #e9f7f8;
  border-color: var(--primary-color);
}

.selection-item.selected {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  border-color: var(--primary-dark);
}

/* Custom Workout Item */
.selection-item.custom-workout-item {
  border-left: 3px solid var(--secondary-color);
}

/* Add Treino Container */
.add-treino-container {
  margin-top: 0.5rem;
  padding: 0.5rem;
}

.btn-add-treino {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background-color: transparent;
  border: 2px dashed var(--primary-color);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-treino:hover {
  background-color: var(--primary-color);
  color: white;
  border-style: solid;
}

/* Input container for new treino */
.new-treino-input-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.new-treino-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

.new-treino-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(71, 173, 178, 0.2);
}

.btn-confirm-new-treino,
.btn-cancel-new-treino {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-confirm-new-treino {
  background-color: var(--success-color, #28a745);
  color: white;
}

.btn-confirm-new-treino:hover {
  background-color: #218838;
}

.btn-cancel-new-treino {
  background-color: #dc3545;
  color: white;
}

.btn-cancel-new-treino:hover {
  background-color: #c82333;
}

.exercicios-preview {
  height: 180px;
  overflow-y: auto;
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
}

.exercicios-preview ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.exercicios-preview li {
  padding: 0.25rem 0;
}

#modal-add-aluno-slot .modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

/* Estilo para o container do item da ficha, para alinhar o switch à direita */
.ficha-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Copiando os estilos do .selection-item para consistência */
  padding: 0.40rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  margin-bottom: 0.25rem;
  border: 1px solid #00000045;
  background-color: white;
}

/* Herda o estilo de hover do .selection-item */
.ficha-item-container:hover {
  background-color: #e9e9e9;
}

/* Estilo de seleção para o container, similar ao .selection-item.selected */
.ficha-item-container.selected {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-dark);
}

/* O texto dentro do container não precisa de estilos próprios de item */
.ficha-item-container .selection-item {
  padding: 0;
  border: none;
  margin: 0;
  background: transparent;
  flex-grow: 1;
  color: inherit;
  /* Herda a cor do container (importante para o modo selecionado) */
  font-weight: inherit;
  /* Herda o peso da fonte do container */
}

/* Remove o hover do texto para não conflitar com o hover do container */
.ficha-item-container .selection-item:hover {
  background-color: transparent;
}

/* Switch Discreto e Pequeno */
.switch-toggle.small-switch {
  width: 34px;
  height: 20px;
}

.switch-toggle.small-switch .switch-slider {
  background-color: #e0e0e0;
}

/* No modo selecionado, o fundo do switch precisa ser ajustado */
.ficha-item-container.selected .switch-toggle.small-switch .switch-slider {
  background-color: rgba(255, 255, 255, 0.4);
}

.switch-toggle.small-switch .switch-slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
}

.switch-toggle.small-switch input:checked+.switch-slider {
  background-color: var(--secondary-color);
  /* Usar cor secundária para o 'on' */
}

.ficha-item-container.selected .switch-toggle.small-switch input:checked+.switch-slider {
  background-color: #fff;
  /* Fundo branco quando o item está selecionado */
}

.ficha-item-container.selected .switch-toggle.small-switch input:checked+.switch-slider:before {
  background-color: var(--primary-color);
  /* Bolinha com a cor primária */
}


.switch-toggle.small-switch input:checked+.switch-slider:before {
  transform: translateX(14px);
}

.switch-toggle.small-switch .switch-slider.round {
  border-radius: 20px;
}

/* Radio Toggle (para seleção exclusiva de fichas) */
.radio-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.radio-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-mark {
  height: 20px;
  width: 20px;
  background-color: #e0e0e0;
  border-radius: 50%;
  border: 2px solid #ccc;
  transition: all 0.2s ease;
}

.radio-toggle input[type="radio"]:checked~.radio-mark {
  background-color: var(--primary-color);
  border-color: var(--primary-dark, var(--primary-color));
}

.radio-mark:after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.radio-toggle input[type="radio"]:checked~.radio-mark:after {
  display: block;
}

/* Estilos para ficha-item-container com radio selecionado */
.ficha-item-container.selected .radio-mark {
  background-color: white;
  border-color: white;
}

.ficha-item-container.selected .radio-mark:after {
  background-color: var(--primary-color);
}

/* Hover state */
.radio-toggle:hover .radio-mark {
  border-color: var(--primary-color);
}


/* Uppercase Mode Switch in FAB */
.fab__popover-item.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #333;
  background: white;
  border: none;
  width: 100%;
  text-align: left;
  cursor: default;
  border-bottom: 1px solid #f0f0f0;
}

.fab__popover-item.switch-item:hover {
  background-color: #f9f9f9;
}

.fab__popover-item.switch-item i {
  color: #666;
}

/* Uppercase Mode Styles */
.monitor-container.uppercase-mode .exercicios-list .exercicio-nome {
  text-transform: uppercase !important;
}

/* Custom Multi-Select Styles */
.custom-select-container {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}

body.dark-mode .custom-select-container {
  background-color: #2c2c2c;
  border-color: #444;
  color: #eee;
}

.select-display {
  padding: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
}

.select-display:after {
  content: '\25BC';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  pointer-events: none;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 1050;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

body.dark-mode .select-options {
  background-color: #2c2c2c;
  border-color: #444;
}

.select-option-item {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.select-option-item:hover {
  background-color: #f0f0f0;
}

body.dark-mode .select-option-item:hover {
  background-color: #3d3d3d;
}

.select-option-item input[type="checkbox"] {
  margin-right: 10px;
  width: auto;
}

.custom-select-container.open .select-options {
  display: block;
}

.select-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1040;
  background: transparent;
}

.custom-select-container.open .select-overlay {
  display: block;
}

.form-group {
  position: relative;
}

/* ============================
   Footer Menu (Alunos do Dia)
   ============================ */

.footer-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: 16px 16px 0 0;
}

.footer-menu.collapsed {
  transform: translateY(100%);
}

.footer-tab {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
}

.footer-content {
  padding: 15px;
  padding-bottom: 0;
  max-width: 100%;
  overflow-x: auto;
}

.daily-students-list {
  display: flex;
  gap: 15px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) #f0f0f0;
}

.daily-student-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 2px;*/
  cursor: pointer;
  transition: transform 0.2s;
  width: 70px;
  /* Fixed width for alignment */
  flex-shrink: 0;
}

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

.daily-student-foto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #eee;
}

.daily-student-nome {
  font-size: 0.75rem;
  text-align: center;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Adjust chevron rotation */
.footer-menu.collapsed .footer-tab i {
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.footer-menu:not(.collapsed) .footer-tab i {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

/* ============================
   Monitor Improvements (Drag & Drop + Flip)
   ============================ */

/* Drag and Drop */
.monitor-slot[draggable="true"] {
  /*cursor: grab;*/
}

.monitor-slot.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.monitor-slot.drag-over .monitor-slot-inner {
  border: 4px dashed var(--primary-color) !important;
  background-color: rgba(71, 173, 178, 0.1);
  border-radius: var(--border-radius);
  box-sizing: border-box;
}

/* Fix for cursor oscillation: Disable pointer events on children during drag */
.monitor-container.is-dragging-active .monitor-slot * {
  pointer-events: none;
}

/* Note: Apply border to inner or handle better layout shifts */

/* Note: Apply border to inner or handle better layout shifts */

/* Flip Card Structure */
.monitor-slot {
  perspective: 1000px;
  background-color: transparent !important;
  /* Fix for flip animation */
  border: none !important;
  box-shadow: none !important;
}

.monitor-slot-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  background-color: var(--card-background);
  /* Ensure base bg */
  border-radius: var(--border-radius);
  /* Move border and shadow from .monitor-slot to here for flip consistency if needed? */
  /* monitor-slot already has border/shadow usually */
}

.monitor-slot-inner.flipped {
  transform: rotateY(180deg);
}

/* Front and Back Faces */
.monitor-slot-front,
.monitor-slot-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

/* Front Content */
.monitor-slot-front {
  background-color: var(--card-background);
  z-index: 2;
  border-radius: var(--border-radius);
}

/* Back Content */
.monitor-slot-back {
  background-color: rgb(71 173 178 / 8%);
  transform: rotateY(180deg);
  padding: 10px;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  /* Different look for back */
  z-index: 1;
}

/* Buttons */
.btn-flip-bottom {
  position: absolute;
  bottom: 4px;
  right: 8px;
  /* transform: translateX(-50%); */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #47adb2;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  z-index: 1009;
  opacity: 0.8;
}

.btn-flip-bottom:hover {
  background-color: var(--primary-color);
  color: white;
  /*transform: translateX(-50%) scale(1.1) rotate(15deg);*/
  /* Maintain centering during hover */
}

.slot-back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.slot-back-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.btn-flip-back {
  /* Position absolute to match the bottom button style if desired, or keep in header? 
     User requested "btn-flip-back' deve ser mantido na mesma posição do 'btn-flip-bottom' - centralizado na parte inferior do slot"
  */
  position: absolute;
  bottom: 8px;
  right: 8px;
  /* transform: translateX(-50%); */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  z-index: 10;
  opacity: 0.8;
}

.btn-flip-back:hover {
  background-color: var(--primary-color);
  color: white;
  /*transform: translateX(-50%) scale(1.1) rotate(-15deg);*/
}

/* Workout Selector Buttons */
.workout-selector-buttons {
  margin-top: 5px;
}

.btn-workout-select {
  background: white;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-workout-select:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

.btn-workout-select.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.slot-back-content {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Layout fix for slot back header */
.slot-back-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  flex-direction: row !important;
  margin-bottom: 5px;
}

/* CSS para o Botao e Menu Flutuante de Personalizaçãoo */

/* Botao no cabeçalho do slot */
.btn-customize-card {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  position: absolute;
  top: 76px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(71, 173, 178, 0.1);
  border: 1px solid rgba(71, 173, 178, 0.3);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
  transition: all 0.2s;
}

.btn-customize-card:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Menu Flutuante */
.card-customization-menu {
  position: absolute;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 15px;
  width: 240px;
  z-index: 10000;
  font-size: 0.9rem;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-customization-menu label {
  font-weight: 600;
  color: #555;
  font-size: 0.85em;
  margin-bottom: 5px;
  display: block;
}

.customization-section {
  width: 100%;
}

/* Grid de Cores Compacto */
.color-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-option-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.color-option-small:hover {
  transform: scale(1.1);
}

.color-option-small.selected {
  border-color: #333;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

/* Layout em Linha */
.customization-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.customization-section.half {
  width: 48%;
}

/* Inputs Compactos */
.custom-select-small {
  width: 100%;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 0.85rem;
  background-color: #fff;
}

.row-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.row-center label {
  margin-bottom: 0;
}

/* Bot�o de Reset */
.menu-actions {
  margin-top: 5px;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.btn-text-small {
  background: none;
  border: none;
  color: #999;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.btn-text-small:hover {
  color: #d9534f;
}



/* Header do menu com Reset */
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.menu-header label {
  margin-bottom: 0 !important;
  /* Override label defaults */
}

/* Bot�o de Reset Icone */
.btn-reset-float {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-reset-float:hover {
  background-color: #f0f0f0;
  color: #555;
  transform: rotate(-180deg);
}

/* Slot para menu de opções do exercício (Trigger Menu) */
.exercise-menu-trigger-slot {
  width: 14px;
  height: 14px;
  border: 2px solid #ddd;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  opacity: 0;
  /* Invisível por padrão */
  transition: all 0.2s ease;

  /* Posicionamento - Ajustado para ficar onde o ícone ficaria ou próximo */
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  /* Alta prioridade de clique */
}

/* Mostrar ao passar o mouse sobre o item do exercício */
.exercicio-item:hover .exercise-menu-trigger-slot {
  opacity: 1;
}

/* Estado hover do próprio slot */
.exercise-menu-trigger-slot:hover {
  background-color: var(--primary-color, #4CAF50);
  border-color: var(--primary-color, #4CAF50);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 76, 175, 80), 0.2);
}

/* Badge Notification Style */
.badge-notification {
  background-color: #f57575;
  opacity: 0.5;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  vertical-align: middle;
  scale: 0.9;
}

/* Quick Edit Menu */
.quick-edit-menu {
  position: absolute;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 10000;
  min-width: 220px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-edit-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quick-edit-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
  min-width: 50px;
}

.quick-edit-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.quick-edit-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #555;
}

.quick-edit-btn:hover {
  background-color: #e0e0e0;
}

.quick-edit-input {
  width: 50px;
  text-align: center;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.quick-edit-actions {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}

.btn-quick-save {
  padding: 6px 12px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.btn-quick-save:hover {
  background-color: var(--primary-dark);
}

/* === Grid de Seleção de Alunos (Portado de fichas.css) === */
.students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
  padding: 1rem;
  max-height: 55vh;
  /* Altura ajustada para caber no modal */
  overflow-y: auto;
}

.student-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  border-radius: 12px;
  background: white;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.student-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.student-card:active {
  transform: translateY(-1px);
}

.student-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 3px solid #e9ecef;
  transition: border-color 0.2s;
}

.student-card:hover img {
  border-color: var(--primary-color);
}

.student-card .name {
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Estado Vazio */
.students-grid-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  grid-column: 1 / -1;
  /* Ocupar toda a largura */
}

.students-grid-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.students-grid-empty p {
  margin: 0;
  font-size: 0.95rem;
}

/* Ajuste no container de busca para combinar */
.search-container {
  padding: 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
}

.search-container input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--border-color);
  border-radius: 25px;
  display: block;
  /* Garantir block */
}

.search-container input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(71, 173, 178, 0.15);
}

/* ==========================================
   Seções de Mobilidades e Alongamentos
   ========================================== */

.slot-extra-section {
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Mobilidades - Tema Amarelo */
.mobilidades-section {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border-left: 4px solid #ffc107;
  margin-bottom: 12px;
  justify-content: center;
}

.mob-title {
  display: block;
  color: #e6a700;
  font-size: 0.95em;
  width: 100%;
  margin-bottom: 4px;
}

.mob-circles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mob-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: linear-gradient(145deg, #ffc107, #ffb300);
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mob-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
}

/* Alongamentos - Tema Azul */
.alongamentos-section {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 4px solid #2196f3;
  margin-top: 12px;
  justify-content: center;
}

.along-title {
  display: block;
  color: #1565c0;
  font-size: 0.95em;
  width: 100%;
  margin-bottom: 4px;
}

.along-circles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.along-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: linear-gradient(145deg, #2196f3, #1976d2);
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.along-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.5);
}

/* Responsividade para círculos */
@media (max-width: 768px) {

  .mob-circle,
  .along-circle {
    min-width: 32px;
    height: 32px;
    font-size: 1.1em;
  }
}

/* ============================
   Popover de Edição Rápida (Compacto)
   ============================ */

.quick-edit-popover {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 280px;
  display: none;
  animation: popoverSlideIn 0.2s ease-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.quick-edit-popover.visible {
  display: block;
}

@keyframes popoverSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.quick-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--primary-color, #47ADB2) 0%, #3d9ca0 100%);
  border-radius: 10px 10px 0 0;
  color: white;
}

.quick-edit-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.quick-edit-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-edit-help {
  cursor: help;
  opacity: 0.8;
  font-size: 0.9rem;
}

.quick-edit-help:hover {
  opacity: 1;
}

.quick-edit-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.quick-edit-close:hover {
  opacity: 1;
}

.quick-edit-body {
  padding: 10px 12px;
}

.quick-edit-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.quick-edit-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quick-edit-field label {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2px;
}

.quick-edit-field input {
  width: 100%;
  padding: 6px 4px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  text-align: center;
  font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.quick-edit-field input:focus {
  outline: none;
  border-color: var(--primary-color, #47ADB2);
  box-shadow: 0 0 0 2px rgba(71, 173, 178, 0.2);
}

#quick-edit-full-line {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: 'Consolas', 'Monaco', monospace;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#quick-edit-full-line:focus {
  outline: none;
  border-color: var(--primary-color, #47ADB2);
  box-shadow: 0 0 0 2px rgba(71, 173, 178, 0.2);
}

.quick-edit-footer {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
  justify-content: flex-end;
}

.btn-evolution {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-evolution:hover {
  background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3);
}

.btn-save {
  background: linear-gradient(135deg, var(--primary-color, #47ADB2) 0%, #3d9ca0 100%);
  border: none;
  color: white;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-save:hover {
  background: linear-gradient(135deg, #5bc0c4 0%, #47ADB2 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(71, 173, 178, 0.3);
}

/* Cursor clicável nos badges de exercício */
.exercicio-detalhes,
.exercicio-desafio {
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.exercicio-detalhes:hover {
  background-color: #e8f5e9;
  transform: scale(1.02);
}

.exercicio-desafio:hover {
  background-color: #ffcc80;
  transform: scale(1.02);
}