/*ECOMMERCE WSP*/

/*Ajustar tamano chatbox*/
#chat1 {
    width: 350px !important;
    right: 10px !important
}

/*Color Chatbox*/
.bg-info {
    background-color: #009e33 !important;
}

.menu-categorias-moviles {
    background-color: #000 !important;
    padding: 30px !important;
    float: left;
}

.menu-principal {
    background-color: #424A52;
}

    .menu-principal label,
    .menu-principal a {
        color: #fff;
    }

    .menu-principal li {
        width: 25%;
        border-right: solid 1px #fff;
        font-size: 14px;
    }

        .menu-principal li:last-child {
            border-right: 0;
        }

        .menu-principal li select {
            width: 65%;
            display: initial;
        }

/* Submenús / páginas internas */
.menu-internas {
    margin: 2rem 0;
}

.productos {
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
}

    .productos a.agregar-carro,
    .productos-destacados a.agregar-carro,
    .productos button.agregar-carro,
    .productos-destacados button.agregar-carro {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px 0 0 5px;
        border: 0;
        background: var(--ma-red);
        position: absolute;
        z-index: 9;
        right: 0;
        top: 20px;
    }

    .productos a.agregar-favoritos,
    .productos-destacados a.agregar-favoritos {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px 0 0 5px;
        background: var(--ma-orange);
        position: absolute;
        z-index: 9;
        right: 0;
        top: 60px;
    }

    .productos h5.card-title {
        font-size: 18px;
        font-weight: 600;
        color: #000;
        min-height: 50px;
    }

    .productos p.card-text {
        font-size: 14px;
        font-weight: 300;
        color: #000;
        margin: 0;
    }

        .productos p.card-text span.precio {
            font-size: 18px;
            font-weight: 600;
            color: var(--ma-red);
        }

    .productos .btn-ver-producto {
        background-color: var(--ma-red);
        border-color: var(--ma-red);
        color: #fff;
    }

.productos-destacados {
    border-radius: 10px;
}

    .productos-destacados .card-body {
        background-color: #03AC13;
        color: #fff;
        padding: 20px;
        min-height: 400px;
        border-radius: 10px 0 0 10px;
    }

    .productos-destacados h5.card-title {
        font-size: 22px;
        font-weight: 600;
        min-height: 50px;
        margin-bottom: 10px;
    }

    .productos-destacados p.card-text {
        font-size: 16px;
        font-weight: 300;
    }

        .productos-destacados p.card-text span.precio {
            font-size: 28px;
            font-weight: 600;
        }

    .productos-destacados .btn-ver-producto {
        background-color: #fff;
        border-color: #fff;
        color: #03AC13;
    }

    .productos-destacados img {
        border-radius: 0 10px 10px 0;
    }

