/* ==========================================================================
   Orkai — telas de acesso
   --------------------------------------------------------------------------
   Entrar, criar conta, código e senha. É a primeira coisa que a pessoa vê, e
   uma tela de login sem graça derruba a percepção de tudo que vem depois.

   O QUE FAZ ESTA TELA PARECER CARA — as regras seguidas aqui:

   1. DUAS COLUNAS, NÃO UM CARTÃO NO MEIO. Cartão centrado em fundo cinza é a
      cara de painel administrativo genérico. A coluna da esquerda é onde o
      produto se apresenta; a da direita é onde a pessoa trabalha.
   2. A ESQUERDA É O AZUL DO MENU. A mesma cor do painel, para a pessoa já
      chegar dentro da marca, e não num limbo branco.
   3. UM DOCUMENTO DE VERDADE NA ESQUERDA. Não ilustração genérica: uma
      miniatura do próprio orçamento, que é o que está sendo vendido.
   4. O FORMULÁRIO RESPIRA. Campo com 44px, rótulo acima, erro embaixo, sem
      placeholder fazendo papel de rótulo.
   5. UM SÓ BOTÃO PRIMÁRIO POR TELA. O caminho principal nunca compete com
      link secundário.
   6. NO CELULAR A ESQUERDA VIRA UMA FAIXA. Ela não some: vira cabeçalho, para
      a marca não desaparecer justamente onde a maioria vai entrar.

   Prefixo ac- (acesso). Reaproveita os tokens do app.css.
   ========================================================================== */

.ac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel);
}

/* ==========================================================================
   ESQUERDA — a vitrine
   ========================================================================== */
.ac-lado {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(37, 99, 235, .42), transparent 62%),
    radial-gradient(760px 520px at 108% 108%, rgba(29, 78, 216, .34), transparent 58%),
    linear-gradient(168deg, #0b1220 0%, #101a30 52%, #0b1220 100%);
  color: #e7edf8;
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
}

/* textura: pontinhos, quase invisíveis. Fundo chapado lê como barato. */
.ac-lado::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .3;
  mask-image: radial-gradient(70% 60% at 30% 20%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 20%, #000, transparent 78%);
  pointer-events: none;
}
.ac-lado > * { position: relative; z-index: 1; }

.ac-marca { display: block; text-decoration: none; }
.ac-marca img { height: 34px; width: auto; display: block; }

