/* =============================================
   STYLE.CSS — Estratificação de Risco Gestacional
   Paleta: Cream Vanilla (#efe6dd) + tinta plum
   ============================================= */

::selection { background: #6d445733; }

/* ── Step visibility ──────────────────────────────────── */
.step-page { display: none; }
.step-page.is-visible { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar discreta */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: #2b242022; border-radius: 99px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Eyebrow / rótulo de etapa ───────────────────────── */
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6d4457;
  margin-bottom: 2px;
}

/* ── Step pills (header) ─────────────────────────────── */
.step-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: #2b242099;
  background: transparent;
  border: none;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.step-pill:hover { background: #2b24200d; }
.step-pill .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #2b242014;
  color: #2b2420aa;
  font-size: 11px;
  font-weight: 700;
}
.step-pill.is-active {
  color: #2b2420;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(43,36,32,.08);
}
.step-pill.is-active .step-num { background: #6d4457; color: #fff; }
.step-pill.is-done .step-num { background: #6d4457; color: #fff; }
.step-line {
  width: 12px;
  height: 1px;
  background: #2b242022;
  flex-shrink: 0;
}

/* ── Card container ──────────────────────────────────── */
.card {
  background: #faf6f1;
  border: 1px solid #2b242014;
  border-radius: 14px;
  overflow: hidden;
}

/* ── Options grid ─────────────────────────────────────── */
.opt-grid {
  display: grid;
  grid-template-columns: 1fr;
  padding: 6px;
}
@media (min-width: 640px) {
  .opt-grid { grid-template-columns: 1fr 1fr; }
}

.opt-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.opt-row:hover { background: #2b242009; }
.opt-row input { position: absolute; opacity: 0; width: 0; height: 0; }

.opt-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid #2b242040;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.opt-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}

.opt-text {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.5;
  color: #2b2420dd;
}
.opt-sub {
  color: #2b242077;
  font-size: 14px;
}

.opt-pts {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #2b242055;
  tabular-nums: normal;
  padding-top: 2px;
}

/* checked state */
.opt-row.is-checked { background: #6d445714; }
.opt-row.is-checked .opt-check { background: #6d4457; border-color: #6d4457; }
.opt-row.is-checked .opt-check svg { opacity: 1; transform: scale(1); }
.opt-row.is-checked .opt-text { color: #2b2420; }
.opt-row.is-checked .opt-pts { color: #6d4457; }

/* special item (Obesidade grau 3) */
.opt-row--special { background: #6d44570a; }
.opt-row--special .opt-pts { color: #8c4a3c; }
.opt-row--special.is-checked { background: #6d445720; }

/* ── Note box ─────────────────────────────────────────── */
.note-box {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #2b242099;
  background: #6d445712;
  padding: 12px 15px;
  border-radius: 10px;
}
.note-box strong { color: #573449; font-weight: 700; }

/* aviso neutro, sem barra lateral colorida */
.plain-notice {
  font-size: 14px;
  line-height: 1.6;
  color: #2b242099;
  background: #2b24200a;
  padding: 13px 16px;
  border-radius: 10px;
}
.plain-notice strong { color: #2b2420; font-weight: 700; }

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #573449;
  color: #faf6f1;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn-primary:hover { background: #6d4457; }
.btn-primary:active { transform: scale(.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #2b242099;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease;
  white-space: nowrap;
}
.btn-ghost:hover { background: #2b242010; color: #2b2420; }
.btn-ghost:disabled { opacity: 0; pointer-events: none; }

/* ── Bottom nav bar ───────────────────────────────────── */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 62px;
  background: #efe6ddf2;
  backdrop-filter: blur(6px);
  border-top: 1px solid #2b242014;
  z-index: 40;
}

/* ── Result card ──────────────────────────────────────── */
.result-card {
  background: #faf6f1;
  border: 1px solid #2b242014;
  border-radius: 14px;
  overflow: hidden;
}

/* Banner sólido de classificação (sem tarja lateral) */
.result-banner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 20px 22px;
  background: #2b2420;
  color: #efe6dd;
}
.result-card.risk-low  .result-banner { background: #2c5f42; }
.result-card.risk-mid  .result-banner { background: #96691f; }
.result-card.risk-high .result-banner { background: #8e2f2f; }

.result-banner-label {
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.result-banner-class {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}
.result-banner-score {
  font-size: 14px;
  font-weight: 600;
  opacity: .85;
  margin-left: auto;
  white-space: nowrap;
}

.result-body {
  padding: 18px 22px 20px;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .result-body { grid-template-columns: 1fr 1.3fr; }
}
.result-block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2b242070;
  margin-bottom: 6px;
}
.result-block p {
  font-size: 15px;
  line-height: 1.55;
  color: #2b2420cc;
}

.care-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.care-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2b2420cc;
}
.care-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .45;
}

/* ── Breakdown table ──────────────────────────────────── */
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.breakdown-table td {
  padding: 11px 20px;
  color: #2b2420aa;
}
.breakdown-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #2b2420;
}
.breakdown-table tr:not(:last-child) td { border-bottom: 1px solid #2b242010; }
.breakdown-total-row td {
  font-weight: 700;
  color: #2b2420;
  background: #2b242006;
}

/* ── Print ────────────────────────────────────────────── */
@media print {
  header, .bottom-bar, #step-a, #step-b, #step-c, #step-d { display: none !important; }
  #step-result { display: block !important; }
  body { background: #fff; }
}