/* auth-asaas.css — telas de ACESSO do white label (login do admin, do cliente e do
   representante, cadastro, esqueci e redefinir a senha) no visual "tipo Asaas".
   Carregado DEPOIS do CSS da tela e de auth-tema.css (que servem também o login da UPWAGE,
   que NÃO carrega este arquivo). Desktop (≥ 769): cartão azul-claro à ESQUERDA (o texto e o
   painel de saúde de vidro com os selos — sem logo, ver "PAINEL DE SAÚDE" abaixo) e o
   formulário à DIREITA, direto no fundo claro, com a marca da empresa no topo.
   Celular: só o formulário. Logo: horizontal só quando a empresa enviou um
   (html[data-logo-cheio], src/shared/auth-logo.js); senão, símbolo + nome.
   O cadastro usa as mesmas peças com o nome "register": cada regra vale para os dois.
   Desfazer = tirar o <link> de cada tela. */

:root {
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --as-n10:  #fcfcfd;
  --as-n30:  #f7f8fa;
  --as-n200: #d1d6dc;
  --as-n300: #b8c0cb;
  --as-n600: #5e6877;
  --as-n900: #1d2125;
  /* os tokens que login-admin.css e auth-tema.css leem */
  --blue: var(--brand-600);
  --blue-h: var(--brand-700);
  --ink: var(--as-n900);
  --ink-mid: var(--as-n900);
  --ink-soft: var(--as-n600);
  --line: var(--as-n200);
  --surface: var(--as-n10);
  --bg-light: var(--as-n10);
}

body {
  font-family: "Geist", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02rem;
  background: var(--as-n10);
  color: var(--as-n900);
}

/* Logo do formulário: horizontal só quando a empresa enviou um (html[data-logo-cheio],
   login-admin.js); senão, símbolo + nome — nunca o logo base de outra empresa. */
.auth-marca { display: none; align-items: center; gap: 1.2rem; }
.auth-marca img { width: 4rem; height: 4rem; object-fit: contain; }
.auth-marca strong { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--as-n900); }

