/* /frontend/css/criar-empresa.css
   ====================== criar-empresa.css ======================
   ZapChats – Criar Empresa (CSS puro, Inter-only)
   (paridade com LOGIN + SLIDE lateral + sem scroll quando couber)
   ============================================================= */

/* ===== Tokens/Base ===== */
:root{
  --brand-500:#00bd3d; --brand-600:#00a337; --brand-700:#008b32;

  --page-bg:#0b0b0b; --card-bg:#171717; --card-bd:#262626; --left-bg:#1f1f1f;
  --text:#e5e7eb; --text-2:#a1a1aa;
  --input-bg:#171717; --input-bd:#3f3f46; --input-text:#e5e7eb;

  --shadow-lg:0 32px 84px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03);
  --topbar-h:44px;

  --radius:12px; --input-h:48px; --btn-h:46px;

  --auth-card-max: 920px;        /* igual login */
  --auth-card-min-h: 640px;      /* igual login */

  --xfade-ms: 320ms;             /* slide */
}
html:not(.dark){
  --page-bg:#f0fdf4; --card-bg:#ffffff; --card-bd:#e5e7eb; --left-bg:#e9f7ee;
  --text:#111827; --text-2:#6b7280;
  --input-bg:#ffffff; --input-bd:#d1d5db; --input-text:#111827;
  --shadow-lg:0 28px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:var(--page-bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-top:var(--topbar-h);
  font-size:15px; line-height:1.45;
}
h1,h2,.label,.btn-primary{ font-family:Poppins,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif }

/* ===== Topbar/Toggle ===== */
.topline-bar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding:0 14px;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(22,22,23,0)); z-index:50; backdrop-filter:blur(6px)
}
html:not(.dark) .topline-bar{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(255,255,255,0))}
.topline-bar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#22c55e,#06b6d4,#6366f1);opacity:.95
}
.theme-toggle{
  --w:80px; --h:36px; --p:4px; --k:28px; --dx:calc(var(--w) - var(--k) - var(--p)*2);
  position:relative; width:var(--w); height:var(--h); padding:var(--p);
  border-radius:999px; cursor:pointer; border:1px solid; isolation:isolate;
  background:#eceff3; border-color:#d5d9e0;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.05);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html.dark .theme-toggle{
  background:#2f323a; border-color:#3a3e46;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), inset 0 -1px 2px rgba(255,255,255,.03);
}
.theme-toggle .slot{position:absolute;top:50%;width:28px;height:28px;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none;opacity:.75}
.theme-toggle .slot.left{left:6px}.theme-toggle .slot.right{right:6px}
.theme-toggle .slot svg{width:18px;height:18px}.theme-toggle .slot svg *{stroke:#9aa3af} html.dark .theme-toggle .slot svg *{stroke:#8a93a1}
.theme-toggle .thumb{
  position:absolute;top:var(--p);left:var(--p);width:var(--k);height:var(--k);border-radius:999px;
  display:grid;place-items:center;overflow:hidden;background:none;
  box-shadow:0 3px 7px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25);
  transform:translateX(0);
  transition: transform .58s cubic-bezier(.28,1.2,.43,1), box-shadow .28s ease;
}
html.dark .theme-toggle .thumb{ transform:translateX(var(--dx)); }
.theme-toggle .thumb::before,.theme-toggle .thumb::after{
  content:""; position:absolute; inset:0; border-radius:inherit; transition: opacity .55s ease;
}
.theme-toggle .thumb::before{
  opacity:1; background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.25) 45%), linear-gradient(180deg,#f8c266,#f59e0b);
}
.theme-toggle .thumb::after{
  opacity:0; background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.25) 45%), linear-gradient(180deg,#6ba6ff,#2563eb);
}
html.dark .theme-toggle .thumb::before{ opacity:0 } html.dark .theme-toggle .thumb::after{ opacity:1 }
.theme-toggle .thumb svg{ position:absolute; inset:0; margin:auto; width:20px; height:20px }
.theme-toggle .thumb .thumb-sun{ opacity:1; transition:opacity .55s ease }
.theme-toggle .thumb .thumb-moon{ opacity:0; transition:opacity .55s ease }
html.dark .theme-toggle .thumb .thumb-sun{ opacity:0 } html.dark .theme-toggle .thumb .thumb-moon{ opacity:1 }
.theme-toggle.t-anim::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  animation: sweep .55s ease both;
}
@keyframes sweep{ 0%{transform:translateX(-120%);opacity:0}40%{opacity:.9}100%{transform:translateX(120%);opacity:0} }

