/* ================================================================
   NotaFlow · telas de autenticação (login, cadastro, recuperar senha)
   Depende das variáveis definidas em style.css (tema claro/escuro).
   ================================================================ */

.cena{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 700px at 78% 12%, rgba(42,162,255,.16), transparent 60%),
    radial-gradient(900px 600px at 8% 92%, rgba(42,162,255,.10), transparent 55%),
    linear-gradient(160deg,#0b1021 0%,#0a0f1f 55%,#0c1226 100%);
}
:root[data-theme="light"] .cena{
  background:
    radial-gradient(1100px 700px at 78% 12%, rgba(42,162,255,.14), transparent 60%),
    radial-gradient(900px 600px at 8% 92%, rgba(42,162,255,.10), transparent 55%),
    linear-gradient(160deg,#eef3fb 0%,#e6edf7 55%,#eaf1fb 100%);
}
/* grade/circuito sutil */
.cena::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(90,130,200,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,130,200,.06) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%, #000 40%, transparent 85%);
          mask-image:radial-gradient(120% 90% at 50% 20%, #000 40%, transparent 85%);
}

/* botão de tema no canto */
.cena .tema-toggle{ position:absolute; top:22px; right:24px; z-index:5; }

/* ---------- lado esquerdo (marca / hero) ---------- */
.hero{
  position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:center; padding:64px 60px; gap:30px;
}
.marca{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px; }
.marca .logo{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--azul2),var(--azul));
  box-shadow:0 8px 26px rgba(42,162,255,.45); color:#fff;
}
.marca .nome{ font-size:22px; color:var(--titulo); }
.marca .nome b{ color:var(--azulc); }
.marca .sub{ font-size:11px; color:var(--suave); letter-spacing:2px; text-transform:uppercase; margin-top:1px; }

.hero h1{ font-size:40px; line-height:1.12; font-weight:800; margin:0; max-width:14ch; color:var(--titulo); }
.hero h1 .destaque{ color:var(--azul2); }
.hero p.tag{ margin:0; color:var(--suave); font-size:16px; max-width:40ch; }

/* cadeado com aneis brilhantes */
.emblema{ position:relative; width:210px; height:210px; margin-top:6px; }
.anel{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(42,162,255,.25); }
.anel.a2{ inset:18px; border-color:rgba(42,162,255,.35); border-style:dashed; animation:girar 14s linear infinite; }
.anel.a3{ inset:38px; border-color:rgba(91,184,255,.55); animation:girar 9s linear infinite reverse; }
.nucleo{
  position:absolute; inset:58px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, #17385f, #0d1c33 70%);
  box-shadow:0 0 40px rgba(42,162,255,.5), inset 0 0 26px rgba(42,162,255,.35);
  color:var(--azulc); animation:pulsar 3.2s ease-in-out infinite;
}
.nucleo svg{ width:46px; height:46px; filter:drop-shadow(0 0 8px rgba(91,184,255,.9)); }
@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes pulsar{ 0%,100%{ box-shadow:0 0 30px rgba(42,162,255,.35), inset 0 0 22px rgba(42,162,255,.28); } 50%{ box-shadow:0 0 55px rgba(42,162,255,.65), inset 0 0 30px rgba(42,162,255,.45); } }

/* ---------- lado direito (formulario) ---------- */
.painel{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.card{
  width:100%; max-width:390px; padding:38px 34px 32px;
  background:var(--card-bg); border:1px solid var(--linha2); border-radius:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.05);
}
.card h2{ margin:0 0 4px; font-size:24px; font-weight:700; color:var(--titulo); }
.card .desc{ margin:0 0 24px; color:var(--suave); font-size:14px; }

.card .campo{ position:relative; margin-bottom:16px; }
.card .campo label{ display:block; font-size:12px; color:var(--suave); margin-bottom:7px; letter-spacing:.3px; text-transform:none; }
.card .campo input{ width:100%; }

.btn-entrar{
  width:100%; margin-top:6px; padding:14px 16px; border:0; border-radius:11px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--azulc),var(--azul));
  box-shadow:0 12px 30px rgba(42,162,255,.4); transition:transform .1s, box-shadow .2s, filter .2s;
}
.btn-entrar:hover{ filter:brightness(1.06); box-shadow:0 16px 38px rgba(42,162,255,.55); }
.btn-entrar:active{ transform:translateY(1px); }

.links{ display:flex; justify-content:space-between; margin-top:20px; font-size:13px; }
.links.centro{ justify-content:center; }
.links a{ color:var(--suave); text-decoration:none; transition:color .15s; }
.links a:hover{ color:var(--azulc); }

.rodape{ position:absolute; bottom:18px; width:100%; text-align:center; z-index:1;
  font-size:12px; color:var(--suave); opacity:.75; }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .cena{ grid-template-columns:1fr; }
  .hero{ padding:44px 34px 8px; text-align:center; align-items:center; }
  .hero h1{ font-size:30px; max-width:none; }
  .emblema{ display:none; }
  .painel{ padding:24px 20px 60px; }
}