/*
 * Estilos personalizados para la librería online MiLibro.uy
 * Sobrescribe la apariencia por defecto de Bootstrap 5.3
 * Autor: MiLibro Frontend
 */

/* Importamos la tipografía Poppins desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*
 * Variables de color para facilitar la personalización y
 * mantener una paleta coherente en todo el sitio
 */
:root {
    --primary-color: #2A3590; /* Azul Logo */
    --primary-darker: #1E2766; /* Azul Logo Oscuro */
    --secondary-color: #EAEFF6; /* Gris Azulado Claro */
    --accent-color: #C4FFC7; /* Verde Menta Logo */
    --accent-darker: #A0D4A3; /* Verde Menta Oscuro */
    --background-color: #FFFFFF; /* Fondo principal */
    --text-color: #34495E; /* Negro Suave */
    --border-color: #DFE3E8; /* Bordes sutiles */
    --white-color: #FFFFFF; /* Blanco puro */

    /* Colores para estados de Bootstrap comunes */
    --success-color: #4CAF50; /* Verde éxito */
    --danger-color: #D32F2F; /* Rojo peligro */
    --warning-color: #FFC107; /* Amarillo advertencia */
    --info-color: #17A2B8;   /* Azul información */
}

/* Estilos globales */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Enlaces */
a,
.link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
    color: var(--primary-darker);
}

/*
 * Botones
 * Se refactoriza para unificar la base y luego aplicar variantes Bootstrap.
 */
.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-radius: 0.25rem;
    padding: 0.32rem 0.64rem; /* Reduced from 0.4rem 0.8rem */
    font-size: 0.72rem; /* Reduced from 0.9rem */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    line-height: 1.5;
}

.btn:hover {
    transform: translateY(-2px); /* Pequeño efecto de elevación al pasar el mouse */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Botones Bootstrap: Primary */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-darker);
    border-color: var(--primary-darker);
    color: var(--white-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
}

/* Botones Bootstrap: Secondary (ahora será un gris más claro) */
.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #D8E0EB; /* Oscurecer ligeramente el secondary - pre-calculado */
    border-color: #D8E0EB;
    color: var(--text-color);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/*
 * Nueva Variante: btn-accent
 * Ideal para botones de "Añadir al carrito", "Comprar", o acciones principales.
 */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--primary-color); /* Texto oscuro para mejor contraste */
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
    background-color: var(--accent-darker);
    border-color: var(--accent-darker);
    color: var(--primary-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* Botones de contorno (outline) */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-accent {
    color: var(--primary-color); /* Texto oscuro para contraste */
    border-color: var(--accent-color);
    background-color: transparent;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
    color: var(--primary-color); /* Texto oscuro para contraste */
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}


/* Tarjetas y componentes similares */
.card {
    border: 1px solid var(--border-color); /* Un borde sutil para definirla mejor */
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.08); /* Sombra más definida */
    background-color: var(--white-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(42, 53, 144, 0.15); /* Sombra con color primario */
    transform: translateY(-3px); /* Pequeño efecto de elevación */
}

.card-header {
    background-color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-color); /* Asegura que el texto en el header sea legible */
    padding: 0.75rem 1.25rem; /* Ajuste de padding */
}

.card-footer {
    background-color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem; /* Ajuste de padding */
}


/* Importa la fuente DM Sans desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;700&display=swap');

/* Barra de navegación */
.navbar {
    background-color: var(--white-color);
    border-bottom: none;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    /* Mantenemos las reglas existentes, pero las ajustamos */
    color: var(--primary-color);
    padding-top: 0;
    padding-bottom: 0;

    /* Para alinear el ícono y el texto */
    display: flex;
    align-items: center;
}

/* Nuevas reglas para el ícono SVG */
.logo-icon {
    height: 30px; /* Ajusta la altura del ícono como prefieras */
    width: auto;
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

/* Nuevas reglas para el texto del logo */
.logo-text-mi {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300; /* DM Sans Light */
    font-size: 1.5rem;
}

.logo-text-libro {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; /* DM Sans Bold */
    font-size: 1.5rem;
}

/* Reglas existentes que no necesitan cambio */
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--primary-darker);
}

.navbar-nav .nav-link {
    color: var(--text-color);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--primary-color);
}

