/* ============================================================
   Tela de reserva — carrega depois de style.css e reusa os tokens.
   Mesmo sistema "Marcação": traço grosso, canto vivo, nada de pílula.
   Mobile first, como o resto.
   ============================================================ */

.pagina-agenda { background: var(--piso); }

.agenda-banda { padding-top: clamp(6.5rem, 14vw, 8rem); min-height: 100vh; }
.agenda-titulo { margin-bottom: 1.5rem; }

.voltar-site {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: var(--alvo);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cal-fraca);
}
.voltar-site svg { width: 1.2em; height: 1.2em; }

/* ---------- Passos ---------- */
/* No celular só o passo atual aparece por extenso; os outros viram número. */

.passos {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;   /* style.css só zera <ul> */
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: var(--linha) solid var(--linha-cor);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
}
.passos li {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--cal-fraca);
  opacity: .5;
}
.passos li.atual { opacity: 1; color: var(--cal); }
.passos li.feito { opacity: 1; color: var(--cal-fraca); }

.passo-n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border: var(--linha) solid currentColor;
  font-size: .95rem;
}
.passos li.atual .passo-n { background: var(--laranja); border-color: var(--laranja); color: var(--breu); }
.passo-nome { display: none; font-size: 1rem; letter-spacing: .03em; }
.passos li.atual .passo-nome { display: inline; }

.passos li + li::before {
  content: "";
  width: 1.25rem;
  height: var(--linha);
  background: var(--linha-cor);
  flex: none;
}

/* ---------- Painéis ---------- */

.painel-titulo { margin-bottom: 1.5rem; }

.painel-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--linha) solid var(--linha-cor);
}
.painel-acoes .btn-cheio { margin-left: auto; }
.painel-acoes .btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Passo 1: escolha da quadra ---------- */

.opcoes { display: grid; gap: 1rem; }

.opcao {
  display: grid;
  gap: .35rem;
  text-align: left;
  padding: 1rem;
  background: none;
  color: var(--cal);
  border: var(--linha) solid var(--linha-cor);
  cursor: pointer;
  font: inherit;
  transition: border-color .2s, background-color .2s;
}
.opcao.escolhida { border-color: var(--laranja); background: rgba(242,101,34,.08); }

.opcao-figura {
  display: block;
  width: 100%;
  aspect-ratio: 39 / 22;
  margin-bottom: .6rem;
  background: var(--fundo);
  border: 1px solid var(--linha-cor);
  position: relative;
}
.opcao-figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.opcao-nome { font-size: 1.6rem; line-height: 1; }
.quadra-parquet .opcao-nome { color: var(--laranja); }
.quadra-society .opcao-nome { color: var(--amarelo); }

.opcao-piso { font-size: .9rem; color: var(--cal-fraca); }
.opcao-preco { font-size: 1.5rem; margin-top: .3rem; }

/* ---------- Passo 2: calendário e horários ---------- */

.agenda { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; }

.mes-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .8rem;
}
.mes-topo strong { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }

.mes-btn {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  flex: none;
  background: none;
  border: var(--linha) solid var(--linha-cor);
  color: var(--cal);
  cursor: pointer;
  transition: border-color .2s;
}
.mes-btn svg { width: 1.4rem; height: 1.4rem; }
.mes-btn:disabled { opacity: .3; cursor: not-allowed; }

.semana, .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.semana {
  margin-bottom: 2px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cal-fraca);
  text-align: center;
}

.dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  background: none;
  border: 1px solid var(--linha-cor);
  color: var(--cal);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.dia.vazio { border-color: transparent; cursor: default; }
.dia:disabled { color: rgba(237,231,218,.34); border-color: rgba(237,231,218,.08); cursor: not-allowed; }
.dia.hoje { border-color: var(--cal-fraca); font-weight: 700; }
.dia.escolhido { background: var(--laranja); border-color: var(--laranja); color: var(--breu); font-weight: 700; }

.horarios-rotulo { display: block; color: var(--laranja); margin-bottom: .8rem; }

.grade-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .4rem; }
.grade-horarios:empty { display: none; }

