/* ============================================================
   SGPA — Páginas públicas (login, portal)
   Depende de: /css/sgpa-theme.css
   ============================================================ */

* { box-sizing: border-box; }

body.sg-public {
    margin: 0;
    font-family: var(--sg-font);
    color: var(--sg-text);
    background: #f7fafd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Cabeçalho público ─── */
.pub-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--sg-border);
}
.pub-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.pub-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.pub-brand img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.pub-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sg-brand-800);
    line-height: 1;
}
.pub-brand-sub {
    font-size: 0.72rem;
    color: var(--sg-muted);
    line-height: 1.35;
    max-width: 190px;
    margin-top: 3px;
}

.pub-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pub-nav a {
    padding: 9px 15px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-text-2);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.pub-nav a:hover { background: var(--sg-brand-50); color: var(--sg-brand-700); }
.pub-nav a.active { color: var(--sg-brand-700); }
.pub-nav a.cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
}
.pub-nav a.cta:hover { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); color: #fff; }
.pub-nav a.cta svg { width: 16px; height: 16px; }

.pub-burger {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sg-border);
    background: #fff;
    border-radius: 10px;
    color: var(--sg-text-2);
    place-items: center;
    cursor: pointer;
}
.pub-mobile-nav {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--sg-border);
    background: #fff;
}
.pub-mobile-nav.open { display: flex; }
.pub-mobile-nav a {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sg-text-2);
    text-decoration: none;
}
.pub-mobile-nav a:hover { background: var(--sg-brand-50); color: var(--sg-brand-700); }
.pub-mobile-nav a.cta {
    background: var(--sg-brand-600);
    color: #fff;
    text-align: center;
    margin-top: 4px;
}

/* ─── Palco do login ─── */
.login-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 85% 12%, #e8f1ff 0%, rgba(232, 241, 255, 0) 62%),
        radial-gradient(760px 420px at 8% 88%, #eaf4ff 0%, rgba(234, 244, 255, 0) 60%),
        linear-gradient(180deg, #f9fcff 0%, #eef5fd 100%);
}

.login-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.login-deco svg { position: absolute; }
.deco-drop {
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    color: #dbeafe;
    opacity: 0.55;
}
.deco-wave { left: 0; bottom: 0; width: 100%; height: 190px; color: #dbeafe; opacity: 0.6; }

/* ─── Cartão de login ─── */
.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(219, 234, 254, 0.9);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 42, 88, 0.1), 0 2px 6px rgba(15, 42, 88, 0.05);
    padding: 44px 40px 36px;
    backdrop-filter: blur(6px);
}

.login-mark {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
    display: grid;
    place-items: center;
    position: relative;
}
.login-mark img { width: 46px; height: 46px; object-fit: contain; }
.login-mark::before,
.login-mark::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--sg-brand-200);
}
.login-mark::before { width: 9px; height: 9px; top: 6px; left: -2px; }
.login-mark::after { width: 6px; height: 6px; top: 22px; right: -4px; }

.login-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--sg-text);
    margin: 0 0 6px;
}
.login-sub {
    font-size: 0.9rem;
    color: var(--sg-muted);
    text-align: center;
    margin: 0 0 12px;
}
.login-rule {
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sg-brand-300), var(--sg-brand-500));
    margin: 0 auto 26px;
}

.login-field { margin-bottom: 20px; }
.login-field label {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--sg-text-2);
    margin-bottom: 8px;
}
.login-input { position: relative; }
.login-input > .lead {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: #9aabc2;
    pointer-events: none;
}
.login-input input {
    width: 100%;
    padding: 15px 16px 15px 46px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--sg-text);
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.login-input input::placeholder { color: #9aabc2; }
.login-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--sg-brand-500);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.login-input input.has-toggle { padding-right: 50px; }

.login-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #9aabc2;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.login-eye:hover { color: var(--sg-brand-600); background: var(--sg-brand-50); }
.login-eye svg { width: 19px; height: 19px; }

.login-submit {
    width: 100%;
    margin-top: 6px;
    padding: 15px 20px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #1746c4 100%);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(29, 78, 216, 0.28);
    transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
}
.login-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8 0%, #14399e 100%);
    box-shadow: 0 14px 30px rgba(29, 78, 216, 0.34);
    transform: translateY(-1px);
}
.login-submit:disabled { opacity: 0.65; cursor: not-allowed; box-shadow: none; }
.login-submit svg { width: 18px; height: 18px; }

.login-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 0;
    font-size: 0.79rem;
    color: var(--sg-muted);
}
.login-help svg { width: 15px; height: 15px; color: var(--sg-brand-400); flex-shrink: 0; }

.login-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 13px 15px;
    border-radius: 13px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.85rem;
    line-height: 1.45;
    animation: alertIn 0.22s ease;
}
.login-alert.show { display: flex; }
.login-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
@keyframes alertIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.spinner { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Rodapé público ─── */
.pub-footer {
    background: #fff;
    border-top: 1px solid var(--sg-border);
    padding: 26px 24px;
}
.pub-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--sg-text-2);
}
.pub-footer-block { display: flex; align-items: center; gap: 12px; }
.pub-footer-block img { height: 42px; width: auto; object-fit: contain; }
.pub-footer-sep { width: 1px; align-self: stretch; background: var(--sg-border); }
.pub-footer strong { color: var(--sg-text); font-weight: 700; }
.pub-footer .muted { color: var(--sg-muted); font-size: 0.76rem; }
.pub-footer a { color: var(--sg-brand-600); font-weight: 600; text-decoration: none; }
.pub-footer a:hover { text-decoration: underline; }
.pub-footer-right { margin-left: auto; text-align: right; }

/* ─── Responsivo ─── */
@media (max-width: 860px) {
    .pub-brand-sub { display: none; }
    .pub-nav { display: none; }
    .pub-burger { display: grid; }
    .login-stage { padding: 34px 16px; }
    .login-card { padding: 34px 24px 28px; border-radius: 20px; }
    .login-title { font-size: 1.4rem; }
    .deco-drop { width: 280px; height: 280px; right: -110px; }
    .pub-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pub-footer-sep { display: none; }
    .pub-footer-right { margin-left: 0; text-align: left; }
}