/* Identidad corporativa Jurado Express: teal + rojo + Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root {
    --bs-info: #149388 !important;
    --bs-info-rgb: 20, 147, 136 !important;
    --bs-primary: #149388 !important;
    --bs-primary-rgb: 20, 147, 136 !important;
}

body,
.card,
.btn,
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", "Roboto", Helvetica, Arial, sans-serif !important;
}

.bg-gradient-info,
.bg-info {
    background: linear-gradient(135deg, #149388 0%, #0d766c 100%) !important;
}

.text-info {
    color: #149388 !important;
}

.badge-info,
.badge.badge-info {
    background-color: #149388 !important;
}

.border-info {
    border-color: #149388 !important;
}

.btn-info,
.btn.bg-gradient-info,
.btn-primary,
.btn.bg-gradient-primary {
    background: linear-gradient(135deg, #149388 0%, #0d766c 100%) !important;
    border-color: #149388 !important;
}

.text-gradient.text-primary,
.text-gradient.text-info {
    background-image: linear-gradient(195deg, #1fb3a4, #0d766c) !important;
}

/* acento rojo estilo "EXPRESS" para llamadas a la acción puntuales */
.badge-danger,
.text-danger-accent {
    background-color: #e51d2a !important;
    color: #e51d2a;
}

/* menú lateral de categorías: resaltado teal en activo/hover (sustituye el rosa #e91e63 de fábrica) */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link:hover {
    background-color: rgba(20, 147, 136, 0.35) !important;
    background-image: none !important;
    border-radius: 0.5rem;
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active,
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
    background-image: linear-gradient(195deg, #149388 0%, #0d766c 100%) !important;
}

.navbar-vertical .navbar-nav .nav-link.active i,
.navbar-vertical .navbar-nav .nav-link:hover i {
    color: #5fd6c8 !important;
}

/* tarjetas de producto: precio en acento de marca */
.boxPrecioArticulo,
.articuloPrecio {
    color: #0d766c !important;
    font-weight: 800 !important;
}

/* ── lineal de supermercado: pared de fondo tipo aparador, a todo lo ancho/alto disponible ── */
#contenedor.container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#contenedor {
    background: linear-gradient(180deg, #eef6f5 0%, #d9ece9 100%);
    border-radius: 0;
    padding: 4px 16px 40px 16px;
    margin-top: -8px;
    min-height: calc(100vh - 140px) !important;
}

/* la tarjeta pierde el borde de caja: el producto "flota" sobre la balda */
.boxGlobal {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 0.2s ease;
}

.boxGlobal:hover {
    box-shadow: none !important;
    transform: translateY(-4px);
}

/* la foto es pequeña y se apoya en una balda blanca continua, como en un lineal real */
.boxFoto {
    position: relative;
    height: 130px !important;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 2px;
    width: calc(100% - 4px);
    padding-bottom: 14px;
    overflow: visible !important;
}

.boxFoto a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 600px) {
    .boxFoto {
        height: 100px !important;
    }
}

/* balda blanca continua: al ser la misma altura en toda la fila, las baldas
   de cada tarjeta se alinean y forman una única estantería horizontal */
.boxFoto::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 0;
    height: 8px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(13, 60, 55, 0.25);
}

.boxFoto::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(13, 60, 55, 0.3) 0%, transparent 75%);
    z-index: 0;
}

.boxFoto img {
    position: relative;
    z-index: 1;
    max-height: 100%;
    max-width: 85% !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 6px 5px rgba(13, 60, 55, 0.2));
}

/* precio como etiqueta colgando del borde de la balda */
.boxPrecioArticulo {
    display: inline-block;
    background: #fff;
    padding: 2px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(13, 60, 55, 0.18);
    font-size: 0.95rem !important;
    margin-top: 6px;
}

/* botón de añadir a cesta: círculo teal flotando sobre la esquina de la balda
   (solo dentro de las tarjetas del listado .boxGlobal; la ficha de producto
   reutiliza la misma clase .boxPropiedades para su propio botón "Añadir" normal) */
