/*
|--------------------------------------------------------------------------
| Archivo de Estilos Personalizados - custom.css
|--------------------------------------------------------------------------
|
| Este archivo contiene todos los estilos CSS personalizados para tu aplicación.
| Está organizado por secciones para facilitar su mantenimiento.
|
*/

/*========================================================================
 1. ESTILOS GENERALES Y DE MAQUETACIÓN
==========================================================================*/

/* Elimina el margen predeterminado del body y asegura altura completa */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Configuración Flexbox para el body - ELIMINA ESTAS REGLAS O DEJA SOLO LAS NECESARIAS DE FONDO/MARGENES */
body {
    /* QUITA display: flex; y flex-direction: column; si están aquí */
    margin: 0;
    padding: 0;
    background-color: #E2EDF5;
}

/* ELIMINA ESTAS REGLAS O DEJA VACÍAS - AdminLTE se encarga del wrapper y content-wrapper */
.wrapper {
    /* Quita cualquier flex: 1;, display: flex;, flex-direction: column; */
}

main, .content-wrapper {
    /* Quita cualquier flex: 1; */
    /* La regla padding-bottom que te sugerí antes la puedes poner aquí o con pb-7 en el blade */
    /* padding-bottom: 70px !important; <-- Podría ir aquí si prefieres, pero el pb-7 en el blade es lo mismo */
}

/* Contenedor del formulario de login: centrado y adaptable */
.container.d-flex.flex-grow-1 {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 2rem;
}


/*========================================================================
  2. ESTILOS DE NAVBAR
==========================================================================*/

/* Navbar principal (Administrador y Usuario Común) */
.main-header.navbar {
    background: linear-gradient(45deg, #1d3f72, #007bff) !important; /* Gradiente de AdminLTE primary */
    /* Nota: 'navbar-dark' de Bootstrap/AdminLTE maneja gran parte del color del texto */
}

/* Color del texto del brand y enlaces en el navbar principal */
.main-header.navbar .navbar-brand,
.main-header.navbar .nav-link {
    color: #ffffff !important; /* Texto blanco para asegurar visibilidad */
}

/* Color de los enlaces del navbar al pasar el cursor */
.main-header.navbar .nav-link:hover {
    color: rgba(255, 255, 255, 0.75) !important; /* Blanco más tenue al pasar el cursor */
}

/* Margen para iconos dentro de los enlaces del navbar */
.navbar-nav .nav-item .nav-link i.fas {
    margin-right: .25rem;
}

/* Botón del sidebar ('X' o 'hamburguesa') en el navbar del administrador */
.navbar-dark .nav-item .nav-link .fas.fa-bars {
    color: #fff !important; /* Blanco */
}


/*========================================================================
  3. ESTILOS DEL MENÚ DESPLEGABLE DE USUARIO (DROPDOWN)
==========================================================================*/

/* Contenedor principal del menú desplegable oscuro */
.custom-dropdown-dark {
    background-color: #343a40 !important; /* Color 'gray-dark' de AdminLTE (similar al sidebar) */
    border: 1px solid rgba(0, 0, 0, 0.15); /* Borde sutil */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
}

/* Estilo para los ítems individuales dentro del menú desplegable oscuro */
.custom-dropdown-dark .dropdown-item {
    color: #f8f9fa !important; /* Texto blanco claro */
    padding: 0.75rem 1.25rem; /* Ajusta el padding para un mejor espacio al clickear */
}

/* Estilo de los ítems del dropdown al pasar el cursor (hover/focus) */
.custom-dropdown-dark .dropdown-item:hover,
.custom-dropdown-dark .dropdown-item:focus {
    background-color: #495057 !important; /* Un gris un poco más claro al pasar el cursor */
    color: #fff !important; /* Texto blanco */
}

/* Línea divisoria dentro del dropdown */
.custom-dropdown-dark .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria más clara */
}

/* Para un dropdown más ancho en Bootstrap 5, replicando dropdown-menu-lg de AdminLTE */
.dropdown-menu-lg {
    min-width: 20rem; /* O el ancho que desees, puedes ajustarlo */
    max-width: 25rem; /* Para evitar que se estire demasiado en pantallas grandes */
}

/* Para el efecto de sombra (elevation-2) si no se carga de AdminLTE */
.elevation-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)!important; /* Valores de sombra de AdminLTE */
}

/* Asegura que la imagen de perfil dentro del dropdown siga siendo circular */
.user-header img.img-circle {
    border-radius: 50%;
}

/* Texto del encabezado del dropdown (donde va la imagen de perfil y nombre/email) */
.custom-dropdown-dark .dropdown-item.bg-dark p,
.custom-dropdown-dark .dropdown-item.bg-dark small {
    color: #f8f9fa !important; /* Asegura que el texto en el encabezado oscuro sea blanco */
}

/* Color de los iconos de los ítems del dropdown */
.custom-dropdown-dark .dropdown-item i {
    color: #f8f9fa !important; /* Los iconos también se verán blancos */
}


/*========================================================================
  4. ESTILOS DE PÁGINA DE LOGIN Y REGISTRO
==========================================================================*/

/* Estilos de fondo generales para páginas de autenticación */
body.auth-page { /* Clase base, común para login y registro si ambos usan el mismo layout */
    background-color: #E2EDF5; /* Color de fondo alternativo si la imagen no carga */
    /* position: relative;  <-- ELIMINAR ESTA LÍNEA */
    /* z-index: 0;          <-- ELIMINAR ESTA LÍNEA */
    min-height: 100vh; /* Ocupa al menos el 100% de la altura de la ventana */
    display: flex; /* Convierte el body en un contenedor flex */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
}

/* Capa de fondo con imagen - Estilo base SIN blur (será el default para registro) */
body.auth-page::before {
    content: "";
    position: fixed; /* Ocupa toda la ventana, no el body desplazable */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/carruselpescaderia5.jpg'); /* ¡IMPORTANTE! VERIFICA ESTA RUTA */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Permanece fijo mientras la página se desplaza */
    z-index: -2; /* Detrás de todo el contenido */
}

/* Aplicar BLUR solo a la página de LOGIN */
/* Esta regla SOBRESCRIBE el 'filter' para las páginas que tengan la clase 'login-page' */
body.login-page::before {
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

/* Capa de superposición oscura para mejorar el contraste del formulario (aplica a ambas si tienen auth-page) */
body.auth-page::after {
    content: "";
    position: fixed; /* Ocupa toda la ventana, no el body desplazable */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Capa oscura semitransparente */
    z-index: -1; /* Entre el fondo y el formulario */
}

/* Contenedor principal del contenido que empuja el footer */
/* Este será el div que contendrá la navbar, el formulario y empujará el footer */
.wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el wrapper ocupe todo el espacio disponible */
    /* No necesitamos min-height: 100vh aquí, ya lo manejamos en el body */
}

/* Contenedor para el formulario de login, empuja el footer */
.auth-form-container { /* Nueva clase más genérica para centrar formularios de auth */
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    padding: 20px; /* Padding para evitar que el contenido toque los bordes */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Panel principal de formularios (Login y Registro) */
.login-panel, .register-panel { /* Aplicamos estilos comunes a ambos paneles */
    background: rgba(255, 255, 255, 0.95); /* Fondo blanco casi opaco */
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4); /* Sombra más pronunciada */
    border: 1px solid rgba(0,0,0,0.1); /* Borde sutil */
    z-index: 1; /* Asegura que esté por encima de todas las capas de fondo */
    max-width: 500px; /* Limita el ancho en pantallas grandes (será sobrescrito si .register-panel es más grande) */
    width: 100%; /* Ocupa todo el ancho disponible hasta el max-width */
    position: relative; /* Asegura que el z-index sea efectivo */
}

