/* =============================================================================
   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, com a
   composição .auth-visual (ícones genéricos de benefício + o símbolo da
   empresa num cartão — white label, nada de marca de terceiro) e o texto.
   Celular: o layout de sempre (cabeçalho com logo + formulário), só o formato.

   As CORES estão nos tokens de cada página (--bg, --blue, --ink…); aqui é
   forma, escala e fonte. 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) ---------- */
  .layout-login-brand,
  .layout-register-brand {
    /* fica parado enquanto o formulário (o do cadastro é alto) rola */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5.6rem;
    padding: 6.4rem;
  }
  .layout-login-brand-content,
  .layout-register-brand-content { width: min(100%, 52rem); margin: 0 auto; }
  /* 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; }
  .login-brand-badge { margin-left: 0; }
  .component-login-title,
  .component-register-title { font-size: 3.6rem; }

  /* ---------- composição ---------- */
  .auth-visual {
    display: block;
    position: relative;
    z-index: 2;
    width: min(100%, 56rem);
    height: clamp(30rem, 44vh, 42rem);
    margin: 0 auto;
  }

  .auth-visual__cartao {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56%;
    aspect-ratio: 1.586;
    transform: translate(-50%, -50%);
    rotate: -6deg;
    padding: 2.2rem;
    border-radius: 2rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 42%, #1e3a8a 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 3.2rem 6.4rem -1.6rem rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .auth-visual__cartao::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%);
  }
  .auth-visual__simbolo {
    position: relative;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0.6rem;
    border-radius: 1.2rem;
    background: #fff;
    object-fit: contain;
  }
  .auth-visual__chip-cartao {
    position: absolute;
    top: 2.4rem;
    right: 2.2rem;
    width: 4.2rem;
    height: 3.2rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    opacity: 0.9;
  }
  .auth-visual__cartao-rotulo {
    position: absolute;
    left: 2.2rem;
    bottom: 4.4rem;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .auth-visual__cartao-linha {
    position: absolute;
    left: 2.2rem;
    bottom: 2.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    opacity: 0.82;
  }

  .auth-visual__tile {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.6rem 0.9rem 0.9rem;
    border-radius: 1.4rem;
    background: #fff;
    color: #0b1f33;
    font-size: 1.4rem;
    box-shadow: 0 1.6rem 3.2rem -1.2rem rgba(0, 0, 0, 0.5);
    animation: auth-flutua 6s ease-in-out infinite;
  }
  .auth-visual__tile svg {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.8rem;
    border-radius: 1rem;
    background: #eff6ff;
    color: #2563eb;
    stroke-width: 2;
  }
  .auth-visual__tile b { font-weight: 700; }
  .auth-visual__tile--1 { top: 2%;   left: 2%;   rotate: -4deg; }
  .auth-visual__tile--2 { top: 8%;   right: 0;   rotate: 3deg;  animation-delay: -2s; }
  .auth-visual__tile--3 { top: 60%;  left: -1%;  rotate: 3deg;  animation-delay: -4s; }
  .auth-visual__tile--4 { bottom: 6%; right: 3%; rotate: -3deg; animation-delay: -1s; }
  .auth-visual__tile--5 { bottom: -1%; left: 34%; rotate: 2deg; animation-delay: -3s; }

  .auth-visual__icone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #bfdbfe;
    animation: auth-flutua 7s ease-in-out infinite;
  }
  .auth-visual__icone svg { width: 2.2rem; height: 2.2rem; }
  .auth-visual__icone--1 { top: 30%;  left: 12%;  animation-delay: -1s; }
  .auth-visual__icone--2 { top: 30%;  right: 10%; animation-delay: -3s; }
  .auth-visual__icone--3 { bottom: 22%; left: 18%; animation-delay: -5s; }

  @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 { padding: 4.8rem 3.2rem; gap: 4rem; }
  .auth-visual { height: 30rem; }
  .auth-visual__cartao { width: 64%; }
  .auth-visual__tile { font-size: 1.2rem; padding: 0.7rem 1.2rem 0.7rem 0.7rem; }
  .auth-visual__tile svg { width: 3rem; height: 3rem; padding: 0.6rem; }
  .auth-visual__icone { display: none; }
  .component-login-title,
  .component-register-title { font-size: 3rem; }
}

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