/* =========================================================================
   ORLOGOS - Onboarding / Criar conta (Sprint 3.1 / CORE_003)
   CSS proprio, independente do shell da plataforma.
   Mobile first. Suporte a tema claro/escuro via prefers-color-scheme
   e override manual data-theme.
   -------------------------------------------------------------------------
   --primary usa o dourado da marca ORLOGOS (#C49A3C) para dar continuidade
   visual com o login e o shell. Para trocar por outra cor (ex.: verde
   #10b981) basta alterar a variavel abaixo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Design tokens centralizados em /static/css/tokens.css (carregado ANTES
   deste arquivo em _base.html). Aqui usamos apenas os tokens:
     --primary --primary-hover --primary-text --bg --surface --text
     --muted --border-color --input-bg --err --ok --shadow --radius --accent
   Não redefinir :root aqui — evita divergência entre telas.
   ------------------------------------------------------------------------- */

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

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background .3s ease,color .3s ease;
  -webkit-font-smoothing:antialiased;
}

/* Barra superior discreta: tema + idioma */
.su-topbar{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:16px 20px;
}
.su-topbar .spacer{flex:1}
.su-icon-btn{
  background:none;border:1px solid var(--border-color);border-radius:20px;
  padding:6px 10px;cursor:pointer;font-size:14px;color:var(--muted);
  transition:border-color .15s,color .15s;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.su-icon-btn:hover{border-color:var(--primary);color:var(--text)}
.su-icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.su-icon-btn svg{width:18px;height:18px;display:block}
/* Alterna sol/lua conforme o tema ativo (sem emoji) */
.su-icon-btn .icon-sun{display:none}
.su-icon-btn .icon-moon{display:block}
[data-theme="dark"] .su-icon-btn .icon-sun{display:block}
[data-theme="dark"] .su-icon-btn .icon-moon{display:none}
.su-langs{display:flex;gap:2px}
.su-lang{
  background:none;border:none;padding:6px 8px;cursor:pointer;font-size:13px;
  font-weight:500;color:var(--muted);border-radius:6px;letter-spacing:.03em;
  transition:color .15s;
}
.su-lang.on{color:var(--primary);font-weight:700}
.su-lang:hover{color:var(--text)}

/* Coluna central */
.su-main{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;padding:24px;
}
.su-col{
  width:100%;max-width:440px;display:flex;flex-direction:column;
  animation:su-fade .4s ease;
}
@keyframes su-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Marca */
.su-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px}
/* Logo source is the green symbol: shown as-is on dark, forced black on light. */
.su-brand img{width:56px;height:56px;object-fit:contain}
[data-theme="light"] .su-brand img{filter:brightness(0)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .su-brand img{filter:brightness(0)}}
.su-brand-name{font-size:20px;font-weight:800;letter-spacing:.22em;color:var(--text)}

/* Indicador de progresso (4 etapas) */
.progress-steps{display:flex;align-items:center;gap:6px;margin-bottom:32px}
.progress-steps .label{font-size:12px;font-weight:600;color:var(--primary);margin-right:6px;white-space:nowrap}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border-color);flex:none;transition:background .3s ease}
.step-dot.active{background:var(--primary)}
.step-dot.done{background:var(--primary);opacity:.4}
.step-line{flex:1;height:1px;background:var(--border-color)}

/* Tipografia */
.su-title{font-size:28px;font-weight:700;line-height:1.2;margin-bottom:10px}
.su-sub{font-size:16px;color:var(--muted);line-height:1.5;margin-bottom:28px}
.su-sub strong{color:var(--text);font-weight:600}
/* Linha de apoio (corpo) - texto de leitura, discreto e sem competir com o titulo */
.su-lead{font-size:15px;color:var(--muted);line-height:1.55;margin:0 auto 30px;max-width:34ch}

/* Icone grande (envelope / check) */
.su-hero-icon{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:34px;margin:0 auto 22px;background:color-mix(in srgb,var(--primary) 14%,transparent);
  color:var(--primary);
}
.su-hero-icon.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.su-center{text-align:center}

/* Campos */
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
.field input,.field select{
  width:100%;font-size:16px;padding:14px;border:1px solid var(--border-color);
  border-radius:10px;background:var(--input-bg);color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--muted);opacity:.72}
.field input:focus,.field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent);
}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
/* Botão mostrar/ocultar senha — SVG com dois estados (não emoji). */
.pw-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:0;border-radius:8px;
  transition:color .15s,background .15s;
}
.pw-eye:hover{color:var(--text);background:color-mix(in srgb,var(--muted) 14%,transparent)}
.pw-eye:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pw-eye svg{width:20px;height:20px;display:block}
/* Estado padrão (senha oculta): mostra o olho aberto. */
.pw-eye .eye-hide{display:none}
/* Quando pressionado (senha visível): mostra o olho barrado. */
.pw-eye[aria-pressed="true"] .eye-show{display:none}
.pw-eye[aria-pressed="true"] .eye-hide{display:block}