/* Ajuste específico para el panel de registro si es más ancho */
.register-panel {
    max-width: 700px; /* Ejemplo: si quieres que el panel de registro sea más ancho */
}

/* Título "Iniciar Sesión" / "Registro de Usuario" */
.login-title {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 700 !important; /* Bold */
    color: #007bff; /* Color primary de Bootstrap */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Pequeña sombra para mayor legibilidad */
}

/* Estilos base para el input-group-text (el contenedor del icono) */
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background-color: #e9ecef; /* Color de fondo del icono */
    border-color: #ced4da; /* Color del borde del icono */
    display: flex; /* Habilita flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente el icono */
    height: calc(2.25rem + 2px); /* Coincide con la altura del form-control */
    padding: 0.375rem 0.75rem; /* Ajusta el padding para que coincida con el input */
}

/* Estilos específicos para el input (form-control) dentro del input-group */
.input-group .form-control {
    height: calc(2.25rem + 2px); /* Ajusta la altura del input si es necesario (tamaño estándar de Bootstrap form-control) */
    padding: 0.375rem 0.75rem; /* Padding vertical y horizontal de Bootstrap estándar */
}

/* Ajustes de bordes y radios cuando el icono está a la izquierda (prepend) */
.input-group-prepend .input-group-text {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0; /* Elimina el radio para que se una al input */
    border-bottom-right-radius: 0; /* Elimina el radio para que se una al input */
    border-right: 1px solid #ced4da; /* Borde entre icono e input */
}
.input-group-prepend .form-control {
    border-top-left-radius: 0; /* Elimina el radio para que se una al icono */
    border-bottom-left-radius: 0; /* Elimina el radio para que se una al icono */
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-left: none; /* Quita el borde izquierdo del input para unirlo al icono */
}

/* Ajustes de bordes y radios cuando el icono está a la derecha (append) */
.input-group-append .input-group-text {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0; /* Elimina el radio para que se una al input */
    border-bottom-left-radius: 0; /* Elimina el radio para que se una al input */
    border-left: 1px solid #ced4da; /* Borde entre input e icono */
}
.input-group-append .form-control {
    border-top-right-radius: 0; /* Elimina el radio para que se una al icono */
    border-bottom-right-radius: 0; /* Elimina el radio para que se una al icono */
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-right: none; /* Quita el borde derecho del input para unirlo al icono */
}

.input-group-text .fas {
    color: #495057; /* Color del icono */
}

/* Botón "Ingresar" / "Registrarse" */
.btn-primary-custom {
    background: linear-gradient(45deg, #007bff, #0056b3) !important; /* Gradiente de primary */
    border: none;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 700 !important; /* Bold */
    letter-spacing: 0.5px; /* Pequeño espaciado para mejor lectura */
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem; /* Aumentar el padding para un botón más grande */
    font-size: 1.1rem; /* Aumentar tamaño de fuente */
    color: #ffffff !important; /* Texto blanco para asegurar visibilidad */
}

.btn-primary-custom:hover {
    opacity: 0.9;
    transform: translateY(-1px); /* Pequeño efecto al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Enlace "¿Olvidaste tu contraseña?" */
.btn-link.text-primary {
    color: #007bff !important; /* Asegurar el color azul */
    font-weight: bold; /* Hacerlo bold */
}
.btn-link.text-primary:hover {
    color: #0056b3 !important; /* Azul más oscuro al pasar el cursor */
    text-decoration: underline;
}

/* Enlace "Regístrate aquí" */
.text-primary.font-weight-bold {
    color: #007bff !important;
    font-weight: bold !important;
}
.text-primary.font-weight-bold:hover {
    color: #0056b3 !important;
    text-decoration: underline;
}

/* Estilos de la barra de navegación que estaban en el style inline del register.blade.php */
.bg-gradient-primary {
    background: linear-gradient(45deg, #007bff, #0056b3) !important;
    color: white !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.9);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

/* Estilos para el footer (si usas testing.partials.footer) */
/* Esta sección es crucial para que el footer se vea bien y se pegue abajo */
.main-footer {
    background-color: #004080; /* Azul fuerte, consolidado */
    color: #ffffff; /* Texto blanco, consolidado */
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Eliminar 'width: 100%;' si ya está en un contenedor de ancho completo */
    /* Eliminar 'margin-top: auto;' aquí, ya que el 'flex-grow-1' en el main content lo manejará */
}
.main-footer .container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-around; /* Distribuye el espacio entre las columnas */
    align-items: flex-start; /* Alinea los elementos al inicio */
    gap: 20px; /* Espacio entre las columnas */
    font-size: 0.9rem; /* Tamaño de fuente para el footer */
}
.main-footer h5 {
    color: #ffffff; /* Títulos en blanco */
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.main-footer p, .main-footer a {
    color: #adb5bd; /* Texto gris claro */
    text-decoration: none;
    line-height: 1.6;
}
.main-footer a:hover {
    color: #e9ecef; /* Texto más claro al pasar el ratón */
    text-decoration: underline;
}
.main-footer .col-md-4 {
    flex: 1; /* Permite que las columnas crezcan y se encojan */
    min-width: 250px; /* Ancho mínimo para cada columna en el footer */
    margin-bottom: 15px; /* Espacio inferior para cada columna en pantallas pequeñas */
}
.main-footer .text-center.mt-3 { /* Estilo para el copyright */
    width: 100%; /* Ocupa todo el ancho */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 1rem !important; /* Asegura el margen superior */
    color: #adb5bd;
    font-size: 0.85rem;
}
/* Estilo para asegurar que el contenido no se solape con el footer fijo */
/* Este padding-bottom debe ser al menos la altura de tu footer, o un poco más.
body.layout-footer-fixed .content-wrapper {
    padding-bottom: 150px !important; /* Ajusta este valor según la altura real de tu footer 
}*/

/*========================================================================
  5. ESTILOS DE PIE DE PÁGINA (FOOTER)
==========================================================================*/

/* Footer principal (AdminLTE) */
.main-footer {
    background-color: #004080; /* Azul fuerte */
    color: #ffffff; /* Texto blanco */
    padding: 1rem;
    text-align: center;
    margin-top: auto; /* Empuja el footer al final de la página si el body es flex column */
}
.main-footer strong,
.main-footer a {
    color: #ffffff; /* Asegura que el texto y enlaces sean blancos */
}
.main-footer a:hover {
    color: #cce7ff; /* Azul más claro al pasar el cursor */
}

/* Si aún usas footer.bg-light en otras partes, puedes mantener estas reglas:
footer.bg-light { /* Este es el footer general que tenías antes
    background-color: #004080 !important; /* Azul fuerte 
}
footer.bg-light .text-uppercase,
footer.bg-light p {
    color: #ffffff !important; /* Texto blanco 
}*/
/* Pie de página inferior si lo usas con .bg-dark 
footer .bg-dark {
    background-color: #002850 !important; /* Azul más oscuro 
}*/


/*========================================================================
  6. ESTILOS DE PÁGINAS DE CLIENTE (HOME Y LISTADO DE PRODUCTOS)
==========================================================================*/

/* 6.1. Contenedores de Ancho Extendido */
.extended-width-section {
    width: 90vw;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 6.2. Carrusel Principal (userhome.blade.php) */
.custom-carousel-item-height {
    height: 600px;
    overflow: hidden;
}

.custom-carousel-item-height img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Opacidad ligeramente reducida */
    bottom: 50%;
    transform: translateY(50%);
    left: 5%;
    right: auto;
    max-width: 550px; /* Un poco más amplio */
    text-align: left;
    padding: 2rem; /* Más padding */
    border-radius: 0.75rem;
    backdrop-filter: blur(3px); /* Efecto de desenfoque sutil */
    -webkit-backdrop-filter: blur(3px); /* Para compatibilidad con Safari */
}

.carousel-caption h1 {
    font-size: 3.5rem; /* Título más grande */
    margin-bottom: 0.5rem;
    color: white; /* Aseguramos el color blanco aquí */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra más suave */
}

.carousel-caption p {
    font-size: 1.3rem; /* Párrafo más grande */
    margin-bottom: 1.5rem;
    color: white; /* Aseguramos el color blanco aquí */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra más suave */
}

.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Más delgado */
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.7)); /* Sombra para visibilidad */
}


