/* Estilos personalizados - Tema Azul Marino y Grises */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; /* Un gris muy claro para el fondo general */
    color: #212529; /* Negro suave para el texto principal */
}

/* Color principal del tema: Azul Marino */
.bg-main-theme {
    background-color: #001f3f; /* Azul Marino */
}

/* Título de la sección de productos */
main h2 {
    color: #001f3f; /* Azul Marino para el título "Productos Destacados" */
}

/* Estilo de las tarjetas de producto */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #495057; /* Borde gris oscuro para las tarjetas negras */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
}

.card-title {
    color: #f8f9fa; /* Texto de título claro para tarjetas oscuras */
}

.add-to-cart {
    width: 100%;
}

/* Sobrescribir colores de Bootstrap */

/* Botón Primario (Añadir al carrito, Finalizar compra) */
.btn-primary {
    background-color: #002b55; /* Un azul marino un poco más claro para mejor visibilidad en fondo negro */
    border-color: #002b55;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover {
    background-color: #001f3f; /* Azul Marino más oscuro para el hover */
    border-color: #001f3f;
}

/* Botón de Éxito (cuando se añade un producto) */
.btn-success {
    background-color: #6c757d; /* Gris (Plomo) para la confirmación */
    border-color: #6c757d;
}

/* Footer y Navbar */
.bg-dark {
    background-color: #212529 !important; /* Negro */
}