/* =========================================================
   MAPA DA ORATÓRIA DE PRESENÇA
   Arquivo visual. Pode ser editado esteticamente.
   Evite renomear IDs usados pelo JavaScript.
   Identidade: preto, branco e dourado.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600;700&display=swap");

.mapa-presenca-app {
  --mp-bg: #0a0a0a;
  --mp-paper: #121212;
  --mp-paper-2: #181818;
  --mp-ink: #f5f2ea;
  --mp-ink-soft: #d9d4c8;
  --mp-muted: #9a958b;
  --mp-line: #2a2824;
  --mp-line-strong: #3a362e;
  --mp-accent: #c9a24b;          /* dourado principal */
  --mp-accent-light: #e8cd85;    /* dourado claro */
  --mp-accent-deep: #8c6d28;     /* dourado escuro */
  --mp-accent-soft: rgba(201, 162, 75, .1);
  --mp-gold-gradient: linear-gradient(135deg, #f3dc9b 0%, #c9a24b 45%, #9b7a2f 100%);
  --mp-radius: 20px;
  --mp-radius-sm: 12px;
  --mp-max-width: 820px;
  --mp-font: "Jost", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mp-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;

  color: var(--mp-ink);
  font-family: var(--mp-font);
  font-size: 16px;
  line-height: 1.6;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(201, 162, 75, .12), transparent 60%),
    var(--mp-bg);
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

.mapa-presenca-app,
.mapa-presenca-app *,
.mapa-presenca-app *::before,
.mapa-presenca-app *::after {
  box-sizing: border-box;
}

.mapa-presenca-app ::selection {
  background: var(--mp-accent);
  color: #0a0a0a;
}

.mapa-presenca-app .wrap {
  max-width: var(--mp-max-width);
  margin: 0 auto;
  padding: 40px 24px 56px;
}

/* ---------- Cards ---------- */

.mapa-presenca-app .card {
  position: relative;
  background: linear-gradient(180deg, var(--mp-paper-2), var(--mp-paper));
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 48px 52px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .03);
  animation: mp-rise .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* filete dourado no topo do card */
.mapa-presenca-app .card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mp-accent), transparent);
}

.mapa-presenca-app #quiz {
  max-width: 680px;
  margin: 0 auto;
}

/* ---------- Tipografia ---------- */

.mapa-presenca-app .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mp-accent);
  font-weight: 600;
}

.mapa-presenca-app .brand::before,
.mapa-presenca-app .brand::after {
  content: "";
  height: 1px;
  width: 28px;
  background: var(--mp-accent);
  opacity: .6;
  flex: none;
}

.mapa-presenca-app .brand::after {
  flex: 1;
  background: linear-gradient(90deg, var(--mp-accent), transparent);
}

.mapa-presenca-app h1,
.mapa-presenca-app h2,
.mapa-presenca-app h3 {
  line-height: 1.15;
  margin: .4em 0;
  color: var(--mp-ink);
  font-weight: 600;
  overflow-wrap: break-word;
}

.mapa-presenca-app h1,
.mapa-presenca-app h2 {
  font-family: var(--mp-serif);
  letter-spacing: -.01em;
}

.mapa-presenca-app h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  margin-top: .55em;
}

/* Título do relatório (nome da Presença) em dourado */
.mapa-presenca-app #reportContent > h1 {
  color: var(--mp-accent-light);
}

.mapa-presenca-app h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-top: 0;
}

.mapa-presenca-app h3 {
  font-size: 1.08rem;
  font-weight: 650;
  margin-top: 1.2em;
}

.mapa-presenca-app p {
  margin: .75em 0;
}

.mapa-presenca-app .lead {
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--mp-ink-soft);
  line-height: 1.6;
}

.mapa-presenca-app .muted {
  color: var(--mp-muted);
}

.mapa-presenca-app .small {
  font-size: .86rem;
}

.mapa-presenca-app strong {
  color: var(--mp-ink);
}

.mapa-presenca-app .hidden {
  display: none !important;
}

