/* base.css — reset moderno + tipografia + chassi fixo Bauer
   Plataforma Cirurgia Oncológica 2 (portado fiel do template antibioticoterapia) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--ink-100);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  min-height: 100%;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* === Grade quadriculada sutil de luxo (Ajuste Bauer 5) ===
   Quase imperceptível, em off-white da casa (NÃO copiar cor de terceiros).
   Horizontal levemente mais forte que vertical (assimetria orgânica).
   Mascarada de cima para baixo; não compete com o texto.
   z-index -1 + pointer-events:none → atrás de tudo, sem capturar clique.
   O page-orb do HUB (z-index:0 dentro do fluxo, e main#main com z-index maior)
   permanece acima desta grade. */
/* === Dot grid (pontinhos que dispersam) — ambiente em TODA a plataforma ===
   z-index 0 = ACIMA do fundo opaco do body (por isso aparece). O conteúdo (main) é
   elevado a z-index 1 logo abaixo, então fica sempre legível acima dos pontinhos. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Pontinhos brancos e mais evidentes (ordem Bauer): branco puro + opacidade maior tira o
     "esverdeado" que a baixa opacidade causava (fundo petróleo vazava pelos pontos). */
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.32) 1.3px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0.45) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0.45) 100%);
}
/* Conteúdo sempre acima do dot-grid + orb (ambos z-index 0). Só o main é estático;
   header/progress/overlay/banner já têm z-index de token positivo. */
body > main { position: relative; z-index: 1; }

/* === Gradient orb (halo que respira) — ambiente padronizado em TODA a plataforma ===
   2 halos (teal + dourado) que inflam/desinflam; z-index -1 (atrás do conteúdo, junto da grade);
   screen no dark / multiply no light — somam luz sem tapar o texto. Injetados pelo pwa-bootstrap.js. */
.page-orb {
  position: fixed; left: 60%; top: -24vh;
  width: 78vh; height: 78vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,214,192,0.65) 0%, transparent 66%);
  opacity: 0.24; filter: blur(82px);
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  animation: orbBreath 16s ease-in-out infinite;
  will-change: transform, opacity;
}
.page-orb--gold {
  left: 2%; top: 36vh; width: 58vh; height: 58vh;
  background: radial-gradient(circle, rgba(216,178,90,0.58) 0%, transparent 68%);
  opacity: 0.17; animation-duration: 20s; animation-delay: -6s;
}
/* Ondulação orgânica: deriva lateral + vertical + escala em pontos assimétricos.
   Teal (16s) e dourado (20s) em períodos diferentes = batem em/fora de fase, nunca repetem igual. */
@keyframes orbBreath {
  0%   { transform: translate(0, 0) scale(1);          opacity: 0.18; }
  20%  { transform: translate(-2vw, 9px) scale(1.03);  opacity: 0.24; }
  40%  { transform: translate(-1vw, 21px) scale(1.07); opacity: 0.32; }
  60%  { transform: translate(2vw, 15px) scale(1.06);  opacity: 0.31; }
  80%  { transform: translate(1.4vw, 6px) scale(1.02); opacity: 0.23; }
  100% { transform: translate(0, 0) scale(1);          opacity: 0.18; }
}
:root[data-theme="light"] .page-orb { opacity: 0.26; mix-blend-mode: multiply; }
:root[data-theme="light"] .page-orb--gold { opacity: 0.20; }
@media (prefers-reduced-motion: reduce) { .page-orb { animation: none; } }

/* Tema light (creme quente neonato): pontinhos escuros discretos */
:root[data-theme="light"] body::before {
  background-image: radial-gradient(circle, rgba(21, 38, 42, 0.16) 1.3px, transparent 1.7px);
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

a {
  color: var(--teal-60);
  text-decoration: none;
  border-bottom: 1px solid rgba(79,214,192,0.32);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover, a:focus-visible { color: var(--teal-80); border-bottom-color: var(--teal-60); }

:focus-visible {
  outline: 2px solid var(--teal-60);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink-100);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3) 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }

p {
  margin: 0 0 var(--sp-4) 0;
  max-width: var(--container-text);
  text-wrap: pretty;
}
ul, ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4) 0; }
li { margin-bottom: var(--sp-2); }
strong { color: var(--ink-100); font-weight: 700; }
em { font-style: italic; color: var(--ink-90); }
blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--teal-40);
  background: var(--bg-elevated);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-90);
}
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; height: 1px; background: var(--border-soft); margin: var(--sp-6) 0; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elevated);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* Layout container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.container--text { max-width: calc(var(--container-text) + 2 * var(--sp-5)); }

@media (max-width: 640px) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: var(--sp-3);
  z-index: var(--z-modal);
  background: var(--teal-10);
  color: var(--ink-100);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--teal-40);
}
.skip-link:focus { left: var(--sp-4); }

