/* ============================================================
   S.A.P.A — Sistema de Apoio Psicológico da Avalon
   Estilo: clínico, claro, sereno
   ============================================================ */

:root {
  /* Paleta Avalon: #FFFFFF #DCCBB4 #D4A9DD #9966CB #73309C */
  --bg:        oklch(98.4% 0.009 320);
  --surface:   #ffffff;
  --surface-2: oklch(98.4% 0.013 320);
  --ink:       oklch(30% 0.045 305);
  --ink-soft:  oklch(46% 0.04 305);
  --ink-faint: oklch(60% 0.03 308);
  --line:      oklch(91% 0.018 320);
  --line-soft: oklch(94.5% 0.012 320);

  --teal:      oklch(58% 0.15 305);   /* #9966CB roxo médio (primário) */
  --teal-deep: oklch(43% 0.17 305);   /* #73309C roxo profundo */
  --teal-wash: oklch(95% 0.032 320);  /* lavanda clara */

  --sage:      oklch(76% 0.10 320);   /* #D4A9DD lavanda */
  --beige:     oklch(83% 0.035 80);   /* #DCCBB4 areia */
  --amber:     oklch(72% 0.11 75);
  --rose:      oklch(58% 0.13 12);    /* alerta de validação */

  /* Escala monocromática de severidade: roxo intenso = melhor, areia = pior */
  --good:      oklch(43% 0.17 305);
  --moderate:  oklch(58% 0.15 305);
  --warn:      oklch(76% 0.10 320);
  --crit:      oklch(83% 0.035 80);

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 1px 2px oklch(45% 0.06 305 / 0.06), 0 8px 24px oklch(45% 0.08 305 / 0.08);
  --shadow-s: 0 1px 2px oklch(45% 0.06 305 / 0.07);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Public Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
}

/* ---------- Cabeçalho ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: oklch(99% 0.006 320 / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 920px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 16px;
}
.brand-mark {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  background: linear-gradient(155deg, var(--teal), var(--teal-deep));
  display: grid; place-items: center;
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
}
.brand-sub {
  font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.topbar-progress {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--ink-soft);
}
.mini-track {
  width: 120px; height: 6px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.mini-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--sage));
  border-radius: 99px; transition: width .35s ease;
}

/* ---------- Layout ---------- */
.wrap { max-width: 920px; margin: 0 auto; padding: 36px 28px 120px; }

.intro { margin-bottom: 34px; }
.intro h1 {
  font-family: var(--serif);
  font-weight: 500; font-size: 34px; line-height: 1.15;
  margin: 0 0 10px; letter-spacing: -0.01em;
  text-wrap: balance;
}
.intro p {
  margin: 0; max-width: 60ch; color: var(--ink-soft);
  font-size: 18px;
}
.intro .legenda {
  margin-top: 16px; font-size: 16px; color: var(--ink-soft);
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  border-left: 3px solid var(--teal); line-height: 1.6;
}

/* ---------- Cartões / seções ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 12px;
}
.card-head .qhead-text { flex: 1; }
.card-head .qnum {
  font-family: var(--serif);
  font-size: 13px; font-weight: 600;
  color: var(--teal-deep);
  background: var(--teal-wash);
  border-radius: 6px; padding: 2px 9px;
  letter-spacing: 0.04em; flex: none;
  align-self: flex-start; margin-top: 1px;
  transition: background .2s, color .2s;
}
.card-head .qcheck {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  color: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  transform: scale(.85);
}
.card.answered .qcheck {
  background: var(--teal); border-color: var(--teal);
  color: #fff; transform: scale(1);
}
.card.answered .qnum { background: var(--teal); color: #fff; }
.card-head .qtext {
  font-size: 18px; color: var(--ink); font-weight: 500; line-height: 1.45;
}
.card-head .qnote {
  display: block; margin-top: 7px;
  font-size: 15px; color: var(--ink-faint); font-weight: 400;
}
.card-body { padding: 10px 24px 24px; }

/* ---------- Dados do cliente ---------- */
.field-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px; padding: 22px 24px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.field input, .field select {
  font-family: var(--sans); font-size: 17px;
  color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px var(--teal-wash);
}