/* ---------- Meta da tela inicial ---------- */

.mapa-presenca-app .mp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
}

.mapa-presenca-app .mp-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--mp-ink-soft);
  background: rgba(255, 255, 255, .02);
}

.mapa-presenca-app .mp-meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-accent);
  box-shadow: 0 0 10px rgba(201, 162, 75, .7);
}

.mapa-presenca-app .mp-divider {
  height: 1px;
  margin: 30px 0 6px;
  background: linear-gradient(90deg, var(--mp-line-strong), transparent);
  border: 0;
}

/* ---------- Campos ---------- */

.mapa-presenca-app .field {
  margin: 24px 0;
}

.mapa-presenca-app label {
  font-weight: 600;
  font-size: .95rem;
  display: block;
  margin-bottom: 10px;
  color: var(--mp-ink);
}

.mapa-presenca-app input[type="text"],
.mapa-presenca-app .mp-textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: #0c0c0c;
  color: var(--mp-ink);
  font: inherit;
  font-size: 16px; /* evita zoom automático no iOS */
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}

.mapa-presenca-app input[type="text"]::placeholder,
.mapa-presenca-app .mp-textarea::placeholder {
  color: #5d5950;
}

.mapa-presenca-app input[type="text"]:focus,
.mapa-presenca-app .mp-textarea:focus {
  outline: none;
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 4px rgba(201, 162, 75, .15);
}

.mapa-presenca-app .mp-textarea {
  resize: vertical;
  min-height: 110px;
}

/* Escolha de tratamento */
.mapa-presenca-app .choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mapa-presenca-app .choice-row label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 56px;
  padding: 14px 16px;
  font-weight: 500;
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: #0c0c0c;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  user-select: none;
}

.mapa-presenca-app .choice-row label:has(input:checked) {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
  color: var(--mp-accent-light);
}

.mapa-presenca-app .choice-row input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #6a655a;
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .2s;
}

.mapa-presenca-app .choice-row input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mp-accent);
  transform: scale(0);
  transition: transform .18s ease;
}

.mapa-presenca-app .choice-row input[type="radio"]:checked {
  border-color: var(--mp-accent);
}

.mapa-presenca-app .choice-row input[type="radio"]:checked::before {
  transform: scale(1);
}

.mapa-presenca-app .choice-row input[type="radio"]:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 3px;
}

/* Régua 0–10 */
.mapa-presenca-app .mp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
  margin: 4px 0;
}

.mapa-presenca-app .mp-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mp-accent-deep), var(--mp-accent), var(--mp-accent-light));
}

.mapa-presenca-app .mp-range::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mp-accent-deep), var(--mp-accent), var(--mp-accent-light));
}

.mapa-presenca-app .mp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid var(--mp-accent);
  box-shadow: 0 0 0 5px rgba(201, 162, 75, .15);
}

.mapa-presenca-app .mp-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid var(--mp-accent);
  box-shadow: 0 0 0 5px rgba(201, 162, 75, .15);
}

.mapa-presenca-app .mp-range:focus-visible {
  outline: none;
}

.mapa-presenca-app .mp-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(201, 162, 75, .35);
}

.mapa-presenca-app #recognitionValue {
  color: var(--mp-accent-light);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Botões ---------- */

.mapa-presenca-app button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 14px 28px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  background: var(--mp-gold-gradient);
  color: #0a0a0a;
  box-shadow: 0 10px 30px rgba(201, 162, 75, .22);
  transition: transform .15s ease, box-shadow .2s, background .2s, border-color .2s, color .2s, opacity .2s;
  touch-action: manipulation;
}

.mapa-presenca-app button:active:not(:disabled) {
  transform: scale(.98);
}

.mapa-presenca-app button:focus-visible {
  outline: 2px solid var(--mp-accent-light);
  outline-offset: 3px;
}

.mapa-presenca-app button.secondary {
  background: transparent;
  color: var(--mp-ink);
  border-color: var(--mp-line-strong);
  box-shadow: none;
}

