@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300; 400;600;700&display=swap');

:root {
    --black: #000;
    --ma-bg: #f3f4f6;
    --ma-border: #e5e7eb;
    --ma-gray: #6b7280;
    --ma-gray-600: #666666;
    --ma-naranjo: var(--ma-orange);
    --ma-orange: #ff9900;
    --ma-oscuro: #212529;
    --ma-red: #ED2E38;
    --ma-red-dark: #C32027;
    --ma-rojo: #ed3237;
    --sb-accent: var(--ma-red);
    --sb-bg: #343a40;
    --sb-header-bg: #212529;
    --sb-text: #f8f9fa;
    --white: #fff;
    --sb-accent: var(--ma-red);
    --sb-bg: #212529; /* fondo sidebar */
    --sb-header-bg: #1b1f23;
    --sb-text: #f8f9fa;
}

/* Limitar ancho de la página */
.container-limit {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Personalizacion */
/*Ajustar contenedor al 100% de la pantalla*/
main > div.container {
    min-width: 100%;
}

/*Ajustar el carrusel al width*/
.carousel-item > img {
    width: 100% !important;
    height: 100% !important;
}

/* Mostrar inicio sesión en todas las plataformas */
.categorias {
    display: contents !important;
}

body {
    color: #5a5a5a;
    background-color: #E5E5E5;
    font-family: 'Open Sans', sans-serif;
}

header {
    background-color: #f3f3f3;
}

main {
    background-color: var(--ma-red);
    height: 200px;
    padding-top: 30px;
}

main-internas {
    background-color: var(--ma-red);
    height: 100px;
    padding-top: 30px;
}

main > div.container {
    background-color: #f3f3f3;
    padding: 0 !important;
    border-radius: 10px;
    margin-bottom: 50px;
    box-shadow: 0 8px 30px 10px rgba(0, 0, 0, .1);
}

h2.titulo-principal {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin: 10px;
}

    h2.titulo-principal span {
        font-weight: 700;
        color: var(--ma-red);
    }

.accordion {
    width: 70%;
    margin: auto;
}

.accordion-button {
    color: #000;
}

    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: var(--ma-red);
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
    }

        .accordion-button:not(.collapsed)::after {
            filter: invert(1);
        }

.linea-progreso li {
    width: 42% !important;
}

.btn-invitado {
    background-color: #fff;
    border-radius: 5px;
    color: #5a5a5a;
    font-size: 16px;
    margin-top: 10px;
    width: 100%;
}

/*.btn-invitado:hover {
background-color: var(--ma-red);
border:1px solid var(--ma-red);
border-radius: 5px;
color: #fff;
font-size: 16px;
margin-top:10px;
width: 100%;
}

*/

.btn-primary:hover {
    background-color: #fff;
    border-color: var(--ma-red);
    color: var(--ma-red);
}

.btn-success {
    background-color: #03AC13;
    border-color: #03AC13;
    color: #fff;
}

.img-fluid {
    max-width: 102%;
}

.nav-item {
    text-align: center;
}

.pestanas-datos {
    background-color: var(--ma-red);
    border: 1px solid var(--ma-red);
    border-radius: 5px !important;
    color: #fff !important;
    width: 48%;
    margin: auto;
    font-size: 16px;
}

.pestanas-datos-nv {
    background-color: #fff;
    border: 1px solid var(--ma-red);
    border-radius: 5px !important;
    color: var(--ma-red) !important;
    width: 48%;
    margin: auto;
    font-size: 16px;
}

.pestanas-factura:hover {
    background-color: #fff;
    border: 1px solid var(--ma-red);
    border-radius: 5px !important;
    color: var(--ma-red) !important;
    width: 25%;
    margin: auto;
    font-size: 16px;
}

.pestanas-perfil.active {
    color: #fff !important;
    background-color: var(--ma-red);
}

/* ===================== CARD GENERAL ===================== */