/* ---------- Questão de escolha única ---------- */
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color .14s, background .14s;
  font-size: 17px; color: var(--ink-soft); line-height: 1.45;
}
.opt:hover { border-color: var(--teal); background: var(--teal-wash); }
.opt .dot {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center;
  transition: border-color .14s;
}
.opt .dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); transform: scale(0);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) {
  border-color: var(--teal); background: var(--teal-wash);
  color: var(--ink); font-weight: 500;
}
.opt:has(input:checked) .dot { border-color: var(--teal); }
.opt:has(input:checked) .dot::after { transform: scale(1); }

/* ---------- Questão em grade: MATRIZ ---------- */
.matrix {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(var(--cols), minmax(0, 1fr));
  align-items: stretch;
  margin-top: 2px;
}
.matrix-head, .matrix-row { display: contents; }
.matrix-corner { border-bottom: 1.5px solid var(--line); }
.matrix-h {
  font-size: 12.5px; line-height: 1.35; font-weight: 600;
  color: var(--ink-soft); text-align: center;
  padding: 0 5px 12px; align-self: end;
  border-bottom: 1.5px solid var(--line);
}
.matrix-label {
  font-size: 17px; color: var(--ink);
  padding: 16px 16px 16px 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--line-soft); line-height: 1.45;
}
.matrix-cell {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-bottom: 1px solid var(--line-soft);
  transition: background .14s; position: relative; border-radius: 8px;
  min-height: 56px;
}
.matrix-cell:hover { background: var(--teal-wash); }
.matrix-cell input { position: absolute; opacity: 0; pointer-events: none; }
.matrix-cell .mdot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: border-color .14s;
}
.matrix-cell .mdot::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--teal); transform: scale(0);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.matrix-cell .mlab { display: none; font-size: 16px; }
.matrix-cell:has(input:checked) .mdot { border-color: var(--teal); }
.matrix-cell:has(input:checked) .mdot::after { transform: scale(1); }
.matrix-row:nth-of-type(even) .matrix-cell,
.matrix-row:nth-of-type(even) .matrix-label { background: oklch(98% 0.012 320); }
.matrix-cell:hover { background: var(--teal-wash); }

/* destaque de item não respondido após tentativa de envio */
.card.missing { border-color: var(--rose); box-shadow: 0 0 0 3px oklch(58% 0.13 12 / 0.10); }
.matrix-row.missing .matrix-label { color: var(--rose); }
.matrix-row.missing .matrix-cell { background: oklch(58% 0.13 12 / 0.05); }

