/* ===========================================================================
   login.css — telas de acesso full-screen, SEM o chrome do app.
   Usada por LoginNovo.php (login) e RedefinirSenha.php (nova senha via link).
   Extraída do <style> inline de LoginNovo.php para as duas telas ficarem
   visualmente idênticas sem duplicar CSS.
   =========================================================================== */

:root {
    /* Identidade SGI RB — mesmos verdes de temas.css (--rg-brand*). */
    --ink:#10241a; --brand:#0b7a3e; --brand-rgb:11,122,62; --brand2:#0f5e4a;
    --brand-escuro:#064527; --brand-claro:#3fb46a;
    --line:#dfe8e2; --soft:#f4f8f5;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--soft);
}
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }

/* ===== Painel hero (esquerda) ===== */
.login-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: clamp(2rem, 4vw, 4rem);
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(140,198,63,.26) 0%, transparent 45%),
        radial-gradient(120% 120% at 100% 100%, rgba(63,180,106,.30) 0%, transparent 45%),
        linear-gradient(140deg, #04301b 0%, #064527 40%, #0b7a3e 100%);
    background-size: 160% 160%, 160% 160%, 200% 200%;
    animation: heroFlow 18s ease-in-out infinite;
}
@keyframes heroFlow {
    0%,100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
    50%     { background-position: 30% 20%, 70% 80%, 100% 50%; }
}
.login-hero::before, .login-hero::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(8px);
    background: rgba(255,255,255,.08); pointer-events: none;
}
.login-hero::before { width: 420px; height: 420px; top: -120px; right: -120px; }
.login-hero::after  { width: 300px; height: 300px; bottom: -100px; left: -80px;
                      background: rgba(63,180,106,.22); }