/* ===== Layout + animação (SLIDE lateral) ===== */
.page-shell{
  min-height:100dvh; display:grid; place-items:center; padding:16px;
  opacity:0; transform: translateX(24px);
  animation: page-in var(--xfade-ms) ease-out forwards;
}
.page-shell.leaving{ animation: page-out calc(var(--xfade-ms) - 40ms) ease-in forwards; }
@keyframes page-in{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none} }
@keyframes page-out{ from{opacity:1; transform:none} to{opacity:0; transform:translateX(-24px)} }
@media (prefers-reduced-motion: reduce){
  .page-shell,.page-shell.leaving{ animation-duration:0ms; transform:none; opacity:1; }
}

.register-card{
  width:min(92vw, var(--auth-card-max));
  min-height:var(--auth-card-min-h);                 /* mesma altura do login */
  background:var(--card-bg); border:1px solid var(--card-bd);
  border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden;
  display:grid; grid-template-columns: 440px 1fr;
}
.register-illustration{ background:var(--left-bg); display:grid; place-items:center; padding:22px }
.register-illustration img{ max-width:92%; height:auto; object-fit:contain; opacity:.96 }

/* Sem scroll interno quando couber (igual login) */
.register-form{
  padding:28px 34px; max-height:none; overflow:visible;
  position:relative; z-index:1;
}
.head-block{ text-align:center; margin-bottom:10px }
.logo,.logo-dark{ width:138px; height:auto; display:block; margin:0 auto 6px }
.logo-dark{ display:none } html.dark .logo{ display:none } html.dark .logo-dark{ display:block }
.title{ margin:2px 0 0; font-weight:900; font-size:34px; color:var(--text) }
.subtitle{ margin:6px 0 8px; color:var(--text-2); font-size:13px }

