/* ============================================================
   Domínio Médico — marque.med.br: a página de agendar

   Uma tela só, sem menu e sem rodapé. Quem chega aqui veio de um QR code no
   balcão ou do link da bio: já sabe com quem quer marcar, e qualquer coisa
   a mais na tela é distração entre ele e o horário.
   ============================================================ */

.mq-tela {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#0F2942,#1257B8 170%);
  padding:24px 16px; box-sizing:border-box;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#15233B;
}

/* Três blocos, duas colunas: a identidade e o resto do perfil empilham na
   esquerda, e a agenda ocupa a direita inteira.

   No telefone vira uma coluna só, e a ORDEM muda: identidade → agenda →
   resto do perfil. Com o perfil inteiro em cima, o calendário nascia abaixo
   da dobra — quem veio do QR do balcão para marcar teria de rolar um texto
   que não pediu. */
.mq-cartao {
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas: "topo agenda" "mais agenda";
  width:100%; max-width:940px; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 26px 70px rgba(10,25,45,.34);
}
.mq-lado-topo { grid-area:topo; }
.mq-lado-mais { grid-area:mais; }
.mq-agenda    { grid-area:agenda; }

@media (max-width: 720px){
  .mq-cartao {
    grid-template-columns:1fr; grid-template-rows:none;
    grid-template-areas: "topo" "agenda" "mais";
  }
}

