/* Página pública de agendamento (/agendar.php) — passos numerados, chips e cartões como na referência imagens/24.png. */
.agendar, .ag-modal { --ouro: #c4a67c; --ouro-escuro: #a98a5f; --ouro-claro: #f7f3ec; }
.agendar { padding: 40px 0 80px; }
.agendar .wrap { max-width: 1040px; }
.agendar [hidden] { display: none !important; }
.ag-cab { text-align: center; margin-bottom: 28px; }
.ag-cab h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 400; margin-bottom: 8px; }
.ag-cab .sobretitulo { justify-content: center; }

.ag-caixa { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(74, 65, 54, .05), 0 10px 30px rgba(74, 65, 54, .07); padding: 32px 36px; margin-bottom: 22px; }
.ag-caixa h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; margin: 0 0 2px; letter-spacing: 0; }
.ag-caixa .muted { color: var(--texto-suave); margin: 0; font-size: .92rem; }

/* Passos */
.ag-passo { display: grid; grid-template-columns: 34px 1fr; gap: 0 16px; align-items: start; margin-bottom: 30px; }
.ag-passo:last-of-type { margin-bottom: 8px; }
.ag-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ouro); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.ag-passo-cab h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 700; color: var(--tinta); margin: 2px 0 2px; letter-spacing: 0; }
.ag-passo-cab p { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.ag-passo > .ag-chips, .ag-passo > .ag-dados, .ag-passo > .ag-profs, .ag-passo > .ag-dias-nav, .ag-passo > .ag-horas { grid-column: 1 / -1; margin-top: 18px; }

/* Dados pessoais */
.ag-dados { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 0 14px; }
.ag-dados .campo { margin-bottom: 0; }
.agendar input.ag-invalido { border-color: var(--perigo); box-shadow: 0 0 0 3px rgba(176, 83, 63, .12); }
.agendar input.ag-valido { border-color: var(--ok); }
.agendar input[readonly] { background: var(--ouro-claro); }
.ag-tel-estado { display: block; font-size: .78rem; margin-top: .3rem; min-height: 1.1em; }
.ag-tel-estado.ok { color: var(--ok); }
.ag-tel-estado.mal { color: var(--perigo); }

/* Chips (tipo de atendimento) */
.ag-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-chip { padding: .7em 1.4em; border-radius: 999px; border: 2px solid var(--linha); background: #fff; color: var(--tinta); font-weight: 700; font-size: .92rem; cursor: pointer; transition: .15s; }
.ag-chip:hover { border-color: var(--ouro); }
.ag-chip.sel { background: var(--ouro); border-color: var(--ouro); color: #fff; }

/* Profissional */
.ag-profs { display: grid; gap: 12px; }
.ag-prof { display: flex; align-items: center; gap: 20px; width: 100%; text-align: left; padding: 18px 22px; border-radius: 14px; border: 2px solid var(--linha); background: #fff; font: inherit; color: inherit; }
button.ag-prof { cursor: pointer; transition: .15s; }
button.ag-prof:hover { border-color: var(--ouro); }
.ag-prof.sel { border-color: var(--ouro); background: var(--ouro-claro); box-shadow: 0 6px 18px rgba(196, 166, 124, .18); }
.ag-foto { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: center / cover no-repeat var(--creme); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ouro); }
.ag-iniciais { display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: 1.8rem; }
.ag-prof-qualquer .ag-foto { background: var(--creme); color: var(--ouro-escuro); width: 60px; height: 60px; font-size: 1.4rem; }
.ag-prof-txt { flex: 1; min-width: 0; }
.ag-prof-txt b { display: block; font-size: 1.12rem; color: var(--tinta); }
.ag-prof-txt small { display: block; color: var(--texto-suave); font-size: .86rem; margin-top: 2px; }
.ag-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ag-selos span { font-size: .78rem; font-weight: 700; padding: .3em .8em; border-radius: 999px; background: #fff; border: 1px solid var(--linha); color: var(--tinta); }
.ag-check { width: 26px; height: 26px; border-radius: 50%; background: var(--ouro); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; opacity: 0; transition: .15s; }
.ag-prof.sel .ag-check { opacity: 1; }

/* Dias e horas */
.ag-dias-nav { display: flex; align-items: stretch; gap: 8px; }
.ag-dias { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ag-seta { flex: 0 0 34px; border: 2px solid var(--linha); background: #fff; border-radius: 12px; font-size: 1.4rem; color: var(--taupe); cursor: pointer; }
.ag-seta:disabled { opacity: .3; cursor: default; }
.ag-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 12px; border: 2px solid var(--linha); background: #fff; cursor: pointer; font: inherit; transition: .15s; }
.ag-dia small { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.ag-dia b { font-size: 1.2rem; color: var(--tinta); }
.ag-dia em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--ouro-escuro); }
.ag-dia:hover:not(:disabled) { border-color: var(--ouro); }
.ag-dia:disabled { cursor: default; opacity: .45; }
.ag-dia:disabled em { color: var(--texto-suave); font-weight: 500; }
.ag-dia.sel { background: var(--ouro); border-color: var(--ouro); }
.ag-dia.sel small, .ag-dia.sel b, .ag-dia.sel em { color: #fff; }
.ag-horas { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-hora { min-width: 76px; padding: .75em 1em; border-radius: 10px; border: 2px solid var(--linha); background: #fff; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: .15s; }
.ag-hora small { font-size: .68rem; font-weight: 600; color: var(--ouro-escuro); }
.ag-hora:hover { border-color: var(--ouro); }
.ag-hora.sel { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.ag-hora.sel small { color: #fff; }
.ag-carregar { grid-column: 1 / -1; padding: 18px 0; }

/* Confirmação */
.ag-final { border-top: 1px solid var(--linha); margin-top: 26px; padding-top: 24px; }
.ag-resumo { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 18px; border-radius: 12px; background: var(--ouro-claro); margin-bottom: 16px; color: var(--tinta); font-size: .95rem; }
.ag-resumo-modal { flex-direction: column; gap: 6px; text-align: left; }
.ag-resumo-modal small { display: block; color: var(--texto-suave); }
.ag-erro { color: var(--perigo); font-size: .88rem; font-weight: 600; margin: 0 0 12px; }
.ag-erro:empty { display: none; }
.ag-ok { color: var(--ok); font-weight: 600; margin: 0; }
.ag-aviso { background: var(--aviso-claro); color: #75591a; border: 1px solid #ead9ae; border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; font-size: .92rem; }

/* Gestão das marcações */
.ag-gestao-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ag-form-linha { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 14px; align-items: end; margin-top: 20px; }
.ag-form-linha .campo { margin-bottom: 0; }
.ag-form-linha .btn { height: 46px; }
.ag-form-linha .ag-erro, .ag-form-linha .ag-ligacao { grid-column: 1 / -1; margin: 10px 0 0; }
.ag-codigo-passo2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0 14px; align-items: end; margin-top: 14px; }
.ag-ligacao { font-size: .86rem; color: var(--texto-suave); }
.ag-link { background: none; border: 0; padding: 0; color: var(--taupe); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ag-lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ag-lista li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; }
.ag-lista-data { flex: 0 0 62px; text-align: center; background: var(--ouro-claro); border-radius: 10px; padding: 6px 0; }
.ag-lista-data small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--texto-suave); }
.ag-lista-data b { color: var(--tinta); }
.ag-lista-txt { flex: 1; min-width: 0; }
.ag-lista-txt b { display: block; color: var(--tinta); }
.ag-lista-txt small { color: var(--texto-suave); }
.ag-lista-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ag-vazio { margin-top: 16px !important; }

/* Modal */
.ag-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(47, 41, 34, .45); display: grid; place-items: center; padding: 16px; animation: agFundo .2s; }
.ag-modal[hidden] { display: none; }
.ag-modal-caixa { background: #fff; border-radius: 20px; padding: 32px; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; text-align: center; box-shadow: var(--sombra-forte); animation: agEntrar .25s ease-out; }
.ag-modal-caixa h2 { font-size: 1.9rem; margin-bottom: 8px; }
.ag-modal-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--ouro); color: #fff; font-size: 1.8rem; display: grid; place-items: center; margin: 0 auto 14px; }
.ag-lembrete { background: var(--creme-claro); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin: 14px 0; text-align: left; }
.ag-lembrete-aviso { background: var(--aviso-claro); border-color: #ead9ae; color: #75591a; }
.ag-modal-senha { text-align: left; border-top: 1px solid var(--linha); padding-top: 14px; margin-bottom: 16px; }
.ag-modal-senha p { font-size: .9rem; margin-bottom: 10px; }
.ag-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ag-modal-botoes { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
body.ag-modal-aberto { overflow: hidden; }
@keyframes agFundo { from { opacity: 0; } }
@keyframes agEntrar { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@media (max-width: 820px) {
  .ag-caixa { padding: 24px 18px; }
  .ag-passo { grid-template-columns: 32px 1fr; }
  .ag-dados, .ag-form-linha, .ag-codigo-passo2 { grid-template-columns: 1fr; gap: 12px; }
  .ag-dias { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ag-prof { position: relative; gap: 12px; padding: 14px; align-items: flex-start; }
  .ag-foto { width: 56px; height: 56px; font-size: 1.3rem; }
  .ag-check { position: absolute; top: 12px; right: 12px; }
  .ag-prof-txt b { padding-right: 30px; }
  .ag-selos span { font-size: .72rem; }
  .ag-seta { flex-basis: 28px; }
  .ag-lista li { flex-wrap: wrap; }
  .ag-lista-acoes { width: 100%; justify-content: stretch; }
  .ag-lista-acoes .btn { flex: 1; }
  .ag-dois { grid-template-columns: 1fr; }
}