.login-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    max-width: 1100px;
    margin: 0 auto 40px;
}

    /* Título */
    .login-card h4 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
        color: #222;
    }

    /* Texto secundario */
    .login-card .login-muted {
        font-size: 0.9rem;
        color: #6c757d;
    }

    /* Subtítulos de sección (“Datos de envío”, “Datos de despacho”) */
    .login-card .login-section-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: .75rem;
        color: #333;
    }

    /* Label de campos */
    .login-card .login-label {
        font-size: .9rem;
        font-weight: 500;
        color: #444;
    }

    /* ===================== CAMPOS (INPUTS / SELECTS) ===================== */

    .login-card .form-control,
    .login-card .form-select,
    .login-card textarea {
        min-height: 44px;
        border-radius: 10px;
        font-size: .95rem;
        border-color: #d5d5d5;
        transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
    }

        .login-card .form-control:focus,
        .login-card .form-select:focus,
        .login-card textarea:focus {
            border-color: #ED2E38;
            box-shadow: 0 0 0 .15rem rgba(237,46,56,.18);
            outline: 0;
            transform: translateY(-1px);
        }

    /* Mensajes de error */
    .login-card .text-danger {
        font-size: .8rem;
        margin-top: .2rem;
    }

    /* ===================== TABS (Solo despacho / Despacho y facturación) ===================== */

    .login-card .nav-tabs {
        border-bottom: none;
        margin-top: 1rem;
        gap: .5rem;
    }

        .login-card .nav-tabs .nav-item {
            margin-bottom: 0;
        }

        .login-card .nav-tabs .nav-link {
            border-radius: 999px;
            border: 1px solid #ED2E38;
            padding: .45rem 1rem;
            font-size: .9rem;
            font-weight: 500;
            color: #ED2E38;
            background-color: #fff;
            transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
        }

            .login-card .nav-tabs .nav-link:hover {
                background-color: #fff5f6;
                box-shadow: 0 3px 8px rgba(0,0,0,.1);
                transform: translateY(-1px);
            }

            /* Tab activa */
            .login-card .nav-tabs .nav-link.active {
                background-color: #ED2E38;
                color: #fff;
                box-shadow: 0 4px 12px rgba(0,0,0,.18);
                border-color: #ED2E38;
            }

    /* ===================== BOTONES ===================== */

    /* Botones dentro de la tarjeta */
    .login-card .btn,
    .login-card button[type="button"] {
        font-size: .95rem;
        font-weight: 600;
        border-radius: 999px;
        padding: .65rem 1.4rem;
        transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease;
    }

    /* Botón principal “Registrarme” (btn-success btn-lg) */
    .login-card .btn-lg,
    .login-card .btn-success,
    .login-card #ContentPlaceHolder1_btnRegistrar {
        font-size: 1rem;
        padding: .8rem 1.8rem;
        border-radius: 999px;
    }

    /* Que el botón Registrarme no se vea minúsculo y tenga presencia */
    .login-card #ContentPlaceHolder1_btnRegistrar {
        min-width: 220px;
    }

    /* Hover de botones */
    .login-card .btn-success:hover,
    .login-card .btn-primary:hover,
    .login-card .btn-danger:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.2);
    }

    /* ===================== CHECKBOX TÉRMINOS ===================== */

    .login-card .form-check {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .login-card .form-check-input {
        margin-top: 0;
        margin-left: 0;
    }

    .login-card .form-check-label {
        font-size: .85rem;
    }

/* ===================== LOADER / MODAL BACKGROUND ===================== */

.modalBackground {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modalBackground .spinner-border {
        width: 3rem;
        height: 3rem;
    }

    .modalBackground h5 {
        margin-top: 1rem;
        font-size: 1rem;
    }


.bd-example {
    margin-top: 20px;
}

.nav-pills .nav-link {
    color: var(--ma-red) !important;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid var(--ma-red);
    border-radius: 5px !important;
    width: 100%;
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff !important;
        font-size: 16px;
        background-color: var(--ma-red);
        border: 1px solid var(--ma-red);
        border-radius: 5px !important;
        width: 100%;
    }

.categorias-menu {
    width: 100%;
    margin: auto;
}

.contenedor-cuerpo {
    padding: 0px 30px;
}

.selec-sucursal {
    border: 1px solid #ced4da;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    font-weight: 800;
}

.my-5 {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/**************** zona usuario *****************/
.usu-name {
    padding-left: 50px;
    color: #000;
}

.pestanas-perfil {
    border: none;
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    justify-content: left;
    display: flex;
}

    .pestanas-perfil:hover {
        background-color: #e5e5e5;
        color: #000 !important;
    }

    .pestanas-perfil:active {
        background-color: var(--ma-red);
        color: #fff;
    }

.form-control[readonly] {
    background-color: #f8f8f8;
    opacity: 1;
}

.form-select:disabled {
    background-color: #f8f8f8;
    opacity: 1;
}

/**************** Modal *****************/
.modal-header {
    border-bottom: 0px !important;
    padding: 10px !important;
}

.btn-close {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 5px !important;
    color: #000;
    background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.<293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e ) center/1em no-repeat;
    border: 1px solid #000;
    border-radius: 50%;
    opacity: 10;
    font-size: 10px;
}

.modal-body {
    padding: 2rem;
}

.modal-content {
    width: 90%;
    padding: 20px !important;
}

/*MODAL ENCUESTA*/
.modal-dialog-xl, .modal-dialog-centered {
    justify-content: center !important;
}

/**************** Menu *****************/
.categorias-menu:hover .categorias-menu:focus {
    border-bottom: 1px solid #009e33;
}

.nav-link:focus, .nav-link:hover {
    color: #009e33;
}

.nav-link {
    color: #424A52;
}

/**************** Variables de tema *****************/
/**************** Header compacto opcional *****************/
/* En lugar de sobreescribir .py-4 global, aplica .header-slim en tu header si quieres compactarlo */
.header-slim {
    padding-block: .25rem !important;
}

/**************** Navbar base *****************/
.navbar {
    width: 100%;
    margin: 0 auto;
}

/*Nuevo navBar*/
/**************** Menú Categorías *****************/
.categorias {
    width: 100%;
    margin-top: 0.5rem;
}

    /* Barra contenedora */
    .categorias .navbar {
        padding: 0;
        background: #f4f5f7;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
        border: 1px solid rgba(0, 0, 0, .05);
    }

/* Collapse centrado */
#menu-categorias.navbar-collapse {
    justify-content: center;
}

/* Lista del menú en barra */
.categorias .navbar-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    padding: 2px;
}

    /* Ítems del menú (sin pill) */
    .categorias .navbar-nav .nav-item {
        flex: 1 1 auto;
        min-height: 44px;
        display: flex;
        align-items: stretch;
        justify-content: center;
    }

    /* Enlaces de la barra */
    .categorias .navbar-nav .nav-link {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 0.75rem;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        border-radius: 999px;
        background: transparent;
        transition: color .18s ease, background-color .18s ease, transform .22s ease;
    }

/* Hover desktop */
@media (hover: hover) and (pointer: fine) {
    .categorias .navbar-nav .nav-item:hover .nav-link {
        background: rgba(237, 46, 56, .08);
        color: var(--ma-red);
        transform: translateY(-1px);
    }
}

/* Estado "activo" (clase is-active que luego podemos poner desde servidor) */
.categorias .navbar-nav .nav-link.is-active {
    background: rgba(237, 46, 56, .12);
    color: var(--ma-red);
}

/* Eliminar caret en dropdowns del menú categorías */
.categorias .navbar-nav .dropdown-toggle::after {
    display: none;
}

/* Foco accesible */
.categorias .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--ma-orange);
    outline-offset: 3px;
    border-radius: 999px;
}

/*Slider*/
/**************** Slider animado bajo las categorías *****************/
.categorias .navbar-nav::before {
    /* línea base muy suave */
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 2px;
    background: rgba(0, 0, 0, .04);
    border-radius: 999px;
}