.ac-lado-meio { margin: auto 0; padding: 34px 0; max-width: 460px; }
.ac-tit {
  font-size: clamp(23px, 2vw, 28px); font-weight: 800; letter-spacing: -.028em;
  line-height: 1.22; color: #fff; margin: 0 0 13px; max-width: 15ch;
}
.ac-tit em { font-style: normal; color: #7dabff; }
.ac-sub { font-size: 14.5px; line-height: 1.62; color: #a9bcd8; margin: 0; }

.ac-pontos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 13px; }
.ac-pontos li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #c6d5ec; }
.ac-pontos .bi {
  flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(37, 99, 235, .3); color: #93bbff; font-size: 11px; margin-top: 1px;
}
.ac-pontos b { color: #fff; font-weight: 650; }

.ac-rodape {
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 11.5px; color: #6d84a8; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.ac-rodape a { color: #93a9c9; text-decoration: none; }
.ac-rodape a:hover { color: #fff; }

/* --- a miniatura do documento --------------------------------------------- */
.ac-doc {
  /* dentro da coluna, não sangrando pela borda: um documento cortado ao meio
     passa a impressão de layout quebrado, não de recorte proposital */
  position: absolute; right: 40px; bottom: 96px;
  width: 274px; padding: 19px 20px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 34px 70px -18px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .07);
  transform: rotate(-5deg);
  color: #111827; font-size: 8px; line-height: 1.5;
  pointer-events: none; z-index: 0;
}
.ac-doc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--brand-2); border-radius: 12px 12px 0 0;
}
.ac-doc-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 13px; }
.ac-doc-marca { font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.ac-doc-num { text-align: right; }
.ac-doc-rot {
  font-size: 5.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #9ca3af;
}
.ac-doc-num b { font-size: 9.5px; font-weight: 800; letter-spacing: -.01em; }
.ac-doc-linha { height: 1px; background: #e8ebf0; margin: 9px 0; }
.ac-doc-l { display: flex; justify-content: space-between; gap: 10px; padding: 4.5px 0; }
.ac-doc-l + .ac-doc-l { border-top: 1px solid #f1f3f7; }
.ac-doc-l span:first-child { color: #4b5563; }
.ac-doc-l span:last-child { font-weight: 650; font-variant-numeric: tabular-nums; }
.ac-doc-tot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 11px; padding-top: 9px; border-top: 1.6px solid var(--brand-2);
}
.ac-doc-tot b { font-size: 15px; font-weight: 800; letter-spacing: -.025em; }
.ac-doc-barras { display: grid; gap: 4px; margin-top: 12px; }
.ac-doc-barras i { display: block; height: 3px; border-radius: 2px; background: #eef1f6; }
.ac-doc-barras i:nth-child(2) { width: 78%; }
.ac-doc-barras i:nth-child(3) { width: 54%; }

/* ==========================================================================
   DIREITA — o formulário
   ========================================================================== */
.ac-form {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 40px; background: var(--panel);
}
.ac-caixa { width: 100%; max-width: 384px; }

.ac-volta {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color .14s;
}
.ac-volta:hover { color: var(--acao-2); }
.ac-volta .bi { font-size: 13px; }

.ac-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.032em; color: var(--ink); margin: 0 0 7px; }
.ac-h2 { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; }
.ac-h2 b { color: var(--ink); font-weight: 650; }

/* passos, na criação de conta */
.ac-passos { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; }
.ac-passo {
  flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .2s;
}
.ac-passo.feito { background: var(--acao-2); }
.ac-passo.atual { background: var(--acao-2); opacity: .45; }

.ac-campos { display: grid; gap: 15px; }
.ac-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ac-campo { display: grid; gap: 6px; }
.ac-campo > label {
  font-size: 12px; font-weight: 650; color: var(--ink-2); letter-spacing: -.005em;
}
.ac-campo > label .op { font-weight: 500; color: var(--muted); }
.ac-in { position: relative; display: flex; align-items: center; }
.ac-in > .bi {
  position: absolute; left: 13px; font-size: 15px; color: var(--muted); pointer-events: none;
  transition: color .14s;
}
.ac-in input {
  width: 100%; height: 44px; padding: 0 13px 0 39px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--ink); background: var(--field-bg);
  transition: border-color .14s, box-shadow .14s;
}
.ac-in input::placeholder { color: #b6c2d4; }
.ac-in input:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--acao-ring);
}
.ac-in:focus-within > .bi { color: var(--acao-2); }
.ac-in .olho {
  position: absolute; right: 5px; width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  font-size: 15px; transition: all .14s;
}
.ac-in .olho:hover { background: var(--line-2); color: var(--ink-2); }

.ac-campo.erro .ac-in input { border-color: var(--danger); }
.ac-campo.erro .ac-in input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }
.ac-msg { font-size: 11.5px; color: var(--danger); display: none; }
.ac-campo.erro .ac-msg { display: block; }

