/* NuovaMente — sistema experimental e reversível de botões
   Escopo inicial: somente Simulação Oral V1 e V2.
   Remoção: retirar o link de style/components/buttons.css em always_include.php. */

:root {
  --nm-btn-from: var(--primary-color, #36929b);
  --nm-btn-to: var(--secondary-color, #5c6baf);
  --nm-btn-text: #fff;
  --nm-btn-radius: 14px;
  --nm-btn-border-top: rgba(255,255,255,.40);
  --nm-btn-border-bottom: rgba(23,55,90,.36);
  --nm-btn-shadow: 0 7px 16px rgba(54,146,155,.20), 0 3px 7px rgba(31,55,92,.14);
  --nm-btn-shadow-hover: 0 10px 22px rgba(54,146,155,.24), 0 5px 10px rgba(31,55,92,.18);
}

/* Base comum — preserva dimensões próprias de cada página. */
html body .oral-main .btn,
html body .oral-v2-shell .btn,
html body .oral-main .oral-access-plan-button,
html body .oral-v2-shell .oral-access-plan-button {
  font-family: var(--font-title, "Baloo Bhai 2", system-ui, sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease !important;
  -webkit-tap-highlight-color: transparent;
}

/* Botão clássico do site: ações secundárias. */
html body .oral-main .btn-secondary,
html body .oral-v2-shell .btn-secondary,
html body .oral-v2-shell #testMicBtn {
  color: var(--text-primary, #2c3e50) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.16)),
    color-mix(in srgb, var(--surface-color, #fff) 88%, var(--primary-color, #36929b) 12%) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #36929b) 30%, var(--border-color, #dfe5e8)) !important;
  border-radius: var(--nm-btn-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(31,55,92,.08) !important;
}

/* CTA principal premium leve: mesma identidade, apenas mais profundidade. */
html body .oral-main #startOralExamBtn,
html body .oral-v2-shell #startBtn,
html body .oral-main .oral-primary-btn,
html body .oral-v2-shell #finishBtn,
html body .oral-main .oral-access-plan-button,
html body .oral-v2-shell .oral-access-plan-button {
  color: var(--nm-btn-text) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.035) 42%, rgba(0,0,0,.08) 100%),
    linear-gradient(135deg, var(--nm-btn-from), var(--nm-btn-to)) !important;
  border: 1px solid color-mix(in srgb, var(--nm-btn-to) 58%, #26395e 42%) !important;
  border-top-color: var(--nm-btn-border-top) !important;
  border-bottom-color: var(--nm-btn-border-bottom) !important;
  border-radius: var(--nm-btn-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(16,42,72,.24),
    var(--nm-btn-shadow) !important;
  text-shadow: 0 1px 1px rgba(15,35,58,.18) !important;
}

/* Ícones de CTA sempre acompanham o texto branco. */
html body .oral-main #startOralExamBtn .material-icons,
html body .oral-v2-shell #startBtn .material-icons,
html body .oral-main .oral-primary-btn .material-icons,
html body .oral-v2-shell #finishBtn .material-icons,
html body .oral-main .oral-access-plan-button .material-icons,
html body .oral-v2-shell .oral-access-plan-button .material-icons {
  color: #fff !important;
  fill: currentColor !important;
}

html body .oral-main #startOralExamBtn:hover:not(:disabled),
html body .oral-v2-shell #startBtn:hover:not(:disabled),
html body .oral-main .oral-primary-btn:hover:not(:disabled),
html body .oral-v2-shell #finishBtn:hover:not(:disabled),
html body .oral-main .oral-access-plan-button:hover,
html body .oral-v2-shell .oral-access-plan-button:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.025) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(16,42,72,.26),
    var(--nm-btn-shadow-hover) !important;
}

html body .oral-main .btn:active:not(:disabled),
html body .oral-v2-shell .btn:active:not(:disabled),
html body .oral-main .oral-access-plan-button:active,
html body .oral-v2-shell .oral-access-plan-button:active {
  transform: translateY(0) scale(.985) !important;
}

html body .oral-main .btn:focus-visible,
html body .oral-v2-shell .btn:focus-visible,
html body .oral-main .oral-access-plan-button:focus-visible,
html body .oral-v2-shell .oral-access-plan-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-color, #36929b) 34%, transparent) !important;
  outline-offset: 3px !important;
}

html body .oral-main .btn:disabled,
html body .oral-v2-shell .btn:disabled {
  opacity: .52 !important;
  filter: saturate(.62) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* V2: superfícies alinhadas aos tokens globais, sem azul local excessivo. */
html body main.oral-v2-shell {
  --v2-card: var(--surface-color-transparent, rgba(255,255,255,.85)) !important;
  --v2-card-strong: var(--surface-color, #fff) !important;
  --v2-text: var(--text-primary, #2c3e50) !important;
  --v2-muted: var(--text-secondary, #7f8c8d) !important;
  --v2-line: var(--border-color, #e1e5e9) !important;
  --v2-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 2px 8px rgba(15,23,42,.055) !important;
}

html body main.oral-v2-shell > header.oral-v2-hero,
html body main.oral-v2-shell > section.oral-v2-card {
  background: var(--surface-color-transparent, rgba(255,255,255,.85)) !important;
  border-color: var(--border-color, #e1e5e9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 2px 8px rgba(15,23,42,.055) !important;
  backdrop-filter: blur(var(--blur, 9px)) !important;
  -webkit-backdrop-filter: blur(var(--blur, 9px)) !important;
}

html body main.oral-v2-shell .oral-v2-history-item {
  background: color-mix(in srgb, var(--surface-color, #fff) 92%, transparent) !important;
  border-color: var(--border-color, #e1e5e9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 4px rgba(15,23,42,.035) !important;
}

/* Dark mode seguindo os tokens globais, sem trocar a identidade da marca. */
html[data-theme="dark"],
html.dark-mode,
body.dark-mode,
body[data-theme="dark"] {
  --nm-btn-border-top: rgba(255,255,255,.30);
  --nm-btn-border-bottom: rgba(0,0,0,.48);
  --nm-btn-shadow: 0 8px 20px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035);
  --nm-btn-shadow-hover: 0 11px 25px rgba(0,0,0,.40), 0 0 18px rgba(66,176,187,.10);
}

html[data-theme="dark"] body .oral-main .btn-secondary,
html[data-theme="dark"] body .oral-v2-shell .btn-secondary,
html.dark-mode body .oral-main .btn-secondary,
html.dark-mode body .oral-v2-shell .btn-secondary,
body.dark-mode .oral-main .btn-secondary,
body.dark-mode .oral-v2-shell .btn-secondary,
body[data-theme="dark"] .oral-main .btn-secondary,
body[data-theme="dark"] .oral-v2-shell .btn-secondary,
html[data-theme="dark"] body .oral-v2-shell #testMicBtn,
html.dark-mode body .oral-v2-shell #testMicBtn,
body.dark-mode .oral-v2-shell #testMicBtn,
body[data-theme="dark"] .oral-v2-shell #testMicBtn {
  color: #eafffd !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(54,214,201,.085) !important;
  border-color: rgba(54,214,201,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 13px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] body main.oral-v2-shell > header.oral-v2-hero,
html[data-theme="dark"] body main.oral-v2-shell > section.oral-v2-card,
html.dark-mode body main.oral-v2-shell > header.oral-v2-hero,
html.dark-mode body main.oral-v2-shell > section.oral-v2-card,
body.dark-mode main.oral-v2-shell > header.oral-v2-hero,
body.dark-mode main.oral-v2-shell > section.oral-v2-card,
body[data-theme="dark"] main.oral-v2-shell > header.oral-v2-hero,
body[data-theme="dark"] main.oral-v2-shell > section.oral-v2-card {
  background: var(--surface-color-transparent, rgba(31,31,31,.82)) !important;
  border-color: var(--border-color, #404040) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 2px 8px rgba(0,0,0,.20) !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .oral-v2-shell #testMicBtn {
    color: #eafffd !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(54,214,201,.085) !important;
    border-color: rgba(54,214,201,.28) !important;
  }

  html:not([data-theme="light"]) body main.oral-v2-shell > header.oral-v2-hero,
  html:not([data-theme="light"]) body main.oral-v2-shell > section.oral-v2-card {
    background: var(--surface-color-transparent, rgba(31,31,31,.82)) !important;
    border-color: var(--border-color, #404040) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 2px 8px rgba(0,0,0,.20) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .oral-main .btn,
  html body .oral-v2-shell .btn,
  html body .oral-main .oral-access-plan-button,
  html body .oral-v2-shell .oral-access-plan-button {
    transition: none !important;
  }
}