/* 6.3. Carrusel de Productos Destacados (userhome.blade.php) */
#scrollProductos {
    scroll-behavior: smooth;
}

/* Estilos para las tarjetas de productos destacados */
.product-card-minimal {
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative; /* Importante para el posicionamiento absoluto del overlay */
}
.product-card-minimal:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-card-minimal .card-img-top {
    height: 220px;
    width: 100%; /* Asegúrate de que ocupe todo el ancho del contenedor */
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-top-left-radius: 0.25rem; /* Ajusta si tus rounded-3 son diferentes */
    border-top-right-radius: 0.25rem; /* Ajusta si tus rounded-3 son diferentes */
}
.product-card-minimal:hover .card-img-top {
    transform: scale(1.05);
}

/* Estilos para el badge de oferta */
.product-card-minimal .offer-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10; /* Asegura que esté por encima de todo */
    font-size: 0.85rem;
    padding: 0.3em 0.6em;
}

/* Overlay para los botones - ESTO ES CLAVE */
.product-card-minimal .overlay-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Un poco más oscuro para más contraste con los botones */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre los botones */
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
    z-index: 5; /* Debajo del badge, encima de la imagen */
    border-radius: inherit; /* Hereda el border-radius de la tarjeta si aplica */
}
.product-card-minimal:hover .overlay-buttons {
    opacity: 1; /* Se muestra al hacer hover sobre la tarjeta */
}

/* Estilo específico para los botones dentro del overlay */
.product-card-minimal .overlay-buttons .btn {
    width: 45px; /* Ancho fijo para hacerlos más redondos */
    height: 45px; /* Altura fija */
    display: flex; /* Para centrar el icono */
    justify-content: center;
    align-items: center;
    border-radius: 50% !important; /* Fuerza la forma redonda */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Pequeña sombra para realzar */
    opacity: 0; /* Inicialmente ocultos para la animación */
    transform: translateY(15px); /* Empiezan un poco más abajo */
    transition: all 0.3s ease;
    flex-shrink: 0; /* Evita que se encojan en pantallas pequeñas */
}

/* Animación de aparición de los botones */
.product-card-minimal:hover .overlay-buttons .btn {
    opacity: 1;
    transform: translateY(0);
}
.product-card-minimal:hover .overlay-buttons .btn:nth-child(1) { transition-delay: 0.05s; } /* Retraso para el primer botón */
.product-card-minimal:hover .overlay-buttons .btn:nth-child(2) { transition-delay: 0.15s; } /* Retraso para el segundo botón */


/* Ajustes para el contenido de la tarjeta */
.product-card-minimal .card-body {
    padding: 1rem;
    display: flex; /* Para usar flexbox */
    flex-direction: column; /* Contenido en columna */
    text-align: center; /* Centrar texto */
}

.product-card-minimal .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    white-space: nowrap; /* Evita que el nombre se rompa en varias líneas */
    overflow: hidden; /* Oculta el texto que desborda */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
}

.product-card-minimal .card-text {
    font-size: 0.9rem;
    color: #6c757d;
    height: 3em; /* Ajusta la altura de la descripción para 2-3 líneas */
    overflow: hidden;
    margin-bottom: 0.5rem; /* Espacio antes del precio */
    line-height: 1.5em; /* Altura de línea para control de espacio */
}

.product-card-minimal .mt-auto {
    margin-top: auto !important; /* Empuja el precio y botón "Ver Detalles" hacia abajo */
}

/* Precio styling */
.product-card-minimal h4 { /* Apunta a h4 directamente */
    font-size: 1.4rem;
    font-weight: 700; /* Asegura que el precio sea audaz */
    color: #343a40;
    margin-bottom: 0.5rem;
}

.product-card-minimal .text-danger.fw-bolder.fs-5 { /* Precio de oferta */
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-right: 0.5rem;
}

.product-card-minimal .text-muted.text-decoration-line-through { /* Precio original en oferta */
    font-size: 1rem;
    color: #888 !important; /* Un gris un poco más claro para el tachado */
}

/* Botón "Ver Detalles" inferior */
.product-card-minimal .btn-outline-dark {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    margin-top: 0.5rem;
    border-width: 1px; /* Borde más fino */
}
.product-card-minimal .btn-outline-dark:hover {
    background-color: #343a40;
    color: white;
}


/* Estilo para la última tarjeta "Ver más productos" con fondo borroso */
.product-card-see-more {
    background-color: #6c757d;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    min-height: 350px; /* Considera ajustar esto para que coincida con la altura de tus tarjetas de producto si es necesario */
    display: flex; /* Para centrar el contenido verticalmente */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0.25rem; /* Ajusta si tus rounded-3 son diferentes */
}
.product-card-see-more:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.product-card-see-more-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) blur(2px);
    transition: filter 0.3s ease;
    border-radius: inherit;
}
.product-card-see-more:hover .product-card-see-more-bg-container {
    filter: brightness(0.6) blur(0px);
}
.product-card-see-more .card-body {
    position: relative;
    z-index: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.product-card-see-more h5,
.product-card-see-more p,
.product-card-see-more .btn {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}


/* Flechas de Navegación del Carrusel de Productos */
.scroll-btn {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 45px; /* Ancho fijo */
    height: 45px; /* Altura fija */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important; /* Fuerza redondo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para que destaque */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    cursor: pointer;
}
.scroll-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.05); /* Ligeramente más grande y mantiene la centrado */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.scroll-btn.start-0 {
    left: 0.5rem; /* Ajusta el margen al borde */
}
.scroll-btn.end-0 {
    right: 0.5rem; /* Ajusta el margen al borde */
}


/* Sección "¿Por qué Elegirnos?" y Testimonios */
.icon-box {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
}
.icon-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.icon-box i {
    transition: transform 0.3s ease;
}
.icon-box:hover i {
    transform: scale(1.1);
}

