/* ════════════════════════════════════════════════════════════════
   BUILD 246 — Refatoração Premium do Modal de Detalhe do Fármaco
   (Onda 3) — #fd-modal / openFarmacoDetail()
   ────────────────────────────────────────────────────────────────
   Escopo: SOMENTE apresentação/DOM. Nenhuma lógica clínica ou de
   i18n foi alterada — apenas a organização visual do conteúdo já
   gerado por openFarmacoDetail()/_fdResolveHeroPatient().

   Conteúdo deste arquivo:
   1) Segmented Control de abas (Posologia / Segurança / Farmacologia)
   2) Banner-camaleão de dose (muda de cor conforme estado renal)
   3) Timeline vertical de ajuste renal com destaque esmeralda
   4) Paridade total Dark/Light Mode (body.light-mode)
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1) SEGMENTED CONTROL — abas Posologia / Segurança / Farmacologia
──────────────────────────────────────────────────────────────── */
.fd-tabs-nav {
  display: flex;
  gap: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 4px 0;
}
body.light-mode .fd-tabs-nav {
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.08);
}

.fd-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748B);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  padding: 9px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.fd-tab-btn:active { opacity: 0.8; }
.fd-tab-btn.active {
  background: #38BDF8;
  color: #06131F;
  box-shadow: 0 2px 10px rgba(56,189,248,0.35);
}
body.light-mode .fd-tab-btn.active {
  background: #0369A1;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(3,105,161,0.28);
}

.fd-tab-panel { display: none; flex-direction: column; gap: 14px; }
.fd-tab-panel.active { display: flex; }

/* ────────────────────────────────────────────────────────────────
   2) BANNER CAMALEÃO — .fd-dose-hero muda de tom conforme estado
      renal/patient (ok · alert · hd · missing). Reaproveita as
      MESMAS cores semânticas já usadas nos chips (--fd-hero-chip--*)
──────────────────────────────────────────────────────────────── */
.fd-dose-hero.fd-hero-state-ok {
  background: linear-gradient(160deg, rgba(56,189,248,0.08), rgba(56,189,248,0.02));
  border-color: rgba(56,189,248,0.28);
}
.fd-dose-hero.fd-hero-state-ok .fd-dose-hero-label {
  background: rgba(56,189,248,0.07);
  border-bottom-color: rgba(56,189,248,0.15);
  color: #38BDF8;
}

