/* ============================================================
   Núcleo Centro Médico — sistema visual do dossiê clínico
   Registro: corporativo / institucional / relatório encadernado
   Identidade clínica-fria: branco-clínico #F6F8F8 + teal #2C6E75
   Display: Lora (serifa humanista) · corpo/UI: Inter
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* rede contra overflow horizontal (causas corrigidas nos componentes) */
html, body { overflow-x: hidden; max-width: 100%; }

/* tabular-nums em toda superfície de dados */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------
   TRILHO — container fluido e generoso.
   Em 1920/2560 o dossiê continua composto: teto sobe a 1680px
   e o respiro lateral cresce por clamp (nunca boiando no vazio).
   ------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: min(92vw, 1680px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.2vw, 6rem);
}
.shell-mid {
  width: 100%;
  max-width: min(92vw, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 5rem);
}
.shell-narrow {
  width: 100%;
  max-width: min(92vw, 980px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 5rem);
}

/* faixa full-bleed (capa e chamadas em tinta fria) */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* safe-area em telas com notch */
@supports (padding: max(0px)) {
  .safe-r { padding-right: max(1rem, env(safe-area-inset-right)); }
  .safe-b { bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------
   LAYOUT DE DOSSIÊ — duas colunas no xl/2xl.
   coluna-índice STICKY à esquerda + corpo do relatório à direita.
   No md/lg o índice colapsa para faixa horizontal.
   No mobile é fluxo full-width simples.
   ------------------------------------------------------------ */
.dossie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1280px) {
  .dossie {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 5.5rem);
    align-items: start;
  }
}
.dossie-index-sticky {
  position: sticky;
  top: 5.5rem;
  align-self: start;
}

/* ------------------------------------------------------------
   RÉGUA DE RÚBRICA — detalhe-assinatura de cada seção.
   Filete fixo 48px teal clínico + número da seção em serifa.
   ------------------------------------------------------------ */
.rubrica-rule {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: #2C6E75;
  vertical-align: middle;
}

