/* =============================================================================
 * estilo.css — painel de onboarding.
 * Sem framework nem fontes externas: a página precisa carregar rápido e não
 * depender de CDN. Ver AUTOMACAO_ONBOARDING_TENANT.md §4.
 * ========================================================================== */

:root {
  --marca: #1e4477;
  --texto: #16202c;
  --texto-fraco: #667085;
  --borda: #dfe3e8;
  --fundo: #f2f4f7;
  --cartao: #fff;
  --erro: #b42318;
  --ok: #1a7f43;
  --aviso: #b54708;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.centro { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

/* ─── etapa 1: código ─────────────────────────────────────────────────────── */
.cartao-codigo, .cartao-fim {
  background: var(--cartao); border-radius: 16px; box-shadow: var(--sombra);
  padding: 40px; max-width: 440px; width: 100%; text-align: center;
}
.cartao-codigo h1, .cartao-fim h1 { font-size: 24px; margin-bottom: 10px; letter-spacing: -.4px; }
.ajuda { color: var(--texto-fraco); font-size: 15px; }
.ajuda.pequena { font-size: 13px; margin-top: 12px; }

#codigo {
  width: 100%; margin: 22px 0 12px; padding: 14px;
  font-size: 20px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  text-align: center; letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--borda); border-radius: 10px; background: #fbfcfd;
}
#codigo:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

/* ─── botões ──────────────────────────────────────────────────────────────── */
.botao-principal {
  width: 100%; padding: 14px; border: 0; border-radius: 10px;
  background: var(--marca); color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.botao-principal:hover { filter: brightness(1.08); }
.botao-principal:disabled { opacity: .55; cursor: progress; }

.botao-secundario {
  padding: 10px 16px; border: 1px solid var(--borda); border-radius: 9px;
  background: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.botao-secundario:hover { border-color: #b9c0c9; }

.botao-texto {
  border: 0; background: none; color: var(--marca);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px;
}

/* ─── etapa 2: layout ─────────────────────────────────────────────────────── */
.topo {
  padding: 20px 28px; background: #fff; border-bottom: 1px solid var(--borda);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.topo strong { font-size: 18px; }

.colunas {
  display: grid; grid-template-columns: minmax(340px, 460px) 1fr;
  gap: 28px; padding: 28px; align-items: start; max-width: 1240px; margin: 0 auto;
}
@media (max-width: 900px) { .colunas { grid-template-columns: 1fr; } }

.painel-form {
  background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra);
  padding: 24px; display: grid; gap: 20px;
}

/* ─── campos ──────────────────────────────────────────────────────────────── */
.campo { display: grid; gap: 6px; }
.rotulo { font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.contador { margin-left: auto; font-style: normal; font-weight: 500; font-size: 12px; color: var(--texto-fraco); }
.contador.perto { color: var(--aviso); }
.contador.estourou { color: var(--erro); }

.campo input[type="text"], .campo input[type="tel"] {
  padding: 11px 12px; border: 1px solid var(--borda); border-radius: 9px;
  font-size: 15px; font-family: inherit; background: #fbfcfd; width: 100%;
}
.campo input:focus { outline: 2px solid var(--marca); outline-offset: 1px; background: #fff; }

.dica { font-size: 12.5px; color: var(--texto-fraco); }
.erro { font-size: 13px; color: var(--erro); font-weight: 500; }
.alerta { font-size: 12.5px; color: var(--aviso); font-weight: 500; }

.area-arquivo {
  border: 1px dashed var(--borda); border-radius: 10px; padding: 16px;
  display: grid; gap: 8px; justify-items: start; background: #fbfcfd;
}
.area-arquivo.tem-arquivo { border-style: solid; background: #fff; }

.marcador { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 10px; }
.campo-tolerancia { display: grid; gap: 4px; margin-top: 8px; }
#tolerancia { width: 100%; }

.linha-cor { display: flex; align-items: center; gap: 10px; }
.linha-cor input[type="color"] {
  width: 52px; height: 40px; padding: 2px; border: 1px solid var(--borda);
  border-radius: 9px; background: #fff; cursor: pointer;
}
.linha-cor input[type="text"] {
  width: 110px; font-family: ui-monospace, Consolas, monospace; text-transform: lowercase;
}

.paleta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.paleta button {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .12);
  cursor: pointer; padding: 0;
}
.paleta button[aria-pressed="true"] { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ─── preview ─────────────────────────────────────────────────────────────── */
.painel-preview { display: grid; gap: 20px; }
.bloco { background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra); padding: 20px; }
.bloco h2 { font-size: 15px; margin-bottom: 14px; }

.abas-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.aba-preview {
  border: 1px solid var(--borda); background: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.aba-preview.ativa { background: var(--texto); color: #fff; border-color: var(--texto); }

/* A tela do mockup tem 360x800; a moldura escala para caber. */
.moldura {
  width: 300px; height: 667px; margin: 0 auto;
  border: 10px solid #0b0b0d; border-radius: 34px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}
.moldura iframe {
  width: 360px; height: 800px; border: 0; display: block;
  transform: scale(.8333); transform-origin: 0 0;
}

.grade-icones {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: center;
}
.grade-icones figcaption { font-size: 11.5px; color: var(--texto-fraco); margin-top: 7px; }

.icone-android, .icone-ios {
  width: 62px; height: 62px; margin: 0 auto;
  background-size: 66%; background-repeat: no-repeat; background-position: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}
.icone-android { border-radius: 50%; }
.icone-ios { border-radius: 14px; background-size: cover; }

.prev-splash {
  width: 62px; height: 92px; margin: 0 auto; border-radius: 9px;
  background-size: 62%; background-repeat: no-repeat; background-position: center;
  border: 1px solid var(--borda);
}
.prev-notif {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 9px;
  background: #2b3038; background-size: 44%; background-repeat: no-repeat; background-position: center;
}

.veredito { margin-top: 16px; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.veredito.ok { background: #e7f5ec; color: var(--ok); }
.veredito.aviso { background: #fdf3cd; color: var(--aviso); }
.veredito.erro { background: #fee4e2; color: var(--erro); }
.veredito ul { margin: 6px 0 0 18px; }

/* ─── etapa 3: conclusão ──────────────────────────────────────────────────── */
.marca-certo {
  width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%;
  background: #e7f5ec; color: var(--ok); display: grid; place-items: center;
}
.marca-certo svg { width: 30px; height: 30px; }
.cartao-fim p { color: var(--texto-fraco); margin-top: 8px; }