/* Fondo general */
body {
    background: linear-gradient(to right, #d6eaff, #167c81);
    font-family: 'Poppins', sans-serif;
  }
  
  /* Estilos para el card de login */
  .login-card {
    border-radius: 20px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
  }
  
  /* Imagen de fondo en el lado izquierdo */
  .login-image {
    background-image: url('../img/acceso.png'); /* tu imagen */
    background-size: cover;        /* Cubre todo el div sin deformar */
    background-position: center;   /* Siempre centrada */
    background-repeat: no-repeat;  /* No se repite */
    
    height: auto;                  /* Altura automática basada en el contenido */
    min-height: 400px;              /* Altura mínima para que no quede muy chico */
    width: 100%;                   /* Que ocupe el ancho disponible */
    border-top-left-radius: 20px;   /* Redondeo arriba a la izquierda */
    border-bottom-left-radius: 20px;/* Redondeo abajo a la izquierda */
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* Estilo normal del input */
.form-control {
    background-color: #f8f9fa;
    border-radius: 30px;
    border: 1px solid #ccc;
    padding-left: 45px;
    /* Sin transición */
  }
  
  /* Estilo cuando está seleccionado (focus) */
  .form-control:focus {
    border-color: #f7d100;
    box-shadow: 0 0 5px #ffe066, 0 0 10px #ffe066, 0 0 15px #ffe066; /* varias capas de sombra */
    background-color: #fff9e6;
    outline: none;
  }


  .form-group:focus-within i {
    color: #ffe066; /* instantáneo, sin transición */
  }
  

  /* Íconos dentro de los inputs */
  .icon-input {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #999;
  }
  
  /* Inputs personalizados */
  .form-control {
    background-color: #f8f9fa;
    border-radius: 30px;
  }
  
  /* Botón personalizado */
  .btn-primary {
    border-radius: 30px;
    background-color: #219ebc;
    border: none;
    background: linear-gradient(to right, #033f42, #188B92);
    transition: background 0.5s ease;
    
  }
  
  .btn-primary:hover {
    background-color: #186d8b;
    transform: scale(1.05);
    background: linear-gradient(to right, #188B92, #033f42);
    
  }
  
  
  /* Responsivo en móviles */
  @media (max-width: 768px) {
    .login-image {
      display: none;
    }
  }