/* Booking calendar modal — Calendly-style scheduling flow */

.cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(40, 41, 43, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-snap), visibility 0.3s;
}
.cal-overlay.is-open { opacity: 1; visibility: visible; }
body.cal-open { overflow: hidden; }

.cal-modal {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(11, 18, 32, 0.24);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s var(--ease-reveal), max-width 0.35s var(--ease-snap);
}
.cal-overlay.is-open .cal-modal { transform: translateY(0) scale(1); }
.cal-modal--wide { max-width: 980px; }

.cal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
}
.cal-close:hover { background: var(--color-bg-soft); color: var(--color-dark); }

.cal-body {
  display: flex;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.cal-info {
  flex: 0 0 260px;
  padding: 40px 28px;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.cal-panel { flex: 1; padding: 40px 32px; min-width: 0; }

.cal-info-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.cal-info-logo { width: 28px; height: 28px; }
.cal-info-org { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; margin: 0; }
.cal-info-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--color-dark); margin: 0 0 12px; }
.cal-info-duration { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 20px; }
.cal-info-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.cal-info-summary p { margin: 0 0 8px; font-size: 0.9rem; color: var(--color-text); }
.cal-info-summary strong { color: var(--color-dark); }

.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-nav-label { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--color-dark); text-transform: capitalize; }
.cal-nav-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-dark); transition: background-color 0.2s var(--ease-snap); }
.cal-nav-btn:hover:not(:disabled) { background: var(--color-bg-soft); }
.cal-nav-btn:disabled { color: var(--color-border); cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekday { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); padding-bottom: 8px; }
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-dark);
  transition: background-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
}
.cal-day--available { background: rgba(0, 209, 255, 0.1); color: var(--color-primary-dark); }
.cal-day--available:hover { background: var(--color-primary-strong); color: #fff; }
.cal-day--selected { background: var(--color-primary-strong); color: #fff; }
.cal-day--empty { visibility: hidden; }
.cal-day:disabled:not(.cal-day--empty) { color: var(--color-border); background: none; cursor: default; }

.cal-time-layout { display: flex; gap: 32px; }
.cal-calendar-col { flex: 1; min-width: 0; }
.cal-times-col { flex: 0 0 220px; display: flex; flex-direction: column; }
.cal-back { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-dark); }
.cal-back:hover { background: var(--color-bg-soft); }
.cal-times-heading { font-weight: 600; color: var(--color-dark); margin: 0 0 12px; font-size: 0.95rem; text-transform: capitalize; }
.cal-times-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 360px; padding-right: 4px; }
.cal-time-btn {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: background-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
}
.cal-time-btn:hover:not(:disabled) { background: var(--color-primary-strong); color: #fff; }
.cal-time-btn:disabled { border-color: var(--color-border); color: var(--color-border); cursor: default; }

.cal-field { margin-bottom: 20px; }
.cal-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-dark); margin-bottom: 6px; }
.cal-field label span { font-weight: 400; color: var(--color-text-muted); }
.cal-field input, .cal-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
  transition: border-color 0.2s var(--ease-snap);
}
.cal-field input:focus, .cal-field textarea:focus { outline: none; border-color: var(--color-primary); }
/* iOS Safari zooms the page when a focused field computes under 16px, and the
   user has to pinch back out — once per field, four fields deep in this form.
   Gated on pointer rather than width because that is the actual condition:
   an iPad at 900px zooms too, and a 900px desktop window does not. */
@media (pointer: coarse) {
  .cal-field input, .cal-field textarea { font-size: 16px; }
}
.cal-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.cal-back-link { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
.cal-back-link:hover { color: var(--color-primary-strong); }

.cal-step-confirmation { text-align: center; padding-top: 12px; }
.cal-confirm-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: btn-pulse-ring 2.8s ease-out infinite;
}
/* The drawn-on tick, mounted by calendar.js when lottie is available. The
   static <svg> beside it is the fallback and is only hidden once the animation
   has actually LOADED — see mountConfirmTick(). Blog pages never load
   lottie-web, so there the static tick is what shows, permanently. */
