:root {
    /* --- PALETA DE CORES (White Label Premium) --- */
    /* Usaremos um gradiente moderno azul/roxo como base.
       No futuro, você muda essas 3 cores e tudo se adapta. */
    --cor-primaria: #4e73df;  /* Azul vibrante */
    --cor-secundaria: #825ee4; /* Roxo moderno */
    --cor-acento: #00d4ff;     /* Ciano para brilhos */
    
    --cor-texto-escuro: #2c3e50;
    --cor-texto-claro: #ffffff;
}

body {
    font-family: 'Montserrat', 'Segoe UI', sans-serif; /* Fonte mais moderna */
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    background-color: #1a1a2e; /* Cor de fundo base caso a imagem falhe */
    overflow: hidden; /* Impede barras de rolagem devido às formas do fundo */
    position: relative;
}

/* --- FUNDO DINÂMICO --- */
/* Cria formas de luz que ficam atrás do vidro */
body::before, body::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px); /* O segredo do efeito de luz suave */
    opacity: 0.5;
    z-index: -1;
    animation: moverFundo 20s infinite alternate ease-in-out;
}

body::before {
    background: var(--cor-primaria);
    top: -10%;
    left: -10%;
}

body::after {
    background: var(--cor-secundaria);
    bottom: -10%;
    right: -10%;
    animation-delay: -10s;
}

@keyframes moverFundo {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.1); }
}

/* --- O CARTÃO DE VIDRO (Glassmorphism) --- */
.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    
    /* O Efeito de Vidro */
    background: rgba(255, 255, 255, 0.08); /* Branco translúcido */
    backdrop-filter: blur(25px); /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(25px); /* Para Safari */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borda sutil de vidro */
    border-radius: 24px; /* Bordas bem arredondadas */
    box-shadow: 0 25px 50px rgba(0,0,0,0.2); /* Sombra profunda */
    
    text-align: center;
    color: var(--cor-texto-claro);
    overflow: hidden;
}

/* Brilho superior no vidro */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: rotate(45deg);
    pointer-events: none;
    animation: brilhoVidro 8s infinite linear;
}

@keyframes brilhoVidro {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* --- ELEMENTOS INTERNOS --- */
.logo-icone {
    font-size: 4rem;
    /* Gradiente no texto/ícone */
    background: linear-gradient(135deg, var(--cor-acento), var(--cor-primaria));
    -webkit-background-clip: text;
    background-clip: text; /* Adicionado para compatibilidade */
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    /* Linha corrigida (removido caractere oculto antes do rgba) */
    filter: drop-shadow(0 0 15px rgba(78, 115, 223, 0.3));
}

.logo-texto {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    
}

.subtexto {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
}

/* Inputs Customizados */
.input-group-custom {
    position: relative;
    margin-bottom: 1.5rem;
}

.input-group-custom i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    transition: 0.3s;
    z-index: 2;
}

.form-control-glass {
    width: 100%;
    padding: 15px 15px 15px 55px; /* Espaço para o ícone */
    background: rgba(255, 255, 255, 0.05); /* Input translúcido */
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--cor-texto-claro);
    font-size: 1rem;
    transition: 0.4s;
    outline: none;
}
/* Cor do placeholder */
.form-control-glass::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Foco no input */
.form-control-glass:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cor-acento);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

/* Muda a cor do ícone quando o input está em foco */
.input-group-custom:focus-within i {
    color: var(--cor-acento);
}

/* Botão Gradiente */
.btn-gradiente {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
    background-size: 200% auto;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 10px 25px rgba(78, 115, 223, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-gradiente:hover {
    background-position: right center; /* Move o gradiente */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(130, 94, 228, 0.4);
}

.alert-danger-glass {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ffadad;
    border-radius: 10px;
}

.footer-login {
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}