/* ---------- Botão de ação ---------- */
.actions {
  display: flex; gap: 14px; align-items: center;
  margin-top: 34px; flex-wrap: wrap;
}
.btn {
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  padding: 16px 28px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn-primary {
  background: linear-gradient(150deg, var(--teal), var(--teal-deep));
  color: #fff; box-shadow: var(--shadow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px oklch(58% 0.15 305 / 0.32); }
.btn-ghost {
  background: var(--surface); color: var(--ink-soft);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.form-status { font-size: 13.5px; color: var(--ink-faint); }
.form-status.warn { color: var(--rose); }

/* ============================================================
   RELATÓRIO DE RESULTADO
   ============================================================ */
.report { display: none; }
body.show-report .app-form { display: none; }
body.show-report .report { display: block; }

.report-sheet {
  max-width: 920px; margin: 0 auto; padding: 36px 28px 80px;
}
.report-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 2px solid var(--line);
}
.report-title { font-family: var(--serif); }
.report-title .kicker {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-deep); font-weight: 700;
  margin-bottom: 6px;
}
.report-title h2 { margin: 0; font-size: 27px; font-weight: 500; }
.report-title .instrumento { font-family: var(--sans); font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.report-brand { display: flex; align-items: center; gap: 12px; text-align: right; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.report-brand strong { color: var(--ink); letter-spacing: 0.12em; font-size: 13px; }
.report-logo {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: linear-gradient(155deg, var(--teal), var(--teal-deep));
  display: grid; place-items: center; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.patient-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  overflow: hidden; margin-bottom: 30px;
}
.patient-bar .pcell { background: var(--surface); padding: 13px 16px; }
.patient-bar .plabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 3px;
}
.patient-bar .pvalue { font-size: 14.5px; color: var(--ink); font-weight: 500; }

.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 16px;
}

/* síntese */
.synthesis {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px;
  align-items: center; margin-bottom: 36px;
  padding: 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.gauge { position: relative; width: 180px; height: 180px; margin: 0 auto; max-width: 100%; }
.gauge svg { transform: rotate(-90deg); max-width: 100%; height: auto; }
.gauge .gnum {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center;
}
.gauge .gnum b { font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1; }
.gauge .gnum span { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.synthesis .stext h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21px; }
.synthesis .stext p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* tabela de domínios com barras */
.domain-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 36px; }
.domain-row {
  display: grid; grid-template-columns: 210px 1fr 116px;
  gap: 18px; align-items: center;
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
.domain-row .dname { font-size: 16px; font-weight: 500; }
.domain-row .dname small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-faint); }
.bar-track { height: 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.22,1,.36,1); }
.domain-row .dright { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.domain-row .dscore { font-family: var(--serif); font-size: 23px; font-weight: 500; min-width: 42px; text-align: right; }
.tag {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.tag.bom      { background: oklch(43% 0.17 305 / .12); color: oklch(40% 0.17 305); }
.tag.moderado { background: oklch(58% 0.15 305 / .16); color: oklch(47% 0.16 305); }
.tag.atencao  { background: oklch(76% 0.10 320 / .24); color: oklch(48% 0.13 316); }
.tag.critico  { background: oklch(83% 0.05 80 / .38);  color: oklch(46% 0.045 70); }

.fill-bom      { background: linear-gradient(90deg, oklch(50% 0.16 305), oklch(43% 0.17 305)); }
.fill-moderado { background: linear-gradient(90deg, oklch(63% 0.14 308), oklch(58% 0.15 305)); }
.fill-atencao  { background: linear-gradient(90deg, oklch(79% 0.09 322), oklch(74% 0.105 318)); }
.fill-critico  { background: linear-gradient(90deg, oklch(86% 0.032 82), oklch(82% 0.04 78)); }

/* item de transição q2 */
.transition-note {
  padding: 16px 20px; background: var(--teal-wash);
  border: 1px solid oklch(56% 0.085 215 / 0.25);
  border-radius: var(--radius-s); margin-bottom: 30px;
  font-size: 14px; color: var(--ink-soft);
}
.transition-note b { color: var(--teal-deep); }

/* legenda de faixas */
.legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 16px 20px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  margin-bottom: 28px; font-size: 12.5px; color: var(--ink-soft);
}
.legend .lk { display: flex; align-items: center; gap: 7px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }

.report-foot {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.6;
}
.report-foot .sign {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 30px;
}
.report-foot .sign div { border-top: 1px solid var(--ink-faint); padding-top: 7px; text-align: center; color: var(--ink-soft); }

/* ============================================================
   PERFIL DOS DOMÍNIOS (radar + componentes + destaques)
   ============================================================ */
.profile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-bottom: 36px; align-items: stretch;
}
.radar-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-s);
  padding: 18px 18px 14px; display: flex; flex-direction: column; align-items: center;
}
.radar { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; }
.radar-axis { font: 600 11px var(--sans); fill: var(--ink-soft); }
.radar-val  { font: 600 11px var(--serif); fill: var(--teal-deep); }
.radar-cap { font-size: 13px; color: var(--ink-faint); text-align: center; margin-top: 6px; max-width: 320px; }