.cal-confirm-anim { position: absolute; inset: 0; }
.cal-confirm-icon.has-anim > svg { display: none; }
.cal-confirm-title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; color: var(--color-dark); margin: 0 0 20px; }
.cal-confirm-summary { text-align: left; max-width: 320px; margin: 0 auto 28px; background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 20px 24px; }
.cal-confirm-summary p { margin: 0 0 10px; font-size: 0.9rem; color: var(--color-text); }
.cal-confirm-summary p:last-child { margin-bottom: 0; }
.cal-confirm-summary strong { color: var(--color-dark); }

@media (max-width: 767px) {
  .cal-overlay { padding: 0; }
  .cal-modal, .cal-modal--wide { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .cal-body { flex-direction: column; max-height: 100%; }
  .cal-info { flex: none; border-right: none; border-bottom: 1px solid var(--color-border); padding: 24px 20px; }
  .cal-panel { padding: 24px 20px; }
  .cal-time-layout { display: block; }
  .cal-calendar-col { display: none; }
  .cal-times-col { flex: none; }
  .cal-back { display: flex; margin-bottom: 12px; }
}

/* --- Campos extras quando o plugin de agendamentos está ligado -------------
   O modal nasceu como demonstração (nome + observações -> WhatsApp). Com o
   plugin ativo ele grava um pedido de verdade, e um pedido precisa de contato
   e de consentimento. Estes estilos só têm efeito quando esses campos existem. */

.cal-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-soft, #767676);
  margin: 4px 0 14px;
}
.cal-consent input { margin-top: 2px; flex: 0 0 auto; }
.cal-consent a { color: var(--color-primary-dark, #00AD64); text-decoration: underline; }

.cal-error {
  background: #FEF3F2;
  border-left: 3px solid #D92D20;
  color: #912018;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 0 0 14px;
}

.cal-confirm-note {
  font-size: 14px;
  color: var(--color-text-soft, #767676);
  margin: 0 0 14px;
}

/* --- Funil: histórico de saúde depois do agendamento ---------------------- */

.cal-upsell {
  background: #F4FBF7;
  border: 1px solid #CDEFE0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
  text-align: left;
}
.cal-upsell-title { font-weight: 700; margin: 0 0 6px; }
.cal-upsell-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-soft, #767676);
  margin: 0 0 14px;
}
.cal-upsell .btn { width: 100%; }
.cal-upsell .cal-back-link { display: block; width: 100%; margin-top: 10px; text-align: center; }

.cal-anamnese-intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-soft, #767676);
  margin: 0 0 16px;
}

/* O questionário é longo; rolar dentro do modal evita empurrar os botões para
   fora da tela no celular. */
.cal-anamnese { max-height: 62vh; overflow-y: auto; padding-right: 4px; }

.cal-anamnese fieldset.cal-field {
  border: 1px solid var(--color-border, #E4E7EC);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 14px;
}
.cal-anamnese legend {
  font-size: 14px;
  font-weight: 600;
  padding: 0 6px;
}
.cal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 3px 0;
}
.cal-check input { flex: 0 0 auto; }

/* `.cal-anamnese select` lived here and styled the native control. It went
   when the drawn select landed — nothing renders a bare <select> any more.
   It is worth recording why it could not just be left lying around: at
   (0,1,1) it outranked `.cal-select-native` (0,1,0) and pushed the hidden
   field back to 100% width, so the thing meant to be out of sight was
   sitting at full size behind the button, held back only by the clip. */

/* --- Funil: passo 1 (qual atendimento) e a trilha de progresso -------------

   O modal abria direto no calendário porque a página já tinha escolhido o
   serviço. Com o registro de serviços (window.CHOLO_SERVICOS) a escolha passa
   a ser de quem agenda, e ela vem antes de tudo.

   Tudo aqui entrega completo em CSS. O JS só troca de passo: se ele não rodar,
   o CTA continua sendo um link com href de verdade e nada deste arquivo chega
   a aparecer. */

.cal-passo-titulo {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.cal-passo-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 22px;
}

/* --- os cards de serviço --- */

.cal-svc-lista {
  display: grid;
  gap: 10px;
}
.cal-svc {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-snap),
              box-shadow 0.2s var(--ease-snap),
              transform 0.2s var(--ease-snap);
}
.cal-svc:hover,
.cal-svc:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(0, 71, 204, 0.09);
  transform: translateY(-1px);
}