.testimonial-card-minimal {
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%; /* Asegura altura consistente */
}
.testimonial-card-minimal:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.testimonial-rating .fas.fa-star,
.testimonial-rating .fas.fa-star-half-alt {
    color: #ffc107;
    font-size: 1.2rem;
    margin: 0 1px;
}

/* Métodos de Pago */
.payment-logos-container {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    gap: 3rem; /* Aumenta el espacio entre logos */
}
.payment-logo {
    max-width: 100px;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.payment-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Estilos Generales para un look Moderno y Minimalista */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.text-shadow-subtle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Animate.css delays */
.animate__animated {
    --animate-duration: 1s;
}
.animate__delay-0s { animation-delay: 0s; }
.animate__delay-1s { animation-delay: 0.1s; }
.animate__delay-2s { animation-delay: 0.2s; }
.animate__delay-3s { animation-delay: 0.3s; }
.animate__delay-4s { animation-delay: 0.4s; }
.animate__delay-5s { animation-delay: 0.5s; }
.animate__delay-6s { animation-delay: 0.6s; }
.animate__delay-7s { animation-delay: 0.7s; }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .carousel-caption {
        bottom: 20px;
        transform: translateY(0);
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
    }
    .carousel-caption h1 {
        font-size: 2.5rem;
    }
    .carousel-caption p {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section, .custom-carousel-item-height {
        height: 400px;
    }
    .carousel-caption h1 {
        font-size: 2rem;
    }
    .carousel-caption p {
        font-size: 1rem;
    }
    .d-none.d-md-block {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .hero-section, .custom-carousel-item-height {
        height: 300px;
    }
    .carousel-caption {
        padding: 1rem;
    }
    .carousel-caption h1 {
        font-size: 1.6rem;
    }
    .carousel-caption p {
        display: none !important;
    }
    .carousel-caption .btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    .product-card-minimal {
        width: 200px; /* Mantén el ancho que tenías */
    }
    .product-card-minimal .card-img-top {
        height: 160px;
    }
    .product-card-see-more {
        min-height: 280px;
    }
    .payment-logo {
        max-width: 80px;
    }
}

/* 6.4. Listado de Productos (indexuser.blade.php) y Tarjetas de Producto */

/* Estilos para el body general de la página de productos (opcional, si quieres un fondo específico) */
body.productos-page { /* Puedes añadir esta clase al body si quieres estilos específicos solo aquí */
    background-color: #f8f9fa; /* Fondo ligero para contraste */
}

/* Estilos del Sidebar de Filtros (Columna Izquierda) */
.filter-sidebar-col {
    padding-left: 0.5rem !important; /* Reduce el padding predeterminado de Bootstrap */
    padding-right: 0.5rem !important; /* También el derecho si quieres más compactación */
}

/* Ajustes para el sidebar sticky y shadow */
.filter-sidebar-col .card {
    border-radius: 1rem;
    overflow: hidden; /* Asegura que el rounded-top funcione bien en el header */
}

.filter-sidebar-col .card-header {
    border-bottom: none; /* Eliminar el borde inferior del header para un look más limpio */
}

.filter-sidebar-col .card-body {
    padding-left: 1rem; /* Reduce el padding izquierdo del card-body del filtro */
    padding-right: 1rem; /* Reduce el padding derecho del card-body del filtro */
}

/* Sticky sidebar para filtros */
@media (min-width: 768px) {
    .sticky-top {
        position: sticky;
        top: 80px; /* Ajusta según la altura de tu navbar */
        align-self: flex-start; /* Asegura que el sticky funcione dentro de un flex container */
    }
}

/* NUEVOS Estilos para los botones de categoría (en lugar de radio buttons directos) */
.custom-category-chip {
    display: flex; /* Para alinear ícono y texto */
    align-items: center;
    justify-content: center; /* Centrar contenido dentro del botón */
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem; /* Más redondeado, como un "chip" */
    border: 2px solid var(--bs-primary); /* Borde más pronunciado */
    color: var(--bs-primary); /* Texto del color primario */
    background-color: var(--bs-white); /* Fondo blanco por defecto */
    transition: all 0.3s ease;
}

.custom-category-chip i {
    font-size: 1.2rem; /* Tamaño del ícono */
}

/* Estado seleccionado de los chips de categoría */
input[name="filter_category"]:checked + .custom-category-chip {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Sombra más suave para el seleccionado */
    transform: translateY(-2px); /* Pequeño levantamiento */
}

/* Hover de los chips de categoría */
.custom-category-chip:hover:not(input[name="filter_category"]:checked + .custom-category-chip) {
    background-color: var(--bs-primary-rgb); /* Color primario con opacidad para hover */
    background-color: rgba(0, 123, 255, 0.1); /* Ligero fondo al pasar el mouse */
    border-color: var(--bs-primary);
    transform: translateY(-1px);
}

/* Estilos para la barra de búsqueda y ordenamiento en la columna principal */
.product-main-content .form-select.rounded-pill,
.product-main-content .form-control.rounded-start-pill {
    font-size: 1.1rem; /* Un poco más grande para el input y select */
}
.product-main-content .input-group-lg > .btn.rounded-end-pill {
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem; /* Ajustar padding del botón de búsqueda */
}

/* Estilos para los botones de radio personalizados (Categorías en el filtro) */
.custom-radio-button {
    position: relative;
    cursor: pointer;
    padding-left: 2.5rem; /* Espacio para el ícono de radio */
    user-select: none;
    margin-bottom: 0.75rem;
}

.custom-radio-button .form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-radio-button .form-check-label {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem; /* Bordes más redondeados */
    border: 1px solid #ced4da;
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%; /* Para que ocupe todo el ancho disponible */
    text-align: left;
}

.custom-radio-button .form-check-input:checked + .form-check-label {
    background-color: #007bff; /* Color primario de Bootstrap */
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

.custom-radio-button .form-check-label:hover {
    background-color: #d8edff; /* Un azul más claro al pasar el mouse */
    border-color: #a7d9ff;
}

/* Contenedor principal de productos con scroll infinito */
#productos-container {
    /* Si el scroll lo manejas con el window.addEventListener, este div no necesita un height fijo ni overflow */
    /* Pero si prefieres que solo este contenedor tenga scroll, DESCOMENTA las siguientes líneas */
    /*
    height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 10px;
    scroll-behavior: smooth;
    */
    /* Mantengo los estilos de scrollbar por si decides usar height y overflow-y en este div */
    /* Scrollbar para Webkit (Chrome, Safari) */
    &::-webkit-scrollbar {
        width: 8px;
    }
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* Estilos para las tarjetas de producto en el listado - CONSOLIDADO Y CON DISEÑO ORIGINAL */
.product-card-listing {
    border-radius: 1rem; /* Bordes más redondeados */
    overflow: hidden; /* Asegura que la imagen redondeada no desborde */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave por defecto */
    display: flex;
    flex-direction: column;
    min-height: 450px; /* Altura mínima para asegurar uniformidad. Ajusta si es necesario. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para hover */
}

.product-card-listing:hover {
    transform: translateY(-8px); /* Efecto de "levantar" al pasar el mouse */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; /* Sombra más fuerte y pronunciada al hover */
}

.product-card-listing .product-img-container {
    position: relative;
    width: 100%;
    height: 250px; /* Altura fija para las imágenes. Puedes ajustarla. */
    overflow: hidden;
    border-bottom: 1px solid #eee; /* Separador sutil entre imagen y cuerpo */
    border-top-left-radius: 1rem; /* Bordes redondeados para la imagen */
    border-top-right-radius: 1rem;
}

.product-card-listing .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
    transition: transform 0.5s ease; /* Zoom suave al hover */
    display: block; /* Elimina espacio extra debajo de la imagen si lo hubiera */
}

.product-card-listing:hover .product-img {
    transform: scale(1.1); /* Efecto zoom más pronunciado al pasar el ratón */
}

/* Nuevo estilo para el switch de ofertas */
.custom-switch-offers .form-check-input {
    height: 1.5em; /* Altura un poco más grande */
    width: 2.7em; /* Ancho proporcional */
    margin-right: 0.75rem; /* Espacio a la derecha del switch */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid var(--bs-gray-400); /* Borde sutil */
}

.custom-switch-offers .form-check-input:checked {
    background-color: var(--bs-primary); /* Color primario cuando está activo */
    border-color: var(--bs-primary);
}

.custom-switch-offers .form-check-label {
    font-size: 1.1rem; /* Texto un poco más grande */
    color: var(--bs-dark); /* Color de texto más oscuro */
    display: flex; /* Para alinear el icono y el texto */
    align-items: center;
}

.custom-switch-offers .form-check-label i {
    font-size: 1.2em; /* Icono ligeramente más grande */
    color: var(--bs-primary); /* Color del icono */
    margin-right: 0.5rem; /* Espacio entre icono y texto */
}



/* Overlay sobre la imagen (el que aparece al hover) */
.product-card-listing .product-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Fondo más oscuro para mayor contraste */
    color: white;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease-in-out; /* Transición suave para aparecer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem; /* Más padding para el contenido del overlay */
    text-align: center;
    border-top-left-radius: 1rem; /* Bordes redondeados para que coincida con la imagen */
    border-top-right-radius: 1rem;
}

.product-card-listing:hover .product-overlay {
    opacity: 1; /* Aparece al pasar el mouse */
}

.product-card-listing .product-overlay h5 {
    font-size: 1.5rem; /* Título un poco más grande en el overlay */
    margin-bottom: 0.75rem;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7); /* Sombra de texto para mejor lectura */
    font-weight: bold; /* Hacer el título más negrita */
}

