/* ==========================================================================
   Agendar — Radar booking (picker + form + confirmação). Ver docs/adr/0017.
   ========================================================================== */

.ag-page{
  background:var(--surface-1);
  min-height:calc(100vh - var(--nav-height, 72px));
  padding-bottom:var(--space-9);
}
.ag-wrap{
  max-width:920px;
  padding-top:var(--space-8);
}

/* ---- Brand row (bare mode) ----
   Logo do partial partilhado, aplicado directo ao fundo — sem glass-box.
   position:relative no link porque o signo do partial é absolute-positioned. */
.ag-brandrow{
  display:flex; align-items:center;
  padding:var(--space-3) 0 var(--space-6);
}
.ag-brand{
  display:inline-flex; align-items:center;
  position:relative; text-decoration:none; color:inherit;
  transition:opacity .12s;
}
.ag-brand:hover{ opacity:.75; }
.ag-brand svg{ display:block; }
.ag-brand .qra-logo-signo{ display:none; }  /* só o wordmark aqui — sem shrink-swap */

/* ---- Hero ---- */
.ag-head{ text-align:center; margin-bottom:var(--space-7); }
.ag-h1{
  font-family:var(--font-display); font-size:var(--display-md);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight);
  color:var(--text-strong); margin:0 0 var(--space-3);
}
.ag-lead{
  font-size:var(--text-lg); line-height:var(--leading-relaxed);
  color:var(--text-body); max-width:560px; margin:0 auto var(--space-4);
}
.ag-facts{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2) var(--space-4);
}
.ag-facts li{
  font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--primary-600); background:var(--surface-brand-soft);
  padding:6px 12px; border-radius:var(--radius-full);
}

/* ---- "Com Miguel …" — foto + nome + papel ---- */
.ag-with{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 14px 8px 8px;
  background:var(--surface-0); border:1px solid var(--border-hairline);
  border-radius:var(--radius-full);
  margin-top:var(--space-5);
}
.ag-with img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  flex-shrink:0;
}
.ag-with > div{ display:flex; flex-direction:column; gap:0; text-align:left; line-height:1.25; }
.ag-with-label{
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle);
}
.ag-with strong{
  font-family:var(--font-display); font-size:var(--text-md);
  color:var(--text-strong); font-weight:var(--weight-semibold);
}
.ag-with-role{
  font-size:var(--text-xs); color:var(--text-muted);
}

/* ---- Card shell ---- */
.ag-card{ padding:var(--space-6); }
.ag-body > .ag-card + .ag-card{ margin-top:var(--space-4); }
.ag-h2{
  font-family:var(--font-display); font-size:var(--text-2xl);
  font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight);
  color:var(--text-strong); margin:0 0 var(--space-4);
}

/* ---- Picker · header row ---- */
.ag-picker-head{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4);
}
.ag-picker-head .ag-h2{ margin:0; }
.ag-tz{
  font-size:var(--text-sm); color:var(--text-muted);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.ag-tz-label{ white-space:nowrap; }
.ag-tz-select{
  font:inherit; font-size:var(--text-sm); font-weight:var(--weight-semibold);
  color:var(--text-body);
  background:var(--surface-0); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:4px 24px 4px 8px;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6982' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center;
}
.ag-tz-select:hover{ border-color:var(--primary-400); }
.ag-tz-select:focus{ outline:none; border-color:var(--primary-500); box-shadow:var(--shadow-focus); }

/* ---- Calendar ---- */
.ag-cal{ }
.ag-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-4);
}
.ag-cal-month{
  font-family:var(--font-display); font-weight:var(--weight-semibold);
  font-size:var(--text-lg); color:var(--text-strong);
  text-transform:capitalize;
}
.ag-nav{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-0); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); color:var(--text-body);
  cursor:pointer; transition:border-color .12s, background .12s, color .12s;
}
.ag-nav:hover:not(:disabled){ border-color:var(--primary-400); background:var(--primary-50); color:var(--primary-700); }
.ag-nav:disabled{ opacity:.35; cursor:not-allowed; }
.ag-nav:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

