/**
 * login.css — layout das telas de autenticação (login interno, portal do
 * cliente, MFA, troca de senha, erro). Os controles (botão, campo, alerta)
 * vêm de ui.css; aqui fica só a moldura: fundo da marca e cartão central.
 */

body.auth-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  /* mesma cor de fundo da barra lateral (sidebar_bg da gestão de marca) */
  background-color: var(--login-bg, var(--sidebar-bg, #090d16));
  background-image:
    radial-gradient(at 15% 10%, color-mix(in srgb, var(--brand-accent, #F7A81B) 12%, transparent) 0px, transparent 50%),
    radial-gradient(at 85% 90%, color-mix(in srgb, var(--tone-green, #059669) 10%, transparent) 0px, transparent 50%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.auth-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }

.login-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 32px 28px 24px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-head img { height: 40px; max-width: 100%; object-fit: contain; margin-bottom: 8px; }
/* Nome do produto no lugar da logo (sem logo para o fundo em questão). */
.auth-wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.auth-wordmark.dark { color: var(--primary); }
.auth-title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  letter-spacing: -0.02em; color: var(--foreground); }
.auth-title .accent { color: var(--brand-accent); }
.auth-sub { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .ui-btn { width: 100%; }
.auth-sso .ui-btn { width: 100%; height: 40px; }

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: var(--text-xs); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-links { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-xs); color: var(--muted-foreground); }
.auth-foot { margin: 0; text-align: center; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.55); }

/* Celular: menos respiro e campos a 16px (evita zoom automático do iOS). */
@media (max-width: 480px) {
  body.auth-body { padding: 12px; align-items: flex-start; padding-top: 32px; }
  .login-card { padding: 24px 18px 20px; }
  .auth-form .ui-input { font-size: 16px; }
}

.auth-qr { display: flex; justify-content: center; }
.auth-qr svg, .auth-qr img { max-width: 200px; height: auto; }


/* =========================================================================
   Login com painel da marca (_auth_layout.html): body.auth-split com
   data-layout = esquerda | direita | centro e data-claro (fundo claro).
   ========================================================================= */
body.auth-split { display: block; padding: 0; background-image: none; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 40px 48px; overflow: hidden; background: var(--login-bg, var(--sidebar-bg)); color: var(--auth-panel-fg, #fff); }
body.auth-split[data-claro="1"] { --auth-panel-fg: var(--foreground); }
.auth-panel > * { position: relative; }
.auth-panel-bg { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.auth-arcs { position: absolute !important; right: -18%; bottom: -12%; width: 80%; max-width: 640px; fill: none;
  stroke: var(--brand-accent); stroke-width: 9; opacity: .2; pointer-events: none; }
.auth-panel-logo { max-height: 44px; max-width: 240px; object-fit: contain; }
.auth-panel-text { max-width: 520px; }
.auth-headline { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.02em; }
.auth-accent { color: var(--brand-accent); }
.auth-lead { margin: 16px 0 0; font-size: var(--text-base); line-height: 1.55; opacity: .88; max-width: 46ch; }
.auth-panel-foot { margin: 0; font-size: var(--text-xs); opacity: .7; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 24px;
  background: var(--page-bg); }
.auth-split .login-card { width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.auth-split .auth-head { align-items: flex-start; text-align: left; }
.auth-split .auth-card-logo { display: none; margin-bottom: 8px; }
.auth-split .auth-card-logo img { height: 36px; margin: 0; }
.auth-split .auth-foot { display: none; color: var(--muted-foreground); }

/* Painel à direita */
body.auth-split[data-layout="direita"] .auth-panel { order: 2; }

/* Centralizado: o painel vira o fundo; logo principal e rodapé com o cartão. */
body.auth-split[data-layout="centro"] .auth-shell { grid-template-columns: minmax(0, 1fr); position: relative; }
body.auth-split[data-layout="centro"] .auth-panel { position: absolute; inset: 0; padding: 0; }
body.auth-split[data-layout="centro"] .auth-panel-top,
body.auth-split[data-layout="centro"] .auth-panel-text,
body.auth-split[data-layout="centro"] .auth-panel-foot { display: none; }
body.auth-split[data-layout="centro"] .auth-main { position: relative; background: transparent; }
body.auth-split[data-layout="centro"] .auth-card-logo { display: block; }
body.auth-split[data-layout="centro"] .auth-head { align-items: center; text-align: center; }
body.auth-split[data-layout="centro"] .auth-foot { display: block; color: var(--auth-panel-fg, rgba(255, 255, 255, .7)); opacity: .75; }

/* Tablet/celular: só o cartão, com a logo principal; painel vira faixa. */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { padding: 20px 24px; gap: 12px; }
  .auth-panel-text, .auth-panel-foot, .auth-arcs { display: none; }
  body.auth-split[data-layout="direita"] .auth-panel { order: 0; }
  .auth-main { justify-content: flex-start; padding: 24px 12px 32px; }
  .auth-split .auth-foot { display: block; }
}
/* ---- Modelo Imersivo: cor/foto da marca na tela toda, cartão translúcido ---- */
body.auth-split[data-template="imersivo"] .auth-shell { position: relative; background: var(--login-bg, var(--sidebar-bg)); overflow: hidden; }
body.auth-split[data-template="imersivo"] .auth-panel { position: static; background: transparent; justify-content: center; }
body.auth-split[data-template="imersivo"] .auth-panel > * { z-index: 1; }
body.auth-split[data-template="imersivo"] .auth-panel-top { position: absolute; top: 40px; left: 48px; }
body.auth-split[data-template="imersivo"] .auth-panel-foot { position: absolute; bottom: 32px; left: 48px; }
body.auth-split[data-template="imersivo"][data-layout="direita"] .auth-panel-top,
body.auth-split[data-template="imersivo"][data-layout="direita"] .auth-panel-foot { left: auto; right: 48px; }
body.auth-split[data-template="imersivo"] .auth-panel-bg { opacity: .5; }
body.auth-split[data-template="imersivo"] .auth-main { position: relative; z-index: 1; background: transparent; }
body.auth-split[data-template="imersivo"] .login-card { background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .25); box-shadow: var(--shadow-xl); }
body.auth-split[data-template="imersivo"] .auth-headline { font-size: clamp(2rem, 3.6vw, 3.2rem); }

/* ---- Modelo Minimalista: página clara, logo e chamada centralizadas acima do cartão ---- */
body.auth-split[data-template="minimal"] { background: var(--page-bg); }
body.auth-split[data-template="minimal"] .auth-shell { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center;
  gap: 8px; padding: 48px 16px; position: relative; overflow: hidden; }
body.auth-split[data-template="minimal"] .auth-panel { position: static; background: transparent; color: var(--foreground);
  padding: 0; gap: 16px; align-items: center; text-align: center; overflow: visible; max-width: 560px; }
body.auth-split[data-template="minimal"] .auth-panel-bg { display: none; }
body.auth-split[data-template="minimal"] .auth-arcs { position: fixed !important; opacity: .12; }
body.auth-split[data-template="minimal"] .auth-panel-top { display: flex; justify-content: center; }
body.auth-split[data-template="minimal"] .auth-panel-logo { max-height: 56px; }
body.auth-split[data-template="minimal"] .auth-headline { font-size: clamp(1.5rem, 2.4vw, 2rem); }
body.auth-split[data-template="minimal"] .auth-accent { color: var(--brand-accent); }
body.auth-split[data-template="minimal"] .auth-lead { margin: 10px auto 0; color: var(--muted-foreground); opacity: 1; }
body.auth-split[data-template="minimal"] .auth-panel-foot { display: none; }
body.auth-split[data-template="minimal"] .auth-main { background: transparent; padding: 16px 0 0; }
body.auth-split[data-template="minimal"] .auth-foot { display: block; }
body.auth-split[data-template="minimal"] .auth-head { align-items: center; text-align: center; }

/* Logo maior no painel (logos com margem interna própria aparecem pequenas). */
.auth-panel-logo { max-height: 64px; max-width: 280px; }