/* ============================================
   DIAGNÓSTICO WVC — COMPONENTES DO RESPONDENTE
   Identidade oficial (Manual IDV). Consome só os tokens de tokens.css
   (cópia do site institucional); nenhuma cor literal e nenhum :root aqui.
   Carregado depois de base.css e styles.css (cópias do site, nunca editadas):
   neutraliza o que colide (.hero, .container, .card, reset global, links) e
   reconstrói o que o site não tem (formulários, Likert, progress-bar, wizard).
   [Source: docs/stories/3.9.story.md#AC3, #AC4, #AC7]

   Contraste (WCAG 2.1 AA) — pares de texto/fundo usados neste arquivo:
     grafite  / branco ........ 14,66   grafite  / branco-quente .. 13,23
     grafite  / laranja ....... 4,79    branco   / laranja-escuro . 4,78
     azul-petroleo / branco ... 12,04   azul-petroleo / branco-quente 10,86
     azul-petroleo / laranja-claro 11,45   grafite / laranja-claro . 13,95
     branco-quente / azul-profundo 13,47
   Proibido: laranja puro como texto sobre claro (3,06) e laranja-escuro como
   texto sobre branco-quente (4,31). Laranja só em fundo de botão (texto
   grafite), borda e barra lateral — nunca como único indicador. */

/* ---------- Tipografia e links (o reset do site zera margens e sublinhado) ---------- */
h1,
h2,
h3 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--azul-petroleo);
  margin: 0 0 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--azul-petroleo);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--azul-profundo);
}

/* ---------- Foco visível em todos os controles ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--azul-petroleo);
  outline-offset: 2px;
}

/* ---------- Layout da página ---------- */
.container.page {
  max-width: 60rem;
  padding-block: 2rem;
}

/* ---------- Hero (anula o hero de home do site: 100vh, flex, gradiente próprio) ---------- */
.hero {
  display: block;
  min-height: 0;
  overflow: visible;
  background: var(--gradient-dark);
  color: var(--branco-quente);
  padding: 3rem 0;
  text-align: center;
}

.hero h1,
.hero p {
  color: var(--branco-quente);
}

.hero a:focus-visible {
  outline-color: var(--branco-quente);
}

.hero__headline {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

.hero__promessa {
  max-width: 44rem;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---------- Card (neutraliza a elevação ao passar o mouse: aqui é formulário) ---------- */
.card {
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.card:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* ---------- Botões ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.button--primary {
  background: var(--laranja);
  color: var(--grafite);
}

.button--primary:hover {
  background: var(--laranja-escuro);
  color: var(--branco);
  transform: translateY(-2px);
  box-shadow: var(--shadow-laranja);
}

.button--secondary {
  background: transparent;
  border-color: var(--azul-petroleo);
  color: var(--azul-petroleo);
}

.button--secondary:hover {
  background: var(--azul-petroleo);
  color: var(--branco);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hero .button--secondary {
  border-color: var(--branco-quente);
  color: var(--branco-quente);
}

/* ---------- Campos e formulários ---------- */
.field {
  margin-bottom: 1.5rem;
}

.field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--grafite);
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='number'],
.field input[type='date'],
.field select,
.open-question__textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--azul-petroleo);
  border-radius: var(--radius-btn);
  background: var(--branco);
  color: var(--grafite);
  font-family: inherit;
  font-size: 1rem;
}

fieldset.field--radio-group {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.field-legend {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0;
  font-weight: 600;
  color: var(--grafite);
}

.field--radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-weight: 400;
}

.field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
}

.field--checkbox input[type='checkbox'] {
  margin-top: 0.2em;
}

input[type='radio'],
input[type='checkbox'] {
  accent-color: var(--azul-petroleo);
}

/* Erros e avisos: texto grafite + barra lateral (não depende só de cor) */
.field-error,
.feedback {
  border-left: 4px solid var(--laranja-escuro);
  padding-left: 0.75rem;
  color: var(--grafite);
  font-weight: 600;
}

