/* ============================================================
   Tela de login — Sistema Notário
   Layout split-screen: painel de marca (fosco/tijolo) + formulário.
   Tema claro fixo. Fontes: Fraunces (título/monograma) + Inter.
   ============================================================ */

:root{
  --tinta:#1A1614;
  --papel:#FBF9F7;
  --linha:#E7DFD8;
  --linha-forte:#D9CEC4;
  --texto:#4B443F;
  --texto-suave:#8A817B;
  --marca:#9E1B1B;
  --marca-escura:#7E1414;
  --marca-clara:#B31D1D;
  --campo-bg:#FFFFFF;
  --card-bg:#FFFFFF;
  --sombra:0 24px 60px -26px rgba(26,22,20,.34);
  --foco:rgba(158,27,27,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;background:var(--card-bg);color:var(--texto);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* estrutura: tela inteira ----------------------------------- */
.shell{
  width:100%;min-height:100vh;
  display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--card-bg);overflow:hidden;
}

/* painel de marca (fosco/tijolo) ---------------------------- */
.marca{
  position:relative;overflow:hidden;color:#f3e3df;
  padding:48px 44px;display:flex;flex-direction:column;min-height:540px;
  background:linear-gradient(158deg,#743028 0%, #5f2620 46%, #3f1712 100%);
}
.aura{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(50% 44% at 24% 24%, rgba(150,70,50,.20), transparent 68%);
  animation:respirar 12s ease-in-out infinite}
/* monograma "N" gravado (baixo-relevo) */
.monograma{position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:-6%;bottom:-14%;line-height:.7;
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:min(46vh,440px);
  color:rgba(60,8,8,.42);
  text-shadow:0 2px 0 rgba(255,255,255,.10), 0 -1px 1px rgba(0,0,0,.30);
  mix-blend-mode:multiply}
.marca::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(158deg, transparent 40%, rgba(0,0,0,.30) 100%)}
.marca > *:not(.aura):not(.monograma){position:relative;z-index:2}

.marca-frase{font-family:Inter,system-ui,sans-serif;font-weight:600;
  font-size:23px;line-height:1.25;color:rgba(255,255,255,.94);
  max-width:14ch;text-transform:uppercase;letter-spacing:.14em;margin:0}
.marca-frase .e{font-weight:400;opacity:.7;margin:0 .04em}

.painel-blocos{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.bloco{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:15px 16px;transition:background .16s, border-color .16s, transform .06s}
a.bloco:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
a.bloco:active{transform:translateY(1px)}
.bloco-selo{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff}
.bloco-selo svg{width:20px;height:20px}
.bloco-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bloco-txt strong{font-size:14px;font-weight:600;color:#fff;letter-spacing:.01em}
.bloco-txt small{font-size:11.5px;color:rgba(255,255,255,.72)}
.bloco-seta{flex:none;width:19px;height:19px;color:rgba(255,255,255,.82);margin-left:auto;transition:transform .16s}
a.bloco:hover .bloco-seta{transform:translateX(3px)}

/* coluna do formulário -------------------------------------- */
.form-col{padding:40px clamp(36px,9vw,120px) 32px;display:flex;flex-direction:column;
  justify-content:center}
.form-col > *{width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.logo{width:176px;height:auto;display:block;margin-bottom:30px}
.titulo{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:27px;
  color:var(--tinta);margin:0;letter-spacing:-.01em}
.sub{margin:8px 0 30px;font-size:13.5px;color:var(--texto-suave)}

/* faixa de erro (página de falha de login) */
.erro-login{display:flex;align-items:center;gap:9px;margin:-8px 0 24px;
  font-size:13px;color:var(--marca-escura);
  background:#FCEDEC;border:1px solid #F3C9C6;border-radius:11px;padding:11px 13px}
.erro-login svg{flex:none;width:17px;height:17px;color:var(--marca)}

form{display:flex;flex-direction:column;gap:17px;margin:0}
.campo{display:flex;flex-direction:column;gap:7px}
label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave)}
.in{position:relative;display:flex;align-items:center}
.in > svg{position:absolute;left:15px;width:17px;height:17px;color:var(--texto-suave);pointer-events:none}
.in input[type=text],.in input[type=password]{
  width:100%;font:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--campo-bg);border:1px solid var(--linha-forte);border-radius:12px;
  padding:13px 14px 13px 44px;transition:border-color .15s, box-shadow .15s}
.in input#id_password{padding-right:46px}
.in input::placeholder{color:var(--texto-suave);opacity:.7}
.in input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 4px var(--foco)}
.olho{position:absolute;right:8px;width:32px;height:32px;border:none;background:none;
  display:grid;place-items:center;color:var(--texto-suave);cursor:pointer;border-radius:8px;padding:0}
.olho svg{width:18px;height:18px}
.olho:hover{color:var(--marca)}
.olho:focus-visible{outline:none;box-shadow:0 0 0 3px var(--foco);color:var(--marca)}

.linha-aux{display:flex;align-items:center;justify-content:space-between;margin-top:-2px}
.lembrar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto);cursor:pointer}
.lembrar input{accent-color:var(--marca);width:15px;height:15px}
.esqueci{font-size:13px;color:var(--marca);text-decoration:none;font-weight:500}
.esqueci:hover{text-decoration:underline}

.recaptcha-box{display:flex;justify-content:center;margin:2px 0}

.entrar{
  margin-top:8px;width:100%;font:inherit;font-size:15px;font-weight:600;color:#fff;cursor:pointer;
  background:var(--marca);border:1px solid var(--marca-escura);border-radius:12px;
  padding:14px 20px;transition:background .15s, transform .05s}
.entrar:hover{background:var(--marca-escura)}
.entrar:active{transform:translateY(1px)}
.entrar:focus-visible{outline:none;box-shadow:0 0 0 4px var(--foco)}

.aviso{font-size:12.5px;color:var(--marca-clara);text-align:center;min-height:1em;margin:2px 0 0}

.rodape{margin-top:28px;padding-top:22px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:3px}
.rodape .cart{font-size:13px;font-weight:600;color:var(--tinta);letter-spacing:.02em}
.rodape .cop{font-size:11.5px;color:var(--texto-suave)}
.rodape a{color:var(--marca);text-decoration:none}
.rodape a:hover{text-decoration:underline}

@keyframes respirar{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.aura{animation:none}}

/* mobile: o login vem primeiro ------------------------------ */
@media (max-width:730px){
  .shell{grid-template-columns:1fr}
  .form-col{order:1;padding:34px 26px 26px}
  .marca{order:2;min-height:auto;padding:28px 26px 30px}
  .logo{width:160px;margin-bottom:24px}
  .marca-frase{font-size:20px;margin-bottom:20px}
  .painel-blocos{margin-top:0}
  .monograma{display:none}
}