/* Página pública de agendamento. Tokens do design system da API Capital (DESIGN.md 3.6). */
:root {
  --azul: #0D2A54;
  --azul-var: #152548;
  --latao: #AA7D41;
  --azul-claro: #418ECE;
  --preto: #171717;
  --branco: #FFFFFF;
  --quadro: #E6E7E8;
  --cinza-claro: #F4F4F4;
  --creme: #F1EAD8;
  --erro: #B71313;
  --ok: #0E7A47;
  --texto-fraco: #6B6B6B;
  --canto: 15px;
  --titulo: 'Playfair Display', Georgia, serif;
  --corpo: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--cinza-claro);
  color: var(--preto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

.topo {
  background: var(--branco);
  border-bottom: 1px solid var(--quadro);
  padding: 16px;
}
.topo-logo { display: inline-block; }
.topo-logo img { display: block; height: 32px; width: auto; }
@media (min-width: 720px) {
  .topo { padding: 20px 32px; }
}

.pagina {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
}

.carregando, .aviso-vazio { color: var(--texto-fraco); padding: 48px 0; text-align: center; }

/* --- cartão principal ------------------------------------------------------- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--quadro);
  border-radius: var(--canto);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .cartao { grid-template-columns: 300px 1fr; }
}

.lado {
  padding: 24px;
  border-bottom: 1px solid var(--quadro);
}
@media (min-width: 820px) {
  .lado { border-bottom: 0; border-right: 1px solid var(--quadro); padding: 32px 28px; }
}

.consultor { display: flex; align-items: center; gap: 12px; }
.foto {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: var(--azul); flex: none;
}
.iniciais {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--azul); color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 18px; letter-spacing: 0.5px;
}
.consultor-nome { font-size: 15px; color: var(--texto-fraco); margin: 0; }

.tipo-titulo {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--azul);
  margin: 20px 0 0;
}
.fio { width: 40px; height: 2px; background: var(--latao); margin: 14px 0 16px; border: 0; }

.detalhes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.detalhes li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.detalhes svg { width: 18px; height: 18px; flex: none; stroke: var(--azul); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.descricao { margin: 16px 0 0; font-size: 15px; color: var(--preto); white-space: pre-line; }
.resumo-escolha {
  margin-top: 20px; padding: 14px 16px;
  background: var(--creme); border-radius: var(--canto);
  font-size: 15px;
}
.resumo-escolha strong { display: block; color: var(--azul); }

.principal { padding: 24px; min-width: 0; }
@media (min-width: 820px) { .principal { padding: 32px; } }

.passo-titulo { font-size: 19px; font-weight: 600; margin: 0 0 16px; color: var(--preto); }

/* --- fuso ------------------------------------------------------------------- */
.fuso { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 14px; color: var(--texto-fraco); flex-wrap: wrap; }
.fuso svg { width: 16px; height: 16px; stroke: var(--texto-fraco); fill: none; stroke-width: 2; }
.fuso select {
  border: 1px solid var(--quadro); border-radius: 10px; background: var(--branco);
  padding: 6px 10px; font-size: 14px; color: var(--preto); max-width: 100%;
}

/* --- dias e horários --------------------------------------------------------- */
.dias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}
.dia {
  border: 1px solid var(--quadro); background: var(--branco);
  border-radius: 12px; padding: 10px 6px; cursor: pointer; text-align: center;
  line-height: 1.25;
}
.dia span { display: block; }
.dia .dia-semana { font-size: 13px; color: var(--texto-fraco); text-transform: capitalize; }
.dia .dia-data { font-size: 17px; font-weight: 700; font-feature-settings: "tnum"; color: var(--azul); }
.dia:hover { border-color: var(--azul); }
.dia[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); }
.dia[aria-pressed="true"] .dia-semana,
.dia[aria-pressed="true"] .dia-data { color: var(--branco); }

.dia-escolhido { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.hora {
  height: 44px; border: 1px solid var(--azul); background: var(--branco); color: var(--azul);
  border-radius: 12px; cursor: pointer; font-weight: 600; font-feature-settings: "tnum";
}
.hora:hover { background: var(--cinza-claro); }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 2px;
}

/* --- formulário --------------------------------------------------------------- */
.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0 0 16px;
  color: var(--azul); font-weight: 600; cursor: pointer; font-size: 15px;
}
.voltar svg { width: 18px; height: 18px; stroke: var(--azul); fill: none; stroke-width: 2; }

.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo .opcional { font-weight: 400; color: var(--texto-fraco); }
.campo input, .campo textarea {
  border: 1px solid var(--quadro); border-radius: var(--canto);
  padding: 0 16px; height: 48px; background: var(--branco); font-size: 16px; width: 100%;
}
.campo textarea { height: auto; min-height: 104px; padding: 12px 16px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--azul); }
.campo[data-erro="true"] input { border-color: var(--erro); }

.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.botao {
  height: 48px; padding: 0 24px; border: 0; border-radius: var(--canto);
  background: var(--azul); color: var(--branco); font-weight: 600; font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.botao:hover { background: var(--azul-var); }
.botao[disabled] { background: var(--texto-fraco); cursor: progress; }
.botao-secundario { background: var(--branco); color: var(--azul); border: 1px solid var(--azul); }
.botao-secundario:hover { background: var(--cinza-claro); }
.botao-perigo { background: var(--branco); color: var(--erro); border: 1px solid var(--erro); }
.botao-perigo:hover { background: var(--cinza-claro); }
.botao-perigo-cheio { background: var(--erro); }
.botao-perigo-cheio:hover { background: #8F0F0F; }
@media (max-width: 519px) { .botao { width: 100%; } }

.aviso {
  border: 1px solid var(--erro); border-radius: var(--canto); background: var(--branco);
  padding: 12px 16px; margin-bottom: 16px; font-size: 15px;
}

/* --- gerenciar (remarcar e cancelar) ------------------------------------------------- */
.reuniao-quando { margin: 0 0 16px; }
.reuniao-data { font-size: 19px; font-weight: 600; color: var(--azul); margin: 0 0 4px; }
.reuniao-fuso { font-size: 14px; color: var(--texto-fraco); margin: 0 0 16px; }
.reuniao-quem { margin: 0 0 8px; overflow-wrap: anywhere; }
.acoes-gestao { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.troca { display: grid; gap: 12px; margin: 0 0 16px; }
.troca p { margin: 0; }
.troca-rotulo { display: block; font-size: 14px; color: var(--texto-fraco); }
.link-gestao { color: var(--azul); font-weight: 600; }

/* --- estados de página inteira --------------------------------------------------- */
.estado {
  background: var(--branco); border: 1px solid var(--quadro); border-radius: var(--canto);
  padding: 40px 24px; text-align: center; max-width: 560px; margin: 0 auto;
}
.estado h1 {
  font-family: var(--titulo); font-weight: 700; color: var(--azul);
  font-size: 28px; line-height: 1.2; margin: 0 0 12px;
}
.estado p { margin: 0 0 8px; }
.estado .quando { font-size: 19px; font-weight: 600; margin: 16px 0 4px; }
.estado .quando-fuso { font-size: 14px; color: var(--texto-fraco); }
.estado .acoes { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.estado .fio { margin: 14px auto 18px; }

.rodape {
  max-width: 960px; margin: 0 auto 32px; padding: 0 16px;
  font-size: 13px; color: var(--texto-fraco); text-align: center;
}