/* shop/assets/css/paginas.css  -  estilos propios de cada página de la tienda. Antes cada archivo PHP traía su propio
   <style> (18 archivos, unas 2.600 líneas que el navegador no podía guardar en caché); ahora están aquí, por archivo,
   e include/head.php carga esta hoja después de tema.php. Los trozos que se cargan por AJAX dentro de una página
   (carrito, ficha de producto, garantías, datos de la cuenta, catálogo del cliente) llevan sus reglas acotadas a su
   contenedor (#tabla_cart, #modal_detalle, .outer_div_garantias, .outer_div_cuenta, #catalogo) para que no cambien
   nada fuera de él, como antes. */

/* ======================= php_menu/cabecera.php ======================= */

/* ======================= index.php ======================= */
/* ── Trust strip ── */
.idx-trust-strip {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 0;
    margin-bottom: 32px;
}
.idx-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.idx-trust-item i {
    font-size: 26px;
    color: var(--color-primary);
    min-width: 30px;
    text-align: center;
}
.idx-trust-item div { display: flex; flex-direction: column; }
.idx-trust-item strong { font-size: 13px; font-weight: 700; color: #1a1d27; line-height: 1.3; }
.idx-trust-item span  { font-size: 11px; color: #6b7280; }

/* ── Sección marcas: Carrusel Interactivo ── */
.idx-brands-section { overflow: hidden; }
.idx-footer-banner {
    height: 220px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.idx-footer-banner a,
.idx-footer-banner img {
    display: block;
    width: 100%;
    height: 100%;
}
.idx-footer-banner img { object-fit: contain; }
@media (max-width: 768px) {
    .idx-footer-banner { height: 140px; }
}
.marcas-carrusel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 4px 0 10px 0;
}
.marcas-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 10px 4px;
    scrollbar-width: none;
}
.marcas-track::-webkit-scrollbar {
    display: none;
}
.marcas-track::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.marcas-track::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.marcas-track::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tarjeta de marca */
.marca-card {
    flex: 0 0 160px;
    width: 160px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all .25s ease;
    user-select: none;
}
.marca-card:hover {
    border-color: var(--color-primary, #e8092e);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.marca-card-inner {
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 6px;
}
.marca-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}
.marca-card:hover .marca-img {
    transform: scale(1.08);
}
.marca-badge-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    border-radius: 8px;
}
.marcas-carrusel-wrapper .marca-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .2s ease;
}
.marcas-carrusel-wrapper .marca-card:hover .marca-label {
    color: var(--color-primary, #e8092e);
}

/* Botones de navegación marcas */
.btn-marcas-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all .2s ease;
    padding: 0;
    outline: none;
}
.btn-marcas-nav:hover {
    background: var(--color-primary, #e8092e);
    color: #ffffff;
    border-color: var(--color-primary, #e8092e);
    transform: scale(1.08);
}
@media (max-width: 768px) {
    .marca-card {
        flex: 0 0 130px;
        width: 130px;
        padding: 10px 8px;
    }
    .marca-card-inner {
        height: 52px;
    }
}

/* ── Banners laterales ── */
.banner-lateral {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ── Sección categorías ── */
.idx-section-title {
    margin-bottom: 24px;
}
.idx-section-title h2 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}
.idx-section-title h2 span {
    color: #e8092e;
}

.idx-cat-card {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: box-shadow .25s, transform .25s;
}
.idx-cat-card:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,.16);
    transform: translateY(-3px);
}
.idx-cat-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0f0f0;
}
.idx-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.idx-cat-card:hover .idx-cat-img img {
    transform: scale(1.07);
}
.idx-cat-label {
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 10px 8px;
    border-top: 1px solid #f0f0f0;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* ── Reserva de espacio para contenido inyectado por AJAX (evita CLS) ── */
#div_buscador {
    min-height: 0;
}
#mis_articulos {
    min-height: 400px;
}

/* ── Banner pie de página ── */
.idx-banner-footer { margin-top: 10px; }
.idx-banner-link {
    display: block;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.idx-banner-link img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.idx-banner-link:hover img {
    transform: scale(1.03);
}
.idx-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px 28px;
}
.idx-banner-overlay span {
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 30px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.carrusel-wrap-interactive {
                                border-radius: 14px;
                                overflow: hidden;
                                box-shadow: 0 6px 20px rgba(0,0,0,.08);
                                position: relative;
                                height: 320px;
                                user-select: none;
                            }
                            #carrusel-caja-dinamico {
                                display: flex;
                                width: 100%;
                                height: 100%;
                                transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
                                will-change: transform;
                            }
                            .carrusel-item-dinamico {
                                min-width: 100%;
                                flex: 0 0 100%;
                                height: 100%;
                            }
                            .carrusel-item-dinamico a, .carrusel-item-dinamico .imagenes {
                                display: block;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                            /* Botones de navegación Anterior / Siguiente */
                            .carrusel-nav-btn {
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                width: 44px;
                                height: 44px;
                                border-radius: 50%;
                                background: rgba(255, 255, 255, 0.92);
                                border: none;
                                box-shadow: 0 4px 14px rgba(0,0,0,0.22);
                                color: #1e293b;
                                font-size: 16px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                z-index: 15;
                                transition: all .25s ease;
                                outline: none;
                                padding: 0;
                            }
                            .carrusel-nav-btn:hover {
                                background: #ffffff;
                                color: var(--color-primary, #e8092e);
                                transform: translateY(-50%) scale(1.12);
                                box-shadow: 0 6px 18px rgba(0,0,0,0.32);
                            }
                            .carrusel-nav-btn:active {
                                transform: translateY(-50%) scale(0.95);
                            }
                            .carrusel-btn-prev {
                                left: 14px;
                            }
                            .carrusel-btn-next {
                                right: 14px;
                            }
                            /* Indicadores / Puntos (Dots) */
                            .carrusel-dots-wrap {
                                position: absolute;
                                bottom: 12px;
                                left: 50%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                z-index: 15;
                                padding: 4px 10px;
                                background: rgba(15, 23, 42, 0.35);
                                border-radius: 20px;
                                backdrop-filter: blur(4px);
                            }
                            .carrusel-dot {
                                width: 9px;
                                height: 9px;
                                border-radius: 50%;
                                background: rgba(255, 255, 255, 0.55);
                                cursor: pointer;
                                transition: all .25s ease;
                            }
                            .carrusel-dot:hover {
                                background: rgba(255, 255, 255, 0.9);
                            }
                            .carrusel-dot.active {
                                background: #ffffff;
                                width: 22px;
                                border-radius: 10px;
                            }
                            @media (max-width: 768px) {
                                .carrusel-wrap-interactive {
                                    height: 200px !important;
                                }
                                .carrusel-nav-btn {
                                    width: 36px;
                                    height: 36px;
                                    font-size: 14px;
                                }
                                .carrusel-btn-prev { left: 8px; }
                                .carrusel-btn-next { right: 8px; }
                            }

/* Categorías destacadas: una sola fila que ocupa todo el ancho, las tarjetas se reparten el espacio (mín. 150 px);
   en celular, dos por fila */
.idx-cats-fila { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.idx-cats-item { flex: 1 1 150px; min-width: 0; display: flex; }
.idx-cats-item > a { width: 100%; }   /* todas las tarjetas de la fila con la misma altura */
@media (max-width: 767px) { .idx-cats-item { flex: 1 1 calc(50% - 8px); } }

/* ======================= include/footer.php ======================= */
.cumple-popup {
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
}
.footer-carrusel-wrapper {
    display: none;
}
.footer-logo-nombre {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.footer_widgets {
    background: #0f172a;
    color: #cbd5e1;
    padding: 60px 0 34px;
    border-top: 3px solid var(--color-primary);
}
.footer_widgets .footer_top {
    padding-bottom: 32px;
}
.footer_widgets h5 {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 18px;
}
.footer_widgets p {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}
.footer_widgets .footer-logo-img {
    height: 60px;
    margin-bottom: 18px;
    display: inline-block;
}
.footer_widgets .footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.footer_widgets .footer-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #9ca3af;
    transition: background .2s ease, color .2s ease;
}
.footer_widgets .footer-social a:hover {
    background: var(--color-primary);
    color: #ffffff;
    transform: scale(1.1);
}
.footer_widgets ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer_widgets li {
    margin-bottom: 12px;
}
.footer_widgets a {
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s ease;
}
.footer_widgets a:hover {
    color: #ffffff;
}
.footer_widgets .footer-contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.footer_widgets .footer-contact i {
    color: var(--color-primary);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.footer_widgets .footer-contact .fa-whatsapp {
    color: #25d366;
}
.footer-description {
    margin-bottom: 20px;
}
.footer_bottom {
    padding-top: 18px;
}
.footer_bottom p {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
}
.footer_bottom a {
    color: var(--color-primary);
}
.footer_bottom a:hover {
    color: #ffffff;
}
@media (max-width: 767px) {
    .footer_widgets {
        padding: 40px 0 24px;
    }
    .footer_bottom .col-md-6 {
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }
    .footer_bottom .text-md-right {
        text-align: center !important;
    }
}

/* ======================= categorias.php ======================= */
.contenedor_img {
        background-color: white;
        width: 220px;
        height: 220px;
    }
    .categorias {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
    }

/* ======================= resultados_buscador.php ======================= */
/* ── Sidebar de marcas ─────────────────────────────── */
        .marcas-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            overflow: hidden;
            margin-bottom: 24px;
        }
        .marcas-card-header {
            background: var(--color-primary);
            color: #fff;
            padding: 12px 18px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .marcas-card-header i { font-size: 15px; }
        .marcas-lista { list-style: none; padding: 8px 0; margin: 0; }
        .marcas-lista li { border-bottom: 1px solid var(--gray-100); }
        .marcas-lista li:last-child { border-bottom: none; }

        .marcas-card .marca-check { display: none; }
        .marcas-card .marca-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            cursor: pointer;
            font-size: 13px;
            color: var(--gray-600);
            font-weight: 500;
            transition: background .15s, color .15s;
            user-select: none;
        }
        .marcas-card .marca-label:hover {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }
        .marcas-card .marca-label::before {
            content: '';
            flex-shrink: 0;
            width: 17px;
            height: 17px;
            border: 2px solid var(--gray-200);
            border-radius: 5px;
            background: #fff;
            transition: border-color .15s, background .15s;
        }
        .marcas-card .marca-check:checked + .marca-label {
            color: var(--color-primary);
            font-weight: 600;
            background: var(--color-primary-light);
        }
        .marcas-card .marca-check:checked + .marca-label::before {
            background: var(--color-primary);
            border-color: var(--color-primary);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 10px;
        }
        .marcas-limpiar {
            display: block;
            text-align: center;
            padding: 9px;
            font-size: 12px;
            color: var(--gray-400);
            cursor: pointer;
            border-top: 1px solid var(--gray-100);
            transition: color .15s, background .15s;
            text-decoration: none;
        }
        .marcas-limpiar:hover {
            color: var(--color-primary);
            background: var(--color-primary-light);
        }

/* ======================= php_tienda/tabla_carrito.php ======================= */
/* ═══════════════════════════════════════════════
   CART PAGE — Compact Design
   ═══════════════════════════════════════════════ */

/* ─── Panel header ─── */
#tabla_cart .cart-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
}
#tabla_cart .cart-panel-header .panel-title {
    font-size: 13px; font-weight: 700;
    color: var(--gray-900); display: flex; align-items: center; gap: 6px;
}
#tabla_cart .cart-panel-header .panel-title i { color: var(--color-primary); font-size: 12px; }
#tabla_cart .cart-badge {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--radius-full);
}

/* ─── Items panel ─── */
#tabla_cart .cart-items-panel {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}
#tabla_cart .cart-items-body { max-height: none; overflow: visible; }   /* sin barra de desplazamiento: se ven todos los artículos (antes 400px y scroll) */

/* ─── Single cart item ─── */
#tabla_cart .cart-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s;
}
#tabla_cart .cart-item:last-child { border-bottom: none; }
#tabla_cart .cart-item:hover { background: var(--gray-50); }

#tabla_cart .cart-item-img-wrap {
    flex: 0 0 56px; width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
#tabla_cart .cart-item-img-wrap img {
    width: 52px; height: 52px; object-fit: contain;
    transition: transform .2s;
}
#tabla_cart .cart-item:hover .cart-item-img-wrap img { transform: scale(1.06); }

#tabla_cart .cart-item-info { flex: 1; min-width: 0; }
#tabla_cart .cart-item-name {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--gray-900); margin-bottom: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none; line-height: 1.3;
}
#tabla_cart .cart-item-name:hover { color: var(--color-primary); }
#tabla_cart .cart-item-attr { font-size: 10px; color: var(--gray-400); display: block; margin-bottom: 4px; }

/* ─── Qty +/- control ─── */
#tabla_cart .qty-control {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden; margin-top: 5px;
    background: #fff;
}
#tabla_cart .qty-btn {
    width: 26px; height: 26px;
    background: var(--gray-50); border: none;
    cursor: pointer; font-size: 15px; font-weight: 500;
    color: var(--gray-600); line-height: 1;
    transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
    user-select: none;
}
#tabla_cart .qty-btn:hover { background: var(--color-primary); color: #fff; }
#tabla_cart .qty-btn:active { transform: scale(.92); }
#tabla_cart .qty-num {
    min-width: 28px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--gray-900);
    border-left: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    padding: 0 4px; background: #fff;
}