.navbar-nav .nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* Modificado: padding ajustado para .navbar .btn */
.navbar .btn {
    margin-left: 0.5rem;
    padding: 0.28rem 0.6rem; /* Reduced from 0.35rem 0.75rem */
    font-size: 0.68rem; /* Reduced from 0.85rem */
}

/* Formularios */
.form-control,
.form-select {
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.6rem; /* Reduced from 0.5rem 0.75rem */
    border-radius: 0.35rem;
    box-shadow: none;
    font-size: 0.8rem; /* Reduced from 1rem */
    color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(42, 53, 144, 0.25); /* Sombra con color primario */
    outline: 0;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.4rem; /* Ajuste de margen inferior */
    font-size: 0.9rem; /* Ajuste de tamaño de fuente */
    color: var(--text-color);
}

/* Clases utilitarias */
.rounded {
    border-radius: 0.5rem !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-md { /* Nueva utilidad para una sombra media */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg { /* Nueva utilidad para una sombra grande */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.hover-bg:hover {
    background-color: var(--secondary-color);
    color: var(--text-color) !important;
    text-decoration: none;
}

/* -------------------------------------------------- */
/* Estilos para vistas de libros y utilidades comunes */
/* -------------------------------------------------- */

/* Imagen miniatura de libros */
.bookthumb {
    width: 140px;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem; /* Añadir un poco de redondeo a las miniaturas */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08); /* Sombra sutil para las miniaturas */
}

/* Contenedor de la portada del detalle de libro */
.book-cover-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de portada principal */
.book-cover {
    object-fit: cover;
    border-radius: 0.75rem; /* Redondeo para la portada principal */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); /* Sombra más fuerte para la portada principal */
}

/* Fondo para indicador de carga */
.book-cover-loader {
    z-index: 10;
    background-color: var(--secondary-color);
    border-radius: 0.75rem;
}

.book-cover-placeholder {
    z-index: 5;
    background-color: var(--secondary-color);
    border-radius: 0.75rem;
}

/* Utilidades de color */
.text-primary { /* Asegurar que la clase Bootstrap text-primary use nuestro color */
    color: var(--primary-color) !important;
}

.text-secondary { /* Asegurar que la clase Bootstrap text-secondary use nuestro color */
    color: var(--secondary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.bg-primary { /* Asegurar que la clase Bootstrap bg-primary use nuestro color */
    background-color: var(--primary-color) !important;
}

.bg-secondary { /* Asegurar que la clase Bootstrap bg-secondary use nuestro color */
    background-color: var(--secondary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}


/* Adjustments for navbar-search when autocomplete is active */
.navbar-search {
    /* Ensure the navbar-search form doesn't collapse too much */
    display: flex; /* Bootstrap's d-flex ensures this, but be explicit if needed */
    align-items: center; /* Align items vertically */
}

@media (max-width: 991.98px) {
    .navbar-search {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .navbar-search {
        width: 400px;
    }
}

/* Elementos activos en listas (ej: filtros, selecciones) */
.list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
}

.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--primary-darker); /* Tono más oscuro del primario */
    border-color: var(--primary-darker);
    color: var(--white-color);
}

/* Variantes estándar de Bootstrap adaptadas a la paleta */
.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--white-color);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #3e8e41; /* Oscurecer ligeramente */
    border-color: #3e8e41;
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--white-color);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #a62828;
    border-color: #a62828;
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--text-color); /* Texto oscuro para el warning */
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e0a800;
    border-color: #e0a800;
    color: var(--text-color);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--white-color);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #117a8b;
    border-color: #117a8b;
}

/* Override de .btn-light y .btn-dark para consistencia */
.btn-light {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color); /* Border con el mismo color */
    color: var(--text-color);
}

.btn-light:hover,
.btn-light:focus {
    background-color: #D8E0EB;
    border-color: #D8E0EB;
    color: var(--text-color);
}

.btn-dark {
    background-color: var(--text-color); /* Usar el color del texto oscuro */
    border-color: var(--text-color);
    color: var(--white-color);
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: var(--white-color);
}