.product-card-listing .product-overlay p {
    font-size: 1rem; /* Descripción un poco más grande */
    margin-bottom: 1.5rem; /* Más espacio antes de los botones */
    line-height: 1.4; /* Espaciado de línea para la descripción */
}

.product-card-listing .product-overlay .btn {
    margin: 0.5rem 0; /* Espaciado vertical entre botones si hay varios */
    font-weight: bold;
    transition: all 0.3s ease;
    width: 80%; /* Botones más anchos dentro del overlay */
    max-width: 200px; /* Limitar ancho máximo para no ser excesivos */
    border-radius: 0.5rem; /* Bordes de los botones del overlay */
}

/* Estilos específicos para el botón "Ver Detalles" en el overlay */
.product-card-listing .product-overlay .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.product-card-listing .product-overlay .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Estilo para el botón "Agregar al Carrito" en verde agua */
.product-card-listing .product-overlay .btn-add-to-cart {
    background-color: #20c997; /* Un verde agua/turquesa */
    border-color: #20c997;
    color: white; /* Texto blanco para contraste */
}
.product-card-listing .product-overlay .btn-add-to-cart:hover {
    background-color: #1aa079; /* Tono más oscuro al pasar el ratón */
    border-color: #1aa079;
}

/* Estilos para el botón "Agotado" en el overlay */
.product-card-listing .product-overlay .btn-outline-light[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente claro para agotado */
    color: #fff; /* Texto blanco */
    border-color: #fff;
}

/* Estilos para los botones de admin en el overlay */
.product-card-listing .product-overlay .btn-warning,
.product-card-listing .product-overlay .btn-danger {
    border-radius: 0.5rem; /* Bordes un poco redondeados para los botones de admin en overlay */
}

.product-card-listing .product-overlay .btn-warning:hover,
.product-card-listing .product-overlay .btn-danger:hover {
    transform: scale(1.05);
}

/* Estilos para el cuerpo de la tarjeta (fuera del overlay) */
.product-card-listing .card-body {
    padding: 1rem; /* Asegura un padding consistente */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el body se expanda para llenar el espacio restante */
}
 
.product-card-listing .card-title {
    font-size: 1.25rem; /* Tamaño del título del producto */
    font-weight: bold; /* Título negrita */
    margin-bottom: 0.5rem; /* Ajusta el espacio entre título y precio */
    color: #343a40; /* Color oscuro para el título */
}

/* Estilos para la sección de precios dentro de la tarjeta */
.product-card-listing .price-section {
    margin-bottom: 0.75rem; /* Espacio debajo de los precios */
    line-height: 1.2; /* Reduce el espacio entre las líneas de precios si hay oferta */
    display: block; /* Asegura que ocupe su propia línea */
}
.product-card-listing .price-section .text-danger.fw-bold.fs-5 {
    color: #dc3545 !important; /* Rojo de Bootstrap para el precio de oferta */
}
.product-card-listing .price-section .text-muted.text-decoration-line-through.fs-6 {
    color: #6c757d !important; /* Gris de Bootstrap para precio tachado */
}
.product-card-listing .price-section .badge.bg-danger {
    margin-top: 5px; /* Espacio arriba de la etiqueta "Oferta" */
    font-size: 0.8rem;
    padding: 0.3em 0.6em;
    border-radius: 0.25rem; /* Bordes redondeados para el badge */
}

/* Asegura que la descripción ocupe el espacio flexible y empuje el botón */
.product-card-listing .card-text.flex-grow-1 {
    margin-top: 0.5rem; /* Pequeño espacio entre precio y descripción */
    margin-bottom: 0.5rem; /* Espacio antes del botón */
    font-size: 0.95rem; /* Tamaño de fuente para la descripción */
    color: #6c757d; /* Color de texto para la descripción */
}

/* El botón "Añadir al carrito" se alinee al final */
.product-card-listing .mt-auto {
    margin-top: auto !important; /* Anula cualquier otro margen y lo empuja hacia abajo */
}

/* Estilos para el botón "Añadir" en la parte inferior de la tarjeta */
.product-card-listing .btn.rounded-pill {
    border-radius: 50rem !important; /* Bordes ultra-redondeados */
    padding: 0.5rem 1rem; /* Padding para el botón */
    font-size: 0.95rem;
}


/* 6.5. Formas de Pago (userhome.blade.php) */
.payment-logo {
    max-height: 50px; /* Altura máxima para los logos de pago */
    width: auto; /* Ancho automático para mantener proporción */
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); /* Sombra para darle un poco de profundidad */
    transition: transform 0.2s ease;
}

.payment-logo:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

/* 6.6. ESTILOS PARA LA IMAGEN PRINCIPAL DEL PRODUCTO EN DETALLE (Vista SHOW.BLADE) */
.product-detail-image-card {
    /* Clases de Bootstrap como shadow-lg, border-0, rounded-4 ya están en el HTML */
    /* Puedes añadir aquí estilos adicionales si shadow-lg no es suficiente o quieres un hover */
    transition: transform 0.3s ease-in-out; /* Animación para el hover de la tarjeta completa */
}
.product-detail-image-card:hover {
    transform: translateY(-5px); /* Ligeramente hacia arriba al pasar el ratón */
}

