/* Entrada do sistema (login + 2FA) — design rev. 2. Cores SÓ das variáveis de core/css/tokens_app.css
   (geradas de design/tokens.json, as mesmas do /app/). Sem framework: página leve, fora do /app/. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--color-bg-page); color: var(--color-ink-body);
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5;
}
a { color: var(--color-brand); }
button, input { font: inherit; }

.ent { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; }
@media (max-width: 900px) { .ent { grid-template-columns: 1fr; } }

/* ── lado da marca: foto da igreja bem apagada ao fundo, versículo e saudação (09/10/2026, pedido do dono) ── */
.ent-lado {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; background: var(--color-bg-sidebar);
  /* sem corte seco: o lado da marca se dissolve no fundo do formulário */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 220px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 220px), transparent);
}
/* a antiga "aurora" (degradê) virou a foto: mesma caixa, sem as manchas coloridas */
.ent-aurora { position: absolute; inset: 0; pointer-events: none;
  background: url("../../core/image/igreja_fundo.3537947ec645.webp") no-repeat right -40px bottom -30px / auto 92%;
  filter: grayscale(1) contrast(1.05); opacity: .06; mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 62%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 75% at 72% 62%, #000 35%, transparent 80%); }
.ent-aurora span { display: none; }
:root[data-theme="light"] .ent-aurora { opacity: .08; mix-blend-mode: multiply; }
.ent-grade { position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); }
.ent-marca, .ent-verso, .ent-rodape-lado { position: relative; }
.ent-marca { display: flex; align-items: center; gap: 14px; }
.ent-marca img { width: 48px; height: 48px; object-fit: contain; }
.ent-marca b { display: block; color: var(--color-ink-strong); font-size: 17px; letter-spacing: -.01em; }
.ent-marca small { color: var(--color-ink-muted); font-size: 12.5px; }
.ent-verso { max-width: 480px; }
.ent-saudacao { color: var(--color-brand); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.ent-verso blockquote { margin: 0; color: var(--color-ink-strong); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.ent-verso cite { display: block; margin-top: 14px; color: var(--color-ink-muted); font-style: normal; font-size: 13px; }
.ent-rodape-lado { display: flex; gap: 18px; color: var(--color-ink-faint); font-size: 12px; flex-wrap: wrap; }
.ent-rodape-lado span { display: inline-flex; align-items: center; gap: 6px; }
.ent-rodape-lado svg { width: 14px; height: 14px; color: var(--color-brand); }
@media (max-width: 900px) { .ent-lado { display: none; } }  /* depois do .ent-lado acima, senão o display:flex ganha */

/* ── lado do formulário ── */
.ent-form { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }
.ent-topo { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; }
.ent-cartao { width: 100%; max-width: 380px; animation: entra .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ent-cartao { animation: none; } }
.ent-logo-movel { display: none; width: 56px; height: 56px; margin: 0 auto 18px; }
@media (max-width: 900px) { .ent-logo-movel { display: block; } }
.ent-cartao h1 { margin: 0 0 6px; color: var(--color-ink-strong); font-size: 26px; letter-spacing: -.02em; font-weight: 700; }
.ent-sub { margin: 0 0 26px; color: var(--color-ink-muted); font-size: 13.5px; }
.ent-passos { display: flex; gap: 6px; margin: 0 0 22px; }
.ent-passos i { height: 4px; flex: 1; border-radius: 99px; background: var(--color-hover); }
.ent-passos i.feito { background: var(--color-brand); }

.ent-campo { margin-bottom: 16px; }
.ent-campo label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--color-ink-body); font-size: 12.5px; font-weight: 600; }
.ent-entrada { display: flex; align-items: center; height: 46px; border: 1px solid var(--color-line-strong); border-radius: 12px;
  background: var(--color-bg-field); transition: border-color .15s, box-shadow .15s; }
.ent-entrada:focus-within { border-color: var(--color-brand-border); box-shadow: 0 0 0 4px var(--color-brand-soft); }
.ent-entrada > svg { width: 18px; height: 18px; margin: 0 4px 0 14px; color: var(--color-ink-muted); flex: none; }
.ent-entrada input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--color-ink-strong); font-size: 14px; }
.ent-entrada input::placeholder { color: var(--color-ink-faint); }
/* Senha salva preenchida pelo navegador: mantém as cores do campo (o Chrome pinta o fundo com a cor dele) */
.ent-entrada input:-webkit-autofill, .ent-entrada input:-webkit-autofill:hover, .ent-entrada input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-ink-strong); caret-color: var(--color-ink-strong);
  transition: background-color 9999s ease-out 0s; }