.ag-cal-dow{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
  margin-bottom:6px;
}
.ag-cal-dow span{
  font-family:var(--font-mono); font-size:var(--text-2xs);
  color:var(--text-subtle); text-align:center;
  text-transform:uppercase; letter-spacing:.08em; padding:6px 0;
}
.ag-cal-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.ag-day{
  aspect-ratio:1; min-height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-0); border:1px solid transparent;
  border-radius:var(--radius-lg);
  font-size:var(--text-md); font-weight:var(--weight-medium);
  color:var(--text-subtle); cursor:default;
  transition:background .12s, border-color .12s, color .12s;
}
.ag-day--out{ visibility:hidden; }
.ag-day--past{ color:var(--text-subtle); opacity:.4; }
.ag-day--free{
  background:var(--surface-brand-soft); color:var(--primary-700);
  font-weight:var(--weight-semibold); cursor:pointer;
}
.ag-day--free:hover{ background:var(--primary-100); border-color:var(--primary-300); }
.ag-day--today{ border-color:var(--primary-400); }
.ag-day--selected{
  background:var(--primary-500); color:#fff; border-color:var(--primary-500);
}
.ag-day--selected:hover{ background:var(--primary-600); border-color:var(--primary-600); }
.ag-day:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

.ag-cal-msg{
  text-align:center; padding:var(--space-5) 0;
  color:var(--text-muted); font-size:var(--text-sm);
}
.ag-cal-msg--err{ color:var(--error-600); }

/* ---- Slots (ocupa o mesmo espaço do calendário) ---- */
.ag-slots{ }
.ag-slots-head{
  display:flex; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.ag-slots-head-text{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.ag-slots-eyebrow{
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle);
}
.ag-slots-head strong{
  font-family:var(--font-display); font-size:var(--text-lg);
  color:var(--text-strong); font-weight:var(--weight-semibold);
  text-transform:capitalize; line-height:1.2;
}
.ag-slots-list{
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:4px;
  animation:agSlotsIn .18s ease both;
}
@keyframes agSlotsIn{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:none; }
}
/* Mesma linguagem visual E mesmo tamanho dos dias disponíveis (.ag-day--free):
   aspect-ratio 1, grelha de 7 colunas, fundo lavanda, texto roxo, semibold. */
.ag-slot{
  aspect-ratio:1; min-height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px;
  background:var(--surface-brand-soft); border:1px solid transparent;
  border-radius:var(--radius-lg); font:inherit;
  font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--primary-700);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.ag-slot:hover{ background:var(--primary-100); border-color:var(--primary-300); }
.ag-slot:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.ag-slots-empty{ padding:var(--space-4); color:var(--text-muted); font-size:var(--text-sm); }