/* força da senha */
.ac-forca { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ac-forca-barra { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.ac-forca-barra i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .25s, background .25s; }
.ac-forca span { font-size: 11px; font-weight: 650; color: var(--muted); min-width: 52px; text-align: right; }
.ac-forca[data-n="1"] i { width: 25%; background: var(--danger); }
.ac-forca[data-n="2"] i { width: 50%; background: var(--amber); }
.ac-forca[data-n="3"] i { width: 78%; background: #22a06b; }
.ac-forca[data-n="4"] i { width: 100%; background: var(--green); }

.ac-btn {
  width: 100%; height: 46px; margin-top: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: linear-gradient(135deg, var(--acao-2), var(--acao)); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  box-shadow: 0 6px 18px -6px rgba(29, 78, 216, .5);
  transition: filter .14s, transform .1s, box-shadow .14s;
}
.ac-btn:hover:not(:disabled) { filter: brightness(1.14); box-shadow: 0 9px 24px -7px rgba(29, 78, 216, .58); }
.ac-btn:active:not(:disabled) { transform: translateY(1px); }
.ac-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.ac-btn .rodinha {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%; animation: acgira .6s linear infinite; display: none;
}
.ac-btn.ocupado .rodinha { display: block; }
.ac-btn.ocupado .txt { opacity: .8; }
@keyframes acgira { to { transform: rotate(360deg); } }

.ac-entre {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ac-entre::before, .ac-entre::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }

.ac-pe { margin-top: 22px; text-align: center; font-size: 13px; color: var(--ink-2); }
.ac-pe a { color: var(--acao-2); font-weight: 650; text-decoration: none; }
.ac-pe a:hover { text-decoration: underline; }
.ac-esqueci { font-size: 12px; font-weight: 600; color: var(--acao-2); text-decoration: none; }
.ac-esqueci:hover { text-decoration: underline; }
.ac-rot-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* aviso geral do formulário */
.ac-aviso {
  display: none; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px;
  font-size: 13px; line-height: 1.5;
}
.ac-aviso.on { display: flex; }
.ac-aviso .bi { font-size: 15px; flex: none; margin-top: 1px; }
.ac-aviso--err { background: var(--danger-soft); color: #a92222; }
.ac-aviso--ok  { background: var(--green-soft); color: #0b6b4f; }
.ac-aviso--dev {
  background: var(--amber-soft); color: #8a5a00;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}

/* ==========================================================================
   CÓDIGO DE VERIFICAÇÃO — seis caixas
   ========================================================================== */
.ac-codigo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin: 4px 0 6px; }
.ac-codigo input {
  width: 100%; height: 56px; text-align: center; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 22px; font-weight: 700; font-family: inherit; color: var(--ink);
  background: var(--field-bg); font-variant-numeric: tabular-nums;
  transition: all .14s;
}
.ac-codigo input:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--acao-ring);
  transform: translateY(-1px);
}
.ac-codigo input.cheio { border-color: var(--acao-2); background: var(--brand-soft); }
.ac-codigo.erro input { border-color: var(--danger); animation: actrema .32s; }
@keyframes actrema {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.ac-reenviar {
  margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--muted);
}
.ac-reenviar button {
  border: 0; background: none; color: var(--acao-2); font-family: inherit; font-size: 12.5px;
  font-weight: 650; cursor: pointer; padding: 0; text-decoration: underline;
}
.ac-reenviar button:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1320px) { .ac-doc { right: 24px; width: 250px; bottom: 88px; } }
@media (max-width: 1120px) { .ac-doc { display: none; } }

@media (max-width: 980px) {
  .ac { grid-template-columns: 1fr; }
  .ac-lado {
    padding: 22px 26px 26px; min-height: 0;
  }
  .ac-lado-meio { margin: 18px 0 0; padding: 0; max-width: none; }
  .ac-tit { font-size: 22px; }
  .ac-sub { font-size: 13.5px; }
  .ac-pontos, .ac-rodape, .ac-doc { display: none; }
  .ac-form { padding: 34px 24px 48px; }
  .ac-caixa { max-width: 420px; }
}

@media (max-width: 420px) {
  .ac-lado { padding: 18px 20px 22px; }
  .ac-form { padding: 26px 20px 40px; }
  .ac-h1 { font-size: 22px; }
  .ac-dupla { grid-template-columns: 1fr; }
  .ac-codigo { gap: 6px; }
  .ac-codigo input { height: 50px; font-size: 19px; }
}

/* tema escuro: a direita acompanha o painel */
body.dark .ac, body.dark .ac-form { background: var(--panel); }
body.dark .ac-doc { box-shadow: 0 34px 70px -18px rgba(0, 0, 0, .8); }