/* Barra deslizante */
.categorias-slider {
    position: absolute;
    bottom: 1px;
    left: 8px;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--ma-red), var(--ma-orange));
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(0);
    transition: width .22s ease, transform .22s ease, opacity .18s ease;
}


/**************** Menú Categorías *****************/
/*.categorias {
    width: 100%;
}*/

/* Contenedor del collapse del menú */
/*#menu-categorias.navbar-collapse {
    justify-content: center;
}*/

/* Lista del menú */
/*.categorias .navbar-nav {
    align-items: stretch;
    gap: .25rem;
    width: 100%;
}*/

/* Ítems del menú */
/*.categorias .navbar-nav .nav-item {
    min-height: 52px;
    color: var(--ma-red);
    text-align: center;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;*/                /* todos reparten el ancho */
    /*border-radius: 9999px;*/         /* estilo pill */
    /*background-color: var(--ma-red);
    transition:
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}*/

/* Enlaces: ocupan todo el alto/ancho del item */
/*.categorias .navbar-nav .nav-link {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: .9rem;
    color: #fff;
    transition:
        transform .25s ease,
        color .2s ease,
        background-color .2s ease;
    padding-left: 0 !important;
    padding-right: 0 !important;
}*/

/* Hover SOLO dentro de .categorias (desktop) */
/*@media (hover: hover) and (pointer: fine) {
    .categorias .navbar-nav .nav-item:hover {
        background-color: var(--ma-red-dark);
        box-shadow: 0 4px 10px rgba(0,0,0,.18);
    }

    .categorias .navbar-nav .nav-item:hover .nav-link {
        transform: translateY(-1px);
    }
}*/

/* Eliminar caret en dropdowns del menú categorías */
/*.categorias .navbar-nav .dropdown-toggle::after {
    display: none;
}*/

/* Accesibilidad: foco visible */
/*.categorias .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--ma-orange);
    outline-offset: 3px;
    border-radius: 9999px;
}*/

/**************** Línea inferior del menú *****************/
.linea-menu {
    border-bottom: 10px solid var(--ma-red);
    margin-bottom: 30px;
}

/**************** Header (resto, pulido) *****************/

/* Logo responsivo */
.logo-principal {
    width: clamp(180px, 28vw, 420px);
    max-width: 100%;
    height: auto;
}

/* Si puedes, usa gap en el <ul class="nav"> */
.nav.mt-5 {
    gap: .5rem;
}

/* Buscador */
.buscador {
    margin-right: .5rem;
}

    .buscador .input-group-text {
        background-color: var(--ma-orange);
        border-color: var(--ma-orange);
        color: #fff;
    }

    .buscador .form-control:focus {
        border-color: var(--ma-orange);
        box-shadow: 0 0 0 .2rem rgba(255,153,0,.25);
    }

/* Mi Cotización como botón/link de marca */
.cotizador {
    margin-left: .5rem;
}

    .cotizador .nav-link,
    .cotizador .btn {
        background-color: var(--ma-orange);
        border: 1px solid var(--ma-orange);
        color: #fff;
        line-height: 1.2;
        padding: 10px 5px;
        border-radius: .375rem;
    }

        .cotizador .nav-link:hover,
        .cotizador .btn:hover {
            filter: brightness(.95);
            color: #fff;
        }

    .cotizador .badge {
        transform: translateY(-1px);
    }

/* Usuario / Carrito */
.usuario, .carrito {
    margin-left: .5rem;
}

    .usuario .nav-link, .carrito .nav-link {
        color: var(--ma-gray-600);
        font-size: clamp(18px, 2.2vw, 22px);
        padding: 3px 10px;
    }

        .usuario .nav-link:focus-visible,
        .carrito .nav-link:focus-visible,
        .cotizador .nav-link:focus-visible {
            outline: 2px solid var(--ma-orange);
            outline-offset: 2px;
        }

    /* Separador a la derecha del icono usuario (solo desktop) */
    .usuario .nav-link {
        border-right: 1px solid var(--ma-gray-600);
        padding-right: 20px;
        margin-right: 10px;
    }

    /* Legibilidad de badges */
    .carrito .badge, #lblCartCount {
        background-color: #ffc107; /* .bg-warning */
        color: #212529;
    }

/**************** Responsivo *****************/
@media (max-width: 992px) {
    .categorias .navbar-nav .nav-item {
        min-height: 48px;
    }

        /* Evitar “saltos” en hover en móvil */
        .categorias .navbar-nav .nav-item:hover .nav-link {
            transform: none;
        }
}

/**************** Footer *****************/

.footer {
    background-color: #DDDDDD;
    padding: 30px;
}

    .footer .col-lg-3 {
        border-right: solid 1px #B5B5B5;
    }

        .footer .col-lg-3:last-child {
            border-right: solid 0px #B5B5B5;
        }

    .footer h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .footer ul {
        margin: 0;
        padding: 0;
    }

        .footer ul li {
            list-style: none;
            margin-bottom: 5px;
        }

            .footer ul li a {
                font-size: 14px;
                color: #000;
                text-decoration: none;
            }

.link-producto a {
    color: #333;
}

/* Sidebar mobile */
.offcanvas.ma-sidebar {
    background: #15181c;
}

/* Header del sidebar */
.offcanvas-header.ma-sidebar-header {
    background: #1b1f23;
}

/* Item activo dentro del sidebar */
.ma-sidebar .sidebar-nav-item[aria-current="page"],
.ma-sidebar .sidebar-nav-item.is-active {
    background: rgba(237,46,56,.18);
    box-shadow: inset 0 0 0 1px rgba(237,46,56,.45);
}

/*----------Nuevo Sidebar-----------
.offcanvas-header {
background-color: #212529;
color: white;
border-radius: 0px 20px 20px 0px;
}

.offcanvas{
background:transparent;
border-right:none;
}

.navbar-nav {
text-align: left;
}

.sidebar-nav-item {
font-size: 16px;
padding: 8px;
width: 100%;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.sidebar-nav-item:hover {
background-color: var(--ma-red);
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-nav-item a{
color:white!important;
}

*/

