/* =============================================================================
   css/login.css — ESTILOS DA TELA index.html (login: a primeira página do sistema)
   =============================================================================
   • A cor principal vem do js/config.js (COR_FUNDO_SISTEMA) pela variável --cor-sistema.
   • A foto de fundo vem do js/config.js (FUNDO_LOGIN_URL) pela variável --fundo-login.
     Se ela não carregar, aparece por baixo a ilustração img/fundo-login.svg.
   • As rotas animadas (FUNDO_LOGIN_ROTAS → --rotas-login) ficam numa camada própria por cima.
   • A cor de destaque (âmbar) fica em --cor-destaque, logo abaixo.
   ============================================================================= */

:root {
    --cor-destaque: #F59E0B;
    --fundo-login: url('../img/fundo-login.svg');
    --rotas-login: none;
}

body.tela-login {
    font-family: 'Inter', system-ui, sans-serif;
    background: #041a23;
    overflow-x: hidden;
}

/* ----- Fundo: imagem com zoom lento + véus de cor ------------------------- */
.login-fundo {
    position: fixed; inset: -2%;
    /* 1ª camada: a foto; 2ª camada (aparece se a foto falhar): a ilustração */
    background: var(--fundo-login) center / cover no-repeat, url('../img/fundo-login.svg') center / cover no-repeat, #041a23;
    animation: fundo-zoom 28s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes fundo-zoom { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }

.login-veu {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, transparent 45%, rgba(2,18,26,.92) 100%),
        linear-gradient(90deg, rgba(4,26,35,.15) 0%, rgba(4,26,35,.25) 50%, rgba(4,26,35,.78) 100%),
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--cor-destaque) 18%, transparent), transparent 40%);
}
/* Com FOTO de fundo, escureça mais para o texto continuar legível: troque o bloco acima por
   linear-gradient(180deg, rgba(4,26,35,.35) 0%, transparent 35%, rgba(2,18,26,.92) 100%),
   linear-gradient(90deg, rgba(4,26,35,.55) 0%, rgba(4,26,35,.15) 45%, rgba(4,26,35,.72) 100%),
   linear-gradient(0deg, color-mix(in srgb, var(--cor-sistema) 35%, transparent), color-mix(in srgb, var(--cor-sistema) 35%, transparent)); */

/* Rotas animadas (pinos de cidades) por cima da foto */
.login-rotas {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: var(--rotas-login) center top / cover no-repeat;
    animation: surgir 1.2s .4s ease both;
}

/* Crédito da foto (licença Unsplash) — discreto, no canto */
.credito-foto { position: fixed; right: 12px; bottom: 8px; z-index: 3; font-size: 10px; color: rgba(255,255,255,.4); }
.credito-foto:empty { display: none; }

/* ----- Grade: vitrine à esquerda, cartão à direita ------------------------ */
.login-grade {
    position: relative; z-index: 2;
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .login-grade { grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr); }
}

/* ----- Vitrine (lado esquerdo) -------------------------------------------- */
.login-vitrine { display: none; }
@media (min-width: 1024px) {
    .login-vitrine {
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 2.5rem 3.5rem 3rem; color: #fff;
    }
}
.selo-logo {
    display: inline-flex; align-items: center;
    animation: surgir .7s ease both;
}
.selo-logo img { max-height: 52px; max-width: 240px; object-fit: contain; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }

.vitrine-texto { max-width: 560px; animation: surgir .9s .15s ease both; }
.sobretitulo {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cor-destaque);
    background: color-mix(in srgb, var(--cor-destaque) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-destaque) 35%, transparent);
    padding: .4rem .8rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.manchete {
    font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: clamp(2.6rem, 4.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em;
    margin: 1.1rem 0 1rem; text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
.manchete span {
    background: linear-gradient(90deg, #fde68a, var(--cor-destaque) 60%, #fb923c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine-sub { font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 470px; }

.vitrine-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.vitrine-chips li {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .82rem; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    padding: .55rem .95rem; border-radius: 12px; backdrop-filter: blur(8px);
    transition: transform .2s, background .2s;
}
.vitrine-chips li:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
.vitrine-chips i { color: var(--cor-destaque); }

/* ----- Lado do cartão ----------------------------------------------------- */
.login-lado {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 1rem;
}
@media (min-width: 1024px) { .login-lado { padding: 2.5rem 3rem; } }

.cartao-login {
    position: relative; width: 100%; max-width: 400px;
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 28px; padding: 2rem 1.75rem 1.6rem;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: 1.1rem;
    animation: surgir .8s .1s ease both;
}
/* Faixa de luz no topo do cartão (lembra o holofote) */
.cartao-login::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 3px; border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, transparent, var(--cor-destaque), transparent);
}

.cartao-cabeca { text-align: center; }
.logo-cartao { max-height: 52px; max-width: 220px; margin: 0 auto; object-fit: contain; }
.slogan-cartao { font-size: 11px; color: #64748b; margin-top: .35rem; }
@media (min-width: 1024px) { .cartao-cabeca { display: none; } }   /* no computador a logo já está na vitrine */

.titulo-form { font-family: 'Outfit', sans-serif; font-size: 1.65rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.sub-form { font-size: .82rem; color: #64748b; margin-top: .1rem; }

/* Campos com ícone à esquerda */
.campo-com-icone { position: relative; }
.campo-com-icone > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; pointer-events: none; transition: color .15s; }
.campo-com-icone .campo { padding-left: 2.5rem; }
.campo-com-icone:focus-within > i { color: var(--cor-sistema); }
.tela-login .campo { background: #f8fafc; border-color: #e2e8f0; padding-top: .8rem; padding-bottom: .8rem; transition: background .15s, box-shadow .15s; }
.tela-login .campo:focus { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-sistema) 25%, transparent); border-color: var(--cor-sistema); }

.ver-senha { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); color: #94a3b8; padding: .4rem .6rem; }
.ver-senha:hover { color: #475569; }

/* Botão principal */
.btn-entrar {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-weight: 700; color: #fff; padding: .95rem 1rem; border-radius: 14px;
    background: linear-gradient(135deg, var(--cor-sistema), color-mix(in srgb, var(--cor-sistema) 70%, #000));
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--cor-sistema) 80%, transparent);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-entrar:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--cor-sistema) 90%, transparent); }
.btn-entrar:hover:not(:disabled) .fa-arrow-right { transform: translateX(3px); }
.btn-entrar .fa-arrow-right { transition: transform .15s; }
.btn-entrar:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; }

.rodape-login { margin-top: 1.1rem; font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .04em; text-align: center; }

@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .login-fundo, .login-rotas, .selo-logo, .vitrine-texto, .cartao-login { animation: none; }
}