/* Calculadoras no padrão visual do site (B1, 17/10/2026).
   Carregado só nos apps de calculadora, depois de mep-theme.css. Só apresentação:
   não muda DOM, lógica, texto nem cores semânticas (erro, alerta, faixas de
   classificação). Os apps trazem estilos com escopo por ID (#calc-x .classe);
   por isso as regras usam !important. Referência: questionários nativos
   (Helvetica Neue, cantos retos, sem sombra, cabeçalho de seção azul-marinho). */

/* Tokens do template comum dos apps (113 de 143 usam --calc-*). */
* {
  --calc-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --calc-font-title: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --calc-radius: 0px !important;
  --calc-shadow: none !important;
  --calc-bg: #fff !important;
  --calc-border: #d9d9d9 !important;
  --calc-text: #101010 !important;
  --calc-muted: #5c5c5c !important;
  --calc-primary: #001f51 !important;
  --calc-primary-hover: #00aaff !important;
}

/* Tipografia única; fórmulas do MathJax ficam com a fonte própria. */
body *:not(mjx-container):not(mjx-container *):not(code):not(pre):not(kbd) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Cantos retos e sem sombra; formas que comunicam algo (marcadores, pontos,
   rádio, controles de faixa, anéis) mantêm o raio. */
/* Um único :not() com lista: quebra de linha entre dois :not() vira combinador descendente. */
body *:not(input[type="radio"], input[type="checkbox"], input[type="range"],
  [class*="dot"], [class*="marker"], [class*="ring"], [class*="circle"], [class*="knob"],
  [class*="thumb"], [class*="avatar"], [class*="switch"], [class*="toggle"], [class*="slider"], svg *) {
  border-radius: 0 !important;
}
body *, body *::before, body *::after { box-shadow: none !important; text-shadow: none !important; }
body *:focus-visible { outline: 2px solid #00aaff !important; outline-offset: 2px; }

/* Cartão externo: a moldura já é o iframe da página; o app não desenha outra. */
.calc-card, [class$="-card"].calc-card {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(16px, 4vw, 40px) !important;
  border: 0 !important;
  background: #fff !important;
}

/* Título interno vira sobretítulo (o H1 está na página); subtítulo em texto de apoio. */
.calc-title {
  margin: 0 0 8px !important;
  color: #001f51 !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.calc-subtitle { color: #5c5c5c !important; font-size: .95rem !important; line-height: 1.55 !important; }

/* Selos ao lado do título e nos resultados: etiqueta reta, sem pílula. Só o
   selo "puro": com classe extra (faixa de risco, nível) mantém a cor do app.
   Cor posta pelo JS no atributo style (faixa de classificação do IMC etc.) é
   semântica: esses elementos ficam fora das regras de cor desta camada. */
:is([class="small-badge"], [class="badge"]):not([style*="color"]):not([style*="background"]) {
  border: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #001f51 !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

/* Seções "Dados" / "Resultados": painel branco com cabeçalho azul-marinho. */
.calc-section {
  border: 1px solid #d9d9d9 !important;
  background: #fff !important;
  padding: 16px !important;
}
.calc-section > :is(h2, h3):first-child {
  margin: -16px -16px 16px !important;
  padding: 10px 14px !important;
  color: #fff !important;
  background: #001f51 !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

/* Rótulos e campos como nos questionários. */
.calc-card label:not([style*="color"]) { color: #101010 !important; font-size: .85rem !important; font-weight: 700 !important; }
.calc-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .calc-card select, .calc-card textarea {
  min-height: 44px;
  border-color: #c4c4c4 !important;
  font-size: 1rem !important;
}
/* Os apps tiram a aparência nativa do select; a seta volta como imagem. */
select:not([multiple]) {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001f51' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
.calc-card input:focus, .calc-card select:focus, .calc-card textarea:focus { border-color: #00aaff !important; }

/* Botões: primário azul-marinho, secundário contornado; mesma altura dos campos. */
.calc-card :is(.btn, button):not(.calc-copy, .calc-swap) { min-height: 44px; padding: 10px 18px !important; font-weight: 700 !important; transform: none !important; }

/* Cartões de resultado: fundo liso, faixa lateral única no azul do site. */
[class="result-card"], .result-card[class*="accent-"] {
  border: 1px solid #d9d9d9 !important;
  background: #fff !important;
}
.result-card::before { width: 4px !important; background: #00aaff !important; opacity: 1 !important; }
[class="rk"]:not([style*="color"]):not([style*="background"]) { color: #5c5c5c !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .02em; }
[class="rv"]:not([style*="color"]):not([style*="background"]) { color: #001f51 !important; font-weight: 800 !important; }
[class="rs"]:not([style*="color"]):not([style*="background"]) { color: #5c5c5c !important; }

/* Caixas de fórmula, notas e destaques: fundo liso com filete azul, como as notas do site. */
:is([class$="-formula-box"], [class$="-callout"], [class$="-box"]):not(.calc-card):not([style*="color"]):not([style*="background"]) {
  border: 0 !important;
  border-left: 4px solid #00aaff !important;
  background: #f4f4f4 !important;
  background-image: none !important;
}
[class$="-divider"] { border-color: #d9d9d9 !important; background: #d9d9d9 !important; background-image: none !important; }
:is([class="calc-note"], [class$="-note"]):not(.result-card):not([style*="color"]):not([style*="background"]) { color: #5c5c5c !important; }

/* Selects sem a seta nativa (alguns apps mantinham a nativa e ficavam com duas). */
select:not([multiple]) { -webkit-appearance: none !important; appearance: none !important; }

/* Cabeçalhos com gradiente da marca antiga (verde-azulado) viram azul-marinho liso.
   Seletores por app: outros apps usam .calc-header/header com fundo claro. */
#hcm-risk-scd-calc .calc-header, body:has(#shbg) > header {
  background-color: #001f51 !important;
  background-image: none !important;
  color: #fff !important;
}
:is(#hcm-risk-scd-calc .calc-header, body:has(#shbg) > header) * { color: #fff !important; }

/* Controles segmentados (rádio escondido + rótulo): a opção escolhida fica legível. */
[class*="segment"] input[type="radio"] + label { color: #001f51 !important; background: transparent !important; }
[class*="segment"] :is(input[type="radio"]:checked + label, label:has(input[type="radio"]:checked)) {
  color: #fff !important; background: #001f51 !important;
}

/* Botões de ícone (copiar, inverter) e cartões de escolha: contornados, com ícone e texto azul-marinho. */
.calc-copy, .calc-swap, .calc-option-btn {
  background: #fff !important;
  border: 1px solid #001f51 !important;
  color: #001f51 !important;
}
.calc-copy svg, .calc-swap svg { stroke: #001f51 !important; }
.calc-option-btn * { color: inherit !important; }
.calc-option-btn:is(.active, .is-active, .selected, [aria-pressed="true"], [aria-selected="true"]) {
  background: #001f51 !important; color: #fff !important;
}
.calc-copy:hover, .calc-swap:hover, .calc-option-btn:hover { background: #001f51 !important; color: #fff !important; }
.calc-copy:hover svg, .calc-swap:hover svg { stroke: #fff !important; }