/* === Header (glass, brand esquerda · ações direita) === */
/* Header FLOATING: barra arredondada descolada das bordas (Apple-like) */
.site-header {
  position: sticky;
  top: calc(max(var(--sp-3), env(safe-area-inset-top)) + var(--sp-2));
  z-index: var(--z-sticky);
  width: min(var(--container-max), calc(100% - 2 * var(--sp-4)));
  margin: var(--sp-3) auto 0;
  background: var(--bg-glass-strong);
  backdrop-filter: saturate(150%) blur(22px);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-4);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg-elevated); }
}
/* Header some ao rolar p/ baixo, reaparece ao subir (esconde inclusive o gap superior) */
.site-header[data-hidden="true"] { transform: translateY(calc(-100% - var(--sp-6))); box-shadow: none; }
@media (max-width: 640px) {
  .site-header { width: calc(100% - 2 * var(--sp-3)); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); }
}
.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink-100);
  border-bottom: 0;
}
.site-header__brand:hover { color: var(--teal-60); }
.site-header__logo {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--teal-10), var(--teal-05));
  border: 1px solid var(--teal-40);
  display: grid; place-items: center;
  overflow: hidden;
}
.site-header__logo svg { width: 26px; height: 26px; }
/* Logo tem o "d" hardcoded em #4fd6c0 (teal brilhante) — fundo precisa ficar escuro nos 2 temas senao o "d" some no claro */
:root[data-theme="light"] .site-header__logo { background: linear-gradient(135deg, #0a3a3a, #06292b); }
.site-header__titles { line-height: 1.18; }
.site-header__title { font-size: var(--fs-md); font-weight: 700; }
.site-header__subtitle { font-size: var(--fs-xs); color: var(--ink-70); }
.site-header__spacer { flex: 1; }
.site-header__progress {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-70);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  white-space: nowrap;
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--ink-90);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast), transform var(--dur-fast);
}
.icon-btn:hover, .icon-btn:focus-visible {
  color: var(--teal-60);
  border-color: var(--teal-40);
  background: var(--bg-elevated-2);
  transform: translateY(-1px);
}

/* === Menu overlay (painel à DIREITA, dupla camada glass) === */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  background: rgba(7,23,26,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.menu-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.menu-panel {
  position: absolute;
  top: 64px;
  right: var(--sp-4);
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  max-height: calc(100vh - 96px - env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--bg-glass-strong);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  transform: translateY(-6px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-mid) var(--ease-lux), opacity var(--dur-mid) var(--ease-out);
}
.menu-overlay[aria-hidden="false"] .menu-panel { transform: translateY(0) scale(1); opacity: 1; }
.menu-panel__title {
  font-size: var(--fs-xs);
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--sp-2) var(--sp-2) var(--sp-3);
}
.menu-panel__list { list-style: none; padding: 0; margin: 0; }
.menu-panel__item { margin: 0; }
.menu-panel__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-90);
  border-bottom: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.menu-panel__link:hover, .menu-panel__link:focus-visible {
  background: var(--bg-elevated-2);
  color: var(--ink-100);
  border-bottom: 0;
}
.menu-panel__link[aria-current="page"] {
  background: var(--teal-05);
  color: var(--teal-60);
  border-left: 3px solid var(--teal-40);
  padding-left: calc(var(--sp-3) - 3px);
}
.menu-panel__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-50);
  min-width: 32px;
}

/* === Main === */
main {
  flex: 1;
  padding-bottom: var(--sp-9);
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* === Banner mantra (rodapé persistente) === */
.banner-mantra-fixed {
  position: sticky;
  bottom: 0;
  z-index: var(--z-banner-mantra);
  /* CORE-FIX nav: banner é decorativo (só mantra, sem link/botão). Sticky bottom + z-index:50
     interceptava o clique do botão "próxima página" quando ele passava sob a faixa (bug
     intermitente em ~9 aulas). pointer-events:none deixa o clique atravessar para o conteúdo. */
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--bg-glass-strong) 22%, var(--bg-glass-strong) 100%);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--teal-20);
  padding-top: var(--sp-3);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
.banner-mantra-fixed__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-serif);
  color: var(--ink-100);
  font-size: var(--fs-md);
}
.banner-mantra-fixed__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--teal-60); }
.banner-mantra-fixed__text { line-height: 1.3; }
.banner-mantra-fixed__text strong { color: var(--teal-60); font-weight: 700; }

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: var(--sp-6) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
  color: var(--ink-50);
  font-size: var(--fs-sm);
}
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* === PWA install + update toast === */
.pwa-install {
  position: fixed;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  max-width: 480px;
  margin: 0 auto;
  z-index: var(--z-install-prompt);
  background: var(--bg-elevated-2);
  border: 1px solid var(--teal-30);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-lg);
  display: none;
  align-items: center;
  gap: var(--sp-3);
}
.pwa-install[data-visible="true"] { display: flex; }
.pwa-install__text { flex: 1; font-size: var(--fs-sm); }
.pwa-install__text strong { color: var(--teal-60); }
.pwa-install button { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--border-mid); background: var(--bg-elevated); }
.pwa-install button.is-primary { background: var(--teal-30); color: var(--ink-100); border-color: var(--teal-40); }

.pwa-update {
  position: fixed;
  top: 72px;
  right: var(--sp-4);
  z-index: var(--z-update-toast);
  background: var(--bg-elevated-2);
  border: 1px solid var(--warn-amber);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.pwa-update[data-visible="true"] { display: flex; }
.pwa-update button {
  background: var(--warn-amber);
  color: var(--bg-base);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: 600;
}

@media print {
  .site-header, .menu-overlay, .banner-mantra-fixed, .pwa-install, .pwa-update, .page-nav, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; border-bottom-color: #888; }
  .page { page-break-inside: avoid; }
}