/*.image-aspect-ratio-container-detail {
    position: relative;
    width: 100%;
    /* Ajusta este valor para la relación de aspecto deseada de la imagen principal */
    /* Por ejemplo, 100% para cuadrado, 75% para 4:3, etc.
    padding-bottom: 100%; /* Ejemplo: Cuadrado por defecto para la vista de detalle
    overflow: hidden;
    background-color: var(--bs-gray-100); /* Fondo más claro y minimalista
    border-radius: 0.75rem; /* Ya lo tenías, mantenemos
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.image-aspect-ratio-container-detail {
    position: relative;
    width: 100%;
    /* Ajusta este valor para la relación de aspecto deseada de la imagen principal */
    /* padding-bottom: 100%; <--- ELIMINA ESTO */
    overflow: hidden;
    background-color: var(--bs-gray-100);
    border-radius: 0.75rem;
    /* display: flex; justify-content: center; align-items: center; <--- TAMBIÉN PUEDES ELIMINAR ESTO SI NO ES NECESARIO CON LOS NUEVOS ESTILOS */
}

.detail-img-responsive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    padding: 1.5rem; /* Un padding un poco más generoso para un look flotante */
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
}

/* El hover sobre la imagen ya lo tenías, pero el hover de la tarjeta superior es más efectivo */
/* .product-detail-image-card:hover .detail-img-responsive {
    transform: scale(1.03);
} */


/* Estilos para la Columna Derecha: Información del Producto */
.product-info-wrapper {
    /* Clases de Bootstrap como p-3, bg-white, rounded-4, shadow-sm ya están en el HTML */
    /* Puedes añadir aquí transiciones o estilos adicionales al wrapper si lo deseas */
    transition: box-shadow 0.3s ease-in-out;
}
.product-info-wrapper:hover {
    box-shadow: var(--bs-box-shadow-lg) !important; /* Sombra un poco más pronunciada al hover */
}

.product-info-wrapper h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Título responsivo y grande */
    line-height: 1.2;
    color: var(--bs-dark); /* Color del título más neutro (oscuro) */
}

.product-info-wrapper .lead {
    font-size: 1.2rem; /* Descripción un poco más grande y legible */
    color: var(--bs-secondary); /* Color de texto más suave */
}

/* Detalles Adicionales (la lista de características) */
.product-info-wrapper .list-unstyled li {
    display: flex; /* Usamos flexbox para alinear contenido */
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-gray-200); /* Separador sutil entre elementos */
    margin-bottom: 0 !important; /* Anulamos el mb-2 de Bootstrap para controlar el espaciado con padding */
}

.product-info-wrapper .list-unstyled li:first-child {
    padding-top: 0; /* No hay padding superior para el primer elemento */
}
.product-info-wrapper .list-unstyled li:last-child {
    border-bottom: none; /* No hay borde inferior para el último elemento */
}

.product-info-wrapper .list-unstyled li i {
    margin-right: 1.2rem; /* Más espacio a la derecha de los iconos */
    width: 1.5em; /* Ancho fijo para alinear perfectamente */
    text-align: center;
    font-size: 1.1em; /* Iconos ligeramente más grandes */
    color: var(--bs-primary); /* Un color primario para los iconos de detalle */
}

.product-info-wrapper .list-unstyled li span.fw-semibold {
    color: var(--bs-dark); /* Color más oscuro para el valor del detalle */
    margin-left: auto; /* Empuja el valor a la derecha */
    text-align: right;
}

/* Ajuste para el botón de volver al listado para que coincida con el diseño */
.btn-outline-secondary.rounded-pill {
    border-width: 1px; /* Más sutil */
    font-weight: 600; /* Más audaz */
    padding: 0.75rem 1.5rem; /* Padding uniforme */
    transition: all 0.3s ease;
}
.btn-outline-secondary.rounded-pill:hover {
    background-color: var(--bs-secondary);
    color: var(--bs-white);
}

/* Estilos para el botón principal de "Añadir al Carrito" */
.btn-primary.btn-lg.rounded-pill {
    font-weight: 600;
    padding: 0.8rem 2rem; /* Un poco más de padding para destacar */
}
.btn-primary.animate__animated {
    --animate-duration: 2s; /* Ajuste de velocidad del pulso */
}

/* Estilos para los botones de admin (Editar/Eliminar) */
.product-info-wrapper .btn-warning,
.product-info-wrapper .btn-danger {
    font-weight: 600;
    padding: 0.5rem 1.2rem; /* Padding un poco más pequeño que el principal */
}

/* Estilos para la sección de productos relacionados */
.product-related-section h2 {
    font-size: 2rem;
    color: var(--bs-primary);
    margin-bottom: 2rem;
    text-align: center;
}

.product-card-minimal {
    border: none; /* Quitamos el borde para un look más limpio */
    box-shadow: var(--bs-box-shadow-sm); /* Sombra ligera */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: var(--bs-border-radius-lg); /* Bordes redondeados */
    overflow: hidden; /* Asegura que la imagen no se desborde */
}

.product-card-minimal:hover {
    transform: translateY(-5px); /* Ligeramente hacia arriba al pasar el ratón */
    box-shadow: var(--bs-box-shadow); /* Sombra un poco más pronunciada */
}

.product-card-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Relación de aspecto 4:3 para imágenes de tarjeta */
    overflow: hidden;
    background-color: var(--bs-gray-100);
}

.product-card-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recortar si es necesario para llenar el espacio */
    border-top-left-radius: var(--bs-border-radius-lg); /* Para que la imagen también se redondee */
    border-top-right-radius: var(--bs-border-radius-lg);
    transition: transform 0.3s ease-in-out;
}

.product-card-minimal:hover .product-card-image-container img {
    transform: scale(1.05); /* Zoom sutil al pasar el ratón */
}

.product-card-minimal .card-body {
    padding: 1.25rem; /* Padding más generoso en el cuerpo de la tarjeta */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón hacia abajo si hay espacio */
}

.product-card-minimal .card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 0.5rem;
}

.product-card-minimal .card-text.small {
    font-size: 0.875rem;
    color: var(--bs-muted);
    margin-bottom: 1rem;
}

.product-card-minimal .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-right: 0.75rem;
}

.product-card-minimal .btn-outline-primary.rounded-pill {
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    border-width: 1px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.product-card-minimal .btn-outline-primary.rounded-pill:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

/* Boton de animacion del pulso */
.btn-primary.animate__animated {
    --animate-duration: 1.5s; /* Un poco más rápido que el valor por defecto */
}

/*Nueva seccion para comentarios dentro de la vista SHOW de detalles productos.
/******************************************************************************
/* Custom Carousel Height for product detail images */
.custom-carousel-inner-height {
    height: 500px; /* Define una altura fija para el carrusel de imágenes de detalle */
    display: flex; /* Asegura que las imágenes se centren verticalmente si son más pequeñas */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Importante para que las imágenes no se salgan */
    border-radius: 0.75rem; /* Hereda el redondeo de la tarjeta principal */
}

/* Ajuste para la imagen dentro del carrusel, para que no tenga padding extra si no es necesario */
.custom-carousel-inner-height .detail-img-responsive {
    position: relative; /* Cambia a relative si el padre tiene altura fija y usas flex */
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' para que la imagen se ajuste sin recortarse, manteniendo su aspecto */
    padding: 1.5rem; /* Mantiene el padding para el look flotante */
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
}
.custom-carousel-inner-height .carousel-item {
    height: 100%; /* Asegura que cada item del carrusel ocupe toda la altura */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* SECCIÓN DE RESEÑAS */
.reviews-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--bs-light); /* Fondo claro para la sección */
    border-radius: 1rem; /* Bordes redondeados para la sección */
    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05);
}