/* ===== Offcanvas/Sidebar móvil que SIEMPRE muestra todos los items con scroll ===== */
/* Contenedor: altura real de viewport móvil y layout en columna */
.offcanvas.ma-sidebar {
    background: var(--sb-bg);
    color: var(--sb-text);
    width: 100vw;
    max-width: 420px; /* tope en pantallas grandes */
    min-height: 100dvh; /* alto real (navegadores modernos) */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    box-shadow: 2px 0 12px rgba(0,0,0,.25);
    overscroll-behavior: contain;
}

@supports not (height: 100dvh) {
    /* Fallback iOS viejos */
    .offcanvas.ma-sidebar {
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* Header fijo arriba mientras el cuerpo scrollea */
.offcanvas-header.ma-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sb-header-bg);
    color: var(--sb-text);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}

    /* Botón cerrar visible en fondo oscuro */
    .offcanvas-header.ma-sidebar-header .btn-close {
        filter: invert(1);
        width: 20px;
        height: 20px;
        opacity: .85;
    }

        .offcanvas-header.ma-sidebar-header .btn-close:focus-visible {
            outline: 2px solid var(--sb-accent);
            outline-offset: 2px;
        }

/* El cuerpo toma todo el espacio restante y hace scroll vertical */
.ma-sidebar .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 8px calc(16px + env(safe-area-inset-bottom));
}

/* Lista e items */
.ma-sidebar .ma-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 1rem;
    background: #212529;
    color: #fff;
    border-radius: .75rem;
}

.ma-sidebar .sidebar-nav-item {
    background: transparent;
    color: var(--sb-text);
    padding: 12px 14px;
    margin: 6px 0;
    border-radius: .6rem;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .ma-sidebar .sidebar-nav-item:hover {
        background: rgba(237,46,56,.15);
        transform: translateX(2px);
        box-shadow: 0 4px 10px rgba(0,0,0,.18);
    }

    .ma-sidebar .sidebar-nav-item a.nav-link {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: inherit !important;
        text-decoration: none;
        min-height: 44px; /* target táctil */
        padding: 0;
    }

    .ma-sidebar .sidebar-nav-item i {
        flex: 0 0 auto;
    }

    /* Activo */
    .ma-sidebar .sidebar-nav-item[aria-current="page"],
    .ma-sidebar .sidebar-nav-item.is-active {
        background: rgba(237,46,56,.22);
        box-shadow: inset 0 0 0 1px rgba(237,46,56,.35);
    }

/* Select (sucursales) en modo oscuro */
.ma-sidebar .form-select {
    background-color: #2b2f33;
    border-color: #444;
    color: #fff;
}

    .ma-sidebar .form-select:focus {
        border-color: var(--sb-accent);
        box-shadow: 0 0 0 .2rem rgba(237,46,56,.25);
    }

/* Evita saltos por aparición de scroll */
.ma-sidebar .offcanvas-body {
    scrollbar-gutter: stable;
}

/* Opcional: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .offcanvas.ma-sidebar,
    .ma-sidebar .sidebar-nav-item {
        transition: none;
    }
}

/*************** Breadcrumb ****************/

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: #333;
}

    .breadcrumb .breadcrumb-item::before,
    .breadcrumb .breadcrumb-item.active::before {
        color: var(--ma-red);
        font-weight: 700;
    }

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

.btn-outline-categorias {
    background-color: #fff;
    border-color: var(--ma-red);
    color: var(--ma-red);
    padding-left: 30px;
    padding-right: 30px;
}

    .btn-outline-categorias.active {
        background-color: var(--ma-red);
        border-color: var(--ma-red);
        color: #fff;
    }

.precio-desde-verificar {
    font-size: 20px;
}

.precio-verificar {
    color: var(--ma-red);
    font-size: 20px;
    font-weight: 700;
}

.precio-desde-verificar-total {
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

/*************** Carrito Compras ****************/

.carrito-compras h2 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

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

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

.carrito-compras .producto-item {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.carrito-compras .delete {
    color: var(--ma-red);
}

.resumen-compras {
}

    .resumen-compras h2 {
        font-size: 20px;
        font-weight: 700;
        color: #000;
        text-align: center;
    }

    .resumen-compras .list-group-item {
        border: 0;
        width: 50%;
    }

        .resumen-compras .list-group-item.subtotal,
        .resumen-compras .list-group-item.total {
            color: var(--ma-red);
            font-weight: 700;
        }

    .resumen-compras .pagar {
        background-color: var(--ma-red);
        color: #fff;
        margin-bottom: 10px;
    }

    .resumen-compras .pagargris {
        background-color: #aaaaaa;
        color: #fff;
        margin-bottom: 10px;
    }

    .resumen-compras .asesoria {
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
    }

        .resumen-compras .asesoria i {
            font-size: 40px;
        }

.list-group-item {
    padding: 0.5rem 0px;
}

.btn-outline-secondary {
    color: var(--ma-red);
    border-color: var(--ma-red);
}

    .btn-outline-secondary:hover {
        color: #fff;
        background-color: var(--ma-red);
        border-color: var(--ma-red);
    }

.btn-detalle {
    width: 100% !important;
    padding: 10px !important;
}

.carousel-item .active {
    height: auto !important;
}

/*************** Proceso de compra ****************/
.progess-text {
    width: 70%;
    margin: auto !important;
    margin-bottom: 20px !important;
}

#progressbar {
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
}

    #progressbar li {
        list-style-type: none;
        width: 25%;
        float: left;
        position: relative;
        text-align: center;
    }

        #progressbar li span {
            width: 40px;
            line-height: 40px;
            display: table-cell;
            font-size: 20px;
            color: #ddd;
            background: #999;
            border-radius: 50px;
            margin: 0 auto;
        }

        #progressbar li.active span {
            background: var(--ma-red);
            color: white;
        }

        #progressbar li:first-child span {
            float: left;
            background: var(--ma-red);
            color: white;
        }

        #progressbar li:before {
            width: 40px;
            line-height: 40px;
            display: block;
            font-size: 20px;
            color: #ddd;
            background: #999;
            border-radius: 50px;
            margin: 0 auto 5px auto;
        }

        /*progressbar connectors*/
        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: #999;
            position: absolute;
            left: 0px;
            top: 20px;
            z-index: 0; /*put it behind the numbers*/
        }

        /*progressbar connectors*/
        #progressbar li.active:after {
            content: '';
            width: 100%;
            height: 2px;
            background: var(--ma-red);
            position: absolute;
            left: 40px;
            top: 20px;
            z-index: 0; /*put it behind the numbers*/
        }

        #progressbar li:last-child:after {
            display: none;
        }

        #progressbar li:last-child {
            width: auto !important;
        }