/* filete hairline institucional */
.hairline { border-color: #D5DEE0; }
.rule-hair { height: 1px; background: #D5DEE0; }

/* scrim real sobre foto — garante AA de branco sobre tinta fria */
.scrim-slate {
  background:
    linear-gradient(180deg, rgba(23,36,42,.62) 0%, rgba(23,36,42,.80) 100%),
    linear-gradient(90deg, rgba(23,36,42,.86) 0%, rgba(23,36,42,.55) 100%);
}
.scrim-soft {
  background: linear-gradient(180deg, rgba(23,36,42,.50) 0%, rgba(23,36,42,.72) 100%);
}

/* régua de margem lateral (número de página do documento) */
.page-margin {
  position: fixed;
  right: clamp(.4rem, 1.4vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  letter-spacing: .22em;
  font-size: 10px;
  color: #64707A;
  font-variant-numeric: tabular-nums;
  z-index: 20;
  pointer-events: none;
}
@media (max-width: 1279px) { .page-margin { display: none; } }

/* ------------------------------------------------------------
   TABELAS DO DOSSIÊ — filetes horizontais hairline separando
   registros. Densidade tabular, tabular-nums.
   ------------------------------------------------------------ */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4A5A62;
  font-weight: 600;
  padding: 0 1rem .7rem;
  border-bottom: 1.5px solid #2A3A41;
  white-space: nowrap;
}
.doc-table tbody td {
  padding: .95rem 1rem;
  border-bottom: 1px solid #D5DEE0;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.doc-table tbody tr:last-child td { border-bottom: 1px solid #D5DEE0; }
.doc-table tbody tr { transition: background-color .25s ease; }
@media (hover: hover) {
  .doc-table tbody tr:hover { background: rgba(44,110,117,.055); }
}
.doc-table thead th:first-child,
.doc-table tbody td:first-child { padding-left: 0; }
@media (max-width: 640px) {
  .doc-table thead th, .doc-table tbody td { padding-left: .5rem; padding-right: .5rem; }
  .doc-table thead th:first-child, .doc-table tbody td:first-child { padding-left: 0; }
}

/* ------------------------------------------------------------
   SUMÁRIO — índice numerado, número em serifa tabular.
   Estado ativo com filete teal clínico.
   ------------------------------------------------------------ */
.toc-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .55rem 0 .55rem .9rem;
  color: #4A5A62;
  border-left: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
  min-height: 40px;
}
.toc-link .toc-num {
  font-family: "Lora", Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: #64707A;
  transition: color .25s ease;
  min-width: 1.4em;
}
.toc-link:hover { color: #17242A; }
.toc-link[aria-current="true"] {
  color: #17242A;
  border-left-color: #2C6E75;
  font-weight: 500;
}
.toc-link[aria-current="true"] .toc-num { color: #2C6E75; }

/* faixa horizontal do sumário (md/lg) */
.toc-strip a {
  color: #4A5A62;
  transition: color .25s ease, border-color .25s ease;
  border-bottom: 2px solid transparent;
}
.toc-strip a[aria-current="true"] { color: #17242A; border-bottom-color: #2C6E75; }
.toc-strip a:hover { color: #17242A; }

/* ------------------------------------------------------------
   fichas / cartões de especialidade
   ------------------------------------------------------------ */
.spec-card {
  background: #FCFDFD;
  border: 1px solid #D5DEE0;
  transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease;
}
@media (hover: hover) {
  .spec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -22px rgba(23,36,42,.5);
    border-color: #AEBEC1;
  }
}

/* foco visível acessível */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #2C6E75; outline-offset: 3px; border-radius: 2px;
}

/* ------------------------------------------------------------
   MICRO-ANIMAÇÕES — feedback / estado (150–400ms, transform/opacity)
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.is-in { opacity: 1; transform: none; }

.btn-press { transition: transform .18s ease, background-color .25s ease, box-shadow .25s ease; will-change: transform; }
.btn-press:hover { transform: translateY(-1px); }
.btn-press:active { transform: translateY(0) scale(.985); }

header { transition: box-shadow .3s ease, background-color .3s ease; }
header.is-scrolled { box-shadow: 0 1px 0 rgba(23,36,42,.06), 0 10px 26px -18px rgba(23,36,42,.55); }

.wa-float { transition: transform .2s ease, box-shadow .3s ease; }
.wa-float:active { transform: scale(.94); }

/* portrait de foto: dessatura leve, realça no hover */
.portrait { transition: filter .5s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
@media (hover: hover) {
  .portrait:hover { filter: grayscale(0) contrast(1.02); transform: scale(1.012); }
}

/* ------------------------------------------------------------
   AGENDADOR — passos, calendário, régua de disponibilidade
   ------------------------------------------------------------ */
.step-panel { animation: stepIn .32s cubic-bezier(.16,.84,.44,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* trilho de passos */
.stepbar-item { color: #64707A; transition: color .25s ease; }
.stepbar-item.is-active { color: #17242A; }
.stepbar-item.is-done { color: #2C6E75; }
.stepbar-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 600;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.stepbar-item.is-active .stepbar-dot { background: #17242A; color: #FCFDFD; border-color: #17242A; }
.stepbar-item.is-done .stepbar-dot { background: #2C6E75; color: #FCFDFD; border-color: #2C6E75; }

/* opção selecionável (especialidade / profissional) */
.pick {
  text-align: left;
  background: #FCFDFD;
  border: 1px solid #D5DEE0;
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.pick:hover { border-color: #2C6E75; transform: translateY(-2px); box-shadow: 0 10px 24px -20px rgba(23,36,42,.55); }
.pick.is-selected { border-color: #2C6E75; box-shadow: inset 0 0 0 1px #2C6E75; }

/* dia do calendário */
.cal-day {
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border: 1px solid #D5DEE0;
  background: #FCFDFD;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cal-day:not(:disabled):hover { border-color: #2C6E75; transform: translateY(-1px); }
.cal-day.is-selected { background: #17242A; color: #FCFDFD; border-color: #17242A; }
.cal-day:disabled { background: #EDF1F1; color: #64707A; cursor: not-allowed; }
.cal-weekend { background: repeating-linear-gradient(135deg,#EDF1F1,#EDF1F1 5px,#E1E8E9 5px,#E1E8E9 10px); color:#64707A; }

/* slot de horário */
.slot {
  min-height: 44px;
  border: 1px solid #D5DEE0;
  background: #FCFDFD;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.slot:not(:disabled):hover { border-color: #2C6E75; transform: translateY(-1px); }
.slot.is-selected { background: #2C6E75; color: #FCFDFD; border-color: #2C6E75; }
.slot:disabled { background: #EDF1F1; color: #64707A; text-decoration: line-through; cursor: not-allowed; }

/* ------------------------------------------------------------
   RÉGUA DE DISPONIBILIDADE — tiques verticais por dia útil,
   altura/opacidade proporcional a horários livres.
   ------------------------------------------------------------ */
.availbar {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .9vw, 8px);
  height: 64px;
  padding: 0 2px;
  border-bottom: 1px solid #D5DEE0;
}
.availbar-tick {
  flex: 1 1 0;
  min-width: 4px;
  background: #2C6E75;
  border-radius: 1px 1px 0 0;
  position: relative;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  cursor: pointer;
}
.availbar-tick:disabled { background: #D5DEE0; opacity: .5; cursor: not-allowed; }
.availbar-tick.is-active { transform: scaleY(1.06); }
.availbar-tick .tick-label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #17242A; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: #FCFDFD; border: 1px solid #D5DEE0; padding: 1px 5px; border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.availbar-tick.is-active .tick-label { opacity: 1; }

/* ------------------------------------------------------------
   menu mobile — anima e fica inerte quando fechado
   ------------------------------------------------------------ */
#mobileMenu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .3s cubic-bezier(.16,.84,.44,1), opacity .25s ease, visibility 0s linear .3s;
}
#mobileMenu.open {
  max-height: 26rem;
  opacity: 1;
  visibility: visible;
  transition: max-height .3s cubic-bezier(.16,.84,.44,1), opacity .25s ease, visibility 0s linear 0s;
}
#menuBtn svg { transition: transform .3s ease; }
#menuBtn[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ------------------------------------------------------------
   respeito à preferência de movimento reduzido
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn-press:hover, .portrait:hover, .pick:hover, .spec-card:hover { transform: none; }
}