.reviews-section h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--bs-primary);
    font-size: 2.2rem;
}

/* Tarjeta del formulario de reseña */
.review-form-card {
    border-radius: 0.75rem;
    background-color: var(--bs-white);
    box-shadow: var(--bs-box-shadow-sm);
    padding: 1.5rem;
}

/* Estrellas interactivas en el formulario */
#product-rating-input .rating-star-input {
    font-size: 2.2rem; /* Estrellas más grandes para la entrada */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
    padding: 0 0.1rem; /* Pequeño padding para mejor clicabilidad */
}

#product-rating-input .rating-star-input:hover {
    transform: scale(1.1); /* Ligeramente más grande al pasar el ratón */
}

#product-rating-input .rating-star-input.fas {
    color: var(--bs-warning); /* Estrellas rellenas de color warning */
}
#product-rating-input .rating-star-input.far {
    color: var(--bs-gray-400); /* Estrellas vacías en un color gris suave */
}

#selected-rating-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bs-secondary);
}

/* Tarjetas individuales de reseña */
.testimonial-card-product {
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--bs-white); /* Fondo blanco para cada reseña */
    border: 1px solid var(--bs-gray-200); /* Borde sutil */
}

.testimonial-card-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.testimonial-card-product .card-body {
    padding: 1.5rem;
}

.testimonial-card-product .product-review-rating i {
    font-size: 1rem;
    margin-right: 2px;
}

.testimonial-card-product .fas.fa-user-circle {
    color: var(--bs-primary); /* Color para el icono de usuario */
}