.ent-entrada input:autofill { background: transparent; }
.ent-olho { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 3px; border: 0; border-radius: 9px;
  background: transparent; color: var(--color-ink-muted); cursor: pointer; }
.ent-olho:hover { background: var(--color-hover); color: var(--color-ink-strong); }
.ent-olho svg { width: 18px; height: 18px; }
.ent-caps { display: none; margin-top: 6px; color: var(--color-warn); font-size: 12px; }
.ent-caps.visivel { display: block; }

.ent-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 6px; border: 0; border-radius: 12px;
  background: var(--color-brand); color: var(--color-ink-on-brand); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s; }
.ent-botao:hover { background: var(--color-brand-strong); }
.ent-botao:active { transform: scale(.99); }
.ent-botao[disabled] { opacity: .7; cursor: progress; }
.ent-botao svg { width: 18px; height: 18px; }
.ent-botao .gira { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.ent-botao-claro { background: transparent; color: var(--color-ink-strong); border: 1px solid var(--color-line-strong); }
.ent-botao-claro:hover { background: var(--color-hover); }
.ent-icone-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-line-strong);
  border-radius: 10px; background: var(--color-bg-raised); color: var(--color-ink-body); cursor: pointer; }
.ent-icone-btn:hover { color: var(--color-ink-strong); }
.ent-icone-btn svg { width: 17px; height: 17px; }

.ent-aviso { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; font-size: 13px; }
.ent-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ent-aviso b { display: block; color: inherit; }
.ent-aviso.erro { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent); }
.ent-aviso.info { background: color-mix(in srgb, var(--color-info) 10%, transparent); color: var(--color-ink-body); border: 1px solid color-mix(in srgb, var(--color-info) 25%, transparent); }
.ent-aviso.info svg { color: var(--color-info); }
.ent-erro-tremer { animation: tremer .4s; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* código de 6 dígitos */
.ent-digitos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; }
.ent-digitos input { width: 100%; height: 56px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: var(--color-bg-field);
  color: var(--color-ink-strong); text-align: center; font-size: 22px; font-weight: 700; font-family: 'JetBrains Mono', monospace; outline: 0; caret-color: var(--color-brand); }
.ent-digitos input:focus { border-color: var(--color-brand-border); box-shadow: 0 0 0 4px var(--color-brand-soft); }
.ent-digitos input.cheio { border-color: var(--color-brand-border); }
.ent-link { display: inline-block; margin-top: 12px; border: 0; background: none; padding: 0; color: var(--color-brand); font-size: 13px; font-weight: 600; cursor: pointer; }
.ent-link:hover { text-decoration: underline; }
.ent-centro { text-align: center; }
.ent-oculto { display: none !important; }

/* QR e códigos de reserva */
.ent-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 20px; padding: 18px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-bg-raised); }
.ent-qr img { width: 184px; height: 184px; border-radius: 10px; background: #fff; padding: 8px; }
.ent-segredo { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.ent-segredo code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--color-bg-field); color: var(--color-ink-strong);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .06em; word-break: break-all; }
.ent-lista-passos { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: p; }
.ent-lista-passos li { position: relative; padding: 0 0 10px 34px; color: var(--color-ink-body); font-size: 13px; counter-increment: p; }
.ent-lista-passos li::before { content: counter(p); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-brand-soft); color: var(--color-brand); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ent-codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 14px; border: 1px dashed var(--color-line-strong); border-radius: 14px; background: var(--color-bg-raised); }
.ent-codigos code { padding: 8px; border-radius: 8px; background: var(--color-bg-field); color: var(--color-ink-strong); text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: .08em; }
.ent-acoes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ent-acoes .ent-botao { margin: 0; height: 40px; font-size: 12.5px; }
.ent-confirma { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 6px; color: var(--color-ink-body); font-size: 13px; cursor: pointer; }
.ent-confirma input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-brand); }

.ent-rodape { margin-top: 28px; color: var(--color-ink-faint); font-size: 12px; text-align: center; }
.ent-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; color: var(--color-ink-faint); font-size: 12px; }
.ent-seguro svg { width: 14px; height: 14px; color: var(--color-ok); }
@media print { .ent-lado, .ent-topo, .ent-acoes, .ent-confirma, .ent-botao, .ent-rodape { display: none !important; } .ent { display: block; } }