/* ──────────────────────────────────────────────────────────────
   Design kit partilhado dos iframes do Cap. 7.1
   (Tomada de Decisão — Gerir em Saúde)

   Inclui: reset suave, paleta cromática, escala tipográfica,
   sombras em camadas, raios, transições, focus visíveis.
   Cada iframe carrega este ficheiro e usa as variáveis e os
   utilitários abaixo. Componentes específicos ficam no <style>
   local de cada ficheiro.
   ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: transparent; height: auto; }

:root {
  /* ── Tinta ── */
  --text:   #1a1a18;
  --text2:  #5c5c58;
  --text3:  #8a8a84;
  --border: #e2e0d8;

  /* ── Superfícies ── */
  --surface:      #ffffff;
  --surface-soft: #fafaf8;
  --surface-mute: #f5f4ef;
  --surface-deep: #f1efe8;

  /* ── Paleta semântica ── */
  --blue:        #185FA5;
  --blue-dark:   #0f4c87;
  --blue-text:   var(--blue-dark);
  --blue-bg:     #E6F1FB;
  --blue-soft:   #f5fafe;
  --blue-rgb:    24, 95, 165;

  --coral:       #D85A30;
  --coral-dark:  #b8451f;
  --coral-text:  var(--coral-dark);
  --coral-bg:    #FAECE7;
  --coral-soft:  #fff8f6;
  --coral-rgb:   216, 90, 48;

  --amber:       #BA7517;
  --amber-dark:  #966013;
  --amber-bg:    #FAEEDA;
  --amber-soft:  rgba(186,117,23,0.12);
  --amber-rgb:   186, 117, 23;

  --teal:        #0F6E56;
  --teal-dark:   #0B5947;
  --teal-bg:     #E1F5EE;
  --teal-rgb:    15, 110, 86;

  --purple:      #534AB7;
  --purple-dark: #3F388F;
  --purple-bg:   #EEEDFE;
  --purple-rgb:  83, 74, 183;

  --gray-bg:  #F1EFE8;
  --gray600:  #5F5E5A;

  /* ── Tipografia ── */
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;

  /* ── Sombras em camadas (subtis) ── */
  --shadow-1: 0 1px 2px rgba(20,20,18,0.04), 0 1px 3px rgba(20,20,18,0.035);
  --shadow-2: 0 1px 2px rgba(20,20,18,0.04), 0 4px 12px rgba(20,20,18,0.045);
  --shadow-3: 0 2px 4px rgba(20,20,18,0.05), 0 8px 22px rgba(20,20,18,0.06);

  /* ── Raios ── */
  --r-out:  12px;
  --r-in:   10px;
  --r-sm:   8px;
  --r-pill: 999px;

  /* ── Movimento ── */
  --tx-fast: 140ms ease;
  --tx:      200ms ease;
  --tx-slow: 280ms ease;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Focus visível ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Cartão exterior partilhado ── */
.c7-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-out);
  padding: 1.25rem 1.5rem 1.35rem;
  box-shadow: var(--shadow-2);
}

/* ── Cabeçalho partilhado ── */
.c7-eyebrow {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 0.4rem;
}
.c7-title {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}
.c7-subtitle {
  font-size: 0.83rem;
  color: var(--text2);
  margin: 0 0 1.2rem;
  line-height: 1.55;
  max-width: 60ch;
}

/* ── Nota / quote ao fundo ── */
.c7-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text2);
  background: var(--gray-bg);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  line-height: 1.6;
}
.c7-note strong { color: var(--text); font-weight: 600; }

.c7-note-serif {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--gray-bg);
  border-left: 3px solid var(--gray600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 16px;
  line-height: 1.6;
}

/* ── Números tabulares para badges/contadores ── */
.c7-tnum { font-variant-numeric: tabular-nums; }

/* ── Animação respeitando prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:         #e0ddd6;
    --text2:        #9a9890;
    --text3:        #666460;
    --border:       #303230;
    --surface:      #1a1918;
    --surface-soft: #1f1e1c;
    --surface-mute: #252420;
    --surface-deep: #2c2b26;
    --blue-bg:      #0c2240;
    --blue-soft:    #091830;
    --blue-text:    #8ac7ff;
    --coral-bg:     #381208;
    --coral-soft:   #2a0e05;
    --coral-text:   #ffad91;
    --amber-bg:     #2e1c00;
    --teal-bg:      #082a1c;
    --purple-bg:    #181440;
    --gray-bg:      #282720;
    --gray600:      #787670;
  }
}

:root[data-app-theme="light"] {
  --text:   #1a1a18;
  --text2:  #5c5c58;
  --text3:  #8a8a84;
  --border: #e2e0d8;
  --surface:      #ffffff;
  --surface-soft: #fafaf8;
  --surface-mute: #f5f4ef;
  --surface-deep: #f1efe8;
  --blue-bg:      #E6F1FB;
  --blue-soft:    #f5fafe;
  --blue-text:    var(--blue-dark);
  --coral-bg:     #FAECE7;
  --coral-soft:   #fff8f6;
  --coral-text:   var(--coral-dark);
  --amber-bg:     #FAEEDA;
  --teal-bg:      #E1F5EE;
  --purple-bg:    #EEEDFE;
  --gray-bg:      #F1EFE8;
  --gray600:      #5F5E5A;
}

:root[data-app-theme="dark"] {
  --text:         #e0ddd6;
  --text2:        #9a9890;
  --text3:        #666460;
  --border:       #303230;
  --surface:      #1a1918;
  --surface-soft: #1f1e1c;
  --surface-mute: #252420;
  --surface-deep: #2c2b26;
  --blue-bg:      #0c2240;
  --blue-soft:    #091830;
  --blue-text:    #8ac7ff;
  --coral-bg:     #381208;
  --coral-soft:   #2a0e05;
  --coral-text:   #ffad91;
  --amber-bg:     #2e1c00;
  --teal-bg:      #082a1c;
  --purple-bg:    #181440;
  --gray-bg:      #282720;
  --gray600:      #787670;
}