/* --- VARIABLES --- */
:root {
    /* Mantenemos el azul para la coherencia con el sistema */
    --primary-color: #0026a7;
    /* 🆕 NUEVO: Naranja de Acento (Acción) */
    --accent-orange: #ff8727;
    --accent-hover: #ff8727;
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --bg-color: #f5f5f7;
    --card-bg: #ffffff;
    --radius-lg: 24px; /* Un poco más redondeado para modernidad */
    --radius-sm: 12px;
    --shadow-soft: 0 20px 40px rgba(0,0,0,0.08);
}

/* --- WRAPPER --- */
.login-page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 0px 20px 20px 20px;
}

/* --- TARJETA PRINCIPAL --- */
.login-card {
    display: flex;
    width: 100%;
    max-width: 950px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    min-height: 600px; /* Un poco más alto para dar aire al ícono */
}

/* Lado Izquierdo */
.login-left {
    flex: 1.2; /* Un poco más ancho para que el formulario respire */
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
}

/* 🆕 ESTILOS DEL LOGO/ICONO */
.login-brand-logo {
    height: 60px; /* Tamaño controlado */
    width: auto;
    object-fit: contain;
    margin-bottom: 0.5rem;
    /* Pequeña animación de entrada */
    animation: fadeInLogo 0.8s ease-out;
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Lado Derecho (Azul Corporativo) */
.login-right {
    flex: 1;
    /* Mantenemos el azul para conectar con el Navbar del sistema */
    background: linear-gradient(135deg, var(--primary-color) 0%, #005bb5 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem;
    position: relative;
}

    /* Decoración de fondo sutil */
    .login-right::before, .login-right::after {
        content: '';
        position: absolute;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    }

    .login-right::before {
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
    }

    .login-right::after {
        bottom: -40px;
        left: -40px;
        width: 160px;
        height: 160px;
    }

/* --- TYPOGRAPHY --- */
.login-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800; /* Más bold para impacto */
    font-size: 2rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.login-subtitle {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

/* --- INPUTS MODERNIZADOS --- */
/* Estilos para los span del input group (iconos) */
.input-icon-box {
    border: 1px solid #e1e1e1;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background-color: #fafafa;
    transition: all 0.3s ease;
}

.btn-toggle-pass {
    border-color: #e1e1e1 !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    background-color: #fafafa;
}

.tech-input {
    background-color: #fafafa;
    border: 1px solid #e1e1e1;
    /* Ajuste de radio para coincidir con el grupo */
    padding: 14px 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .tech-input:first-child {
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    .tech-input:last-child {
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    /* 🔥 EL FOCO NARANJA (Detalle clave) */
    .tech-input:focus {
        background-color: #fff;
        border-color: var(--accent-orange); /* Borde naranja */
        box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1); /* Resplandor naranja muy suave */
        outline: none;
        z-index: 5;
    }

        /* Al hacer foco, también pintamos el borde del icono vecino para continuidad */
        .tech-input:focus + .btn-toggle-pass,
        .input-group:focus-within .input-icon-box {
            border-color: var(--accent-orange);
            background-color: #fff;
        }

.input-group:focus-within i {
    color: var(--accent-orange) !important; /* El icono se vuelve naranja */
}


/* --- BOTONES --- */
/* 🔥 BOTÓN PRINCIPAL (NARANJA DE ACCIÓN) */
.btn-login {
    background-color: var(--accent-orange);
    color: white;
    border: none;
    padding: 16px; /* Más alto para mejor clic */
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    margin-top: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.2); /* Sombra naranja */
}

    .btn-login:hover {
        background-color: var(--accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3);
    }

    .btn-login:active {
        transform: translateY(0);
    }

/* Enlace de olvidar contraseña */
.transition-link {
    transition: color 0.3s ease;
}

    .transition-link:hover {
        color: var(--accent-orange) !important; /* Hover naranja */
    }

/* Botón Crear Cuenta (Outline Blanco) */
.btn-register-outline {
    margin-top: 2rem;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.6);
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

    .btn-register-outline:hover {
        background: white;
        border-color: white;
        color: var(--primary-color); /* Texto azul al hover para contraste */
        transform: translateY(-2px);
    }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .login-card {
        flex-direction: column;
        max-width: 500px;
        min-height: auto;
    }

    .login-left {
        padding: 2.5rem;
    }

    .login-right {
        padding: 3rem 1.5rem;
    }
}