.finalizar-compra h2 {
    font-size: 36px;
    font-weight: 600;
    color: #000;
}

.finalizar-compra h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.finalizar-compra i {
    font-size: 80px;
    font-weight: 600;
    color: var(--ma-red);
}

.finalizar-compra a {
    font-weight: 600;
    color: var(--ma-red);
}

/*************** ICONOS ZONA USUARIO ****************/
.icon-usuario-txt {
    display: flex;
}

.icon-usuario {
    display: flex;
    width: 100%;
    margin: auto;
}

/*************** Responsive ****************/

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .categorias .navbar-nav .nav-item {
        font-size: 12px;
    }
}

/* Tablets */
@media only screen and (min-width: 481px) and (max-width: 900px) {
    .menu-principal {
        display: none;
    }

    header form.buscador {
        margin: 20px 0 0 0 !important;
    }

    header ul.nav {
        margin: 10px 0 0 0 !important;
    }

    .productos-destacados .card-body {
        padding: 19px;
        min-height: 270px;
    }

    .carousel-item {
        height: auto;
    }

    .productos-destacados h5.card-title {
        font-size: 20px;
        min-height: auto;
    }

    .productos-destacados p.card-text.descripcion {
        height: 70px;
        overflow: hidden;
    }

    .linea-menu {
        border-bottom: 1px solid var(--ma-red);
    }

    .menu-internas {
        margin: -2.23% 0;
    }

    .categorias .navbar-nav .nav-item {
        color: var(--ma-red);
        text-align: center;
        width: 100%;
        font-size: 11px;
    }
}

/*MULTITEM*/
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ma-red) !important;
    border-color: var(--ma-red) !important;
}

.sBtn {
    text-align: center;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: inline-block;
    border-radius: 5px;
    color: #fff;
    margin-right: 20px;
}

    .sBtn.bg-ig {
        background: linear-gradient(50.36deg,#fcb045 3.88%,#fd1d1d 50%,#833ab4 96.12%);
    }

    .sBtn.bg-li {
        background: #0073b1;
    }

    .sBtn.bg-fb {
        background: #385898;
    }

.social-btns a i {
    color: #fff;
    font-size: 20px !important;
    line-height: 1.7;
}

#lblCotCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -0px;
}

#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px;
}

/*Nuevos cambios navbar*/
/* Animación solo para mobile / tablet */
@media (max-width: 991.98px) {
    #menu-categorias.collapse {
        /* NO tocamos display */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform-origin: top center;
        transform: scaleY(.96);
        transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
    }

        #menu-categorias.collapse.show {
            max-height: 260px; /* ajusta según el contenido real */
            opacity: 1;
            transform: scaleY(1);
        }
}



/* Moviles */
@media only screen and (max-width: 480px) {

    .menu-principal {
        display: none;
    }

    #menu-categorias-moviles ul.navbar-nav {
        padding: 10px;
    }

        #menu-categorias-moviles ul.navbar-nav li {
            /* border-bottom: solid 1px #ccc; */
        }

            #menu-categorias-moviles ul.navbar-nav li a {
                color: #fff;
                padding-right: .5rem !important;
                padding-left: .5rem !important;
            }
}

/* Desktop */
@media only screen and (min-width: 901px) and (max-width: 1400px) {
    #menu-moviles {
        display: none;
    }
}

/* Large Desktop */
@media only screen and (min-width: 1401px) {
    #menu-moviles {
        display: none;
    }

    .nav-item {
        font-size: 1rem;
    }

    .categorias .navbar-nav .nav-item {
        color: var(--ma-red);
        font-size: 14px;
    }
}

/******************************************
 * TABLAS RESPONSIVAS (MÓVIL)
 * Aplica a <table class="table ma-table">
 ******************************************/
@media (max-width: 768px) {

    .ma-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;          /* separa las "tarjetas" */
    }

    .ma-table thead {
        display: none;                   /* ocultamos encabezados en móvil */
    }

    .ma-table tbody tr {
        display: block;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            background-color 0.18s ease;
    }

    .ma-table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
    }

    .ma-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 12px;
        font-size: 0.9rem;
        border: none !important;
        text-align: right;               /* valor a la derecha */
    }

    .ma-table tbody td::before {
        content: attr(data-th);          /* nombre de columna */
        font-weight: 600;
        color: #555;
        margin-right: 10px;
        text-align: left;
        flex: 0 0 45%;
    }

    /* Primera celda = título de la "tarjeta" */
    .ma-table tbody td:first-child {
        background: var(--ma-red, #000);
        color: #fff !important;
        font-weight: 600;
        font-size: 1rem;
    }

    .ma-table tbody td:first-child::before {
        color: rgba(255, 255, 255, 0.85);
    }
}

/******************************************
 * TABLAS (ESCRITORIO / GENERAL)
 ******************************************/

.ma-table > tbody {
    border-style: none !important;
    border-color: transparent;
}

.ma-table tbody tr:hover {
    background-color: #8484841a;
    transition: background-color 0.15s ease;
}