.mapa-presenca-app button:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

@media (hover: hover) {
  .mapa-presenca-app button:hover:not(:disabled) {
    box-shadow: 0 14px 38px rgba(201, 162, 75, .35);
  }
  .mapa-presenca-app button.secondary:hover:not(:disabled) {
    border-color: var(--mp-accent);
    color: var(--mp-accent-light);
    box-shadow: none;
  }
}

.mapa-presenca-app #startBtn {
  margin-top: 12px;
  min-width: 220px;
}

/* ---------- Questionário ---------- */

.mapa-presenca-app .qcount {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mp-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mapa-presenca-app .progress {
  height: 3px;
  background: var(--mp-line);
  border-radius: 99px;
  overflow: hidden;
  margin: 14px 0 34px;
}

.mapa-presenca-app .progress > div {
  height: 100%;
  background: var(--mp-gold-gradient);
  width: 0;
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(201, 162, 75, .6);
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}

.mapa-presenca-app .question {
  font-family: var(--mp-serif);
  font-size: clamp(1.6rem, 4.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 30px;
  min-height: 2.5em;
  color: var(--mp-ink);
}

.mapa-presenca-app .scale {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mapa-presenca-app .scale button {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px 14px 56px;
  text-align: left;
  border-radius: var(--mp-radius-sm);
  background: #0e0e0e;
  color: var(--mp-ink-soft);
  border: 1px solid var(--mp-line-strong);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.35;
  box-shadow: none;
  animation: mp-fade .35s ease both;
}

.mapa-presenca-app .scale button:nth-child(2) { animation-delay: .03s; }
.mapa-presenca-app .scale button:nth-child(3) { animation-delay: .06s; }
.mapa-presenca-app .scale button:nth-child(4) { animation-delay: .09s; }
.mapa-presenca-app .scale button:nth-child(5) { animation-delay: .12s; }

/* indicador circular à esquerda */
.mapa-presenca-app .scale button::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 1.5px solid #5d5950;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

/* toque: retorno imediato enquanto o dedo está na opção */
.mapa-presenca-app .scale button:active {
  background: var(--mp-accent-soft);
  border-color: var(--mp-accent);
  color: var(--mp-accent-light);
}

/* opção marcada: botão dourado com ✓ */
.mapa-presenca-app .scale button.selected {
  background: var(--mp-gold-gradient);
  border-color: var(--mp-accent-light);
  color: #0a0a0a;
  font-weight: 650;
  box-shadow: 0 8px 26px rgba(201, 162, 75, .4);
}

.mapa-presenca-app .scale button.selected::before {
  content: "✓";
  display: grid;
  place-content: center;
  border-color: #0a0a0a;
  background: #0a0a0a;
  color: var(--mp-accent-light);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.mapa-presenca-app .scale button.just-picked {
  animation: mp-pick .42s cubic-bezier(.2, .7, .2, 1) both;
}

.mapa-presenca-app .scale button.just-picked::before {
  animation: mp-check .3s cubic-bezier(.22, 1, .36, 1) both;
}

/* evita que um toque duplo pule uma afirmação */
.mapa-presenca-app .scale.is-answering button {
  pointer-events: none;
}

.mapa-presenca-app .scale.is-answering button:not(.selected) {
  opacity: .45;
  transition: opacity .2s;
}

@keyframes mp-pick {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 75, .7); }
  35%  { transform: scale(1.025); }
  100% { transform: scale(1); box-shadow: 0 8px 26px rgba(201, 162, 75, .4), 0 0 0 10px rgba(201, 162, 75, 0); }
}

@keyframes mp-check {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@media (hover: hover) {
  .mapa-presenca-app .scale button:not(.selected):hover {
    border-color: var(--mp-accent-deep);
    color: var(--mp-ink);
    background: #141310;
    box-shadow: none;
  }
  .mapa-presenca-app .scale button:not(.selected):hover::before {
    border-color: var(--mp-accent);
  }
}

/* Os rótulos já aparecem em cada opção */
.mapa-presenca-app .scale-labels {
  display: none;
}

.mapa-presenca-app .nav,
.mapa-presenca-app .actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.mapa-presenca-app .nav {
  padding-top: 22px;
  border-top: 1px solid var(--mp-line);
}

.mapa-presenca-app .nav button {
  min-height: 46px;
  padding: 10px 20px;
  font-size: .88rem;
}

/* ---------- Relatório ---------- */

.mapa-presenca-app .report section {
  padding: 40px 0;
  border-bottom: 1px solid var(--mp-line);
}

.mapa-presenca-app .report section:last-child {
  border-bottom: 0;
}

.mapa-presenca-app #reportContent > .lead {
  margin-top: 1em;
}

.mapa-presenca-app #reportContent > section:first-of-type {
  margin-top: 24px;
  border-top: 1px solid var(--mp-line);
}

.mapa-presenca-app .quote {
  position: relative;
  border-left: 2px solid var(--mp-accent);
  padding: 6px 0 6px 20px;
  font-family: var(--mp-serif);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mp-ink-soft);
  margin: 26px 0 0;
}

