/* ═══════════════════════════════════════════════════════════
   STANDARD THEME v1.0 — Sistema de Laudos Neuropsicológicos
   Identidade visual clínica unificada.
   Carregado APÓS ds.css em todos os módulos.
   Escopo: html.light-mode (todos os módulos forçam light-mode).

   REGRA DE OURO: nenhuma alteração em arquivos .ts.
   Este arquivo é 100% CSS.
═══════════════════════════════════════════════════════════ */

/* ── Fonte Inter via CDN ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════
   1. TOKENS — sobrescrevem o ds.css com a paleta clínica.
   Azul clínico (#2563EB) substitui o índigo (#6366f1).
   Radii aumentados em 2 px para aspecto mais moderno.
══════════════════════════════════════════════════════════ */
html.light-mode {
  /* Primária: azul clínico */
  --clr-primary:        #2563EB;
  --clr-primary-dark:   #1D4ED8;
  --clr-primary-light:  #DBEAFE;
  --clr-primary-xs:     #EFF6FF;

  /* Superfícies */
  --bg:        #F1F5F9;
  --bg-fundo:  #F1F5F9;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --border:    #E2E8F0;
  --border-2:  #CBD5E1;

  /* Textos */
  --text-1:          #0F172A;
  --text-2:          #475569;
  --text-3:          #94A3B8;
  --texto-principal: #0F172A;

  /* Feedback */
  --clr-success:    #16A34A;
  --clr-success-bg: #F0FDF4;
  --clr-success-bd: #BBF7D0;
  --clr-warn:       #D97706;
  --clr-warn-bg:    #FFFBEB;
  --clr-warn-bd:    #FDE68A;
  --clr-danger:     #DC2626;
  --clr-danger-bg:  #FEF2F2;
  --clr-danger-bd:  #FECACA;

  /* Tipografia */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Radii — ligeiramente maiores que ds.css */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Sombras — suaves e clínicas */
  --sh-xs: 0 1px 3px  rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 4px 12px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04);
  --sh:    0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --sh-lg: 0 16px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);

  /* Botão Voltar — azul clínico em vez de vermelho */
  --btn-voltar-bg:           rgba(37,99,235,0.08);
  --btn-voltar-bg-hover:     rgba(37,99,235,0.15);
  --btn-voltar-border:       rgba(37,99,235,0.25);
  --btn-voltar-border-hover: rgba(37,99,235,0.45);
  --btn-voltar-color:        #1D4ED8;
  --btn-voltar-color-hover:  #1E40AF;

  /* Variáveis para Chart.js
     Uso: getComputedStyle(document.documentElement).getPropertyValue('--chart-c1')
     Integrar na inicialização dos gráficos para harmonia com a paleta. */
  --chart-c1:   #2563EB;
  --chart-c2:   #3B82F6;
  --chart-c3:   #93C5FD;
  --chart-c4:   #1D4ED8;
  --chart-c5:   #64748B;
  --chart-c6:   #94A3B8;
  --chart-grid: rgba(15,23,42,0.07);
  --chart-bg:   #FFFFFF;
}

