* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    height: 100vh;
    background: #0f172a; /* fondo oscuro azul */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor principal */
.login-container {
   
    display: flex;
    width: 800px; /* Ancho total del contenedor */
    height: 450px; /* Altura total del contenedor */
    background: #1e293b; /* Fondo del contenedor */
    border-radius: 20px; /* Bordes redondeados */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra del contenedor */
}
.login-container h2 {
    color: #3b82f6; /* Color del título */
    font-size: 28px; /* Tamaño del texto */
    margin: 0; /* Eliminar márgenes */
    text-align: left; /* Alinear a la izquierda */
    position: relative; /* Permitir ajustes de posición */
    left: 20px; /* Ajusta este valor para moverlo más a la izquierda */
    top: -20px; /* Ajusta este valor para moverlo hacia arriba, si es necesario */
}


/* Lado izquierdo (imagen) */
.login-container::before {
    content: "";
    width: 50%; /* Ancho del lado de la imagen */
    height: 100%; /* Altura total */
    background: url('login.png') no-repeat center center; /* Imagen centrada */
    background-size: cover; /* Asegura que la imagen cubra el área */
}


/* Lado derecho (formulario) */
.login-container form {
    width: 50%; /* Ancho del formulario */
    padding: 40px; /* Espaciado interno */
    display: flex;
    flex-direction: column; /* Orientación vertical */
    justify-content: center; /* Centrar verticalmente */
}

/* Título */
.login-container h2 {
    color: #3b82f6; /* Color del título */
    font-size: 28px; /* Tamaño del texto */
    margin-bottom: 20px; /* Espacio inferior */
}

/* Grupo */
.form-group {
    margin-bottom: 20px; /* Espacio entre grupos */
}

/* Labels */
.form-group label {
    color: #cbd5f5; /* Color de las etiquetas */
    font-size: 14px; /* Tamaño de las etiquetas */
    display: block; /* Mostrar como bloque */
    margin-bottom: 5px; /* Espacio inferior */
}

/* Inputs */
.form-group input {
    width: 100%; /* Ancho total */
    padding: 10px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    border: none; /* Sin borde */
    outline: none; /* Sin contorno */
    background: #334155; /* Fondo de los inputs */
    color: white; /* Color del texto */
    transition: 0.3s; /* Transición suave */
}

.form-group input:focus {
    border: 1px solid #3b82f6; /* Borde azul al enfocar */
    background: #1e293b; /* Fondo más oscuro al enfocar */
}

/* Botón */
button {
    padding: 12px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 10px; /* Bordes redondeados */
    background: #3b82f6; /* Fondo azul */
    color: white; /* Color del texto */
    font-size: 16px; /* Tamaño del texto */
    cursor: pointer; /* Cambiar cursor al pasar */
    transition: 0.3s; /* Transición suave */
}

button:hover {
    background: #2563eb; /* Color más oscuro al pasar el ratón */
}

/* Error */
.error {
    background: #ef4444; /* Fondo rojo para errores */
    color: white; /* Color del texto */
    padding: 10px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 15px; /* Espacio inferior */
    text-align: center; /* Centrar texto */
}