.bg-login {
  color: #f0b27a;           
  background-color: #34495e;       
}

.btn-login {
     background-color: #34495e; /* color normal */
    color: white;
    border: none;
  }

  .btn-login:hover {
    background-color: #2980b9; /* al pasar el mouse */
  }

  .mi-login:active {
    background-color: #1c5980; /* al hacer clic */
  }

  .bg-barra {
  color: #f0b27a;           
  background-color: #34495e;       
}


  .bg-prod {
    background-color: #6e96be; 
  
  }

    .bg-prod2 {
    background-color: #75aadf; 
  
  }


.btn-producto {
    color: #fff;                        /* color de ícono/texto */
    background-color: #34495e;          /* fondo gris azulado oscuro */
    border: none;                       /* estilo plano */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-producto:hover,
.btn-producto:focus {
    background-color: #2c3e50;          /* más oscuro al hover */
    color: #a7cdf3;                     /* azul claro */
    outline: none;                      /* elimina borde de foco nativo */
    box-shadow: none;                   /* elimina glow */
}

.btn-producto:active {
    background-color: #22313f;          /* aún más oscuro al presionar */
    color: #a7cdf3;                     /* mantiene color */
    outline: none;
    box-shadow: none;                   /* elimina glow de Bootstrap */
}

.btn:focus, .btn:active {
    box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
}