/* Formulário (os dois tamanhos) */
.component-login-form-title, .component-register-form-title { font-size: 2rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.02rem; color: var(--as-n900); margin-bottom: 0.4rem; }
.component-login-form-subtitle, .component-register-form-subtitle { font-size: 1.6rem; line-height: 1.5; color: var(--as-n600); }
.component-login-field, .component-register-field { margin-bottom: 2.4rem; }
.component-login-label, .component-register-label { font-size: 1.4rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.02rem; color: var(--as-n900); margin-bottom: 0.4rem; }
.component-login-input, .component-register-input {
  height: 4.8rem; padding: 0 1.6rem;
  border: 1px solid var(--as-n200); border-radius: 1.2rem;
  background-color: var(--as-n10); color: var(--as-n900);
  font-size: 1.6rem; font-weight: 400;
  transition: border-color 0.25s;
}
.component-login-input-password, .component-register-input-password { padding-right: 5rem; }
.component-login-input::placeholder, .component-register-input::placeholder { color: var(--as-n600); }
.component-login-input:hover:not(:focus), .component-register-input:hover:not(:focus) { border-color: var(--as-n300); }
.component-login-input:focus, .component-register-input:focus { border-color: var(--as-n200); box-shadow: none; outline: 2px solid var(--brand-500); outline-offset: -1px; }
.component-login-password-button, .component-register-password-button { height: 4.8rem; color: var(--as-n600); }
.component-login-password-button:hover, .component-register-password-button:hover { color: var(--brand-600); }
.component-login-message, .component-register-message { font-size: 1.4rem; }
/* tons do Asaas (texto forte de erro/sucesso; carregando no nosso azul) */
.component-login-message--error, .component-register-message--error { color: #b02a37; }
.component-login-message--success, .component-register-message--success { color: #146c43; }
.component-login-message--loading, .component-register-message--loading { color: var(--brand-600); }
.button-login-submit, .button-register-submit {
  height: 4.8rem; margin-top: 0.8rem; gap: 0.4rem;
  border-radius: 999px; background: var(--brand-600); color: var(--as-n10);
  font-size: 1.6rem; font-weight: 600; letter-spacing: 0;
  box-shadow: none; transition: background-color 0.15s ease-in-out;
}
.button-login-submit:hover, .button-register-submit:hover { background: var(--brand-700); transform: none; box-shadow: none; }
.button-login-submit:active, .button-register-submit:active { background: var(--brand-800); }
.button-login-submit:focus-visible, .button-register-submit:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.button-login-submit svg, .button-register-submit svg { width: 1.6rem; height: 1.6rem; }

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

  /* cartão da marca: à esquerda, 32 px de margem em volta, raio 24, degradê azul-claro */
  .layout-login-brand, .layout-register-brand {
    order: 0;
    top: 3.2rem;
    height: calc(100vh - 6.4rem);
    margin: 3.2rem 0 3.2rem 3.2rem;
    border: 0;
    border-radius: 2.4rem;
    background: linear-gradient(194deg, var(--brand-50) -4.42%, var(--brand-100) 103.95%);
  }
  .layout-login-brand::after, .layout-register-brand::after { background: rgba(37, 99, 235, 0.12); }
  .login-brand-badge { background: var(--as-n10); border-color: var(--brand-200); color: var(--brand-700); letter-spacing: 0.06em; }
  .component-login-title, .component-register-title { font-size: 3.6rem; font-weight: 500; letter-spacing: 0; color: var(--as-n900); }
  .component-login-title span, .component-register-title span { color: var(--brand-600); }
  .component-login-description, .component-register-description { font-size: 1.6rem; color: var(--as-n600); }

  /* formulário: à direita, centralizado na metade */
  .layout-login-form-area, .layout-register-form-area { order: 1; background: transparent; padding: 6.4rem 4.8rem; }
  .layout-login-form-box, .layout-register-form-box { width: min(100%, 40rem); }
  .layout-login-form-box > .button-login-back, .layout-register-form-box > .button-register-back { margin-bottom: 4rem; color: var(--as-n600); font-size: 1.4rem; font-weight: 400; }
  .layout-login-form-box > .button-login-back:hover, .layout-register-form-box > .button-register-back:hover { color: var(--brand-600); }
  .auth-logo { height: 5rem; max-width: 24rem; margin-bottom: 3.2rem; }
  .auth-marca { margin-bottom: 3.2rem; }
  html:not([data-logo-cheio]) .layout-login-form-box > .auth-logo, html:not([data-logo-cheio]) .layout-register-form-box > .auth-logo { display: none; }
  html:not([data-logo-cheio]) .layout-login-form-box > .auth-marca, html:not([data-logo-cheio]) .layout-register-form-box > .auth-marca { display: flex; }
  .layout-login-form-header, .layout-register-form-header { margin-bottom: 3.2rem; }
}
@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 0 1.6rem 1.6rem; }
  .component-login-title, .component-register-title { font-size: 2.8rem; }
}

/* =============================== PAINEL DE SAÚDE (desktop) ===============================
   .auth-visual--painel é o centro do cartão nas telas das empresas (10/10): um cartão
   de VIDRO com cara de app de saúde (batimentos com o pulso correndo no gráfico,
   oxigenação e pressão) — genérico, sem logo, igual para toda empresa — sobre manchas
   de luz coloridas e desfocadas, que aparecem borradas através do vidro, como no
   login do Asaas. Os serviços e o aviso são selos do mesmo vidro em volta. Tudo fora
   de palco 3D (o backdrop-filter não funciona dentro de preserve-3d). Antes, no
   mesmo dia, foi uma esfera de vidro — o dono não gostou. */
