/* === 1. CONFIGURAÇÃO GERAL & TIPOGRAFIA === */
:root {
    --primary-blue: #3f72af;
    --deep-blue: #112D4E;
    --glass-surface: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.9);
    --input-bg: rgba(255, 255, 255, 0.6);
    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 25px 50px -12px rgba(63, 114, 175, 0.25);
}

body {
    /* Fundo Animado "Mesh Gradient" */
    background: linear-gradient(-45deg, #e0eafc, #cfdef3, #eff6ff, #dbeafe) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite;
    
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita scrollbars durante animações */
}

/* Animação do Fundo */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === 2. O CARTÃO DE LOGIN (GLASSMORPHISM AVANÇADO) === */
.panelsgs, .panelsgs2 {
    /* Reset total do estilo antigo */
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 40px !important;
    
    /* Vidro Fosco Moderno */
    background: var(--glass-surface) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Bordas e Sombras */
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow-strong) !important;
    
    /* Animação de Entrada (Slide Up + Fade) */
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transform: translateY(20px);
    opacity: 0;
}

@keyframes slideUpFade {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Limpar elementos internos do ASP.NET */
.form-signin, .form-signin2 {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center; /* Centraliza logo e textos */
}

/* Logo (se houver imagem) */
.panelsgs img, .form-signin img {
    max-height: 50px;
    width: auto;
    margin-bottom: 2rem !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Títulos ou Textos dentro do painel */
.panelsgs span, .panelsgs label {
    font-family: 'Inter', sans-serif !important;
    color: #475569 !important;
}

/* === 3. INPUTS DINÂMICOS === */
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin2 input[type="text"],
.form-signin2 input[type="password"],
.form-control {
    width: 100% !important;
    height: 52px !important;
    padding: 0 20px !important;
    margin-bottom: 20px !important;
    
    background: var(--input-bg) !important;
    border: 2px solid transparent !important; /* Prepara para o foco */
    border-radius: 16px !important;
    
    font-size: 15px !important;
    color: var(--deep-blue) !important;
    font-weight: 500 !important;
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
}

/* Efeito de Foco "Pop" */
.form-signin input:focus, 
.form-control:focus {
    background: #fff !important;
    border-color: var(--primary-blue) !important;
    transform: scale(1.02) !important; /* Cresce ligeiramente */
    box-shadow: 0 10px 25px -5px rgba(63, 114, 175, 0.15) !important;
    outline: none !important;
}

/* Placeholder Styling */
::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}

/* === 4. BOTÃO "LIQUID" === */
input[type="submit"], .btn-primary {
    width: 100% !important;
    height: 56px !important;
    margin-top: 10px !important;
    
    /* Gradiente Animado */
    background-size: 200% auto !important;
    background-image: linear-gradient(to right, #3f72af 0%, #112D4E 51%, #3f72af 100%) !important;
    
    color: white !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    
    border: none !important;
    border-radius: 100px !important;
    cursor: pointer;
    box-shadow: 0 10px 20px -10px rgba(63, 114, 175, 0.5) !important;
    
    transition: all 0.4s ease !important;
}

input[type="submit"]:hover {
    background-position: right center !important; /* Move o gradiente */
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 30px -10px rgba(63, 114, 175, 0.6) !important;
}

input[type="submit"]:active {
    transform: scale(0.98) !important;
}

/* === 5. RODAPÉ E EXTRAS === */
.footer {
    margin-top: 40px !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
    opacity: 0.8;
}

/* Links */
a {
    color: var(--primary-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    position: relative;
}

/* Sublinhado animado nos links */
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary-blue);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Limpeza de lixo do ASP.NET Ajax Toolkit */
.ajax__rounded_corners_container { 
    background: transparent !important; 
}