.cal-svc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* O mesmo chip cyan claro dos ícones do site. O token existe porque é o
     fundo contra o qual --color-primary-strong foi calibrado para AA. */
  background: #E0F3FC;
  color: var(--color-primary-strong);
}
.cal-svc-icon svg { width: 22px; height: 22px; }

.cal-svc-text { min-width: 0; }
.cal-svc-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
}
.cal-svc-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.cal-svc-meta {
  text-align: right;
  white-space: nowrap;
}
.cal-svc-meta b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
}
/* A nota é onde moram "Controle especial a partir de..." e "Sem cobrança
   separada, dentro da consulta de...". Ela precisa quebrar linha: é a frase
   que impede o card de dar a entender um preço que não existe. */
.cal-svc-meta small {
  display: block;
  max-width: 215px;
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: normal;
}

/* O serviço da página em que a pessoa está. Marca discreta: sugere por onde
   ela entrou, sem parecer uma recomendação clínica. */
.cal-svc.is-sugerido {
  border-color: var(--color-primary);
  background: linear-gradient(0deg, #F7FCFE, #F7FCFE);
}

/* --- a trilha de progresso, na coluna da esquerda --- */

.cal-info-preco {
  margin: 0 0 14px;
  line-height: 1.3;
}
.cal-info-preco b {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
}
.cal-info-preco small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.cal-trilha {
  /* The muted text colour, thinned to a track. Defined here rather than in
     base.css: nothing outside the booking modal draws a progress trail. */
  --cal-trilha-track: rgba(100, 114, 143, 0.26);
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.cal-trilha-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}
.cal-trilha-item:last-child { padding-bottom: 0; }

/* O fio que liga as marcas. Desenhado no ::before do item, não num elemento
   à parte, para que o último item simplesmente não o tenha. */
.cal-trilha-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 2px;
  width: 2px;
  /* NOT --color-border. That token is #F4F6FC, which is also the value of
     --color-bg-soft — the background of this very column — so the unvisited
     part of the trail was drawn in exactly the colour behind it and could not
     be seen at all. The trail has to read as a track with progress on it. */
  background: var(--cal-trilha-track);
}
.cal-trilha-item:last-child::before { display: none; }

.cal-trilha-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cal-trilha-track);
  background: var(--color-bg);
  transition: border-color 0.3s var(--ease-snap), background-color 0.3s var(--ease-snap);
}
.cal-trilha-item.is-done .cal-trilha-mark {
  border-color: var(--color-primary-strong);
  background: var(--color-primary-strong);
}
.cal-trilha-item.is-done::before { background: var(--color-primary-strong); }
.cal-trilha-item.is-now .cal-trilha-mark {
  border-color: var(--color-primary-strong);
  background: var(--color-bg);
  box-shadow: 0 0 0 4px rgba(0, 119, 145, 0.14);
}
.cal-trilha-item.is-now .cal-trilha-label {
  color: var(--color-dark);
  font-weight: 700;
}
.cal-trilha-item.is-done .cal-trilha-label { color: var(--color-text); }

