body {
    background-image: url('../imagenes/fondologin.gif'); /* Ruta a la imagen GIF */
    background-size: cover; /* Cubre todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-color: #f8f9fa; /* Mantengo un color de fondo de respaldo */
    margin: 0;
    /* Asegura que el contenido no se superponga al encabezado/pie de página si se añaden */
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Nuevas reglas para centrar solo el contenido del login */
.body-login {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
}

.main-content {
    flex-grow: 1;
}

.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
    z-index: 1; /* Asegura que la tarjeta esté por encima del fondo */
    background-color: rgba(255, 255, 255, 0.95); /* Fondo casi opaco para mejor legibilidad */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen a todo el contenido de la tarjeta */
}

.card-header {
    background-color: rgba(50, 20, 100, 0.9); /* Un tono más oscuro y morado/azul para el encabezado */
    color: white;
    /*border-top-left-radius: 1rem;*/ /* Los bordes redondeados se manejan en .card */
    /*border-top-right-radius: 1rem;*/ /* Los bordes redondeados se manejan en .card */
    padding: 1.5rem;
    text-align: center;
    border-bottom: none; /* Eliminar borde entre header y body */
}

.card-header h2, .card-header h4 {
    margin-bottom: 0.5rem;
}

.card-body {
    padding: 2rem 1.5rem; /* Aumentar el padding superior e inferior */
    /*background-color: rgba(255, 255, 255, 0.9);*/ /* Se define en .card ahora */
}

.card-footer {
    background-color: rgba(50, 20, 100, 0.1);
    padding: 1rem;
    text-align: center;
    border-top: none;
}

.form-label {
    font-weight: bold;
    color: #333;
}

.btn-primary {
    background-color: #7b3fef;
    border-color: #7b3fef;
    width: 100%;
    padding: 0.75rem;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #6a35d9;
    border-color: #6130cc;
}

.form-control {
    border-radius: 0.5rem;
}

.card-footer a {
    color: #7b3fef;
    text-decoration: none;
}

.card-footer a:hover {
    text-decoration: underline;
}

.login-logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 1rem auto;
}

/* Estilos para centrar la barra de navegación */
/* Eliminamos la regla que forza el ancho 100% y la justificación central en navbar-nav */

/* Estilos para el título de Productos Destacados */
.featured-products-title {
    color: white !important; /* Forzar color blanco */
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Estilos para el carrusel de nuevos lanzamientos */
.carousel-item img {
    height: 300px;
    object-fit: cover;
}

/* Estilos para el botón de novedades */
.btn-novedades {
    background-color: #7b3fef !important;
    border-color: #7b3fef !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-novedades:hover {
    background-color: #6a35d9 !important;
    border-color: #6130cc !important;
}

/* Estilos adicionales para main.html */
.product-card {
    margin-bottom: 1.5rem;
}
.product-card img {
    display: block; /* Asegura que la imagen se comporte como bloque */
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: 180px; /* Altura fija */
    width: auto; /* Ancho automático basado en la altura y la proporción */
    object-fit: contain; /* Asegura que la imagen completa sea visible dentro del contenedor */
}

.banner-section {
    background-color: #e9ecef; /* Color de fondo suave para la sección del banner */
    padding: 3rem 0;
    max-width: 85%; /* Limitar el ancho */
    margin: 0 auto; /* Centrar */
}

/* Ajustes de alineación para elementos de la barra de navegación */
.navbar-nav .nav-link, 
.navbar-nav .navbar-text {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* Ajuste para centrar mejor los enlaces de navegación principales */
#navbarNav .navbar-nav:first-child {
    margin-left: 20rem !important;
}

/* Ajuste específico para el li que contiene los elementos de la derecha para asegurar alineación vertical */
#navbarNav .ms-auto.align-items-center {
    display: flex;
    align-items: center;
}