/* ============================================================
   Barra de agendamento — o widget compartilhado

   Autossuficiente de propósito. Ele é montado em duas páginas com CSS
   diferentes: o site da clínica (que tem app.css) e o marque.med.br (que
   não tem). Herdar botão e campo de uma delas faria o widget mudar de cara
   conforme o vizinho — e quebrar quando o vizinho mudasse.

   Uma variável só é herdada: --site-cor. É a cor do consultório, e é o que
   o widget precisa saber sobre onde está.
   ============================================================ */

.ab-barra, [class*="ab-"] { --ab-cor: var(--site-cor, #00A99D); }

/* ---------- contêiner (usado pelo marque; o site da clínica tem o seu) ---------- */
.ab-barra {
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  background:#fff; border-top:1px solid #e6ebf2;
  box-shadow:0 -6px 26px rgba(15,41,66,.14);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#15233B;
}
.ab-barra-linha {
  max-width:1080px; margin:0 auto; padding:12px 5vw;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.ab-barra-txt { line-height:1.3; min-width:0; }
.ab-barra-txt b { display:block; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-barra-txt span { font-size:.8rem; color:#6B7686; }
.ab-barra.aberta .ab-barra-linha { display:none; }
@media (max-width:640px){
  .ab-barra-linha { padding:10px 14px; }
  .ab-barra-txt { display:none; }
  .ab-barra-linha .ab-botao { flex:1; }
}

/* ---------- o fluxo ---------- */
.ab-fluxo { max-width:1080px; margin:0 auto; padding:14px 5vw 16px; }
@media (max-width:640px){ .ab-fluxo { padding:12px 14px 14px; } }

.ab-topo { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ab-topo b { font-size:1rem; flex:1; min-width:0; }
.ab-voltar {
  border:none; background:none; cursor:pointer; font:inherit; font-size:.86rem;
  font-weight:700; color:var(--ab-cor); padding:4px 6px 4px 0; flex:none;
}
.ab-fechar {
  border:none; background:none; cursor:pointer; line-height:1;
  font-size:1.6rem; color:#9AA4B2; padding:0 4px; flex:none;
}
.ab-fechar:hover { color:#15233B; }

/* trilha dos quatro passos */
.ab-trilha { display:flex; gap:5px; margin-bottom:12px; }
.ab-trilha i { flex:1; height:3px; border-radius:2px; background:#e3e8ef; transition:background .2s; }
.ab-trilha i.on { background:var(--ab-cor); }

/* o que já foi escolhido, para não precisar voltar só para conferir */
.ab-resumo {
  font-size:.8rem; font-weight:700; color:var(--ab-cor);
  background:color-mix(in srgb, var(--ab-cor) 9%, #fff);
  border-radius:20px; padding:4px 12px; margin-bottom:10px; width:fit-content;
}

/* o que o servidor recusou (horário que alguém pegou antes), sem perder o resto */
.ab-aviso {
  font-size:.84rem; color:#9A3412; background:#FFF4E5; border-radius:10px;
  padding:8px 12px; margin-bottom:10px; line-height:1.4;
}
.ab-aviso[hidden] { display:none; }

/* O corpo rola; a barra nunca cobre a tela inteira — no celular isso
   esconderia o teclado no passo dos dados. */
/* O respiro entre a lista e a barra: `padding-right` dentro do contêiner que
   rola, que é o único lugar onde o espaço acompanha o conteúdo — margem no
   filho não vale, a barra é desenhada na borda do pai.
 
   Ele só aparece se a barra tiver LARGURA PRÓPRIA. Barra flutuante (o padrão
   do macOS) é pintada por cima e come o respiro inteiro; quem garante a
   largura é o bloco de cor logo abaixo. */
.ab-corpo {
  max-height:52vh; overflow-y:auto; margin-bottom:12px;
  padding-right:10px;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:640px){ .ab-corpo { max-height:46vh; } }

/* A barra de rolagem na cor do consultório.

   ---------- por que o ::-webkit-scrollbar vem PRIMEIRO e sozinho ----------
   As propriedades padrão (`scrollbar-color`, `scrollbar-width`) parecem a
   escolha óbvia, e foram a minha. Só que no Chromium elas têm precedência: a
   presença delas DESLIGA o ::-webkit-scrollbar — e aí a barra volta a ser a
   flutuante do sistema, pintada POR CIMA do conteúdo, sem largura própria.
   O padding-right continuava lá e não aparecia, porque a barra o cobria.

   Medido no mesmo elemento, mesma janela: com as padrão, offsetWidth menos
   clientWidth dava 0; tirando as duas, 8. A barra só ganha largura — e o
   respiro só existe — pelo caminho do webkit.

   `width:8px` em vez da barra cheia porque isto é uma lista estreita dentro
   de um card; a barra padrão do Windows comeria 17px da largura dos dias.

   Sempre visível é o objetivo, não efeito colateral: é ela que avisa que
   existe mais dia embaixo. */
.ab-corpo::-webkit-scrollbar { width:8px; }
.ab-corpo::-webkit-scrollbar-track {
  background:color-mix(in srgb, var(--ab-cor) 12%, #fff); border-radius:8px;
}
.ab-corpo::-webkit-scrollbar-thumb {
  background:var(--ab-cor); border-radius:8px;
  border:2px solid color-mix(in srgb, var(--ab-cor) 12%, #fff);
}

/* O Firefox não tem ::-webkit-scrollbar — lá o único jeito de colorir é a
   propriedade padrão, e usá-la não custa nada porque o bloco acima não
   existe naquele navegador. O @supports é o que impede que ela vaze para o
   Chromium e desligue o de cima. */
@supports not selector(::-webkit-scrollbar) {
  .ab-corpo {
    scrollbar-width:thin;
    scrollbar-color:var(--ab-cor) color-mix(in srgb, var(--ab-cor) 12%, #fff);
  }
}

.ab-etapa[hidden] { display:none; }

/* ---------- passo 1: médicos ---------- */
.ab-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px; }
@media (max-width:640px){ .ab-cards { grid-template-columns:1fr; } }
.ab-card {
  display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  background:#fff; border:1.5px solid #eef1f6; border-radius:14px;
  padding:12px; cursor:pointer; font:inherit; color:inherit; transition:.16s;
}
.ab-card:hover { border-color:color-mix(in srgb, var(--ab-cor) 45%, #fff); }
.ab-card.on { border-color:var(--ab-cor); background:color-mix(in srgb, var(--ab-cor) 7%, #fff); }
.ab-av {
  flex:none; width:44px; height:44px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem;
}
.ab-card-txt { min-width:0; }
.ab-card-txt b { display:block; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-card-txt span { display:block; font-size:.78rem; color:#6B7686; }
.ab-card-marca { margin-left:auto; flex:none; color:var(--ab-cor); font-weight:800; opacity:0; }
.ab-card.on .ab-card-marca { opacity:1; }

/* ---------- passo 2: dias ---------- */
.ab-dias { display:flex; flex-direction:column; gap:6px; }
.ab-dia {
  padding:11px 12px; border:1.5px solid #e3e8ef; border-radius:9px;
  cursor:pointer; font-size:.88rem; transition:.14s;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
/* Quanto falta até o dia ("amanhã", "em 3 dias"), ou por que ele não serve.
   Discreto de propósito: quem escolhe escolhe pela data, e a distância é a
   conferência — em peso igual, as duas informações competem. */
.ab-dia small { font-size:.78rem; opacity:.55; font-weight:500; white-space:nowrap; }
.ab-dia.on small { opacity:.7; }
.ab-dia:hover { border-color:var(--ab-cor); }
.ab-dia.on { border-color:var(--ab-cor); background:color-mix(in srgb, var(--ab-cor) 8%, #fff); font-weight:700; }
.ab-dia.off { color:#9AA4B2; background:#f7f9fb; cursor:default; border-color:#eef1f6; }
.ab-dia.off:hover { border-color:#eef1f6; }

/* ---------- passo 3: horários ---------- */
.ab-slots { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
@media (min-width:700px){ .ab-slots { grid-template-columns:repeat(6, 1fr); } }
.ab-slot {
  padding:10px 4px; text-align:center; border:1.5px solid #e3e8ef; border-radius:8px;
  cursor:pointer; font-size:.84rem; font-weight:600; transition:.14s;
}
.ab-slot:hover { border-color:var(--ab-cor); }
.ab-slot.on { background:var(--ab-cor); border-color:var(--ab-cor); color:#fff; }
.ab-slot.busy { color:#C7D2E0; background:#f7f9fb; border-color:#eef1f6; cursor:default; text-decoration:line-through; }
.ab-slot.busy:hover { border-color:#eef1f6; }

/* ---------- passo 4: dados ---------- */
.ab-campo {
  display:block; width:100%; margin-bottom:8px; font:inherit; font-size:.92rem;
  border:1px solid #dfe4ec; border-radius:10px; padding:11px 12px; color:#15233B;
}
.ab-campo:last-child { margin-bottom:0; }
.ab-campo:focus { outline:none; border-color:var(--ab-cor); }

/* ---------- entrar na conta, dentro do passo 4 ----------
   O formulário vem pronto do assets/js/paciente-auth.js, com a cara que ele
   já tinha na janela — o que muda aqui é só o que o passo impõe.

   O azul fixo do botão "Entrar" vira a cor da especialidade: dentro do card
   do consultório, um botão de outra cor parece de outro site. */
.ab-login .pa-entrar { background:var(--ab-cor); }
.ab-login .pa-campo:focus { border-color:var(--ab-cor); }
.ab-login .pa-troca a { color:var(--ab-cor); }
/* Sem margem sobrando: o passo já tem o respiro dele. */
.ab-login .pa-troca { margin-bottom:0; }
.ab-login[hidden] { display:none; }

/* Campo de escolha (os `camposExtras` com `opcoes`). Sem `appearance:none`
   ele chega com a caixa do sistema — mais alta, cinza e de outra família —
   e desalinha a fila de campos. A setinha é desenhada com dois degradês,
   para não depender de imagem nem de fonte de ícone. */
select.ab-campo {
  appearance:none; -webkit-appearance:none; background-color:#fff;
  padding-right:34px; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #8A94A6 50%),
    linear-gradient(135deg, #8A94A6 50%, transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
/* A primeira opção é o rótulo, não uma resposta: cinza como placeholder. */
select.ab-campo option[value=""] { color:#8A94A6; }

/* ---------- confirmação ---------- */
.ab-ok { text-align:center; padding:10px 0 4px; }
.ab-ok-ico { font-size:2.2rem; }
.ab-ok b { display:block; margin:6px 0 4px; }
.ab-ok p { color:#6B7686; font-size:.9rem; margin:0; line-height:1.55; }

/* ---------- o botão ---------- */
.ab-botao {
  display:block; width:100%; border:none; border-radius:11px; cursor:pointer;
  background:var(--ab-cor); color:#fff; font:inherit; font-weight:700;
  font-size:.98rem; padding:14px 20px; transition:.16s;
}
.ab-botao:hover:not([disabled]) { filter:brightness(.93); }
.ab-botao[disabled] { opacity:.5; cursor:not-allowed; }
/* O `display` da regra acima vence o atributo `hidden`, que o navegador
   aplica com a menor força possível. Sem esta linha, o "Confirmar
   agendamento" continuava desenhado embaixo do formulário de entrar — um
   botão morto logo abaixo do que a pessoa tem de fazer primeiro. */
.ab-botao[hidden] { display:none; }

/* dia sem horário nenhum: a grade vazia sem explicação parecia um erro de
   carregamento, e a pessoa ficava esperando os botões aparecerem */
.ab-vazio {
  grid-column:1/-1; padding:18px 4px; text-align:center;
  font-size:.88rem; color:#6B7686;
}