.profile-side { display: flex; flex-direction: column; gap: 14px; }
.component-cards { display: flex; flex-direction: column; gap: 14px; }
.comp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: var(--shadow-s);
  padding: 16px 18px;
}
.comp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.comp-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.comp-score { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1; }
.comp-bottom { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.comp-desc { font-size: 14px; color: var(--ink-faint); flex: 1; min-width: 140px; }

.destaques { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dest-item {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
}
.dest-best  { border-left: 3px solid var(--good); }
.dest-worst { border-left: 3px solid var(--crit); }
.dest-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 600; }
.dest-name { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.dest-num { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-top: 3px; }
.dest-best .dest-num  { color: var(--good); }
.dest-worst .dest-num { color: oklch(54% 0.05 70); }

/* ============================================================
   BARRA DE AÇÃO FIXA (dock)
   ============================================================ */
.dock {
  position: sticky; bottom: 0; z-index: 40;
  background: oklch(99% 0.006 320 / 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
body.show-report .dock { display: none; }
.dock-inner {
  max-width: 920px; margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 28px);
  display: flex; align-items: center; gap: 18px;
}
.dock-progress { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dock-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.dock-track { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.dock-fill { height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--teal), var(--sage)); transition: width .35s ease; }
.dock .btn { flex: none; white-space: nowrap; }

/* ============================================================
   COMPARATIVO HISTÓRICO
   ============================================================ */
.comparativo { margin-top: 8px; }
.comp-section { margin-bottom: 30px; }
.delta-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-s);
  font-size: 14.5px; font-weight: 600; margin-bottom: 18px;
}
.delta-pos { background: oklch(43% 0.17 305 / .1); color: oklch(40% 0.17 305); }
.delta-neg { background: oklch(83% 0.05 80 / .25); color: oklch(46% 0.045 70); }
.delta-eq  { background: var(--surface-2); color: var(--ink-faint); }
.comp-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start;
}
.comp-radar { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px; box-shadow: var(--shadow-s); }
.comp-table-wrap { overflow-x: auto; }
.comp-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.comp-table th, .comp-table td {
  padding: 10px 12px; text-align: right;
  border-bottom: 1px solid var(--line-soft);
}
.comp-table th { font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em; text-align: right; }
.comp-table .dcol { text-align: left; font-weight: 500; color: var(--ink); font-size: 13.5px; }
.comp-table thead tr th:first-child { text-align: left; }
.comp-table td b { font-family: var(--serif); font-size: 16px; }
.chist { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.up { color: oklch(43% 0.17 305); font-size: 11px; margin-left: 3px; }
.dn { color: oklch(50% 0.045 70); font-size: 11px; margin-left: 3px; }
.eq { color: var(--ink-faint); font-size: 11px; margin-left: 3px; }

/* ---------- Responsivo ---------- */

/* Tablet / notebook estreito */
@media (max-width: 900px) {
  .topbar-inner { padding: 13px clamp(16px, 4vw, 28px); }
  .wrap { padding: clamp(22px, 4vw, 36px) clamp(16px, 4vw, 28px) 110px; }
  .report-sheet { padding: clamp(22px, 4vw, 36px) clamp(16px, 4vw, 28px) 80px; }
  .intro h1 { font-size: clamp(26px, 4.4vw, 34px); }
  .domain-row { grid-template-columns: 180px 1fr 108px; gap: 14px; }
}

/* Telas médias: empilha síntese, perfil e matriz vira lista */
@media (max-width: 760px) {
  .topbar-progress { gap: 9px; }
  .mini-track { width: 88px; }
  .synthesis { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .report-header { flex-direction: column; }
  .report-brand { text-align: left; }
  .comp-layout { grid-template-columns: 1fr; }
  .matrix { display: block; }
  .matrix-head { display: none; }
  .matrix-row { display: block; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .matrix-row:last-child { border-bottom: none; }
  .matrix-label { display: block; border: none; padding: 0 0 13px; font-weight: 500; font-size: 17px; }
  .matrix-cell {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); border-radius: 99px;
    padding: 10px 17px; margin: 0 9px 9px 0; background: var(--surface-2);
    min-height: 0;
  }
  .matrix-row:nth-of-type(even) .matrix-cell { background: var(--surface-2); }
  .matrix-row:nth-of-type(even) .matrix-label { background: none; }
  .matrix-cell .mdot { display: none; }
  .matrix-cell .mlab { display: inline; font-size: 16px; color: var(--ink-soft); }
  .matrix-cell:has(input:checked) { background: var(--teal); border-color: var(--teal); }
  .matrix-cell:has(input:checked) .mlab { color: #fff; font-weight: 600; }
}

/* Celular grande */
@media (max-width: 600px) {
  .comp-layout { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; padding: 18px 18px; }
  .card-head { padding: 16px 18px; }
  .card-body { padding: 6px 18px 18px; }
  .patient-bar { grid-template-columns: 1fr 1fr; }
  .patient-bar .pcell[style*="span 2"] { grid-column: 1 / -1 !important; }
  .domain-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  .domain-row .dright { justify-content: space-between; width: 100%; }
  .report-foot .sign { grid-template-columns: 1fr; gap: 26px; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }
  .report .actions .btn { flex: 1 1 auto; }
}

/* Celular pequeno */
@media (max-width: 430px) {
  .brand-sub { display: none; }
  #progressLabel { display: none; }
  .topbar-inner { gap: 11px; }
  .intro h1 { font-size: 23px; }
  .opt { font-size: 16px; padding: 13px 15px; }
  .card-head .qtext { font-size: 14.5px; }
  .patient-bar { grid-template-columns: 1fr; }
  .report-title h2 { font-size: 22px; }
  .gauge { width: 150px; height: 150px; }
  .destaques { grid-template-columns: 1fr; }
  .dock-inner { gap: 12px; }
  .dock .btn { padding: 12px 16px; font-size: 14px; }
  .report .actions { flex-direction: column; align-items: stretch; }
  .report .actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   IMPRESSÃO / PDF
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 12mm 14mm; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 13px; }
  .topbar, .app-form, .dock, .no-print { display: none !important; }
  .report { display: block !important; }
  .report-sheet { max-width: none; padding: 0; }

  /* Caixas sem sombra */
  .card, .synthesis, .domain-row, .patient-bar .pcell, .legend, .transition-note,
  .radar-card, .comp-card, .dest-item, .comp-radar { box-shadow: none !important; }

  /* Botões e ações ocultos */
  .report .actions { display: none !important; }

  /* Cabeçalho do relatório compacto */
  .report-header { padding-bottom: 14px; margin-bottom: 18px; }
  .report-title h2 { font-size: 22px; }
  .report-logo { width: 38px; height: 38px; }

  /* Barra do paciente: compacta */
  .patient-bar { margin-bottom: 18px; }
  .patient-bar .pcell { padding: 9px 12px; }
  .patient-bar .pvalue { font-size: 13px; }

  /* Síntese */
  .synthesis { padding: 16px; margin-bottom: 20px; }
  .gauge { width: 130px; height: 130px; }
  .gauge .gnum b { font-size: 32px; }
  .synthesis .stext h3 { font-size: 17px; }
  .synthesis .stext p { font-size: 13px; }

  /* Perfil dos domínios: duas colunas lado a lado */
  .profile { grid-template-columns: 240px 1fr; gap: 14px; margin-bottom: 20px; }
  .radar-card { padding: 10px; }
  .comp-card { padding: 12px 14px; }
  .comp-score { font-size: 22px; }

  /* Domínios */
  .domain-row { padding: 10px 14px; }
  .domain-row .dname { font-size: 13px; }
  .domain-row .dscore { font-size: 18px; }
  .domain-list { gap: 4px; margin-bottom: 16px; }
  .tag { font-size: 10px; padding: 2px 7px; }

  /* Comparativo */
  .comp-layout { grid-template-columns: 200px 1fr; gap: 14px; }
  .comp-table { font-size: 12px; }
  .comp-table th, .comp-table td { padding: 7px 9px; }
  .comp-table td b { font-size: 13px; }

  /* Notas de rodapé */
  .legend { padding: 10px 14px; font-size: 11.5px; }
  .report-foot { font-size: 11px; margin-top: 20px; padding-top: 12px; }
  .report-foot .sign { margin-top: 24px; }

  /* Quebras de página */
  .synthesis, .patient-bar, .transition-note,
  .profile, .comp-section, .report-foot { break-inside: avoid; }
  .comparativo { break-before: auto; }
  .report-foot { break-inside: avoid; }
  .bar-fill { transition: none !important; }
  .delta-banner { font-size: 12px; }
}