/* ===========================
   PRODUCTO – layout y estilos
   =========================== */

 .page-producto {
     max-width: 1200px;
     margin: 24px auto 40px;
     padding: 16px;
    
}


 .page-producto-main {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
     gap: 32px;
     align-items: flex-start;
    
}


 @media (max-width: 900px) {
     .page-producto-main

{
     grid-template-columns: minmax(0, 1fr);
     gap: 20px;
    
}


}


 .product-gallery {
     background: #fff;
     border-radius: 16px;
     padding: 16px;
     box-shadow: 0 10px 30px rgba(0,0,0,.06);
     display: flex;
     justify-content: center;
     align-items: center;
    
}


 .product-image-main {
     max-width: 100%;
     height: auto;
     transition: transform .25s ease, box-shadow .25s ease;
    
}


 .product-gallery:hover .product-image-main {
     transform: scale(1.02);
     box-shadow: 0 16px 35px rgba(0,0,0,.12);
    
}


 .product-info-panel {
     background: #fff;
     border-radius: 16px;
     padding: 20px 20px 24px;
     box-shadow: 0 10px 30px rgba(0,0,0,.06);
     display: flex;
     flex-direction: column;
     gap: 16px;
    
}


 .product-breadcrumb {
     font-size: 0.85rem;
     opacity: .7;
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
    
}


 .product-title {
     font-size: 1.4rem;
     font-weight: 700;
     line-height: 1.2;
    
}


 .product-price-stock {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
    
}


 .product-price {
     font-size: 1.6rem;
     font-weight: 800;
     color: #ED2E38; /* rojo Multiaceros */
    
}


 .badge-stock {
     font-size: .85rem;
     padding: 4px 10px;
     border-radius: 999px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 6px;
    
}


 .badge-stock--ok {
     background: rgba(25,195,125,.1);
     color: #19c37d;
    
}


 .badge-stock--low {
     background: rgba(255,153,0,.12);
     color: #ff9900;
    
}


 .badge-stock--no {
     background: rgba(237,46,56,.10);
     color: #ED2E38;
    
}


 .product-specs-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
    
}


 .spec-chip {
     font-size: 0.8rem;
     padding: 4px 8px;
     border-radius: 999px;
     border: 1px solid rgba(0,0,0,.06);
     background: #fafafa;
    
}

    
     .spec-chip strong {
         font-weight: 600;
        
    }


 .product-selects {
     display: grid;
     grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
     gap: 10px;
    
}

    
     .product-selects .form-control,
     .product-selects select {
         font-size: .9rem;
        
    }


 .product-cta-row {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 6px;
    
}

    
     .product-cta-row .btn {
         flex: 1 1 140px;
         font-weight: 600;
         transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
        
    }

        
         .product-cta-row .btn:hover {
             transform: translateY(-1px);
             box-shadow: 0 8px 22px rgba(0,0,0,.16);
            
        }

        
         .product-cta-row .btn:active {
             transform: translateY(0);
             box-shadow: none;
            
        }


 .product-error-msg {
     font-size: .85rem;
     color: #ED2E38;
     margin-top: 4px;
    
}


 /* Sticky bar mobile para CTA */
 @media (max-width: 768px) {
     .product-sticky-bar

{
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 50;
     background: #fff;
     box-shadow: 0 -4px 16px rgba(0,0,0,.18);
     padding: 8px 12px 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
    
}


 .product-sticky-bar-price {
     font-size: 1.1rem;
     font-weight: 700;
     color: #ED2E38;
    
}


 .product-sticky-bar .btn {
     flex: 1 1 auto;
    
}


}



/*************** Recomendados ****************/

.recomendados {
    background-color: #f3f3f3;
}

/*************** Productos ****************/

/*PRODUCTO - IMAGEN (ZOOM)*/
.image-container {
    overflow: hidden; /* Evita que la imagen se desborde */
    position: relative;
    border: 1px solid #ddd; /* Opcional, para ver los límites */
}

.zoomable-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin distorsión */
    transition: transform 0.3s ease-in-out, transform-origin 0.3s ease-in-out;
}

/* La imagen se ampliará al hacer hover */
.image-container:hover .zoomable-image {
    transform: scale(1.5); /* Ajusta el nivel de zoom */
}

.detalle-producto {
}

    .detalle-producto h2 {
        font-size: 24px;
        font-weight: 700;
        color: #000;
    }

    .detalle-producto .img-producto {
        border-radius: 10px;
        width: 100%;
        box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    }

    .detalle-producto .col-lg-6 {
        position: relative;
    }

    .detalle-producto a.agregar-favoritos {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px 0 0 5px;
        background: var(--ma-orange);
        position: absolute;
        z-index: 9;
        right: 12px;
        top: 60px;
    }

    .detalle-producto .precio-desde {
        font-size: 16px;
        font-weight: 700;
        color: #000;
        line-height: 26px;
    }

        .detalle-producto .precio-desde .precio {
            font-size: 26px;
            font-weight: 700;
            color: var(--ma-red);
        }

    .detalle-producto .add-cotizador {
        background-color: var(--ma-orange);
        color: #fff;
    }

    .detalle-producto .add-carrito {
        background-color: var(--ma-red);
        color: #fff;
    }

    .detalle-producto .add-cotizadorGris {
        background-color: #aaaaaa;
        color: #fff;
    }

    .detalle-producto .add-carritoGris {
        background-color: #aaaaaa;
        color: #fff;
    }

    .detalle-producto .tab-pane {
        padding: 20px;
    }

        .detalle-producto .tab-pane .resena {
            border-bottom: solid 1px #ccc;
        }

            .detalle-producto .tab-pane .resena h4 {
                font-size: 16px;
                font-weight: 600;
            }

        .detalle-producto .tab-pane .fa-solid {
            color: var(--ma-orange);
        }