/* ══════════════════════════════════════════════════════════
   2. BASE
══════════════════════════════════════════════════════════ */
html.light-mode body {
  font-family: var(--font);
  background: var(--bg, #F1F5F9);
  color: var(--text-1, #0F172A);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════
   3. TIPOGRAFIA DE MÓDULO
   Escopo restrito a títulos dentro de interfaces de teste.
   NÃO afeta #laudo-content, #preview (PDF) nem .report-*.
══════════════════════════════════════════════════════════ */
html.light-mode .ds-test-title,
html.light-mode .module-title {
  font-family: var(--font) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-1, #0F172A) !important;
  line-height: 1.2 !important;
}

html.light-mode .ds-test-subtitle,
html.light-mode .module-subtitle {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-2, #475569) !important;
}

/* ══════════════════════════════════════════════════════════
   4. CABEÇALHO DE MÓDULO
   Normaliza .ds-test-header (bdi2, srs2, etc.) e outros.
   O .lf-header (laudo-final) mantém seu gradiente escuro.
══════════════════════════════════════════════════════════ */
html.light-mode .ds-test-header {
  border-bottom: 1px solid var(--border, #E2E8F0);
  box-shadow: var(--sh-xs);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Laudo Final mantém seu gradiente por intenção — apenas afina o shadow */
html.light-mode .lf-header {
  box-shadow: 0 4px 16px rgba(30,64,175,0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   5. BOTÕES — normaliza TODAS as variantes para a paleta azul
   Usa !important para sobrescrever as definições inline dos módulos.
   A ordem primário → secundário → danger → success preserva a hierarquia.
══════════════════════════════════════════════════════════ */

/* ── Base ── */
html.light-mode .btn,
html.light-mode .ds-btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  border-radius: var(--r-sm, 8px) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease,
              border-color 150ms ease !important;
  text-decoration: none !important;
}

html.light-mode .btn:hover,
html.light-mode .ds-btn:hover {
  transform: translateY(-1px) !important;
}

html.light-mode .btn:disabled,
html.light-mode .ds-btn:disabled,
html.light-mode .btn[disabled],
html.light-mode .ds-btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none !important;
}

/* ── Primário ── */
html.light-mode .btn-primary,
html.light-mode .ds-btn-primary,
html.light-mode .w3-btn-primary,
html.light-mode .w4-btn-primary,
html.light-mode .et-btn-primary,
html.light-mode .di-btn-primary,
html.light-mode .ds-btn-primary-futurista {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.30) !important;
}

html.light-mode .btn-primary:hover:not(:disabled),
html.light-mode .ds-btn-primary:hover:not(:disabled),
html.light-mode .w3-btn-primary:hover:not(:disabled),
html.light-mode .w4-btn-primary:hover:not(:disabled),
html.light-mode .et-btn-primary:hover:not(:disabled),
html.light-mode .di-btn-primary:hover:not(:disabled),
html.light-mode .ds-btn-primary-futurista:hover:not(:disabled) {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,0.38) !important;
  transform: translateY(-2px) !important;
}

/* ── Secundário ── */
html.light-mode .btn-secondary,
html.light-mode .ds-btn-secondary,
html.light-mode .w3-btn-secondary,
html.light-mode .w4-btn-secondary,
html.light-mode .di-btn-secondary,
html.light-mode .btn-outline {
  background: #FFFFFF !important;
  color: var(--text-2, #475569) !important;
  border: 1px solid var(--border, #E2E8F0) !important;
  box-shadow: var(--sh-xs) !important;
}

html.light-mode .btn-secondary:hover:not(:disabled),
html.light-mode .ds-btn-secondary:hover:not(:disabled),
html.light-mode .w4-btn-secondary:hover:not(:disabled),
html.light-mode .di-btn-secondary:hover:not(:disabled),
html.light-mode .btn-outline:hover:not(:disabled) {
  background: var(--bg, #F1F5F9) !important;
  color: var(--text-1, #0F172A) !important;
  border-color: var(--border-2, #CBD5E1) !important;
}

/* ── Ghost ── */
html.light-mode .ds-btn-ghost {
  background: transparent !important;
  color: var(--clr-primary, #2563EB) !important;
  border: 1px solid var(--clr-primary-light, #DBEAFE) !important;
  box-shadow: none !important;
}

html.light-mode .ds-btn-ghost:hover:not(:disabled) {
  background: var(--clr-primary-xs, #EFF6FF) !important;
}

/* ── Perigo ── */
html.light-mode .btn-danger,
html.light-mode .ds-btn-danger {
  background: #FFFFFF !important;
  color: var(--clr-danger, #DC2626) !important;
  border: 1px solid var(--clr-danger-bd, #FECACA) !important;
  box-shadow: none !important;
}

html.light-mode .btn-danger:hover:not(:disabled),
html.light-mode .ds-btn-danger:hover:not(:disabled) {
  background: var(--clr-danger-bg, #FEF2F2) !important;
  border-color: #FCA5A5 !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.15) !important;
}

/* ── Sucesso ── */
html.light-mode .btn-success,
html.light-mode .ds-btn-success {
  background: var(--clr-success-bg, #F0FDF4) !important;
  color: var(--clr-success, #16A34A) !important;
  border: 1px solid var(--clr-success-bd, #BBF7D0) !important;
  box-shadow: none !important;
}

html.light-mode .btn-success:hover:not(:disabled) {
  background: #DCFCE7 !important;
  box-shadow: 0 4px 12px rgba(22,163,74,0.15) !important;
}

/* ── Tamanhos ── */
html.light-mode .btn-sm,
html.light-mode .ds-btn-sm {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: var(--r-sm, 8px) !important;
}

html.light-mode .btn-lg,
html.light-mode .ds-btn-lg {
  font-size: 15px !important;
  padding: 12px 28px !important;
  border-radius: var(--r, 12px) !important;
}

/* ── Botão Voltar (todas as variantes) ── */
html.light-mode .btn-voltar,
html.light-mode .back-btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--btn-voltar-bg) !important;
  border: 1px solid var(--btn-voltar-border) !important;
  color: var(--btn-voltar-color) !important;
  border-radius: var(--r, 12px) !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}
/* #btn-voltar-inicio: apenas estilo, visibilidade controlada pela página */
html.light-mode #btn-voltar-inicio {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--btn-voltar-bg) !important;
  border: 1px solid var(--btn-voltar-border) !important;
  color: var(--btn-voltar-color) !important;
  border-radius: var(--r, 12px) !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

html.light-mode .btn-voltar:hover,
html.light-mode .back-btn:hover,
html.light-mode #btn-voltar-inicio:hover {
  background: var(--btn-voltar-bg-hover) !important;
  border-color: var(--btn-voltar-border-hover) !important;
  color: var(--btn-voltar-color-hover) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.15) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════
   6. CARDS
══════════════════════════════════════════════════════════ */
html.light-mode .ds-card,
html.light-mode .w3-card,
html.light-mode .card {
  background: var(--surface, #FFFFFF) !important;
  border: 1px solid var(--border, #E2EEF5) !important;
  border-radius: var(--r-lg, 16px) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow 220ms ease, transform 220ms ease !important;
}

html.light-mode .ds-card-header {
  border-bottom: 1px solid var(--border, #E2E8F0) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

/* Container principal dos módulos de teste */
html.light-mode .test-container {
  background: var(--surface, #FFFFFF) !important;
  border: 1px solid var(--border, #E2EEF5) !important;
  border-radius: 20px !important;
  box-shadow: var(--sh) !important;
}

/* ══════════════════════════════════════════════════════════
   7. FORMULÁRIOS
   Escopo restrito a .form-group para não afetar inputs do laudo.
══════════════════════════════════════════════════════════ */
html.light-mode .ds-form-label,
html.light-mode .form-group label {
  font-family: var(--font) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-2, #475569) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

html.light-mode .ds-form-input,
html.light-mode .form-group input,
html.light-mode .form-group select,
html.light-mode .form-group textarea {
  font-family: var(--font) !important;
  font-size: 13px !important;
  background: var(--surface-2, #F8FAFC) !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  border-radius: var(--r, 12px) !important;
  color: var(--text-1, #0F172A) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  outline: none !important;
}

html.light-mode .ds-form-input:focus,
html.light-mode .form-group input:focus,
html.light-mode .form-group select:focus,
html.light-mode .form-group textarea:focus {
  border-color: var(--clr-primary, #2563EB) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

/* ══════════════════════════════════════════════════════════
   8. TABELAS DE ENTRADA DE DADOS
   Escopo restrito às tabelas dentro de .w3-main, .bdi-main,
   .test-container — NÃO afeta #laudo-content (PDF).
══════════════════════════════════════════════════════════ */
html.light-mode .w3-main table,
html.light-mode .bdi-main table,
html.light-mode .test-container table,
html.light-mode .ds-layout table,
html.light-mode .module-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  border-radius: var(--r, 12px);
  overflow: hidden;
}

html.light-mode .w3-main table thead th,
html.light-mode .bdi-main table thead th,
html.light-mode .test-container table thead th,
html.light-mode .ds-layout table thead th,
html.light-mode .module-table thead th {
  background: var(--clr-primary-xs, #EFF6FF);
  color: var(--clr-primary-dark, #1D4ED8);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 14px;
  border-bottom: 2px solid var(--clr-primary-light, #DBEAFE);
  text-align: left;
}

html.light-mode .w3-main table tbody tr,
html.light-mode .bdi-main table tbody tr,
html.light-mode .test-container table tbody tr,
html.light-mode .ds-layout table tbody tr,
html.light-mode .module-table tbody tr {
  border-bottom: 1px solid var(--border, #E2E8F0);
  transition: background 120ms ease;
}

html.light-mode .w3-main table tbody tr:hover,
html.light-mode .bdi-main table tbody tr:hover,
html.light-mode .test-container table tbody tr:hover,
html.light-mode .ds-layout table tbody tr:hover,
html.light-mode .module-table tbody tr:hover {
  background: var(--clr-primary-xs, #EFF6FF);
}

html.light-mode .w3-main table tbody td,
html.light-mode .bdi-main table tbody td,
html.light-mode .test-container table tbody td,
html.light-mode .ds-layout table tbody td,
html.light-mode .module-table tbody td {
  padding: 10px 14px;
  color: var(--text-2, #475569);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   9. BADGES / STATUS
══════════════════════════════════════════════════════════ */
html.light-mode .ds-badge,
html.light-mode .badge {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  display: inline-block;
  white-space: nowrap;
}

html.light-mode .ds-badge.primary,
html.light-mode .badge-primary {
  background: var(--clr-primary-light, #DBEAFE);
  color: var(--clr-primary-dark, #1D4ED8);
}

html.light-mode .ds-badge.success,
html.light-mode .badge-success,
html.light-mode .st-green {
  background: var(--clr-success-bg, #F0FDF4) !important;
  color: var(--clr-success, #16A34A) !important;
  border: 1px solid var(--clr-success-bd, #BBF7D0) !important;
}

html.light-mode .ds-badge.warn,
html.light-mode .badge-warn,
html.light-mode .st-yellow {
  background: var(--clr-warn-bg, #FFFBEB) !important;
  color: var(--clr-warn, #D97706) !important;
  border: 1px solid var(--clr-warn-bd, #FDE68A) !important;
}

html.light-mode .ds-badge.danger,
html.light-mode .badge-danger,
html.light-mode .st-red {
  background: var(--clr-danger-bg, #FEF2F2) !important;
  color: var(--clr-danger, #DC2626) !important;
  border: 1px solid var(--clr-danger-bd, #FECACA) !important;
}

html.light-mode .ds-badge.neutral,
html.light-mode .badge-neutral,
html.light-mode .st-gray {
  background: #F1F5F9 !important;
  color: var(--text-2, #475569) !important;
  border: 1px solid var(--border, #E2E8F0) !important;
}

/* ══════════════════════════════════════════════════════════
   10. ABAS (TABS)
══════════════════════════════════════════════════════════ */
html.light-mode .ds-tabs {
  border-bottom: 2px solid var(--border, #E2E8F0);
  display: flex;
  gap: 0;
}

html.light-mode .ds-tab {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  color: var(--text-2, #475569);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color 150ms ease, border-color 150ms ease;
}

html.light-mode .ds-tab:hover {
  color: var(--clr-primary, #2563EB);
}

html.light-mode .ds-tab.active {
  color: var(--clr-primary, #2563EB) !important;
  border-bottom-color: var(--clr-primary, #2563EB) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   11. BARRA DE PROGRESSO
══════════════════════════════════════════════════════════ */
html.light-mode .progress-container {
  background: var(--border, #E2E8F0) !important;
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}

html.light-mode .progress-bar {
  background: linear-gradient(90deg, #1D4ED8, #3B82F6) !important;
  border-radius: 99px !important;
  transition: width 0.3s ease !important;
}

/* ══════════════════════════════════════════════════════════
   12. CARDS DE RESULTADO / ESCORE
   Para os cards de exibição de pontuação nos módulos.
══════════════════════════════════════════════════════════ */
html.light-mode .score-card,
html.light-mode .result-card,
html.light-mode .ds-result-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
  border-radius: var(--r-lg, 16px) !important;
  padding: 20px 24px !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.08) !important;
}

/* ══════════════════════════════════════════════════════════
   13. ALERTA / WARN dentro de módulos (ex: WAIS-III .w3-alert-warn)
══════════════════════════════════════════════════════════ */
html.light-mode .w3-alert-warn,
html.light-mode .ds-alert-warn {
  background: var(--clr-warn-bg, #FFFBEB) !important;
  border: 1px solid var(--clr-warn-bd, #FDE68A) !important;
  border-left: 4px solid var(--clr-warn, #D97706) !important;
  border-radius: var(--r-sm, 8px) !important;
  color: #92400E !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   14. SIDEBAR INTERNA DE MÓDULOS (ex: WAIS-III .w3-sidebar)
   Normaliza sidebars dos módulos que têm seu próprio layout.
══════════════════════════════════════════════════════════ */
html.light-mode .w3-sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--border, #E2E8F0) !important;
  box-shadow: 2px 0 12px rgba(15,23,42,0.05) !important;
}

html.light-mode .w3-nav-btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-2, #475569) !important;
  border-radius: 10px !important;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease !important;
}

html.light-mode .w3-nav-btn:hover {
  background: var(--bg, #F1F5F9) !important;
  color: var(--text-1, #0F172A) !important;
  transform: translateX(2px) !important;
}

html.light-mode .w3-nav-btn.active {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: var(--clr-primary, #2563EB) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.12) !important;
}

/* ══════════════════════════════════════════════════════════
   15. ESPAÇAMENTO CONSISTENTE
   Garante padding/margin idênticos entre todos os módulos.
══════════════════════════════════════════════════════════ */
html.light-mode .ds-main {
  background: var(--bg, #F1F5F9) !important;
}

html.light-mode .ds-layout {
  background: var(--bg, #F1F5F9) !important;
  min-height: 100vh !important;
}

/* Margem padrão para conteúdo principal de módulos */
html.light-mode .module-content,
html.light-mode .bdi-main,
html.light-mode .ana-main {
  padding: 32px 40px !important;
}

/* ══════════════════════════════════════════════════════════
   16. BOTÕES DE MODAL E VARIANTES ESPECIAIS
   Normaliza botões usados dentro de modais que não herdam
   as classes padrão .btn.
══════════════════════════════════════════════════════════ */

/* Base compartilhada para di-btn (diagnostic-impression) */
html.light-mode .di-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  border-radius: var(--r-sm, 8px) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

/* sf-btn (anamnese — botões de utilitário ghost) */
html.light-mode .sf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: var(--r-sm, 8px) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border, #E2E8F0) !important;
  color: var(--clr-primary, #2563EB) !important;
  transition: background 150ms ease, border-color 150ms ease !important;
}
html.light-mode .sf-btn:hover {
  background: var(--clr-primary-xs, #EFF6FF) !important;
  border-color: var(--clr-primary-light, #DBEAFE) !important;
}

/* Botão fechar modal (×) */
html.light-mode .close-btn,
html.light-mode .modal-close,
html.light-mode .btn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 6px !important;
  border-radius: var(--r-sm, 8px) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--text-3, #94A3B8) !important;
  cursor: pointer !important;
  transition: color 150ms ease, background 150ms ease !important;
}
html.light-mode .close-btn:hover,
html.light-mode .modal-close:hover,
html.light-mode .btn-close:hover {
  color: var(--text-1, #0F172A) !important;
  background: var(--bg, #F1F5F9) !important;
}

/* Botão modal cancelar/fechar (escuro) */
html.light-mode .btn-modal-cancel {
  background: var(--surface-2, #F8FAFC) !important;
  color: var(--text-2, #475569) !important;
  border: 1px solid var(--border, #E2E8F0) !important;
}
html.light-mode .btn-modal-cancel:hover {
  background: var(--bg, #F1F5F9) !important;
  color: var(--text-1, #0F172A) !important;
}

/* Botão WhatsApp (verde de marca) */
html.light-mode .btn-whatsapp {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37,211,102,0.30) !important;
}
html.light-mode .btn-whatsapp:hover {
  background: #1DA851 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.40) !important;
}

/* Botão copiar link */
html.light-mode .btn-copy {
  background: var(--clr-primary-light, #DBEAFE) !important;
  color: var(--clr-primary-dark, #1D4ED8) !important;
  border: none !important;
}
html.light-mode .btn-copy:hover {
  background: var(--clr-primary, #2563EB) !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════
   17. PROTEÇÃO — laudo/PDF não deve ser afetado
   As seletores desta seção NÃO devem aparecer em nenhuma
   das regras acima. São declarados aqui como salvaguarda
   explícita: as propriedades de impressão têm precedência.
══════════════════════════════════════════════════════════ */
html.light-mode #laudo-content,
html.light-mode #laudo-content *,
html.light-mode #preview,
html.light-mode #preview *,
html.light-mode .report-body,
html.light-mode .report-body * {
  /* Herança intencional: as regras de Times New Roman e
     espaçamento clínico definidas inline nos módulos de laudo
     possuem especificidade mais alta e vencem naturalmente.
     Este bloco existe apenas como documentação da intenção. */
  font-family: inherit;
}