/* =============================================================================
   Tema das telas de acesso (logins, cadastro, esqueci/redefinir senha).

   Desktop (≥ 769px): formulário à ESQUERDA, direto no fundo claro (sem cartão),
   com "Voltar" e o logo da empresa no topo; à DIREITA o lado da marca, um
   cartão azul-claro arredondado com o texto centralizado em cima e, embaixo, a
   composição .auth-visual: aqui só a moldura dela (tamanho, halo e o aviso de
   vidro). O centro é de cada tela: nas das EMPRESAS, o painel de saúde de vidro
   de auth-asaas.css (.auth-visual--painel — sem logo nenhuma, igual para todo o
   white label; até 10/10 era o símbolo da empresa num núcleo com órbitas 3D e uma
   linha de ECG); no login da UPWAGE, o globo de upwage-tema.css.
   Celular: o layout de sempre (cabeçalho com logo + formulário), só o formato.

   As CORES do formulário estão nos tokens de cada página (--bg, --blue, --ink…);
   o lado da marca (claro) é pintado aqui, igual nas seis telas. Carregado
   depois do CSS da página — por isso toda GEOMETRIA fica dentro de
   @media (min-width: 769px): uma regra global com a mesma especificidade
   apagaria a do celular.
   ============================================================================= */

/* Escala fixa (1rem = 10px), como nos painéis: o clamp(…12.5px) das páginas
   deixava tudo ~22% maior em 1920px. Até ~1280px e no celular já era 10px. */
html { font-size: 10px; }

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Logo do topo do formulário: só no desktop (no celular o cabeçalho já tem) */
.auth-logo { display: none; }
.auth-visual { display: none; }

/* Ação principal: pílula azul chapada */
.button-login-submit,
.button-register-submit {
  border-radius: 999rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}
.button-login-submit:hover,
.button-register-submit:hover {
  box-shadow: none;
  transform: none;
}
.button-login-submit:focus-visible,
.button-register-submit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Campos */
.component-login-input,
.component-register-input,
.component-register-select {
  border-radius: 1rem;
}

/* "Não tem uma conta?" (login do cliente) vira o bloco de primeiro acesso:
   divisória, rótulo e botão contornado de largura total. */
.component-login-create-account {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
}
.component-login-create-account a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  border: 1.5px solid var(--blue);
  border-radius: 999rem;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.component-login-create-account a:hover { background: rgba(37, 99, 235, 0.06); }

/* Botões secundários do celular */
.layout-login-mobile-header__back,
.layout-register-mobile-header__back,
.layout-login-admin-link {
  border-radius: 999rem;
}

/* Aviso de cookies (src/shared/cookie-consent.js injeta um <style> com
   #cookie-banner DEPOIS deste arquivo — daí o "body" para ganhar em
   especificidade): só o canto dos botões, as cores são as de lá. */
body #cookie-banner .jcb-accept { border-radius: 999rem; }
body #cookie-banner .jcb-reject { border-radius: 999rem; }

/* Celular: a grade vira 1 coluna com 2 linhas automáticas (cabeçalho e
   formulário) e o min-height: 100vh era repartido entre as duas — sobrava uma
   faixa vazia de ~120px embaixo do cabeçalho. O cabeçalho fica no tamanho dele. */
