/* Usamos variables CSS para manejar los colores corporativos fácilmente */
:root {
  --color-primario-azul: #0a2d5e; /* Azul oscuro del logo */
  --color-secundario-naranja: #e85f24; /* Naranja vibrante del logo */
  --color-fondo-claro: #f8f9fa; /* Un gris muy claro para el fondo del formulario */
}

body {
  overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

/* Contenedor principal que ocupa toda la altura */
.login-container {
  min-height: 100vh;
}

/* Columna de la izquierda para el branding */
.login-branding {
  background-color: var(--color-primario-azul);
  color: white;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center; /* Centra el contenido horizontalmente */
  text-align: center;
}

.login-branding img {
  max-width: 300px; /* Tamaño controlado del logo */
  margin-bottom: 2rem;
}

.login-branding h1 {
  font-weight: 300; /* Un peso de fuente más ligero y elegante */
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.login-branding p {
  font-weight: 300;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Columna de la derecha para el formulario */
.login-form-container {
  background-color: var(--color-fondo-claro);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* La tarjeta que contiene el formulario */
.login-form-card {
  width: 100%;
  max-width: 450px; /* Ancho máximo para el formulario */
  padding: 2.5rem;
  background-color: white;
  border-radius: 15px; /* Bordes más redondeados */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
  border: none;
}

/* Logo pequeño para la vista móvil, dentro de la tarjeta */
.login-form-card .logo-mobile {
  max-width: 200px;
  margin-bottom: 1.5rem;
}

/* Estilo para los campos del formulario con etiquetas flotantes */
.form-floating > .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(232, 95, 36, 0.25); /* Sombra al enfocar con el color naranja */
}

.form-floating > .form-control:focus ~ label {
  color: var(--color-secundario-naranja); /* Color de la etiqueta al enfocar */
}

/* Estilo del botón principal */
.btn-primary {
  background-color: var(--color-secundario-naranja);
  border-color: var(--color-secundario-naranja);
  padding: 0.75rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
  background-color: #d4551f; /* Un naranja un poco más oscuro al pasar el mouse */
  border-color: #d4551f;
  transform: translateY(-2px); /* Efecto sutil de elevación */
}

/* Pie de página del formulario */
.form-footer {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #6c757d;
}