/*RESPONSIVE MENU*/
.menu-categorias-moviles {
    background-color: #000 !important;
    padding: 30px !important;
    float: left;
}

/*Estilos Barra de carga*/
.contenedor-barra {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-bottom: 50px;
}

.progress-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    max-width: 800px;
    position: relative;
}

.step {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #d3d3d3;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.label {
    height: 10px;
    margin-top: 10px;
    color: #d3d3d3;
    transition: color 0.3s ease;
}

.step.active .circle {
    background-color: #ff4d4d;
    height: 50px;
    width: 50px;
}

.step.active .label {
    color: #ff4d4d;
}

/*CUSTOM CSS*/

/*Filtrar*/
.mtc-filtro {
    opacity: 0;
}

/* Menu Items nuevo */
.menu-body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 35px;
}

.menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.menu-item {
    background-color: white;
    padding: 11px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .menu-item::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #FF0000;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s ease;
        z-index: 1;
    }

    .menu-item:hover::before {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    .menu-item:active {
        transform: scale(0.98); /* Efecto sutil al presionar el botón */
    }

    .menu-item img {
        filter: invert(1);
        width: 75px;
        height: 75px;
        margin-bottom: 10px;
        transition: transform 0.3s ease, filter 0.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
    }

    .menu-item:hover img {
        transform: scale(1) translateY(-5px);
        filter: invert(0);
    }

    .menu-item p {
        font-weight: 600;
        margin: 0;
        font-size: 16px;
        transition: font-size 0.3s ease;
    }

    .menu-item a {
        text-decoration: none;
        color: inherit;
    }

.menu-principal .nav-link:hover {
    color: var(--ma-rojo);
}
/* Evitar que las categorías cambien a rojo el texto sobre pill rojo */
.categorias .navbar-nav .nav-link:hover {
    color: #fff;
}

#chat1 .card-header.bg-info {
    background: linear-gradient(90deg, var(--ma-rojo), var(--ma-naranjo)) !important;
}

/*Nueva Busqueda*/

/* Grid de productos */
.productos.card {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease;
    background: #fff;
}

    .productos.card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }

.productos .card-img-top {
    max-height: 200px;
    /* object-fit: contain; */
    /* background: #fafafa; */
    /* padding: 12px; */
}

.productos .card-body {
    padding: 1rem;
}

.productos .card-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    min-height: 48px; /* altura consistente */
}

/*Nuevo WSP*/
/* --- WhatsApp FAB --- */
.wa-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 100
}

.wa-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .15s ease,box-shadow .15s ease
}

    .wa-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 28px rgba(0,0,0,.22)
    }

.wa-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-image: url('https://www.multiaceros.cl/tienda/img/MultiacerosChat.png');
    background-size: cover;
    background-position: center;
    border-radius: 4px
}

.wa-badge {
    background: rgba(0,0,0,.2);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem
}

/* Estados */
.wa-exists .wa-btn {
    background: #16a34a
}

/* verde si existe en NS */
.wa-unknown .wa-btn {
    background: #25D366
}

/* estado por defecto */
.wa-missing .wa-btn {
    background: #f59e0b
}

/* ámbar si no existe */

/* Panel */
.wa-panel {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 100;
    display: none
}

    .wa-panel[aria-hidden="false"] {
        display: block
    }

.wa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #eee
}

.wa-card-title {
    font-weight: 600
}

.wa-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer
}

.wa-card-body {
    padding: 14px
}

.wa-input:focus {
    border-color: #25D366
}

.wa-result {
    margin-top: 10px;
    font-size: .85rem;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc
}

.wa-card-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px;
    border-top: 1px solid #eee
}