@media (max-width: 768px) {
  .layout-login,
  .layout-register { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* =============================== DESKTOP =============================== */
@media (min-width: 769px) {
  .layout-login,
  .layout-register { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* ---------- formulário (esquerda) ---------- */
  .layout-login-form-area,
  .layout-register-form-area {
    order: -1;
    min-height: 100vh;
    padding: 6.4rem 4.8rem;
    align-items: center;
    justify-content: center;
    background: #f6f8fb;
  }
  .layout-login-form-box,
  .layout-register-form-box {
    width: min(100%, 40rem);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .layout-register-form-box { width: min(100%, 46rem); }

  /* "Voltar" deixa de ser botão flutuante no canto e vira link acima do logo */
  .layout-login-form-box > .button-login-back,
  .layout-register-form-box > .button-register-back {
    position: static;
    display: inline-flex;
    height: auto;
    margin: 0 0 2.8rem;
    padding: 0;
    gap: 0.6rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink-soft);
    font-size: 1.4rem;
    font-weight: 500;
  }
  .layout-login-form-box > .button-login-back:hover,
  .layout-register-form-box > .button-register-back:hover { color: var(--blue); transform: none; }
  .layout-login-form-box > .button-login-back svg,
  .layout-register-form-box > .button-register-back svg { width: 1.6rem; height: 1.6rem; }

  .auth-logo {
    display: block;
    height: 4.8rem;
    width: auto;
    max-width: 24rem;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 3.6rem;
  }

  .layout-login-form-header,
  .layout-register-form-header { margin-bottom: 3.2rem; }

  .component-login-input,
  .component-register-input,
  .component-register-select {
    height: 4.8rem;
    background-color: #fff;
  }
  .button-login-submit,
  .button-register-submit { height: 4.8rem; }

  /* ---------- marca (direita): cartão claro, texto em cima, composição embaixo ---------- */
  /* O fundo da grade aparece em volta do cartão (margem), igual ao do formulário. */
  .layout-login,
  .layout-register { background: #f6f8fb; }

  .layout-login-brand,
  .layout-register-brand {
    /* fica parado enquanto o formulário (o do cadastro é alto) rola */
    position: sticky;
    top: 2.4rem;
    align-self: start;
    height: calc(100vh - 4.8rem);
    min-height: 0;
    margin: 2.4rem 2.4rem 2.4rem 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3.2rem;
    padding: 5.6rem 4.8rem 4.8rem;
    border-radius: 3.2rem;
    overflow: hidden;
    border: 1px solid #d9e5fb;
    background:
      radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, 0.95), transparent 70%),
      linear-gradient(180deg, #f1f6ff 0%, #dfeafd 100%);
  }
  /* pontilhado azul bem leve, que some nas bordas; o brilho vira halo embaixo */
  .layout-login-brand::before,
  .layout-register-brand::before {
    background-image: radial-gradient(rgba(37, 99, 235, 0.16) 0.1rem, transparent 0.1rem);
    background-size: 2.6rem 2.6rem;
    opacity: 1;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 62%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 62%, #000 20%, transparent 75%);
  }
  .layout-login-brand::after,
  .layout-register-brand::after {
    width: 56rem;
    height: 56rem;
    top: auto;
    bottom: -18rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(37, 99, 235, 0.16);
    filter: blur(9rem);
  }

  .layout-login-brand-content,
  .layout-register-brand-content {
    order: -1;
    width: min(100%, 54rem);
    margin: 0 auto;
    text-align: center;
  }
  /* o logo agora abre o formulário; aqui fica só a etiqueta e o texto */
  .layout-login-brand-content .login-brand-logo,
  .layout-register-brand-content .register-brand-logo { display: none; }
  .layout-login-text,
  .layout-register-text { max-width: none; margin: 0 auto; }

  .login-brand-badge {
    margin: 0 auto 1.8rem;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.16);
    color: var(--blue);
  }
  .login-brand-badge--representante {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.2);
    color: #15803d;
  }
  .component-login-title,
  .component-register-title {
    font-size: 4rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: #0b1f3a;
    margin-bottom: 1.4rem;
  }
  .component-login-title span,
  .component-register-title span { color: var(--blue); }
  .component-login-title .login-title-plain { color: inherit; }
  .component-login-description,
  .component-register-description {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 1.7rem;
    line-height: 1.55;
    color: #4a5b70;
  }

  /* ---------- composição: moldura, halo e aviso (o centro é de cada tela) ---------- */
  .auth-visual {
    display: block;
    position: relative;
    z-index: 2;
    flex: none;
    /* as peças medem em cqw: acompanham a largura do painel */
    container-type: inline-size;
    width: min(100%, 76rem);
    height: clamp(34rem, 56vh, 56rem);
    margin: 0 auto;
  }
  /* halo azul atrás do centro */
  .auth-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0.08) 45%, transparent 70%);
  }

  /* aviso fixo, de vidro de verdade (backdrop-filter) */
  .auth-visual__aviso {
    position: absolute;
    z-index: 3;
    left: 2%;
    bottom: 4%;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 1.6rem;
    white-space: nowrap;
    font-size: 1.45rem;
    font-weight: 600;
    color: #0b1f3a;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(1.6rem) saturate(160%);
    backdrop-filter: blur(1.6rem) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(29, 78, 216, 0.35);
    animation: auth-flutua 7s ease-in-out infinite;
  }
  .auth-visual__aviso svg {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.6rem;
    border-radius: 1rem;
    color: #16a34a;
    background: #dcfce7;
  }

  @keyframes auth-flutua { 50% { translate: 0 -0.8rem; } }
}

/* Meia tela estreita (tablet deitado, janela pequena): a composição encolhe */
@media (min-width: 769px) and (max-width: 1100px) {
  .layout-login-brand,
  .layout-register-brand {
    top: 1.6rem;
    height: calc(100vh - 3.2rem);
    margin: 1.6rem 1.6rem 1.6rem 0;
    padding: 4.8rem 3.2rem 4rem;
    gap: 2.4rem;
    border-radius: 2.4rem;
  }
  .auth-visual { height: 32rem; }
  .auth-visual__aviso { display: none; }
  .component-login-title,
  .component-register-title { font-size: 3.2rem; }
}

/* Tela baixa (notebook de 768px de altura): menos ar para caber sem cortar */
@media (min-width: 769px) and (max-height: 820px) {
  .layout-login-brand,
  .layout-register-brand { padding-top: 4rem; padding-bottom: 3.2rem; gap: 2rem; }
  .auth-visual { height: clamp(28rem, 50vh, 40rem); }
  .component-login-title,
  .component-register-title { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-visual__aviso { animation: none; }
}