/* qb_web/public/assets/css/style.css */

/* Aquí irán tus estilos CSS personalizados para el frontend */

/* --- INICIO: Estilos para Header y Footer FIJOS --- */

/* Eliminar reglas de Sticky Footer que causan conflicto con 'position: fixed' */
html, body {
    /* height: 100%; REMOVIDO */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el scroll horizontal no deseado */
}

body {
    /* REMOVIDO: display: flex; */
    /* REMOVIDO: flex-direction: column; */
    /* REMOVIDO: min-height: 100vh; */

    /* Importante: Añadir padding al body para que el contenido no quede oculto
       detrás del header y footer fijos.
       Ajusta estos valores según la altura real de tu header y footer.
       Medir la altura de tu header y footer con las herramientas de desarrollador es clave.
       Una navbar estándar de Bootstrap es ~56px. Con un poco de margen, 65px es un buen inicio.
       Tu footer tiene 15px de padding, asumiendo un contenido de 20px, sería 50px de altura total.
    */
    padding-top: 65px;   /* Por ejemplo, para un header de ~65px de alto (navbar + posibles bordes/sombras) */
    padding-bottom: 60px; /* Por ejemplo, para un footer de ~50-60px de alto */
}

/* REMOVIDO: main { flex-grow: 1; } */
/* Con el padding del body, el main ya no necesita flex-grow para ocupar el espacio */

/* Estilos para el Encabezado (Header) */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Un valor alto para asegurar que esté por encima de otros elementos */
    background-color: #343a40; /* Usamos el color de tu navbar bg-dark para evitar transparencias */
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Sombra sutil para darle profundidad */
    /* El padding ya lo maneja la navbar interna, no necesitamos padding aquí */
    padding: 0; /* Aseguramos que no tenga padding propio que se sume al de la navbar */
}

/* Estilos para el Pie de Página (Footer) */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* El mismo z-index que el header o ligeramente diferente */
    background-color: #343a40; /* Color de fondo de tu footer (ej. Bootstrap dark) */
    color: white; /* Color del texto del footer */
    box-shadow: 0 -2px 4px rgba(0,0,0,.1); /* Sombra sutil hacia arriba */
    padding: 15px 0; /* Mantenemos tu padding actual */
}

/* Opcional: Para pantallas muy pequeñas donde el header/footer puedan verse muy grandes */
@media (max-width: 768px) {
    body {
        /* Reajusta el padding del body para pantallas más pequeñas si el header/footer cambian de altura */
        padding-top: 60px; /* Si tu header es un poco más pequeño en móvil */
        padding-bottom: 50px; /* Si tu footer es un poco más pequeño en móvil */
    }
    /* No es necesario ajustar .fixed-header, .fixed-footer padding aquí a menos que cambien */
}

/* FIN: Estilos para Header y Footer FIJOS */

/* --- Estilos adicionales para los productos (estos se mantienen como estaban) --- */
.card-img-top {
    border-bottom: 1px solid #eee; /* Agrega un borde sutil debajo de la imagen */
}

.card-title {
    font-size: 1.25rem; /* Ajusta el tamaño del título del producto */
    margin-bottom: 0.5rem;
}

.card-text.small {
    font-size: 0.875rem; /* Hace la descripción corta un poco más pequeña */
    color: #6c757d; /* Color gris para el texto */
}

.list-unstyled {
    margin-bottom: 0.5rem; /* Espacio debajo de la lista de detalles */
}

.list-unstyled li {
    line-height: 1.4; /* Ajusta la altura de línea de los ítems de la lista */
}

.card-text.fs-5 {
    margin-top: auto; /* Empuja el precio hacia la parte inferior del card-body */
}

/* REMOVIDO: Esta regla del .container ya no es necesaria si el padding del body está bien ajustado */
/*
.container {
    margin-top: 20px;
    margin-bottom: 20px;
}
*/