.wa-primary {
    background: #25D366;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

    .wa-primary:disabled {
        opacity: .55;
        cursor: not-allowed
    }

.wa-secondary {
    background: #f3f4f6;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

/*Estilos Botón WSP*/
.wa-fab {
    position: fixed;
    right: 16px;
    bottom: 10px;
    z-index: 100;
}

    .wa-fab .wa-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 999px;
        padding: 12px 14px;
        background: #00d95f;
        color: #fff;
        box-shadow: 0 10px 28px rgba(0,0,0,.22);
        cursor: pointer;
        font-weight: 600;
    }

        .wa-fab .wa-btn .wa-ico {
            width: 22px;
            height: 22px;
            display: inline-block;
            border-radius: 4px;
            background: #fff url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu4UB2TSAl9zJzW2M2AjvkuUf9Rbo5t8LjNA&s') center/cover no-repeat;
        }

.wa-panel {
    position: fixed;
    right: 16px;
    bottom: 84px;
    z-index: 100;
    display: none;
}

.wa-card {
    width: 340px;
    max-width: 94vw;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
    overflow: hidden;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans;
}

    .wa-card .wa-hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid #eee;
        font-weight: 700
    }

    .wa-card .wa-bd {
        padding: 14px
    }

    .wa-card .wa-ft {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding: 12px;
        border-top: 1px solid #eee
    }

.wa-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dadde1;
    border-radius: 10px;
    outline: none;
}

.wa-label {
    display: block;
    font-size: .85rem;
    margin: 10px 0 6px
}

.wa-help {
    display: block;
    font-size: .75rem;
    color: #666;
    margin-top: 4px
}

.wa-status {
    display: none;
    margin-top: 10px;
    font-size: .85rem;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc
}

    .wa-status.ok {
        display: block;
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0
    }

    .wa-status.err {
        display: block;
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca
    }

.wa-chip {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    color: #fff
}

.wa-btn-ghost {
    background: #f3f4f6;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

.wa-btn-primary {
    background: #25D366;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    opacity: .95
}

    .wa-btn-primary[disabled] {
        opacity: .45;
        cursor: not-allowed
    }

.wa-btn-danger {
    background: #d93025;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer
}

    .wa-btn-danger:disabled {
        opacity: .6;
        cursor: not-allowed
    }

.wa-new .wa-row {
    margin-bottom: 8px
}

.ma-actions .btn {
    margin-right: .25rem;
    margin-bottom: .25rem;
}

/* CONTENEDOR GENERAL */
.app-shell {
    min-height: 100vh;
    background: #f8f8f8; /* mismo tono claro que ya usas */
    display: flex;
    flex-direction: column;
}

/* MAIN con espacio para bottom nav */
.app-main {
    flex: 1 1 auto;
    padding-bottom: 70px; /* alto de la bottom nav */
}

.abn-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    color: #5a5a5a;
}

.abn-item-center {
    transform: translateY(-10px);
}

.abn-icon {
    display: block;
    font-size: 18px; /* aquí se ven tus íconos de Font Awesome / emojis */
}

.abn-label {
    display: block;
    margin-top: 2px;
}

/* estado activo */
.abn-item.active {
    color: #ff9900; /* activo en naranja Multiaceros */
}

.ma-bump {
    animation: ma-bump 0.35s ease-out;
}

/* Glow sutil en el badge */
.ma-badge-glow {
    box-shadow: 0 0 0 0 rgba(255,153,0,.7);
    animation: ma-badge-pulse 0.6s ease-out;
}

@keyframes ma-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,153,0,.7);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(255,153,0,0);
    }
}

/* ============================================
   HOME / INDEX - Hero, botón buscar y cards
   ============================================ */

/* Card contenedora del hero, categorías, recomendados, etc. */
.card-home {
    border-radius: 14px;
    border: 1px solid #e4e7ec;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .03);
    overflow: hidden;
    background: #ffffff;
}

/* Botón principal de búsqueda (home) */
.btn-buscar {
    background: linear-gradient(135deg, var(--ma-red), var(--ma-orange));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    box-shadow: 0 10px 20px rgba(237, 46, 56, .30);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.btn-buscar:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(237, 46, 56, .40);
    filter: brightness(1.05);
    color: #fff;
}

/* Badges "pill" del hero a la derecha */
.card-home .badge.bg-light.border {
    border-radius: 999px;
    border-color: rgba(0, 0, 0, .06) !important;
    background: #fffdf6 !important;
    font-weight: 500;
}

/* ============================================
   HOME / INDEX - Cards de recomendados
   ============================================ */

.card-prod {
    border-radius: 12px;
    border: 1px solid #e4e7ec;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .03);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
    background: #ffffff;
}