/* Centrar algunas columnas (zona usuario) */
.ma-table td:nth-child(5),
.ma-table td:nth-child(6),
.ma-table td:nth-child(8) {
    text-align: center;
}

/******************************************
 * COLUMNA "DETALLE" CON ICONO 👁
 * Agrega class="detalle-col" al <td> de detalle
 ******************************************/

.ma-table td.detalle-col > a {
    color: #000;
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
}

.ma-table td.detalle-col > a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Reemplazo visual por 👁 en hover */
.ma-table td.detalle-col:hover > a {
    color: transparent !important;       /* ocultamos texto original */
}

.ma-table td.detalle-col:hover > a::after {
    content: "👁";
    font-size: 1.6rem;
    color: #000;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-table td.detalle-col:active > a::after {
    color: var(--ma-red, #c00);
}

/******************************************
 * DATATABLES (SELECT, BUSCADOR, PAGINACIÓN)
 ******************************************/

#DatosTabla_length select,
#DatosTabla_filter input {
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin: 10px 10px;
    padding: 4px 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#DatosTabla_length select:focus,
#DatosTabla_filter input:focus {
    border-color: var(--ma-red, #ed2e38);
    box-shadow: 0 0 0 0.15rem rgba(237, 46, 56, 0.2);
}

.dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    gap: 4px;
    flex-wrap: wrap;
}

.dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    border: 1px solid #ddd !important;
    font-size: 0.85rem;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.dataTables_paginate .paginate_button:hover {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
}

.dataTables_paginate .paginate_button.current {
    background-color: var(--ma-red, #ff0000) !important;
    color: #fff !important;
    font-weight: 600;
    border-color: var(--ma-red, #ff0000) !important;
}

.dataTables_paginate .paginate_button.disabled {
    background-color: #f0f0f0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    border-color: #e0e0e0 !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 10px 8px !important;
}

th.sorting {
    text-align: center !important;
}

/******************************************
 * BOTONES / LÍNEA / LABELS
 ******************************************/

.btn-danger:focus {
    box-shadow: 0 0 0 0.18rem rgba(225, 83, 97, 0.3) !important;
}

/* Línea de pasos / progreso */
.line {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #d3d3d3;
    z-index: 0;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.line.active {
    background-color: var(--ma-red, #ff4d4d);
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.6);
}

/* Resumen de compra / Responsivo */
@media (max-width: 425px) {
    .label {
        font-size: 14px;
    }
}

/* Enlaces generales sin subrayado (lo puedes acotar si quieres) */
a {
    text-decoration: none !important;
}


/*Chatbot*/

/*Estilos Chatbot*/
.portlet {
    margin-bottom: 15px;
}

.btn-white {
    border-color: #cccccc;
    color: #333333;
    background-color: #fff;
}

.portlet {
    border: 1px solid;
}

    .portlet .portlet-heading {
        padding: 0 15px;
    }

        .portlet .portlet-heading h4 {
            padding: 1px 0;
            font-size: 16px;
        }

        .portlet .portlet-heading a {
            color: #fff;
        }

            .portlet .portlet-heading a:hover,
            .portlet .portlet-heading a:active,
            .portlet .portlet-heading a:focus {
                outline: none;
            }

    .portlet .portlet-widgets .dropdown-menu a {
        color: #333;
    }

    .portlet .portlet-widgets ul.dropdown-menu {
        min-width: 0;
    }

    .portlet .portlet-heading .portlet-title {
        float: left;
    }

        .portlet .portlet-heading .portlet-title h4 {
            margin: 10px 0;
        }

    .portlet .portlet-heading .portlet-widgets {
        float: right;
        margin: 8px 0;
    }

        .portlet .portlet-heading .portlet-widgets .tabbed-portlets {
            display: inline;
        }

        .portlet .portlet-heading .portlet-widgets .divider {
            margin: 0 5px;
        }

    .portlet .portlet-body {
        padding: 15px;
        background: #fff;
    }

    .portlet .portlet-footer {
        padding: 10px 15px;
        background: #e0e7e8;
    }

        .portlet .portlet-footer ul {
            margin: 0;
        }

.portlet-green,
.portlet-green > .portlet-heading {
    border-color: #16a085;
}

    .portlet-green > .portlet-heading {
        color: #fff;
        background-color: #16a085;
    }

.portlet-orange,
.portlet-orange > .portlet-heading {
    border-color: #f39c12;
}

    .portlet-orange > .portlet-heading {
        color: #fff;
        background-color: #f39c12;
    }

.portlet-blue,
.portlet-blue > .portlet-heading {
    border-color: #2980b9;
}

    .portlet-blue > .portlet-heading {
        color: #fff;
        background-color: #2980b9;
    }

.portlet-red,
.portlet-red > .portlet-heading {
    border-color: #e74c3c;
}

    .portlet-red > .portlet-heading {
        color: #fff;
        background-color: #e74c3c;
    }

.portlet-purple,
.portlet-purple > .portlet-heading {
    border-color: #8e44ad;
}

    .portlet-purple > .portlet-heading {
        color: #fff;
        background-color: #8e44ad;
    }

.portlet-default,
.portlet-dark-blue,
.portlet-default > .portlet-heading,
.portlet-dark-blue > .portlet-heading {
    border-color: #34495e;
}

    .portlet-default > .portlet-heading,
    .portlet-dark-blue > .portlet-heading {
        color: #fff;
        background-color: #34495e;
    }

.portlet-basic,
.portlet-basic > .portlet-heading {
    border-color: #333;
}

    .portlet-basic > .portlet-heading {
        border-bottom: 1px solid #333;
        color: #333;
        background-color: #fff;
    }

.img-chat {
    width: 40px;
    height: 40px;
}

.text-green {
    color: #16a085;
}

.text-orange {
    color: #f39c12;
}

.text-red {
    color: #e74c3c;
}

#webchat {
    height: 350px;
    width: 350px;
}

#MarianaBot {
    z-index: 1;
    position: fixed !important;
    bottom: 40px !important;
    right: 30px !important;
}

#InicioBot {
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    width: 120px !important;
    z-index: 10000 !important;
}