/* ─── Prices ─── */
#tabla_cart .price_cart { font-size: 13px !important; font-weight: 700 !important; display: block !important; }
#tabla_cart .current_price {
    font-size: 10px !important; color: var(--gray-400) !important;
    text-decoration: line-through !important; display: block !important;
}
#tabla_cart .current_price label { color: #ef4444 !important; font-size: 10px !important; }

/* ─── Item action buttons ─── */
#tabla_cart .cart-item-actions {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#tabla_cart .btn-item-action {
    width: 26px; height: 26px;
    border: none; border-radius: var(--radius-full);
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
    font-size: 11px; text-decoration: none;
    color: var(--gray-400); line-height: 1;
}
#tabla_cart .btn-item-action:hover { background: var(--gray-200); color: var(--gray-600); }
#tabla_cart .btn-item-action.btn-delete:hover { background: #fee2e2; color: #dc2626; }
#tabla_cart .btn-item-action.btn-wish-on { background: var(--color-primary-light); color: var(--color-primary); }
#tabla_cart .btn-item-action.btn-wish-on:hover { background: var(--color-primary); color: #fff; }

/* ─── Empty cart ─── */
#tabla_cart .cart-empty { text-align: center; padding: 36px 20px; }
#tabla_cart .cart-empty-icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    background: var(--gray-100); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--gray-400);
}
#tabla_cart .cart-empty h3 { font-size: 15px; color: var(--gray-600); margin-bottom: 4px; }
#tabla_cart .cart-empty p  { font-size: 12px; color: var(--gray-400); margin-bottom: 16px; }
#tabla_cart .btn-go-shop {
    display: inline-block; padding: 9px 22px;
    background: var(--color-primary); color: #fff !important;
    border-radius: var(--radius-full); text-decoration: none;
    font-size: 12px; font-weight: 600; transition: var(--transition);
}
#tabla_cart .btn-go-shop:hover { filter: brightness(.88); color: #fff; }

/* ─── Order summary card ─── */
#tabla_cart .order-summary-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    position: sticky; top: 16px;
}
#tabla_cart .summary-header {
    padding: 10px 14px;
    background: var(--color-primary); color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
}
#tabla_cart .summary-lines { padding: 2px 0; }
#tabla_cart .summary-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; font-size: 12px;
    border-bottom: 1px solid var(--gray-100);
}
#tabla_cart .summary-line:last-child { border-bottom: none; }
#tabla_cart .summary-line .s-label { color: var(--gray-600); }
#tabla_cart .summary-line .s-value { font-weight: 600; color: var(--gray-900); }
#tabla_cart .summary-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: var(--gray-50);
    border-top: 2px solid var(--gray-100);
    font-size: 13px; font-weight: 700; color: var(--gray-900);
}
#tabla_cart .summary-total-row .s-total-amount { font-size: 15px; color: var(--color-primary); }

/* ─── Checkout button ─── */
#tabla_cart .btn-checkout {
    display: block; width: 100%; padding: 12px;
    background: var(--color-primary); color: #fff !important;
    border: none; font-size: 12px; font-weight: 700;
    text-align: center; cursor: pointer;
    transition: var(--transition); letter-spacing: .4px;
    text-transform: uppercase;
}
#tabla_cart .btn-checkout:hover { filter: brightness(.88); }
#tabla_cart .btn-checkout:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Shipping form ─── */
#tabla_cart .shipping-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden; margin-bottom: 12px;
}
#tabla_cart .shipping-header {
    padding: 10px 14px;
    background: var(--gray-900); color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
}
#tabla_cart .shipping-body { padding: 12px 14px 6px; }
#tabla_cart .form-field { margin-bottom: 10px; }
#tabla_cart .form-field label {
    display: block; font-size: 10px; font-weight: 700;
    color: var(--gray-400); text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 4px;
}
#tabla_cart .form-field label span { color: #ef4444; }
#tabla_cart .form-field input,
#tabla_cart .form-field select {
    display: block; width: 100%; height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 12px; color: var(--gray-900);
    background: var(--gray-50); transition: var(--transition);
}
#tabla_cart .form-field input:focus,
#tabla_cart .form-field select:focus {
    border-color: var(--color-primary); outline: none;
    background: #fff; box-shadow: 0 0 0 2px var(--color-primary-light);
}
#tabla_cart .form-row { display: flex; gap: 8px; }
#tabla_cart .form-row .form-field { flex: 1; }

/* ─── Messages ─── */
#tabla_cart #resultados_login { padding: 0 0 6px; }

/* ======================= php_tienda/vista_rapida.php ======================= */
#modal_detalle .modal_price .current_price {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--pd_accent) !important;
}
#modal_detalle .pd_variant_row { margin-bottom: 10px; }
#modal_detalle .pd_variant_label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #9a9a9a;
    margin-bottom: 5px;
}
#modal_detalle .pd_chip_group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#modal_detalle .pd_chip {
    min-width: 34px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #e4e4e4;
    border-radius: 7px;
    background: #fafafa;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
#modal_detalle .pd_chip:hover {
    border-color: var(--pd_accent);
}
#modal_detalle .pd_chip.active {
    border-color: var(--pd_accent);
    color: #fff;
    background: var(--pd_accent);
}
#modal_detalle .pd_disponibles {
    display: inline-block;
    color: var(--pd_accent);
    background: color-mix(in srgb, var(--pd_accent) 10%, #fff);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 0 0;
}
#modal_detalle .pd_btn_cart {
    background: var(--pd_accent) !important;
    border-radius: 6px !important;
    height: 40px !important;
    width: 200px !important;
    font-size: 11px !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--pd_accent) 25%, transparent);
}
#modal_detalle .pd_btn_cart:hover {
    background: var(--pd_accent) !important;
    opacity: .92;
}
#modal_detalle .modal_disponibles {
    color: var(--pd_accent);
    font-size: 14px;
    margin-bottom: 14px;
}
#modal_detalle .modal_qty_row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
#modal_detalle .qty_wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    height: 42px;
    flex-shrink: 0;
}
#modal_detalle .qty_wrapper .qty_btn {
    width: 38px !important;
    height: 42px !important;
    background: #f2f2f2 !important;
    color: #333 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: background 0.2s !important;
}
#modal_detalle .qty_wrapper .qty_btn:hover {
    background: #e0e0e0 !important;
    color: #111 !important;
}
#modal_detalle .qty_input {
    width: 48px;
    height: 42px;
    text-align: center;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
    background: #fff;
}
#modal_detalle .qty_input::-webkit-inner-spin-button,
#modal_detalle .qty_input::-webkit-outer-spin-button { -webkit-appearance: none; }
#modal_detalle .btn_add_cart_modal {
    height: 42px !important;
    width: auto !important;
    flex: 1;
    min-width: 160px;
    background: #262626 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s !important;
    margin-left: 0 !important;
    padding: 0 20px !important;
}
#modal_detalle .btn_add_cart_modal:hover {
    background: #e8342a !important;
}