@media (min-width: 769px) {
  .auth-visual--painel::before { display: none; }

  /* manchas de luz atrás do vidro */
  .auth-luz {
    position: absolute;
    z-index: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(3.2rem);
    opacity: 0.8;
    animation: auth-luz 16s ease-in-out infinite alternate;
  }
  .auth-luz--1 { width: 38cqw; left: 16%; top: 12%; background: radial-gradient(circle at 40% 40%, #60a5fa, #2563eb 70%); }
  .auth-luz--2 { width: 30cqw; left: 54%; top: 34%; background: radial-gradient(circle at 40% 40%, #67e8f9, #0ea5e9 70%); animation-delay: -6s; }
  .auth-luz--3 { width: 24cqw; left: 32%; top: 58%; background: radial-gradient(circle at 40% 40%, #c4b5fd, #6366f1 70%); animation-delay: -11s; }

  /* o cartão de vidro */
  .auth-cartao {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: min(50cqw, 38rem);
    translate: -50% -50%;
    padding: 2.4rem 2.4rem 2rem;
    border-radius: 2.8rem;
    color: var(--as-n900);
    background: rgba(255, 255, 255, 0.42);
    -webkit-backdrop-filter: blur(2.4rem) saturate(180%);
    backdrop-filter: blur(2.4rem) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 3.2rem 6.4rem -2.4rem rgba(29, 78, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: auth-cartao-flutua 9s ease-in-out infinite;
  }
  .auth-cartao__topo { display: flex; align-items: center; gap: 1.2rem; }
  .auth-cartao__icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 0.8rem 1.6rem -0.6rem rgba(29, 78, 216, 0.6);
  }
  .auth-cartao__icone svg { width: 2.4rem; height: 2.4rem; animation: auth-cartao-bate 1.6s ease-in-out infinite; }
  .auth-cartao__rotulo { display: flex; flex-direction: column; line-height: 1.15; }
  .auth-cartao__rotulo small { font-size: 1.3rem; color: var(--as-n600); }
  .auth-cartao__rotulo strong { font-size: 2.8rem; font-weight: 600; letter-spacing: -0.02em; }
  .auth-cartao__rotulo em { margin-left: 0.4rem; font-size: 1.4rem; font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--as-n600); }
  .auth-cartao__selo {
    margin-left: auto;
    padding: 0.5rem 1.2rem;
    border-radius: 999rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #15803d;
    background: rgba(220, 252, 231, 0.85);
  }
  .auth-cartao__grafico { display: block; width: 100%; height: auto; margin: 1.6rem 0 1.4rem; overflow: visible; }
  .auth-cartao__area { fill: url(#acArea); }
  .auth-cartao__linha { fill: none; stroke: rgba(37, 99, 235, 0.35); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .auth-cartao__pulso {
    fill: none;
    stroke: #2563eb;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160 840;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 0.4rem rgba(59, 130, 246, 0.8));
    animation: auth-cartao-pulso 2.8s linear infinite;
  }
  .auth-cartao__dados { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .auth-cartao__dado {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1.4rem;
    font-size: 1.3rem;
    color: var(--as-n600);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
  }
  .auth-cartao__dado svg { flex: none; width: 1.8rem; height: 1.8rem; color: var(--brand-600); }
  .auth-cartao__dado b { margin-left: auto; font-size: 1.5rem; font-weight: 600; color: var(--as-n900); }

  /* selos de vidro */
  .auth-vidro,
  .auth-visual--painel .auth-visual__aviso {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    color: var(--as-n900);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(1.8rem) saturate(180%);
    backdrop-filter: blur(1.8rem) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 2rem 4rem -2rem rgba(29, 78, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: auth-flutua 7s ease-in-out infinite;
  }
  .auth-vidro {
    padding: 1.2rem 2.2rem 1.2rem 1.8rem;
    border-radius: 999rem;
    font-size: 1.8rem;
    font-weight: 500;
  }
  .auth-vidro svg { width: 2.4rem; height: 2.4rem; stroke-width: 1.8; color: var(--brand-700); }
  /* presos nas bordas do quadro: encostam só na margem do cartão (vidro sobre
     vidro) sem tampar o que está escrito nele */
  .auth-vidro--1 { right: 0; top: 8%; animation-delay: -1s; }
  .auth-vidro--2 { right: 0; top: 56%; animation-delay: -3s; }
  .auth-vidro--3 { left: 0; top: 20%; animation-delay: -5s; }
  .auth-vidro--4 { left: 0; top: 64%; animation-delay: -2s; }
  .auth-visual--painel .auth-visual__aviso {
    left: 0;
    right: 0;
    bottom: 2%;
    width: max-content;
    margin-inline: auto;
    padding: 1rem 2.2rem 1rem 1rem;
    border-radius: 1.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    animation-delay: -4s;
  }

  @keyframes auth-luz { 50% { translate: 3cqw -3cqw; scale: 1.1; } 100% { translate: -2cqw 2cqw; scale: 0.95; } }
  @keyframes auth-cartao-flutua { 50% { translate: -50% calc(-50% - 1rem); } }
  @keyframes auth-cartao-bate { 0%, 40%, 100% { scale: 1; } 10% { scale: 1.15; } 22% { scale: 1.05; } }
  @keyframes auth-cartao-pulso { to { stroke-dashoffset: 0; } }
}
/* Abaixo de 1300px o quadro fica estreito: sem sobra dos lados, qualquer selo tamparia
   o que está escrito no cartão — somem, e o cartão ocupa mais do quadro (uma regra só
   até 1299: com 50cqw entre 1101 e ~1275 ele encolhia de repente e o "Normal" vazava). */
@media (min-width: 769px) and (max-width: 1299px) {
  .auth-vidro { display: none; }
  .auth-cartao { width: min(72cqw, 34rem); padding: 1.8rem 1.8rem 1.6rem; border-radius: 2.2rem; }
  .auth-cartao__rotulo strong { font-size: 2.4rem; }
}
/* Quadro bem estreito (meia tela de ~770px): sem lugar para o selo "Normal" no topo. */
@container (max-width: 35rem) {
  .auth-cartao__selo { display: none; }
}
/* Até 1100px o quadro tem altura fixa (32rem, auth-tema.css) e o aviso subia sobre a
   linha "Pressão" — vale o display: none do auth-tema.css (aqui ele perdia por
   especificidade). */
@media (min-width: 769px) and (max-width: 1100px) {
  .auth-visual--painel .auth-visual__aviso { display: none; }
}
/* Tela baixa (até 760px de altura): o quadro encolhe e o aviso subia sobre a linha
   "Pressão" do cartão — fica só o cartão. */
@media (min-width: 769px) and (max-height: 760px) {
  .auth-visual--painel .auth-visual__aviso { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-luz, .auth-cartao, .auth-cartao__icone svg, .auth-cartao__pulso, .auth-vidro, .auth-visual--painel .auth-visual__aviso { animation: none; }
  .auth-cartao__pulso { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* =============================== CELULAR =============================== */
/* Só o formulário: o cabeçalho fica com o "Voltar"; o logo vem no topo do formulário. */
@media (max-width: 768px) {
  .layout-login-mobile-header, .layout-register-mobile-header { height: 5.6rem; padding: 0 1.6rem; background: var(--as-n10); border-bottom-color: var(--as-n200); }
  .layout-login-mobile-header__logo, .layout-register-mobile-header__logo { display: none; }
  .layout-login-mobile-header__back, .layout-register-mobile-header__back { margin-left: auto; height: 3.2rem; border-color: var(--brand-600); color: var(--brand-600); font-size: 1.4rem; }
  .layout-login-form-area, .layout-register-form-area { background: var(--as-n10); padding: 3.2rem 1.6rem 4.8rem; }
  .layout-login-form-box, .layout-register-form-box { max-width: 44rem; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .layout-login-form-box > .auth-logo, .layout-register-form-box > .auth-logo { display: block; height: 4rem; width: auto; max-width: 20rem; object-fit: contain; object-position: left center; margin: 0 0 2.4rem; }
  .auth-marca { margin: 0 0 2.4rem; }
  html:not([data-logo-cheio]) .layout-login-form-box > .auth-logo, html:not([data-logo-cheio]) .layout-register-form-box > .auth-logo { display: none; }
  html:not([data-logo-cheio]) .layout-login-form-box > .auth-marca, html:not([data-logo-cheio]) .layout-register-form-box > .auth-marca { display: flex; }
  .component-login-form-title, .component-register-form-title { font-size: 2.4rem; }
}