/*Estilos intro js*/
.introjs-tooltip {
    min-width: 300px !important;
}

/*Nuevo Header*/
/* Botones de marca */
.btn-primary {
    background: var(--ma-rojo);
    border-color: var(--ma-rojo);
}

    .btn-primary:hover, .btn-primary:focus {
        filter: brightness(.9);
    }

.btn-outline-categorias {
    color: var(--ma-rojo);
    border: 1px solid var(--ma-rojo);
    background: #fff;
}

    .btn-outline-categorias:hover {
        background: var(--ma-rojo);
        color: #fff;
    }

/* Badges estilo carrito/cotización */
.badge-warning,
.badge.bg-warning {
    background: linear-gradient(180deg, var(--ma-naranjo), #ff7f00);
    color: #111;
}

/* Offcanvas móvil */
.offcanvas.text-bg-dark {
    background: var(--ma-oscuro);
}

.offcanvas .nav-link.link-light:hover {
    color: #fff;
    opacity: .9;
}

/* Categorías */
.categorias .nav-link {
    font-weight: 600;
}

    .categorias .nav-link:hover {
        color: var(--ma-rojo);
    }

/* Footer */
.footer h3 {
    font-size: 1.1rem;
    margin-bottom: .75rem;
}

.footer a:hover {
    color: var(--ma-rojo);
}

/* Chat flotante */
#InicioBot img {
    transition: transform .2s ease;
}

    #InicioBot img:hover {
        transform: scale(1.05);
    }

/* Inputs */
.form-select:focus,
.form-control:focus {
    border-color: var(--ma-rojo);
    box-shadow: 0 0 0 .2rem rgba(237,50,55,.15);
}

.btn-ver-producto {
    background-color: var(--ma-red);
    border-color: var(--ma-red);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

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

/* Colores corporativos */
/* Panel lateral (filtros) */
.filters-card {
    border: 1px solid var(--ma-border);
    border-radius: .75rem;
    background: #fff;
    padding: 1rem;
}

    .filters-card h5 {
        font-weight: 700;
        color: var(--ma-red);
        margin: 0 0 .5rem;
    }

.filter-block {
    margin-bottom: 1rem;
}

.filter-label {
    font-weight: 700;
    color: var(--ma-red);
    margin-bottom: .25rem;
    display: block;
}

.filter-ddl {
    width: 100%;
    background-color: #f3f3f3;
    padding: .375rem .5rem;
    border: 1px solid var(--ma-border);
    border-radius: .5rem;
}

.filter-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .5rem
}

.btn-clear {
    border: 1px solid var(--ma-red);
    color: var(--ma-red);
    border-radius: .5rem;
    padding: .375rem .75rem;
    font-weight: 700;
    background: #fff;
}

    .btn-clear:hover {
        background: var(--ma-red);
        color: #fff;
    }

/* Chips (filtros activos) */
.chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .75rem 0 1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    border: 1px solid var(--ma-red);
    color: var(--ma-red);
    border-radius: 999px;
    font-weight: 600;
    background: #fff;
}

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

    .chip .x {
        font-weight: 900;
        cursor: pointer;
    }

/* Paginación */
.pager {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

    .pager a, .pager span {
        padding: .375rem .75rem;
        border: 1px solid var(--ma-red);
        border-radius: .5rem;
        color: var(--ma-red);
        font-weight: 700;
        background: #fff;
        transition: .2s;
    }

        .pager a:hover {
            background: var(--ma-orange);
            border-color: var(--ma-orange);
            color: #fff;
        }

    .pager .active {
        background: var(--ma-red);
        color: #fff;
        border-color: var(--ma-red);
    }

/* Items (cards) */
.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.card {
    border: 1px solid var(--ma-border);
    border-radius: .75rem;
    padding: 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .5rem;    
}

    .card img {
        max-width: 100%;
        height: auto;
        border-radius: .5rem;
        border: 1px solid #f3f4f6;
        background: #fff;
    }

    .card h3 {
        font-size: 1rem;
        margin: .25rem 0 .5rem;
        font-weight: 700;
    }

    .card .meta {
        color: var(--ma-gray);
        font-size: .875rem;
    }

    .card .actions {
        margin-top: auto;
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

.btn-primary {
    background: var(--ma-red);
    color: #fff;
    border: 1px solid var(--ma-red);
    border-radius: .5rem;
    padding: .375rem .75rem;
    font-weight: 700;
}

.badge {
    display: inline-block;
    background: #fff3bf;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: .125rem .375rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 700;
}

/* Empty state */
.empty {
    background: #fff8f8;
    border: 1px dashed var(--ma-red);
    padding: 1rem;
    border-radius: .5rem;
    color: #5a5a5a;
    text-align: center;
    font-weight: 600;
}

/* Highlight */
.hit {
    background: #fffae6;
    border-radius: 4px;
    padding: 0 4px;
    color: #ff8a00;
    font-weight: 600;
}

/* Estilos precio */
.price {
    font-weight: 800;
    font-size: 1.05rem;
    margin: .25rem 0 .25rem;
    color: #111827;
}

    .price .cur {
        opacity: .85;
        font-weight: 700;
        margin-right: .25rem;
    }

    .price .from {
        font-size: .75rem;
        color: #6b7280;
        margin-left: .375rem;
    }

/*SELECT/OPTION*/

/* ========= Select bonito (sin JS) =========
   - Pega este bloque en tu hoja de estilos.
   - Funciona con el <select class="filter-ddl"> dentro de .filter-block
   - Respeta el tema de Multiaceros (rojo/naranjo).
=========================================== */

:root {
    --ma-red: #ED2E38; /* primario */
    --ma-orange: #ff9900; /* acento */
    --sel-bg: #ffffff;
    --sel-text: #1f2937; /* gris 800 */
    --sel-muted: #6b7280; /* gris 500 */
    --sel-border: #d1d5db; /* gris 300 */
    --sel-border-hover: #bfc7d1; /* gris 300+ */
    --sel-radius: 10px;
    --sel-shadow: 0 1px 2px rgba(16,24,40,.06);
    --sel-focus-ring: 0 0 0 3px rgba(237,46,56,.18); /* rojo suave */
}

/* Contenedor y etiqueta (opcional, por si quieres un look consistente) */
.filter-block {
    display: grid;
    gap: .35rem;
    position: relative; /* necesario para el ícono flecha */
}

    .filter-block .filter-label {
        font-size: .85rem;
        font-weight: 600;
        color: var(--sel-muted);
        letter-spacing: .2px;
    }

/* Select estilizado */
.filter-ddl {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--sel-bg);
    color: var(--sel-text);
    border: 1px solid var(--sel-border);
    border-radius: var(--sel-radius);
    box-shadow: var(--sel-shadow);
    padding: .65rem 2.5rem .65rem .8rem; /* espacio para flecha a la derecha */
    line-height: 1.35;
    min-height: 42px; /* cómodo para táctil */
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    font: inherit;
}

    .filter-ddl:hover {
        border-color: var(--sel-border-hover);
    }

    .filter-ddl:focus {
        outline: none;
        border-color: var(--ma-red);
        box-shadow: var(--sel-focus-ring);
    }

    .filter-ddl:disabled {
        opacity: .65;
        cursor: not-allowed;
        background: #f3f4f6;
        color: #9ca3af;
    }

    /* Oculta el ícono nativo en IE/Edge heredados */
    .filter-ddl::-ms-expand {
        display: none;
    }

/* Flecha custom con ::after en el contenedor */
.filter-block::after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: .8rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--sel-muted);
    border-bottom: 2px solid var(--sel-muted);
    transform: translateY(-60%) rotate(45deg);
    opacity: .9;
}