.mapa-presenca-app .pill {
  display: inline-block;
  padding: 5px 11px;
  background: var(--mp-accent-soft);
  color: var(--mp-accent-light);
  border: 1px solid rgba(201, 162, 75, .3);
  border-radius: 99px;
  font-size: .8rem;
  margin: 3px 3px 3px 0;
}

.mapa-presenca-app .path,
.mapa-presenca-app .result-block,
.mapa-presenca-app .resource-item {
  position: relative;
  padding: 22px 24px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 16px;
  margin: 14px 0;
  background: #0e0e0e;
}

.mapa-presenca-app .resource-item {
  border-top: 2px solid var(--mp-accent);
}

.mapa-presenca-app .path h3,
.mapa-presenca-app .resource-item h3 {
  margin: 0 0 10px;
  font-family: var(--mp-serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mp-accent-light);
}

.mapa-presenca-app .path p:first-of-type,
.mapa-presenca-app .result-block p:first-of-type {
  margin-top: 0;
}

.mapa-presenca-app .path p:last-child,
.mapa-presenca-app .result-block p:last-child {
  margin-bottom: 0;
}

.mapa-presenca-app .path p,
.mapa-presenca-app .result-block p,
.mapa-presenca-app .resource-row span {
  color: var(--mp-ink-soft);
}

.mapa-presenca-app .result-kicker {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.mapa-presenca-app .resource-list {
  display: grid;
  gap: 14px;
}

.mapa-presenca-app .resource-list .resource-item {
  margin: 0;
}

.mapa-presenca-app .resource-row {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--mp-line);
}

.mapa-presenca-app .resource-row:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.mapa-presenca-app .resource-row:last-child {
  padding-bottom: 0;
}

.mapa-presenca-app .resource-row strong {
  display: block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-accent);
  margin: 0 0 4px;
}

.mapa-presenca-app .resource-row span {
  display: block;
}

.mapa-presenca-app .note-box {
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 162, 75, .16), rgba(201, 162, 75, .04));
  border: 1px solid rgba(201, 162, 75, .35);
  color: var(--mp-ink);
  margin: 20px 0 0;
}

.mapa-presenca-app .note-box strong {
  color: var(--mp-accent-light);
}

/* Feedback do piloto */
.mapa-presenca-app #pilotFeedback {
  margin-top: 8px;
  padding: 32px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 18px;
  background: #0c0c0c;
}

.mapa-presenca-app #pilotFeedback h2 {
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
}

.mapa-presenca-app #feedbackSubmitBtn {
  margin-top: 4px;
}

.mapa-presenca-app .report .actions {
  margin-top: 28px;
}

/* ---------- Animações ---------- */

