/* =========================
   ESTILOS GERAIS / LAYOUT
   ========================= */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; overflow-x: hidden; }

/* Gutter lateral */
:root{
  --gutter: clamp(12px, 4vw, 20px);
}

/* Body com gradiente e coluna (rodapé gruda no fim) */
body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--gutter);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0286ff 0%, #22a6ff 35%, #94d8ff 75%, #eaf4ff 100%);
  background-attachment: fixed;
}

h1, h2, h3 { text-align: center; margin: 0 0 14px 0; }

/* =========================
   COMPONENTES
   ========================= */

input, textarea, button {
  width: 100%;
  max-width: 420px;
  margin: 10px auto;
  padding: 12px;
  font-size: 16px;
  display: block;
}
input[type="range"] {
  width: 100%;
  max-width: 500px;
  margin: 6px auto 12px;
  display: block;
}
canvas {
  margin: 20px auto;
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 1px solid #ccc;
  display: block;
  background: #fff;
}

/* Faixa full-bleed */
.faixa-secao{
  margin: 16px calc(var(--gutter) * -1);
  padding: 12px var(--gutter);
  background-color: #00BFFF;
  text-align: center;
}
.faixa-secao span{ color: #fff; font-size: 22px; font-weight: bold; }

.hint { font-size: 13px; color: #444; margin-bottom: 10px; text-align: center; }

/* Link "Voltar" topo */
.link-voltar{
  display:block; width:100%; max-width:520px; margin:8px auto 16px;
  text-align:center; color:#ffffff; font-size:14px; text-decoration:none;
}
.link-voltar:hover{ text-decoration:underline; }

#mensagem{ margin-top:10px; font-weight:bold; text-align:center; }

@media (min-width:768px){
  input, textarea, button, .link-voltar{ max-width:520px; }
  canvas{ max-width:640px; }
}

/* Aviso etapa 5 */
#avisoTexto{
  color:#d93025; font-size:13px; margin:10px auto; text-align:center;
  display:none; max-width:600px;
}

/* Rótulos */
.title-label{
  display:block; font-weight:700; color:#111; text-align:center;
  font-size:16px; margin:16px auto 6px;
}

/* O selo da plaquinha */
.plaquinha {
  display:inline-block;
  padding:.3em .8em;
  background:#ffd400;            /* amarelo */
  border:6px solid #000;         /* contorno preto */
  border-radius:6px;
  color:#111;
  font:700 clamp(24px, 4vw, 46px)/1.1 "Comic Relief", Arial, sans-serif;
  box-shadow:-7px 7px 0 #000;
  position:relative;
  z-index:1;

  /* ADICIONE ESTAS LINHAS 👇 */
  white-space: nowrap;    /* força tudo numa linha só */
  text-align: left;       /* texto alinhado à esquerda */
}


/* Wizard */
.step{ display:none; }
.step.active{ display:block; }
#wizard-indicator{ text-align:center; font-size:14px; margin:8px 0 0; color:#333; }

/* Navegação */
.button-row{
  display:flex; justify-content:center; align-items:center; gap:16px;
  margin:20px auto 0; width:100%; max-width:520px;
}
.btn-nav{ width:auto; min-width:160px; padding:10px 16px; border-radius:6px; border:none; font-weight:600; cursor:pointer; }
.btn-voltar{ background:#ddd; color:#333; }
.btn-proximo{ background:#4dafff; color:#fff; }
.btn-proximo:disabled{ background:#aacfff; cursor:not-allowed; }

/* Download */
.btn-download{
  background:#28a745; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:bold;
  padding:10px 16px; width:260px; display:block; margin:20px auto;
}

/* Campo inválido */
.invalid{ outline:2px solid #ff4d4f; border-color:#ff4d4f!important; background:#fff7f7; }

/* Intro */
.intro-box{
  max-width:720px; margin:24px auto 0; background:#fff; border:1px solid #d9e7ff;
  border-radius:12px; padding:18px; box-shadow:0 6px 14px rgba(0,0,0,.04);
}
.intro-box h2{ margin-top:4px; }
.intro-box p{ line-height:1.5; margin:10px 0; color:#333; font-size:15px; text-align:left; }

/* Erro inline */
.inline-error{ color:#d93025; font-size:13px; text-align:center; margin-top:-6px; margin-bottom:8px; display:none; }

/* Revisão */
.review-box{
  max-width:720px; margin:12px auto 0; background:#fff; border:1px solid #d9e7ff;
  border-radius:12px; padding:16px 18px; box-shadow:0 6px 14px rgba(0,0,0,0.04); text-align:center;
}
.review-item{ margin:12px 0; }
.review-label{ font-weight:700; display:block; margin-bottom:4px; }
.review-value{ white-space:pre-wrap; color:#333; }

/* Tela final */
.final-screen{ display:none; }
.final-card{
  max-width:720px; margin:24px auto 0; background:#fff; border:1px solid #d9e7ff;
  border-radius:12px; padding:18px; box-shadow:0 6px 14px rgba(0,0,0,0.04); text-align:center;
}
.btn-menu{
  background:#505bda; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600;
  padding:10px 16px; width:260px; display:block; margin:10px auto 0;
}

/* Overlay de envio (wizard) */
#overlay{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background-color:rgba(255,255,255,0.85); z-index:9999; justify-content:center; align-items:center; font-weight:bold;
}
.loader{ text-align:center; }
.loader-gif{ width:80px; height:80px; display:block; margin:0 auto 12px; }
.loader-text{ font-size:20px; color:#000; }

/* =========================
   ESTRUTURA DE PÁGINA
   ========================= */

/* Wrapper central */
.page-center{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:24px 0;
}

/* Logo */
.header-logo{ display:block; width:clamp(160px, 50vw, 280px); height:auto; margin:0 auto 8px; }

/* Largura dos blocos (NÃO inclui o overlay) */
#login-area, #menu{ width:100%; max-width:420px; }



/* ===== Overlay de loading do INDEX ===== */
#loading{
  position:fixed;
  inset:0;
  width:100svw;           /* viewport real em mobile */
  height:100svh;
  max-width:none !important;   /* impede travar em 420px */
  display:none;                /* o JS liga/desliga */
 place-items: start center;          /* centraliza quando vira grid */
  background:rgba(0,0,0,.35);
  z-index:10000;
}
#loading .loading-bubble{
  margin:0;
  padding:12px 16px;
  background:#fff;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  color:#000;
}

#observacao::placeholder { color:#777; }
#observacao:focus::placeholder { opacity:0; }

/* =========================
   RODAPÉ FULL-BLEED
   ========================= */
.site-footer{
  margin:24px calc(var(--gutter) * -1) 0;
  background:#083a63;
  color:#fff;
}
.site-footer .footer-inner{
  max-width:1200px; margin:0 auto; padding:14px var(--gutter); text-align:center; line-height:1.5;
}
.site-footer a{ color:#fff; text-decoration:underline; }
.site-footer a:hover{ opacity:.9; }

@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer .footer-inner{
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}