/* ======================= php_cuenta/tabla_garantias.php ======================= */
.outer_div_garantias .garantias-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.outer_div_garantias .garantia-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #fff;
}
.outer_div_garantias .garantia-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.outer_div_garantias .garantia-articulo {
    font-weight: 600;
    color: #1f2937;
}
.outer_div_garantias .garantia-meta {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}
.outer_div_garantias .garantia-estado {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.outer_div_garantias .garantia-fechas {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.outer_div_garantias .garantia-fechas .label,
.outer_div_garantias .garantia-detalle .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin-bottom: 2px;
}
.outer_div_garantias .garantia-detalle {
    margin-top: 12px;
}
.outer_div_garantias .garantia-detalle p {
    margin: 0;
    font-size: 13.5px;
    color: #374151;
}
.outer_div_garantias .garantia-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-primary, #333);
    text-decoration: none;
}
.outer_div_garantias .garantia-pdf:hover {
    text-decoration: underline;
}
.outer_div_garantias .garantias-vacio {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
.outer_div_garantias .garantias-vacio i {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

/* ======================= php_cuenta/modal_forzar_clave.php ======================= */
.fck-field { position: relative; margin-bottom: 14px; }
.fck-field input {
    width: 100%; padding: 9px 40px 9px 12px;
    border: 1px solid #ddd; border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
.fck-field input:focus { border-color: var(--color-primary, #333); outline: none; }
.fck-eye {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: #888; font-size: 15px;
}
.fck-requisitos { font-size: 12px; color: #888; margin-bottom: 14px; line-height: 1.8; }
.fck-req { display: flex; align-items: center; gap: 6px; }
.fck-req .ok  { color: #28a745; }
.fck-req .nok { color: #ccc; }

/* ======================= mi_cuenta.php y php_cuenta/mis_datos.php ======================= */
/* Opción A: menú oscuro a la izquierda (foto, nombre, secciones, cerrar sesión) y el contenido en tarjetas con
   encabezado gris claro. En celular el menú queda arriba: la foto y el nombre en una fila y las secciones como
   botones que se deslizan de lado */
.main_content_area { padding-top: 24px !important; }
.mcu-wrap { display: flex; gap: 22px; align-items: flex-start; }
.mcu-side { width: 250px; flex: none; background: #0f172a; border-radius: 14px; padding: 20px 12px 12px; position: sticky; top: 90px; }
.mcu-user { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 6px 16px; margin-bottom: 10px; border-bottom: 1px solid #1e293b; }
.mcu-foto { position: relative; width: 76px; height: 76px; flex: none; }
.mcu-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #fff; background: #e2e8f0; }
.mcu-foto-edit { position: absolute; right: -3px; bottom: -3px; width: 28px; height: 28px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary, #e8092e); color: #fff; font-size: 12px; cursor: pointer; border: 2px solid #0f172a; }
.mcu-user-txt { min-width: 0; max-width: 100%; }
.mcu-user-txt b { display: block; color: #fff; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcu-user-txt small { display: block; color: #94a3b8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcu-menu { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mcu-menu li { margin: 0; }
.mcu-menu .nav-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-radius: 9px; background: transparent; color: #cbd5e1 !important; font-size: 14px; font-weight: 600; text-align: left; }
.mcu-menu .nav-link i { width: 16px; text-align: center; color: #64748b; }
.mcu-menu .nav-link:hover { background: #1e293b; color: #fff !important; }
.mcu-menu .nav-link.active { background: var(--color-primary, #e8092e); color: #fff !important; }
.mcu-menu .nav-link.active i { color: #fff; }
.mcu-salir { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid #1e293b; }
.mcu-salir .nav-link, .mcu-salir .nav-link i { color: #f87171 !important; }
/* contenido: cada sección es una tarjeta; su h3 hace de encabezado gris */
.mcu-main { flex: 1; min-width: 0; }
.mcu-main > .tab-pane:not(.active) { display: none !important; }   /* el tema deja las secciones ocultas en block (con alto 0): con el borde y el relleno de la tarjeta ocupaban espacio */
.mcu-main #resultados_modi { margin: 0 0 10px; }
.mcu-main #resultados_modi:empty { display: none; }
.mcu-main > .tab-pane:not(.mcu-libre) { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; }
.mcu-main > .tab-pane:not(.mcu-libre) > h3,
.mcu-main > #cartera .tcxc-e1 { margin: -18px -18px 16px !important; padding: 13px 18px !important; background: #f1f5f9; border-bottom: 1px solid #e5e7eb; border-radius: 14px 14px 0 0; font-size: 15px !important; font-weight: 700 !important; color: #1e293b; text-transform: none !important; }
.mcu-main > #cartera .tcxc-e1 h3 { margin: 0 !important; padding: 0 !important; background: none; border: 0; font-size: 15px !important; }
.mcu-main > .tab-pane > h3 i { color: #64748b; margin-right: 6px; }
.mcu-buscar { margin-bottom: 12px; height: 42px; border-radius: 8px; }
.mcu-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 16px; }
.mcu-ch { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #f1f5f9; border-bottom: 1px solid #e5e7eb; border-radius: 14px 14px 0 0; font-size: 15px; font-weight: 700; color: #1e293b; }
.mcu-ch i { color: #64748b; }
.mcu-cb { padding: 18px; margin: 0; }
.mcu-cb.row { padding: 18px 6px; }
.mcu-main label { font-size: 12.5px; font-weight: 600; color: #64748b; }
.mcu-main .form-control { height: 42px; border-radius: 8px; border-color: #d6dbe3; font-size: 14px; }
.mcu-fecha { display: grid; grid-template-columns: 1fr 1.5fr 1.1fr; gap: 8px; }
.mcu-lectura { margin-left: auto; white-space: nowrap; background: #fef3c7; color: #92400e; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.mcu-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.mcu-datos > div { padding: 8px 0; border-bottom: 1px dashed #e5e7eb; font-size: 14px; color: #1e293b; overflow-wrap: anywhere; }
.mcu-datos small { display: block; font-size: 11.5px; color: #64748b; margin-bottom: 2px; }
.mcu-nota { font-size: 12.5px; color: #64748b; margin: 14px 0 0; line-height: 1.5; }
.mcu-pie { text-align: right; }
.mcu-form { row-gap: 14px; }
@media (max-width: 991px) {
    .mcu-wrap { flex-direction: column; gap: 14px; }
    .mcu-main { width: 100%; }
    .mcu-side { width: 100%; position: static; padding: 14px 12px 10px; }
    .mcu-user { flex-direction: row; text-align: left; padding: 0 4px 12px; gap: 12px; }
    .mcu-foto { width: 56px; height: 56px; }
    .mcu-menu { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
    .mcu-menu::-webkit-scrollbar { display: none; }
    .mcu-menu li { flex: none; }
    .mcu-menu .nav-link { white-space: nowrap; padding: 8px 12px; font-size: 13px; background: #1e293b; }
    .mcu-salir { margin: 0 !important; padding: 0; border: 0; }
}
@media (max-width: 575px) {
    .mcu-datos { grid-template-columns: 1fr; }
    .mcu-pie .cta-e5 { width: 100% !important; }
}

/* ======================= Inicio de Mi cuenta (php_cuenta/resumen.php) ======================= */
.res-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.res-k { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.res-k > i { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.res-k > div { min-width: 0; }
.res-k small { display: block; font-size: 12px; font-weight: 600; color: #64748b; }
.res-k b { display: block; font-size: 20px; font-weight: 800; color: #1e293b; margin-top: 2px; white-space: nowrap; }
.res-k b.res-rojo { color: #dc2626; }
.res-k em { font-style: normal; font-size: 11.5px; color: #64748b; }
.res-k .rojo, .res-et.rojo { background: #fee2e2; color: #dc2626; }
.res-k .amb, .res-et.amb { background: #fef3c7; color: #b45309; }
.res-k .azul, .res-et.azul { background: #dbeafe; color: #1d4ed8; }
.res-k .ver, .res-et.ver { background: #dcfce7; color: #15803d; }
.res-ver { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--color-primary, #e8092e) !important; }
.res-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0; text-transform: none; }
.res-tabla *, .res-k * { text-transform: none !important; }
.res-tabla th { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 700; padding: 10px 18px; border-bottom: 1px solid #f1f5f9; text-align: left; }
.res-tabla td { padding: 10px 18px; border-bottom: 1px solid #f1f5f9; color: #1e293b; white-space: nowrap; }
.res-tabla tr:last-child td { border-bottom: 0; }
.res-tabla .r { text-align: right; }
.res-tabla a { color: #1e293b !important; }
.res-et { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.res-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.res-g2 .mcu-card { margin-bottom: 0; overflow: hidden; }
.res-tabla:not(#_) th, .res-tabla:not(#_) td { background: none; border: 0; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: middle; min-width: 0; font-weight: 400; font-size: 13.5px; }
.res-tabla:not(#_) thead { background: none; }
.res-tabla:not(#_) th { font-size: 11px; font-weight: 700; }
.res-tabla:not(#_) .r { text-align: right; }
.res-tabla:not(#_) tr:last-child td { border-bottom: 0; }
.res-vacio { padding: 18px; color: #64748b; font-size: 13.5px; }
.res-vacio .fa-check-circle { color: #16a34a; margin-right: 4px; }
@media (max-width: 1199px) {
    .res-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .res-g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .res-k { padding: 12px; gap: 10px; }
    .res-k > i { width: 38px; height: 38px; font-size: 16px; }
    .res-k b { font-size: 16px; }
    .res-tabla:not(#_) td, .res-tabla:not(#_) th { padding: 9px 12px; }
    .res-tabla:not(#_) td { white-space: normal; }
    .res-tabla:not(#_) td:nth-child(2) { white-space: nowrap; }
    .res-k b { font-size: 15px; }
}

/* ======================= Mi cuenta › Catálogo › Lista de precios (php_cuenta/lista_precios.php) ======================= */
.lp-tabs { margin-left: auto; display: inline-flex; gap: 3px; background: #e2e8f0; border-radius: 10px; padding: 3px; }
.mcu-main #catalogo > h3 { display: flex; align-items: center; gap: 8px; padding-top: 8px !important; padding-bottom: 8px !important; }
.lp-tabs a { padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #64748b !important; white-space: nowrap; }
.lp-tabs a.on { background: #fff; color: var(--color-primary) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lp-oculto { display: none; }
#lp_pdf > h3 { display: none; }   /* el título de catalogo_cliente.php ya está arriba */
.lp-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-tarifa { font-size: 13px; color: #64748b; margin-right: auto; }
.lp-tarifa b { color: var(--color-primary); }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155 !important; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.lp-btn:hover { background: #f1f5f9; }
.lp-btn.lp-pri { background: var(--color-primary); border-color: var(--color-primary); color: #fff !important; }
.lp-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lp-buscar { position: relative; flex: 1 1 260px; }
.lp-buscar i { position: absolute; left: 12px; top: 13px; color: #94a3b8; }
.lp-buscar .form-control:not(#_) { padding-left: 34px !important; height: 40px; }
.lp-filtros .form-select { width: auto; min-width: 170px; height: 40px; border-radius: 8px; border-color: #d6dbe3; font-size: 13px; }
.lp-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #334155 !important; white-space: nowrap; margin: 0; cursor: pointer; }
.lp-chk input { width: 16px; height: 16px; accent-color: var(--color-primary); }
/* tabla: encabezado oscuro; la tarifa del cliente resaltada; en celular se desliza de lado con Ref. y Artículo fijos */
.lp-scroll { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 12px; }
.lp-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.lp-tabla th { background: #0f172a; color: #cbd5e1; font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 9px 10px; white-space: nowrap; text-align: left; }
.lp-tabla .lp-grupo th { background: #0f172a; color: #94a3b8; font-size: 10px; padding: 5px 10px; text-align: center; border-bottom: 1px solid #1e293b; }
.lp-tabla th.lp-suc { background: #1e293b; }
.lp-tabla th.lp-tu { background: var(--color-primary); color: #fff; }
.lp-tabla td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; background: #fff; vertical-align: middle; }
.lp-tabla tr:last-child td { border-bottom: 0; }
.lp-tabla td.lp-tu { background: #fff5f6; font-weight: 800; color: var(--color-primary); }
.lp-tabla .lp-r { text-align: right; }
.lp-tabla .lp-c { text-align: center; }
.lp-art b { display: block; font-weight: 700; color: #1e293b; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.lp-art small { display: block; font-size: 10.5px; color: #64748b; text-transform: uppercase; }
.lp-ref { color: #475569; }
.lp-nada { color: #cbd5e1; }
.lp-st { display: inline-block; min-width: 32px; border-radius: 20px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.lp-st.ok { background: #dcfce7; color: #15803d; }
.lp-st.bajo { background: #fef3c7; color: #b45309; }
.lp-st.no { background: #f1f5f9; color: #94a3b8; }
.lp-mas { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 12px; transition: transform .15s; }
.lp-mas:hover { filter: brightness(.92); }
.lp-mas.lp-listo { background: #16a34a; transform: scale(1.1); }
.lp-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px 0; font-size: 12px; color: #64748b; }
.lp-pie .pagination { margin: 0; }
.lp-vacio { padding: 30px; text-align: center; color: #64748b; border: 1px dashed #e2e8f0; border-radius: 12px; }
@media (max-width: 767px) {
    .lp-tabla .lp-fijo { position: sticky; z-index: 1; }
    .lp-tabla .lp-ref { left: 0; min-width: 76px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
    .lp-tabla .lp-art { left: 76px; box-shadow: 2px 0 0 #e5e7eb; }
    .lp-art b { max-width: 150px; }
    .lp-filtros .form-select { flex: 1 1 140px; min-width: 0; }
    .mcu-main #catalogo > h3 { flex-wrap: wrap; }
    .lp-tabs { margin-left: 0; }
}

/* ======================= cotizador_nuevo.php ======================= */
.cot-panel {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
            margin-bottom: 16px;
        }


/* ======================= cotizador_nuevo.php (opción A) ======================= */
/* artículos a la izquierda; cliente y resumen a la derecha (el resumen se queda a la vista al bajar). En celular:
   cliente, artículos y resumen uno debajo del otro */
.cotz-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cotz-cab h4 { margin: 0; font-size: 22px; font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.cotz-num { background: #0f172a; color: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.cotz-cab-btn { margin-left: auto; display: flex; gap: 8px; }
.cotz-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155 !important; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cotz-btn:hover { background: #f1f5f9; }
.cotz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "art cli" "art res"; grid-template-rows: auto 1fr; gap: 16px; align-items: start; margin-bottom: 30px; }
.cotz-art { grid-area: art; }
.cotz-cli { grid-area: cli; }
.cotz-res { grid-area: res; position: sticky; top: 90px; }
.cotz-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; }
.cotz-ch { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f1f5f9; border-bottom: 1px solid #e5e7eb; border-radius: 14px 14px 0 0; font-size: 15px; font-weight: 700; color: #1e293b; }
.cotz-ch i { color: #64748b; }
.cotz-cuenta { margin-left: auto; font-size: 12px; font-weight: 600; color: #64748b; }
.cotz-cb { padding: 16px; }
.cotz-buscar { display: flex; gap: 10px; margin-bottom: 14px; }
.cotz-buscar .cotn-e8:not(#_) { height: 40px; border-radius: 8px; padding-left: 38px !important; }
.cotz-lupa { position: absolute; left: 13px; top: 13px; color: #94a3b8; z-index: 2; }
.cotz-lab { display: block; font-size: 12px; font-weight: 700; color: #64748b; margin: 14px 0 5px; }
.cotz-cli .form-control, .cotz-cli .form-select { border-radius: 8px; border-color: #d6dbe3; font-size: 13.5px; }
.cotz-cli .form-select { height: 40px; }
/* tabla de artículos (php_cotizador/tabla_lineas.php) */
.cotz-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cotz-tabla:not(#_) thead { background: none; }
.cotz-tabla:not(#_) th { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 700; padding: 9px 10px; border: 0; border-bottom: 1px solid #e5e7eb; background: none; text-align: left; min-width: 0; }
.cotz-tabla:not(#_) td { padding: 10px; border: 0; border-bottom: 1px solid #f1f5f9; vertical-align: middle; text-align: left; min-width: 0; font-weight: 400; text-transform: none; font-size: 13.5px; }
.cotz-tabla:not(#_) .cotz-r { text-align: right; white-space: nowrap; }
.cotz-tabla:not(#_) .cotz-c { text-align: center; }
.cotz-qty { display: inline-flex; align-items: center; border: 1px solid #d6dbe3; border-radius: 8px; overflow: hidden; }
.cotz-qty button { width: 30px; height: 30px; border: 0; background: #fff; font-size: 16px; font-weight: 700; color: #334155; line-height: 1; }
.cotz-qty button:hover:not(:disabled) { background: #f1f5f9; }
.cotz-qty button:disabled { color: #cbd5e1; cursor: default; }
.cotz-qty span { min-width: 36px; text-align: center; font-weight: 700; border-left: 1px solid #d6dbe3; border-right: 1px solid #d6dbe3; line-height: 30px; }
.cotz-acc { text-align: right; white-space: nowrap; }
.cotz-acc button { width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #64748b; margin-left: 4px; }
.cotz-acc button:hover { background: #f1f5f9; color: #1e293b; }
.cotz-acc .btn-del-temp:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.cotz-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 40px 16px; border: 1px dashed #e2e8f0; border-radius: 12px; color: #64748b; }
.cotz-vacio i { font-size: 34px; color: #cbd5e1; margin-bottom: 6px; }
.cotz-vacio b { color: #1e293b; font-size: 15px; }
.cotz-vacio small { font-size: 13px; }
/* cliente (php_cotizador/cliente_elegido.php) */
.cotz-cliente { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.cotz-ini { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #fee2e2; color: var(--color-primary, #e8092e); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.cotz-cliente-txt { min-width: 0; flex: 1; }
.cotz-cliente-txt b { display: block; font-size: 13.5px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotz-cliente-txt small { display: block; font-size: 11.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotz-link { font-size: 12.5px; font-weight: 700; color: var(--color-primary, #e8092e) !important; white-space: nowrap; }
.cotz-cambiar { display: none; margin-top: 8px; }
.cotz-cli-acc { display: flex; gap: 16px; margin-top: 10px; }
/* resumen */
.cotz-fila { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #475569; }
.cotz-total { border-top: 1px dashed #e5e7eb; margin-top: 6px; padding-top: 12px; font-size: 22px; font-weight: 800; color: #1e293b; }
.cotz-alerta { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 10px; }
.cotz-guardar { width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 10px; background: var(--color-primary, #e8092e); color: #fff; font-size: 15px; font-weight: 700; }
.cotz-guardar:hover { filter: brightness(.95); }
.cotz-descartar { display: block; margin: 10px auto 0; border: 0; background: none; color: #64748b; font-size: 13px; font-weight: 600; }
.cotz-descartar:hover { color: #dc2626; }
@media (max-width: 991px) {
    .cotz-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cli" "art" "res"; grid-template-rows: auto; }
    .cotz-res { position: static; }
}
@media (max-width: 575px) {
    .cotz-cab-btn { margin-left: 0; width: 100%; }
    .cotz-cab-btn .cotz-btn { flex: 1; justify-content: center; }
    .cotz-buscar { flex-direction: column; }
    .cotz-tabla:not(#_) td, .cotz-tabla:not(#_) th { padding: 8px 6px; }
    .cotz-tabla .ctab-e5 { display: none; }
    .cotz-tabla:not(#_) th:nth-child(3), .cotz-tabla:not(#_) td:nth-child(3) { display: none; }   /* en celular sin Precio U.: queda Cant. y Total */
    .cotz-acc button { margin: 2px 0 0; }
}

/* ======================= catalogo_cliente.php ======================= */
#catalogo .catalogo-section {
        padding: 10px 0;
    }

    #catalogo .catalogo-header-bar {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-left: 4px solid #dc3545;
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }

    #catalogo .catalogo-info-text {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.88rem;
        color: #475569;
    }

    #catalogo .catalogo-info-text i {
        font-size: 1.1rem;
    }

    #catalogo .catalogo-search-input {
        position: relative;
        min-width: 220px;
        flex: 1;
        max-width: 320px;
    }

    #catalogo .catalogo-search-input input,
    #catalogo #filtroFamiliaCliente {
        width: 100% !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-right: 12px !important;
        padding-left: 42px !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 0.85rem !important;
        background: #f8fafc !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

    #catalogo .catalogo-search-input input:focus,
    #catalogo #filtroFamiliaCliente:focus {
        background: #ffffff !important;
        border-color: #dc3545 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
    }

    #catalogo .catalogo-search-input i {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #94a3b8 !important;
        font-size: 0.85rem !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }

    #catalogo .catalogo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 10px;
    }

    #catalogo .catalogo-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        cursor: pointer;
        user-select: none;
    }

    #catalogo .catalogo-card:hover {
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.12);
        border-color: #dc3545;
        transform: translateY(-2px);
        background: #fffdfd;
    }

    #catalogo .catalogo-card-info {
        flex: 1;
        min-width: 0;
    }

    #catalogo .catalogo-card h4 {
        color: #1e293b;
        margin: 0 0 3px 0;
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
    }

    #catalogo .catalogo-card:hover h4 {
        color: #dc3545;
    }

    #catalogo .catalogo-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.72rem;
        color: #64748b;
        background: #f1f5f9;
        padding: 2px 7px;
        border-radius: 10px;
        font-weight: 600;
    }

    #catalogo .catalogo-card:hover .catalogo-card-badge {
        background: #fee2e2;
        color: #991b1b;
    }

    #catalogo .badge-descargar {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #f1f5f9;
        color: #475569;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    #catalogo .catalogo-card:hover .badge-descargar {
        background: #dc3545;
        color: #ffffff;
        transform: scale(1.05);
    }

    /* Modal catalogo_cliente */
    #catalogo .modal-catalogo {
        display: none;
        position: fixed;
        z-index: 10500;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.55);
        animation: fadeIn 0.3s ease;
        backdrop-filter: blur(2px);
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 20px 0;
    }

    #catalogo .modal-catalogo.is-open {
        display: flex !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    #catalogo .modal-catalogo-content {
        background: white;
        margin: auto;
        padding: 24px;
        border-radius: 12px;
        width: 90%;
        max-width: 400px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        animation: slideIn 0.3s ease;
        border-top: 4px solid #dc3545;
        position: relative;
    }

    @keyframes slideIn {
        from {
            transform: translateY(-40px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    #catalogo .modal-catalogo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #f0f0f0;
    }

    #catalogo .modal-catalogo-header h3 {
        margin: 0;
        color: #dc3545;
        font-size: 1.25rem;
        font-weight: 700;
    }

    #catalogo .close-catalogo {
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: #999;
        transition: all 0.2s ease;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    #catalogo .close-catalogo:hover {
        background: #f5f5f5;
        color: #dc3545;
    }

    #catalogo .modal-opciones {
        background: #f8fafc;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        border: 1px solid #e2e8f0;
    }

    #catalogo .modal-opciones label {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        margin-bottom: 6px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #catalogo .modal-opciones label:last-child {
        margin-bottom: 0;
    }

    #catalogo .modal-opciones label:hover {
        background: white;
        border-left: 3px solid #dc3545;
        padding-left: 8px;
    }

    #catalogo .modal-opciones input[type="radio"],
    #catalogo .modal-opciones input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #dc3545;
        margin-right: 10px;
        flex-shrink: 0;
    }

    #catalogo .modal-opciones label span {
        font-size: 0.88rem;
        color: #475569;
        font-weight: 500;
    }

    #catalogo .modal-botones {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    #catalogo .modal-botones button {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 6px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #catalogo .btn-generar-pdf {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    #catalogo .btn-generar-pdf:hover {
        background: linear-gradient(135deg, #c82333 0%, #b91f2b 100%);
        box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
        transform: translateY(-2px);
    }

    #catalogo .btn-cancelar {
        background: #e9ecef;
        color: #555;
        border: 1px solid #d9dde3;
    }

    #catalogo .btn-cancelar:hover {
        background: #d9dde3;
        color: #333;
    }

    #catalogo .sin-catalogo {
        text-align: center;
        padding: 50px 20px;
        color: #999;
    }

    #catalogo .sin-catalogo i {
        font-size: 3rem;
        margin-bottom: 15px;
        display: block;
        color: #ddd;
    }

    #catalogo .sin-catalogo p {
        font-size: 1rem;
        color: #999;
    }

/* ======================= catalogo.php ======================= */
/* ────────────────────────────────────────────── */
        /* CATÁLOGO - ESTILOS COMPACTOS Y ELEGANTES */
        /* ────────────────────────────────────────────── */
        
        .catalogo-container {
            padding: 25px 15px;
            background: #f8fafc;
            min-height: 65vh;
        }

        .catalogo-header-box {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px 24px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .catalogo-title h1 {
            font-size: 1.35rem;
            color: #0f172a;
            margin: 0 0 4px 0;
            font-weight: 700;
        }

        .catalogo-title p {
            font-size: 0.85rem;
            color: #64748b;
            margin: 0;
        }

        .catalogo-search {
            position: relative;
            min-width: 240px;
            flex: 1;
            max-width: 380px;
        }

        .catalogo-search input {
            width: 100%;
            padding: 9px 14px 9px 36px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            font-size: 0.88rem;
            transition: all 0.2s ease;
            background: #f8fafc;
        }

        .catalogo-search input:focus {
            background: #ffffff;
            border-color: var(--color-primary, #e53935);
            outline: none;
            box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
        }

        .catalogo-search i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 0.9rem;
        }

        /* Grid de familias compacto */
        .familias-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 12px;
            margin-bottom: 30px;
        }

        .familia-card {
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
            text-decoration: none !important;
        }

        .familia-card:hover {
            border-color: var(--color-primary, #e53935);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(229, 57, 53, 0.12);
            background: #fffdfd;
        }

        .familia-info {
            flex: 1;
            min-width: 0;
        }

        .familia-info h3 {
            margin: 0 0 5px 0;
            font-size: 0.88rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .familia-card:hover .familia-info h3 {
            color: var(--color-primary, #e53935);
        }

        .familia-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.73rem;
            color: #64748b;
            background: #f1f5f9;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        .familia-card:hover .familia-badge {
            background: #fee2e2;
            color: #991b1b;
        }

        .btn-descargar-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #f1f5f9;
            color: #475569;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
            font-size: 0.95rem;
        }

        .familia-card:hover .btn-descargar-icon {
            background: var(--color-primary, #e53935);
            color: #ffffff;
            transform: scale(1.05);
        }

        /* Modal para opciones */
        .modal-opciones {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #modalOpciones .modal-content {
            background: white;
            margin: 5% auto;
            padding: 30px;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        #modalOpciones .modal-header {
            border-bottom: 2px solid #e5e7eb;
            margin-bottom: 20px;
            padding-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #modalOpciones .modal-header h2 {
            margin: 0;
            color: #1a1d27;
            font-size: 1.5rem;
        }

        #modalOpciones .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
            transition: color 0.3s ease;
        }

        #modalOpciones .close-modal:hover {
            color: #333;
        }

        .modal-opciones-group {
            margin-bottom: 20px;
        }

        .modal-opciones-group label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.3s ease;
            margin-bottom: 8px;
        }

        .modal-opciones-group label:hover {
            background: #f3f4f6;
        }

        .modal-opciones-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--color-primary);
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }

        .modal-buttons button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .btn-generar {
            background: var(--color-primary);
            color: white;
        }

        .btn-generar:hover {
            background: #1d4ed8;
        }

        .btn-cancelar {
            background: #e5e7eb;
            color: #333;
        }

        .btn-cancelar:hover {
            background: #d1d5db;
        }

        /* Loading */
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--color-primary);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Sin familias */
        .sin-familias {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .sin-familias i {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .catalogo-header h1 {
                font-size: 1.5rem;
            }

            .familias-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 10px;
            }

            #modalOpciones .modal-content {
                width: 95%;
                margin: 20% auto;
                padding: 20px;
            }
        }

        @media (max-width: 480px) {
            .catalogo-container {
                padding: 20px 10px;
            }

            .catalogo-header h1 {
                font-size: 1.3rem;
            }

            .familias-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 8px;
            }
        }

/* ======================= articulos_todos.php ======================= */
/* ── Superposición Z-Index sobre botones flotantes ── */
        .offcanvas.adidas-offcanvas {
            z-index: 100005 !important;
            width: 420px !important;
            max-width: 100vw;
            border-left: none;
            box-shadow: -5px 0 25px rgba(0,0,0,0.15);
        }
        .offcanvas-backdrop {
            z-index: 100000 !important;
        }

        /* ── Estilos Integrados con el Tema de la Tienda ── */
        .adidas-catalog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 0 16px 0;
            border-bottom: 2px solid #f1f5f9;
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 16px;
        }
        .adidas-catalog-title {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: #0f172a;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .adidas-catalog-count {
            font-size: 15px;
            color: var(--color-primary, #6366f1);
            font-weight: 700;
            background: rgba(99, 102, 241, 0.08);
            padding: 2px 10px;
            border-radius: 12px;
        }
        .btn-adidas-filter {
            background: #ffffff;
            color: var(--color-primary, #6366f1) !important;
            border: 2px solid var(--color-primary, #6366f1);
            padding: 9px 20px;
            border-radius: 8px;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
        }
        .btn-adidas-filter:hover {
            background: var(--color-primary, #6366f1);
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
            transform: translateY(-1px);
        }
        
        /* ── Offcanvas Header & Body ── */
        .adidas-offcanvas-header {
            border-bottom: 1px solid #e2e8f0;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f8fafc;
        }
        .adidas-offcanvas-title {
            font-size: 17px;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #0f172a;
            margin: 0;
            text-transform: uppercase;
        }
        .adidas-offcanvas-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .btn-clear-all {
            font-size: 12.5px;
            font-weight: 700;
            color: #64748b;
            text-decoration: none;
            cursor: pointer;
            background: none;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.15s ease;
        }
        .btn-clear-all:hover {
            color: #ef4444;
            background: #fee2e2;
        }
        .adidas-offcanvas-body {
            padding: 20px 24px;
            overflow-y: auto;
        }
        .adidas-offcanvas-footer {
            border-top: 1px solid #e2e8f0;
            padding: 16px 24px;
            background: #ffffff;
            position: sticky;
            bottom: 0;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
        }
        .btn-adidas-apply {
            background: var(--color-primary, #6366f1);
            color: #ffffff !important;
            border: none;
            width: 100%;
            padding: 14px;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            border-radius: 8px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
            cursor: pointer;
        }
        .btn-adidas-apply:hover {
            background: #4f46e5;
            box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
            transform: translateY(-1px);
        }

        /* ── Chips activos ── */
        .active-chips-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
        .adidas-chip {
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.25);
            color: var(--color-primary, #4f46e5);
            font-size: 12px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .adidas-chip .chip-remove {
            cursor: pointer;
            color: #64748b;
            font-size: 13px;
            transition: color 0.15s;
        }
        .adidas-chip .chip-remove:hover {
            color: #ef4444;
        }

        /* ── Accordion Filtros ── */
        .adidas-accordion-item {
            border-bottom: 1px solid #e2e8f0;
            padding: 16px 0;
        }
        .adidas-accordion-item:last-child {
            border-bottom: none;
        }
        .adidas-accordion-header {
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #1e293b;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            padding: 4px 0;
        }
        .adidas-accordion-header i {
            transition: transform 0.2s ease;
        }
        .adidas-accordion-item.collapsed .adidas-accordion-header i {
            transform: rotate(-90deg);
        }
        .adidas-accordion-content {
            margin-top: 14px;
            max-height: 240px;
            overflow-y: auto;
            padding-right: 6px;
            transition: all 0.2s ease;
        }
        .adidas-accordion-item.collapsed .adidas-accordion-content {
            display: none;
        }

        /* ── Custom Inputs Estilo Tema ── */
        .adidas-checkbox-item, .adidas-radio-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 13.5px;
            color: #334155;
            font-weight: 600;
            transition: color 0.15s;
        }
        .adidas-checkbox-item:hover, .adidas-radio-item:hover {
            color: var(--color-primary, #6366f1);
        }
        .adidas-checkbox-item input, .adidas-radio-item input {
            width: 18px;
            height: 18px;
            accent-color: var(--color-primary, #6366f1);
            cursor: pointer;
        }

        .filter-loading-todos {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 300px;
        }
        .filter-loading-todos::after {
            content: '';
            width: 40px; height: 40px;
            border: 4px solid #e2e8f0;
            border-top-color: var(--color-primary, #6366f1);
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

/* ======================= articulos_marcas.php ======================= */
/* ── Sidebar de marcas ─────────────────────────────── */
        .marcas-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            overflow: hidden;
            margin-bottom: 24px;
        }
        .marcas-card-header {
            background: var(--color-primary);
            color: #fff;
            padding: 12px 18px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .marcas-card-header i { font-size: 15px; }
        .marcas-lista { list-style: none; padding: 8px 0; margin: 0; }
        .marcas-lista li { border-bottom: 1px solid var(--gray-100); }
        .marcas-lista li:last-child { border-bottom: none; }

        /* Checkbox oculto + label estilizado */
        .marcas-card .marca-check { display: none; }
        .marcas-card .marca-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            cursor: pointer;
            font-size: 13px;
            color: var(--gray-600);
            font-weight: 500;
            transition: background .15s, color .15s;
            user-select: none;
        }
        .marcas-card .marca-label:hover {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }
        /* Caja del check personalizada */
        .marcas-card .marca-label::before {
            content: '';
            flex-shrink: 0;
            width: 17px;
            height: 17px;
            border: 2px solid var(--gray-200);
            border-radius: 5px;
            background: #fff;
            transition: border-color .15s, background .15s;
        }
        .marcas-card .marca-check:checked + .marca-label {
            color: var(--color-primary);
            font-weight: 600;
            background: var(--color-primary-light);
        }
        .marcas-card .marca-check:checked + .marca-label::before {
            background: var(--color-primary);
            border-color: var(--color-primary);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 10px;
        }
        /* Botón limpiar filtros */
        .marcas-limpiar {
            display: block;
            text-align: center;
            padding: 9px;
            font-size: 12px;
            color: var(--gray-400);
            cursor: pointer;
            border-top: 1px solid var(--gray-100);
            transition: color .15s, background .15s;
            text-decoration: none;
        }
        .marcas-limpiar:hover {
            color: var(--color-primary);
            background: var(--color-primary-light);
        }
        /* Spinner dentro del área de productos */
        .filter-loading {
            display: flex;
            justify-content: center;
            padding: 40px;
        }
        .filter-loading::after {
            content: '';
            width: 32px; height: 32px;
            border: 3px solid var(--gray-200);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

/* ======================= articulo.php ======================= */
.pd_info_card {
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 18px;
        padding: 28px 30px 24px;
        box-shadow: 0 10px 30px rgba(20,20,30,.06);
    }
    .pd_title {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -.2px;
        color: #191919;
        margin-bottom: 2px;
    }
    .pd_price_box.price_box {
        margin: 6px 0 22px;
        padding-bottom: 18px;
        border-bottom: 1px dashed #e5e5e5;
    }
    .product_details .pd_price_box .current_price {
        font-size: 34px;
        font-weight: 800;
        color: var(--pd_accent);
        line-height: 1.1;
    }
    .pd_variant_box { margin: 4px 0 4px; }
    .pd_variant_row { margin-bottom: 18px; }
    .pd_variant_label {
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #9a9a9a;
        margin-bottom: 8px;
    }
    .pd_disponibles {
        display: inline-block;
        color: var(--pd_accent);
        background: color-mix(in srgb, var(--pd_accent) 12%, #fff);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 12.5px;
        font-weight: 700;
        margin: 2px 0 20px;
    }
    .pd_chip_group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .pd_chip {
        min-width: 46px;
        height: 42px;
        padding: 0 18px;
        border: 1.5px solid #e4e4e4;
        border-radius: 10px;
        background: #fafafa;
        color: #333;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all .15s ease;
    }
    .pd_chip:hover {
        border-color: var(--pd_accent);
        transform: translateY(-1px);
    }
    .pd_chip.active {
        border-color: var(--pd_accent);
        color: #fff;
        background: var(--pd_accent);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--pd_accent) 35%, transparent);
    }
    .pd_meta_row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid #f0f0f0;
    }
    .pd_meta_pill {
        display: inline-block;
        background: #f5f6f8;
        color: #555;
        border-radius: 20px;
        padding: 6px 16px;
        font-size: 12.5px;
    }
    .pd_meta_pill b { color: #191919; }
    .pd_meta_pill_link {
        background: color-mix(in srgb, var(--pd_accent) 12%, #fff);
        color: var(--pd_accent);
        font-weight: 700;
        text-decoration: none;
    }
    .pd_meta_pill_link:hover {
        background: color-mix(in srgb, var(--pd_accent) 22%, #fff);
        color: var(--pd_accent);
    }
    .product_details .action_links ul button.add_to_cart,
    .product_details .action_links ul button.add_to_cart {
        width: auto !important;
        height: 48px !important;
        padding: 0 28px !important;
        white-space: nowrap;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: var(--pd_accent) !important;
        border: none !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .3px;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--pd_accent) 30%, transparent);
        transition: transform .15s ease;
    }
    .product_details .action_links ul button.add_to_cart:hover,
    .product_details .action_links ul button.add_to_cart:hover {
        transform: translateY(-1px);
    }

/* ======================= articulos_categoria.php ======================= */
/* ── Sidebar de marcas ─────────────────────────────── */
        .marcas-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            overflow: hidden;
            margin-bottom: 24px;
        }
        .marcas-card-header {
            background: var(--color-primary);
            color: #fff;
            padding: 12px 18px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .marcas-card-header i { font-size: 15px; }
        .marcas-lista { list-style: none; padding: 8px 0; margin: 0; }
        .marcas-lista li { border-bottom: 1px solid var(--gray-100); }
        .marcas-lista li:last-child { border-bottom: none; }

        .marcas-card .marca-check { display: none; }
        .marcas-card .marca-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            cursor: pointer;
            font-size: 13px;
            color: var(--gray-600);
            font-weight: 500;
            transition: background .15s, color .15s;
            user-select: none;
        }
        .marcas-card .marca-label:hover {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }
        .marcas-card .marca-label::before {
            content: '';
            flex-shrink: 0;
            width: 17px;
            height: 17px;
            border: 2px solid var(--gray-200);
            border-radius: 5px;
            background: #fff;
            transition: border-color .15s, background .15s;
        }
        .marcas-card .marca-check:checked + .marca-label {
            color: var(--color-primary);
            font-weight: 600;
            background: var(--color-primary-light);
        }
        .marcas-card .marca-check:checked + .marca-label::before {
            background: var(--color-primary);
            border-color: var(--color-primary);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 10px;
        }
        .marcas-limpiar {
            display: block;
            text-align: center;
            padding: 9px;
            font-size: 12px;
            color: var(--gray-400);
            cursor: pointer;
            border-top: 1px solid var(--gray-100);
            transition: color .15s, background .15s;
            text-decoration: none;
        }
        .marcas-limpiar:hover {
            color: var(--color-primary);
            background: var(--color-primary-light);
        }
        .filter-loading {
            display: flex;
            justify-content: center;
            padding: 40px;
        }
        .filter-loading::after {
            content: '';
            width: 32px; height: 32px;
            border: 3px solid var(--gray-200);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

#modal_box_sesion .modal-dialog { max-width: 440px !important; min-width: 0 !important; width: auto !important; margin: 1.75rem auto !important; }   /* el tema pone min-width:1100px a .modal-dialog-centered (es para la ficha de producto) */
#modal_box_sesion .modal-content { border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); overflow: hidden; }
#modal_box_sesion .ms-x { position: absolute; right: 12px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #9aa1ab; font-size: 18px; z-index: 2; }
#modal_box_sesion .ms-x:hover { background: #f1f2f4; color: #374151; }
#modal_box_sesion .ms-cab { padding: 22px 24px 4px; text-align: center; }
#modal_box_sesion .ms-cab .ic { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 12%, #fff); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 8px; }
#modal_box_sesion .ms-cab h3 { font-size: 20px; font-weight: 800; color: #111827; margin: 0; }
#modal_box_sesion .ms-cab p { font-size: 13px; color: #6b7280; margin: 4px 0 0; }
#modal_box_sesion .ms-tabs { display: flex; background: #f1f2f4; border-radius: 9px; padding: 3px; margin: 14px 24px 0; }
#modal_box_sesion .ms-tabs button { flex: 1; border: 0; background: none; padding: 7px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: #6b7280; }
#modal_box_sesion .ms-tabs button.on { background: #fff; color: var(--color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#modal_box_sesion .ms-cu { padding: 16px 24px 22px; }
#modal_box_sesion .ms-lb { display: block; font-size: 12.5px; font-weight: 600; color: #4b5563; margin: 0 0 4px; }
#modal_box_sesion .ms-lb small { font-weight: 400; color: #9aa1ab; }
#modal_box_sesion .ms-cp { position: relative; margin-bottom: 12px; }
#modal_box_sesion .ms-cp > i.l { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa1ab; font-size: 14px; pointer-events: none; }
#modal_box_sesion .ms-cp input, #modal_box_sesion .ms-cp select { width: 100% !important; border: 1px solid #d5d9df !important; border-radius: 8px !important; padding: 9px 12px 9px 36px !important; font-size: 14px !important; color: #111827 !important; background: #fff !important; height: auto !important; box-shadow: none !important; margin: 0 !important; }   /* !important: el tema de la tienda pone sus propios input con !important */
#modal_box_sesion .ms-cp select { padding-left: 12px !important; color: #374151 !important; }
#modal_box_sesion .ms-cp input:focus, #modal_box_sesion .ms-cp select:focus { outline: 0 !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, #fff) !important; background: #fff !important; color: #111827 !important; }
#modal_box_sesion .ms-cp input.con-ojo { padding-right: 40px !important; }
#modal_box_sesion .ms-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #6b7280; width: 32px; height: 32px; border-radius: 6px; }
#modal_box_sesion .ms-ojo:hover { background: #f1f2f4; }
#modal_box_sesion .ms-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
#modal_box_sesion .ms-btn { width: 100%; border: 0; border-radius: 8px; background: var(--color-primary); color: var(--color-primary-contrast, #fff); font-weight: 700; padding: 11px; font-size: 15px; margin-top: 4px; }
#modal_box_sesion .ms-btn:hover { filter: brightness(.95); }
#modal_box_sesion .ms-btn:disabled { opacity: .6; }
#modal_box_sesion .ms-lk { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 12px; }
#modal_box_sesion .ms-lk.centro { justify-content: center; }
#modal_box_sesion .ms-lk a { color: #6b7280; text-decoration: none; }
#modal_box_sesion .ms-lk a:hover { text-decoration: underline; }
#modal_box_sesion .ms-lk a b { color: var(--color-primary); }
#modal_box_sesion .ms-cap { display: flex; justify-content: center; margin: 2px 0 12px; min-height: 0; }
#modal_box_sesion .ms-opc { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 1px dashed #d5d9df; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #6b7280; background: #fff; margin-bottom: 12px; text-align: left; }
#modal_box_sesion .ms-opc i.fa-chevron-down { transition: transform .2s; }
#modal_box_sesion .ms-opc.abierto i.fa-chevron-down { transform: rotate(180deg); }
#modal_box_sesion .ms-rq { font-size: 11.5px; color: #9aa1ab; margin: -6px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
#modal_box_sesion .ms-rq span i { margin-right: 3px; }
#modal_box_sesion .ms-rq span.ok { color: #1e7e34; }
#modal_box_sesion .ms-nota { font-size: 12px; color: #6b7280; background: #f8f9fb; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
#modal_box_sesion .alert { font-size: 13px; padding: 8px 12px; margin: 0 0 10px; }
@media (max-width: 359px) { #modal_box_sesion .ms-g2 { grid-template-columns: 1fr; } }   /* en celulares muy angostos, un campo por renglón */

/* ===== modales/info_habi.php ===== */
.box-info {

    height: 65px;

    padding: .5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #fff;

    border: 1px solid #dee2e6;

    border-radius: .375rem;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);

    text-align: center;

    line-height: 1.1;

}

@media (max-width: 768px) {

    .box-info {

        height: 55px;

        padding: .4rem .6rem;

    }

}

#modal_box_sesion .modal-content { padding: 0; }
#modal_box_sesion .ms-cp input[type=date] { padding-left: 36px !important; }


/* ============================================================================
 * ESTILOS QUE ESTABAN ESCRITOS EN EL HTML (style="...")
 * Cada archivo tiene su prefijo (index.php -> .idx-e1, .idx-e2...). Mismos valores de antes; se movieron aquí
 * para cambiar el diseño en un solo lugar. Los style= que llevan PHP adentro o que escribe PHP (colores, anchos o
 * "display:none" con condición) siguen en el HTML.
 * El :not(#_) solo sube la prioridad de la regla (como si siguiera escrita en el HTML) para que no la tape una regla
 * del tema; un estilo que ponga el JavaScript (mostrar/ocultar, anchos) sigue mandando igual que antes.
 * ============================================================================ */
/* articulo.php */
.det-e1:not(#_) { background:#fff; border-radius:16px; border:1px solid #fee2e2; box-shadow:0 10px 30px rgba(0,0,0,0.06); max-width:750px; margin:0 auto; overflow:hidden; }
.det-e2:not(#_) { background:linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%); padding:45px 30px; text-align:center; border-bottom:1px solid #fecdd3; }
.det-e3:not(#_) { width:72px; height:72px; background:var(--color-primary, #e8092e); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:20px; box-shadow:0 8px 22px rgba(232,9,46,0.28); }
.det-e4:not(#_) { font-weight:800; color:#9f1239; margin-bottom:12px; font-size:22px; line-height:1.3; }
.det-e5:not(#_) { color:#be123c; font-size:15px; max-width:560px; margin:0 auto 26px; line-height:1.6; font-weight:500; }
.det-e6:not(#_) { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.det-e7:not(#_) { background:var(--color-primary, #e8092e); color:#fff; font-weight:700; border-radius:10px; padding:11px 26px; text-transform:none; box-shadow:0 4px 14px rgba(232,9,46,0.3); }
.det-e8:not(#_) { margin-right:6px; }
.det-e9:not(#_) { font-weight:600; border-radius:10px; padding:11px 26px; text-transform:none; background:#fff; }
.det-e10:not(#_) { position:relative; width:100%; height:440px; overflow:hidden; border-radius:16px; background:#f8fafc; border:1px solid #e2e8f0; cursor:zoom-in; display:flex; align-items:center; justify-content:center; padding:12px; }
.det-e11:not(#_) { position:absolute; inset:0; z-index:5; cursor:zoom-in; }
.det-e12:not(#_) { width:100%; height:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.det-e13:not(#_) { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; pointer-events:none; transition:transform 0.1s ease-out; transform-origin:center center; }
.det-e14:not(#_) { position:absolute; bottom:14px; right:14px; background:rgba(15,23,42,0.75); color:#fff; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(6px); cursor:pointer; display:flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:10; pointer-events:none; }
.det-e15:not(#_) { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.det-e16:not(#_) { display:none; }
.det-e17:not(#_) { display:inline-flex; align-items:center; border:1.5px solid #e4e4e4; border-radius:10px; overflow:hidden; height:44px; }
.det-e18:not(#_) { width:38px; height:44px; border:none; background:#fafafa; font-size:18px; cursor:pointer; line-height:1; }
.det-e19:not(#_) { width:50px; height:44px; text-align:center; border:none; border-left:1.5px solid #e4e4e4; border-right:1.5px solid #e4e4e4; font-size:15px; font-weight:700; }
.det-e20:not(#_) { height:48px; padding:0 28px; background:var(--pd_accent); color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; letter-spacing:.3px; cursor:pointer; text-transform:uppercase; box-shadow:0 6px 16px color-mix(in srgb, var(--pd_accent) 30%, transparent); }
.det-e21:not(#_) { z-index: 100010; }
.det-e22:not(#_) { background:rgba(15,23,42,0.95); border:none; border-radius:18px; overflow:hidden; backdrop-filter:blur(10px); }
.det-e23:not(#_) { justify-content:flex-end; }
.det-e24:not(#_) { font-size:18px; opacity:0.9; filter:invert(1); }
.det-e25:not(#_) { min-height:75vh; }
.det-e26:not(#_) { max-width:100%; max-height:80vh; object-fit:contain; border-radius:12px; box-shadow:0 25px 60px rgba(0,0,0,0.5); }
/* articulos_todos.php */
.todos-e1:not(#_) { font-size:15px; }
.todos-e2:not(#_) { border-radius:16px; overflow:hidden; }
/* catalogo.php */
.cat-e1:not(#_) { position:absolute !important; left:14px !important; top:50% !important; transform:translateY(-50%) !important; color:#94a3b8 !important; font-size:0.9rem !important; z-index:5 !important; pointer-events:none !important; }
.cat-e2:not(#_) { padding-left:42px !important; width:100% !important; box-sizing:border-box !important; }
.cat-e3:not(#_) { display:none; }
.cat-e4:not(#_) { display: block; }
.cat-e5:not(#_) { width:100%; }
/* catalogo_cliente.php */
.catc-e1:not(#_) { position:absolute !important; left:14px !important; top:50% !important; transform:translateY(-50%) !important; color:#94a3b8 !important; font-size:0.85rem !important; z-index:5 !important; pointer-events:none !important; }
.catc-e2:not(#_) { padding-left:42px !important; width:100% !important; box-sizing:border-box !important; }
.catc-e3:not(#_) { display:none; }
.catc-e4:not(#_) { width:100%; }
/* contacto.php */
.con-e1:not(#_) { border:0; }
.con-e2:not(#_) { font-size:13px; font-weight:700; color:#334155; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.con-e3:not(#_) { background:color-mix(in srgb, var(--color-primary, #e8092e) 10%, #fff); color:var(--color-primary, #e8092e); border-radius:6px; padding:2px 8px; font-size:11px; }
/* cotizador_clientes.php */
.cotc-e1:not(#_) { padding-top:30px; padding-bottom:40px; }
.cotc-e2:not(#_) { max-width:300px; }
/* cotizador_nuevo.php */
.cotn-e1:not(#_) { padding-top:30px; padding-bottom:40px; }
.cotn-e2:not(#_) { max-width:480px; margin:40px auto; }
.cotn-e3:not(#_) { font-size:48px; color:#28a745; }
.cotn-e7:not(#_) { position:relative; flex:1; }
.cotn-e8:not(#_) { padding-left:32px; height:38px; }
.cotn-e9:not(#_) { display:none; position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:9999; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.13); max-height:440px; overflow-y:auto; }
.cotn-e12:not(#_) { border-radius:12px; border:none; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.cotn-e13:not(#_) { background:#f8fafc; border-bottom:1px solid #e2e8f0; border-top-left-radius:12px; border-top-right-radius:12px; }
.cotn-e14:not(#_) { font-size:15px; font-weight:700; color:#1e293b; }
.cotn-e15:not(#_) { color:var(--color-primary, #e8092e); margin-right:6px; }
.cotn-e16:not(#_) { padding:20px; }
.cotn-e17:not(#_) { font-size:12px; font-weight:600; color:#475569; }
.cotn-e18:not(#_) { background:var(--color-primary, #e8092e); color:#fff; border:none; padding:6px 18px; font-weight:600; }
/* include/footer.php */
.pie-e1:not(#_) { display:none; }
.pie-e2:not(#_) { display:inline-block; }
.pie-e3:not(#_) { font-size:12.5px; color:#94a3b8; margin-top:8px; line-height:1.5; }
/* index.php */
.idx-e1:not(#_) { background:#fff; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 4px 15px rgba(0,0,0,.04); overflow:hidden; position:relative; }
.idx-e2:not(#_) { background:#f8fafc; padding:12px 16px; border-bottom:1px solid #e2e8f0; border-radius:12px 12px 0 0; }
.idx-e3:not(#_) { color:#334155 !important; font-size:13px; font-weight:700; margin:0; letter-spacing:0.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }
.idx-e4:not(#_) { color:#334155 !important; }
.idx-e5:not(#_) { color:var(--color-primary, #e8092e); }
.idx-e6:not(#_) { position:static !important; display:block !important; width:100% !important; box-shadow:none !important; padding:0 !important; background:#fff !important; }
.idx-e7:not(#_) { max-height: 420px; overflow-y: auto; margin:0; padding:0; list-style:none; }
.idx-e8:not(#_) { border-bottom: 1px solid #f3f4f6; }
.idx-e9:not(#_) { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; color:#374151; text-decoration:none; font-size:13.5px; font-weight:500; transition:all .2s; }
.idx-e10:not(#_) { color:var(--color-primary, #e8092e); width:18px; text-align:center; }
.idx-e11:not(#_) { color:#9ca3af; font-size:12px; }
.idx-e12:not(#_) { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; color:#6b7280; text-decoration:none; font-size:13px; font-weight:600; }
.idx-e13:not(#_) { border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.08); position:relative; }
.idx-e14:not(#_) { height:320px; width:100%; object-fit:cover; display:block; }
.idx-e15:not(#_) { width:100%; height:130px; object-fit:cover; border-radius:10px; }
.idx-e16:not(#_) { background:#fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:22px 0; }
.idx-e17:not(#_) { padding:4px 0; }
.idx-e18:not(#_) { font-size:28px; color:var(--color-primary, #e8092e); min-width:32px; }
.idx-e19:not(#_) { display:block; font-size:13.5px; font-weight:700; color:#1a1d27; line-height:1.2; }
.idx-e20:not(#_) { font-size:11.5px; color:#6b7280; }
.idx-e21:not(#_) { font-size:22px; font-weight:800; color:#1a1d27; margin:0; }
.idx-e22:not(#_) { color:#6b7280; font-size:13px; text-decoration:none; font-weight:600; }
.idx-e23:not(#_) { display:block; text-decoration:none; background:#fff; border-radius:12px; border:1px solid #e5e7eb; overflow:hidden; transition:transform .25s, box-shadow .25s; height:100%; }
.idx-e24:not(#_) { aspect-ratio:1/1; background:#f9fafb; display:flex; align-items:center; justify-content:center; padding:16px; }
.idx-e25:not(#_) { max-height:100px; max-width:100%; object-fit:contain; }
.idx-e26:not(#_) { aspect-ratio:1/1; background:color-mix(in srgb, var(--color-primary, #e8092e) 9%, #fff); display:flex; align-items:center; justify-content:center; padding:16px; }
.idx-e27:not(#_) { font-size:40px; color:var(--color-primary, #e8092e); }
.idx-e28:not(#_) { padding:10px 8px; text-align:center; font-size:12.5px; font-weight:700; color:#1a1d27; border-top:1px solid #f3f4f6; }
.idx-e29:not(#_) { display:block; font-weight:500; color:#6b7280; font-size:11px; }
.idx-e30:not(#_) { font-size:12px; }
.idx-e31:not(#_) { color:#6b7280; font-size:13px; text-decoration:none; font-weight:600; margin-left:8px; }
.idx-e32:not(#_) { display:none; }
/* mi_cuenta.php */
.mic-e1:not(#_) { margin-bottom:15px; display:flex; gap:8px; }
.mic-e2:not(#_) { background:var(--color-primary); color:#fff; border:none; }
.mic-e3:not(#_) { background:transparent; color:var(--color-primary); border:1px solid var(--color-primary); }
/* php_cotizador/buscador_articulos.php */
.cba-e1:not(#_) { font-size:13px; width:100%; }
.cba-e2:not(#_) { width:90px; }
.cba-e3:not(#_) { width:60px; }
.cba-e4:not(#_) { width:65px; }
.cba-e5:not(#_) { width:55px; }
.cba-e6:not(#_) { width:40px; }
.cba-e7:not(#_) { width:50px; height:50px; object-fit:cover; border-radius:5px; }
.cba-e8:not(#_) { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.cba-e9:not(#_) { font-weight:400; color:#999; }
.cba-e10:not(#_) { display:flex; gap:2px; flex-wrap:wrap; }
.cba-e11:not(#_) { color:#ccc; font-size:11px; }
.cba-e12:not(#_) { color:#666; }
.cba-e13:not(#_) { color:#e53935; }
.cba-e14:not(#_) { color:#ccc; }
.cba-e15:not(#_) { color:#888; }
.cba-e16:not(#_) { font-size:20px; color:var(--color-primary); }
.cba-e17:not(#_) { font-size:20px; color:#ccc; }
/* php_cotizador/buscador_articulos_live.php */
.cbl-e1:not(#_) { display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid #f0f0f0; align-items:flex-start; background:#fff; transition:background .15s; cursor:pointer; user-select:none; }
.cbl-e2:not(#_) { width:64px; height:64px; object-fit:cover; border-radius:6px; flex-shrink:0; margin-top:2px; }
.cbl-e3:not(#_) { flex:1; min-width:0; }
.cbl-e4:not(#_) { font-weight:600; font-size:13px; line-height:1.4; margin-bottom:1px; }
.cbl-e5:not(#_) { color:#999; font-size:11px; margin-bottom:7px; }
.cbl-e6:not(#_) { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.cbl-e7:not(#_) { font-weight:700; color:#444; }
.cbl-e8:not(#_) { color:#bbb; font-size:11px; }
.cbl-e9:not(#_) { text-align:right; flex-shrink:0; padding-top:2px; }
.cbl-e10:not(#_) { font-size:11px; color:#bbb; line-height:1.7; }
.cbl-e11:not(#_) { font-size:14px; font-weight:800; color:#e53935; margin-bottom:8px; white-space:nowrap; }
.cbl-e12:not(#_) { background:var(--color-primary); color:#fff; font-size:11px; padding:3px 12px; border:none; border-radius:5px; white-space:nowrap; }
/* php_cotizador/buscar_clientes.php */
.cbc-e1:not(#_) { padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.cbc-e2:not(#_) { font-size:13px; font-weight:600; line-height:1.4; }
.cbc-e3:not(#_) { font-size:11px; color:#888; }
/* php_cotizador/cliente_elegido.php */
.csel-e1:not(#_) { display:none; position:absolute; z-index:9999; width:100%; background:#fff; border:1px solid #dee2e6; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; top:100%; left:0; }
/* php_cotizador/tabla_lineas.php */
.ctab-e4:not(#_) { display:flex; align-items:flex-start; gap:10px; }
.ctab-e5:not(#_) { width:40px; height:40px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.ctab-e6:not(#_) { flex:1; min-width:0; }
.ctab-e7:not(#_) { font-size:12.5px; font-weight:600; line-height:1.35; color:#1e293b; }
.ctab-e8:not(#_) { margin-top:3px; font-size:11px; color:#64748b; }
/* php_cotizador/tabla_clientes.php */
.ctcl-e1:not(#_) { padding:2px 6px; }
/* php_cuenta/mis_datos.php */
.cta-e1:not(#_) { margin-top:8px; }
.cta-e2:not(#_) { padding-top:16px; }
.cta-e3:not(#_) { row-gap:10px; }
.cta-e4:not(#_) { row-gap:12px; }
.cta-e5:not(#_) { background:var(--color-primary,#333); color:#fff; width:auto; padding:10px 26px; border-radius:8px; font-weight:700; }
.cta-e6:not(#_) { position:relative; }
.cta-e7:not(#_) { position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; }
.cta-e8:not(#_) { max-height:80px; max-width:100%; display:block; margin-bottom:6px; }
/* php_cuenta/modal_forzar_clave.php */
.mfc-e1:not(#_) { padding:30px 24px; }
.mfc-e2:not(#_) { text-align:center; margin-bottom:6px; }
.mfc-e3:not(#_) { text-align:center; color:#777; margin-bottom:18px; font-size:13px; }
.mfc-e4:not(#_) { font-size:13px; font-weight:600; }
.mfc-e5:not(#_) { position:relative; }
.mfc-e6:not(#_) { margin-top:6px; }
/* php_cuenta/tabla_cxc.php */
.tcxc-e1:not(#_) { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.tcxc-e2:not(#_) { margin:0; }
.tcxc-e3:not(#_) { font-size:13px; color:#555; }
.tcxc-e4:not(#_) { color:#c0392b; font-size:28px; }
/* php_cuenta/tabla_pedidos.php */
.tped-e1:not(#_) { max-width:540px; margin:1.75rem auto; }
.tped-e2:not(#_) { border-radius:16px; border:none; box-shadow:0 20px 50px rgba(0,0,0,0.25); overflow:hidden; }
.tped-e3:not(#_) { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:14px 20px; position:relative; }
.tped-e4:not(#_) { font-weight:700; color:#1e293b; margin:0; font-size:16px; display:flex; align-items:center; gap:8px; }
.tped-e5:not(#_) { color:var(--color-primary, #7c3aed); }
.tped-e6:not(#_) { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#f1f5f9; border:none; color:#475569; font-size:22px; font-weight:bold; line-height:1; display:flex; align-items:center; justify-content:space-between; justify-content:center; cursor:pointer; padding:0; transition:all .2s; outline:none; }
.tped-e7:not(#_) { padding:20px; }
/* php_menu/cabecera.php */
.bus-e1:not(#_) { background: #0b1728; border-bottom: 1px solid rgba(255,255,255,.08); padding: 7px 0; color: #cbd5e1; font-size: 12px; }
.bus-e2:not(#_) { color:var(--color-primary); }
.bus-e3:not(#_) { color:#fbbf24; font-weight:700; font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:5px; background:rgba(251,191,36,0.15); padding:3px 12px; border-radius:15px; border:1px solid rgba(251,191,36,0.3); transition:all .2s; }
.bus-e4:not(#_) { font-size:12px; }
.bus-e5:not(#_) { margin:0; display:inline-block; }
.bus-e6:not(#_) { margin:0; font-weight:600; color:#cbd5e1; }
.bus-e7:not(#_) { border:1px solid rgba(255,255,255,0.25); border-radius:4px; padding:2px 6px; font-size:11.5px; background:#1e293b; color:#ffffff; cursor:pointer; font-weight:600; }
.bus-e8:not(#_) { background:#ffffff; color:#1e293b; font-weight:600; padding:4px; }
.bus-e11:not(#_) { font-size:11.5px; }
.bus-e12:not(#_) { color:#fff; }
.bus-e13:not(#_) { background:#fff; border-bottom:1px solid #e5e7eb; position:relative; }
.bus-e14:not(#_) { text-decoration:none; display:inline-block; }
.bus-e15:not(#_) { max-height:40px; width:auto; display:block; }
.bus-e16:not(#_) { display:none; font-size:24px; font-weight:800; color:var(--color-primary); letter-spacing:-0.5px; }
.bus-e17:not(#_) { display:block; font-size:22px; font-weight:800; color:var(--color-primary); letter-spacing:-0.5px; line-height:1.1; }
.bus-e18:not(#_) { gap:14px; }
.bus-e19:not(#_) { color:#0f172a; }
.bus-e20:not(#_) { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid var(--color-primary, #ff5000); box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.bus-e21:not(#_) { line-height:1.2; }
.bus-e22:not(#_) { font-size:12px; font-weight:700; }
.bus-e23:not(#_) { font-size:11px; color:#64748b; }
.bus-e24:not(#_) { z-index:10000; border-radius:12px; min-width:220px; padding:6px 0; border:1px solid #e5e7eb; }
/* menú de Mi cuenta (php_menu/cabecera.php, opción B): lista simple con íconos grises; Cerrar sesión en rojo */
.bus-e24:not(#_) .dropdown-item { font-size:14px; font-weight:600; color:#1e293b; padding-left:16px; padding-right:16px; }
.bus-e24:not(#_) .dropdown-item i { width:18px; text-align:center; color:#64748b; }
.bus-e24:not(#_) .dropdown-item:hover { background:#f1f5f9; }
.bus-e24:not(#_) .dropdown-item.text-danger, .bus-e24:not(#_) .dropdown-item.text-danger i { color:#dc2626 !important; }
.bus-e24:not(#_) .dropdown-divider { margin:4px 0; border-color:#f1f5f9; }
.bus-e25:not(#_) { display:flex; align-items:center; gap:8px; text-decoration:none; color:#0f172a; }
.bus-e26:not(#_) { font-size:22px; color:#475569; }
.bus-e27:not(#_) { position:relative; }
.bus-e28:not(#_) { position:relative; display:inline-block; }
.bus-e29:not(#_) { font-size:23px; color:#0f172a; }
.bus-e30:not(#_) { position:absolute; top:-8px; right:-8px; background:var(--color-primary); color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.bus-e31:not(#_) { font-size:11px; color:#64748b; white-space:nowrap; }
.bus-e32:not(#_) { right:0; left:auto; }
.bus-e33:not(#_) { background:transparent; cursor:pointer; padding:0; border:none; color:#0f172a; font-size:24px; display:flex; align-items:center; justify-content:center; }
.bus-e34:not(#_) { position:relative; max-width:580px; margin:0 auto; display:block !important; width:100%; }
.bus-e35:not(#_) { display:flex; border:2px solid #e2e8f0; border-radius:8px; overflow:hidden; background:#fff; }
.bus-e36:not(#_) { flex:1; border:none !important; height:40px; padding:0 14px; font-size:13.5px; outline:none !important; background:transparent; }
.bus-e37:not(#_) { background:var(--color-primary); color:#fff; border:none; width:44px; height:40px; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.bus-e38:not(#_) { position:absolute; z-index:9999; width:100%; top:100%; left:0; padding:0; margin:4px 0 0; display:none; background:#fff; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.15); border:1px solid #e2e8f0; max-height:350px; overflow-y:auto; }
/* php_menu/menu_celular.php */
.mizq-e1:not(#_) { font-size:12px; color:#64748b; margin:0; }
.mizq-e2:not(#_) { color:#1e293b; }
.mizq-e3:not(#_) { background:#f1f5f9; font-size:13px; }
.mizq-e4:not(#_) { width:24px; height:24px; border-radius:50%; object-fit:cover; border:1px solid var(--color-primary, #ff5000); }
.mizq-e5:not(#_) { color:#0f172a; max-width:160px; }
.mizq-e6:not(#_) { font-size:12px; }
.mizq-e7:not(#_) { background:var(--color-primary, #e8092e); color:#fff; font-size:13px; padding:9px 12px; border-radius:8px; }
.mizq-e8:not(#_) { gap:24px; }
.mizq-e9:not(#_) { color:#1e293b; font-size:13px; font-weight:600; position:relative; }
.mizq-e10:not(#_) { position:relative; width:36px; height:36px; background:#f1f5f9; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mizq-e11:not(#_) { font-size:16px; color:#e8092e; }
.mizq-e12:not(#_) { position:absolute; top:-4px; right:-4px; background:#e8092e; color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.mizq-e13:not(#_) { font-size:16px; color:#1e293b; }
.mizq-e14:not(#_) { position:absolute; top:-4px; right:-4px; background:var(--color-primary, #e8092e); color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.mizq-e15:not(#_) { list-style:none; padding:0; margin:0; }
.mizq-e16:not(#_) { border-bottom:1px solid #f1f5f9; }
.mizq-e17:not(#_) { display:block; padding:11px 0; font-size:14px; font-weight:600; color:#0f172a; text-decoration:none; }
/* php_menu/menu_principal.php */
.mpri-e1:not(#_) { background:#0b1728 !important; border-bottom:1px solid rgba(255,255,255,.06); }
.mpri-e2:not(#_) { gap:24px; }
.mpri-e3:not(#_) { flex:1; }
.mpri-e4:not(#_) { list-style:none; gap:22px; }
.mpri-e5:not(#_) { color:var(--color-primary, #e8092e); font-weight:700; font-size:13.5px; text-decoration:none; }
.mpri-e6:not(#_) { color:#e2e8f0; font-weight:600; font-size:13.5px; text-decoration:none; transition:color .2s; }
.mpri-e7:not(#_) { color:#e2e8f0; font-weight:600; font-size:13.5px; text-decoration:none; }
/* php_menu/modal_sesion.php */
.msi-e1:not(#_) { display: none; }
.msi-e2:not(#_) { padding-top: 18px; }
/* php_tienda/precio_articulo.php */
.fpre-e1:not(#_) { color:gray; font-size:1em; text-decoration:line-through; }
.fpre-e2:not(#_) { color:red; width:40px; height:auto; font-size:15px; text-align:center; }
/* php_tienda/precio_carrito.php */
.fprc-e1:not(#_) { color:gray; font-size:1em; text-decoration:line-through; }
.fprc-e2:not(#_) { color:red; font-size:13px; }
/* php_tienda/tarjeta_articulo.php */
.tarj-e1:not(#_) { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; height:100%; transition:all .25s ease; }
.tarj-e2:not(#_) { position:absolute; top:10px; left:10px; z-index:5; display:flex; flex-direction:column; gap:4px; }
.tarj-e3:not(#_) { background:var(--color-primary, #ff5000); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:0.5px; }
.tarj-e4:not(#_) { background:#0b1728; color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:0.5px; }
.tarj-e5:not(#_) { aspect-ratio:1/1; background:#ffffff; display:flex; align-items:center; justify-content:center; padding:10px; position:relative; overflow:hidden; }
.tarj-e6:not(#_) { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.tarj-e7:not(#_) { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.tarj-e8:not(#_) { width:100%; height:100%; max-height:100%; object-fit:contain; transition:transform .3s ease; }
.tarj-e9:not(#_) { padding:14px; display:flex; flex-direction:column; flex:1; justify-content:space-between; }
.tarj-e10:not(#_) { margin-bottom:6px; }
.tarj-e11:not(#_) { font-size:13.5px; font-weight:600; line-height:1.4; margin:0; height:38px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.tarj-e12:not(#_) { color:#0f172a; text-decoration:none; }
.tarj-e13:not(#_) { color:#f59e0b; font-size:11px; margin-bottom:8px; display:flex; align-items:center; gap:3px; }
.tarj-e14:not(#_) { color:#94a3b8; font-size:11px; margin-left:4px; }
.tarj-e15:not(#_) { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tarj-e16:not(#_) { font-size:16px; font-weight:800; color:#0f172a; }
.tarj-e17:not(#_) { color:#ef4444; }
.tarj-e18:not(#_) { color:#94a3b8; }
.tarj-e19:not(#_) { width:100%; background:var(--color-primary); color:var(--color-primary-contrast, #fff); border:none; padding:10px 14px; border-radius:8px; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:all .2s ease; box-shadow:0 3px 10px rgba(0,0,0,0.12); }
/* php_tienda/modal_carrito.php */
.mcar-e1:not(#_) { text-align: left; color: #000000; }
/* php_cuenta/modal_estado_pedido.php */
.mde-e1:not(#_) { font-size:11px; letter-spacing:1px; }
.mde-e2:not(#_) { color:#0f172a; font-size:22px; }
.mde-e3:not(#_) { font-size:12px; }
.mde-e4:not(#_) { border-radius:30px; font-weight:600; }
.mde-e5:not(#_) { background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; }
.mde-e6:not(#_) { max-width:100%; height:auto; max-height:180px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.06)); }
/* php_tienda/vista_rapida.php */
.mdet-e1:not(#_) { width:60px; height:60px; background:#fff7ed; color:#f97316; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:15px; border:1px solid #ffedd5; }
.mdet-e2:not(#_) { font-weight:700; color:#1e293b; margin-bottom:10px; font-size:18px; }
.mdet-e3:not(#_) { color:#64748b; font-size:14px; margin-bottom:20px; line-height:1.5; }
.mdet-e4:not(#_) { background:var(--color-primary, #e8092e); color:#fff; font-weight:700; border-radius:8px; padding:8px 20px; }
.mdet-e5:not(#_) { margin-right:6px; }
.mdet-e6:not(#_) { display:flex; align-items:center; gap:10px; margin-top:12px; }
.mdet-e7:not(#_) { display:none; }
.mdet-e8:not(#_) { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mdet-e9:not(#_) { height:42px !important; margin:0 !important; }
/* php_tienda/tabla_carrito.php */
.tcar-e1:not(#_) { color:#ef4444; }
.tcar-e2:not(#_) { text-decoration:none; display:block; text-align:center; padding:15px; }
/* php_tienda/tabla_resultados_todos.php */
.trt-e1:not(#_) { display:none; }
.trt-e2:not(#_) { font-size:48px; color:#cbd5e1; margin-bottom:12px; }
.trt-e3:not(#_) { font-weight:700; color:#1e293b; }
.trt-e4:not(#_) { color:#64748b; font-size:14px; }
.trt-e5:not(#_) { border-radius:6px; font-weight:700; padding:6px 12px; color:#334155; border-color:#cbd5e1; }
.trt-e6:not(#_) { border:none; background:transparent; color:#94a3b8; padding:6px 8px; font-weight:700; }
/* categorias.php */
.tie-e1:not(#_) { margin-top:28px; }
.tie-e2:not(#_) { margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.tie-e3:not(#_) { font-size:26px; font-weight:800; margin:0; color:#1a1d27; }
.tie-e4:not(#_) { background:color-mix(in srgb, var(--color-primary, #e8092e) 10%, #fff); color:var(--color-primary, #e8092e); font-weight:700; font-size:14px; border-radius:999px; padding:3px 12px; }
.tie-e5:not(#_) { background:color-mix(in srgb, var(--color-primary, #e8092e) 9%, #fff) !important; }
.tie-e6:not(#_) { font-size:46px; color:var(--color-primary, #e8092e); }
.tie-e7:not(#_) { display:block; font-weight:500; color:#6b7280; font-size:11.5px; margin-top:2px; }

/* ============================================================================
 * AVISO DEL CENTRO DE LA PANTALLA (.shop-aviso)  -  estilo A: blanco con ícono de color
 * Lo escriben php_tienda/agregar_carrito, agregar_deseo, eliminar_deseo, quitar_del_carrito y deshacer_quitar;
 * assets/js/main.js lo pasa al <body>, deja uno solo y lo quita (4 s con botón, 2,5 s sin botón).
 * Partes: .shop-aviso-ic (cuadrito del ícono), .shop-aviso-txt (b = renglón de arriba, small = renglón de abajo),
 * <a> botón principal del color de la tienda (Ver carrito, Ver lista), <button> botón blanco (Deshacer).
 * Color del ícono: .ok verde (agregado), .deseo rojo, .quitar gris, .aviso ámbar (sin unidades / iniciar sesión).
 * Reemplaza el viejo .fixedContainer, que usaba imágenes PNG (se borraron).
 * ============================================================================ */
.shop-aviso {
    position: fixed; left: 50%; top: 50%; z-index: 100010;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 12px;
    width: max-content; max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 12px;
    background: #fff; color: #0f172a;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
    font-size: 14px; line-height: 1.3;
    animation: shopAvisoEntra .22s cubic-bezier(.16, 1, .3, 1);
}
.shop-aviso.saliendo { opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .25s, transform .25s; }
.shop-aviso-ic {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: #f1f5f9; color: #475569;
}
.shop-aviso.ok .shop-aviso-ic { background: #dcfce7; color: #16a34a; }
.shop-aviso.deseo .shop-aviso-ic { background: #ffe4e6; color: #e11d48; }
.shop-aviso.quitar .shop-aviso-ic { background: #f1f5f9; color: #475569; }
.shop-aviso.aviso .shop-aviso-ic { background: #fef3c7; color: #d97706; }
.shop-aviso-txt { min-width: 0; padding-right: 4px; }
.shop-aviso-txt b { display: block; font-weight: 700; color: #0f172a; }
.shop-aviso-txt small { display: block; margin-top: 1px; font-size: 12.5px; color: #64748b; }
.shop-aviso a, .shop-aviso button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.shop-aviso a { border: 0; background: var(--color-primary, #e8092e); color: #fff !important; }
.shop-aviso a:hover { filter: brightness(.92); }
.shop-aviso button { border: 1px solid #e2e8f0; background: #fff; color: #334155; }
.shop-aviso button:hover { background: #f8fafc; }
@keyframes shopAvisoEntra {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 575px) {
    .shop-aviso { font-size: 13px; gap: 10px; }
    .shop-aviso-txt { flex: 1 1 auto; }
}

/* LISTA DE CATEGORÍAS (index.php y el desplegable de categorías): filas más bajas (37 px; antes 70 px por el
   line-height: 47px de style.php que heredaban también el nombre y la flecha) */
.categories_menu_toggle > ul > li > a,
.categories_menu_toggle > ul > li > a * { line-height: 20px !important; }
.categories_menu_toggle > ul > li > a { padding: 7px 16px !important; font-size: 13px !important; }

/* CABECERA (php_menu/cabecera.php), en computador: la parte derecha (Mi cuenta + Carrito) toma el ancho que necesite
   y el buscador se achica lo justo (antes la columna era fija y con un total grande el carrito se montaba sobre
   "Mi cuenta"). El carrito muestra en un renglón "18 productos · $ 425.100"; la cantidad también va en la burbuja. */
@media (min-width: 992px) {
    .header_middle .row > .order-1 { flex: 0 0 auto; width: auto; }
    .header_middle .row > .order-lg-2 { flex: 1 1 0; width: auto; min-width: 0; }
    .header_middle .row > .order-lg-3 { flex: 0 0 auto; width: auto; }
    .mini_cart_wrapper .bus-e22 { display: none; }
    .mini_cart_wrapper .bus-e31:not(#_) { font-size: 13px; font-weight: 700; color: #475569; }
    .mini_cart_wrapper .bus-e31 b { font-size: 14px; }
}

/* MENÚ DEL CELULAR (php_menu/menu_celular.php): el nombre de la empresa cuando no hay logo, sin tocar la X de cerrar */
.offcanvas_logo .bus-e17:not(#_) { font-size: 18px; padding: 0 30px; }

/* ============================================================================
 * TARJETA DE PRODUCTO (php_tienda/tarjeta_articulo.php)  -  estilo A: limpia y compacta
 * Foto cuadrada sin marco, corazón (.tarj-cor) sobre la foto arriba a la derecha, categoría en pequeño (.tarj-cat),
 * nombre a la izquierda en 2 renglones, precio grande (en oferta el anterior tachado al lado) y botón "Agregar"
 * de borde del color de la tienda. En celular una tarjeta por renglón.
 * ============================================================================ */
.tarj-e5:not(#_) { padding: 0; background: #f5f6f8; }
.tarj-e8:not(#_) { object-fit: contain; }
.tarj-cor { position: absolute; top: 10px; right: 10px; z-index: 6; }
.tarj-cor .btn_card_wishlist:not(#_) { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); display: flex; align-items: center; justify-content: center; font-size: 15px; padding: 0; }
.tarj-e9:not(#_) { padding: 12px 14px 14px; text-align: left; }
.tarj-cat { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarj-e10:not(#_) { margin-bottom: 4px; text-align: left; }
.tarj-e11:not(#_) { text-align: left; font-size: 13.5px; }
.tarj-e15:not(#_) { margin: 4px 0 12px; justify-content: flex-start; }
.tarj-e16:not(#_) { margin: 0 !important; gap: 0 8px !important; align-items: baseline !important; }
.tarj-e16 br { display: none; }
.tarj-e16 .current_price:not(#_) { font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; }
.tarj-e16 .current_price.fpre-e1:not(#_) { order: 2; font-size: 13px !important; font-weight: 500 !important; color: #94a3b8 !important; text-decoration: line-through; }
.tarj-e16 .fpre-e2:not(#_) { display: none; }
.tarj-e19:not(#_) { background: #fff; color: var(--color-primary, #e8092e); border: 1.5px solid var(--color-primary, #e8092e); box-shadow: none; padding: 8px 12px; border-radius: 9px; }
.tarj-e19:not(#_):hover { background: var(--color-primary, #e8092e); color: #fff; }
.tarj-e5 img.tarj-e8:not(#_) { padding: 0 !important; max-height: none !important; }
/* sin marco blanco alrededor de la foto: style.php le daba 5px de relleno a la tarjeta (.shop_wrapper .single_product) y
   modern-theme.php 8px a la foto entre 576 y 767 px */
.single_product.tarj-e1:not(#_) { padding: 0 !important; }
.tarj-e5:not(#_) { padding: 0 !important; }
/* sin foto (opción D): fondo gris claro, ícono de foto delgado y "Sin foto" */
.tarj-sinfoto { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #f1f5f9; }
.tarj-sinfoto i { font-size: 42px; color: #cbd5e1; }
.tarj-sinfoto small { font-size: 12px; color: #94a3b8; }
/* detalle del producto (articulo.php) sin foto: el mismo cuadro, más grande y sin lupa */
.det-sinfoto:not(#_) { cursor: default; padding: 0; }
.det-sinfoto .tarj-sinfoto { border-radius: 16px; }
.det-sinfoto .tarj-sinfoto i { font-size: 80px; }
.det-sinfoto .tarj-sinfoto small { font-size: 15px; }
.tarj-cor .btn_card_wishlist:not(#_) { border-radius: 50% !important; }
@media (max-width: 575px) {
    .tarj-e5:not(#_) { padding: 0 !important; aspect-ratio: 4 / 3; }
    .tarj-e9:not(#_) { padding: 12px 14px 14px !important; }
    .tarj-e11:not(#_) { font-size: 14px !important; height: auto !important; max-height: 38px; }
}
/* celular: una tarjeta por renglón (modern-theme.php las ponía de a 2 hasta 767 px; de 576 a 767 px siguen de a 2) */
@media (max-width: 575px) {
    .shop_wrapper > div[class*="col-"]:not(#_),
    #mis_articulos > div[class*="col-"]:not(#_),
    .filter_data .row > div[class*="col-"]:not(#_),
    .row > div[class*="col-"]:has(> .single_product.tarj-e1):not(#_) { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* BOTONES FLOTANTES (abajo a la derecha): carrito con el número en una burbuja aparte (antes el número quedaba
   pegado al ícono porque .cart-float-badge no tenía estilo), WhatsApp verde abajo y "subir" blanco y más pequeño,
   centrado sobre los otros dos. Solo sale al bajar la página (eso ya lo hacía include/footer.php). */
.cart-container a .cart-float-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
    background: #0f172a; color: #fff; border: 2px solid #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
#scrollUp:not(#_) {
    width: 40px !important; height: 40px !important; right: 19px !important; bottom: 136px !important;
    background: #fff !important; color: #334155 !important; border: 1px solid #e2e8f0 !important;
    font-size: 16px !important; box-shadow: 0 4px 14px rgba(15, 23, 42, .16) !important;
}
#scrollUp:not(#_) i { color: #334155 !important; }
#scrollUp:not(#_):hover { background: #f8fafc !important; color: #0f172a !important; }
@media (max-width: 767px) {
    #scrollUp:not(#_) { right: 17px !important; bottom: 128px !important; }
}
/* lista de deseos vacía (php_tienda/tabla_articulos_deseos.php) */
.deseos-vacio { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:60px 16px; }
.deseos-vacio i { font-size:44px; color:#cbd5e1; margin-bottom:6px; }
.deseos-vacio b { font-size:18px; color:#1e293b; }
.deseos-vacio small { font-size:14px; color:#64748b; }
.deseos-vacio a { margin-top:12px; padding:9px 22px; border:1px solid var(--color-primary, #e8092e); border-radius:8px; color:var(--color-primary, #e8092e); font-weight:600; text-decoration:none; }
.deseos-vacio a:hover { background:var(--color-primary, #e8092e); color:#fff; }
/* contenido más ancho en pantallas grandes: antes toda la tienda (cabecera, menú, banners, productos, pie) quedaba en
   1200px y sobraba mucho espacio a los lados; desde 1300px de pantalla llega hasta 1400px, dejando unos 60px a cada lado */
@media (min-width: 1300px) {
    .container:not(#_) { max-width: min(1400px, calc(100% - 120px)); }
}