/* ============================================================
   OrbitaPsi — Agendador no perfil público. Etapa D.
   Arquivo CSS próprio: mudanças aqui NÃO exigem bump do styles.css
   global. Carregado apenas nas páginas de perfil.
   Paleta alinhada ao site (navy/gold).
   ============================================================ */

:root{
  --ag-navy:#1F2A3A; --ag-gold:#CDAA6D; --ag-gold-dark:#B8925A;
  --ag-gold-text:#8A6836; --ag-linha:#EDE5D8; --ag-muted:#6B7280;
  --ag-ok:#2E7D5B; --ag-erro:#B4453C; --ag-fundo:#F6F7F9; --ag-borda:#E8EBEF;
}

/* ---- Card no aside ---- */
.ag-card{
  background:#fff; border:1px solid var(--ag-borda); border-radius:14px;
  padding:18px 18px 20px; margin-top:16px; margin-bottom:16px;
  border-top:3px solid var(--ag-gold);
  box-shadow:0 1px 3px rgba(16,25,35,.05);
}
.ag-card h3{ margin:0 0 4px; font-size:1.1rem; color:var(--ag-navy); }
.ag-card .ag-sub{ font-size:.86rem; color:var(--ag-muted); margin:0 0 14px; line-height:1.5; }
.ag-card-dias{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ag-dia-mini{
  flex:1 1 auto; min-width:52px; text-align:center; padding:8px 4px;
  border:1.5px solid var(--ag-borda); border-radius:10px; background:#fff;
  cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s;
}
.ag-dia-mini .dow{ display:block; font-size:.66rem; text-transform:uppercase; color:var(--ag-muted); font-weight:700; }
.ag-dia-mini .dd{ display:block; font-size:1.05rem; font-weight:800; color:var(--ag-navy); }
.ag-dia-mini:hover{ border-color:var(--ag-gold); }
.ag-dia-mini.sel{ border-color:var(--ag-gold); background:#FBF6EC; }
.ag-card .btn-ag{
  display:block; width:100%; text-align:center; padding:12px 16px;
  background:var(--ag-navy); color:#fff; border:1.5px solid var(--ag-navy);
  border-radius:10px; font-weight:700; font-family:inherit; font-size:.95rem;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.ag-card .btn-ag:hover{ background:var(--ag-gold-dark); border-color:var(--ag-gold-dark); }
.ag-card .ag-nota{ font-size:.78rem; color:var(--ag-muted); margin:12px 0 0; text-align:center; line-height:1.5; }

/* ---- Modal ---- */
.ag-modal-fundo{
  position:fixed; inset:0; background:rgba(16,25,35,.62);
  display:none; align-items:flex-start; justify-content:center;
  padding:32px 20px; z-index:1000; overflow-y:auto;
}
.ag-modal-fundo.aberto{ display:flex; }
.ag-modal{
  background:#fff; border-radius:16px; width:100%; max-width:860px;
  padding:28px 30px 26px; box-shadow:0 20px 60px rgba(16,25,35,.3);
}
.ag-modal-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.ag-modal-topo h2{ margin:0; font-size:1.5rem; color:var(--ag-navy); }
.ag-modal-topo .ag-sub2{ font-size:.88rem; color:var(--ag-muted); margin:4px 0 0; }
.ag-fechar{
  border:1.5px solid var(--ag-borda); background:#fff; width:38px; height:38px;
  border-radius:50%; cursor:pointer; font-size:1.2rem; color:var(--ag-muted); flex:0 0 auto;
}
.ag-fechar:hover{ background:var(--ag-fundo); }

.ag-passos{ display:flex; gap:8px; margin:20px 0 6px; }
.ag-passo-barra{ flex:1; height:5px; border-radius:3px; background:var(--ag-linha); }
.ag-passo-barra.ativa{ background:var(--ag-gold); }
.ag-passo-info{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--ag-muted); margin-bottom:18px; }
.ag-passo-info .reserva{ font-variant-numeric:tabular-nums; }

.ag-secao-titulo{ font-size:1.05rem; color:var(--ag-navy); margin:0 0 4px; font-weight:700; }
.ag-secao-lead{ font-size:.85rem; color:var(--ag-muted); margin:0 0 14px; }

/* Grade de dias */
.ag-dias{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.ag-dia{
  flex:1 1 auto; min-width:74px; max-width:110px; text-align:center; padding:12px 6px;
  border:1.5px solid var(--ag-borda); border-radius:12px; background:#fff; cursor:pointer;
  font-family:inherit;
}
.ag-dia .dow{ display:block; font-size:.68rem; text-transform:uppercase; color:var(--ag-muted); font-weight:700; }
.ag-dia .dd{ display:block; font-size:1.3rem; font-weight:800; color:var(--ag-navy); line-height:1.2; }
.ag-dia .mmm{ display:block; font-size:.66rem; text-transform:uppercase; color:var(--ag-muted); }
.ag-dia:hover{ border-color:var(--ag-gold); }
.ag-dia.sel{ border-color:var(--ag-gold); background:#FBF6EC; }
.ag-dia:disabled{ opacity:.4; cursor:default; background:var(--ag-fundo); }

/* Grade de horas */
.ag-horas{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ag-hora{
  padding:11px 18px; border:1.5px solid var(--ag-borda); border-radius:10px; background:#fff;
  cursor:pointer; font-family:inherit; font-weight:700; color:var(--ag-navy); font-size:.95rem;
}
.ag-hora:hover{ border-color:var(--ag-gold); }
.ag-hora.sel{ background:var(--ag-navy); color:#fff; border-color:var(--ag-navy); }
.ag-fuso{ background:var(--ag-fundo); border-radius:10px; padding:12px 14px; font-size:.84rem; color:var(--ag-muted); }

/* Passo 3 — formulário + resumo */
.ag-form-grid{ display:grid; grid-template-columns:1fr 320px; gap:26px; }
@media(max-width:720px){ .ag-form-grid{ grid-template-columns:1fr; } }
.ag-campo{ margin-bottom:14px; }
.ag-campo label{ display:block; font-size:.85rem; font-weight:600; color:var(--ag-navy); margin-bottom:5px; }
.ag-campo input{
  width:100%; padding:11px 13px; border:1.5px solid var(--ag-borda); border-radius:9px;
  font:inherit; color:var(--ag-navy);
}
.ag-campo input:focus{ outline:2px solid var(--ag-gold); outline-offset:1px; border-color:var(--ag-gold); }
.ag-campo-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ag-consent{ display:flex; gap:10px; align-items:flex-start; padding:12px 0; font-size:.83rem; color:var(--ag-navy); line-height:1.5; }
.ag-consent input{
  margin-top:3px; flex:0 0 auto; width:18px; height:18px; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#fff; border:1.5px solid var(--ag-borda); border-radius:4px;
  position:relative; transition:border-color .15s;
}
.ag-consent input:hover{ border-color:var(--ag-gold-dark); }
.ag-consent input:focus-visible{ outline:2px solid var(--ag-gold); outline-offset:1px; }
/* Marcado: SEM preenchimento — apenas o check dourado desenhado por borda. */
.ag-consent input:checked{ background:#fff; border-color:var(--ag-gold-dark); }
.ag-consent input:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--ag-gold-dark); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ag-menor-box{ border:1px dashed var(--ag-gold-dark); border-radius:10px; padding:14px; margin:6px 0 14px; }
.ag-menor-box .ag-menor-tit{ font-size:.85rem; font-weight:700; color:var(--ag-gold-text); margin:0 0 10px; }

.ag-resumo{ background:var(--ag-fundo); border-radius:12px; padding:18px; align-self:start; }
.ag-resumo h4{ margin:0 0 12px; font-size:1rem; color:var(--ag-navy); }
.ag-resumo .linha{ padding:8px 0; border-bottom:1px solid var(--ag-linha); }
.ag-resumo .linha:last-of-type{ border-bottom:none; }
.ag-resumo .rot{ font-size:.72rem; color:var(--ag-muted); text-transform:uppercase; letter-spacing:.02em; }
.ag-resumo .val{ font-weight:700; color:var(--ag-navy); font-size:.9rem; }
.ag-resumo .obs{ font-size:.78rem; color:var(--ag-muted); margin:12px 0 0; line-height:1.5; }

.ag-modal-rodape{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--ag-linha); flex-wrap:wrap; }
.ag-modal-rodape .ag-hint{ font-size:.82rem; color:var(--ag-muted); }
.ag-btn{ border-radius:10px; padding:12px 22px; font:inherit; font-weight:700; cursor:pointer; border:1.5px solid transparent; }
.ag-btn-primary{ background:var(--ag-navy); color:#fff; border-color:var(--ag-navy); }
.ag-btn-primary:hover{ background:var(--ag-gold-dark); border-color:var(--ag-gold-dark); }
.ag-btn-primary:disabled{ opacity:.5; cursor:default; }
.ag-btn-ghost{ background:#fff; color:var(--ag-navy); border-color:var(--ag-borda); }
.ag-btn-ghost:hover{ background:var(--ag-fundo); }

/* Passo 4 — confirmação */
.ag-confirmado{ text-align:center; padding:16px 10px 6px; }
.ag-check{ width:64px; height:64px; border-radius:50%; background:#E4F3EC; color:var(--ag-ok); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 16px; }
.ag-confirmado h2{ margin:0 0 8px; color:var(--ag-navy); }
.ag-confirmado p.ag-conf-lead{ color:var(--ag-muted); margin:0 auto 20px; max-width:460px; line-height:1.6; }
.ag-conf-box{ background:var(--ag-fundo); border-radius:12px; padding:16px 18px; max-width:520px; margin:0 auto 22px; text-align:left; }
.ag-conf-box strong{ color:var(--ag-navy); }
.ag-conf-box .det{ color:var(--ag-muted); font-size:.9rem; line-height:1.6; margin-top:4px; }
.ag-conf-acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.ag-erro-msg{ background:#FBEAE7; color:var(--ag-erro); border-radius:10px; padding:12px 14px; font-size:.88rem; margin:14px 0 0; display:none; }
.ag-erro-msg.on{ display:block; }
.ag-carregando{ color:var(--ag-muted); padding:26px 0; text-align:center; }

body.ag-trava{ overflow:hidden; }

/* Dias mini agora são o ponto de entrada (sem botão): reforça clicabilidade. */
.ag-card-dias .ag-dia-mini{ cursor:pointer; }
.ag-card-dias .ag-dia-mini:hover{ border-color:var(--ag-navy); background:#F6F7F9; }

/* Override do "Compartilhar este perfil": mesmo estilo do botão Compartilhar
   do blog (.btn-ghost) — borda navy, hover navy. Fica no CSS do agendador
   para não exigir bump global do styles.css. */
.perfil-lateral .btn-compartilhar{
  border-color:var(--ag-navy) !important;
  color:var(--ag-navy) !important;
  background:#fff !important;
}
.perfil-lateral .btn-compartilhar:hover{
  background:var(--ag-navy) !important;
  color:#fff !important;
}