@keyframes mp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mp-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-presenca-app *,
  .mapa-presenca-app *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 860px) {
  .mapa-presenca-app .wrap { padding: 28px 18px 44px; }
  .mapa-presenca-app .card { padding: 40px 34px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .mapa-presenca-app .wrap {
    padding: 0 0 env(safe-area-inset-bottom);
  }

  /* card ocupa a tela inteira, sem moldura */
  .mapa-presenca-app .card {
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: calc(28px + env(safe-area-inset-top)) 20px 28px;
    background: transparent;
    box-shadow: none;
  }

  .mapa-presenca-app .card::before {
    left: 0;
    right: 0;
  }

  .mapa-presenca-app h1 { font-size: 2.35rem; }
  .mapa-presenca-app #reportContent > h1 { font-size: 2.2rem; }

  .mapa-presenca-app .mp-meta li {
    font-size: .78rem;
    padding: 7px 12px;
  }

  .mapa-presenca-app #startBtn {
    width: 100%;
  }

  /* Questionário: opções em coluna, navegação fixa no rodapé */
  .mapa-presenca-app #quiz {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .mapa-presenca-app .progress {
    margin-bottom: 26px;
  }

  .mapa-presenca-app .question {
    font-size: 1.65rem;
    min-height: 0;
    margin-bottom: 24px;
  }

  .mapa-presenca-app .scale button {
    min-height: 60px;
    font-size: 1rem;
  }

  .mapa-presenca-app #quiz .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    background: rgba(10, 10, 10, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--mp-line);
  }

  .mapa-presenca-app #quiz .nav button {
    min-height: 48px;
    padding: 10px 16px;
    font-size: .86rem;
  }

  /* Relatório */
  .mapa-presenca-app .report section {
    padding: 32px 0;
  }

  .mapa-presenca-app .path,
  .mapa-presenca-app .result-block,
  .mapa-presenca-app .resource-item {
    padding: 18px;
    border-radius: 14px;
  }

  .mapa-presenca-app .path h3,
  .mapa-presenca-app .resource-item h3 {
    font-size: 1.3rem;
  }

  .mapa-presenca-app .quote {
    font-size: 1.1rem;
    padding-left: 16px;
  }

  .mapa-presenca-app #pilotFeedback {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .mapa-presenca-app #feedbackSubmitBtn {
    width: 100%;
  }

  .mapa-presenca-app .report .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mapa-presenca-app .report .actions button {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    font-size: .86rem;
  }

  .mapa-presenca-app .report .actions button:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .mapa-presenca-app .card { padding-left: 16px; padding-right: 16px; }
  .mapa-presenca-app h1 { font-size: 2.05rem; }
  .mapa-presenca-app .question { font-size: 1.45rem; }
  .mapa-presenca-app .choice-row { grid-template-columns: 1fr; }
  .mapa-presenca-app .report .actions { grid-template-columns: 1fr; }
  .mapa-presenca-app #quiz .nav button { font-size: .8rem; padding: 10px 12px; }
}

/* ---------- Impressão / PDF (fundo branco para economizar tinta) ---------- */

@media print {
  .mapa-presenca-app {
    --mp-ink: #111;
    --mp-ink-soft: #2b2b2b;
    --mp-muted: #555;
    --mp-line: #ddd;
    --mp-line-strong: #ccc;
    --mp-accent: #8c6d28;
    --mp-accent-light: #6e5520;
    background: #fff !important;
    color: #111;
  }
  .mapa-presenca-app .wrap {
    max-width: none;
    padding: 0;
  }
  .mapa-presenca-app .card {
    border: 0;
    box-shadow: none;
    background: #fff;
    padding: 0;
    min-height: 0;
    animation: none;
  }
  .mapa-presenca-app .card::before {
    display: none;
  }
  .mapa-presenca-app #reportContent > h1 {
    color: #6e5520;
  }
  .mapa-presenca-app .path,
  .mapa-presenca-app .result-block,
  .mapa-presenca-app .resource-item,
  .mapa-presenca-app .note-box {
    background: #fff;
    break-inside: avoid;
  }
  .mapa-presenca-app .actions,
  .mapa-presenca-app .start-only,
  .mapa-presenca-app #pilotFeedback {
    display: none !important;
  }
}