/* Paginación */
.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-bg: var(--white-color);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-hover-color: var(--white-color);
    --bs-pagination-hover-bg: var(--primary-color);
    --bs-pagination-hover-border-color: var(--primary-color);
    --bs-pagination-focus-shadow-rgb: 42, 53, 144; /* Usar el RGB del primary color */
    --bs-pagination-active-color: var(--white-color);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    --bs-pagination-disabled-color: #aaa;
    --bs-pagination-disabled-bg: var(--white-color);
    --bs-pagination-disabled-border-color: var(--border-color);
}

.pagination .page-link {
    border-radius: 0.35rem; /* Un poco de redondeo para los enlaces de paginación */
    margin: 0 0.2rem; /* Espacio entre los elementos de paginación */
}

.page-item.active .page-link {
    font-weight: 600;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); /* Sombra más suave */
    transform: none; /* Eliminar el scale si no es deseado, o ajustarlo */
}

/* Tamaños personalizados para encabezados */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color); /* Asegurar que los encabezados usen el color de texto */
    margin-bottom: 1rem; /* Margen inferior por defecto */
}

h1 {
    font-size: 2.25rem; /* Un poco más grande para H1 */
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 500;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
}

/* Estilos para carrito */
.cart-item-card {
    border: 1px solid var(--border-color); /* Borde para el item del carrito */
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cart-item-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.quantity-group .form-control {
    max-width: 70px; /* Un poco más de ancho para la cantidad */
    text-align: center;
}

/* -------------------------------------------------- */
/* Estilos para la vista del carrito                 */
/* -------------------------------------------------- */

#cartTable > div {
    display: flex;
    align-items: center;
    padding: 1rem 0; /* Más padding vertical */
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

#cartTable > div:hover {
    background-color: rgba(42, 53, 144, 0.05); /* Usar el primario con baja opacidad */
}

/* Miniatura */
#cartTable .bookthumb {
    width: 80px;
    height: 100px; /* Ajuste para mantener proporción y consistencia */
    flex-shrink: 0;
    margin-right: 1.5rem; /* Más margen */
    border-radius: 0.25rem;
    object-fit: cover;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

@media (max-width: 575.98px) {
    #cartTable .bookthumb {
        width: 60px;
        height: 80px;
    }
}

/* Detalles (título, autor, año, ISBN) */
#cartTable .flex-fill {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem; /* Ajuste de tamaño de fuente */
}

#cartTable .flex-fill p {
    margin-bottom: 0.2rem; /* Margen más ajustado */
}

#cartTable .flex-fill .item-title {
    font-weight: 600;
    color: var(--primary-color);
}


/* Precio unitario, cantidad y total de línea */
#cartTable .text-end {
    min-width: 120px; /* Un poco más de ancho para precios */
    margin-left: 1rem; /* Margen izquierdo para separar de los detalles */
    font-weight: 500;
}

#cartTable input[type="number"] {
    width: 70px; /* Ajustado */
    text-align: center;
    padding: 0.3rem;
}

/* Botón eliminar sutil */
#cartTable .remove-item-btn {
    color: var(--danger-color); /* Usar el color de peligro para eliminar */
    font-size: 1.2rem;
    padding: 0.25rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

#cartTable .remove-item-btn:hover {
    color: #8B2C2C; /* Oscurecer ligeramente el peligro */
    transform: scale(1.1); /* Pequeña escala en hover */
}

/* Añade un asterisco rojo tras los labels de campos obligatorios */
.field-required::after {
    content: " *";
    color: var(--danger-color); /* Usar la variable de peligro */
    margin-left: 0.25rem;
}

/* Ajustes responsivos para filas del carrito */
#cartTable .line-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

@media (min-width: 768px) {
    #cartTable .qty-col {
        margin-top: 0 !important;
        /* Puedes añadir aquí estilos específicos para la columna de cantidad en desktop */
    }

    #cartTable .line-total {
        justify-content: flex-end; /* Alinear a la derecha en desktop */
    }
}

.book-title {
    font-size: 1rem; /* O el tamaño que prefieras, por ejemplo, 16px */
    line-height: 1.2; /* Para ajustar el espaciado entre líneas si el título es largo */
}

/* Para pantallas más pequeñas, si lo deseas */
@media (max-width: 767.98px) {
    .book-title {
        font-size: 0.9rem;
    }
}