.card-prod:hover {
    transform: translateY(-4px);
    border-color: var(--ma-orange);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .12);
}

.card-prod .prod-img {
    max-height: 120px;
    object-fit: contain;
    transition: transform .20s ease;
}

.card-prod:hover .prod-img {
    transform: scale(1.04);
}

.card-prod .prod-title {
    font-size: 0.85rem;
}

.card-prod span.text-danger {
    color: var(--ma-red) !important;
}

/* ============================================
   HOME / INDEX - Cards de categorías (MultiCarousel)
   ============================================ */

.card-cat {
    border-radius: 12px;
    border: 1px solid #e4e7ec;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .03);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.card-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    border-color: var(--ma-red);
}

.card-cat .card-title {
    font-size: .95rem;
    font-weight: 600;
}

.card-cat .card-text {
    font-size: .80rem;
    color: #555;
}

/* =========================================
   LOGIN – Layout general
   ========================================= */
.login-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* Fondo sutil para el bloque de login */
.categorias.login-wrapper {
    background: radial-gradient(circle at top, rgba(237,46,56,0.08), transparent 55%), linear-gradient(180deg,#ffffff,#f7f9fb);
    border-radius: 1.5rem;
}

/* Título */
.login-title {
    letter-spacing: .03em;
    font-weight: 700;
}

/* Cards de login / registro */
.login-card,
.card-login {
    background: #ffffff;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(15,23,42,.12);
    padding: 1.75rem 1.5rem;
    transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
    position: relative;
    overflow: hidden;
}

    .login-card::before,
    .card-login::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(237,46,56,0.08), transparent 60%);
        opacity: 0;
        transition: opacity .2s ease-out;
        pointer-events: none;
    }

    .login-card:hover,
    .card-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 45px rgba(15,23,42,.16);
    }

        .login-card:hover::before,
        .card-login:hover::before {
            opacity: 1;
        }

    /* Tipografías y textos */
    .login-card h4 {
        font-weight: 600;
        margin-bottom: .5rem;
    }

.login-muted {
    font-size: .9rem;
    color: #6c757d;
}

.login-label {
    font-weight: 500;
    font-size: .9rem;
}

.login-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

    .login-section-title::before {
        content: "";
        width: 4px;
        height: 18px;
        border-radius: 999px;
        background: linear-gradient(180deg,#ED2E38,#ff9900);
    }

/* =========================================
   LOGIN – Animaciones
   ========================================= */

/* Entradas suaves (ya las tenías) */
.fade-slide {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

    .fade-slide.show {
        opacity: 1;
        transform: translateY(0);
    }

/* Shake para errores en la card de login */
.card-login.error {
    animation: shake .3s linear;
}

@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* Spinner modal (puede ser global, pero lo dejamos aquí por claridad) */
.modalBackground {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    z-index: 1050;
}

/* =========================================
   LOGIN – Inputs & botones (marcas MA)
   ========================================= */
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .18rem rgba(237,50,55,.25); /* rojo MA suave */
    border-color: #ED2E38;
}

/* Animación general de botones */
.btn {
    transition: all .18s ease;
    transform: translateY(0);
}

/* Botón principal (Ingresar) */
.login-wrapper .btn-primary {
    background-image: linear-gradient(135deg,#ED2E38,#ff9900);
    border: none;
    font-weight: 600;
}

    .login-wrapper .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(237,46,56,.45);
    }

/* Botón éxito (Registrarme) */
.login-wrapper .btn-success {
    background-image: linear-gradient(135deg,#19c37d,#1c9f68);
    border: none;
    font-weight: 600;
}

    .login-wrapper .btn-success:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(25,195,125,.45);
    }

/* Botones de tabs facturación */
#btnNoFacturacion.nav-link,
#btnSiFacturacion.nav-link {
    border-radius: 999px 999px 0 0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    padding: .4rem .9rem;
    font-size: .88rem;
}

    #btnNoFacturacion.nav-link.active,
    #btnSiFacturacion.nav-link.active {
        border-color: #ED2E38;
        color: #ED2E38;
    }

/* =========================================
   LOGIN – Resposive
   ========================================= */

