/* ESTILOS DA PÁGINA DE HORÁRIOS — responsivo (tabela no desktop, cartões no mobile) */

.horarios__container {
  padding: 2rem 0;
}

/* ---- Legenda ---- */
.horarios__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.horarios__legenda-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--small-font-size);
}

.horarios__legenda-cor {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================================
   VISÃO TABELA (telas largas)
   ========================================================= */
.horarios__tabela-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.horarios__tabela {
  width: 100%;
  min-width: 760px;
}

.horarios__cabecalho,
.horarios__linha {
  display: grid;
  grid-template-columns: 70px repeat(var(--cols, 7), 1fr);
}

.horarios__cabecalho {
  background-color: var(--first-color);
  color: #fff;
  font-weight: var(--font-semi-bold);
}

.horarios__linha:nth-child(odd)  { background-color: var(--container-color); }
.horarios__linha:nth-child(even) { background-color: var(--container-color-alt); }

.horarios__celula {
  padding: 0.85rem 0.5rem;
  text-align: center;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.horarios__celula-cabecalho {
  padding: 0.75rem 0.5rem;
  font-weight: var(--font-semi-bold);
}

.horarios__celula-horario {
  font-weight: var(--font-semi-bold);
  background-color: var(--first-color-lighter);
  color: var(--title-color);
}

.horarios__celula-aula {
  position: relative;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.horarios__celula-disponivel { cursor: pointer; transition: transform 0.3s; }
.horarios__celula-disponivel:hover { transform: scale(1.05); z-index: 1; }
.horarios__celula-indisponivel { opacity: 0.7; }

.horarios__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
}

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

.horarios__categoria { font-weight: var(--font-semi-bold); font-size: 0.9rem; }
.horarios__obs { font-size: 0.75rem; opacity: 0.9; }
.horarios__whatsapp {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* =========================================================
   VISÃO CARTÕES (mobile) — escondida por padrão
   ========================================================= */
.horarios__cards {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

.horarios__card {
  background-color: var(--container-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 1rem 1rem 0.5rem;
}

.horarios__card-dia {
  font-size: var(--h3-font-size);
  color: var(--first-color);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--first-color-lighter);
}

.horarios__card-aula {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.6rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--first-color);
  background-color: var(--container-color-alt);
  color: var(--text-color);
}

.horarios__card-aula.is-disponivel { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.horarios__card-aula.is-disponivel:active,
.horarios__card-aula.is-disponivel:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.horarios__card-aula.is-indisponivel { opacity: 0.65; }

.horarios__card-hora {
  font-weight: var(--font-semi-bold);
  font-size: 1rem;
  color: var(--title-color);
  min-width: 3.2rem;
}

.horarios__card-meio {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.horarios__card-cat { font-weight: var(--font-semi-bold); font-size: 0.92rem; }
.horarios__card-obs { font-size: 0.78rem; color: var(--text-color-light); }

.horarios__card-acao {
  font-size: 0.8rem;
  font-weight: var(--font-medium);
  color: var(--first-color);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.horarios__card-aula.is-indisponivel .horarios__card-acao { color: var(--text-color-light); }

/* ---- Informações adicionais ---- */
.horarios__info-adicionais {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--container-color);
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.horarios__info-adicionais h3 { margin-bottom: 1rem; color: var(--title-color); }
.horarios__info-adicionais ul { list-style-type: disc; padding-left: 1.5rem; }
.horarios__info-adicionais li { margin-bottom: 0.5rem; }

/* =========================================================
   Troca tabela ↔ cartões
   ========================================================= */
@media screen and (max-width: 767px) {
  .horarios__tabela-wrap { display: none; }
  .horarios__cards { display: flex; }
}

/* =========================================================
   Vagas (badge) — destaque para poucas vagas
   ========================================================= */
.horarios__vagas {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--font-semi-bold);
  padding: 2px 8px;
  border-radius: 999px;
  margin: 2px 0;
}
.horarios__vagas.is-ok { background: rgba(76, 175, 80, .18); color: #2e7d32; }
.horarios__vagas.is-poucas { background: rgba(255, 152, 0, .22); color: #e65100; }
.horarios__vagas.is-urgente { background: #e53935; color: #fff; animation: vagaPulse 1.4s ease-in-out infinite; }
.horarios__vagas.is-cheia { background: rgba(127,127,127,.2); color: var(--text-color-light); }
/* nas células coloridas da tabela, o badge precisa de fundo claro */
.horarios__celula-aula .horarios__vagas.is-ok { background: rgba(255,255,255,.9); color: #2e7d32; }
.horarios__celula-aula .horarios__vagas.is-poucas { background: #fff3e0; color: #e65100; }

@keyframes vagaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229,57,53,.5); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(229,57,53,0); }
}

/* célula/card com poucas vagas ganha contorno de atenção */
.horarios__celula-poucas { outline: 2px solid #ff9800; outline-offset: -2px; }
.horarios__card-aula.is-poucas { box-shadow: 0 0 0 2px rgba(255,152,0,.55); }

/* =========================================================
   Alerta de aula experimental (discreto, mas chamativo)
   ========================================================= */
.horarios__alerta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(100deg, rgba(76,175,80,.12), rgba(76,175,80,.04));
  border: 1px solid rgba(76,175,80,.4);
  border-left: 4px solid #4CAF50;
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.75rem;
  font-size: var(--small-font-size);
  color: var(--text-color);
}
.horarios__alerta strong { color: var(--title-color); }
.horarios__alerta-ic {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: #4CAF50; color: #fff; border-radius: 50%;
  animation: vagaPulse 1.8s ease-in-out infinite;
}

/* =========================================================
   Dicas + endereço
   ========================================================= */
.horarios__dicas {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background-color: var(--container-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.horarios__dicas h3 { margin-bottom: 1.25rem; color: var(--first-color); font-size: var(--h3-font-size); }
.horarios__dica, .horarios__endereco {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--container-color-alt);
}
.horarios__endereco { border-bottom: none; }
.horarios__dica p, .horarios__endereco p { font-size: var(--small-font-size); line-height: 1.6; color: var(--text-color); }
.horarios__dica strong, .horarios__endereco strong { color: var(--title-color); }
.horarios__dica-ic {
  flex-shrink: 0; width: 32px; height: 32px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--first-color-lighter); color: var(--first-color-alt);
  border-radius: 50%; font-size: 0.9rem;
}
.horarios__maps {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.4rem; color: var(--first-color); font-weight: var(--font-medium);
  white-space: nowrap;
}
.horarios__maps:hover { color: var(--first-color-alt); }

/* =========================================================
   Dúvidas + botão "Conheça o professor"
   ========================================================= */
.duvidas__box {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.duvidas__texto {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--first-color-lighter);
  border-radius: 0.6rem;
  background: var(--container-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  resize: vertical;
  outline: none;
}
.duvidas__texto:focus { border-color: var(--first-color); }
.duvidas__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.85rem 1.25rem; border: none; border-radius: 0.6rem;
  background: #25D366; color: #fff; font-family: var(--body-font);
  font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); cursor: pointer;
  transition: filter .2s ease;
}
.duvidas__btn:hover { filter: brightness(0.96); }
.duvidas__prof {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  max-width: 560px; margin: 1.25rem auto 0; min-height: 48px;
  padding: 0.85rem 1.25rem; border-radius: 0.6rem;
  border: 2px solid var(--first-color); color: var(--first-color);
  font-weight: var(--font-semi-bold); transition: background .2s ease, color .2s ease;
}
.duvidas__prof:hover { background: var(--first-color); color: #fff; }

/* =========================================================
   Modal de agendamento
   ========================================================= */
.ag-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.ag-modal.is-open { opacity: 1; visibility: visible; }
.ag-modal__box {
  position: relative;
  width: min(440px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: var(--container-color);
  border-radius: 0.85rem;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.ag-modal__close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  width: 40px; height: 40px; border: none; background: transparent;
  font-size: 1.8rem; line-height: 1; color: var(--text-color-light); cursor: pointer;
}
.ag-modal__close:hover { color: var(--first-color); }
.ag-modal__titulo-h { font-size: var(--h3-font-size); color: var(--title-color); margin-bottom: 0.35rem; }
.ag-modal__titulo-h i { color: #25D366; }
.ag-modal__slot { font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: 1.1rem; }
.ag-modal__slot strong { color: var(--first-color); }
.ag__campo { display: block; margin-bottom: 1rem; }
.ag__campo > span { display: block; font-size: var(--smaller-font-size); font-weight: var(--font-semi-bold); color: var(--title-color); margin-bottom: 0.4rem; }
.ag__campo input[type=text], .ag__campo select, .ag__campo textarea {
  width: 100%; padding: 0.65rem 0.8rem;
  border: 1px solid var(--first-color-lighter); border-radius: 0.5rem;
  background: var(--body-color); color: var(--text-color);
  font-family: var(--body-font); font-size: var(--normal-font-size); outline: none;
}
.ag__campo input:focus, .ag__campo select:focus, .ag__campo textarea:focus { border-color: var(--first-color); }
/* Amigos no agendamento */
.ag__amigos { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.ag__amigo { display: flex; gap: 0.5rem; align-items: center; }
.ag__amigo input {
  flex: 1; padding: 0.65rem 0.8rem;
  border: 1px solid var(--first-color-lighter); border-radius: 0.5rem;
  background: var(--body-color); color: var(--text-color);
  font-family: var(--body-font); font-size: var(--normal-font-size); outline: none;
}
.ag__amigo input:focus { border-color: var(--first-color); }
.ag__amigo-rm {
  flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 0.5rem;
  background: var(--container-color-alt); color: var(--text-color-light);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ag__amigo-rm:hover { background: #ffe0e0; color: #e53935; }
.ag__add-amigo {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; margin-top: 0.25rem;
  padding: 0.75rem 1rem; border: none; border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--first-color), var(--first-color-alt));
  color: #fff; font-family: var(--body-font); font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold); cursor: pointer;
  box-shadow: 0 4px 14px hsla(var(--hue-color), 69%, 45%, 0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ag__add-amigo i { font-size: 1rem; }
.ag__add-amigo:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 7px 20px hsla(var(--hue-color), 69%, 45%, 0.42);
}
.ag__add-amigo:active { transform: translateY(0); }
.ag__add-amigo:disabled { opacity: 0.5; cursor: not-allowed; }

.ag__focos { display: flex; flex-direction: column; gap: 0.5rem; }
.ag__check { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: var(--small-font-size); color: var(--text-color); }
.ag__check input { width: 1.05rem; height: 1.05rem; accent-color: var(--first-color); }
.ag-modal__enviar {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 50px; margin-top: 0.5rem; padding: 0.85rem; border: none; border-radius: 0.6rem;
  background: #25D366; color: #fff; font-family: var(--body-font);
  font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); cursor: pointer;
  transition: filter .2s ease;
}
.ag-modal__enviar:hover { filter: brightness(0.96); }