/* Cambia la flecha al enfocar */
.filter-ddl:focus + ._dummy,
.filter-block:has(.filter-ddl:focus)::after {
    border-color: var(--ma-red);
    opacity: 1;
}

/* Estilo del placeholder cuando el value="" está seleccionado (Chrome/Edge/Firefox modernos) */
.filter-ddl:has(option[value=""]:checked) {
    color: var(--sel-muted);
}

/* Opciones del desplegable (limitado por navegador, pero ayuda con tipografía) */
.filter-ddl option {
    font: inherit;
    color: var(--sel-text);
}

    .filter-ddl option[disabled],
    .filter-ddl option[value=""] {
        color: var(--sel-muted);
    }

/* Modo oscuro automático (si tu sitio usa dark o el SO) */
@media (prefers-color-scheme: dark) {
    :root {
        --sel-bg: #0f172a; /* slate-900 */
        --sel-text: #e5e7eb; /* gray-200 */
        --sel-muted: #9ca3af; /* gray-400 */
        --sel-border: #334155; /* slate-700 */
        --sel-border-hover: #475569; /* slate-600 */
        --sel-shadow: 0 1px 2px rgba(0,0,0,.35);
        --sel-focus-ring: 0 0 0 3px rgba(255,153,0,.22); /* naranjo suave */
    }
}

/* Tamaño compacto opcional en móviles angostos */
@media (max-width: 480px) {
    .filter-ddl {
        min-height: 40px;
        padding: .55rem 2.25rem .55rem .7rem;
        font-size: .95rem;
    }
}

/* Chips simples */
.ma-chip {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #f2f4f7;
    margin: 0 .25rem .25rem 0;
    font-size: .82rem;
}

.ma-card {
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    overflow: hidden;
    height: 100%;
}

.ma-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: #fff;
}

.muted {
    color: #6c757d;
}

/* HEADER MOBILE – estilo Multiaceros */
.app-header-mobile {
    background: #f3f3f3;
    color: #ffffff;
    padding: 10px 14px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.16);
    border-bottom: 2px solid #ff9900;
}

/* search */
.ahm-search {
    margin-bottom: 8px;
}

.ahm-search-input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #ff9900; /* borde naranja, no blanco ML */
    padding: 8px 14px;
    font-size: 14px;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* ubicación */
.ahm-location {
    width: 100%;
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 6px 0 0;
    font-size: 13px;
    /*color: #ffffff;*/
}

.ahm-location-icon {
    margin-right: 6px;
}

.ahm-location-text {
    flex: 1;
    text-align: left;
}

.ahm-location-arrow {
    font-size: 16px;
}

/* accesos rápidos */
.ahm-shortcuts {
    display: flex;
    overflow-x: auto;
    padding-top: 8px;
    gap: 10px;
    justify-content: center;
}

.ahm-shortcut {
    flex: 0 0 auto;
    width: 72px;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    color: #424A52; /* gris que ya usas */
}

.ahm-shortcut-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: #f8f9fa;
    margin-bottom: 4px;
    border: 1px solid #e0e7e8;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* HEADER DESKTOP: sólo marca la zona, el diseño lo tienes en tus clases existentes */
.app-header-desktop {
    /* opcional: puedes ajustar paddings aquí si quieres */
}

/* BOTTOM NAV */
.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #ffffff;
    border-top: 2px solid #e74c3c; /* línea roja marca la barra */
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

/* DESKTOP: sin espacio extra abajo */
@media (min-width: 768px) {
    .app-main {
        padding-bottom: 0;
    }
}

/* HEADER SUPERIOR MOBILE (botón hamburguesa) */
#menu-moviles.navbar {
    background: var(--ma-red);
    border-bottom: 2px solid var(--ma-orange);
}

#menu-moviles .navbar-toggler {
    border-color: rgba(255,255,255,.7);
}

#menu-moviles .navbar-toggler-icon {
    filter: invert(1); /* icono blanco */
}

/* Animación al agregar al carrito/cotización */
@keyframes ma-bump {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.18);
    }

    35% {
        transform: scale(0.92);
    }

    55% {
        transform: scale(1.05);
    }

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