/* Voltar acima do calendário, quando existe passo anterior. */
.cal-back-row {
  display: inline-block;
  margin-bottom: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 767px) {
  /* No telefone a coluna da esquerda vira faixa no topo, e uma trilha vertical
     ali empurraria o conteúdo para fora da tela. Deita e vira marcas. */
  .cal-trilha {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    /* Espaço reservado para o rótulo, que sai do fluxo logo abaixo. */
    position: relative;
    padding-bottom: 22px;
  }
  .cal-trilha-item {
    flex: 1 1 0;
    display: block;
    padding-bottom: 0;
    /* Estático de propósito, ao contrário do desktop. O rótulo abaixo é
       absoluto e precisa se resolver contra a TRILHA inteira; contra o item,
       que tem a altura da barra (4px), `bottom: 0` o joga por cima dela. */
    position: static;
  }
  .cal-trilha-item::before { display: none; }
  .cal-trilha-item:last-child::before { display: none; }
  .cal-trilha-mark {
    /* Obrigatório. A marca é um <span>, e no desktop ela só tem largura e
       altura porque o item é flex e a blocifica. Aqui o item vira `block`,
       o span volta a ser inline, e width/height passam a não valer nada:
       as cinco barras somem sem deixar rastro no getComputedStyle, que
       continua respondendo "4px". */
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: var(--cal-trilha-track);
  }
  .cal-trilha-item.is-done .cal-trilha-mark,
  .cal-trilha-item.is-now .cal-trilha-mark { background: var(--color-primary-strong); }
  .cal-trilha-item.is-now .cal-trilha-mark { box-shadow: none; }
  /* Só o rótulo do passo atual, para caberem cinco marcas numa linha.
     Ele sai do fluxo e ancora à esquerda da trilha inteira, em vez de ficar
     pendurado na sua coluna de 61px, onde "Data e hora" quebrava depois do
     "e". Absoluto também garante que o rótulo do último passo não empurre
     nada para fora da tela. */
  .cal-trilha-label {
    display: none;
    font-size: 0.72rem;
  }
  .cal-trilha-item.is-now .cal-trilha-label {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    white-space: nowrap;
  }

  /* O card em 390px: o preço desce para baixo do nome em vez de espremer a
     coluna do meio até o subtítulo quebrar letra a letra. */
  .cal-svc {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .cal-svc-icon { width: 40px; height: 40px; }
  .cal-svc-meta {
    grid-column: 2;
    text-align: left;
  }
  .cal-svc-meta small { max-width: none; }
}

/* --- O select desenhado na página ----------------------------------------

   Um <select> nativo abre o menu do sistema operacional: fonte, cantos e
   cores do Windows ou do Android dentro de um modal que não se parece com
   nada disso, e sem nenhuma forma de estilizar as <option>. Este componente
   desenha a lista aqui dentro.

   O <select> real continua no DOM guardando o valor — ver renderSelect() em
   calendar.js. Estes estilos só o tiram de vista; não o removem. */

.cal-select { position: relative; }

/* Fora de vista, mas ainda no formulário: `display: none` tiraria o campo do
   envio e do `required`. É a mesma técnica do .sr-only do base.css. */
.cal-select .cal-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cal-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  /* Os mesmos valores de .cal-field input: o campo tem de parecer o vizinho. */
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-snap);
}
.cal-select-btn:hover { border-color: var(--color-primary); }
.cal-select-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.18);
}
.cal-select.is-open .cal-select-btn { border-color: var(--color-primary); }

.cal-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Selecione…" não é uma resposta: cor de texto secundário, como um
   placeholder de <input>. */
.cal-select-value.is-placeholder { color: var(--color-text-muted); }

.cal-select-caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: transform 0.2s var(--ease-snap);
}
.cal-select.is-open .cal-select-caret { transform: rotate(180deg); }

.cal-select-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 248px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(11, 18, 32, 0.16);
}
/* Quando não cabe para baixo — ver abrirSelect(), que mede o espaço. */
.cal-select.is-up .cal-select-list {
  top: auto;
  bottom: calc(100% + 6px);
}

.cal-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--color-text);
  cursor: pointer;
}
/* is-active é a opção sob o teclado; o hover do mouse pinta igual, para que
   as duas formas de navegar mostrem a mesma coisa. */
.cal-select-option:hover,
.cal-select-option.is-active { background: var(--color-bg-soft); color: var(--color-dark); }
.cal-select-option.is-selected { color: var(--color-dark); font-weight: 600; }

.cal-select-tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-primary-strong);
  opacity: 0;
}
.cal-select-option.is-selected .cal-select-tick { opacity: 1; }

@media (pointer: coarse) {
  /* Mesma regra dos inputs logo acima: abaixo de 16px o Safari do iPhone dá
     zoom na página ao focar, e a pessoa tem de fechar o zoom com os dedos. */
  .cal-select-btn { font-size: 16px; }
  .cal-select-option { padding: 13px 12px; font-size: 16px; }
}

/* As setinhas do <input type="number"> são outro controle do sistema, e o
   questionário tem dois campos assim (peso, altura). Some com elas; o teclado
   numérico do celular vem do type e continua vindo. Não mexe no
   <input type="date"> de nascimento — ali o calendário nativo é melhor do que
   qualquer coisa que se desenhasse para voltar quarenta anos. */
.cal-anamnese input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.cal-anamnese input[type="number"]::-webkit-outer-spin-button,
.cal-anamnese input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}