/* =====================================================================
   Fluxo de agendamento do paciente — mobile first, poucos cliques
   (paleta branco + dourado + onyx)
   ===================================================================== */

body.pagina-agendar { background: var(--fundo-suave); }

.topo-agendar {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: var(--cor-primaria-escura);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: sticky; top: 0; z-index: 30;
}
.topo-agendar .voltar-passo {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
    color: #F4EFE2;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s ease;
}
.topo-agendar .voltar-passo:hover { border-color: var(--cor-acento); }
.topo-agendar .marca-mini { display: flex; align-items: center; }
.topo-agendar .marca-mini .logo-marca { max-height: 40px; max-width: 200px; filter: brightness(0) invert(1); }
.topo-agendar .marca-mini .marca-fallback-nome { font-size: 17px; color: #F4EFE2; }
.topo-agendar .marca-mini .marca-fallback svg { color: var(--cor-acento); }

.pontos-progresso { display: flex; gap: 6px; margin-left: auto; }
.pontos-progresso .ponto { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s ease, width .2s ease; }
.pontos-progresso .ponto.ativo { background: var(--cor-primaria); width: 22px; border-radius: 999px; }

.miolo-agendar { max-width: 560px; margin: 0 auto; padding: 28px 18px 60px; }
.passo { animation: entrarPasso .35s ease both; }
@keyframes entrarPasso { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.passo h2 { font-size: 23px; margin-bottom: 7px; }
.passo .instrucao { color: var(--texto-secundario); margin-bottom: 28px; font-size: 14.5px; }

/* ---------- Cards de procedimento ---------- */
.lista-escolha { display: flex; flex-direction: column; gap: 12px; }
.opcao-grande {
    display: flex; align-items: center; gap: 16px;
    background: var(--fundo-cartao); border: 1.5px solid var(--borda); border-radius: var(--raio);
    padding: 18px 20px; cursor: pointer; text-align: left;
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    width: 100%;
}
.opcao-grande:active { transform: scale(.98); }
.opcao-grande:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra); }
.icone-opcao { width: 44px; height: 44px; border-radius: 50%; background: var(--cor-primaria-clara); color: var(--dourado-escuro); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.titulo-opcao { font-weight: 600; font-size: 15.5px; }
.sub-opcao { font-size: 12.5px; color: var(--texto-secundario); margin-top: 1px; }
.preco-opcao { margin-left: auto; font-weight: 700; color: var(--dourado-escuro); white-space: nowrap; font-size: 14px; }

/* ---------- Calendário ---------- */
.cabecalho-calendario { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cabecalho-calendario .mes-atual { font-weight: 600; font-size: 15.5px; text-transform: capitalize; font-family: var(--fonte-titulo); }
.grade-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.grade-calendario .dia-semana-letra { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--texto-claro); padding-bottom: 8px; letter-spacing: .04em; }
.dia-calendario {
    aspect-ratio: 1/1; border-radius: 12px; border: none; background: var(--fundo-cartao);
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13.5px;
    cursor: pointer; color: var(--texto-principal); position: relative;
    border: 1px solid var(--borda);
}
.dia-calendario:disabled { color: var(--texto-claro); background: transparent; cursor: not-allowed; opacity: .45; border-color: transparent; }
.dia-calendario.disponivel::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--cor-primaria); }
.dia-calendario.selecionado { background: var(--cor-primaria-escura); color: #fff; border-color: var(--cor-primaria-escura); }
.dia-calendario.selecionado::after { background: var(--cor-acento); }
.dia-calendario.vazio { visibility: hidden; border: none; }

/* ---------- Horários ---------- */
.grade-horarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 420px) { .grade-horarios { grid-template-columns: repeat(4, 1fr); } }
.chip-horario {
    padding: 14px 6px; border-radius: 12px; border: 1.5px solid var(--borda); background: var(--fundo-cartao);
    font-weight: 600; cursor: pointer; text-align: center; font-size: 14.5px; font-family: var(--fonte-titulo);
}
.chip-horario:hover { border-color: var(--cor-primaria); }
.chip-horario.selecionado { background: var(--cor-primaria-escura); color: #fff; border-color: var(--cor-primaria-escura); }
.aviso-sem-horario { text-align: center; padding: 34px 10px; color: var(--texto-secundario); font-size: 14px; }

/* ---------- Formulário de dados ---------- */
.resumo-mini { display: flex; align-items: center; gap: 10px; background: var(--cor-primaria-clara); border-radius: var(--raio-peq); padding: 14px 16px; margin-bottom: 24px; font-size: 13.5px; font-weight: 600; color: var(--dourado-escuro); }
.resumo-mini svg { flex-shrink: 0; }
.campo-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }
.aviso-cpf { display: flex; gap: 8px; font-size: 12px; color: var(--texto-claro); margin-top: -12px; margin-bottom: 20px; line-height: 1.5; }
.aviso-cpf svg { flex-shrink: 0; margin-top: 1px; }

/* ---------- Confirmação ---------- */
.selo-sucesso { width: 76px; height: 76px; border-radius: 50%; background: var(--cor-primaria-clara); color: var(--dourado-escuro); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; animation: apareceSucesso .45s ease both; }
@keyframes apareceSucesso { from { transform: scale(0); } to { transform: scale(1); } }
.cartao-confirmacao { background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 22px; }
.linha-confirmacao { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--borda); font-size: 14px; gap: 12px; }
.linha-confirmacao:last-child { border-bottom: none; }
.linha-confirmacao .rotulo { color: var(--texto-secundario); }
.linha-confirmacao .valor { font-weight: 600; text-align: right; }
.caixa-regras { display: flex; gap: 10px; background: var(--fundo-suave); border-radius: var(--raio-peq); padding: 15px 16px; font-size: 12.5px; color: var(--texto-secundario); margin-bottom: 22px; line-height: 1.6; }
.caixa-regras svg { flex-shrink: 0; margin-top: 1px; color: var(--cor-primaria); }

.carregando-passo { text-align: center; padding: 50px 20px; color: var(--texto-claro); font-size: 14px; }

/* ---------- Responsividade fina ---------- */
@media (max-width: 420px) {
    .miolo-agendar { padding: 22px 16px 56px; }
    .opcao-grande { padding: 15px 16px; gap: 12px; }
    .passo h2 { font-size: 20px; }
}