/* VERA Escudo — interface para 55+.
   Regras que valem mais que estilo aqui:
   corpo >= 18px, alvo de toque >= 48px, contraste >= 4.5:1,
   uma acao principal por tela, cor nunca sozinha como sinal. */

:root{
  --fundo:#f7f5f1;
  --papel:#ffffff;
  --tinta:#14181d;
  --tinta-fraca:#4a5560;
  --borda:#d6d2cb;
  --marca:#123a5e;
  --marca-clara:#1d5486;
  --destaque:#f0b429;
  --vermelho:#b3261e;
  --vermelho-fundo:#fdeceb;
  --amarelo:#8a6100;
  --amarelo-fundo:#fdf5e2;
  --verde:#1c6b3c;
  --verde-fundo:#e9f5ed;
  --raio:12px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--fundo);
  color:var(--tinta);
  font:19px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding:0 0 64px;
}

.tela{max-width:560px;margin:0 auto;padding:24px 20px}

.topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 8px;
}
.marca{
  font-size:1.6rem;font-weight:800;letter-spacing:.14em;
  color:var(--marca);margin:0;
}
.sair{
  background:none;border:none;color:var(--tinta-fraca);
  font-size:1rem;text-decoration:underline;cursor:pointer;
  min-height:48px;padding:0 4px;
}

h1{font-size:1.5rem;line-height:1.35;margin:8px 0 16px}
p{margin:0 0 16px}
.ajuda{color:var(--tinta-fraca);font-size:1rem;line-height:1.5}

label{display:block;font-weight:700;margin:0 0 8px;font-size:1.05rem}

input[type=email],
input[type=text],
textarea{
  width:100%;
  font:inherit;
  font-size:1.15rem;
  color:var(--tinta);
  background:var(--papel);
  border:2px solid var(--borda);
  border-radius:var(--raio);
  padding:16px;
  min-height:56px;
}
textarea{min-height:150px;resize:vertical}

input:focus,textarea:focus,button:focus{
  outline:3px solid var(--marca-clara);
  outline-offset:2px;
}

#codigo{
  font-size:2rem;
  letter-spacing:.5em;
  text-align:center;
  font-weight:700;
  padding-left:.5em; /* compensa o letter-spacing do ultimo caractere */
}

.botao{
  display:block;width:100%;
  min-height:60px;
  font:inherit;font-size:1.15rem;font-weight:800;
  letter-spacing:.03em;
  color:#fff;background:var(--marca);
  border:none;border-radius:var(--raio);
  padding:16px;margin:16px 0 0;
  cursor:pointer;
}
.botao:hover{background:var(--marca-clara)}
.botao[disabled]{opacity:.6;cursor:default}

.botao-2{
  background:var(--papel);
  color:var(--marca);
  border:2px solid var(--marca);
}
.botao-2:hover{background:#eef3f8}

.recado{
  border-radius:var(--raio);
  padding:14px 16px;margin:16px 0 0;
  font-size:1.05rem;
  border:2px solid transparent;
}
.recado-erro{background:var(--vermelho-fundo);border-color:var(--vermelho);color:var(--vermelho)}
.recado-ok{background:var(--verde-fundo);border-color:var(--verde);color:var(--verde)}

.escondido{display:none !important}

/* ---- resultado ---- */

.cartao{
  background:var(--papel);
  border:2px solid var(--borda);
  border-radius:var(--raio);
  padding:20px;margin:0 0 20px;
}

.veredito{
  border-radius:var(--raio);
  padding:22px 20px;
  margin:0 0 20px;
  border:3px solid;
}
/* A cor nunca e o unico sinal: a palavra vem sempre junto. */
.veredito h2{
  margin:0;font-size:1.9rem;line-height:1.2;
  display:flex;align-items:center;gap:12px;
}
.veredito .sinal{font-size:2rem;line-height:1}

.v-golpe{background:var(--vermelho-fundo);border-color:var(--vermelho);color:var(--vermelho)}
.v-suspeito{background:var(--amarelo-fundo);border-color:var(--amarelo);color:var(--amarelo)}
.v-legitimo{background:var(--verde-fundo);border-color:var(--verde);color:var(--verde)}

.ouvir{
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;
  font:inherit;font-size:1.1rem;font-weight:700;
  background:var(--destaque);color:#14181d;
  border:none;border-radius:var(--raio);
  padding:14px 24px;margin:16px 0 0;cursor:pointer;
}
.ouvir:hover{filter:brightness(.95)}

h3.rotulo{
  font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-fraca);margin:0 0 12px;
}

ol.motivos,ul.acoes{margin:0;padding-left:26px}
ol.motivos li,ul.acoes li{margin-bottom:12px}

.emergencia{
  background:var(--vermelho-fundo);
  border:3px solid var(--vermelho);
  border-radius:var(--raio);
  padding:20px;margin:0 0 20px;
}
.emergencia h3{color:var(--vermelho);margin:0 0 12px;font-size:1.2rem}

.rodape{
  text-align:center;color:var(--tinta-fraca);
  font-size:.95rem;margin-top:32px;line-height:1.5;
}

@media (max-width:400px){
  body{font-size:18px}
  .tela{padding:20px 16px}
  .veredito h2{font-size:1.6rem}
}