/* Mobile first */
@media (max-width: 767.98px) {
    .login-wrapper {
        padding: 1.5rem 1rem 3rem;
    }

    .titulo-principal.login-title {
        font-size: 1.6rem;
        margin: 1rem 0 0.5rem 0 !important;
        text-align: center;
    }

    .login-card,
    .card-login {
        margin-top: 1rem;
        padding: 1.4rem 1.1rem;
        box-shadow: 0 8px 22px rgba(15,23,42,.16);
    }

    .login-section-title {
        font-size: .98rem;
    }

    .login-wrapper .btn-lg {
        width: 100%;
        margin-top: .5rem;
    }

    .carrito-compras {
        margin-top: 1rem;
    }
}

/* Desktop grande */
@media (min-width: 1200px) {
    .login-wrapper {
        padding-inline: 3rem;
    }

    .login-card,
    .card-login {
        padding: 2rem 2rem;
    }
}


/* ============================================
   Ajustes responsive suaves para el home
   ============================================ */

@media (max-width: 768px) {
    #carousel-principal {
        border-radius: 0;
        box-shadow: none;
        max-height: 260px;
    }

    .card-home {
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }
}



/* ===========================
   Zona Usuario - Layout base
   =========================== */

.zona-usuario-wrapper {
    padding: 2rem 0 3rem;
}

.zona-usuario-layout {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .zona-usuario-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===========================
   Sidebar
   =========================== */

.zona-usuario-sidebar {
    background: var(--card, #ffffff);
    border-radius: 1rem;
    box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.08));
    padding: 1.25rem 1rem;
}

.zona-usuario-sidebar-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.zona-usuario-sidebar-user {
    font-size: .9rem;
    color: var(--muted, #6c757d);
    margin-bottom: 1rem;
}

.zona-usuario-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.btn-usuario {
    width: 100%;
    justify-content: flex-start;
    border-radius: 999px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-inline: 1rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}

    .btn-usuario:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
    }

.btn-usuario-active {
    background: var(--acc2, #ED2E38);
    border-color: var(--acc2, #ED2E38);
    color: #fff;
}

/* ===========================
   Main card + animación
   =========================== */

.zona-usuario-main-card {
    background: var(--card, #ffffff);
    border-radius: 1rem;
    box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.08));
    padding: 1.5rem 1.25rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}

.zona-usuario-loaded .zona-usuario-main-card {
    opacity: 1;
    transform: translateY(0);
}

.zona-usuario-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.zona-usuario-subtitle {
    font-size: .95rem;
    color: var(--muted, #6c757d);
}

/* ===========================
   Tabla / filas
   =========================== */

.zona-usuario-table-wrapper {
    margin-top: 1rem;
}

.zona-usuario-row {
    transition: background-color .12s ease, transform .08s ease;
}

    .zona-usuario-row:hover {
        background-color: rgba(237, 46, 56, 0.03);
        transform: translateY(-1px);
    }

/* Badges de estado */
.estado-badge {
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .75rem;
    font-weight: 600;
}

/* Puedes especializar por texto si quieres, ej:
.estado-badge::before { content:''; ... } */


/* ===========================
  WSP MOBILE
   =========================== */
/* Ajustes barra inferior - WhatsApp + Usuario */
.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #ffffff;
    border-top: 2px solid var(--ma-red);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.abn-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    color: #5a5a5a;
}

.abn-icon {
    display: block;
    font-size: 18px;
    line-height: 1;
}

.abn-label {
    display: block;
    margin-top: 2px;
}

/* Item activo (home/cotización/carrito/cuenta) */
.abn-item.active {
    color: var(--ma-orange);
}

/* WhatsApp en barra inferior */
.abn-item-wa .abn-icon {
    font-size: 20px;
}

    .abn-item-wa .abn-icon .fa-whatsapp {
        /* por si quieres dejarlo verde clásico */
        color: #25D366;
    }

/* Cuando usuario está logueado, que "Hola, X" no se vea apagado */
.abn-item.active .abn-label {
    font-weight: 600;
}

/* Solo mobile (ya está d-md-none en el markup, pero por si acaso) */
@media (min-width: 768px) {
    .app-bottom-nav {
        display: none;
    }
}
/* ===========================
   Mobile - Sucursales
   =========================== */
.sucursal-mobile-label {
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    color: #f8f9fa;
    border: 1px solid rgba(255, 255, 255, 0.12);
}