.fd-dose-hero.fd-hero-state-alert {
  background: linear-gradient(160deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
  border-color: rgba(251,191,36,0.32);
}
.fd-dose-hero.fd-hero-state-alert .fd-dose-hero-label {
  background: rgba(251,191,36,0.09);
  border-bottom-color: rgba(251,191,36,0.18);
  color: #FBBF24;
}
.fd-dose-hero.fd-hero-state-alert .fd-dose-val--hero,
.fd-dose-hero.fd-hero-state-alert .fd-dose-val--hero strong {
  color: #FBBF24 !important;
}

.fd-dose-hero.fd-hero-state-hd {
  background: linear-gradient(160deg, rgba(248,113,113,0.11), rgba(248,113,113,0.02));
  border-color: rgba(248,113,113,0.34);
}
.fd-dose-hero.fd-hero-state-hd .fd-dose-hero-label {
  background: rgba(248,113,113,0.10);
  border-bottom-color: rgba(248,113,113,0.20);
  color: #F87171;
}
.fd-dose-hero.fd-hero-state-hd .fd-dose-val--hero,
.fd-dose-hero.fd-hero-state-hd .fd-dose-val--hero strong {
  color: #F87171 !important;
}

.fd-dose-hero.fd-hero-state-missing {
  background: linear-gradient(160deg, rgba(148,163,184,0.08), rgba(148,163,184,0.015));
  border-color: rgba(148,163,184,0.22);
}
.fd-dose-hero.fd-hero-state-missing .fd-dose-hero-label {
  background: rgba(148,163,184,0.06);
  border-bottom-color: rgba(148,163,184,0.14);
  color: #94A3B8;
}

/* Light mode — variantes camaleão */
body.light-mode .fd-dose-hero.fd-hero-state-ok {
  background: linear-gradient(160deg, rgba(3,105,161,0.06), rgba(3,105,161,0.01));
  border-color: rgba(3,105,161,0.22);
}
body.light-mode .fd-dose-hero.fd-hero-state-ok .fd-dose-hero-label {
  background: rgba(3,105,161,0.07); color: #0369A1; border-bottom-color: rgba(3,105,161,0.12);
}
body.light-mode .fd-dose-hero.fd-hero-state-alert {
  background: linear-gradient(160deg, rgba(180,83,9,0.08), rgba(180,83,9,0.015));
  border-color: rgba(180,83,9,0.28);
}
body.light-mode .fd-dose-hero.fd-hero-state-alert .fd-dose-hero-label { background: rgba(180,83,9,0.08); color: #B45309; border-bottom-color: rgba(180,83,9,0.16); }
body.light-mode .fd-dose-hero.fd-hero-state-alert .fd-dose-val--hero,
body.light-mode .fd-dose-hero.fd-hero-state-alert .fd-dose-val--hero strong { color: #B45309 !important; }
body.light-mode .fd-dose-hero.fd-hero-state-hd {
  background: linear-gradient(160deg, rgba(185,28,28,0.08), rgba(185,28,28,0.015));
  border-color: rgba(185,28,28,0.28);
}
body.light-mode .fd-dose-hero.fd-hero-state-hd .fd-dose-hero-label { background: rgba(185,28,28,0.08); color: #B91C1C; border-bottom-color: rgba(185,28,28,0.16); }
body.light-mode .fd-dose-hero.fd-hero-state-hd .fd-dose-val--hero,
body.light-mode .fd-dose-hero.fd-hero-state-hd .fd-dose-val--hero strong { color: #B91C1C !important; }
body.light-mode .fd-dose-hero.fd-hero-state-missing {
  background: linear-gradient(160deg, rgba(100,116,139,0.06), rgba(100,116,139,0.01));
  border-color: rgba(100,116,139,0.20);
}
body.light-mode .fd-dose-hero.fd-hero-state-missing .fd-dose-hero-label { background: rgba(100,116,139,0.06); color: #64748B; border-bottom-color: rgba(100,116,139,0.12); }

/* ────────────────────────────────────────────────────────────────
   3) TIMELINE VERTICAL DE AJUSTE RENAL — destaque esmeralda
      na faixa ativa do paciente. Reaproveita .fd-renal-faixa
      já gerado pelo JS, apenas adiciona linha/dot conectores.
──────────────────────────────────────────────────────────────── */
.fd-renal-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}
.fd-renal-tl-item {
  position: relative;
  padding-left: 26px !important;
}
/* Linha vertical conectando os nós (exceto após o último) */
.fd-renal-tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 8px; top: 22px; bottom: -8px;
  width: 2px;
  background: rgba(255,255,255,0.10);
}
body.light-mode .fd-renal-tl-item:not(:last-child)::before {
  background: rgba(15,23,42,0.10);
}
/* Dot marcador de cada faixa */
.fd-renal-tl-dot {
  position: absolute;
  left: 3px; top: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid var(--bg-card, #1E293B);
  z-index: 1;
}
body.light-mode .fd-renal-tl-dot {
  background: rgba(15,23,42,0.18);
  border-color: #ffffff;
}

/* Faixa ATIVA do paciente atual — destaque esmeralda (não mais cyan) */
.fd-renal-tl-item.fd-renal-tl-item--active {
  background: rgba(16,185,129,0.09);
  border-left: 3px solid #10B981 !important;
  border-radius: 0 10px 10px 0;
  margin-left: -3px;
}
.fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-tl-dot {
  background: #10B981;
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}
.fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-faixa-label {
  color: #34D399 !important;
}
.fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-active-pill {
  color: #10B981 !important;
  background: rgba(16,185,129,0.14) !important;
  border-color: rgba(16,185,129,0.35) !important;
}
body.light-mode .fd-renal-tl-item.fd-renal-tl-item--active {
  background: rgba(5,150,105,0.08);
  border-left-color: #059669 !important;
}
body.light-mode .fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-tl-dot {
  background: #059669; border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.20);
}
body.light-mode .fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-faixa-label { color: #059669 !important; }
body.light-mode .fd-renal-tl-item.fd-renal-tl-item--active .fd-renal-active-pill {
  color: #059669 !important;
  background: rgba(5,150,105,0.12) !important;
  border-color: rgba(5,150,105,0.30) !important;
}

/* ────────────────────────────────────────────────────────────────
   4) Reforços gerais de paridade Light Mode do modal (Onda 3)
──────────────────────────────────────────────────────────────── */
body.light-mode .fd-tabs-nav { }
body.light-mode #fd-modal .fd-tab-btn { color: #64748B; }