.boxGlobal .boxPropiedades {
    position: relative;
    min-height: 34px;
    overflow: visible !important;
    height: auto !important;
}

.boxGlobal .boxPropiedades > button.btn {
    position: absolute;
    right: 10px;
    bottom: 100%;
    margin-bottom: 8px;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #149388;
    box-shadow: 0 6px 14px rgba(20, 147, 136, 0.4);
    z-index: 2;
}

.boxGlobal .boxPropiedades > button.btn i {
    font-size: 20px;
    color: #fff !important;
}

.boxGlobal .boxPropiedades > button.btn:hover {
    background: #0d766c;
    transform: scale(1.06);
}

/* insignias de estado: chip flotante sobre la esquina superior de la balda */
.badge-stock {
    position: relative;
    z-index: 2;
}

.boxTitulo a {
    color: #253137 !important;
    font-weight: 600;
}

/* ── ficha de producto: misma estética de balda que el listado ── */
.articuloFoto img {
    background: linear-gradient(180deg, #ffffff 0%, #eaf3f2 100%);
    border-radius: 20px;
    padding: 16px;
    filter: drop-shadow(0 10px 10px rgba(20, 40, 38, 0.15));
}

/* complementos / también le puede interesar: se acaba el borde azul de fábrica */
.articuloMouseOverCapa {
    background: linear-gradient(180deg, #ffffff 0%, #eaf3f2 100%);
    border-radius: 14px;
    padding: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.articuloMouseOverCapa:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(20, 147, 136, 0.25);
}

.articuloMouseOver,
.articuloMouseOver:hover {
    border: none !important;
    max-width: 100%;
    max-height: 100%;
}

/* ── barra superior (breadcrumb): mismo teal que el resto de la web ── */
.navbar-main {
    background: linear-gradient(135deg, #149388 0%, #0d766c 100%) !important;
}

.navbar-main .breadcrumbtitulo,
.navbar-main .breadcrumbtitulo a,
.navbar-main .breadcrumbitem,
.navbar-main .breadcrumbitem a {
    color: #fff !important;
}

.navbar-main .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

.navbar-main .bsup {
    color: #fff !important;
}

.navbar-main .sidenav-toggler-line {
    background: #fff !important;
}

.navbar-main .badge-info {
    background-color: #fff !important;
    color: #0d766c !important;
}

/* ── pie de página: mismo teal que el resto de la web ── */
footer.footer {
    background: linear-gradient(135deg, #149388 0%, #0d766c 100%) !important;
    border-radius: 0 0 0.75rem 0.75rem;
}

footer.footer .copyright,
footer.footer .copyright a,
footer.footer .nav-footer .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer.footer .copyright a[href*="xgestevo"] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ── paginado: mismo teal que el resto de la web ── */
.pagination .page-link {
    color: #0d766c;
    border-radius: 8px;
    margin: 0 2px;
    border-color: #dbe9e7;
}

.pagination .page-item:not(.active) .page-link:hover {
    background-color: #eaf3f2;
    color: #0d766c;
}

.pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: #149388 !important;
    border-color: #149388 !important;
}

/* ── selector de cantidad: botones +/- en vez de flechas nativas del navegador ── */
button.qty-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: 1px solid #149388 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #149388 !important;
    background: #fff !important;
    padding: 0 !important;
    flex-shrink: 0;
    line-height: 1;
}

button.qty-btn i {
    font-size: 18px !important;
    color: inherit;
}

button.qty-btn:hover {
    background: #149388 !important;
    color: #fff !important;
}

.qty-input,
#addCantidad {
    -moz-appearance: textfield;
    text-align: center;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button,
#addCantidad::-webkit-outer-spin-button,
#addCantidad::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── animación "volar a la cesta" al añadir un producto ── */
@keyframes cartBump {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

.cart-bump {
    animation: cartBump 0.3s ease;
    color: #5fd6c8 !important;
}