/* Stepper/Toast */
.stepper{ display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 10px }
.dot{ width:9px; height:9px; border-radius:999px; background:#cbd5e1 }
.dot.active{ background:var(--brand-500) }
.step-label{ font-size:12.5px; color:var(--text-2) }
.toast{ margin:6px auto 0; max-width:560px; padding:10px 12px; border-radius:10px; font-size:13px; border:1px solid #f59e0b; background:#fff7ed; color:#9a3412 }
.toast.hidden{ display:none }

/* Steps */
.form{ width:100%; max-width:560px; margin:0 auto }
.wizard-viewport{ position:relative; min-height:360px }
.step{ display:grid; gap:12px; opacity:0; transform:translateX(10px); pointer-events:none; position:absolute; inset:0; }
.step--active{ opacity:1; transform:translateX(0); pointer-events:auto; position:relative; }
.step--enter{ animation: stepIn .24s ease both }
.step--leave{ animation: stepOut .20s ease both }
@keyframes stepIn{ from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:translateX(0)} }
@keyframes stepOut{ from{opacity:1; transform:translateX(0)} to{opacity:0; transform:translateX(-10px)} }
.hidden{ display:none !important }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Fields */
.field{ margin-bottom:12px }
.label{ display:block; font-weight:700; margin-bottom:6px; font-size:15px }
.input{
  height:var(--input-h); width:100%; padding:0 12px;
  background:var(--input-bg); border:1px solid var(--input-bd);
  color:var(--input-text); border-radius:10px; outline:none;
  transition:box-shadow .12s ease, border-color .12s ease, background .12s ease;
  font-size:15px;
}
.input::placeholder{ color:var(--text-2); opacity:.9 }
.input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 2px rgba(0,189,61,.35) }
.field.field-err .input{ border-color:#ef4444 !important }
.help-err{ color:#ef4444; font-size:12.5px; margin-top:6px }
.muted{ color:var(--text-2); font-size:12.5px; display:block; margin-top:4px }

.input-wrap{ position:relative }
.input--with-actions{ padding-right:128px }
.input-actions{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px }
.icon-btn{ border:0; background:transparent; cursor:pointer; padding:4px 8px; color:var(--text-2); font-weight:700; line-height:1; border-radius:8px }
.icon-btn:hover{ background:rgba(255,255,255,.06) }
html:not(.dark) .icon-btn:hover{ background:rgba(0,0,0,.05) }
.icon-btn.strong{ color:#10b981 }

/* Avatar */
.avatar-row{ display:flex; gap:14px; align-items:center }
.avatar-uploader{
  position:relative; height:96px; width:96px; border-radius:999px;
  border:2px dashed var(--input-bd); background:#0f172a10; display:grid; place-items:center; overflow:hidden; cursor:pointer;
}
.avatar-uploader svg{ width:40px; height:40px; fill:#9ca3af }
.avatar-uploader img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.avatar-cta{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  font-size:12px; background:#ffffffd9; color:#374151; padding:2px 6px; border-radius:6px;
}
html.dark .avatar-cta{ background:#111827cc; color:#e5e7eb }
.avatar-ring{ position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 3px rgba(34,197,94,.35) inset }
.avatar-help p{ margin:0 0 6px }
.row-g{ display:flex; align-items:center; gap:8px }
.ok{ color:#10b981; font-size:12.5px }
.file-hidden{ display:none !important }

/* Ações */
.wizard-actions{ display:flex; align-items:center; gap:10px; margin-top:6px }
.spacer{ flex:1 }
.btn-primary{
  height:var(--btn-h); border-radius:10px; font-weight:800; border:0; cursor:pointer;
  background:var(--brand-500); color:#fff; padding:0 16px; font-size:15px;
}
.btn-primary:hover{ filter:brightness(.96) }
.btn-ghost{
  height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--card-bd);
  background:transparent; color:var(--text); font-weight:700; cursor:pointer; font-size:14px;
}
.btn-ghost.sm{ height:30px; font-weight:600; font-size:13px }
.link{ color:var(--brand-500); text-decoration:none; font-weight:700 }
.link:hover{ text-decoration:underline }
.footer-note{ margin:16px 0 4px; text-align:center; color:var(--text-2) }
.chev{ font-weight:900 }

/* Modais – não bloqueiam cliques quando fechados */
.modal{ position:fixed; inset:0; z-index:60; display:none; pointer-events:none }
.modal.hidden,.modal[hidden]{ display:none !important; pointer-events:none !important }
.modal.is-open,.modal[open],[data-open="true"]{ display:block !important; pointer-events:auto !important }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5) }
.modal-card{
  position:relative; width:min(92vw, 720px); margin:80px auto 0; background:var(--card-bg);
  border:1px solid var(--card-bd); border-radius:16px; padding:16px; box-shadow:var(--shadow-lg);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.modal-head h3{ margin:0; font-size:18px; font-weight:700 }
.btn-icon{ border:0; background:transparent; cursor:pointer; color:var(--text-2); font-size:18px }
.preset-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:10px 0 }
.preset-grid img{ width:64px; height:64px; border-radius:999px; border:1px solid var(--card-bd); display:block; object-fit:cover }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px }

.confirm-card{ position:relative; width:min(92vw, 520px); margin:110px auto 0; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg) }
.confirm-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--card-bd) }
.badge{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; background:#fef3c7; color:#b45309; font-weight:900 }
.confirm-body{ padding:14px }
.confirm-foot{ padding:10px 14px; display:flex; justify-content:flex-end; gap:8px; background:#f9fafb11 }

/* Autofill */
input:-webkit-autofill{ transition: background-color 9999s ease-in-out 0s }
html.dark input:-webkit-autofill{ -webkit-text-fill-color:#e5e7eb; box-shadow:0 0 0 1000px #0a0a0a inset }

/* Utils */
.border-green-400{ border-color:#34d399 !important } .border-green-500{ border-color:#10b981 !important }
.cursor-wait{ cursor:wait !important }
.h-16{ height:64px } .w-16{ width:64px }
.object-cover{ object-fit:cover }
.ring-2{ box-shadow:0 0 0 2px var(--ring-color,#10b981) } .ring-green-500{ --ring-color:#10b981 }

/* Responsivo */
@media (max-width:1023px){
  .register-card{ grid-template-columns:1fr }
  .register-illustration{ display:none }
  .register-form{ padding:22px 18px }
  .title{ font-size:28px }
}

/* Atalhos por atributo */
html[data-auth-size="slim"]  { --auth-card-max: 760px }
html[data-auth-size="normal"]{ --auth-card-max: 920px }
html[data-auth-size="wide"]  { --auth-card-max: 1040px }

/* ===== Compactação por ALTURA (para caber sem scroll) ===== */
@media (max-height:800px){
  :root{ --input-h:42px; --btn-h:44px }
  .register-form{ padding:22px 22px }
  .title{ font-size:30px }
  .wizard-viewport{ min-height:320px }
  .avatar-uploader{ width:84px; height:84px }
}
@media (max-height:740px){
  :root{ --input-h:40px; --btn-h:42px }
  .register-form{ padding:18px 18px }
  .title{ font-size:28px }
  .wizard-viewport{ min-height:300px }
  .avatar-uploader{ width:72px; height:72px }
}
@media (max-height:680px){
  :root{ --input-h:36px; --btn-h:40px }
  .register-form{ padding:14px 16px }
  .title{ font-size:24px }
  .wizard-viewport{ min-height:260px }
}