/* ============================================================
   SOFT MODERN EDITORIAL — OTÁVIO PACIENTES (BUILD 52)
   Camada de design exclusiva da área privada do paciente
   (login, início, consultas, mensagens, minha conta e shell
   do app instalado). Carregada DEPOIS de patient.css.
   Identidade compartilhada com o Pro: fundo claro aquecido,
   azul-marinho, acento azul-esverdeado — aqui em tom mais
   acolhedor e simples. Fontes preservadas: Inter + Newsreader.
   ============================================================ */

:root {
  --sm-bg: #F7F8F6;
  --sm-surface: #FFFFFF;
  --sm-surface-2: #FBFCFB;
  --sm-primary: #20374C;
  --sm-primary-deep: #18293A;
  --sm-accent: #487E89;
  --sm-accent-soft: #E8F0F1;
  --sm-accent-tint: #F0F5F5;
  --sm-neutral: #66747C;
  --sm-ink: #1C2A36;
  --sm-ink-soft: #41525E;
  --sm-muted: #66747C;
  --sm-muted-l: #93A1A8;
  --sm-line: #E8EAE5;
  --sm-line-soft: #EFF0EC;
  --sm-ok: #2E7D5B;    --sm-ok-bg: #EBF5EF;   --sm-ok-bd: #CBE5D6;
  --sm-warn: #96660A;  --sm-warn-bg: #FBF5E8; --sm-warn-bd: #EFDFAF;
  --sm-err: #A83B33;   --sm-err-bg: #FAF0EE;  --sm-err-bd: #EFD2CD;
  --sm-r-s: 8px; --sm-r-m: 14px; --sm-r-l: 20px;
  --sm-shadow: 0 1px 2px rgba(28, 42, 54, .05);
  --sm-focus: 0 0 0 3px rgba(72, 126, 137, .18);
}

/* ---------- Base ---------- */
body.pa-body {
  background: var(--sm-bg);
  color: var(--sm-ink);
}
body.pa-body *:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 2px;
}

