/* Ajustar el padding-top del body para evitar superposición */
body {
    background-color: #f2f2f2; /* Fondo beige más suave */
    color: #6c757d; /* Texto en tonos grises */
    font-family: 'Arial', sans-serif; /* Fuente moderna */
    padding-top: 100px; /* Eliminar padding superior para quitar el espacio entre header y body */
    padding-bottom: 60px; /* Espacio para el footer */
    margin: 0; /* Eliminar márgenes por defecto */
}

/* Contenedor personalizado para limitar el ancho */
.custom-container {
    max-width: 900px;
    width: 93%;
    margin: auto; /* Centrar el contenido */
    padding: 5px;
    background-color: #ffffff !important; /* Fondo blanco para el contenido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar el contenido */
    border-radius: 10px; /* Bordes redondeados */
    margin-bottom: 20px; /* Espacio inferior adicional */
    padding-bottom: 20px;
}

/* Navbar styles */
.navbar {
    background-color: #f2f2f2; /* Fondo consistente con el del body */
    position: fixed; /* Fijar en la parte superior */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Por encima de otros elementos */
    height: 120px; /* Altura del navbar */
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-weight: bold;
}

.navbar .nav-link {
    color: #6c757d; /* Gris medio para enlaces */
}

.navbar .nav-link:hover {
    color: #343a40; /* Gris oscuro al pasar el ratón */
}

/* Títulos y encabezados */
h1, h2, h3, h4, h5, h6 {
    color: #343a40; /* Títulos en gris oscuro */
    font-weight: 700;
}

/* Estilo de las tarjetas */
.card {
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Título del producto */
.card-title {
    font-size: 1.5rem;  /* Tamaño más grande */
    font-weight: bold;
    color: #343a40; /* Gris oscuro */
}

/* Precio del producto */
.card-price {
    font-size: 1.2rem;  /* Tamaño moderado */
    font-weight: bold;
    margin-top: 0.5rem;
    color: #495057; /* Gris medio */
}

/* Descripción del producto */
.card-description {
    font-size: 0.9rem;  /* Tamaño más pequeño */
    margin-top: 0.0rem;
    color: #6c757d; /* Gris medio */
}

/* Asegurar que los textos sean legibles */
.card-body {
    background-color: #ffffff; /* Fondo blanco para las tarjetas */
    color: #6c757d; /* Texto en gris medio */
}

/* Imagen del producto con capa oscura */
.image-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recortar la imagen para que cubra el contenedor */
}

/* Capa oscura que solo cubre la imagen */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Capa oscura semi-transparente */
    pointer-events: none;
    z-index: 1; /* Asegurar que esté sobre la imagen */
    display: none; /* Por defecto oculta */
}

/* Mostrar la capa oscura al pasar el ratón */
.clickable-card:hover .image-overlay {
    display: block;
}

/* Indicador de cantidad dentro de la imagen */
.quantity-indicator {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2em;
    z-index: 2; /* Asegurar que esté sobre la capa oscura */
}

/* Mantener las funcionalidades de agregar al carrito y sombreado */
.clickable-card.product-added {
    /* Estilo para indicar que el producto está agregado al carrito */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid #28a745; /* Verde para indicar agregado */
}

/* Footer styles */
footer {
    background-color: transparent; /* Fondo del footer */
    color: #6c757d; /* Texto en gris medio */
    padding: 0px 0;
    position: relative; /* Cambiar a relative para que no sea sticky */
    margin-top: 10px; /* Espacio superior para separar del contenido */
    z-index: 1020; /* Debajo del navbar */
    margin-bottom: 20px;
}

/* Botones */
.btn-primary {
    background-color: #e79b3b; /* Naranja suave */
    border-color: #e79b3b;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #d0872f;
    border-color: #d0872f;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Ajustar el color de los links */
a {
    color: #6c757d; /* Gris medio */
    text-decoration: none;
}

a:hover {
    color: #343a40; /* Gris oscuro */
    text-decoration: underline;
}

/* Clase para ajustar la altura del logo */
.logo-height {
    height: 80px; /* Altura deseada */
    width: auto; /* Mantener proporción */
}

/* Ajustes adicionales para móviles */
@media (max-width: 767.98px) {
    .navbar-brand img {
        height: 100px; /* Mantener altura del logo en móvil */
        width: auto; /* Mantener proporción */
    }

    .card-title {
        font-size: 1.2rem;
    }

    .card-price {
        font-size: 1rem;
    }

    .card-description {
        font-size: 0.8rem;
    }

    .custom-container {
        padding: 5px 12px; /* Reducir padding en móviles para más espacio */
        padding-bottom: 20px;
        border-radius: 2; /* Quitar bordes redondeados en móviles */
        background-color: #ffffff; /* Mantener fondo blanco */
    }

    .quantity-indicator {
        font-size: 1rem; /* Reducir tamaño del indicador en móviles */
        padding: 4px 8px;
    }

    .card {
        margin-bottom: 1rem; /* Reducir margen inferior en móviles */
        height: auto; /* Permitir que las tarjetas crezcan según el contenido */
    }

    .col-6.col-md-4 {
        padding-left: 5px;
        padding-right: 5px;
    }
}