.field-error {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.feedback {
  margin-top: 1rem;
}

.field-error:empty,
.feedback:empty {
  display: none;
}

.feedback--info {
  border-left-color: var(--azul-petroleo);
  font-weight: 400;
}

/* ---------- Escala Likert ancorada (mobile-first: cartões em coluna) ---------- */
.likert-item {
  border: none;
  padding: 0;
  margin: 0 0 2rem;
}

.likert-item__statement {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--azul-petroleo);
}

.likert-item__reverse-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--laranja);
  border-radius: var(--radius-btn);
  background: var(--laranja-claro);
  color: var(--grafite);
  font-size: 0.875rem;
}

.likert-item__reverse-icon {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--azul-petroleo);
}

.likert-item__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.likert-item__option {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 1rem;
  border: 1px solid var(--cinza-claro);
  border-radius: var(--radius-btn);
  background: var(--branco);
  color: var(--grafite);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background-color 200ms ease;
}

.likert-item__option:hover {
  border-color: var(--azul-petroleo);
}

.likert-item__option:has(.likert-item__input:checked) {
  border-color: var(--azul-petroleo);
  background: var(--laranja-claro);
  box-shadow: inset 0 0 0 1px var(--azul-petroleo);
}

.likert-item__option:has(.likert-item__input:focus-visible) {
  outline: 3px solid var(--azul-petroleo);
  outline-offset: 2px;
}

.likert-item__input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

.likert-item__option-anchor {
  font-size: 1rem;
  line-height: 1.4;
}

/* ---------- Barra de progresso (a largura do preenchimento vem do JS) ---------- */
.progress-bar {
  margin-bottom: 2rem;
}

.progress-bar__track {
  height: 0.5rem;
  border-radius: var(--radius-btn);
  background: var(--cinza-claro);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--azul-petroleo);
  transition: width 200ms ease;
}

.progress-bar__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--azul-petroleo);
}

/* ---------- Navegação do wizard e perguntas abertas ---------- */
.wizard-screen__block-label {
  margin: 0 0 1rem;
  font-family: var(--font-title);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul-petroleo);
}

.wizard-screen__item-slot {
  margin-bottom: 1rem;
}

.wizard-screen__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.wizard-screen__next {
  margin-left: auto;
}

.open-question__statement {
  margin: 0 0 1rem;
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--azul-petroleo);
}

.open-question__textarea {
  max-width: 40rem;
  min-height: 8rem;
  resize: vertical;
}

/* ---------- Verificação de e-mail / OTP (Story 6.3 — otp.html, js/otp.js) ---------- */
.otp-card {
  max-width: 32rem;
  margin-inline: auto;
}

.otp-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.field input.otp-input {
  max-width: 14rem;
  padding-inline: 0.75rem;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.field input[aria-invalid='true'] {
  border-color: var(--laranja-escuro);
  box-shadow: inset 0 0 0 1px var(--laranja-escuro);
}

.field input:disabled {
  background: var(--cinza-claro);
  cursor: not-allowed;
}

.field-hint {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--grafite);
}

/* Mobile-first: ações empilhadas em largura total; lado a lado a partir de 480px. */
.otp-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 30rem) {
  .otp-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- Tablet (>= 768px) ---------- */
@media (min-width: 48rem) {
  .hero {
    padding: 4rem 0;
  }

  .hero__headline {
    font-size: 2.5rem;
  }

  .card {
    padding: 2rem;
  }
}

/* ---------- Desktop (>= 1024px): Likert em linha horizontal (Story 3.2 AC3) ---------- */
@media (min-width: 64rem) {
  .likert-item__options {
    flex-direction: row;
    justify-content: space-between;
  }

  .likert-item__option {
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .button,
  .likert-item__option,
  .progress-bar__fill {
    transition: none;
  }

  .button--primary:hover {
    transform: none;
  }
}