/* ---------- coluna do médico ---------- */
.mq-lado { padding:28px 24px; border-right:1px solid #e9edf3; background:#fafbfd; }
.mq-lado-topo { padding-bottom:20px; }
.mq-lado-mais { padding-top:4px; }
@media (max-width: 720px){
  .mq-lado { border-right:none; padding:22px 20px; }
  .mq-lado-topo { border-bottom:1px solid #e9edf3; }
  .mq-lado-mais { border-top:1px solid #e9edf3; padding-top:22px; }
}

.mq-av {
  width:64px; height:64px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:800; margin-bottom:14px;
}
.mq-nome { font-size:1.15rem; margin:0 0 2px; line-height:1.3; }
.mq-esp  { color:#6B7686; font-size:.88rem; }

/* CRM logo abaixo do nome: é o que diz que a pessoa do outro lado é médica,
   e não custa uma linha inteira para dizê-lo. */
.mq-crm {
  margin-top:6px; font-size:.74rem; font-weight:700; letter-spacing:.03em;
  color:#6B7686; text-transform:uppercase;
}

/* O valor fica no bloco de cima, junto do nome: no telefone é a única parte
   do perfil que aparece antes do calendário, e "quanto custa" é a pergunta
   que faz alguém desistir depois de escolher o horário. */
.mq-valor {
  margin-top:14px; padding:10px 12px; border-radius:10px;
  background:#E8F1FE; color:#15233B;
  font-size:.86rem; font-weight:700; line-height:1.4;
}

.mq-bloco { margin-bottom:20px; }
.mq-bloco:last-of-type { margin-bottom:14px; }
.mq-bloco h2 {
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#9AA4B2; margin:0 0 9px;
}

.mq-bio { margin:0; font-size:.85rem; line-height:1.6; color:#3d4a5c; }

.mq-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mq-chip {
  font-size:.75rem; font-weight:600; color:#3d4a5c;
  background:#fff; border:1px solid #e3e8ef; border-radius:20px; padding:4px 10px;
}

.mq-infos { display:flex; flex-direction:column; gap:9px; }
.mq-info  { display:flex; gap:8px; font-size:.85rem; color:#3d4a5c; line-height:1.45; }
.mq-info span { flex:none; }
.mq-bloco .mq-info + .mq-info { margin-top:8px; }

a.mq-link { color:#1A73E8; text-decoration:none; font-weight:600; }
a.mq-link:hover { text-decoration:underline; }
/* O :not() é o que separa os dois tipos de link do bloco. Sem ele esta
   regra também pegava os links de contato — que são .mq-info, ou seja
   flex — e o telefone e o WhatsApp saíam um por cima do outro na mesma
   linha. */
.mq-bloco > a.mq-link:not(.mq-info) { display:inline-block; margin-top:9px; font-size:.82rem; }

.mq-selo { margin-top:22px; font-size:.7rem; color:#9AA4B2; }

/* ---------- agenda ---------- */
.mq-agenda { padding:26px 26px 30px; }
@media (max-width: 720px){ .mq-agenda { padding:20px; } }

.mq-mes { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mq-mes b { font-size:.98rem; }
.mq-nav {
  width:32px; height:32px; border-radius:9px; border:1px solid #dfe4ec; background:#fff;
  cursor:pointer; font-size:1.1rem; color:#3d4a5c; line-height:1;
}
.mq-nav:hover { border-color:#1A73E8; color:#1A73E8; }

.mq-semana, .mq-grade { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.mq-semana { margin-bottom:5px; }
.mq-semana span { text-align:center; font-size:.7rem; font-weight:700; color:#9AA4B2; }

.mq-dia {
  aspect-ratio:1; border:none; background:#f1f4f9; border-radius:9px;
  font-size:.88rem; font-weight:600; color:#15233B; cursor:pointer;
  transition:background .15s, color .15s, transform .1s;
}
.mq-dia:hover:not(.off) { background:#1A73E8; color:#fff; }
.mq-dia.on  { background:#1A73E8; color:#fff; box-shadow:0 3px 10px rgba(26,115,232,.4); }
/* Dia sem horário fica apagado e não clicável: oferecer o dia e só depois
   dizer "nenhum horário" é fazer o paciente descobrir o que já sabíamos. */
.mq-dia.off { background:transparent; color:#c6cdd8; cursor:default; }
.mq-dia.vazio { background:transparent; }

.mq-horarios { margin-top:18px; border-top:1px solid #eef1f6; padding-top:16px; }
.mq-dica { color:#9AA4B2; font-size:.86rem; }
.mq-dia-titulo { font-weight:700; font-size:.9rem; margin-bottom:10px; }

.mq-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; max-height:210px; overflow-y:auto; }
.mq-slot {
  border:1.5px solid #dfe4ec; background:#fff; border-radius:9px; padding:9px 4px;
  font-size:.88rem; font-weight:700; color:#1A73E8; cursor:pointer; transition:var(--transition, .15s);
}
.mq-slot:hover { background:#1A73E8; color:#fff; border-color:#1A73E8; }

/* ---------- confirmação ---------- */
.mq-voltar { background:none; border:none; color:#1A73E8; font-weight:700; font-size:.85rem; cursor:pointer; padding:0 0 12px; }
.mq-resumo { background:#E8F1FE; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.mq-resumo-quando { font-weight:700; font-size:.98rem; }
.mq-resumo-com { color:#3d4a5c; font-size:.85rem; margin-top:3px; }

.mq-campo { display:block; margin-bottom:14px; }
.mq-campo span { display:block; font-size:.82rem; font-weight:700; margin-bottom:5px; }
.mq-campo i { font-weight:400; color:#9AA4B2; font-style:normal; }
.mq-campo textarea {
  width:100%; box-sizing:border-box; min-height:76px; resize:vertical;
  border:1px solid #dfe4ec; border-radius:10px; padding:10px 12px;
  font:inherit; font-size:.9rem;
}
.mq-campo textarea:focus { outline:none; border-color:#1A73E8; }

.mq-confirmar {
  width:100%; background:#1A73E8; color:#fff; border:none; border-radius:11px;
  padding:13px; font-size:.95rem; font-weight:700; cursor:pointer;
}
.mq-confirmar:hover { background:#1560c9; }
.mq-confirmar:disabled { opacity:.6; cursor:default; }
.mq-nota { margin-top:12px; font-size:.78rem; color:#6B7686; line-height:1.55; }

.mq-ok { text-align:center; padding:26px 6px; }
.mq-ok-ico {
  width:56px; height:56px; border-radius:50%; background:#E6F6EE; color:#12885A;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  margin:0 auto 14px; font-weight:800;
}
.mq-ok h2 { font-size:1.15rem; margin:0 0 8px; }
.mq-ok p  { color:#3d4a5c; font-size:.92rem; line-height:1.6; margin:0 0 8px; }
.mq-ok-nota { color:#6B7686; font-size:.85rem; }