.hora {
  min-height: var(--alvo);
  display: grid;
  place-items: center;
  background: none;
  border: var(--linha) solid var(--linha-cor);
  color: var(--cal);
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.hora:disabled {
  /* Precisa continuar legível: é assim que se descobre qual horário já foi */
  color: rgba(237,231,218,.48);
  border-color: rgba(237,231,218,.1);
  text-decoration: line-through;
  cursor: not-allowed;
}
.hora.escolhida { background: var(--laranja); border-color: var(--laranja); color: var(--breu); }

.legenda-horarios {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--cal-fraca);
}
.legenda-horarios .amostra {
  width: 1.1rem;
  height: 1.1rem;
  border: var(--linha) solid var(--linha-cor);
  flex: none;
}
.legenda-horarios .amostra + .amostra,
.legenda-horarios .amostra:not(:first-child) { margin-left: .8rem; }
.legenda-horarios .ocupado { border-color: rgba(237,231,218,.1); background: repeating-linear-gradient(
  -45deg, transparent, transparent 3px, rgba(237,231,218,.15) 3px, rgba(237,231,218,.15) 5px); }

/* ---------- Passo 3: abas e resumo ---------- */

.abas { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: var(--linha) solid var(--linha-cor); }
.aba {
  flex: 1;
  min-height: var(--alvo);
  padding: .5rem 1rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--cal-fraca);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.aba.atual { color: var(--cal); border-bottom-color: var(--laranja); }

/* Os campos herdam .campo de style.css, que foi desenhado para fundo
   claro. Aqui a superfície é escura, então o traço e o texto invertem. */
.pagina-agenda .campo label { color: var(--cal-fraca); }
.pagina-agenda .campo input,
.pagina-agenda .campo select,
.pagina-agenda .campo textarea {
  color: var(--cal);
  border-bottom-color: var(--linha-cor);
}
.pagina-agenda .campo input:focus,
.pagina-agenda .campo select:focus,
.pagina-agenda .campo textarea:focus { border-bottom-color: var(--laranja); }

.link-secundario { font-size: .9rem; }
.link-secundario a { color: var(--cal-fraca); text-decoration: underline; text-underline-offset: 3px; }

.resumo { border: var(--linha) solid var(--linha-cor); padding: 1.2rem; }
.resumo .rotulo { color: var(--laranja); margin-bottom: .8rem; }
.resumo dl { display: grid; gap: .1rem; }
.resumo dl div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linha-cor);
  font-size: .95rem;
}
.resumo dt { color: var(--cal-fraca); }
.resumo dd { font-weight: 600; margin-left: auto; text-align: right; }

.resumo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  font-size: .95rem;
  color: var(--cal-fraca);
}
.resumo-total strong { font-size: 1.7rem; color: var(--cal); }

.resumo-nota {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--cal-fraca);
  padding-top: .8rem;
  border-top: var(--linha) solid var(--linha-cor);
}

/* ---------- Confirmação ---------- */

.confirmado { max-width: 34rem; }
.confirmado-marca {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.2rem;
  background: var(--laranja);
  color: var(--breu);
}
.confirmado-marca svg { width: 2.2rem; height: 2.2rem; }
.confirmado h2 { margin-bottom: .6rem; }
.confirmado p { color: var(--cal-fraca); margin-bottom: 1.8rem; }
.confirmado-acoes { display: grid; gap: .7rem; }

.pagina-agenda .rodape { padding-block: 2rem; }

/* ============================================================
   560px
   ============================================================ */

@media (min-width: 560px) {
  .passo-nome { display: inline; }
  .opcoes { grid-template-columns: 1fr 1fr; }
  .confirmado-acoes { display: flex; flex-wrap: wrap; }
}

/* ============================================================
   900px
   ============================================================ */

@media (min-width: 900px) {
  .agenda { grid-template-columns: 1fr 1fr; }
  .opcao { padding: 1.2rem; }
  .dia { min-height: 3rem; }
}

/* ============================================================
   Passagem de mouse
   ============================================================ */

@media (hover: hover) {
  .voltar-site:hover { color: var(--cal); }
  .opcao:hover { border-color: var(--cal-fraca); }
  .opcao.escolhida:hover { border-color: var(--laranja); }
  .mes-btn:not(:disabled):hover { border-color: var(--cal); }
  .dia:not(:disabled):not(.vazio):not(.escolhido):hover { background: rgba(237,231,218,.1); }
  .hora:not(:disabled):not(.escolhida):hover { border-color: var(--cal); }
  .aba:hover { color: var(--cal); }
  .link-secundario a:hover { color: var(--laranja); }
}