/* Estilo para el texto del comentario */
.testimonial-card-product .card-text.fst-italic {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Mensajes de alerta personalizados en la sección de reseñas */
.reviews-section .alert {
    border-radius: 0.75rem;
    box-shadow: var(--bs-box-shadow-sm);
    padding: 1.5rem;
}
.reviews-section .alert-link {
    font-weight: bold;
}

/* Ajustes a estilos existentes para armonía */

/* Product Detail Image Card */
.product-detail-image-card {
    transition: box-shadow 0.3s ease-in-out;
}
.product-detail-image-card:hover {
    box-shadow: var(--bs-box-shadow-lg) !important; /* Más sombra al hover */
    transform: none; 
}

.product-info-wrapper {
    box-shadow: var(--bs-box-shadow-sm); /* Sombra inicial más suave */
}
.product-info-wrapper:hover {
    box-shadow: var(--bs-box-shadow) !important; /* Sombra al hover, coherente con otros elementos */
}

/* General button styles for consistency */
.btn-primary.btn-lg,
.btn-outline-danger.btn-lg {
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
}
.btn-outline-secondary.btn-lg {
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
}

/* Ajuste de animación para el botón Añadir al Carrito */
.btn-primary.animate__animated {
    --animate-duration: 1.5s; /* Ajuste para un pulso más rápido */
    --animate-delay: 0s;
}

/* Eliminar el margin-bottom predeterminado de li en detalles del producto si no es deseado */
.product-info-wrapper .list-unstyled li {
    margin-bottom: 0 !important; /* Asegura que el padding/border-bottom controlen el espaciado */
} 

/* 6.7. ESTILOS PARA EL CARRITO DE COMPRAS DEL CLIENTE */

/* Asegura que el input ocupe el espacio sin flechas */
.quantity-input-group input.quantity-input {
    /* Forzar un ancho más pequeño y fijo para el número */
    width: 45px !important; /* REDUCIDO A 45px (Antes 60px) */
    flex: 0 0 auto; 
    -webkit-appearance: none;
    margin: 0;
    padding: 0.375rem 0; /* Centrar verticalmente el texto del número */
}

/* Ocultar flechas en Firefox */
.quantity-input-group input.quantity-input[type=number] {
    -moz-appearance: textfield;
}

/* Ocultar flechas (spinners) en navegadores WebKit (Chrome, Safari) */
.quantity-input {
    /* Mantiene el input como campo de texto para ocultar las flechas */
    -moz-appearance: textfield; /* Para Firefox */
    -webkit-appearance: none; /* Para Chrome/Safari */
    margin: 0; /* Asegura que no haya márgenes extra */
}

/* Asegura que los botones tengan un ancho y alto consistente y más compacto */
.quantity-input-group .btn {
    /* Dar un ancho más pequeño y fijo para que no se deformen los iconos */
    width: 30px; /* REDUCIDO A 30px (Antes 35px) */
    
    /* Reducimos el padding horizontal a 0 y centramos verticalmente */
    padding: 0.25rem 0; 
    line-height: 1;
    height: 35px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El resto del CSS (border-radius) se mantiene igual y está correcto */
.quantity-input-group button.decrease-quantity {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.375rem; 
    border-bottom-left-radius: 0.375rem;
}

.quantity-input-group button.increase-quantity {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem; 
    border-bottom-right-radius: 0.375rem;
}

/*========================================================================
  7. ESTILOS DE UTILIDAD Y MISCELÁNEOS
==========================================================================*/

/* Gradiente de información (usado en algunos cuadros de AdminLTE) */
.bg-gradient-info {
    background: linear-gradient(45deg, #1d3f72, #007bff);
    color: white !important;
}

/* Sombra de texto pronunciada para mayor visibilidad */
.text-shadow-strong {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/*========================================================================
  8. ESTILOS DE PAGINA DEL CHECKOUT
==========================================================================*/

/* Ocultar las flechas de los input de tipo number */
.custom-no-arrows::-webkit-outer-spin-button,
.custom-no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-no-arrows {
    -moz-appearance: textfield; /* Firefox */
    text-align: center; /* Centrar el número dentro del input */
}

/* Ajuste para el input de cantidad dentro del carrito */
.quantity-input-group .custom-no-arrows { /* Usamos la clase específica del input */
    min-width: 25px !important; /* Forzar el ancho mínimo */
    max-width: 40px !important; /* Añadir un ancho máximo si quieres un límite superior */
    width: auto !important; /* Permitir que el ancho se ajuste al contenido */
    flex-grow: 0 !important; /* Desactivar el crecimiento flexible para que no se expanda */
    flex-shrink: 0 !important; /* Asegurar que no se encoja más allá de su contenido */
    border-left: 0;
    border-right: 0;
    /* Puedes ajustar el padding si es necesario, pero con auto width quizás no lo necesites tanto */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.quantity-input-group .btn {
    z-index: 1; /* Asegura que los botones estén por encima del input si hay solapamiento */
}

/* Si aún no funciona, puedes intentar con el input-group en general */
.quantity-input-group {
    display: inline-flex !important; /* Asegura que no ocupe todo el ancho de su contenedor */
    width: auto !important; /* Que el grupo también se ajuste al contenido */
    max-width: 100px; /* Un máximo para el grupo completo, si lo deseas */
}

/* Para el icono de Mercado Pago si no puedes usar una imagen 
.list-group-item img[alt="Mercado Pago"] {
    display: none;  Oculta la imagen rota 
}*/


/*========================================================================
  9. ESTILOS PARA EL LISTADO DE COMPRAS DEL CLIENTE
==========================================================================*/
.card.rounded-4 {
    border-radius: 1.5rem !important; /* Más redondeado */
}
.bg-gradient-primary {
    background: linear-gradient(45deg, #007bff, #6f42c1); /* Un gradiente púrpura-azul */
    border-bottom: none; /* Eliminar el borde entre header y body */
}
.card-header.text-white-50 {
    opacity: 0.8;
}
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #495057;
    --bs-btn-focus-shadow-rgb: 60,64,68;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #495057;
    --bs-btn-active-border-color: #495057;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-gradient: none;
}
/* Estilos para el botón de cancelar */
.cancel-order-btn {
    background-color: #dc3545; /* Rojo de Bootstrap para peligro */
    border-color: #dc3545;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cancel-order-btn:hover {
    background-color: #c82333; /* Rojo más oscuro al pasar el mouse */
    border-color: #bd2130;
}

/* Nuevos estilos para la funcionalidad de comentarios y valoraciones */
.rating-stars .star-item {
    font-size: 1.8rem; /* Tamaño de las estrellas */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    color: #ccc; /* Color por defecto de las estrellas vacías */
}

.rating-stars .star-item:hover,
.rating-stars .star-item.fas {
    color: #ffc107; /* Color de las estrellas llenas (amarillo de Bootstrap warning) */
    transform: scale(1.1);
}

.modal-header.bg-primary {
    background-color: #007bff !important; /* Asegura el color de fondo del header del modal */
    border-bottom: 0;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%); /* Hace la X blanca para fondo oscuro */
}

.list-group-item.flex-wrap {
    flex-direction: column; /* Apila elementos en pantallas pequeñas */
    align-items: flex-start !important; /* Alinea al inicio cuando se apila */
}

@media (min-width: 768px) {
    .list-group-item.flex-wrap {
        flex-direction: row; /* Vuelve a la fila en pantallas grandes */
        align-items: center !important; /* Centra verticalmente en fila */
    }
}


/*========================================================================
  10. ESTILOS PARA LA SECCION ADMINISTRADOR
==========================================================================*/
/* Estilos para la seccion de editar productos */
/* Colores personalizados (si aún no los tienes, ajústalos a tu paleta) */
:root {
    --bs-dark-blue: #004080; /* Un azul oscuro que combine con tu AdminLTE */
    --bs-light-gray: #f8f9fa; /* Un gris muy claro para fondos */
}

.text-dark-blue {
        color: #004080; /* Azul oscuro para títulos */
    }

.card-header .form-control.rounded-pill {
        border-radius: 50rem !important; /* Más redondeado */
        padding-right: 2.5rem; /* Espacio para el icono de búsqueda */
    }

.card-header .input-group-append {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }

.card-header .input-group-append .btn-link {
        padding: 0.5rem 1rem; /* Ajustar padding del botón de búsqueda */
    }

.table-hover tbody tr.animated-hover:hover {
        background-color: #f8f9fa; /* Un hover más suave */
        transform: scale(1.005); /* Ligerísimo zoom al hacer hover */
        transition: all 0.2s ease-in-out;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Sombra sutil al hover */
    }
/*
.table th, .table td {
        white-space: nowrap;  Evita que el texto se rompa en varias líneas 
    }*/

/* Estilo para las imágenes de la tabla */
    .img-thumbnail.rounded-circle {
        border: 1px solid #dee2e6;
        padding: 2px;
    }

/* Ajuste para los badges */
    .badge {
        padding: 0.4em 0.7em;
        font-size: 0.75em;
    }

/* Mejora el padding del card-body cuando hay scroll en la tabla */
    .card-body.p-0 .table-responsive {
        padding: 1rem; /* Añade un padding interior al contenedor de la tabla */
    }

/* Estilo para paginación si se usa Bootstrap 5 */
    .pagination .page-item .page-link {
        border-radius: 0.25rem; /* Ligeramente redondeado */
        margin: 0 2px;
    }
    .pagination .page-item.active .page-link {
        background-color: #007bff;
        border-color: #007bff;
    }

/* Estilos para el card */
.card.shadow-sm.rounded-lg.border-0 {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; /* Sombra sutil */
}

.card-header.bg-white {
    /* Ya tiene border-bottom de Bootstrap, no es necesario más */
}

/* Estilos para la sección de carga de imagen */
.image-upload-container {
    position: relative;
    padding: 20px;
    background-color: var(--bs-light-gray); /* Fondo gris claro */
    border-radius: 0.5rem; /* Bordes redondeados */
    min-height: 250px; /* Altura mínima para centrar el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#no-image {
    background-color: #e9ecef; /* Un gris un poco más oscuro para el fondo del placeholder */
    color: #6c757d; /* Color para el icono */
    border: 2px dashed #adb5bd; /* Borde punteado */
}

/* Ajustes para los inputs y selects */
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary); /* Color primario de Bootstrap al enfocar */
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
}

/* Ajustes para el switch de oferta (si necesitas personalización extra) */
.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Estilos para mejorar apariencia del SIDEBAR */
    .main-sidebar .nav-link {
        background-color: rgba(255, 255, 255, 0.05);
        color: white !important;
        border-radius: 0.25rem;
        margin-bottom: 2px;
    }

    .main-sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .main-sidebar .nav-treeview .nav-link {
        padding-left: 2.5rem;
    }

    /* ESTILOS PARA FORZAR EL COMPORTAMIENTO DE OCULTAR TEXTO Y ALINEAR ICONOS */
    .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p {
        display: none !important; /* Oculta el texto */
        opacity: 0 !important;
        width: 0 !important;
        white-space: nowrap; /* Evita que el texto se "rompa" antes de ocultarse */
    }

    .sidebar-mini.sidebar-collapse .main-sidebar .nav-link .right {
        display: none !important; /* Oculta la flecha de los menús desplegables */
    }

    /* El siguiente bloque se aplica a todos los .nav-icon, incluyendo el de cerrar sesión */
    .sidebar-mini.sidebar-collapse .main-sidebar .nav-link .nav-icon {
        margin-left: -2px; /* Pequeño ajuste para centrar iconos si es necesario */
        margin-right: -2px; /* Elimina margen para que el icono se centre mejor */
        transition: margin-left 0.3s linear; /* Suaviza la transición */
    }

    .sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text {
        display: none !important; /* Oculta el texto del logo también */
    }

    /* Opcional: Ajustar el padding del contenedor de abajo si es necesario */
    .sidebar-mini.sidebar-collapse .main-sidebar .mt-auto {
        padding: 0.5rem 0.2rem !important; /* Ajusta el padding para que el icono se vea bien en modo colapsado */
    }

/**************************************************************/

/*
 * ESTILOS OBSOLETOS A REVISAR O ELIMINAR: */

/*
.navbar-admin-dark {
    background: linear-gradient(to right, #212529, #343a40) !important;
}
.navbar-admin-dark .nav-link,
.navbar-admin-dark .navbar-brand {
    color: #f8f9fa !important;
}
.navbar-admin-dark .nav-link:hover {
    color: #dee2e6 !important;
}
.navbar-admin-dark .navbar-badge {
    background-color: #dc3545 !important;
    color: #fff !important;
}
*/