/* Mesmo visual do Quiz da Convivência (Tailwind): fundo branco, verde-600, bordas cinza,
   cantos rounded-xl, rótulos pequenos em maiúsculas, coluna estreita. Sem fonte externa. */
:root {
  --verde-50: #f0fdf4; --verde-400: #4ade80; --verde-500: #22c55e; --verde-600: #16a34a; --verde-700: #15803d;
  --ambar-400: #fbbf24; --ambar-600: #d97706; --vermelho-500: #ef4444;
  --cinza-50: #f9fafb; --cinza-100: #f3f4f6; --cinza-200: #e5e7eb; --cinza-400: #9ca3af;
  --cinza-500: #6b7280; --cinza-700: #374151; --cinza-800: #1f2937; --cinza-900: #111827;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: #fff; color: var(--cinza-800); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* ícones Lucide: traço herdado da cor do texto */
.ic { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marca .ic { width: 1.25rem; height: 1.25rem; }
.pagina { max-width: 28rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.larga { max-width: 56rem; }
.pilha > * + * { margin-top: 1.25rem; }
.pilha-sm > * + * { margin-top: .5rem; }

/* cabeçalho */
.marca { display: flex; align-items: center; gap: .5rem; color: var(--verde-600); }
.marca p { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
h1 { font-size: 1.875rem; line-height: 1.2; font-weight: 700; color: var(--cinza-900); margin-top: .75rem; }
.sub { font-size: .875rem; color: var(--cinza-500); margin-top: .75rem; }
.escola { font-size: .75rem; color: var(--cinza-400); margin-top: .25rem; }

/* aviso (estilo "nova informação" do quiz) */
.aviso { display: flex; gap: .75rem; align-items: flex-start; border-left: 2px solid var(--ambar-400); padding-left: 1rem; font-size: .875rem; line-height: 1.6; color: var(--cinza-800); }
.aviso .ic { color: var(--ambar-600); margin-top: .2rem; }
.aviso strong { color: var(--ambar-600); }

/* seções */
.secao { border-top: 1px solid var(--cinza-100); padding-top: 1.5rem; margin-top: 2rem; }
.rotulo-secao { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--verde-600); }
.ajuda { font-size: .75rem; color: var(--cinza-400); margin-top: .25rem; }
.campo > label, .campo > .pergunta { display: block; font-size: .875rem; font-weight: 500; color: var(--cinza-800); margin-bottom: .5rem; }
.opcional { font-weight: 400; font-size: .75rem; color: var(--cinza-400); margin-left: .25rem; }
.obrigatorio { color: var(--vermelho-500); margin-left: .125rem; }

input[type=text], textarea, input[type=password] {
  width: 100%; border: 1px solid var(--cinza-200); border-radius: .75rem; padding: .75rem 1rem;
  font: inherit; font-size: .875rem; color: var(--cinza-900); background: #fff; outline: none; transition: box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--cinza-400); }
input:focus, textarea:focus { box-shadow: 0 0 0 2px var(--verde-500); border-color: transparent; }
textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
textarea.curta { min-height: 5.5rem; }

/* alternativas (mesmo desenho das alternativas do quiz) */
.opcoes { display: flex; flex-direction: column; gap: .5rem; }
.opcoes.duas { display: grid; grid-template-columns: 1fr 1fr; }
.opcao {
  position: relative; display: flex; align-items: center; gap: .75rem; border: 1px solid var(--cinza-200); border-radius: .75rem;
  padding: .875rem 1rem; font-size: .875rem; color: var(--cinza-700); cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.opcao:hover { border-color: var(--verde-400); background: var(--verde-50); }
.opcao:active { transform: scale(.98); }
.opcao .ic { color: var(--cinza-400); transition: color .15s; }
.opcao:hover .ic, .opcao:has(input:checked) .ic { color: var(--verde-600); }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--verde-500); background: var(--verde-50); color: var(--verde-700); font-weight: 600; }
.opcao:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--verde-500); }

.condicional { border-left: 2px solid var(--verde-500); padding-left: 1rem; margin-top: 1rem; }

/* botões */
.btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: .75rem; padding: .875rem 1rem; font: inherit; font-size: .875rem;
  font-weight: 600; letter-spacing: .025em; color: #fff; background: var(--verde-600); cursor: pointer; transition: background-color .15s, transform .15s;
}
.btn:hover { background: var(--verde-700); }
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-sec { background: #fff; color: var(--cinza-700); border: 1px solid var(--cinza-200); }
.btn-sec:hover { background: var(--cinza-50); }
.btn-inline { width: auto; display: inline-flex; padding: .625rem 1rem; }
.erro { color: var(--vermelho-500); font-size: .75rem; }
.rodape p { display: flex; gap: .5rem; align-items: flex-start; }
.rodape p + p { margin-top: .5rem; }
.rodape .ic { margin-top: .15rem; }
.rodape { font-size: .75rem; color: var(--cinza-400); line-height: 1.6; margin-top: 2rem; }

/* sucesso */
.sucesso h2 { font-size: 1.5rem; font-weight: 700; color: var(--cinza-900); }
.sucesso p { font-size: .875rem; color: var(--cinza-500); margin-top: .75rem; }

/* painel */
.barra { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cartao { border: 1px solid var(--cinza-200); border-radius: .75rem; padding: 1.25rem; }
.cartao.urgente { border-left: 2px solid var(--vermelho-500); }
.cartao h3 { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--cinza-900); }
.etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.etiqueta { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--cinza-500); border: 1px solid var(--cinza-100); border-radius: .5rem; padding: .125rem .5rem; }
.etiqueta .ic { width: .875rem; height: .875rem; }
.etiqueta.urg { color: var(--vermelho-500); border-color: var(--vermelho-500); font-weight: 600; }
.texto-relato { font-size: .875rem; line-height: 1.6; color: var(--cinza-800); margin-top: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.par { font-size: .75rem; color: var(--cinza-500); margin-top: .5rem; overflow-wrap: anywhere; }
.par b { color: var(--cinza-700); font-weight: 600; }

/* utilitários (o CSP proíbe style="" inline) */
.topo { margin-top: 1.75rem; }
.envio { margin-top: 2rem; }
.envio .erro { margin-bottom: .75rem; }
.nota-opcao { font-weight: 400; font-size: .75rem; color: var(--cinza-500); }
.login { max-width: 24rem; margin: 4rem auto 0; }
.justo { margin-top: .25rem; }
.botoes { display: flex; gap: .5rem; }