/* --- 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);
}

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

/* 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); 
}