.hero-brand { display: flex; align-items: center; gap: .85rem; position: relative; z-index: 1; }
.hero-brand .mark {
    /* selo em vetor (esfera inteira): sem recorte nem moldura, só a sombra do contorno */
    width: 58px; height: 58px; display: block; flex: 0 0 auto;
    padding: 0; background: none;   /* .mark é também o "marca-texto" do Bootstrap */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.hero-brand .mark img { width: 100%; height: 100%; display: block; }
.hero-brand .name { font-size: 1.75rem; font-weight: 800; letter-spacing: .6px; line-height: 1; }
.hero-brand .name .rb {
    display: inline-block; margin-left: .28em; padding: .12em .4em .1em; border-radius: .32em;
    font-size: .78em; line-height: 1.1; letter-spacing: 1px; vertical-align: .1em;
    background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.hero-brand .tag { font-size: .8rem; opacity: .8; margin-top: .25rem; }

.hero-body { position: relative; z-index: 1; max-width: 30rem; }
.hero-body h2 { font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.12; margin: 0 0 1rem; }
.hero-body p.lead { opacity: .9; font-size: 1.02rem; line-height: 1.5; margin-bottom: 1.75rem; }

.hero-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.hero-feats li { display: flex; align-items: center; gap: .85rem; font-weight: 500; }
.hero-feats .fi-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-size: 15px;
}

.hero-foot { position: relative; z-index: 1; font-size: .82rem; opacity: .78; }

/* ===== Painel formulário (direita) ===== */
.login-panel {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem); background: var(--soft);
}
.lang-switch { position: absolute; top: 1.1rem; right: 1.25rem; display: flex; gap: .4rem; z-index: 5; }
.lang-switch a {
    width: 40px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    border: 1px solid var(--line); background: #fff; overflow: hidden; transition: .2s;
    box-shadow: 0 2px 6px rgba(10,36,22,.06);
}
.lang-switch a .fi { width: 100%; height: 100%; }
.lang-switch a:hover { transform: translateY(-1px); border-color: #c8d2e0; }
.lang-switch a.active { outline: 2px solid var(--brand); outline-offset: 1px; }

.login-card {
    width: 100%; max-width: 430px; background: #fff; border-radius: 22px; padding: 2.4rem;
    box-shadow: 0 28px 70px rgba(10,36,22,.12); border: 1px solid var(--line);
}
.login-card h1 { font-size: 1.55rem; font-weight: 800; margin: 0 0 .35rem; }
.login-card .subtitle { color: #667085; font-size: .94rem; margin-bottom: 1.5rem; }

.field { position: relative; margin-bottom: 1rem; }
.field .ico {
    position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
    color: #98a2b3; font-size: 16px; pointer-events: none;
}
.field .form-control {
    height: 54px; border-radius: 13px; border: 1.5px solid var(--line);
    padding-left: 46px; font-size: .98rem; background: #fbfcfe;
}
.field .form-control:focus {
    border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14); background: #fff;
}
.field .toggle-eye {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    border: 0; background: transparent; color: #98a2b3; cursor: pointer; padding: 6px;
}
.field .toggle-eye:hover { color: var(--brand); }

.btn-entrar {
    width: 100%; height: 54px; border: 0; border-radius: 13px; font-weight: 700; font-size: 1rem;
    color: #fff; letter-spacing: .2px;
    background: linear-gradient(135deg, var(--brand-escuro) 0%, var(--brand) 100%);
    box-shadow: 0 12px 26px rgba(var(--brand-rgb),.30); transition: .2s;
}
.btn-entrar:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-entrar:active { transform: translateY(0); }

.divider { display: flex; align-items: center; gap: .8rem; color: #98a2b3; font-size: .82rem;
           margin: 1.35rem 0; text-transform: uppercase; letter-spacing: .6px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-ms {
    width: 100%; height: 54px; border-radius: 13px; border: 1.5px solid var(--line);
    background: #fff; color: #3b3b3b; font-weight: 600; font-size: .98rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    text-decoration: none; transition: .2s;
}
.btn-ms:hover { border-color: #c8d2e0; background: #fafbfc; transform: translateY(-1px); color: #3b3b3b; }

.secure-note { display: flex; align-items: center; justify-content: center; gap: .5rem;
               color: #98a2b3; font-size: .8rem; margin-top: 1.5rem; }

.alert { border-radius: 12px; border: 0; }
/* Bootstrap "primary" (alerta de status) no verde da marca. */
.alert-primary { --bs-alert-color: #0a4d2a; --bs-alert-bg: #e2f3e8; --bs-alert-border-color: #c2e4cd; }
#progress.progress { height: .5rem; border-radius: 99px; }

/* ===== Recuperação de senha ("Esqueci minha senha" / nova senha) ===== */
.link-esqueci {
    display: inline-block; margin-top: .9rem; border: 0; background: transparent; padding: 0;
    color: var(--brand); font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.link-esqueci:hover { text-decoration: underline; }
.btn-voltar {
    width: 100%; height: 46px; margin-top: .6rem; border-radius: 13px;
    border: 1.5px solid var(--line); background: #fff; color: #667085;
    font-weight: 600; font-size: .92rem; transition: .2s;
}
.btn-voltar:hover { border-color: #c8d2e0; background: #fafbfc; color: var(--ink); }
.regra-senha { color: #667085; font-size: .8rem; line-height: 1.45; margin: -.25rem 0 1rem; }

/* ===== Responsividade ===== */
@media (max-width: 991.98px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-hero {
        padding: 2rem 1.5rem 1.75rem; min-height: auto; flex-direction: column; gap: 1.25rem;
        text-align: center; align-items: center;
    }
    .hero-brand { flex-direction: column; gap: .5rem; }
    .hero-body { max-width: 36rem; }
    .hero-body h2 { font-size: 1.45rem; margin-bottom: .5rem; }
    .hero-body p.lead { display: none; }
    .hero-feats { display: none; }
    .hero-foot { display: none; }
    .login-panel { padding: 1.5rem 1.1rem 2.5rem; }
    .login-card { box-shadow: 0 18px 40px rgba(10,36,22,.10); border-radius: 18px; padding: 1.75rem; }
}
@media (max-width: 420px) {
    .login-card { padding: 1.4rem; }
    .lang-switch { top: .75rem; right: .9rem; }
}