/* ---- Form ---- */
.ag-chosen{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);
  background:var(--surface-brand-soft); border-radius:var(--radius-lg);
  margin-bottom:var(--space-5);
}
.ag-chosen > div{ display:flex; flex-direction:column; gap:2px; }
.ag-chosen-label{
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary-600);
}
.ag-chosen strong{
  font-family:var(--font-display); font-size:var(--text-md);
  color:var(--text-strong); font-weight:var(--weight-semibold);
  text-transform:capitalize;
}
.ag-edit{
  background:none; border:none; padding:0; font:inherit;
  font-size:var(--text-sm); color:var(--text-link); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.ag-edit:hover{ color:var(--text-link-hover); }

#agForm{ display:flex; flex-direction:column; gap:var(--space-4); }
#agForm .qra-field span{ line-height:1.4; }
.ag-field-select select{
  width:100%; height:44px; padding:0 14px;
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  background:var(--surface-0);
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.ag-field-select select:focus{ border-color:var(--primary-500); box-shadow:var(--shadow-focus); }

/* ---- Phone com seletor de país (baseado no .qra-wa da Calculadora, adaptado) ---- */
.ag-phone{
  display:flex; align-items:stretch;
  background:var(--surface-0);
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  position:relative;
  transition:border-color .15s, box-shadow .15s;
}
.ag-phone:focus-within{ border-color:var(--primary-500); box-shadow:var(--shadow-focus); }
.ag-phone-cc{
  display:flex; align-items:center; gap:7px;
  padding:0 12px;
  border:none; border-right:1px solid var(--border-default);
  background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  white-space:nowrap; border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.ag-phone-cc:hover{ background:var(--primary-50); }
.ag-phone-cc:focus-visible{ outline:none; background:var(--primary-50); }
.ag-phone-flag{ font-size:18px; line-height:1; }
.ag-phone-dial{ font-weight:var(--weight-semibold); }
.ag-phone-input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  padding:0 14px; height:44px;
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
}
.ag-phone-input::placeholder{ color:var(--text-subtle); }
.ag-phone-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  width:320px; max-width:90vw; max-height:280px; overflow-y:auto;
  background:var(--surface-0);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:0 20px 50px rgba(21,13,51,.18);
  padding:6px;
}
.ag-phone-menu[hidden]{ display:none; }
.ag-phone-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px;
  border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-sm);
  font:inherit; font-size:14px; color:var(--text-body); text-align:left;
}
.ag-phone-opt:hover{ background:var(--primary-50); }
.ag-phone-opt[aria-selected="true"]{ background:var(--primary-50); color:var(--primary-700); font-weight:var(--weight-semibold); }
.ag-phone-opt-name{ flex:1; }
.ag-phone-opt-dial{ font-family:var(--font-mono); font-size:13px; color:var(--text-muted); }

.ag-form-error{
  padding:var(--space-3) var(--space-4);
  background:var(--error-50); border:1px solid var(--error-100);
  border-radius:var(--radius-lg);
  color:var(--error-700); font-size:var(--text-sm);
}

/* Validação nativa — :user-invalid só marca após interacção (não em load).
   Suporte Chrome 119+ / FF 88+ / Safari 16.5+. Fallback silencioso é aceitável. */
#agForm input:user-invalid,
#agForm select:user-invalid{
  border-color:var(--error-500);
}
#agForm input:user-invalid:focus,
#agForm select:user-invalid:focus{
  box-shadow:0 0 0 3px var(--error-100);
}
.ag-privacy{ margin-top:var(--space-2); }
.ag-privacy a{ color:var(--text-link); text-decoration:underline; text-underline-offset:2px; }
.ag-privacy a:hover{ color:var(--text-link-hover); }

/* ---- OK ---- */
.ag-ok{ text-align:center; }
.ag-ok-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  background:var(--success-50); color:var(--success-600);
  border-radius:var(--radius-full);
  margin-bottom:var(--space-4);
}
.ag-ok-lead{
  font-size:var(--text-lg); color:var(--text-body);
  max-width:480px; margin:0 auto var(--space-5);
}
.ag-ok-details{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4);
  max-width:480px; margin:0 auto var(--space-6);
  padding:var(--space-4) var(--space-5); background:var(--surface-1);
  border-radius:var(--radius-lg); text-align:left;
}
.ag-ok-details dt{
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle);
  align-self:center;
}
.ag-ok-details dd{
  margin:0; font-size:var(--text-md); color:var(--text-strong); font-weight:var(--weight-medium);
}
.ag-ok .qra-btn{ display:inline-flex; }

/* ---- Responsive ---- */
@media (max-width: 640px){
  .ag-wrap{ padding-top:var(--space-6); }
  .ag-h1{ font-size:var(--display-sm); }
  .ag-lead{ font-size:var(--text-md); }
  .ag-card{ padding:var(--space-4); }
  .ag-picker-head{ flex-direction:column; align-items:flex-start; gap:var(--space-2); }
  .ag-day, .ag-slot{ min-height:38px; font-size:var(--text-sm); }
}