/* Botoes */
.btn{
  width:100%;font-size:16px;font-weight:600;padding:16px;border-radius:9999px;
  cursor:pointer;border:1px solid transparent;transition:background .15s,opacity .15s,border-color .15s,color .15s;
  display:block;text-align:center;text-decoration:none;line-height:1.2;
}
/* Acao primaria: dominante (dourado da marca, cheio) */
.btn-primary{background:var(--primary);color:var(--on-accent);border-color:var(--primary);font-weight:600}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-primary:disabled{opacity:.6;cursor:default}
/* Acao secundaria: recuada (texto discreto, sem borda forte, peso menor) */
.btn-secondary{background:transparent;color:var(--muted);border-color:transparent;font-weight:500}
.btn-secondary:hover{color:var(--primary)}
.btn + .btn{margin-top:8px}

/* Erros e ajuda */
.su-err{display:none;color:var(--err);font-size:14px;margin-top:14px;text-align:center}
.su-legal{font-size:12px;color:var(--muted);line-height:1.6;text-align:center;margin-top:20px}
.su-legal a{color:var(--link);text-decoration:none}
.su-legal a:hover{text-decoration:underline}

.su-resend{font-size:14px;color:var(--muted);text-align:center;margin-top:22px;line-height:1.8}
.su-resend a{color:var(--link);font-weight:600;text-decoration:none;cursor:pointer}
.su-resend a:hover{text-decoration:underline}
.su-resend .dot{margin:0 8px;opacity:.5}

/* Orientacao humana (sem link tecnico) na tela de verificacao */
.su-hint{font-size:13.5px;color:var(--muted);text-align:center;margin:20px auto 0;line-height:1.6;max-width:340px}

/* .su-soon removido — badge "Em breve" descontinuado (sprint 2026-07-13) */
.btn-primary:disabled{opacity:.62;cursor:not-allowed}

/* Banner de desenvolvimento (SMTP ausente) */
.su-dev{
  margin-top:22px;padding:14px 16px;border:1px dashed var(--primary);border-radius:10px;
  background:color-mix(in srgb,var(--primary) 8%,transparent);font-size:13px;color:var(--text);
  line-height:1.6;text-align:left;word-break:break-all;
}
.su-dev b{display:block;margin-bottom:6px;color:var(--primary);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.su-dev a{color:var(--link);font-weight:600}

/* Toast */
.su-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:var(--bg);font-size:14px;font-weight:500;
  padding:12px 22px;border-radius:24px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:50;box-shadow:var(--shadow);
}
.su-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Desktop / iPad: mais respiro vertical */
@media (min-width:600px){
  .su-main{padding:48px 24px}
  .su-col{background:var(--surface);border:1px solid var(--border-color);
          border-radius:16px;padding:48px 44px;box-shadow:var(--shadow)}
}


/* =========================================================================
   Sprint 3.2 — Tela de conexao do WhatsApp (escolha de numero + sucesso)
   ========================================================================= */
.wa-cards{
  display:flex;flex-direction:column;gap:16px;margin:22px 0 8px;
}
.wa-card{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-color);
  border-radius:14px;padding:22px 20px;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  font-family:inherit;color:var(--text);
}
.wa-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.wa-card:active{transform:translateY(0)}
.wa-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.wa-card-ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:26px;margin-bottom:14px;
  background:color-mix(in srgb,var(--primary) 14%,transparent);
}
.wa-card-title{font-size:19px;font-weight:700;line-height:1.25;margin-bottom:8px}
.wa-card-desc{font-size:14.5px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.wa-note{
  border-top:1px solid var(--border-color);margin:2px 0 16px;padding-top:14px;
  display:flex;flex-direction:column;gap:9px;
}
.wa-note-line{
  position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--text)
}
.wa-note-line::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:700
}
.wa-card-btn{margin-top:2px;pointer-events:none}
.wa-card.is-busy{opacity:.7;pointer-events:none}
.wa-later{margin-top:6px}

.wa-alert{
  margin:4px 0 12px;padding:13px 15px;border-radius:12px;font-size:14px;line-height:1.45;
  background:color-mix(in srgb,var(--err) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--err) 40%,transparent);color:var(--text)
}

.wa-success-ico{font-size:54px;margin-bottom:10px}
.wa-phone{
  font-size:20px;font-weight:700;color:var(--primary);letter-spacing:.02em;margin-bottom:10px
}