/* ---------- Login (intera mais leve) ---------- */
.pa-auth-main { background: var(--sm-bg); }
.pa-auth-left { background: var(--sm-bg); }
.pa-brandbar { background: var(--sm-bg); }
.pa-auth-content {
  background: var(--sm-surface);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-l);
  box-shadow: var(--sm-shadow);
}
@media (max-width: 899px) {
  .pa-auth-content {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}
.pa-hero { background: var(--sm-primary); color: #EEF4F8; }
.pa-app-head {
  color: var(--sm-ink);
}
.pa-tab { color: var(--sm-muted); }
.pa-tab[aria-selected="true"] { color: var(--sm-primary); border-color: var(--sm-primary); box-shadow: none; }
.pa-field label {
  color: var(--sm-ink-soft);
  font-size: 13px;
  letter-spacing: .01em;
}
.pa-input {
  border-radius: 10px;
  border: 1px solid var(--sm-line);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.pa-input:hover { border-color: #D6DBD5; }
.pa-input:focus {
  border-color: var(--sm-accent);
  box-shadow: var(--sm-focus);
}
.pa-btn-primary {
  background: var(--sm-primary);
  box-shadow: none;
}
.pa-btn-primary:hover { background: var(--sm-primary-deep); }
.pa-btn-ghost {
  border-color: var(--sm-line);
  color: var(--sm-primary);
}
.pa-btn-ghost:hover { border-color: var(--sm-accent); background: var(--sm-accent-tint); }
.pa-msg--err { color: var(--sm-err); }
.pa-msg--ok { color: var(--sm-ok); }
.pa-forgot-panel { border-top: 1px solid var(--sm-line-soft); }

/* ---------- Heros (início / consultas / mensagens / conta) ---------- */
.pb-hero {
  background: transparent;
  border-bottom: 0;
}
.pb-hero-inner {
  max-width: 1080px;
  padding: 26px 18px 18px;
}
.pb-hero-eyebrow { color: var(--sm-accent); letter-spacing: .16em; }
.pb-hero h1 { color: var(--sm-ink); font-weight: 500; }
.pb-hero-lede { color: var(--sm-muted); font-size: 15px; }

/* ---------- Próxima consulta: cartão de destaque ---------- */
.pa-next, .pb-next {
  background: var(--sm-primary);
  color: #EAF1F6;
  border: 0;
  border-radius: var(--sm-r-l);
  box-shadow: var(--sm-shadow);
}
.pa-next-label, .pb-next-label { color: #A7C2CE; }
.pa-next h2, .pb-next h2 { color: #fff; }
.pa-next-date, .pb-next-when { color: #D3E2EA; }
.pa-next-meta, .pa-next-date .pa-chip { color: #A7C2CE; }
.pb-next-photo { opacity: .92; }

/* ---------- Cartões e listas ---------- */
.pa-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-l);
  box-shadow: var(--sm-shadow);
}
.pa-card h2 { color: var(--sm-ink); font-weight: 600; }
.pb-card-link { color: var(--sm-accent); font-weight: 600; }
.pb-card-link:hover { color: var(--sm-primary); }
.pa-identity { padding: 22px 20px; }
.pa-identity-row { color: var(--sm-muted); }
.pa-identity-row strong { color: var(--sm-ink); }
.pa-identity-note { color: var(--sm-muted); }
.pb-acc-name { color: var(--sm-ink); }
.pb-acc-mail { color: var(--sm-muted-l); }
.pa-empty-block { border-radius: var(--sm-r-m); }
.pa-empty { color: var(--sm-muted); }

/* consultas: lista editorial aberta com divisórias */
.pa-appt {
  border-top: 1px solid var(--sm-line-soft);
}
.pa-appt:first-of-type { border-top: 0; }
.pa-appt-service { color: var(--sm-ink); font-weight: 600; }
.pa-appt-when { color: var(--sm-muted); }
.pa-cancel-btn {
  border: 1px solid var(--sm-err-bd);
  color: var(--sm-err);
  border-radius:999px;
}
.pa-cancel-btn:hover { background: var(--sm-err-bg); }
.pb-tab { color: var(--sm-muted); }
.pb-tab[aria-selected="true"] { color: var(--sm-primary); border-bottom-color: var(--sm-primary); }

/* chips de status */
.pa-chip { border-radius: 999px; }
.pa-chip--confirmed { background: var(--sm-ok-bg); color: var(--sm-ok); }
.pa-chip--held, .pa-chip--pending { background: var(--sm-warn-bg); color: var(--sm-warn); }
.pa-chip--cancelled, .pa-chip--expired, .pa-chip--failed {
  background: #F1F2F0; color: var(--sm-muted);
  border: 1px solid var(--sm-line);
}
.pa-chip--neutral { background: var(--sm-surface-2); color: var(--sm-muted); border: 1px solid var(--sm-line); }

/* ---------- Messenger do paciente ---------- */
.pa-chat {
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-m);
  box-shadow: var(--sm-shadow);
  background: var(--sm-surface);
  overflow: hidden;
}
@media (max-width: 899px) {
  .pa-chat {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.pa-chat-head { background: var(--sm-surface); border-color: var(--sm-line-soft); }
.pa-chat-id strong { color: var(--sm-ink); }
.pa-chat-id small { color: var(--sm-muted-l); }
.pa-msg-bubble { max-width: min(540px, 88%); border: 0; }
.pa-msg-consultorio {
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-line);
  color: var(--sm-ink);
}
.pa-msg-paciente { background: var(--sm-primary); color: #F0F5F8; }
.pa-msg-when { color: inherit; opacity: .72; font-variant-numeric: tabular-nums; }
.pa-msg-paciente .pa-msg-when { color: #A7C2CE; }
.pa-link-quiet { color: var(--sm-accent); }
.pa-chatbar { background: rgba(255, 255, 255, .98); border-top: 1px solid var(--sm-line); }
.pa-chat-clip { background: var(--sm-surface-2); color: var(--sm-ink-soft); border: 1px solid var(--sm-line); }
.pa-chat-clip:hover { background: var(--sm-accent-tint); color: var(--sm-primary); }
.pa-chat-send { background: var(--sm-primary); }
.pa-chat-send:hover { background: var(--sm-primary-deep); }
.pa-chat-filename { background: var(--sm-surface-2); color: var(--sm-ink-soft); }

/* threads antigas (minha conta etc.) */
.pa-notice { background: var(--sm-ok-bg); border: 1px solid var(--sm-ok-bd); color: var(--sm-ok); border-radius: 10px; }
.pa-notice--err { background: var(--sm-err-bg); border-color: var(--sm-err-bd); color: var(--sm-err); }
.pa-resp-card { background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-r-m); }

/* ---------- Shell do app (modo instalado) ---------- */
html.app-standalone .pa-apphdr {
  background: var(--sm-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
html.app-standalone .pa-apphdr-name { color: #F2F7FA; letter-spacing: .3px; }
html.app-standalone .pa-apphdr-btn { color: #DCE7ED; border-radius: 10px; }
html.app-standalone .pa-apphdr-btn:active { background: rgba(255, 255, 255, .1); }
html.app-standalone .pa-app-avatar-circle {
  background: rgba(255, 255, 255, .12);
  color: #F2F7FA;
}
html.app-standalone .pa-appmenu, html.app-standalone .pa-appavatar-pop {
  background: #22384D;
  border: 0;
  border-radius: var(--sm-r-m);
  box-shadow: var(--sm-shadow);
  color: #E7EFF4;
}
html.app-standalone .pa-appnav-item { color: #D8E3EA; border-radius: 10px; }
html.app-standalone .pa-appnav-item.is-active {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 600;
}
html.app-standalone .pa-appnav-item:hover { background: rgba(255, 255, 255, .12); }
html.app-standalone .pa-appnav-logout { color: #F2C6C0; }
html.app-standalone .pa-appnav-logout:hover { background: rgba(242, 198, 192, .12); }
html.app-standalone .pa-appchip { background: var(--sm-accent); color: #fff; }
html.app-standalone .pa-appbottom {
  background: var(--sm-surface);
  border-top: 1px solid var(--sm-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
html.app-standalone .pa-appbottom-item {
  color: var(--sm-muted-l);
  padding: 8px 4px 6px;
  border-radius: 10px;
}
html.app-standalone .pa-appbottom-item.is-active {
  color: var(--sm-primary);
  font-weight: 600;
}
html.app-standalone .pa-appbottom-item svg { display: block; }

/* ---------- Modais ---------- */
.pa-modal-card {
  background: var(--sm-surface);
  border-radius: var(--sm-r-l);
  border: 0;
  box-shadow: var(--sm-shadow);
}
.pa-modal-kicker { color: var(--sm-accent); letter-spacing: .12em; }

/* ---------- Rodapé ---------- */
.pa-footer { background: transparent; border-top: 1px solid var(--sm-line-soft); }
.pa-footer-inner { max-width: 1080px; }
.pa-footer-links a { color: var(--sm-muted); }

/* ---------- Segurança de largura / teclado / safe areas ---------- */
html, body { max-width: 100%; overflow-x: clip; }
.pa-shell { max-width: 1080px; padding: 20px 16px 48px; }
@media (min-width: 900px) {
  .pa-shell { padding: 30px 24px 64px; }
}
.pa-chat-safari-safe { display: none; }
.pa-chatbar { padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
html.app-standalone .pa-chatbar { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
html.app-standalone body.pa-body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.pa-thread { overflow-wrap: anywhere; }
.pa-msg-body { overflow-wrap: anywhere; }
.pa-attach-name { overflow-wrap: anywhere; }

/* ---------- B52: detalhe da consulta (consulta.php) + links do cartão ---------- */
.pb-next-link { color: #fff; text-decoration: none; }
.pb-next-link:hover { color: #D9E7EE; }
.pb-next-details {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600;
  color: #CBDEE8; text-decoration: underline; text-underline-offset: 3px;
}
.pb-next-inline-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pa-appt-detail {
  display: inline-flex; align-items: center; min-height: 40px;
  margin-top: 2px;
  font-size: 13.5px; font-weight: 600; color: var(--sm-accent);
  text-decoration: none;
}
.pa-appt-detail:hover { color: var(--sm-primary); }
.pa-appt .pa-appt-service { text-decoration: none; }
.pa-appt .pa-appt-service:hover, .pa-appt .pa-appt-when:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .pb-next-details { min-height: 36px; }
}

/* detalhe (consulta.php) */
.pcdn-back { margin: 0 2px 14px; }
.pcdn-head h1 { margin: 2px 0 14px; font-family: var(--pa-font-editorial); font-weight: 500; font-size: clamp(24px, 4vw, 30px); color: var(--sm-ink); }
.pcdn-hero { padding: 22px 22px 20px; margin-bottom: 20px; }
.pcdn-kv {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--sm-line-soft);
  font-size: 14.5px;
}
.pcdn-kv:last-child { border-bottom: 0; }
.pcdn-kv > span { color: var(--sm-muted); }
.pcdn-kv > strong { color: var(--sm-ink); font-weight: 600; text-align: right; }
html.app-standalone .pa-apphide { display: none; }

/* ---------- B52 fix: legibilidade do hero escuro (pb-hero37) no navegador —
   o override genérico `.pb-hero h1 { color: var(--sm-ink) }` não pode escurecer
   texto sobre fotografia por causa da classe dark do B37. ---------- */
.pb-hero37 .pb-hero-eyebrow { color: #A7C2CE; }
.pb-hero37 .pb-hero-inner h1 { color: #FFFFFF; }
.pb-hero37 .pb-hero-inner .pb-hero-lede { color: #D5E2EA; }