/* --- VARIABLES --- */
:root {
    --udl-green: #007547; /* Verde oscuro institucional */
    --udl-lime: #a2cf6d;  /* Lima agradable (no neon) */
    --udl-dark: #0f392b;  /* Verde muy oscuro */
}

body {
    font-family: 'Space Grotesk', sans-serif;
}

input, button {
    border-radius: 0 !important; /* Estilo cuadrado UDL */
}

/* Ocultar placeholder visual para el truco CSS */
.login-input::placeholder {
    color: transparent;
}

/* --- ESTILOS DE ICONOS E INPUTS --- */

/* Icono Base */
.input-icon {
    color: var(--udl-green) !important;
    transition: color 0.3s ease;
    z-index: 10;
}

/* Input Base */
.login-input {
    border: 1px solid #a2cf6d !important;
    transition: all 0.3s ease;
    background-color: white;
}

/* 1. HOVER (Mouse encima de casilla) -> Borde Verde */
.login-input:hover {
    border-color: var(--udl-green) !important;
}

/* 2. FOCUS (Escribiendo) -> Todo Lima */
.login-input:focus {
    border-color: var(--udl-lime) !important;
    box-shadow: 0 0 0 1px rgba(101, 163, 13, 0.3) !important;
}
.login-input:focus ~ .input-icon {
    color: var(--udl-lime) !important;
}

/* 3. CON TEXTO (Persistente) -> Todo Lima */
.login-input:not(:placeholder-shown) {
    border-color: var(--udl-lime) !important;
}
.login-input:not(:placeholder-shown) ~ .input-icon {
    color: var(--udl-lime) !important;
}

/* --- BOTÓN REGISTRO (Estilo invertido con levantamiento) --- */

.btn-udl-register {
    background-color: var(--udl-green); /* Fondo inicial verde */
    color: white;                       /* Letras iniciales blancas */
    border: 2px solid var(--udl-green); /* Borde del mismo color */
    font-weight: 700;
    transition: all 0.3s ease;          /* Suavizado */
}

.btn-udl-register:hover {
    background-color: white;            /* Fondo cambia a blanco */
    color: var(--udl-green);            /* Letras cambian a verde */
    /* Efecto de levantamiento */
    transform: translateY(-5px);        
    /* Sombra para dar sensación de altura */
    box-shadow: 0 10px 20px -5px rgba(22, 101, 52, 0.3);
}


/* Estilo personalizado para el botón Ingresar con el verde #005841 */
.btn-custom-udl {
    color: #007547 !important;
    border: 2px solid #007547 !important; /* Borde más visible */
    background-color: transparent !important;
    transition: all 0.3s ease;
}

/* Efecto Hover (al pasar el mouse) */
.btn-custom-udl:hover {
    color: white !important;
    background-color: #007547 !important;
    /* Opcional: una sombra del mismo color */
    box-shadow: 0 0 15px rgba(0, 88, 65, 0.4); 
}

/* --- BOTÓN VER CONTRASEÑA --- */
.btn-toggle-password {
    color: var(--udl-green); /* Estado Normal (#007547) */
    transition: color 0.3s ease; /* La misma suavidad que tus inputs */
}

/* 1. HOVER (Mouse encima) -> Verde #004230 */
.btn-toggle-password:hover {
    color: #004230 !important;
}

/* 2. ACTIVE (Al hacer clic) -> Lima #a2cf6d */
.btn-toggle-password:active {
    color: #a2cf6d !important;
    /* Opcional: un pequeño efecto de escala al pulsar, similar a botones móviles */
    transform: scale(0.95); 
}

/* --- BOTÓN DE ESTADOS (Bloqueado/Desbloqueado) --- */

/* Estado Bloqueado (Gris con candado) */
button:disabled, .btn-bloqueado {
    background-color: #d1d5db !important; /* Gris claro */
    border-color: #9ca3af !important;     /* Borde gris */
    color: #6b7280 !important;            /* Texto gris oscuro */
    cursor: not-allowed;
    transform: none !important;           /* Sin efecto de levantamiento */
    box-shadow: none !important;
    opacity: 0.8;
}

/* Animación de "Latido" al desbloquearse */
@keyframes unlockPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 117, 71, 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(0, 117, 71, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(0, 117, 71, 0); transform: scale(1); }
}

/* Estado Activo (Cuando se quita el atributo disabled) */
#btnEnviar:not(:disabled) {
    animation: unlockPulse 0.8s ease-out; /* Efecto de expansión al activarse */
    border-color: var(--udl-lime) !important; /* Borde lima brillante */
    box-shadow: 0 0 15px rgba(162, 207, 109, 0.6); /* Iluminación */
}

/*

/* Responsive adjustments */
@media (max-width: 640px) {
    .login-input {
        font-size: 0.95rem;
    }
}