/* Pie de página */
footer {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 2rem 0; /* Más padding para el footer */
    margin-top: 3rem; /* Margen superior para separarlo del contenido */
}

footer a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--primary-darker);
    text-decoration: underline;
}

/* --------------------------------------- */
/* Carousel styles                          */
/* --------------------------------------- */
/* Carousel responsive images */
.carousel-desktop-img {
    width: 100%;
    height: auto;
    max-height: 500px; /* Altura máxima en desktop */
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    aspect-ratio: 1920 / 500; /* Mantiene proporción */
}

.carousel-mobile-img {
    width: 100%;
    height: auto;
    max-height: 360px; /* Altura máxima en mobile */
    object-fit: cover;
    aspect-ratio: 640 / 360; /* Mantiene proporción */
}

@media (max-width: 767.98px) {
    /* Remover padding en el carrusel para móvil */
    .carousel,
    .carousel-inner {
        padding: 0 !important;
        margin: 0 !important;
    }
    .carousel-item {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Ajustar la imagen móvil al 100% del ancho */
    .carousel-mobile-img {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 auto !important;
        object-fit: cover;
    }
    /* Opcional: reducir el tamaño de los controles */
    .carousel-control-prev,
    .carousel-control-next {
        width: 5% !important;
    }
}

/* Autocomplete dropdown */
.autocomplete-wrapper {
    position: relative; /* THIS IS KEY! */
    flex-grow: 1; /* Allow it to take available space within d-flex form */
    margin-right: 0.5rem; /* Match the 'me-2' spacing from Bootstrap utility */
}

.autocomplete-list {
    position: absolute;
    top: 100%; /* Position right below the input */
    left: 0;
    width: 100%; /* Make it span the width of the wrapper */
    max-height: none;
    overflow-y: hidden;
    font-size: 0.9rem;
    z-index: 1000;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    background-color: var(--white-color); /* Ensure it has a solid background */
}

.autocomplete-list .list-group-item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.autocomplete-list .list-group-item:hover,
.autocomplete-list .list-group-item.active {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/*
 * Nuevos selectores útiles para sobrescribir Bootstrap
 * Estos te darán más control sobre el look and feel.
 */

/* Contenedores y espaciado */
.container-fluid-custom { /* Un contenedor fluido con padding horizontal fijo para desktop */
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (min-width: 1200px) {
    .container-fluid-custom {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* Sombras personalizadas */
.shadow-custom-light {
    box-shadow: 0 0.125rem 0.3rem rgba(0, 0, 0, 0.05) !important;
}

.shadow-custom-medium {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Etiquetas (badges) */
.badge-primary {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.badge-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
}

.badge-accent {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important; /* Texto oscuro para contraste */
}

/* Alertas */
.alert-primary {
    background-color: rgba(42, 53, 144, 0.1); /* RGB de --primary-color */
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.alert-secondary {
    background-color: rgba(234, 239, 246, 0.2); /* RGB de --secondary-color */
    color: var(--text-color);
    border-color: var(--secondary-color);
}

.alert-accent {
    background-color: rgba(196, 255, 199, 0.5); /* RGB de --accent-color */
    color: var(--text-color); /* Texto oscuro para contraste */
    border-color: var(--accent-color);
}

/* Modals */
.modal-content {
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    border: none;
}

.modal-header {
    border-bottom-color: var(--border-color);
    background-color: var(--secondary-color);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: var(--text-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Tablas */
.table {
    --bs-table-color: var(--text-color);
    --bs-table-bg: var(--background-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(234, 239, 246, 0.4); /* Filas pares con secondary light */
    --bs-table-hover-bg: rgba(42, 53, 144, 0.05); /* Filas hover con primario muy suave */
}

/* Indicadores de carga (spinners) */
.spinner-border,
.spinner-grow {
    color: var(--primary-color);
}

.spinner-border.text-accent,
.spinner-grow.text-accent {
    color: var(--accent-color) !important;
}

/* Breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-color);
    --bs-breadcrumb-active-color: var(--primary-darker);
}

.breadcrumb-item a {
    color: var(--primary-color);
}

.breadcrumb-item a:hover {
    color: var(--primary-darker);
}

/* Progress bars */
.progress {
    background-color: var(--secondary-color);
}

.progress-bar {
    background-color: var(--primary-color);
}

/* Tooltips y Popovers */
.tooltip-inner {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--primary-color);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--primary-color);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--primary-color);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--primary-color);
}

/* Barra de carga en la parte superior */
#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-color);
    z-index: 2000;
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

/*
 * Skeleton Loader para la Barra de Navegación
 * Mejora la experiencia de usuario en páginas cacheadas.
 */
@keyframes skeleton-pulse {
    0% { background-color: #e0e0e0; }
    50% { background-color: #f0f0f0; }
    100% { background-color: #e0e0e0; }
}

.nav-skeleton-item {
    height: 24px; /* Altura aproximada de un nav-link */
    border-radius: 0.25rem;
    background-color: #e0e0e0;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    margin-left: 1rem; /* Espaciado similar a los nav-items */
    width: 70px; /* Ancho base para los enlaces */
}

.nav-skeleton-button {
    width: 95px; /* Ancho para "Registrate" o "Salir" */
    height: 38px; /* Altura de un botón Bootstrap pequeño */
    margin-left: 0.5rem; /* Margen de un botón en la navbar */
}

/* Badge para el contador del carrito en la navbar */
.cart-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(10%, 10%);
    font-size: 0.6em;
    padding: 0.25em 0.5em;
}

/* Estilo para el botón de búsqueda con ícono en la navbar móvil */
.navbar .d-lg-none.navbar-search .btn {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
}

.navbar .d-lg-none.navbar-search .btn:hover {
    background-color: rgba(42, 53, 144, 0.1); /* Light primary on hover */
    transform: none;
    box-shadow: none;
}

/*
 * Skeleton Loader para la Barra de Navegación
 * Mejora la experiencia de usuario en páginas cacheadas.
 */
@keyframes skeleton-pulse {
    0% { background-color: #e0e0e0; }
    50% { background-color: #f0f0f0; }
    100% { background-color: #e0e0e0; }
}

.nav-skeleton-item {
    height: 24px; /* Altura aproximada de un nav-link */
    border-radius: 0.25rem;
    background-color: #e0e0e0;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    margin-left: 1rem; /* Espaciado similar a los nav-items */
    width: 70px; /* Ancho base para los enlaces */
}

.nav-skeleton-button {
    width: 95px; /* Ancho para "Registrate" o "Salir" */
    height: 38px; /* Altura de un botón Bootstrap pequeño */
    margin-left: 0.5rem; /* Margen de un botón en la navbar */
}
/* === Estilos para la Grilla de Libros === */
.book-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Clave para que la imagen no se salga */
}

.book-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(42, 53, 144, 0.15) !important;
}

.book-card .book-cover-wrapper {
    overflow: hidden; /* Contenedor para el efecto zoom */
    height: 280px; /* Altura fija para las portadas */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.book-card .card-img-top {
    transition: transform 0.4s ease;
    max-height: 100%;
    width: auto;
}

.book-card:hover .card-img-top {
    transform: scale(1.07);
}

.book-card .card-body {
    padding: 0.75rem;
}

.book-card .book-title {
    /* Limita el título a 2 líneas con puntos suspensivos */
    height: 3rem; /* Ajusta a 2x line-height */
    line-height: 1.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
}

.book-card .card-text.small {
    color: #6c757d;
    font-size: 0.8rem;
}

.book-card .btn-accent {
    font-weight: 600;
}

/* === Estilos para Títulos de Sección === */
.section-title {
    margin-bottom: 2rem;
    font-weight: 700;
    color: #343a40;
    position: relative;
    text-align: center;
}

.section-title span {
    background-color: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}


/* === Estilos para el Carrusel de Inicio === */
#heroCarousel .carousel-item {
    height: 45vh; /* Altura del carrusel */
    min-height: 300px;
    background-color: #777;
}

#heroCarousel .carousel-item img {
    height: 100%;
    object-fit: cover; /* La imagen cubre el área sin deformarse */
    object-position: center;
}

#heroCarousel .carousel-caption {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 2rem;
}

#heroCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #fff;
    opacity: 0.7;
}

#heroCarousel .carousel-indicators .active {
    opacity: 1;
}